- CEventsCalendar component added
This commit is contained in:
Paolo Arena
209
src/components/CEventsCalendar/CEventsCalendar.scss
Normal file
209
src/components/CEventsCalendar/CEventsCalendar.scss
Normal file
@@ -0,0 +1,209 @@
|
|||||||
|
$graytext: #555;
|
||||||
|
|
||||||
|
.calendar {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-event {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-container {
|
||||||
|
background-color: #ccc;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-item {
|
||||||
|
background-color: #9f9f9f;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal {
|
||||||
|
color: black;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
letter-spacing: 0.03333em;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
color: red;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__details {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hours {
|
||||||
|
color: blue;
|
||||||
|
&-title {
|
||||||
|
color: $graytext;
|
||||||
|
}
|
||||||
|
&-content {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__where {
|
||||||
|
margin-top: 10px;
|
||||||
|
color: blue;
|
||||||
|
|
||||||
|
&-title {
|
||||||
|
color: $graytext;
|
||||||
|
}
|
||||||
|
&-content {
|
||||||
|
color: darkblue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__when {
|
||||||
|
margin-top: 10px;
|
||||||
|
color: blue;
|
||||||
|
|
||||||
|
&-title {
|
||||||
|
color: $graytext;
|
||||||
|
}
|
||||||
|
&-content {
|
||||||
|
color: darkblue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__teacher {
|
||||||
|
margin-top: 10px;
|
||||||
|
&-title {
|
||||||
|
color: $graytext;
|
||||||
|
}
|
||||||
|
&-content {
|
||||||
|
color: darkblue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.listaev {
|
||||||
|
color: black;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
letter-spacing: 0.03333em;
|
||||||
|
|
||||||
|
&__date {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #2ba0fd;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
color: red;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.066em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__details {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tdimg {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__table {
|
||||||
|
margin: 10px;
|
||||||
|
border: solid 1px #4198ef;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__align_center_mobile {
|
||||||
|
text-align: left;
|
||||||
|
@media (max-width: 718px) {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
padding: 0.5rem !important;
|
||||||
|
float: left;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
|
||||||
|
@media (max-width: 718px) {
|
||||||
|
// PER VERSIONE MOBILE
|
||||||
|
float: none;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 718px) {
|
||||||
|
.q-chip__content {
|
||||||
|
white-space: normal !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-chip > div {
|
||||||
|
white-space: normal !important;
|
||||||
|
}
|
||||||
|
.inline > div {
|
||||||
|
white-space: normal !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mytoolbar {
|
||||||
|
padding: 0 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin_avatar, .margin_avatar2, .margin_with {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
.margin_avatar {
|
||||||
|
margin-left: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin_avatar2 {
|
||||||
|
margin-left: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin_with {
|
||||||
|
margin-left: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chipbooked {
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
left: 40px;
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.windowcol {
|
||||||
|
background-color: #ffffff;
|
||||||
|
// background: radial-gradient(circle, #ffffff 0%, #94dbfb 100%)
|
||||||
|
}
|
||||||
|
|
||||||
|
.mysel{
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
868
src/components/CEventsCalendar/CEventsCalendar.ts
Normal file
868
src/components/CEventsCalendar/CEventsCalendar.ts
Normal file
@@ -0,0 +1,868 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { Component, Prop, Watch } from 'vue-property-decorator'
|
||||||
|
import { CalendarStore, UserStore } from '@store'
|
||||||
|
|
||||||
|
import { Logo } from '../../components/logo/index'
|
||||||
|
|
||||||
|
import { Footer } from '../../components/Footer/index'
|
||||||
|
|
||||||
|
import { tools } from '../../store/Modules/tools'
|
||||||
|
import { toolsext, func_tools } from '@src/store/Modules/toolsext'
|
||||||
|
import { db_data } from '@src/db/db_data'
|
||||||
|
import { colors, Screen, Platform, date } from 'quasar'
|
||||||
|
|
||||||
|
import { CTitle } from '../../components/CTitle/index'
|
||||||
|
import { CImgText } from '../../components/CImgText/index'
|
||||||
|
import { stop, prevent, stopAndPrevent } from 'quasar/src/utils/event'
|
||||||
|
|
||||||
|
import QDateScroller from '@quasar/quasar-app-extension-qscroller/src/component/QDateScroller'
|
||||||
|
import QDateTimeScroller from '@quasar/quasar-app-extension-qscroller/src/component/QDateTimeScroller'
|
||||||
|
import { CTodo } from '@src/components/todos/CTodo'
|
||||||
|
import { SingleProject } from '@src/components/projects/SingleProject'
|
||||||
|
import { IEvents } from '@src/model'
|
||||||
|
import { BookingStore } from '@store'
|
||||||
|
import { IBookedEvent, IBookedEventPage, EState } from '@src/model/Calendar'
|
||||||
|
import { costanti } from '@src/store/Modules/costanti'
|
||||||
|
import router from '@router'
|
||||||
|
import { static_data } from '@src/db/static_data'
|
||||||
|
import translate from '@src/globalroutines/util'
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
name: 'CEventsCalendar',
|
||||||
|
components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller }
|
||||||
|
})
|
||||||
|
export default class CEventsCalendar extends Vue {
|
||||||
|
public $t: any
|
||||||
|
public $q
|
||||||
|
public calendarView = 'month'
|
||||||
|
public selectedDate = '2019-04-01'
|
||||||
|
public formDefault = {
|
||||||
|
title: '',
|
||||||
|
details: '',
|
||||||
|
allDay: false,
|
||||||
|
dateTimeStart: '',
|
||||||
|
dateTimeEnd: '',
|
||||||
|
icon: '',
|
||||||
|
bgcolor: '#0000FF'
|
||||||
|
}
|
||||||
|
|
||||||
|
public formbookEventDefault: IBookedEvent = {
|
||||||
|
msgbooking: '',
|
||||||
|
infoevent: '',
|
||||||
|
numpeople: 1,
|
||||||
|
datebooked: tools.getDateNow(),
|
||||||
|
booked: false,
|
||||||
|
modified: false
|
||||||
|
}
|
||||||
|
|
||||||
|
public mioalert = false
|
||||||
|
|
||||||
|
public dateFormatter: any = ''
|
||||||
|
public titleFormatter: any = null
|
||||||
|
|
||||||
|
public keyValue = 0
|
||||||
|
public direction = 'forward'
|
||||||
|
public weekdays = [1, 2, 3, 4, 5, 6, 0]
|
||||||
|
public viewOptions = [
|
||||||
|
{ label: 'Day', value: 'day' },
|
||||||
|
{ label: '5 Day', value: '5day' },
|
||||||
|
{ label: 'Week', value: 'week' },
|
||||||
|
{ label: 'Month', value: 'month' }
|
||||||
|
]
|
||||||
|
public addEvent = false
|
||||||
|
public bookEventpage: IBookedEventPage = {
|
||||||
|
show: false,
|
||||||
|
bookedevent: null,
|
||||||
|
state: EState.None
|
||||||
|
}
|
||||||
|
|
||||||
|
public contextDay = null
|
||||||
|
public eventForm = { ...this.formDefault }
|
||||||
|
public bookEventForm = { ...this.formbookEventDefault }
|
||||||
|
public displayEvent = false
|
||||||
|
public myevent = null
|
||||||
|
// public events = []
|
||||||
|
public gmt = ''
|
||||||
|
public dragging = false
|
||||||
|
public draggedEvent = null
|
||||||
|
public ignoreNextSwipe = false
|
||||||
|
public showDateScrollerAllDay = false
|
||||||
|
public showDateTimeScrollerStart = false
|
||||||
|
public showDateTimeScrollerEnd = false
|
||||||
|
|
||||||
|
@Watch('locale')
|
||||||
|
public checkloc() {
|
||||||
|
this.updateFormatters()
|
||||||
|
}
|
||||||
|
|
||||||
|
public resources = [
|
||||||
|
{
|
||||||
|
label: 'John'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Mary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Susan'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Olivia'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Board Room'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Room-1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Room-2'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
public $refs: {
|
||||||
|
calendar: any
|
||||||
|
}
|
||||||
|
|
||||||
|
// public eventdata =
|
||||||
|
// [
|
||||||
|
// {
|
||||||
|
// id: 1,
|
||||||
|
// summary: 'Test myevent',
|
||||||
|
// description: 'Some extra info goes here',
|
||||||
|
// location: 'Office of the Divine Randomness, 1232 Main St., Denver, CO',
|
||||||
|
// start: {
|
||||||
|
// dateTime: '2019-07-09T14:00:00', // ISO 8601 formatted
|
||||||
|
// timeZone: 'America/New_York' // Timezone listed as a separate IANA code
|
||||||
|
// },
|
||||||
|
// end: {
|
||||||
|
// dateTime: '2019-07-11T16:30:00',
|
||||||
|
// timeZone: 'American/New_York'
|
||||||
|
// },
|
||||||
|
// color: 'positive',
|
||||||
|
// attendees: [
|
||||||
|
// {
|
||||||
|
// id: 5,
|
||||||
|
// email: 'somebody@somewhere.com',
|
||||||
|
// displayName: 'John Q. Public',
|
||||||
|
// organizer: false,
|
||||||
|
// self: false,
|
||||||
|
// resource: false
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// id: 2,
|
||||||
|
// summary: 'Test all-day myevent',
|
||||||
|
// description: 'Some extra info goes here',
|
||||||
|
// start: {
|
||||||
|
// date: '2018-02-16' // A date variable indicates an all-day myevent
|
||||||
|
// },
|
||||||
|
// end: {
|
||||||
|
// date: '2018-02-19'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// id: 3,
|
||||||
|
// summary: 'Some other test myevent',
|
||||||
|
// description: 'Some extra info goes here',
|
||||||
|
// start: {
|
||||||
|
// dateTime: '2018-02-17T10:00:00+0500', // timezone embedded in dateTime
|
||||||
|
// },
|
||||||
|
// end: {
|
||||||
|
// dateTime: '2018-02-17T12:30:00+0500',
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
|
||||||
|
get title_cal() {
|
||||||
|
if (this.titleFormatter && this.locale) {
|
||||||
|
const mydate = new Date(this.selectedDate)
|
||||||
|
return this.titleFormatter.format(mydate)
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
get intervalRangeStep() {
|
||||||
|
return CalendarStore.state.intervalRangeStep
|
||||||
|
}
|
||||||
|
|
||||||
|
get resourceWidth() {
|
||||||
|
return CalendarStore.state.resourceWidth
|
||||||
|
}
|
||||||
|
|
||||||
|
get intervalHeight() {
|
||||||
|
return CalendarStore.state.intervalHeight
|
||||||
|
}
|
||||||
|
|
||||||
|
get shortIntervalLabel() {
|
||||||
|
return CalendarStore.state.shortIntervalLabel
|
||||||
|
}
|
||||||
|
|
||||||
|
get shortWeekdayLabel() {
|
||||||
|
return CalendarStore.state.shortWeekdayLabel
|
||||||
|
}
|
||||||
|
|
||||||
|
get hideHeader() {
|
||||||
|
return CalendarStore.state.hideHeader
|
||||||
|
}
|
||||||
|
|
||||||
|
get showDayOfYearLabel() {
|
||||||
|
return CalendarStore.state.showDayOfYearLabel
|
||||||
|
}
|
||||||
|
|
||||||
|
get shortMonthLabel() {
|
||||||
|
return CalendarStore.state.shortMonthLabel
|
||||||
|
}
|
||||||
|
|
||||||
|
get enableThemes() {
|
||||||
|
return CalendarStore.state.enableThemes
|
||||||
|
}
|
||||||
|
|
||||||
|
get resourceHeight() {
|
||||||
|
return CalendarStore.state.resourceHeight
|
||||||
|
}
|
||||||
|
|
||||||
|
get noScroll() {
|
||||||
|
return CalendarStore.state.noScroll
|
||||||
|
}
|
||||||
|
|
||||||
|
get maxDays() {
|
||||||
|
return CalendarStore.state.maxDays
|
||||||
|
}
|
||||||
|
|
||||||
|
get hour24Format() {
|
||||||
|
return CalendarStore.state.hour24Format
|
||||||
|
}
|
||||||
|
|
||||||
|
get showWorkWeeks() {
|
||||||
|
return CalendarStore.state.showWorkWeeks
|
||||||
|
}
|
||||||
|
|
||||||
|
get dayHeight() {
|
||||||
|
return CalendarStore.state.dayHeight
|
||||||
|
}
|
||||||
|
|
||||||
|
get theme() {
|
||||||
|
return CalendarStore.state.theme
|
||||||
|
}
|
||||||
|
|
||||||
|
get locale() {
|
||||||
|
return CalendarStore.state.locale
|
||||||
|
}
|
||||||
|
|
||||||
|
get showMonthLabel() {
|
||||||
|
return CalendarStore.state.showMonthLabel
|
||||||
|
}
|
||||||
|
|
||||||
|
get intervalStart() {
|
||||||
|
return CalendarStore.state.intervalRange.min * (1 / CalendarStore.state.intervalRangeStep)
|
||||||
|
}
|
||||||
|
|
||||||
|
get intervalCount() {
|
||||||
|
return (CalendarStore.state.intervalRange.max - CalendarStore.state.intervalRange.min) * (1 / CalendarStore.state.intervalRangeStep)
|
||||||
|
}
|
||||||
|
|
||||||
|
get editable() {
|
||||||
|
return CalendarStore.state.editable
|
||||||
|
}
|
||||||
|
|
||||||
|
public mounted() {
|
||||||
|
this.selectedDate = this.formatDate(tools.getDateNow())
|
||||||
|
this.$root.$on('calendar:next', this.calendarNext)
|
||||||
|
this.$root.$on('calendar:prev', this.calendarPrev)
|
||||||
|
this.$root.$on('calendar:today', this.calendarToday)
|
||||||
|
// CalendarStore.state.eventlist = events
|
||||||
|
this.updateFormatters()
|
||||||
|
}
|
||||||
|
|
||||||
|
public beforeMount() {
|
||||||
|
CalendarStore.state.locale = toolsext.getLocale()
|
||||||
|
this.updateFormatters()
|
||||||
|
}
|
||||||
|
|
||||||
|
public beforeDestroy() {
|
||||||
|
this.$root.$off('calendar:next', this.calendarNext)
|
||||||
|
this.$root.$off('calendar:prev', this.calendarPrev)
|
||||||
|
this.$root.$off('calendar:today', this.calendarToday)
|
||||||
|
}
|
||||||
|
|
||||||
|
get containerStyle() {
|
||||||
|
const styles = { height: '' }
|
||||||
|
if (this.calendarView !== 'month' || (this.calendarView === 'month' && CalendarStore.state.dayHeight === 0)) {
|
||||||
|
styles.height = `calc(100vh - ${CalendarStore.state.titlebarHeight}px)`
|
||||||
|
}
|
||||||
|
return styles
|
||||||
|
}
|
||||||
|
|
||||||
|
// convert the events into a map of lists keyed by date
|
||||||
|
get eventsMap() {
|
||||||
|
// console.log('eventsMap')
|
||||||
|
const map = {}
|
||||||
|
CalendarStore.state.eventlist.forEach((myevent) => (map[myevent.date] = map[myevent.date] || []).push(myevent))
|
||||||
|
return map
|
||||||
|
}
|
||||||
|
|
||||||
|
get addOrUpdateEvent() {
|
||||||
|
if (this.contextDay && this.contextDay.bgcolor) {
|
||||||
|
return 'Update'
|
||||||
|
}
|
||||||
|
return 'Add'
|
||||||
|
}
|
||||||
|
|
||||||
|
get scrollerPopupStyle160() {
|
||||||
|
if (this.$q.screen.lt.sm) {
|
||||||
|
return {
|
||||||
|
width: '100vw',
|
||||||
|
height: '100vh'
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
maxHeight: '400px',
|
||||||
|
height: '400px',
|
||||||
|
width: '160px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get scrollerPopupStyle280() {
|
||||||
|
if (this.$q.screen.lt.sm) {
|
||||||
|
return {
|
||||||
|
width: '100vw',
|
||||||
|
height: '100vh'
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
maxHeight: '400px',
|
||||||
|
height: '400px',
|
||||||
|
width: '280px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public isCssColor(color) {
|
||||||
|
return !!color && !!color.match(/^(#|(rgb|hsl)a?\()/)
|
||||||
|
}
|
||||||
|
|
||||||
|
public showEvent(eventparam: IEvents) {
|
||||||
|
// console.log('showEvent - INIZIO')
|
||||||
|
this.myevent = eventparam
|
||||||
|
this.displayEvent = true
|
||||||
|
// console.log('showEvent - FINE ' + myevent)
|
||||||
|
}
|
||||||
|
|
||||||
|
public getEndTime(eventparam) {
|
||||||
|
let endTime = new Date(eventparam.date + ' ' + eventparam.time + ':00')
|
||||||
|
endTime = date.addToDate(endTime, { minutes: eventparam.duration })
|
||||||
|
endTime = date.formatDate(endTime, 'HH:mm')
|
||||||
|
return endTime
|
||||||
|
}
|
||||||
|
|
||||||
|
public displayClasses(eventparam) {
|
||||||
|
return {
|
||||||
|
[`bg-${eventparam.bgcolor}`]: !this.isCssColor(eventparam.bgcolor),
|
||||||
|
'text-white': !this.isCssColor(eventparam.bgcolor)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public displayStyles(eventparam) {
|
||||||
|
const s = { color: '' }
|
||||||
|
if (this.isCssColor(eventparam.bgcolor)) {
|
||||||
|
s['background-color'] = eventparam.bgcolor
|
||||||
|
s.color = colors.luminosity(eventparam.bgcolor) > 0.5 ? 'black' : 'white'
|
||||||
|
}
|
||||||
|
return s
|
||||||
|
}
|
||||||
|
|
||||||
|
public onDateChanged(mydate) {
|
||||||
|
this.calendarView = 'day'
|
||||||
|
}
|
||||||
|
|
||||||
|
public resourceClicked(resource) {
|
||||||
|
console.log('resource clicked:', resource)
|
||||||
|
}
|
||||||
|
|
||||||
|
public resourceDayClicked(resource) {
|
||||||
|
console.log('resource:day clicked:', resource)
|
||||||
|
}
|
||||||
|
|
||||||
|
public resetForm() {
|
||||||
|
this.eventForm = { ...this.formDefault }
|
||||||
|
}
|
||||||
|
|
||||||
|
public addEventMenu(day, type) {
|
||||||
|
// console.log('addeventmenu editable = ', this.editable)
|
||||||
|
if (this.calendarView === 'scheduler' || this.calendarView === 'week-scheduler' || this.calendarView === 'month-scheduler' || !this.editable) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.resetForm()
|
||||||
|
this.contextDay = { ...day }
|
||||||
|
let timestamp
|
||||||
|
if (this.contextDay.hasTime === true) {
|
||||||
|
timestamp = this.getTimestamp(this.adjustTimestamp(this.contextDay))
|
||||||
|
const startTime = new Date(timestamp)
|
||||||
|
const endTime = date.addToDate(startTime, { hours: 1 })
|
||||||
|
this.eventForm.dateTimeEnd = this.formatDate(endTime) + ' ' + this.formatTime(endTime) // endTime.toString()
|
||||||
|
} else {
|
||||||
|
timestamp = this.contextDay.date + ' 00:00'
|
||||||
|
}
|
||||||
|
this.eventForm.dateTimeStart = timestamp
|
||||||
|
this.eventForm.allDay = this.contextDay.hasTime === false
|
||||||
|
this.eventForm.bgcolor = '#0000FF' // starting color
|
||||||
|
this.addEvent = true // show dialog
|
||||||
|
}
|
||||||
|
|
||||||
|
public addBookEventMenu(eventparam) {
|
||||||
|
if (!UserStore.state.isLogged) {
|
||||||
|
this.$router.push('/signin')
|
||||||
|
} else {
|
||||||
|
console.log('addBookEventMenu')
|
||||||
|
this.resetForm()
|
||||||
|
this.myevent = eventparam
|
||||||
|
this.bookEventForm.msgbooking = translate('cal.bookingtextdefault') + ' ' + tools.gettextevent(this.myevent)
|
||||||
|
this.bookEventForm.numpeople = 1
|
||||||
|
this.bookEventpage.state = EState.Creating
|
||||||
|
|
||||||
|
this.displayEvent = false
|
||||||
|
this.bookEventpage.show = true // show dialog
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public clEvent(event: IEvents) {
|
||||||
|
return (this.isAlreadyBooked(event) ? 'text-left bg-light-green-1' : 'text-left')
|
||||||
|
}
|
||||||
|
|
||||||
|
public editEvent(eventparam) {
|
||||||
|
console.log('editEvent - INIZIO')
|
||||||
|
this.resetForm()
|
||||||
|
this.contextDay = { ...eventparam }
|
||||||
|
let timestamp
|
||||||
|
if (eventparam.time) {
|
||||||
|
timestamp = eventparam.date + ' ' + eventparam.time
|
||||||
|
const startTime = new Date(timestamp)
|
||||||
|
const endTime = date.addToDate(startTime, { minutes: eventparam.duration })
|
||||||
|
this.eventForm.dateTimeStart = this.formatDate(startTime) + ' ' + this.formatTime(startTime) // endTime.toString()
|
||||||
|
this.eventForm.dateTimeEnd = this.formatDate(endTime) + ' ' + this.formatTime(endTime) // endTime.toString()
|
||||||
|
} else {
|
||||||
|
timestamp = eventparam.date
|
||||||
|
this.eventForm.dateTimeStart = timestamp
|
||||||
|
}
|
||||||
|
this.eventForm.allDay = !eventparam.time
|
||||||
|
this.eventForm.bgcolor = eventparam.bgcolor
|
||||||
|
this.eventForm.icon = eventparam.icon
|
||||||
|
this.eventForm.title = eventparam.title
|
||||||
|
this.eventForm.details = eventparam.details
|
||||||
|
this.addEvent = true // show dialog
|
||||||
|
}
|
||||||
|
|
||||||
|
public deleteEvent(eventparam) {
|
||||||
|
const index = this.findEventIndex(eventparam)
|
||||||
|
if (index >= 0) {
|
||||||
|
CalendarStore.state.eventlist.splice(index, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public findEventIndex(eventparam) {
|
||||||
|
for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
|
||||||
|
if (eventparam.title === CalendarStore.state.eventlist[i].title &&
|
||||||
|
eventparam.details === CalendarStore.state.eventlist[i].details &&
|
||||||
|
eventparam.date === CalendarStore.state.eventlist[i].date) {
|
||||||
|
return i
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public formatDate(mydate: any) {
|
||||||
|
let d = void 0
|
||||||
|
|
||||||
|
if (mydate !== void 0) {
|
||||||
|
d = new Date(mydate)
|
||||||
|
} else {
|
||||||
|
d = new Date()
|
||||||
|
}
|
||||||
|
const month = '' + (d.getMonth() + 1)
|
||||||
|
const day = '' + d.getDate()
|
||||||
|
const year = d.getFullYear()
|
||||||
|
|
||||||
|
return [year, tools.padTime(month), tools.padTime(day)].join('-')
|
||||||
|
}
|
||||||
|
|
||||||
|
get tools() {
|
||||||
|
return tools
|
||||||
|
}
|
||||||
|
|
||||||
|
get toolsext() {
|
||||||
|
return toolsext
|
||||||
|
}
|
||||||
|
|
||||||
|
get func_tools() {
|
||||||
|
return func_tools
|
||||||
|
}
|
||||||
|
|
||||||
|
public formatTime(mydate) {
|
||||||
|
const d = mydate !== void 0 ? new Date(mydate) : new Date(),
|
||||||
|
hours = '' + d.getHours(),
|
||||||
|
minutes = '' + d.getMinutes()
|
||||||
|
|
||||||
|
return [tools.padTime(hours), tools.padTime(minutes)].join(':')
|
||||||
|
}
|
||||||
|
|
||||||
|
public getDuration(dateTimeStart, dateTimeEnd, unit) {
|
||||||
|
const start = new Date(dateTimeStart)
|
||||||
|
const end = new Date(dateTimeEnd)
|
||||||
|
const diff = date.getDateDiff(end, start, unit)
|
||||||
|
return diff
|
||||||
|
}
|
||||||
|
|
||||||
|
public saveEvent() {
|
||||||
|
const self = this
|
||||||
|
|
||||||
|
// ++Todo VALIDATE this.$refs.myevent
|
||||||
|
|
||||||
|
if (true) {
|
||||||
|
// close the dialog
|
||||||
|
self.addEvent = false
|
||||||
|
const form = { ...self.eventForm }
|
||||||
|
let update = false
|
||||||
|
if (self.contextDay.bgcolor) {
|
||||||
|
// an update
|
||||||
|
update = true
|
||||||
|
} else {
|
||||||
|
// an add
|
||||||
|
}
|
||||||
|
const data: IEvents = {
|
||||||
|
time: '',
|
||||||
|
duration: 0,
|
||||||
|
duration2: 0,
|
||||||
|
title: form.title,
|
||||||
|
details: form.details,
|
||||||
|
icon: form.icon,
|
||||||
|
bgcolor: form.bgcolor,
|
||||||
|
date: String(form.dateTimeStart).slice(0, 10).replace(/\//g, '-')
|
||||||
|
}
|
||||||
|
if (form.allDay === false) {
|
||||||
|
// get time into separate var
|
||||||
|
data.time = String(form.dateTimeStart).slice(11, 16)
|
||||||
|
data.duration = self.getDuration(form.dateTimeStart, form.dateTimeEnd, 'minutes')
|
||||||
|
}
|
||||||
|
if (update === true) {
|
||||||
|
const index = self.findEventIndex(self.contextDay)
|
||||||
|
if (index >= 0) {
|
||||||
|
// @ts-ignore
|
||||||
|
CalendarStore.state.eventlist.splice(index, 1, { ...data })
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// add to events array
|
||||||
|
// @ts-ignore
|
||||||
|
CalendarStore.state.eventlist.push(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
self.contextDay = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public EditBookEvent(myevent: IEvents) {
|
||||||
|
this.myevent = myevent
|
||||||
|
const bookedevent = CalendarStore.getters.findEventBooked(myevent, false)
|
||||||
|
|
||||||
|
console.log('bookedevent', bookedevent)
|
||||||
|
|
||||||
|
if (bookedevent) {
|
||||||
|
this.bookEventForm.numpeople = bookedevent.numpeople
|
||||||
|
this.bookEventForm.infoevent = bookedevent.infoevent
|
||||||
|
this.bookEventForm.msgbooking = bookedevent.msgbooking
|
||||||
|
this.bookEventForm.booked = bookedevent.booked
|
||||||
|
this.bookEventForm.datebooked = bookedevent.datebooked
|
||||||
|
}
|
||||||
|
|
||||||
|
this.bookEventpage.state = EState.Modifying
|
||||||
|
this.bookEventpage.bookedevent = bookedevent
|
||||||
|
this.bookEventpage.show = true
|
||||||
|
}
|
||||||
|
|
||||||
|
get hasModifiedBooking() {
|
||||||
|
return (this.bookEventpage.bookedevent.numpeople !== this.bookEventForm.numpeople) ||
|
||||||
|
(this.bookEventpage.bookedevent.msgbooking !== this.bookEventForm.msgbooking)
|
||||||
|
}
|
||||||
|
|
||||||
|
public saveBookEvent(myevent: IEvents) {
|
||||||
|
const self = this
|
||||||
|
|
||||||
|
// ++Todo VALIDATE this.$refs.myevent
|
||||||
|
|
||||||
|
if (true) {
|
||||||
|
// close the dialog
|
||||||
|
self.bookEventpage.show = false
|
||||||
|
|
||||||
|
self.bookEventForm.booked = true
|
||||||
|
|
||||||
|
const data: IBookedEvent = {
|
||||||
|
id_bookedevent: myevent._id,
|
||||||
|
numpeople: self.bookEventForm.numpeople,
|
||||||
|
infoevent: tools.gettextevent(myevent),
|
||||||
|
msgbooking: self.bookEventForm.msgbooking,
|
||||||
|
booked: self.bookEventForm.booked,
|
||||||
|
datebooked: tools.getDateNow(),
|
||||||
|
modified: (self.bookEventpage.state !== EState.Creating)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.BookEvent(data).then((ris) => {
|
||||||
|
if (ris)
|
||||||
|
tools.showPositiveNotif(self.$q, self.$t('cal.booked') + ' ' + self.$t('cal.event') + ' "' + myevent.title + '"')
|
||||||
|
else
|
||||||
|
tools.showNegativeNotif(self.$q, self.$t('cal.booked_error'))
|
||||||
|
})
|
||||||
|
|
||||||
|
self.contextDay = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public showOffset(days) {
|
||||||
|
if (days.length === 0) return
|
||||||
|
|
||||||
|
let val = ''
|
||||||
|
val = tools.padTime(new Date(this.getTimestamp(days[0])).getTimezoneOffset() / 60)
|
||||||
|
if (Number.isNaN(Number(val))) return ''
|
||||||
|
return 'GMT-' + val
|
||||||
|
}
|
||||||
|
|
||||||
|
public adjustTimestamp(day) {
|
||||||
|
day.minute = day.minute < 15 || day.minute >= 45 ? 0 : 30
|
||||||
|
return day
|
||||||
|
}
|
||||||
|
|
||||||
|
public getTimestamp(day) {
|
||||||
|
return day.date + ' ' + tools.padTime(day.hour) + ':' + tools.padTime(day.minute) + ':00.000'
|
||||||
|
}
|
||||||
|
|
||||||
|
public updateFormatters() {
|
||||||
|
try {
|
||||||
|
// console.log('tools.getLocale() =', tools.getLocale())
|
||||||
|
// console.log('Calendar', CalendarStore.state.locale)
|
||||||
|
this.dateFormatter = new Intl.DateTimeFormat(tools.getLocale() || void 0, {
|
||||||
|
weekday: CalendarStore.state.shortWeekdayLabel ? 'short' : 'long',
|
||||||
|
month: CalendarStore.state.shortMonthLabel ? 'short' : 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
year: 'numeric',
|
||||||
|
timeZone: 'UTC'
|
||||||
|
})
|
||||||
|
this.titleFormatter = new Intl.DateTimeFormat(this.locale || void 0, {
|
||||||
|
month: this.shortMonthLabel ? 'short' : 'long',
|
||||||
|
year: 'numeric',
|
||||||
|
timeZone: 'UTC'
|
||||||
|
})
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Intl.DateTimeFormat not supported')
|
||||||
|
this.dateFormatter = void 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public handleSwipe({ evt, ...info }) {
|
||||||
|
if (this.dragging === false) {
|
||||||
|
if (info.duration >= 30 && this.ignoreNextSwipe === false) {
|
||||||
|
if (info.direction === 'right') {
|
||||||
|
this.calendarPrev()
|
||||||
|
} else if (info.direction === 'left') {
|
||||||
|
this.calendarNext()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.ignoreNextSwipe = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
stopAndPrevent(evt)
|
||||||
|
}
|
||||||
|
|
||||||
|
public onDragEnter(ev, eventparam) {
|
||||||
|
prevent(ev)
|
||||||
|
}
|
||||||
|
|
||||||
|
public onDragStart(ev, eventparam) {
|
||||||
|
this.dragging = true
|
||||||
|
this.draggedEvent = eventparam
|
||||||
|
stop(ev)
|
||||||
|
}
|
||||||
|
|
||||||
|
public onDragEnd(ev, eventparam) {
|
||||||
|
stopAndPrevent(ev)
|
||||||
|
this.resetDrag()
|
||||||
|
}
|
||||||
|
|
||||||
|
public onDragOver(ev, day, type) {
|
||||||
|
if (type === 'day') {
|
||||||
|
stopAndPrevent(ev)
|
||||||
|
return this.draggedEvent.date !== day.date
|
||||||
|
} else if (type === 'interval') {
|
||||||
|
stopAndPrevent(ev)
|
||||||
|
return this.draggedEvent.date !== day.date && this.draggedEvent.time !== day.time
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public onDrop(ev, day, type) {
|
||||||
|
ev.preventDefault()
|
||||||
|
ev.stopPropagation()
|
||||||
|
if (type === 'day') {
|
||||||
|
this.draggedEvent.date = day.date
|
||||||
|
this.draggedEvent.side = void 0
|
||||||
|
} else if (type === 'interval') {
|
||||||
|
this.draggedEvent.date = day.date
|
||||||
|
this.draggedEvent.time = day.time
|
||||||
|
this.draggedEvent.side = void 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public resetDrag() {
|
||||||
|
this.draggedEvent = void 0
|
||||||
|
this.dragging = false
|
||||||
|
if (Platform.is.desktop) {
|
||||||
|
this.ignoreNextSwipe = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public async BookEvent(eventparam: IBookedEvent) {
|
||||||
|
return await CalendarStore.actions.BookEvent(eventparam)
|
||||||
|
}
|
||||||
|
|
||||||
|
public async CancelBookingEvent(eventparam: IEvents) {
|
||||||
|
console.log('CancelBookingEvent ', eventparam._id)
|
||||||
|
tools.askConfirm(this.$q, translate('cal.titlebooking'), translate('cal.cancelbooking') + ' ' + tools.gettextevent(eventparam) + '?', translate('dialog.yes'), translate('dialog.no'), this, costanti.FuncDialog.CANCEL_BOOKING, 0, { param1: eventparam })
|
||||||
|
}
|
||||||
|
|
||||||
|
public isAlreadyBooked(eventparam: IEvents) {
|
||||||
|
return CalendarStore.getters.findEventBooked(eventparam, true)
|
||||||
|
}
|
||||||
|
|
||||||
|
public getEventDate(eventparam) {
|
||||||
|
const parts = eventparam.date.split('-')
|
||||||
|
const mydate = new Date(parts[0], parts[1] - 1, parts[2])
|
||||||
|
return this.dateFormatter.format(mydate)
|
||||||
|
}
|
||||||
|
|
||||||
|
public badgeClasses(eventparam, type) {
|
||||||
|
const cssColor = this.isCssColor(eventparam.bgcolor)
|
||||||
|
const isHeader = type === 'header'
|
||||||
|
return {
|
||||||
|
[`text-white bg-${eventparam.bgcolor}`]: !cssColor,
|
||||||
|
'full-width': !isHeader && (!eventparam.side || eventparam.side === 'full'),
|
||||||
|
'left-side': !isHeader && eventparam.side === 'left',
|
||||||
|
'right-side': !isHeader && eventparam.side === 'right'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public badgeStyles(eventparam, type, timeStartPos, timeDurationHeight) {
|
||||||
|
const s = { color: '', top: '', height: '' }
|
||||||
|
|
||||||
|
if (this.isCssColor(eventparam.bgcolor)) {
|
||||||
|
s['background-color'] = eventparam.bgcolor
|
||||||
|
s.color = colors.luminosity(eventparam.bgcolor) > 0.5 ? 'black' : 'white'
|
||||||
|
}
|
||||||
|
if (timeStartPos) {
|
||||||
|
s.top = timeStartPos(eventparam.time) + 'px'
|
||||||
|
}
|
||||||
|
if (timeDurationHeight) {
|
||||||
|
s.height = timeDurationHeight(eventparam.duration) + 'px'
|
||||||
|
}
|
||||||
|
s['align-items'] = 'flex-start'
|
||||||
|
return s
|
||||||
|
}
|
||||||
|
|
||||||
|
public calendarNext() {
|
||||||
|
this.$refs.calendar.next()
|
||||||
|
}
|
||||||
|
|
||||||
|
public calendarPrev() {
|
||||||
|
this.$refs.calendar.prev()
|
||||||
|
}
|
||||||
|
|
||||||
|
public calendarToday(today) {
|
||||||
|
this.selectedDate = today
|
||||||
|
}
|
||||||
|
|
||||||
|
public SetToday() {
|
||||||
|
this.$root.$emit('calendar:today', this.formatDate(tools.getDateNow()))
|
||||||
|
}
|
||||||
|
|
||||||
|
public onChanged(data) {
|
||||||
|
// uncomment to see data in console
|
||||||
|
// let { start, end } = data
|
||||||
|
// console.log('onChanged:', start, end)
|
||||||
|
}
|
||||||
|
|
||||||
|
public onMoved(moved) {
|
||||||
|
// uncomment to see data in console
|
||||||
|
// console.log('onMoved:', moved)
|
||||||
|
}
|
||||||
|
|
||||||
|
public getEventList() {
|
||||||
|
const eventsloc = []
|
||||||
|
|
||||||
|
const datenow = tools.addDays(tools.getDateNow(), -1)
|
||||||
|
|
||||||
|
for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
|
||||||
|
// console.log(' ciclo i = ', i, CalendarStore.state.eventlist[i])
|
||||||
|
const dateEvent = new Date(CalendarStore.state.eventlist[i].date + ' 00:00:00')
|
||||||
|
|
||||||
|
if (dateEvent >= datenow) {
|
||||||
|
eventsloc.push(CalendarStore.state.eventlist[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return eventsloc
|
||||||
|
}
|
||||||
|
|
||||||
|
public getEvents(dt) {
|
||||||
|
const eventsloc = []
|
||||||
|
|
||||||
|
for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
|
||||||
|
let added = false
|
||||||
|
// console.log(' ciclo i = ', i, CalendarStore.state.eventlist[i])
|
||||||
|
if (CalendarStore.state.eventlist[i].date === dt) {
|
||||||
|
if (CalendarStore.state.eventlist[i].time) {
|
||||||
|
if (eventsloc.length > 0) {
|
||||||
|
// check for overlapping times
|
||||||
|
const startTime = new Date(CalendarStore.state.eventlist[i].date + ' ' + CalendarStore.state.eventlist[i].time)
|
||||||
|
const endTime = date.addToDate(startTime, { minutes: CalendarStore.state.eventlist[i].duration })
|
||||||
|
for (let j = 0; j < eventsloc.length; ++j) {
|
||||||
|
const startTime2 = new Date(eventsloc[j].date + ' ' + eventsloc[j].time)
|
||||||
|
const endTime2 = date.addToDate(startTime2, { minutes: eventsloc[j].duration2 })
|
||||||
|
if (date.isBetweenDates(startTime, startTime2, endTime2) || date.isBetweenDates(endTime, startTime2, endTime2)) {
|
||||||
|
eventsloc[j].side = 'left'
|
||||||
|
// CalendarStore.state.eventlist[i].side = 'right'
|
||||||
|
eventsloc.push(CalendarStore.state.eventlist[i])
|
||||||
|
added = true
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!added) {
|
||||||
|
// CalendarStore.state.eventlist[i].side = void 0
|
||||||
|
eventsloc.push(CalendarStore.state.eventlist[i])
|
||||||
|
}
|
||||||
|
} else if (CalendarStore.state.eventlist[i].days) {
|
||||||
|
// check for overlapping dates
|
||||||
|
const startDate = new Date(CalendarStore.state.eventlist[i].date + ' 00:00:00')
|
||||||
|
const endDate = date.addToDate(startDate, { days: CalendarStore.state.eventlist[i].days })
|
||||||
|
if (date.isBetweenDates(dt, startDate, endDate)) {
|
||||||
|
eventsloc.push(CalendarStore.state.eventlist[i])
|
||||||
|
added = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return eventsloc
|
||||||
|
}
|
||||||
|
|
||||||
|
get static_data() {
|
||||||
|
return static_data
|
||||||
|
}
|
||||||
|
|
||||||
|
get EState() {
|
||||||
|
return EState
|
||||||
|
}
|
||||||
|
|
||||||
|
public getTitleBtnBooking() {
|
||||||
|
if (this.bookEventpage.state === EState.Creating)
|
||||||
|
return translate('dialog.book')
|
||||||
|
else
|
||||||
|
return translate('dialog.update')
|
||||||
|
}
|
||||||
|
}
|
||||||
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>
|
||||||
1
src/components/CEventsCalendar/index.ts
Normal file
1
src/components/CEventsCalendar/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export {default as CEventsCalendar} from './CEventsCalendar.vue'
|
||||||
Reference in New Issue
Block a user