1033 lines
28 KiB
TypeScript
1033 lines
28 KiB
TypeScript
import Vue from 'vue'
|
|
import { Component, Mixins, 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 { CMySelect } from '../../components/CMySelect/index'
|
|
import { CMyEditor } from '../../components/CMyEditor/index'
|
|
import { stop, prevent, stopAndPrevent } from 'quasar/src/utils/event'
|
|
|
|
import { CTodo } from '@src/components/todos/CTodo'
|
|
import { SingleProject } from '@src/components/projects/SingleProject'
|
|
import { IEvents } from '@src/model'
|
|
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'
|
|
import { lists } from '../../store/Modules/lists'
|
|
import { GlobalStore, MessageStore } from '../../store/Modules'
|
|
import { IMessagePage, IMessage, IIdentity, MsgDefault } from '../../model'
|
|
import MixinUsers from '../../mixins/mixin-users'
|
|
import MixinOperator from '../../mixins/mixin-operator'
|
|
import MixinEvents from '../../mixins/mixin-events'
|
|
import { CDateTime } from '../CDateTime'
|
|
import { CMyAvatar } from '../CMyAvatar'
|
|
import { CMySingleEvent } from '../CMySingleEvent'
|
|
import { CMyTeacher } from '../CMyTeacher'
|
|
|
|
@Component({
|
|
mixins: [MixinOperator, MixinUsers, MixinEvents],
|
|
name: 'CEventsCalendar',
|
|
components: {
|
|
Logo,
|
|
Footer,
|
|
CTitle,
|
|
CImgText,
|
|
CMySelect,
|
|
CMyEditor,
|
|
CDateTime,
|
|
CMyAvatar,
|
|
CMySingleEvent, CMyTeacher
|
|
}
|
|
})
|
|
export default class CEventsCalendar extends MixinEvents {
|
|
@Prop({ required: false, default: null }) public mysingleevent: IEvents
|
|
@Prop({ required: false, default: 0 }) public showfirstN: number
|
|
public $q
|
|
public $t: any
|
|
public calendarView = 'month'
|
|
public selectedDate = '2019-04-01'
|
|
public tabeditor: string = 'details'
|
|
public formDefault: IEvents = {
|
|
title: '',
|
|
details: '',
|
|
bodytext: '',
|
|
dateTimeStart: tools.getstrYYMMDDDateTime(tools.getDateNow()),
|
|
dateTimeEnd: tools.getstrYYMMDDDateTime(tools.getDateNow()),
|
|
icon: '',
|
|
bgcolor: '#839ff2'
|
|
}
|
|
|
|
public formbookEventDefault: IBookedEvent = {
|
|
userId: '',
|
|
msgbooking: '',
|
|
infoevent: '',
|
|
numpeople: 1,
|
|
datebooked: tools.getDateNow(),
|
|
booked: false,
|
|
modified: false
|
|
}
|
|
|
|
public formAskForDefault: IMessage = {
|
|
dest: {
|
|
idapp: process.env.APP_ID,
|
|
username: ''
|
|
},
|
|
origin: {
|
|
idapp: process.env.APP_ID,
|
|
username: ''
|
|
},
|
|
message: ''
|
|
}
|
|
|
|
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 askInfopage: IMessagePage = {
|
|
show: false,
|
|
msg: null,
|
|
state: EState.None
|
|
}
|
|
|
|
public contextDay = null
|
|
public eventForm: IEvents = { ...this.formDefault }
|
|
public bookEventForm = { ...this.formbookEventDefault }
|
|
public askInfoForm: IMessage = { ...this.formAskForDefault }
|
|
public displayEvent = false
|
|
public myevent = null
|
|
// public events = []
|
|
public gmt = ''
|
|
public dragging = false
|
|
public draggedEvent = null
|
|
public ignoreNextSwipe = false
|
|
|
|
public resources = [
|
|
{
|
|
label: 'John'
|
|
},
|
|
{
|
|
label: 'Mary'
|
|
},
|
|
{
|
|
label: 'Susan'
|
|
},
|
|
{
|
|
label: 'Olivia'
|
|
},
|
|
{
|
|
label: 'Board Room'
|
|
},
|
|
{
|
|
label: 'Room-1'
|
|
},
|
|
{
|
|
label: 'Room-2'
|
|
}
|
|
]
|
|
|
|
// 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 visuAllCal() {
|
|
return this.mysingleevent === null
|
|
}
|
|
|
|
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() {
|
|
if (Screen.height < 400)
|
|
return 80
|
|
else if (Screen.height < 500)
|
|
return 100
|
|
if (Screen.height < 700)
|
|
return 110
|
|
else if (Screen.height < 800)
|
|
return 120
|
|
else
|
|
return 140
|
|
}
|
|
|
|
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 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[tools.getstrDateTime(myevent.dateTimeStart)] = map[tools.getstrDateTime(myevent.dateTimeStart)] || []).push(myevent))
|
|
return map
|
|
}
|
|
|
|
get addOrUpdateEvent() {
|
|
if (this.contextDay && this.contextDay.bgcolor) {
|
|
return this.$t('dialog.update')
|
|
}
|
|
return this.$t('dialog.add')
|
|
}
|
|
|
|
get scrollerPopupStyle160() {
|
|
if (this.$q.screen.lt.sm) {
|
|
return {
|
|
width: '100vw',
|
|
height: '100vh'
|
|
}
|
|
} else {
|
|
return {
|
|
maxHeight: '400px',
|
|
height: '400px',
|
|
width: '160px'
|
|
}
|
|
}
|
|
}
|
|
|
|
get tools() {
|
|
return tools
|
|
}
|
|
|
|
get toolsext() {
|
|
return toolsext
|
|
}
|
|
|
|
get func_tools() {
|
|
return func_tools
|
|
}
|
|
|
|
get hasModifiedBooking() {
|
|
return (this.bookEventpage.bookedevent.numpeople !== this.bookEventForm.numpeople) ||
|
|
(this.bookEventpage.bookedevent.msgbooking !== this.bookEventForm.msgbooking) ||
|
|
(this.bookEventpage.bookedevent.booked !== this.bookEventForm.booked)
|
|
}
|
|
|
|
get static_data() {
|
|
return static_data
|
|
}
|
|
|
|
get EState() {
|
|
return EState
|
|
}
|
|
|
|
get checkseinviaMsg() {
|
|
return (this.bookEventpage.state === EState.Creating) && (!this.bookEventForm.booked)
|
|
}
|
|
|
|
get getTitleBtnBooking() {
|
|
if (this.bookEventpage.state === EState.Creating) {
|
|
return this.$t('dialog.book')
|
|
} else {
|
|
return this.$t('dialog.update')
|
|
}
|
|
}
|
|
|
|
public $refs: {
|
|
calendar: any
|
|
}
|
|
|
|
@Watch('locale')
|
|
public checkloc() {
|
|
this.updateFormatters()
|
|
}
|
|
|
|
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)
|
|
}
|
|
|
|
public showEvent(eventparam: IEvents) {
|
|
// console.log('showEvent - INIZIO')
|
|
this.myevent = eventparam
|
|
this.displayEvent = true
|
|
// console.log('showEvent - FINE ' + myevent)
|
|
}
|
|
|
|
public selectEvent(eventparam: IEvents) {
|
|
if (this.myevent === eventparam)
|
|
this.myevent = null
|
|
else
|
|
this.myevent = eventparam
|
|
|
|
}
|
|
|
|
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 }
|
|
|
|
this.eventForm.dateTimeStart = tools.getstrYYMMDDDateTime(day.date + ' 21:00:00')
|
|
this.eventForm.dateTimeEnd = tools.getstrYYMMDDDateTime(day.date + ' 22:00:00')
|
|
|
|
this.addEvent = true // show dialog
|
|
}
|
|
|
|
public addBookEventMenu(eventparam) {
|
|
if (!UserStore.state.isLogged || !UserStore.state.my.verified_email) {
|
|
// Visu right Toolbar to make SignIn
|
|
GlobalStore.state.RightDrawerOpen = true
|
|
tools.showNeutralNotif(this.$q, this.$t('login.needlogin'))
|
|
tools.scrollToTop()
|
|
// window.scrollTo(0, 0)
|
|
|
|
// this.$router.push('/signin')
|
|
} else {
|
|
console.log('addBookEventMenu')
|
|
this.resetForm()
|
|
this.myevent = eventparam
|
|
this.bookEventForm.msgbooking = ''
|
|
this.bookEventForm.numpeople = 1
|
|
this.bookEventForm.booked = true
|
|
this.bookEventpage.state = EState.Creating
|
|
|
|
this.displayEvent = false
|
|
this.bookEventpage.show = true // show dialog
|
|
}
|
|
}
|
|
|
|
public askForInfoEventMenu(eventparam) {
|
|
if (!UserStore.state.isLogged || !UserStore.state.my.verified_email) {
|
|
// Visu right Toolbar to make SignIn
|
|
GlobalStore.state.RightDrawerOpen = true
|
|
|
|
tools.showNeutralNotif(this.$q, this.$t('login.needlogin'))
|
|
tools.scrollToTop()
|
|
|
|
// this.$router.push('/signin')
|
|
} else {
|
|
console.log('askForInfoEventMenu')
|
|
this.askInfoForm = { ...this.formAskForDefault }
|
|
|
|
this.myevent = eventparam
|
|
|
|
this.askInfoForm = {
|
|
message: ''
|
|
}
|
|
|
|
this.askInfopage.state = EState.Creating
|
|
|
|
this.displayEvent = false
|
|
this.askInfopage.show = true // show dialog
|
|
}
|
|
}
|
|
|
|
public clEvent(event: IEvents) {
|
|
return (this.isAlreadyBooked(event) ? 'text-left bg-light-green-1' : 'text-left')
|
|
}
|
|
|
|
public checkFieldUndef() {
|
|
if (this.eventForm.bodytext === undefined)
|
|
this.eventForm.bodytext = ''
|
|
if (this.eventForm.details === undefined)
|
|
this.eventForm.details = ''
|
|
}
|
|
|
|
public editEvent(eventparam) {
|
|
console.log('editEvent - INIZIO')
|
|
this.resetForm()
|
|
|
|
this.contextDay = { ...eventparam }
|
|
|
|
this.eventForm = { ...eventparam }
|
|
|
|
this.checkFieldUndef()
|
|
|
|
this.eventForm.dateTimeStart = tools.getstrYYMMDDDateTime(eventparam.dateTimeStart)
|
|
this.eventForm.dateTimeEnd = tools.getstrYYMMDDDateTime(eventparam.dateTimeEnd)
|
|
|
|
this.addEvent = true // show dialog
|
|
}
|
|
|
|
public deleteEvent(eventparam) {
|
|
tools.CancelEvent(this, eventparam)
|
|
}
|
|
|
|
public duplicateEvent(eventparam, numgg, numev: number = 1) {
|
|
for (let i = 0; i < numev; ++i) {
|
|
GlobalStore.actions.DuplicateRec({ table: tools.TABEVENTS, id: eventparam._id }).then((rec) => {
|
|
if (rec) {
|
|
rec.dateTimeStart = tools.addDays(new Date(rec.dateTimeStart), numgg * (i + 1))
|
|
rec.dateTimeEnd = tools.addDays(new Date(rec.dateTimeEnd), numgg * (i + 1))
|
|
CalendarStore.state.eventlist.push(rec)
|
|
this.editEvent(rec)
|
|
}
|
|
})
|
|
}
|
|
// tools.ActionRecTable(this, lists.MenuAction.DUPLICATE_RECTABLE, tools.TABEVENTS, eventparam._id, eventparam, 'db.duplicatedrecord')
|
|
}
|
|
|
|
public findEventIndex(eventparam) {
|
|
for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
|
|
if (eventparam) {
|
|
if (eventparam.title === CalendarStore.state.eventlist[i].title &&
|
|
eventparam.details === CalendarStore.state.eventlist[i].details &&
|
|
eventparam.dateTimeStart === CalendarStore.state.eventlist[i].dateTimeStart &&
|
|
eventparam.dateTimeEnd === CalendarStore.state.eventlist[i].dateTimeEnd) {
|
|
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('-')
|
|
}
|
|
|
|
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 UpdateDbByFields(myrec, undo?) {
|
|
const self = this
|
|
|
|
const mydatatosave = {
|
|
id: myrec._id,
|
|
table: tools.TABEVENTS,
|
|
fieldsvalue: myrec
|
|
}
|
|
|
|
GlobalStore.actions.saveFieldValue(mydatatosave).then((esito) => {
|
|
if (esito) {
|
|
tools.showPositiveNotif(this.$q, this.$t('db.recupdated'))
|
|
} else {
|
|
tools.showNegativeNotif(this.$q, this.$t('db.recfailed'))
|
|
// Undo...
|
|
if (undo) {
|
|
const index = self.findEventIndex(self.contextDay)
|
|
if (index >= 0) {
|
|
// @ts-ignore
|
|
CalendarStore.state.eventlist.splice(index, 1, { ...self.contextDay })
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
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._id) {
|
|
// an update
|
|
update = true
|
|
} else {
|
|
// an add
|
|
}
|
|
const data = { ...form }
|
|
|
|
// ++Save into the Database
|
|
const mydatatosave = {
|
|
id: data._id,
|
|
table: tools.TABEVENTS,
|
|
fieldsvalue: data
|
|
}
|
|
|
|
if (update === true) {
|
|
this.UpdateDbByFields(data, true)
|
|
} else {
|
|
const mydataadd = {
|
|
table: tools.TABEVENTS,
|
|
data
|
|
}
|
|
|
|
GlobalStore.actions.saveTable(mydataadd).then((record) => {
|
|
if (record) {
|
|
tools.showPositiveNotif(this.$q, this.$t('db.recupdated'))
|
|
|
|
if (update === true) {
|
|
const index = self.findEventIndex(self.contextDay)
|
|
if (index >= 0) {
|
|
// @ts-ignore
|
|
CalendarStore.state.eventlist.splice(index, 1, { ...data })
|
|
}
|
|
} else {
|
|
data._id = record._id
|
|
// add to events array
|
|
// @ts-ignore
|
|
CalendarStore.state.eventlist.push(data)
|
|
}
|
|
|
|
} else {
|
|
tools.showNegativeNotif(this.$q, this.$t('db.recfailed'))
|
|
// Undo...
|
|
const index = self.findEventIndex(self.contextDay)
|
|
if (index >= 0) {
|
|
// @ts-ignore
|
|
CalendarStore.state.eventlist.splice(index, 1, { ...self.contextDay })
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
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._id = bookedevent._id
|
|
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
|
|
}
|
|
|
|
public sendMsg(myevent: IEvents) {
|
|
const self = this
|
|
this.askInfopage.show = false
|
|
|
|
const data: IMessage = {
|
|
source: {
|
|
event_id: myevent._id,
|
|
infoevent: tools.gettextevent(this, myevent)
|
|
},
|
|
dest: {
|
|
idapp: process.env.APP_ID,
|
|
username: myevent.teacher
|
|
},
|
|
message: this.askInfoForm.message
|
|
}
|
|
|
|
MessageStore.actions.SendMsgEvent(data).then((ris) => {
|
|
self.contextDay = null
|
|
if (ris)
|
|
tools.showPositiveNotif(self.$q, self.$t('cal.sendmsg_sent'))
|
|
else
|
|
tools.showNegativeNotif(self.$q, self.$t('cal.sendmsg_error'))
|
|
})
|
|
|
|
}
|
|
|
|
public saveBookEvent(myevent: IEvents) {
|
|
const self = this
|
|
|
|
// ++Todo VALIDATE this.$refs.myevent
|
|
|
|
if (true) {
|
|
// close the dialog
|
|
self.bookEventpage.show = false
|
|
|
|
// self.bookEventForm.booked = self.bookEventForm.bookedcheck
|
|
|
|
const data: IBookedEvent = {
|
|
userId: UserStore.state.my._id,
|
|
id_bookedevent: myevent._id,
|
|
numpeople: self.bookEventForm.numpeople,
|
|
infoevent: tools.gettextevent(self, 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 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.dur >= 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.dateTimeStart !== day.dateTimeStart
|
|
} else if (type === 'interval') {
|
|
stopAndPrevent(ev)
|
|
// return this.draggedEvent.date !== day.date && this.draggedEvent.time !== day.time
|
|
return this.draggedEvent.dateTimeStart !== day.dateTimeStart
|
|
}
|
|
}
|
|
|
|
public onDrop(ev, day, type) {
|
|
ev.preventDefault()
|
|
ev.stopPropagation()
|
|
console.log('day.dateTimeStart', day.dateTimeStart, day.date, 'day.time', day.time)
|
|
if (type === 'day') {
|
|
this.draggedEvent.dateTimeStart = day.date + ' ' + tools.getstrTime(this.draggedEvent.dateTimeStart)
|
|
this.draggedEvent.dateTimeEnd = day.date + ' ' + tools.getstrTime(this.draggedEvent.dateTimeEnd)
|
|
this.draggedEvent.side = void 0
|
|
} else if (type === 'interval') {
|
|
const mins = date.getDateDiff(this.draggedEvent.dateTimeEnd, this.draggedEvent.dateTimeStart, 'minutes')
|
|
this.draggedEvent.dateTimeStart = day.date + ' ' + day.time
|
|
const mystart = new Date(this.draggedEvent.dateTimeStart)
|
|
this.draggedEvent.dateTimeEnd = tools.addMinutes(mystart, mins)
|
|
// this.draggedEvent.dateTimeEnd = day.dateTimeEnd
|
|
// this.draggedEvent.time = day.time
|
|
this.draggedEvent.side = void 0
|
|
}
|
|
// console.log('Start', this.draggedEvent.dateTimeStart, 'End', this.draggedEvent.dateTimeEnd)
|
|
|
|
// Save Date
|
|
this.UpdateDbByFields({
|
|
_id: this.draggedEvent._id,
|
|
dateTimeStart: this.draggedEvent.dateTimeStart,
|
|
dateTimeEnd: this.draggedEvent.dateTimeEnd
|
|
}, true)
|
|
|
|
}
|
|
|
|
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)
|
|
}
|
|
|
|
get getContribTypeArr() {
|
|
return CalendarStore.state.contribtype
|
|
}
|
|
|
|
get getTeachersArr() {
|
|
return CalendarStore.state.operators
|
|
}
|
|
|
|
get getWhereArr() {
|
|
return CalendarStore.state.wheres
|
|
}
|
|
|
|
get getDisciplines() {
|
|
return GlobalStore.state.disciplines
|
|
}
|
|
|
|
public createContribType(value) {
|
|
console.log('createContribType', value)
|
|
tools.createNewRecord(this, 'contribtype', { label: value }).then((myrec) => {
|
|
// console.log('myrec')
|
|
CalendarStore.state.contribtype.push(myrec)
|
|
})
|
|
}
|
|
|
|
public getEventDate(eventparam) {
|
|
const parts = eventparam.dateTimeStart.split('-')
|
|
const mydate = new Date(parts[0], parts[1] - 1, parts[2])
|
|
return this.dateFormatter.format(mydate)
|
|
}
|
|
|
|
public badgeClasses(eventparam, type) {
|
|
const cssColor = tools.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: '', opacity: 1 }
|
|
|
|
if (tools.isCssColor(eventparam.bgcolor)) {
|
|
s['background-color'] = eventparam.bgcolor
|
|
s.color = colors.luminosity(eventparam.bgcolor) > 0.5 ? 'black' : 'white'
|
|
}
|
|
if (timeStartPos) {
|
|
s.top = timeStartPos(tools.getstrTime(eventparam.dateTimeStart)) + 'px'
|
|
}
|
|
if (timeDurationHeight) {
|
|
s.height = timeDurationHeight(this.func_tools.getMinutesDuration(eventparam.dateTimeStart, eventparam.dateTimeEnd)) + 'px'
|
|
}
|
|
|
|
if (!this.isEventEnabled(eventparam)) {
|
|
s.opacity = 0.5
|
|
}
|
|
|
|
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 mylist = CalendarStore.state.eventlist.filter((rec) => (new Date(rec.dateTimeEnd) >= tools.getDateNowEvent()))
|
|
if (this.showfirstN > 0)
|
|
return mylist.slice(0, this.showfirstN)
|
|
else
|
|
return mylist
|
|
}
|
|
|
|
public getEvents(dt) {
|
|
const eventsloc = []
|
|
|
|
for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
|
|
let added = false
|
|
if (tools.getstrYYMMDDDate(CalendarStore.state.eventlist[i].dateTimeStart) === dt) {
|
|
if (eventsloc.length > 0) {
|
|
// check for overlapping times
|
|
const startTime = CalendarStore.state.eventlist[i].dateTimeStart
|
|
const endTime = CalendarStore.state.eventlist[i].dateTimeEnd
|
|
for (let j = 0; j < eventsloc.length; ++j) {
|
|
const startTime2 = eventsloc[j].dateTimeStart
|
|
const endTime2 = eventsloc[j].dateTimeEnd
|
|
if (date.isBetweenDates(startTime, startTime2, endTime2) || date.isBetweenDates(endTime, startTime2, endTime2)) {
|
|
eventsloc[j].side = 'left'
|
|
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 (tools.hasManyDays(CalendarStore.state.eventlist[i].dateTimeStart, CalendarStore.state.eventlist[i].dateTimeEnd)) {
|
|
// check for overlapping dates
|
|
if (date.isBetweenDates(dt, CalendarStore.state.eventlist[i].dateTimeStart, CalendarStore.state.eventlist[i].dateTimeEnd)) {
|
|
eventsloc.push(CalendarStore.state.eventlist[i])
|
|
added = true
|
|
}
|
|
}
|
|
}
|
|
return eventsloc
|
|
}
|
|
|
|
public isEventEnabled(myevent) {
|
|
// check if event is in the past
|
|
const datenow = tools.addDays(tools.getDateNow(), -1)
|
|
|
|
// console.log('datenow', datenow, 'end', myevent.dateTimeEnd)
|
|
|
|
return (new Date(myevent.dateTimeEnd) >= datenow)
|
|
}
|
|
|
|
public getTitleEv(event: IEvents) {
|
|
return (!!event.short_tit) ? event.short_tit : event.title
|
|
}
|
|
public getLongTitleEv(event: IEvents) {
|
|
return event.title
|
|
}
|
|
|
|
}
|