1426 lines
53 KiB
Vue
Executable File
1426 lines
53 KiB
Vue
Executable File
<template>
|
|
<div class="landing">
|
|
<!-- <div v-if="!tools.isLogged() && (!mysingleevent)">
|
|
<div class="centermydiv">
|
|
<q-banner class="bg-secondary text-white">
|
|
Il Calendario sarà visibile solo dopo aver effettuato l'accesso
|
|
</q-banner>
|
|
|
|
</div>
|
|
</div>-->
|
|
<div>
|
|
<!-- display an myevent -->
|
|
<q-dialog v-model="displayEvent" :maximized="$q.screen.lt.sm">
|
|
<q-card v-if="myevent" class="dialog_card">
|
|
<q-toolbar class="bg-primary text-white">
|
|
<!--<q-toolbar :class="tools.displayClasses(myevent)"-->
|
|
<!--:style="tools.displayStyles(myevent) + ` min-width: `+ tools.myheight_dialog() + `px;`">-->
|
|
<q-toolbar-title>
|
|
{{ $t('cal.event') }}
|
|
</q-toolbar-title>
|
|
<q-btn v-if="editable" flat round color="white" icon="fas fa-copy">
|
|
<q-menu transition-show="flip-right" transition-hide="flip-left">
|
|
<q-list style="min-width: 100px">
|
|
<q-item clickable @click="duplicateEvent(myevent, 7)">
|
|
<q-item-section>Tra 1 Settimana</q-item-section>
|
|
</q-item>
|
|
<q-item clickable @click="duplicateEvent(myevent, 14)">
|
|
<q-item-section>Tra 2 Settimane</q-item-section>
|
|
</q-item>
|
|
<q-item clickable @click="duplicateEvent(myevent, 7, 4)">
|
|
<q-item-section>4 Eventi ogni Settimana</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
<q-btn
|
|
v-if="editable"
|
|
flat
|
|
round
|
|
color="white"
|
|
icon="delete"
|
|
v-close-popup
|
|
@click="deleteEvent(myevent)"
|
|
></q-btn>
|
|
<q-btn
|
|
v-if="editable"
|
|
flat
|
|
round
|
|
color="white"
|
|
icon="edit"
|
|
v-close-popup
|
|
@click="editEvent(myevent)"
|
|
></q-btn>
|
|
<q-btn
|
|
flat
|
|
round
|
|
color="white"
|
|
icon="cancel"
|
|
v-close-popup
|
|
@click="
|
|
myevent = null;
|
|
displayEvent = false;
|
|
"
|
|
></q-btn>
|
|
</q-toolbar>
|
|
<q-card-section class="inset-shadow">
|
|
<q-img
|
|
:src="getImgEvent(myevent)"
|
|
class="absolute-top"
|
|
style="height: 150px"
|
|
:alt="myevent.title"
|
|
>
|
|
</q-img>
|
|
<div style="margin-top: 150px">
|
|
<!--<div v-if="myevent.allday" class="text-caption">{{ getEventDate(myevent) }}</div>-->
|
|
|
|
<q-chip
|
|
:style="`background-color: ${myevent.bgcolor} !important; color: white !important;`"
|
|
text-color="white"
|
|
class="shadow-5 q-mb-md"
|
|
dense
|
|
>
|
|
{{ myevent.title }}
|
|
</q-chip>
|
|
<div
|
|
:class="`cal__details` + ($q.dark.isActive ? `_darktheme` : ``)"
|
|
v-html="myevent.details"
|
|
></div>
|
|
<div v-if="myevent.teacher" class="cal__teacher">
|
|
<span class="cal__teacher-title"
|
|
>{{ $t('cal.teacher') }}: <span class="margin_with"></span
|
|
></span>
|
|
<!--<span class="cal__teacher-content">{{myevent.teacher}}</span>-->
|
|
<CMyTeacher :username="myevent.teacher"></CMyTeacher>
|
|
<CMyTeacher :username="myevent.teacher2"></CMyTeacher>
|
|
<CMyTeacher :username="myevent.teacher3"></CMyTeacher>
|
|
<CMyTeacher :username="myevent.teacher4"></CMyTeacher>
|
|
</div>
|
|
<div v-if="myevent.wherecode" class="cal__where">
|
|
<!--<span v-if="tools.isMobile()"><br/></span>-->
|
|
<span class="cal__where-title">{{ $t('cal.where') }}: </span>
|
|
<span class="cal__where-content">
|
|
<q-chip>
|
|
<q-avatar v-if="getWhereIcon(myevent.wherecode)">
|
|
<img
|
|
:src="
|
|
`images/avatar/` + getWhereIcon(myevent.wherecode)
|
|
"
|
|
alt="Località"
|
|
/>
|
|
</q-avatar>
|
|
<q-avatar
|
|
v-else
|
|
color="blue"
|
|
font-size="20px"
|
|
text-color="white"
|
|
icon="home"
|
|
>
|
|
</q-avatar>
|
|
<span class="cal__teacher-content">{{
|
|
getWhereName(myevent.wherecode)
|
|
}}</span>
|
|
</q-chip>
|
|
</span>
|
|
</div>
|
|
<div
|
|
v-if="myevent.price && isShowPrice(myevent)"
|
|
class="cal__quota"
|
|
>
|
|
<span class="cal__quota-title">{{ $t('event.price') }}:</span>
|
|
<q-chip>
|
|
<span class="cal__quota-content">{{
|
|
getPrice(myevent)
|
|
}}</span>
|
|
</q-chip>
|
|
</div>
|
|
<div v-if="myevent.dateTimeStart" class="cal__when">
|
|
<span class="cal__where-title"
|
|
>{{ $t('cal.when') }}:
|
|
<span
|
|
v-html="tools.getstrDateTimeEvent($t, myevent, true)"
|
|
></span>
|
|
</span>
|
|
</div>
|
|
<p
|
|
v-if="myevent.linkpdf"
|
|
style="margin-top: 10px; text-align: center"
|
|
>
|
|
<q-btn
|
|
size="md"
|
|
type="a"
|
|
:href="myevent.linkpdf"
|
|
target="_blank"
|
|
rounded
|
|
color="primary"
|
|
icon="info"
|
|
:label="$t('cal.showpdf')"
|
|
>
|
|
</q-btn>
|
|
</p>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
rounded
|
|
v-if="!myevent.nobookable && site.confpages.bookingEvents"
|
|
color="primary"
|
|
@click="addBookEventMenu(myevent)"
|
|
:disable="!isEventEnabled(myevent)"
|
|
:label="$t('cal.booking')"
|
|
>
|
|
</q-btn>
|
|
<q-btn
|
|
v-else
|
|
:label="$t('dialog.ok')"
|
|
color="primary"
|
|
v-close-popup
|
|
></q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
<!-- id_bookedeventadd/edit an myevent -->
|
|
|
|
<q-dialog v-model="addEvent" no-backdrop-dismiss persistent>
|
|
<q-card v-if="addEvent" class="dialog_card">
|
|
<q-toolbar class="bg-primary text-white">
|
|
<q-toolbar-title>
|
|
{{ addOrUpdateEvent() }} {{ $t('cal.event') }}
|
|
</q-toolbar-title>
|
|
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
|
</q-toolbar>
|
|
<q-card-section class="inset-shadow">
|
|
<q-form v-if="contextDay" ref="myevent" class="q-gutter-sm">
|
|
<CMySelect
|
|
:label="$t('event.typol')"
|
|
v-model:value="eventForm.typol"
|
|
optval="typol_code"
|
|
optlab="label"
|
|
:options="globalStore.disciplines"
|
|
:useinput="false"
|
|
>
|
|
</CMySelect>
|
|
|
|
<div>
|
|
<q-input
|
|
color="grey-1"
|
|
v-model="eventForm.short_tit"
|
|
autofocus
|
|
debounce="1000"
|
|
:input-style="`background-color: ${eventForm.bgcolor} !important; color: white !important; font-weight: bold; `"
|
|
borderless
|
|
rounded
|
|
dense
|
|
:label="$t('event.short_tit')"
|
|
></q-input>
|
|
|
|
<q-input
|
|
color="grey-1"
|
|
v-model="eventForm.title"
|
|
autofocus
|
|
debounce="1000"
|
|
:input-style="`background-color: ${eventForm.bgcolor} !important; color: white !important; font-weight: bold; `"
|
|
borderless
|
|
rounded
|
|
dense
|
|
:label="$t('event.title')"
|
|
:rules="[(v) => (v && v.length > 0) || $t('event.notempty')]"
|
|
></q-input>
|
|
</div>
|
|
|
|
<q-tabs
|
|
v-model="tabeditor"
|
|
dense
|
|
class="text-grey"
|
|
active-color="primary"
|
|
indicator-color="primary"
|
|
align="justify"
|
|
narrow-indicator
|
|
>
|
|
<q-tab
|
|
name="details"
|
|
label="Descrizione Breve"
|
|
icon="fas fa-pencil-alt"
|
|
/>
|
|
<q-tab
|
|
name="container"
|
|
label="Dettaglio Pagina"
|
|
icon="fas fa-book"
|
|
/>
|
|
<q-tab
|
|
name="settings"
|
|
label="Impostazioni"
|
|
icon="fas fa-calendar-day"
|
|
/>
|
|
</q-tabs>
|
|
|
|
<q-tab-panels v-model="tabeditor" animated>
|
|
<q-tab-panel name="details">
|
|
<div class="q-gutter-sm myflex">
|
|
<q-input
|
|
class="myflex"
|
|
dense
|
|
v-model="eventForm.img"
|
|
:label="$t('event.img')"
|
|
></q-input>
|
|
<q-input
|
|
class="myflex"
|
|
dense
|
|
v-model="eventForm.img_small"
|
|
:label="$t('event.img_small')"
|
|
></q-input>
|
|
</div>
|
|
|
|
<div class="q-gutter-sm myflex">
|
|
<q-input
|
|
class="myflex"
|
|
:style="`background-color: ${eventForm.bgcolor} !important; color: white !important;`"
|
|
filled
|
|
color="white"
|
|
dense
|
|
:label="$t('event.bgcolor')"
|
|
v-model="eventForm.bgcolor"
|
|
>
|
|
<template #append>
|
|
<q-icon
|
|
name="colorize"
|
|
class="cursor-pointer"
|
|
color="white"
|
|
>
|
|
<q-popup-proxy>
|
|
<q-color
|
|
format-model="hex"
|
|
v-model="eventForm.bgcolor"
|
|
></q-color>
|
|
</q-popup-proxy>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
<q-input
|
|
class="myflex"
|
|
dense
|
|
v-model="eventForm.icon"
|
|
:label="$t('event.icon')"
|
|
></q-input>
|
|
</div>
|
|
|
|
<CMyEditor
|
|
v-model:value="eventForm.details"
|
|
:showButtons="false"
|
|
:canModify="true"
|
|
>
|
|
</CMyEditor>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="container">
|
|
<CMyEditor
|
|
v-model:value="eventForm.bodytext"
|
|
:showButtons="false"
|
|
:canModify="true"
|
|
>
|
|
</CMyEditor>
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="settings" class="q-gutter-sm">
|
|
<!--<q-checkbox v-model="eventForm.allday" :label="$t('cal.alldayevent')"></q-checkbox>-->
|
|
|
|
<div class="q-gutter-sm row myflex">
|
|
<CDateTime
|
|
v-model:value="eventForm.dateTimeStart"
|
|
:label="$t('cal.eventstartdatetime')"
|
|
:readonly="false"
|
|
>
|
|
</CDateTime>
|
|
<CDateTime
|
|
v-model:value="eventForm.dateTimeEnd"
|
|
:label="$t('cal.enterEndDateTime')"
|
|
:readonly="false"
|
|
>
|
|
</CDateTime>
|
|
<q-input
|
|
dense
|
|
v-model="eventForm.infoextra"
|
|
:label="$t('cal.infoextra')"
|
|
></q-input>
|
|
</div>
|
|
|
|
<div class="q-gutter-sm myflex">
|
|
<CMySelect
|
|
myclass="myflex"
|
|
:label="$t('cal.teacher') + ' 1°'"
|
|
v-model:value="eventForm.teacher"
|
|
optval="username"
|
|
:optlab="(item) => item.name + ' ' + item.surname"
|
|
:options="calendarStore.operators"
|
|
:useinput="false"
|
|
>
|
|
</CMySelect>
|
|
<CMySelect
|
|
myclass="myflex"
|
|
:label="$t('cal.teacher') + ' 2°'"
|
|
v-model:value="eventForm.teacher2"
|
|
optval="username"
|
|
:optlab="(item) => item.name + ' ' + item.surname"
|
|
:options="calendarStore.operators"
|
|
:useinput="false"
|
|
>
|
|
</CMySelect>
|
|
<CMySelect
|
|
myclass="myflex"
|
|
:label="$t('cal.teacher') + ' 3°'"
|
|
v-model:value="eventForm.teacher3"
|
|
optval="username"
|
|
:optlab="(item) => item.name + ' ' + item.surname"
|
|
:options="calendarStore.operators"
|
|
:useinput="false"
|
|
>
|
|
</CMySelect>
|
|
<CMySelect
|
|
myclass="myflex"
|
|
:label="$t('cal.teacher') + ' 4°'"
|
|
v-model:value="eventForm.teacher4"
|
|
optval="username"
|
|
:optlab="(item) => item.name + ' ' + item.surname"
|
|
:options="calendarStore.operators"
|
|
:useinput="false"
|
|
>
|
|
</CMySelect>
|
|
<CMySelect
|
|
:label="$t('cal.where')"
|
|
v-model:value="eventForm.wherecode"
|
|
optval="code"
|
|
optlab="placename"
|
|
:options="calendarStore.wheres"
|
|
:useinput="false"
|
|
>
|
|
</CMySelect>
|
|
</div>
|
|
|
|
<div class="q-gutter-sm myflex wrap">
|
|
<q-checkbox
|
|
class="myflex wrap"
|
|
dense
|
|
v-model="eventForm.internal"
|
|
:label="$t('event.internal')"
|
|
></q-checkbox>
|
|
<q-checkbox
|
|
class="myflex wrap"
|
|
dense
|
|
v-model="eventForm.lunchAvailable"
|
|
:label="$t('event.lunchAvailable')"
|
|
></q-checkbox>
|
|
<q-checkbox
|
|
class="myflex wrap"
|
|
dense
|
|
v-model="eventForm.dinnerAvailable"
|
|
:label="$t('event.dinnerAvailable')"
|
|
></q-checkbox>
|
|
<q-checkbox
|
|
class="myflex wrap"
|
|
dense
|
|
v-model="eventForm.dinnerSharedAvailable"
|
|
:label="$t('event.dinnerSharedAvailable')"
|
|
></q-checkbox>
|
|
<q-checkbox
|
|
class="myflex wrap"
|
|
dense
|
|
v-model="eventForm.news"
|
|
:label="$t('event.news')"
|
|
></q-checkbox>
|
|
<q-checkbox
|
|
class="myflex wrap"
|
|
dense
|
|
v-model="eventForm.nobookable"
|
|
:label="$t('event.nobookable')"
|
|
></q-checkbox>
|
|
<q-checkbox
|
|
class="myflex wrap"
|
|
dense
|
|
v-model="eventForm.canceled"
|
|
:label="$t('event.canceled')"
|
|
></q-checkbox>
|
|
</div>
|
|
|
|
<div class="q-gutter-sm row items-start"></div>
|
|
|
|
<div class="q-gutter-sm myflex">
|
|
<CMySelect
|
|
:label="$t('event.contribtype')"
|
|
v-model:value="eventForm.contribtype"
|
|
optval="_id"
|
|
optlab="label"
|
|
:useinput="false"
|
|
:newvaluefunc="createContribType"
|
|
:options="calendarStore.contribtype"
|
|
>
|
|
</CMySelect>
|
|
|
|
<div v-if="isShowPrice(eventForm)">
|
|
<q-input
|
|
dense
|
|
type="number"
|
|
v-model="eventForm.price"
|
|
:label="$t('event.price')"
|
|
></q-input>
|
|
<q-input
|
|
dense
|
|
v-model="eventForm.infoafterprice"
|
|
:label="$t('event.infoafterprice')"
|
|
></q-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="q-gutter-sm myflex">
|
|
<CMySelect
|
|
myclass="myflex"
|
|
:label="$t('event.pagefooter') + ' 1°'"
|
|
v-model:value="eventForm.pagefooter"
|
|
style="min-width: 300px"
|
|
:multiple="true"
|
|
optval="path"
|
|
optlab="title"
|
|
:options="calendarStore.internalpages"
|
|
:useinput="false"
|
|
>
|
|
</CMySelect>
|
|
<br />
|
|
<q-input
|
|
class="myflex"
|
|
dense
|
|
v-model="eventForm.linkpage"
|
|
:label="$t('event.linkpage')"
|
|
></q-input>
|
|
<q-input
|
|
class="myflex"
|
|
dense
|
|
v-model="eventForm.linkpdf"
|
|
:label="$t('event.linkpdf')"
|
|
></q-input>
|
|
<q-input
|
|
class="myflex"
|
|
dense
|
|
v-model="eventForm.facebook"
|
|
:label="$t('event.facebook')"
|
|
></q-input>
|
|
</div>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-form>
|
|
</q-card-section>
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
:label="$t('dialog.ok')"
|
|
color="primary"
|
|
@click="saveEvent"
|
|
></q-btn>
|
|
<q-btn
|
|
flat
|
|
:label="$t('dialog.cancel')"
|
|
color="primary"
|
|
v-close-popup
|
|
></q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog v-model="bookEventpage.show" no-backdrop-dismiss>
|
|
<q-card v-if="bookEventpage.show" class="dialog_card">
|
|
<q-toolbar class="bg-primary text-white">
|
|
<q-toolbar-title>
|
|
{{ $t('cal.booking') }}
|
|
</q-toolbar-title>
|
|
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
|
</q-toolbar>
|
|
|
|
<q-card-section class="inset-shadow">
|
|
<q-img
|
|
:src="getImgEvent(myevent)"
|
|
class="absolute-top"
|
|
style="height: 200px"
|
|
:alt="myevent.title"
|
|
>
|
|
</q-img>
|
|
<div style="margin-top: 150px">
|
|
<q-chip
|
|
:style="`background-color: ${myevent.bgcolor} !important; color: white !important;`"
|
|
text-color="white"
|
|
class="shadow-5 q-mb-md"
|
|
dense
|
|
>
|
|
{{ myevent.title }}
|
|
</q-chip>
|
|
<div v-if="myevent.dateTimeStart" class="cal__when">
|
|
<span class="cal__where-title"
|
|
>{{ $t('cal.when') }}:
|
|
<span
|
|
v-html="tools.getstrDateTimeEvent($t, myevent, true)"
|
|
></span>
|
|
</span>
|
|
</div>
|
|
<div class="q-pa-xs">
|
|
<q-card class="text-white windowcol" style="display: block">
|
|
<q-card-section class="q-pa-xs">
|
|
<div
|
|
style="display: inline-flex"
|
|
class="q-px-xs centermydiv"
|
|
>
|
|
<q-checkbox
|
|
:disable="
|
|
(bookEventpage.bookedevent &&
|
|
bookEventpage.bookedevent.booked) ||
|
|
bookEventpage.bookedevent === undefined ||
|
|
!isEventEnabled(myevent)
|
|
"
|
|
style="color: black"
|
|
v-model="bookEventForm.booked"
|
|
:label="$t('cal.bookingtextdefault')"
|
|
color="green"
|
|
>
|
|
</q-checkbox>
|
|
|
|
<div
|
|
v-if="bookEventForm.booked"
|
|
class="q-gutter-xs q-mx-xs"
|
|
style="min-width: 140px"
|
|
>
|
|
<q-select
|
|
:behavior="
|
|
$q.platform.is.ios === true ? 'dialog' : 'menu'
|
|
"
|
|
rounded
|
|
outlined
|
|
v-model="bookEventForm.numpeople"
|
|
:options="tools.SelectListNumPeople"
|
|
:label="$t('cal.selnumpeople')"
|
|
emit-value
|
|
map-options
|
|
>
|
|
</q-select>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="myevent.lunchAvailable"
|
|
class="q-px-xs centermydiv"
|
|
style="display: inline-flex"
|
|
>
|
|
<div
|
|
style="display: inline-flex"
|
|
class="q-px-xs centermydiv"
|
|
>
|
|
<div class="itemprenota">
|
|
{{ $t('cal.selnumpeopleLunch') }}
|
|
</div>
|
|
<div
|
|
class="q-gutter-xs"
|
|
style="min-width: 140px; margin-left: 10px"
|
|
>
|
|
<q-select
|
|
:behavior="
|
|
$q.platform.is.ios === true ? 'dialog' : 'menu'
|
|
"
|
|
rounded
|
|
outlined
|
|
v-model="bookEventForm.numpeopleLunch"
|
|
:options="tools.SelectListNumPeople"
|
|
:label="$t('cal.Lunch')"
|
|
emit-value
|
|
map-options
|
|
>
|
|
</q-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div
|
|
v-if="myevent.dinnerAvailable"
|
|
class="q-px-xs centermydiv"
|
|
style="display: inline-flex"
|
|
>
|
|
<div
|
|
style="display: inline-flex"
|
|
class="q-px-xs centermydiv"
|
|
>
|
|
<div class="itemprenota">
|
|
{{ $t('cal.selnumpeopleDinner') }}
|
|
</div>
|
|
<div
|
|
class="q-gutter-xs"
|
|
style="min-width: 180px; margin-left: 10px"
|
|
>
|
|
<q-select
|
|
:behavior="
|
|
$q.platform.is.ios === true ? 'dialog' : 'menu'
|
|
"
|
|
rounded
|
|
outlined
|
|
v-model="bookEventForm.numpeopleDinner"
|
|
:options="tools.SelectListNumPeople"
|
|
:label="$t('cal.Dinner')"
|
|
emit-value
|
|
map-options
|
|
>
|
|
</q-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="myevent.dinnerSharedAvailable"
|
|
class="q-px-xs centermydiv"
|
|
style="display: inline-flex"
|
|
>
|
|
<div
|
|
style="display: inline-flex"
|
|
class="q-px-xs centermydiv"
|
|
>
|
|
<div class="itemprenota">
|
|
{{ $t('cal.selnumpeopleDinnerShared') }}
|
|
</div>
|
|
<div
|
|
class="q-gutter-xs"
|
|
style="min-width: 180px; margin-left: 10px"
|
|
>
|
|
<q-select
|
|
:behavior="
|
|
$q.platform.is.ios === true ? 'dialog' : 'menu'
|
|
"
|
|
rounded
|
|
outlined
|
|
v-model="bookEventForm.numpeopleDinnerShared"
|
|
:options="tools.SelectListNumPeople"
|
|
:label="$t('cal.DinnerShared')"
|
|
emit-value
|
|
map-options
|
|
>
|
|
</q-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<q-input
|
|
v-model="bookEventForm.msgbooking"
|
|
:label="$t('cal.writemsg') + ':'"
|
|
type="textarea"
|
|
debounce="500"
|
|
input-class="myinput-area"
|
|
>
|
|
</q-input>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
|
|
<p
|
|
v-if="myevent.linkpdf"
|
|
style="margin-top: 10px; text-align: center"
|
|
>
|
|
<q-btn
|
|
size="md"
|
|
type="a"
|
|
:href="myevent.linkpdf"
|
|
target="_blank"
|
|
rounded
|
|
color="primary"
|
|
icon="info"
|
|
:label="$t('cal.showpdf')"
|
|
>
|
|
</q-btn>
|
|
</p>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
v-if="bookEventpage.state === EState.Modifying"
|
|
flat
|
|
:label="$t('cal.cancelbooking')"
|
|
color="negative"
|
|
@click="CancelBookingEvent($q, myevent, bookEventForm._id, true)"
|
|
></q-btn>
|
|
<q-btn
|
|
v-if="checkseinviaMsg()"
|
|
flat
|
|
:label="$t('dialog.sendonlymsg')"
|
|
color="primary"
|
|
@click="sendMsg(myevent)"
|
|
></q-btn>
|
|
<q-btn
|
|
v-else
|
|
:label="getTitleBtnBooking()"
|
|
color="primary"
|
|
@click="saveBookEvent(myevent)"
|
|
:disable="
|
|
!(bookEventpage.state === EState.Creating || hasModifiedBooking)
|
|
"
|
|
></q-btn>
|
|
|
|
<q-btn
|
|
flat
|
|
:label="$t('dialog.cancel')"
|
|
color="primary"
|
|
v-close-popup
|
|
></q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog v-model="askInfopage.show" no-backdrop-dismiss>
|
|
<q-card v-if="askInfopage.show" class="dialog_card">
|
|
<q-toolbar class="bg-primary text-white">
|
|
<q-toolbar-title>
|
|
{{ $t('cal.booking') }}
|
|
</q-toolbar-title>
|
|
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
|
</q-toolbar>
|
|
|
|
<q-card-section class="inset-shadow">
|
|
<q-img
|
|
:src="getImgEvent(myevent)"
|
|
class="absolute-top"
|
|
style="height: 150px"
|
|
:alt="myevent.title"
|
|
>
|
|
</q-img>
|
|
<div style="margin-top: 150px">
|
|
<q-chip
|
|
:style="`background-color: ${myevent.bgcolor} !important; color: white !important;`"
|
|
text-color="white"
|
|
class="shadow-5 q-mb-md"
|
|
dense
|
|
>
|
|
{{ myevent.title }}
|
|
</q-chip>
|
|
<div v-if="myevent.dateTimeStart" class="cal__when">
|
|
<span class="cal__where-title"
|
|
>{{ $t('cal.when') }}:
|
|
<span
|
|
v-html="tools.getstrDateTimeEvent($t, myevent, true)"
|
|
></span>
|
|
</span>
|
|
</div>
|
|
<div class="q-pa-xs">
|
|
<q-card class="text-white windowcol">
|
|
<q-card-section>
|
|
<q-input
|
|
v-model="askInfoForm.message"
|
|
:label="$t('cal.writemsg') + ':'"
|
|
autofocus
|
|
debounce="500"
|
|
type="textarea"
|
|
input-class="myinput-area"
|
|
>
|
|
</q-input>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
flat
|
|
:label="$t('dialog.sendmsg')"
|
|
color="primary"
|
|
@click="sendMsg(myevent)"
|
|
></q-btn>
|
|
<q-btn
|
|
flat
|
|
:label="$t('dialog.cancel')"
|
|
color="primary"
|
|
v-close-popup
|
|
></q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<!--v-touch-swipe.mouse.left.right="handleSwipe" -->
|
|
|
|
<!-- the calendar -->
|
|
<q-page
|
|
v-if="visuAllCal() && showfirstN === 0"
|
|
class="column"
|
|
style="min-height: 200px !important"
|
|
>
|
|
<div>
|
|
<q-toolbar class="mytoolbar">
|
|
<q-btn
|
|
color="primary"
|
|
round
|
|
icon="keyboard_arrow_left"
|
|
@click="calendarPrev"
|
|
/>
|
|
<q-btn
|
|
color="primary"
|
|
round
|
|
icon="keyboard_arrow_right"
|
|
@click="calendarNext"
|
|
/>
|
|
<q-separator vertical />
|
|
<!--<q-btn color="primary" :label="$t('dialog.today')" class="q-mx-md" @click="SetToday"></q-btn>-->
|
|
<q-separator vertical />
|
|
<!--<q-btn label="GG" color="primary" @click="calendarView = 'day'"/>
|
|
<q-btn label="Set" color="primary" @click="calendarView = 'week'"/>-->
|
|
<!--
|
|
<q-btn label="5 GG" color="primary" @click="calendarView = '5day-agenda'"/>
|
|
<q-btn label="Sett" color="primary" @click="calendarView = 'week-agenda'"/>
|
|
<q-btn label="Mese" color="primary" @click="calendarView = 'month'"/>
|
|
-->
|
|
<q-space />
|
|
</q-toolbar>
|
|
<q-separator />
|
|
<div class="text-center">
|
|
<span class="q-mr-xl q-toolbar__title nowrap text-blue">{{
|
|
title_cal()
|
|
}}</span>
|
|
</div>
|
|
|
|
<!--
|
|
:theme="theme"
|
|
:enable-themes="enableThemes === true"
|
|
|
|
-->
|
|
|
|
<q-calendar-month
|
|
v-if="visuAllCal()"
|
|
ref="calendar"
|
|
class="calendar"
|
|
:key="keyValue"
|
|
v-model="selectedDate"
|
|
:locale="calendarStore.locale"
|
|
:maxDays="calendarStore.maxDays"
|
|
animated
|
|
transition-prev="slide-right"
|
|
transition-next="slide-left"
|
|
:dragOverFunc="onDragOver"
|
|
:dropFunc="onDrop"
|
|
:view="calendarView"
|
|
:weekdays="weekdays"
|
|
:interval-minutes="60 * calendarStore.intervalRangeStep"
|
|
:interval-start="calendarStore.intervalStart()"
|
|
:interval-count="calendarStore.intervalCount()"
|
|
:hour24-format="calendarStore.hour24Format"
|
|
:short-month-label="calendarStore.shortMonthLabel"
|
|
:show-day-of-year-label="calendarStore.showDayOfYearLabel"
|
|
:hide-header="calendarStore.hideHeader"
|
|
:no-scroll="calendarStore.noScroll"
|
|
:short-weekday-label="calendarStore.shortWeekdayLabel"
|
|
:short-interval-label="calendarStore.shortIntervalLabel"
|
|
:interval-height="calendarStore.intervalHeight"
|
|
:resource-height="calendarStore.resourceHeight"
|
|
:resource-width="calendarStore.resourceWidth"
|
|
:day-height="dayHeight()"
|
|
:show-month-label="calendarStore.showMonthLabel"
|
|
:show-work-weeks="calendarStore.showWorkWeeks"
|
|
@change="onChanged"
|
|
@moved="onMoved"
|
|
@click-date="onDateChanged"
|
|
@click-interval="addEventMenu"
|
|
@click-time="addEventMenu"
|
|
@click-day="addEventMenu"
|
|
@click-workweek="addEventMenu"
|
|
@click-week="addEventMenu"
|
|
dayPadding="35px 2px"
|
|
>
|
|
<template #day="{ scope: { timestamp } }">
|
|
<template
|
|
v-for="(event, index) in getEvents(timestamp.date)"
|
|
:key="index"
|
|
>
|
|
<q-badge
|
|
style="width: 100%; cursor: pointer"
|
|
:class="badgeClasses(event, 'day')"
|
|
:style="badgeStyles(event, 'day')"
|
|
@click.stop.prevent="showEvent(event)"
|
|
:draggable="tools.isManager()"
|
|
>
|
|
<!--
|
|
@dragstart.native="(e) => onDragStart(e, event)"
|
|
@dragend.native="(e) => onDragEnd(e, event)"
|
|
@dragenter.native="(e) => onDragEnter(e, event)"
|
|
@touchmove.native="(e) => {}"-->
|
|
|
|
<span class="">{{ getTitleEv(event) }}</span>
|
|
</q-badge>
|
|
<div class="text-center">
|
|
<img
|
|
:src="getImgEvent(event)"
|
|
class="text-center listaev__tdimg_small"
|
|
:alt="event.title"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<template #day-header="{ scope: { timestamp } }">
|
|
<div class="row justify-center">
|
|
<template
|
|
v-for="(event, index) in eventsMap[timestamp.date]"
|
|
:key="index"
|
|
>
|
|
<q-badge
|
|
class="q-ma-xs"
|
|
:class="badgeClasses(event, 'header')"
|
|
:style="badgeStyles(event, 'header')"
|
|
style="
|
|
width: 10px;
|
|
max-width: 10px;
|
|
height: 10px;
|
|
max-height: 10px;
|
|
"
|
|
></q-badge>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<template
|
|
#day-body="{
|
|
scope: { timestamp, timeStartPos, timeDurationHeight },
|
|
}"
|
|
>
|
|
<template
|
|
v-for="(event, index) in getEvents(timestamp.date)"
|
|
:key="index"
|
|
>
|
|
<div
|
|
:label="tools.getstrTime(event.dateTimeStart)"
|
|
class="justify-start q-ma-sm shadow-5 bg-blue-grey-6"
|
|
>
|
|
<div
|
|
v-if="getImgEvent(event)"
|
|
class="row justify-center"
|
|
style="margin-top: 30px; width: 100%"
|
|
>
|
|
<q-avatar
|
|
style="
|
|
margin-top: -25px;
|
|
margin-bottom: 10px;
|
|
font-size: 60px;
|
|
max-height: 50px;
|
|
"
|
|
>
|
|
<img
|
|
:src="getImgEvent(event)"
|
|
style="border: #a4edf6 solid 5px"
|
|
/>
|
|
</q-avatar>
|
|
</div>
|
|
<div class="col-12 q-px-xs text-white">
|
|
<strong>{{ tools.getstrTime(event.dateTimeStart) }}</strong>
|
|
</div>
|
|
<div
|
|
v-if="getTitleEv(event)"
|
|
class="col-12 q-px-xs text-white"
|
|
style="font-size: 0.75rem"
|
|
>
|
|
<q-badge
|
|
:key="index"
|
|
multi-line
|
|
class="my-event-rel justify-center rounded-borders"
|
|
:class="badgeClasses(event, 'body')"
|
|
:style="
|
|
badgeStyles(
|
|
event,
|
|
'body',
|
|
timeStartPos,
|
|
timeDurationHeight
|
|
)
|
|
"
|
|
@click.stop.prevent="showEvent(event)"
|
|
:draggable="tools.isManager()"
|
|
>
|
|
<!--
|
|
@dragstart.native="(e) => onDragStart(e, event)"
|
|
@dragend.native="(e) => onDragEnd(e, event)"
|
|
@dragenter.native="(e) => onDragEnter(e, event)"
|
|
@touchmove.native="(e) => {}"-->
|
|
|
|
<span class="">{{ getTitleEv(event) }}</span> <br />
|
|
</q-badge>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<q-badge
|
|
:key="index"
|
|
class="my-event justify-center"
|
|
:class="badgeClasses(event, 'body')"
|
|
:style="badgeStyles(event, 'body', timeStartPos, timeDurationHeight)"
|
|
@click.stop.prevent="showEvent(event)"
|
|
:draggable="tools.isManager()"
|
|
@dragstart.native="(e) => onDragStart(e, event)"
|
|
@dragend.native="(e) => onDragEnd(e, event)"
|
|
@dragenter.native="(e) => onDragEnter(e, event)"
|
|
@touchmove.native="(e) => {}"
|
|
>
|
|
<q-icon v-if="event.icon" :name="event.icon" class="q-mr-xs"></q-icon>
|
|
<p class="">{{ getTitleEv(event) }}</p> <br>
|
|
<div class="text-center"><img :src="getImgEvent(event)"
|
|
class="text-center listaev__tdimg_small"
|
|
:alt="event.title">
|
|
</div>
|
|
|
|
|
|
</q-badge> -->
|
|
</template>
|
|
</template>
|
|
</q-calendar-month>
|
|
</div>
|
|
</q-page>
|
|
|
|
<div class="q-mt-md">
|
|
<div v-if="!mysingleevent && getNumEvents() > 0">
|
|
<p class="text-subtitle1 text-red bg-amber text-center">
|
|
LISTA PROSSIMI
|
|
<span v-if="showfirstN > 0">{{ showfirstN }}</span> EVENTI:
|
|
</p>
|
|
|
|
<!--<q-toggle v-model="showPrev" :val="lists.MenuAction.SHOW_PREV_REC"
|
|
:label="$t('grid.showprevedit')"></q-toggle>-->
|
|
|
|
<q-markup-table
|
|
wrap-cells
|
|
bordered
|
|
separator="horizontal"
|
|
class="listaev__table"
|
|
>
|
|
<tbody>
|
|
<tr
|
|
v-for="(event, index) in getEventList()"
|
|
class="listaev listaev__table"
|
|
:key="index"
|
|
>
|
|
<td :class="clEvent(event)">
|
|
<div class="listaev__align_chips">
|
|
<img
|
|
:src="getImgEvent(event)"
|
|
@click="selectEvent(event)"
|
|
class="
|
|
text-left
|
|
padding_cell
|
|
listaev__tdimg listaev__img
|
|
cursor-pointer
|
|
q-mx-sm
|
|
"
|
|
:style="getStyleByEvent(event, event === myevent)"
|
|
:alt="event.title"
|
|
/>
|
|
<q-chip
|
|
dense
|
|
v-if="isAlreadyBooked(event)"
|
|
class="cltexth4 chipbooked shadow-5 q-mb-md"
|
|
color="green"
|
|
text-color="white"
|
|
icon="event_available"
|
|
>{{ $t('cal.booked') }}
|
|
</q-chip>
|
|
|
|
<q-chip
|
|
v-if="event === myevent && !displayEvent && editable"
|
|
class="text-center shadow-5 glossy bg-blue chipmodif"
|
|
>
|
|
<q-btn
|
|
v-if="editable"
|
|
flat
|
|
round
|
|
color="white"
|
|
icon="fas fa-copy"
|
|
>
|
|
<q-menu
|
|
transition-show="flip-right"
|
|
transition-hide="flip-left"
|
|
>
|
|
<q-list style="min-width: 100px">
|
|
<q-item
|
|
clickable
|
|
@click="duplicateEvent(myevent, 7)"
|
|
>
|
|
<q-item-section>Tra 1 Settimana</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
@click="duplicateEvent(myevent, 14)"
|
|
>
|
|
<q-item-section>Tra 2 Settimane</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
@click="duplicateEvent(myevent, 7, 4)"
|
|
>
|
|
<q-item-section
|
|
>4 Eventi ogni Settimana</q-item-section
|
|
>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
<q-btn
|
|
v-if="editable"
|
|
flat
|
|
round
|
|
color="white"
|
|
icon="delete"
|
|
v-close-popup
|
|
@click="deleteEvent(myevent)"
|
|
></q-btn>
|
|
<q-btn
|
|
v-if="editable"
|
|
flat
|
|
round
|
|
color="white"
|
|
icon="edit"
|
|
v-close-popup
|
|
@click="editEvent(myevent)"
|
|
></q-btn>
|
|
<q-btn
|
|
v-if="editable"
|
|
flat
|
|
round
|
|
color="white"
|
|
icon="cancel"
|
|
@click="selectEvent(null)"
|
|
></q-btn>
|
|
</q-chip>
|
|
<q-chip
|
|
v-if="event.news"
|
|
class="cltexth4 chipnews shadow-5 glossy text-right"
|
|
color="red"
|
|
text-color="white"
|
|
icon-right="star"
|
|
icon="star"
|
|
dense
|
|
style=""
|
|
>
|
|
{{ $t('event.news') }}
|
|
</q-chip>
|
|
</div>
|
|
|
|
<div
|
|
class="
|
|
listaev__date listaev__align_center_mobile
|
|
text-center
|
|
"
|
|
>
|
|
<span
|
|
v-html="tools.getstrDateTimeEvent($t, event, true)"
|
|
></span>
|
|
</div>
|
|
|
|
<div class="listaev__align_center_mobile">
|
|
<div style="margin: 10px"></div>
|
|
|
|
<div v-if="event.internal">
|
|
<q-chip color="blue" text-color="white"
|
|
>Evento Interno:</q-chip
|
|
>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<!-- Se c'è un link, allora -->
|
|
|
|
<q-btn
|
|
size="md"
|
|
type="a"
|
|
class="text-center boldhigh"
|
|
:to="`/event/${event.typol}/${event._id}`"
|
|
:style="`background-color: ${event.bgcolor} !important; color: white !important;`"
|
|
ripple
|
|
rounded
|
|
:label="getTitleEv(event)"
|
|
:color="event.bgcolor"
|
|
text-color="white"
|
|
glossy
|
|
>
|
|
</q-btn>
|
|
|
|
<q-btn
|
|
:text-color="$q.dark.isActive ? `white` : `black`"
|
|
icon="fas fa-share-alt"
|
|
label="Condividi"
|
|
@click="condividipag(`/event/${event.typol}/${event._id}`)"
|
|
></q-btn>
|
|
|
|
<!--<div v-if="tools.isMobile()" class="cltexth3 text-center"-->
|
|
<!--:style="`background-color: ${event.bgcolor} !important; color: white !important;`">-->
|
|
<!--{{event.title}}-->
|
|
<!--</div>-->
|
|
<!--<q-chip v-else class="cltexth3 text-center"-->
|
|
<!--:style="`background-color: ${event.bgcolor} !important; color: white !important;`"-->
|
|
<!--text-color="white"-->
|
|
<!--:icon="event.icon"-->
|
|
<!--dense>{{event.title}}-->
|
|
<!--</q-chip>-->
|
|
</div>
|
|
|
|
<div style="margin: 10px"></div>
|
|
|
|
<p
|
|
:class="
|
|
`listaev__details` + $q.dark.isActive
|
|
? `_darktheme`
|
|
: ``
|
|
"
|
|
v-html="event.details"
|
|
></p>
|
|
<div v-if="event.teacher" class="">
|
|
<span class="cal__teacher-title"
|
|
>{{ $t('cal.teacher') }}:
|
|
<span class="margin_with"></span
|
|
></span>
|
|
|
|
<CMyTeacher :username="event.teacher"></CMyTeacher>
|
|
<CMyTeacher :username="event.teacher2"></CMyTeacher>
|
|
<CMyTeacher :username="event.teacher3"></CMyTeacher>
|
|
<CMyTeacher :username="event.teacher4"></CMyTeacher>
|
|
|
|
<span v-if="event.wherecode" class="">
|
|
<span v-if="tools.isMobile()"><br /></span>
|
|
<span class="cal__where-title"
|
|
>{{ $t('cal.where') }}:
|
|
</span>
|
|
|
|
<q-chip>
|
|
<q-avatar v-if="getWhereIcon(event.wherecode)">
|
|
<img
|
|
:src="
|
|
`images/avatar/` + getWhereIcon(event.wherecode)
|
|
"
|
|
:alt="event.wherecode"
|
|
/>
|
|
</q-avatar>
|
|
<q-avatar
|
|
color="blue"
|
|
font-size="20px"
|
|
text-color="white"
|
|
icon="home"
|
|
>
|
|
</q-avatar>
|
|
<span class="cal__teacher-content">{{
|
|
getWhereName(event.wherecode)
|
|
}}</span>
|
|
</q-chip>
|
|
</span>
|
|
</div>
|
|
<div v-if="event.contribtype" class="">
|
|
<span class="cal__quota-title"
|
|
>{{ $t('event.price') }}:<span
|
|
class="margin_with"
|
|
></span
|
|
></span>
|
|
<span v-if="!isShowPrice(event)" class="">
|
|
<q-chip
|
|
class="glossy"
|
|
color="orange"
|
|
text-color="white"
|
|
>
|
|
<span class="cal__quota-content">{{
|
|
getContribtypeById(event.contribtype)
|
|
}}</span>
|
|
</q-chip>
|
|
</span>
|
|
|
|
<q-chip
|
|
v-if="event.price && isShowPrice(event)"
|
|
class="glossy"
|
|
color="orange"
|
|
text-color="white"
|
|
icon-right="star"
|
|
>
|
|
<span class="cal__quota-content">{{
|
|
getPrice(event)
|
|
}}</span>
|
|
</q-chip>
|
|
</div>
|
|
|
|
<div class="row centeritems">
|
|
<q-btn
|
|
v-if="event.linkpdf"
|
|
size="md"
|
|
type="a"
|
|
:href="event.linkpdf"
|
|
target="_blank"
|
|
rounded
|
|
color="primary"
|
|
icon="info"
|
|
class="q-ma-sm"
|
|
:label="$t('cal.showpdf')"
|
|
>
|
|
</q-btn>
|
|
<q-btn
|
|
rounded
|
|
class="q-ma-sm"
|
|
color="primary"
|
|
:to="`/event/${event.typol}/${event._id}`"
|
|
:label="$t('event.openpage')"
|
|
>
|
|
</q-btn>
|
|
<q-btn
|
|
rounded
|
|
outline
|
|
class="q-ma-sm"
|
|
color="primary"
|
|
@click="askForInfoEventMenu(event)"
|
|
:label="$t('event.askinfo')"
|
|
>
|
|
</q-btn>
|
|
<!--<q-btn rounded outline class="q-ma-sm"
|
|
v-if="!event.nobookable && !isAlreadyBooked(event) && site.confpages.bookingEvents"
|
|
color="primary" @click="addBookEventMenu(event)"
|
|
:label="$t('cal.booking')" :disable="!isEventEnabled(event)">
|
|
</q-btn>-->
|
|
<q-btn
|
|
rounded
|
|
outline
|
|
class="q-ma-sm"
|
|
v-if="
|
|
!event.nobookable &&
|
|
isAlreadyBooked(event) &&
|
|
site.confpages.bookingEvents
|
|
"
|
|
text-color="red"
|
|
@click="EditBookEvent(event)"
|
|
:label="$t('cal.modifybooking')"
|
|
>
|
|
</q-btn>
|
|
<!--
|
|
<q-btn push rounded v-if="!event.nobookable && isAlreadyBooked(event)" color="positive" @click="BookEvent(event)"
|
|
:label="$t('cal.booked')">
|
|
</q-btn>
|
|
--></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</q-markup-table>
|
|
|
|
<div class="q-ma-lg text-center">
|
|
<q-btn
|
|
v-if="getNumEvents() > 0"
|
|
rounded
|
|
type="a"
|
|
to="/calendario-eventi"
|
|
color="primary"
|
|
icon="event"
|
|
size="lg"
|
|
:label="$t('cal.showlastschedule')"
|
|
>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<CMySingleEvent
|
|
v-if="mysingleevent"
|
|
:myevent="mysingleevent"
|
|
calendarView="month"
|
|
:iseditable="editable"
|
|
@duplicateEvent="duplicateEvent"
|
|
@askForInfoEventMenu="askForInfoEventMenu"
|
|
@deleteEvent="deleteEvent"
|
|
@editEvent="editEvent"
|
|
@addBookEventMenu="addBookEventMenu"
|
|
@EditBookEvent="EditBookEvent"
|
|
>
|
|
</CMySingleEvent>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" src="./CEventsCalendar.ts">
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import './CEventsCalendar.scss';
|
|
</style>
|