- CEventsCalendar component added
This commit is contained in:
Paolo Arena
625
src/components/CEventsCalendar/CEventsCalendar.vue
Normal file
625
src/components/CEventsCalendar/CEventsCalendar.vue
Normal file
@@ -0,0 +1,625 @@
|
||||
$t('
|
||||
<template>
|
||||
<div class="landing">
|
||||
<CTitle imgbackground="../../statics/images/calendario_eventi.jpg"
|
||||
headtitle="Calendario Eventi" sizes="max-height: 120px"></CTitle>
|
||||
|
||||
|
||||
<q-page class="column">
|
||||
<!-- display an myevent -->
|
||||
<q-dialog v-model="displayEvent">
|
||||
<q-card v-if="myevent">
|
||||
<q-toolbar :class="displayClasses(myevent)"
|
||||
:style="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="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></q-btn>
|
||||
</q-toolbar>
|
||||
<q-card-section class="inset-shadow">
|
||||
<q-img :src="`../../statics/`+myevent.img"
|
||||
class="absolute-top"
|
||||
style="height: 150px;">
|
||||
</q-img>
|
||||
<div style="margin-top: 150px;">
|
||||
<div v-if="myevent.allDay" class="text-caption">{{ getEventDate(myevent) }}</div>
|
||||
|
||||
<div class="cal__title">{{myevent.title}}</div>
|
||||
<div class="cal__details" 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>-->
|
||||
<span class="cal__teacher-content">
|
||||
<q-chip>
|
||||
<q-avatar>
|
||||
<img :src="`../../statics/images/avatar/` + myevent.avatar">
|
||||
</q-avatar>
|
||||
<span class="cal__teacher-content">{{myevent.teacher}}</span>
|
||||
</q-chip>
|
||||
<span v-if="myevent.avatar2 && myevent.teacher2" class="margin_avatar2"></span>
|
||||
<q-chip v-if="myevent.avatar2 && myevent.teacher2">
|
||||
<q-avatar>
|
||||
<img :src="`../../statics/images/avatar/` + myevent.avatar2">
|
||||
</q-avatar>
|
||||
<span class="cal__teacher-content">{{myevent.teacher2}}</span>
|
||||
</q-chip>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="myevent.where" 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="myevent.whereicon">
|
||||
<img :src="`../../statics/images/avatar/` + myevent.whereicon">
|
||||
</q-avatar>
|
||||
<q-avatar color="blue" font-size="20px" text-color="white" icon="home">
|
||||
</q-avatar>
|
||||
<span class="cal__teacher-content">{{myevent.where}}</span>
|
||||
</q-chip>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="myevent.date" class="cal__when">
|
||||
<span class="cal__where-title">{{$t('cal.when')}}: </span>
|
||||
<span class="cal__where-content">{{func_tools.getDateStr(myevent.date)}}</span>
|
||||
<span v-if="myevent.days > 1" class="cal__where-content"> - {{func_tools.getDateStr(tools.addDays(myevent.date, myevent.days - 1))}}<br/></span>
|
||||
<span v-if="myevent.infoextra" class="cal__hours">
|
||||
<span class="cal__hours-title">{{$t('cal.hours')}}: </span>
|
||||
<span class="cal__hours-content">{{ myevent.infoextra }} </span>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span v-if="myevent.time" class="cal__hours">
|
||||
-
|
||||
<span class="cal__hours-title">{{$t('cal.hours')}}: </span>
|
||||
<span class="cal__hours-content">{{$t('cal.starttime')}} {{ myevent.time }} {{$t('cal.endtime')}}: {{
|
||||
getEndTime(myevent) }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<p v-if="myevent.linkpdf" style="margin-top: 10px; text-align: center">
|
||||
<q-btn size="md" type="a" :href="`../../statics/` + myevent.linkpdf"
|
||||
target="_blank" rounded color="primary" icon="info" label="Vedi Info">
|
||||
</q-btn>
|
||||
</p>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn rounded v-if="!myevent.nobookable && static_data.functionality.BOOKING_EVENTS"
|
||||
color="primary" @click="addBookEventMenu(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>
|
||||
<!-- add/edit an myevent -->
|
||||
|
||||
<q-dialog v-model="addEvent" no-backdrop-dismiss>
|
||||
<q-card v-if="addEvent" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
|
||||
<q-toolbar class="bg-primary text-white">
|
||||
<q-toolbar-title>
|
||||
{{ addOrUpdateEvent }} 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-md">
|
||||
<q-input v-model="eventForm.title" autofocus label="Title"
|
||||
:rules="[v => v && v.length > 0 || 'Field cannot be empty']"></q-input>
|
||||
<q-input type="textarea" v-model="eventForm.details"
|
||||
:label="$t('cal.details')"></q-input>
|
||||
<q-checkbox v-model="eventForm.allDay" :label="$t('cal.alldayevent')"></q-checkbox>
|
||||
|
||||
<q-input v-if="eventForm.allDay" color="blue-6" filled
|
||||
v-model="eventForm.dateTimeStart"
|
||||
:label="$t('cal.enterdate')" mask="####-##-##">
|
||||
<template #append>
|
||||
<q-icon name="event" class="cursor-pointer">
|
||||
<q-popup-proxy v-model="showDateScrollerAllDay">
|
||||
<q-date-scroller
|
||||
v-model="eventForm.dateTimeStart"
|
||||
:locale="locale"
|
||||
:hour24-format="true"
|
||||
:rounded-borders="true"
|
||||
border-color="#2196f3"
|
||||
bar-color="#2196f3"
|
||||
color="white"
|
||||
background-color="primary"
|
||||
inner-color="primary"
|
||||
inner-background-color="white"
|
||||
:style="scrollerPopupStyle160"
|
||||
@close="() => { showDateScrollerAllDay = false }"
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div v-else class="q-gutter-sm">
|
||||
<q-input color="blue-6" outlined v-model="eventForm.dateTimeStart"
|
||||
:label="$t('cal.enterdate')" mask="####-##-## ##:##">
|
||||
<template #append>
|
||||
<q-icon name="event" class="cursor-pointer">
|
||||
<q-popup-proxy v-model="showDateTimeScrollerStart">
|
||||
|
||||
<q-date-time-scroller
|
||||
v-model="eventForm.dateTimeStart"
|
||||
:locale="locale"
|
||||
:hour24-format="true"
|
||||
:rounded-borders="true"
|
||||
border-color="#2196f3"
|
||||
bar-color="#2196f3"
|
||||
color="white"
|
||||
background-color="primary"
|
||||
inner-color="primary"
|
||||
inner-background-color="white"
|
||||
:style="scrollerPopupStyle280"
|
||||
@close="() => { showDateTimeScrollerStart = false }"
|
||||
/>
|
||||
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input color="blue-6" outlined v-model="eventForm.dateTimeEnd"
|
||||
:label="$t('cal.enterEndDateTime')" mask="####-##-## ##:##">
|
||||
<template #append>
|
||||
<q-icon name="event" class="cursor-pointer">
|
||||
<q-popup-proxy v-model="showDateTimeScrollerEnd">
|
||||
|
||||
<q-date-time-scroller
|
||||
v-model="eventForm.dateTimeEnd"
|
||||
:locale="locale"
|
||||
:hour24-format="true"
|
||||
:rounded-borders="true"
|
||||
border-color="#2196f3"
|
||||
bar-color="#2196f3"
|
||||
color="white"
|
||||
background-color="primary"
|
||||
inner-color="primary"
|
||||
inner-background-color="white"
|
||||
:style="scrollerPopupStyle280"
|
||||
@close="() => { showDateTimeScrollerEnd = false }"
|
||||
/>
|
||||
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<q-input v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
|
||||
|
||||
<q-input v-model="eventForm.icon" label="Icon"></q-input>
|
||||
<q-input
|
||||
filled
|
||||
v-model="eventForm.bgcolor"
|
||||
>
|
||||
<template #append>
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-popup-proxy>
|
||||
<q-color v-model="eventForm.bgcolor"></q-color>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat :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" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
|
||||
<q-toolbar class="bg-primary text-white">
|
||||
<q-toolbar-title>
|
||||
Book 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-img :src="`../../statics/`+myevent.img"
|
||||
class="absolute-top"
|
||||
style="height: 150px;">
|
||||
</q-img>
|
||||
<div style="margin-top: 150px;">
|
||||
<div v-if="myevent.allDay" class="text-caption">{{ getEventDate(myevent) }}</div>
|
||||
|
||||
<div class="cal__title">{{myevent.title}}</div>
|
||||
<div v-if="myevent.date" class="cal__when">
|
||||
<span class="cal__where-title">{{$t('cal.when')}}: </span>
|
||||
<span class="cal__where-content">{{func_tools.getDateStr(myevent.date)}}</span>
|
||||
<span v-if="myevent.days > 1" class="cal__where-content"> - {{func_tools.getDateStr(tools.addDays(myevent.date, myevent.days - 1))}}<br/></span>
|
||||
<span v-if="myevent.infoextra" class="cal__hours">
|
||||
<span class="cal__hours-title">{{$t('cal.hours')}}: </span>
|
||||
<span class="cal__hours-content">{{ myevent.infoextra }} </span>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span v-if="myevent.time" class="cal__hours">
|
||||
-
|
||||
<span class="cal__hours-title">{{$t('cal.hours')}}: </span>
|
||||
<span class="cal__hours-content">{{$t('cal.starttime')}} {{ myevent.time }} {{$t('cal.endtime')}}: {{
|
||||
getEndTime(myevent) }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="q-pa-sm">
|
||||
<q-card
|
||||
class="text-white windowcol">
|
||||
<!--<q-card-section>-->
|
||||
<!--<div class="text-h6"></div>-->
|
||||
<!--<div class="text-subtitle2">by John Doe</div>-->
|
||||
<!--</q-card-section>-->
|
||||
|
||||
<q-card-section>
|
||||
<q-input v-model="bookEventForm.msgbooking" :label="$t('cal.msgbooking')"
|
||||
autogrow>
|
||||
|
||||
</q-input>
|
||||
|
||||
<div class="q-gutter-md centermydiv" style="max-width: 150px; margin-top:10px;">
|
||||
<q-select
|
||||
rounded outlined v-model="bookEventForm.numpeople"
|
||||
:options="tools.SelectListNumPeople"
|
||||
:label="$t('cal.selnumpeople')" emit-value map-options>
|
||||
</q-select>
|
||||
</div>
|
||||
</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="`../../statics/` + myevent.linkpdf"
|
||||
target="_blank" rounded color="primary" icon="info" label="Vedi Info">
|
||||
</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(myevent)"></q-btn>
|
||||
<q-btn flat :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>
|
||||
|
||||
<!--v-touch-swipe.mouse.left.right="handleSwipe" -->
|
||||
|
||||
<!-- the calendar -->
|
||||
|
||||
<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="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
|
||||
ref="calendar"
|
||||
class="calendar"
|
||||
:key="keyValue"
|
||||
v-model="selectedDate"
|
||||
:locale="locale"
|
||||
:maxDays="maxDays"
|
||||
animated
|
||||
transition-prev="slide-right"
|
||||
transition-next="slide-left"
|
||||
:dragOverFunc="onDragOver"
|
||||
:dropFunc="onDrop"
|
||||
:view="calendarView"
|
||||
:weekdays="weekdays"
|
||||
:interval-minutes="60 * intervalRangeStep"
|
||||
:interval-start="intervalStart"
|
||||
:interval-count="intervalCount"
|
||||
:hour24-format="hour24Format"
|
||||
:short-month-label="shortMonthLabel"
|
||||
:show-day-of-year-label="showDayOfYearLabel"
|
||||
:hide-header="hideHeader"
|
||||
:no-scroll="noScroll"
|
||||
:short-weekday-label="shortWeekdayLabel"
|
||||
:short-interval-label="shortIntervalLabel"
|
||||
:interval-height="intervalHeight"
|
||||
:resource-height="resourceHeight"
|
||||
:resource-width="resourceWidth"
|
||||
:day-height="dayHeight"
|
||||
:show-month-label="showMonthLabel"
|
||||
:show-work-weeks="showWorkWeeks"
|
||||
:resources="resources"
|
||||
@change="onChanged"
|
||||
@moved="onMoved"
|
||||
@click:date="onDateChanged"
|
||||
@click:interval="addEventMenu"
|
||||
@click:time="addEventMenu"
|
||||
@click:day="addEventMenu"
|
||||
@click:week="addEventMenu"
|
||||
@click:resource="resourceClicked"
|
||||
@click:resource:day="resourceDayClicked"
|
||||
dayPadding="35px 2px"
|
||||
>
|
||||
|
||||
<template #day="{ date }">
|
||||
<template v-for="(event, index) in getEvents(date)">
|
||||
<q-badge
|
||||
:key="index"
|
||||
style="width: 100%; cursor: pointer;"
|
||||
class="ellipsis"
|
||||
:class="badgeClasses(event, 'day')"
|
||||
:style="badgeStyles(event, 'day')"
|
||||
@click.stop.prevent="showEvent(event)"
|
||||
:draggable="true"
|
||||
@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>
|
||||
<span class="ellipsis">{{ event.title }}</span>
|
||||
</q-badge>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #day-header="{ date }">
|
||||
<div class="row justify-center">
|
||||
<template v-for="(event, index) in eventsMap[date]">
|
||||
<q-badge
|
||||
v-if="!event.time"
|
||||
:key="index"
|
||||
style="width: 100%; cursor: pointer;"
|
||||
class="ellipsis"
|
||||
:class="badgeClasses(event, 'header')"
|
||||
:style="badgeStyles(event, 'header')"
|
||||
@click.stop.prevent="showEvent(event)"
|
||||
:draggable="true"
|
||||
@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>
|
||||
<span class="ellipsis">{{ event.title }}</span>
|
||||
</q-badge>
|
||||
<q-badge
|
||||
v-else
|
||||
:key="index"
|
||||
class="q-ma-xs"
|
||||
:class="badgeClasses(event, 'header')"
|
||||
:style="badgeStyles(event, 'header')"
|
||||
style="width: 10px; max-width: 10px; height: 10px; max-height: 10px"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template #day-body="{ date, timeStartPos, timeDurationHeight }">
|
||||
<template v-for="(event, index) in getEvents(date)">
|
||||
<q-badge
|
||||
v-if="event.time"
|
||||
:key="index"
|
||||
class="my-event justify-center ellipsis"
|
||||
:class="badgeClasses(event, 'body')"
|
||||
:style="badgeStyles(event, 'body', timeStartPos, timeDurationHeight)"
|
||||
@click.stop.prevent="showEvent(event)"
|
||||
:draggable="true"
|
||||
@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>
|
||||
<span class="ellipsis">{{ event.title }}</span>
|
||||
</q-badge>
|
||||
</template>
|
||||
</template>
|
||||
</q-calendar>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
|
||||
<div>
|
||||
<p class="text-subtitle1 text-red text-center">LISTA PROSSIMI EVENTI:</p>
|
||||
|
||||
<q-markup-table wrap-cells bordered separator="horizontal" class="listaev__table">
|
||||
<tbody>
|
||||
<tr v-for="(event, index) in getEventList()" class="listaev listaev__table">
|
||||
<td :class="clEvent(event)">
|
||||
<p class="listaev__align_center_mobile">
|
||||
<img :src="`../../statics/`+event.img"
|
||||
class="text-left padding_cell listaev__tdimg listaev__img">
|
||||
<q-chip dense v-if="isAlreadyBooked(event)" class="cltexth4 chipbooked shadow-5"
|
||||
color="green" text-color="white"
|
||||
icon="event_available"
|
||||
dense>{{$t('cal.booked')}}
|
||||
</q-chip>
|
||||
</p>
|
||||
<div class="listaev__date listaev__align_center_mobile">
|
||||
|
||||
<div v-if="event.infoextra">
|
||||
<span class="listaev__date">{{func_tools.getDateStr(event.date)}} - <span
|
||||
class="cal__hours-content">{{ event.infoextra }}</span> </span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="event.date" class="listaev__date">
|
||||
{{func_tools.getDateStr(event.date)}}
|
||||
<span v-if="event.time" class="cal__hours-content"> - {{ event.time }} <span
|
||||
v-if="event.duration">- {{ getEndTime(event) }}</span></span>
|
||||
<span v-if="event.days > 1"><br/>{{func_tools.getDateStr(tools.addDays(event.date, event.days - 1))}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
|
||||
<div style="margin: 10px;"></div>
|
||||
|
||||
<div class="listaev__align_center_mobile">
|
||||
<!-- Se c'è un link, allora -->
|
||||
<q-btn v-if="event.linkpdf" size="md" type="a"
|
||||
:href="`../../statics/` + event.linkpdf"
|
||||
target="_blank"
|
||||
ripple rounded :label="event.title" :icon="event.icon"
|
||||
:color="event.bgcolor" text-color="white" glossy>
|
||||
|
||||
</q-btn>
|
||||
<!-- altrimenti mostra solo Chip -->
|
||||
<div v-else>
|
||||
<div v-if="tools.isMobile()" class="cltexth3"
|
||||
:style="`background-color: ${event.bgcolor} !important; color: white !important;`">
|
||||
{{event.title}}
|
||||
</div>
|
||||
<q-chip v-else class="cltexth3" :color="event.bgcolor" text-color="white"
|
||||
:icon="event.icon"
|
||||
dense>{{event.title}}
|
||||
</q-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin: 10px;"></div>
|
||||
|
||||
<p class="listaev__details" 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>
|
||||
|
||||
<q-chip>
|
||||
<q-avatar>
|
||||
<img :src="`../../statics/images/avatar/` + event.avatar">
|
||||
</q-avatar>
|
||||
<span class="cal__teacher-content">{{event.teacher}}</span>
|
||||
</q-chip>
|
||||
<span v-if="event.avatar2" class="margin_avatar2"></span>
|
||||
<q-chip v-if="event.avatar2 && event.teacher2">
|
||||
<q-avatar>
|
||||
<img :src="`../../statics/images/avatar/` + event.avatar2">
|
||||
</q-avatar>
|
||||
<span class="cal__teacher-content">{{event.teacher2}}</span>
|
||||
</q-chip>
|
||||
|
||||
<span v-if="event.where" class="">
|
||||
<span v-if="tools.isMobile()"><br/></span>
|
||||
<span class="cal__where-title">{{$t('cal.where')}}: </span>
|
||||
|
||||
<q-chip>
|
||||
<q-avatar v-if="event.whereicon">
|
||||
<img :src="`../../statics/images/avatar/` + event.whereicon">
|
||||
</q-avatar>
|
||||
<q-avatar color="blue" font-size="20px" text-color="white" icon="home">
|
||||
</q-avatar>
|
||||
<span class="cal__teacher-content">{{event.where}}</span>
|
||||
</q-chip>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-center">
|
||||
<span v-if="event.linkpdf" class="">
|
||||
<q-btn size="md" type="a" :href="`../../statics/` + event.linkpdf"
|
||||
target="_blank" rounded color="primary" icon="info"
|
||||
label="Vedi Info">
|
||||
|
||||
</q-btn>
|
||||
</span>
|
||||
</p>
|
||||
<div class="row justify-end">
|
||||
<q-btn rounded outline
|
||||
v-if="!event.nobookable && !isAlreadyBooked(event) && static_data.functionality.BOOKING_EVENTS"
|
||||
color="primary" @click="addBookEventMenu(event)"
|
||||
:label="$t('cal.booking')">
|
||||
</q-btn>
|
||||
<q-btn rounded outline
|
||||
v-if="!event.nobookable && isAlreadyBooked(event) && static_data.functionality.BOOKING_EVENTS"
|
||||
text-color="red"
|
||||
@click.native="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>
|
||||
|
||||
<!-- Example of a Dialog with a Card -->
|
||||
<!--
|
||||
<q-dialog v-model="card">
|
||||
<q-card>
|
||||
<q-img src="https://media-cdn.tripadvisor.com/media/photo-s/0a/47/a8/91/chicken-salad-sandwich.jpg" />
|
||||
|
||||
<q-card-section>
|
||||
<q-btn
|
||||
fab
|
||||
color="primary"
|
||||
icon="place"
|
||||
class="absolute"
|
||||
style="top: 0; right: 12px; transform: translateY(-50%);"
|
||||
/>
|
||||
|
||||
<div class="row no-wrap items-center">
|
||||
<div class="col text-h6 ellipsis">Cafe Basilico</div>
|
||||
<div class="col-auto text-grey q-pt-md">
|
||||
<q-icon name="place" /> 250 ft
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-rating v-model="stars" :max="5" size="32px" />
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section>
|
||||
<div class="text-subtitle1">$・Italian, Cafe</div>
|
||||
<div class="text-subtitle2 text-grey">Small plates, salads & sandwiches in an intimate setting.</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions>
|
||||
<q-btn flat round icon="event" v-close-popup />
|
||||
<q-btn flat v-close-popup>5:30PM</q-btn>
|
||||
<q-btn flat v-close-popup>7:30PM</q-btn>
|
||||
<q-btn flat v-close-popup>9:00PM</q-btn>
|
||||
<q-btn flat color="primary" v-close-popup>Reserve</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" src="./CEventsCalendar.ts">
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './CEventsCalendar.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user