Merge pull request #30 from paoloar77/Booking_Events

Booking events

src/components/CEventsCalendar/CEventsCalendar.scss

@@ -34,7 +34,7 @@ $graytext: #555;
   letter-spacing: 0.03333em;
 
   &__title {
-    color: red;
+    color: white;
     font-weight: 700;
     font-size: 1rem;
     padding-bottom: 10px;
@@ -55,7 +55,7 @@ $graytext: #555;
   }
 
   &__where {
-    margin-top: 10px;
+    margin-top: 5px;
     color: blue;
 
     &-title {
@@ -67,7 +67,7 @@ $graytext: #555;
   }
 
   &__when {
-    margin-top: 10px;
+    margin-top: 5px;
     color: blue;
 
     &-title {
@@ -79,7 +79,7 @@ $graytext: #555;
   }
 
   &__teacher {
-    margin-top: 10px;
+    margin-top: 5px;
     &-title {
       color: $graytext;
     }
@@ -88,6 +88,16 @@ $graytext: #555;
     }
   }
 
+  &__quota {
+    margin-top: 5px;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+
+    }
+  }
+
   &__img {
     width: 100px;
     height: 100px;
@@ -141,6 +151,18 @@ $graytext: #555;
     @media (max-width: 718px) {
       text-align: center;
       display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  &__align_chips {
+    text-align: left;
+    @media (max-width: 718px) {
+      text-align: center;
+      display: flex;
+      flex-direction: column-reverse;
+      align-items: center;
     }
   }
 
@@ -201,10 +223,21 @@ $graytext: #555;
   position: absolute;
   left: 40px;
   @media (max-width: 400px) {
+    left: initial;
     position: initial;
   }
 }
 
+.chipnews {
+
+  position: absolute;
+  right: 0;
+  @media (max-width: 400px) {
+    position: initial;
+    right: initial;
+  }
+}
+
 .windowcol {
   background-color: #ffffff;
           // background: radial-gradient(circle, #ffffff 0%, #94dbfb 100%)
@@ -213,3 +246,18 @@ $graytext: #555;
 .mysel{
   color: white;
 }
+
+.calendar_comp{
+  max-width: 170px;
+  @media (max-width: 400px) {
+    max-width: 400px;
+  }
+}
+
+.myflex{
+  display: flex;
+  flex: 1;
+  @media (max-width: 400px) {
+    flex-flow: column;
+  }
+}

src/components/CEventsCalendar/CEventsCalendar.ts

@@ -13,6 +13,8 @@ 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 QDateScroller from '@quasar/quasar-app-extension-qscroller/src/component/QDateScroller'
@@ -30,21 +32,20 @@ import { GlobalStore } from '../../store/Modules'
 
 @Component({
   name: 'CEventsCalendar',
-  components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller }
+  components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller, CMySelect, CMyEditor }
 })
 export default class CEventsCalendar extends Vue {
-  public $t: any
   public $q
+  public $t: any
   public calendarView = 'month'
   public selectedDate = '2019-04-01'
-  public formDefault = {
+  public formDefault: IEvents = {
     title: '',
     details: '',
-    allDay: false,
+    dateTimeStart: tools.getstrYYMMDDDateTime(tools.getDateNow()),
-    dateTimeStart: '',
+    dateTimeEnd: tools.getstrYYMMDDDateTime(tools.getDateNow()),
-    dateTimeEnd: '',
     icon: '',
-    bgcolor: '#0000FF'
+    bgcolor: '#839ff2'
   }
 
   public formbookEventDefault: IBookedEvent = {
@@ -79,7 +80,7 @@ export default class CEventsCalendar extends Vue {
   }
 
   public contextDay = null
-  public eventForm = { ...this.formDefault }
+  public eventForm: IEvents = { ...this.formDefault }
   public bookEventForm = { ...this.formbookEventDefault }
   public displayEvent = false
   public myevent = null
@@ -92,11 +93,6 @@ export default class CEventsCalendar extends Vue {
   public showDateTimeScrollerStart = false
   public showDateTimeScrollerEnd = false
 
-  @Watch('locale')
-  public checkloc() {
-    this.updateFormatters()
-  }
-
   public resources = [
     {
       label: 'John'
@@ -121,10 +117,6 @@ export default class CEventsCalendar extends Vue {
     }
   ]
 
-  public $refs: {
-    calendar: any
-  }
-
   // public eventdata =
   //   [
   //     {
@@ -268,26 +260,6 @@ export default class CEventsCalendar extends Vue {
     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)) {
@@ -300,15 +272,15 @@ export default class CEventsCalendar extends Vue {
   get eventsMap() {
     // console.log('eventsMap')
     const map = {}
-    CalendarStore.state.eventlist.forEach((myevent) => (map[myevent.date] = map[myevent.date] || []).push(myevent))
+    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 'Update'
+      return this.$t('dialog.update')
     }
-    return 'Add'
+    return this.$t('dialog.add')
   }
 
   get scrollerPopupStyle160() {
@@ -341,6 +313,79 @@ export default class CEventsCalendar extends Vue {
     }
   }
 
+  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')
+    }
+  }
+
+  get mythis() {
+    return this
+  }
+
+
+  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
@@ -348,13 +393,6 @@ export default class CEventsCalendar extends Vue {
     // console.log('showEvent - FINE ' + myevent)
   }
 
-  public getEndTime(eventparam) {
-    let endTime = new Date(eventparam.date)
-    endTime = date.addToDate(endTime, { minutes: eventparam.dur })
-    endTime = date.formatDate(endTime, 'HH:mm')
-    return endTime
-  }
-
   public onDateChanged(mydate) {
     this.calendarView = 'day'
   }
@@ -378,18 +416,10 @@ export default class CEventsCalendar extends Vue {
     }
     this.resetForm()
     this.contextDay = { ...day }
-    let timestamp
+
-    if (this.contextDay.hasTime === true) {
+    this.eventForm.dateTimeStart = tools.getstrYYMMDDDateTime(day.date + ' 21:00:00')
-      timestamp = this.getTimestamp(this.adjustTimestamp(this.contextDay))
+    this.eventForm.dateTimeEnd = tools.getstrYYMMDDDateTime(day.date + ' 22:00:00')
-      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
   }
 
@@ -402,7 +432,6 @@ export default class CEventsCalendar extends Vue {
       console.log('addBookEventMenu')
       this.resetForm()
       this.myevent = eventparam
-      // this.bookEventForm.msgbooking = translate('cal.bookingtextdefault') + ' ' + tools.gettextevent(this.myevent)
       this.bookEventForm.msgbooking = ''
       this.bookEventForm.numpeople = 1
       this.bookEventpage.state = EState.Creating
@@ -419,23 +448,14 @@ export default class CEventsCalendar extends Vue {
   public editEvent(eventparam) {
     console.log('editEvent - INIZIO')
     this.resetForm()
+
     this.contextDay = { ...eventparam }
-    let timestamp
+
-    if (eventparam.withtime) {
+    this.eventForm = { ...eventparam }
-      timestamp = eventparam.date
+
-      const startTime = new Date(timestamp)
+    this.eventForm.dateTimeStart = tools.getstrYYMMDDDateTime(eventparam.dateTimeStart)
-      const endTime = date.addToDate(startTime, { minutes: eventparam.dur })
+    this.eventForm.dateTimeEnd = tools.getstrYYMMDDDateTime(eventparam.dateTimeEnd)
-      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.withtime
-    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
   }
 
@@ -448,10 +468,13 @@ export default class CEventsCalendar extends Vue {
 
   public findEventIndex(eventparam) {
     for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
-      if (eventparam.title === CalendarStore.state.eventlist[i].title &&
+      if (eventparam) {
-        eventparam.details === CalendarStore.state.eventlist[i].details &&
+        if (eventparam.title === CalendarStore.state.eventlist[i].title &&
-        eventparam.date === CalendarStore.state.eventlist[i].date) {
+          eventparam.details === CalendarStore.state.eventlist[i].details &&
-        return i
+          eventparam.dateTimeStart === CalendarStore.state.eventlist[i].dateTimeStart &&
+          eventparam.dateTimeEnd === CalendarStore.state.eventlist[i].dateTimeEnd) {
+          return i
+        }
       }
     }
   }
@@ -471,18 +494,6 @@ export default class CEventsCalendar extends Vue {
     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(),
@@ -498,6 +509,33 @@ export default class CEventsCalendar extends Vue {
     return diff
   }
 
+  public UpdateDbByFields(myrec, undo?) {
+    const self = this
+
+    const mydatatosave = {
+      id: myrec._id,
+      table: 'myevents',
+      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
 
@@ -508,37 +546,56 @@ export default class CEventsCalendar extends Vue {
       self.addEvent = false
       const form = { ...self.eventForm }
       let update = false
-      if (self.contextDay.bgcolor) {
+      if (self.contextDay._id) {
         // an update
         update = true
       } else {
         // an add
       }
-      const data: IEvents = {
+      const data = { ...form }
-        withtime: false,
+
-        dur: 0,
+      // ++Save into the Database
-        dur2: 0,
+      const mydatatosave = {
-        title: form.title,
+        id: data._id,
-        details: form.details,
+        table: 'myevents',
-        icon: form.icon,
+        fieldsvalue: data
-        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.dur = self.getDuration(form.dateTimeStart, form.dateTimeEnd, 'minutes')
       }
+
       if (update === true) {
-        const index = self.findEventIndex(self.contextDay)
+        this.UpdateDbByFields(data, true)
-        if (index >= 0) {
-          // @ts-ignore
-          CalendarStore.state.eventlist.splice(index, 1, { ...data })
-        }
       } else {
-        // add to events array
+        const mydataadd = {
-        // @ts-ignore
+          table: 'myevents',
-        CalendarStore.state.eventlist.push(data)
+          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
@@ -565,12 +622,6 @@ export default class CEventsCalendar extends Vue {
     this.bookEventpage.show = true
   }
 
-  get hasModifiedBooking() {
-    return (this.bookEventpage.bookedevent.numpeople !== this.bookEventForm.numpeople) ||
-      (this.bookEventpage.bookedevent.msgbooking !== this.bookEventForm.msgbooking) ||
-      (this.bookEventpage.bookedevent.booked !== this.bookEventForm.booked)
-  }
-
   public sendMsg(myevent: IEvents) {
     // ..
   }
@@ -590,7 +641,7 @@ export default class CEventsCalendar extends Vue {
         userId: UserStore.state.userId,
         id_bookedevent: myevent._id,
         numpeople: self.bookEventForm.numpeople,
-        infoevent: tools.gettextevent(myevent),
+        infoevent: tools.gettextevent(self, myevent),
         msgbooking: self.bookEventForm.msgbooking,
         booked: self.bookEventForm.booked,
         datebooked: tools.getDateNow(),
@@ -608,23 +659,14 @@ export default class CEventsCalendar extends Vue {
     }
   }
 
-  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) {
+  // public getTimestamp(day) {
-    return day.date + ' ' + tools.padTime(day.hour) + ':' + tools.padTime(day.minute) + ':00.000'
+  //   return day.date + ' ' + tools.padTime(day.hour) + ':' + tools.padTime(day.minute) + ':00.000'
-  }
+  // }
 
   public updateFormatters() {
     try {
@@ -682,25 +724,40 @@ export default class CEventsCalendar extends Vue {
   public onDragOver(ev, day, type) {
     if (type === 'day') {
       stopAndPrevent(ev)
-      return this.draggedEvent.date !== day.date
+      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.date !== day.date
+      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.date = day.date
+      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') {
-      this.draggedEvent.date = day.date
+      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() {
@@ -719,20 +776,75 @@ export default class CEventsCalendar extends Vue {
     return CalendarStore.getters.findEventBooked(eventparam, true)
   }
 
+  public getImgEvent(event: IEvents) {
+    if (!!event.img)
+      return '../../statics/' + event.img
+    else
+      return '../../statics/images/noimg.png'
+  }
+
+  get getContribTypeArr() {
+    return CalendarStore.state.contribtype
+  }
+
+  get getTeachersArr() {
+    return CalendarStore.state.operators
+  }
+
+  get getWhereArr() {
+    return CalendarStore.state.wheres
+  }
+
+  public isShowPrice(event: IEvents) {
+    const rec = CalendarStore.getters.getContribtypeRec(event.contribtype)
+    return (rec) ? rec.showprice : true
+  }
+
+  public getContribtypeById(id) {
+    return CalendarStore.getters.getContribtypeById(id)
+  }
+
+  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.date.split('-')
+    const parts = eventparam.dateTimeStart.split('-')
     const mydate = new Date(parts[0], parts[1] - 1, parts[2])
     return this.dateFormatter.format(mydate)
   }
 
+  public getPrice(event: IEvents) {
+    let myprice = (event.price > 0) ? event.price + ' €' : ''
+    myprice = (event.price === -1) ? this.$t('event.askinfo') : myprice
+
+    if (event.infoafterprice)
+      myprice += ' ' + event.infoafterprice
+
+    return myprice
+  }
+
   public getTeacherName(teacherusername) {
-    const op = CalendarStore.state.operators.find((myop) => myop.username === teacherusername)
+    return CalendarStore.getters.getTeacherName(teacherusername)
-    return (op) ? `${op.name} ${op.surname}` : ''
+  }
+
+  public getWhereIcon(where) {
+    const whererec = CalendarStore.getters.getWhereRec(where)
+    return (whererec) ? whererec.whereicon : ''
+  }
+
+  public getWhereName(where) {
+    const whererec = CalendarStore.getters.getWhereRec(where)
+    return (whererec) ? whererec.placename : ''
   }
 
   public getTeacherImg(teacherusername) {
-    const op = CalendarStore.state.operators.find((myop) => myop.username === teacherusername)
+    const teacher = CalendarStore.getters.getTeacher(teacherusername)
-    return (op) ? op.img : 'avatar/noimage.png'
+    return (teacher) ? teacher.img : ''
   }
 
   public badgeClasses(eventparam, type) {
@@ -754,10 +866,10 @@ export default class CEventsCalendar extends Vue {
       s.color = colors.luminosity(eventparam.bgcolor) > 0.5 ? 'black' : 'white'
     }
     if (timeStartPos) {
-      s.top = timeStartPos(tools.getstrTime(eventparam.date)) + 'px'
+      s.top = timeStartPos(tools.getstrTime(eventparam.dateTimeStart)) + 'px'
     }
     if (timeDurationHeight) {
-      s.height = timeDurationHeight(eventparam.dur) + 'px'
+      s.height = timeDurationHeight(this.func_tools.getMinutesDuration(eventparam.dateTimeStart, eventparam.dateTimeEnd)) + 'px'
     }
     s['align-items'] = 'flex-start'
     return s
@@ -798,7 +910,7 @@ export default class CEventsCalendar extends Vue {
     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')
-      const dateEvent = new Date(CalendarStore.state.eventlist[i].date)
+      const dateEvent = new Date(CalendarStore.state.eventlist[i].dateTimeEnd)
 
       if (dateEvent >= datenow) {
         eventsloc.push(CalendarStore.state.eventlist[i])
@@ -813,37 +925,30 @@ export default class CEventsCalendar extends Vue {
 
     for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
       let added = false
-      // console.log('  ciclo i = ', i, CalendarStore.state.eventlist[i])
+      if (tools.getstrYYMMDDDate(CalendarStore.state.eventlist[i].dateTimeStart) === dt) {
-      if (tools.getstrYYMMDDDate(CalendarStore.state.eventlist[i].date) === dt) {
+        if (eventsloc.length > 0) {
-        // if (CalendarStore.state.eventlist[i].time) {
+          // check for overlapping times
-          if (eventsloc.length > 0) {
+          const startTime = CalendarStore.state.eventlist[i].dateTimeStart
-            // check for overlapping times
+          const endTime = CalendarStore.state.eventlist[i].dateTimeEnd
-            // const startTime = new Date(CalendarStore.state.eventlist[i].date + ' ' + CalendarStore.state.eventlist[i].time)
+          for (let j = 0; j < eventsloc.length; ++j) {
-            const startTime = new Date(CalendarStore.state.eventlist[i].date)
+            const startTime2 = eventsloc[j].dateTimeStart
-            const endTime = date.addToDate(startTime, { minutes: CalendarStore.state.eventlist[i].dur })
+            const endTime2 = eventsloc[j].dateTimeEnd
-            for (let j = 0; j < eventsloc.length; ++j) {
+            if (date.isBetweenDates(startTime, startTime2, endTime2) || date.isBetweenDates(endTime, startTime2, endTime2)) {
-              const startTime2 = new Date(eventsloc[j].date)
+              eventsloc[j].side = 'left'
-              const endTime2 = date.addToDate(startTime2, { minutes: eventsloc[j].dur2 })
+              eventsloc.push(CalendarStore.state.eventlist[i])
-              if (date.isBetweenDates(startTime, startTime2, endTime2) || date.isBetweenDates(endTime, startTime2, endTime2)) {
+              added = true
-                eventsloc[j].side = 'left'
+              break
-                // 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) {
+      } else if (tools.hasManyDays(CalendarStore.state.eventlist[i].dateTimeStart, CalendarStore.state.eventlist[i].dateTimeEnd)) {
         // check for overlapping dates
-        // const startDate = new Date(CalendarStore.state.eventlist[i].date + ' 00:00:00')
+        if (date.isBetweenDates(dt, CalendarStore.state.eventlist[i].dateTimeStart, CalendarStore.state.eventlist[i].dateTimeEnd)) {
-        const startDate = new Date(CalendarStore.state.eventlist[i].date)
-        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
         }
@@ -852,41 +957,10 @@ export default class CEventsCalendar extends Vue {
     return eventsloc
   }
 
-  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')
-    }
-  }
-
-  get mythis() {
-    return this
-  }
-
   public isEventEnabled(myevent) {
     // check if event is in the past
     const datenow = tools.addDays(tools.getDateNow(), -1)
 
-    // let dateEvent = new Date(myevent.date + ' 00:00:00')
+    return (myevent.dateTimeEnd >= datenow)
-    let dateEvent = new Date(myevent.date)
-
-    if (myevent.days) {
-      dateEvent = tools.addDays(dateEvent, myevent.days)
-    }
-
-    return (dateEvent >= datenow)
   }
 }

src/components/CEventsCalendar/CEventsCalendar.vue

@@ -1,11 +1,12 @@
 <template>
     <div class="landing">
-        <q-page class="column">
+        <q-page class="column" style="min-height: 500px !important;">
             <!-- display an myevent -->
             <q-dialog v-model="displayEvent">
                 <q-card v-if="myevent">
-                    <q-toolbar :class="tools.displayClasses(myevent)"
+                    <q-toolbar class="bg-primary text-white" :style="`min-width: ` + tools.myheight_dialog() + `px;`">
-                               :style="tools.displayStyles(myevent) + ` min-width: `+ tools.myheight_dialog() + `px;`">
+                        <!--<q-toolbar :class="tools.displayClasses(myevent)"-->
+                        <!--:style="tools.displayStyles(myevent) + ` min-width: `+ tools.myheight_dialog() + `px;`">-->
                         <q-toolbar-title>
                             {{ $t('cal.event') }}
                         </q-toolbar-title>
@@ -16,63 +17,78 @@
                         <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"
+                        <q-img :src="getImgEvent(myevent)"
                                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 v-if="myevent.allday" class="text-caption">{{ getEventDate(myevent) }}</div>-->
 
-                            <div class="cal__title">{{myevent.title}}</div>
+
+                            <q-chip
+                                    :style="`background-color: ${myevent.bgcolor} !important; color: white !important;`"
+                                    text-color="white"
+                                    class="shadow-5 q-mb-md" dense>
+                                {{myevent.title}}
+                            </q-chip>
                             <div class="cal__details" 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-chip>
-                                            <q-avatar>
+                                        <q-avatar>
-                                                <img :src="`../../statics/images/` + getTeacherImg(myevent.teacher)">
+                                            <img :src="`../../statics/images/` + getTeacherImg(myevent.teacher)">
-                                            </q-avatar>
+                                        </q-avatar>
-                                            <span class="cal__teacher-content">{{getTeacherName(myevent.teacher)}}</span>
+                                        <span class="cal__teacher-content">{{getTeacherName(myevent.teacher)}}</span>
-                                        </q-chip>
+                                    </q-chip>
-                                        <span v-if="getTeacherImg(myevent.teacher2) && myevent.teacher2" class="margin_avatar2"></span>
+                                    <span v-if="getTeacherImg(myevent.teacher2) && myevent.teacher2"
-                                        <q-chip v-if="getTeacherImg(myevent.teacher2) && myevent.teacher2">
+                                          class="margin_avatar2"></span>
-                                            <q-avatar>
+                                    <q-chip v-if="getTeacherImg(myevent.teacher2) && myevent.teacher2">
-                                                <img :src="`../../statics/images/` + getTeacherImg(myevent.teacher2)">
+                                        <q-avatar>
-                                            </q-avatar>
+                                            <img :src="`../../statics/images/` + getTeacherImg(myevent.teacher2)">
-                                            <span class="cal__teacher-content">{{getTeacherName(myevent.teacher2)}}</span>
+                                        </q-avatar>
-                                        </q-chip>
+                                        <span class="cal__teacher-content">{{getTeacherName(myevent.teacher2)}}</span>
-                                    </span>
+                                    </q-chip>
+                                </span>
                             </div>
-                            <div v-if="myevent.where" class="cal__where">
+                            <div v-if="myevent.wherecode" class="cal__where">
-                                <span v-if="tools.isMobile()"><br/></span>
+                                <!--<span v-if="tools.isMobile()"><br/></span>-->
                                 <span class="cal__where-title">{{$t('cal.where')}}: </span>
                                 <span class="cal__where-content">
-                                        <q-chip>
+                                    <q-chip>
-                                            <q-avatar v-if="myevent.whereicon">
+                                        <q-avatar v-if="getWhereIcon(myevent.wherecode)">
-                                                <img :src="`../../statics/images/avatar/` + myevent.whereicon">
+                                            <img :src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)">
-                                            </q-avatar>
+                                        </q-avatar>
-                                            <q-avatar color="blue" font-size="20px" text-color="white" icon="home">
+                                        <q-avatar color="blue" font-size="20px" text-color="white" icon="home">
-                                            </q-avatar>
+                                        </q-avatar>
-                                            <span class="cal__teacher-content">{{myevent.where}}</span>
+                                        <span class="cal__teacher-content">{{getWhereName(myevent.wherecode)}}</span>
-                                        </q-chip>
+                                    </q-chip>
-                                    </span>
+                                </span>
                             </div>
-                            <div v-if="myevent.date" class="cal__when">
+                            <div v-if="myevent.price && isShowPrice(myevent)" class="cal__quota">
+                                <span class="cal__quota-title">{{$t('event.price')}}:</span>
+                                <q-chip>
+                                    <span class="cal__quota-content">{{getPrice(myevent)}}</span>
+                                </q-chip>
+                            </div>
+                            <div v-if="myevent.dateTimeStart" class="cal__when">
                                 <span class="cal__where-title">{{$t('cal.when')}}: </span>
-                                <span class="cal__where-content">{{func_tools.getDateStr(myevent.date)}}</span>
+                                <span class="cal__where-content">{{ tools.getstrDate(myevent.dateTimeStart)}} - {{ tools.getstrDate(myevent.dateTimeEnd)}}</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.withtime" class="cal__hours">
+                                        <span v-if="!tools.hasManyDays(myevent.dateTimeStart, myevent.dateTimeEnd)"
+                                              class="cal__hours">
                                              -
                                             <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
-                                            <span class="cal__hours-content">{{$t('cal.starttime')}} {{ tools.getstrTime(myevent.date) }} {{$t('cal.endtime')}}: {{
+                                            <span class="cal__hours-content">{{$t('cal.starttime')}} {{ tools.getstrTime(myevent.dateTimeStart) }}
-                                        getEndTime(myevent) }}</span>
+                                                <span v-if="myevent.dateTimeEnd">{{ $t('cal.endtime')}}: {{ tools.getstrTime(myevent.dateTimeEnd) }}</span>
+                                            </span>
                                         </span>
                                     </span>
                             </div>
@@ -92,13 +108,13 @@
                     </q-card-actions>
                 </q-card>
             </q-dialog>
-            <!-- add/edit an myevent -->
+            <!-- id_bookedeventadd/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
+                            {{ addOrUpdateEvent }} {{ $t('cal.event') }}
                         </q-toolbar-title>
                         <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
                     </q-toolbar>
@@ -106,41 +122,22 @@
                         <q-form
                                 v-if="contextDay"
                                 ref='myevent'
-                                class="q-gutter-md">
+                                class="q-gutter-sm">
-                            <q-input v-model="eventForm.title" autofocus label="Title"
+                            <q-input color="grey-1" v-model="eventForm.title" autofocus
+                                     :input-style="`background-color: ${eventForm.bgcolor} !important; color: white !important; font-weight: bold; `"
+                                     borderless rounded dense :label="$t('event.title')"
                                      :rules="[v => v && v.length > 0 || '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
+                            <CMyEditor :value.sync="eventForm.details">
-                                     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">
+                            </CMyEditor>
+
+                            <!--<q-checkbox v-model="eventForm.allday" :label="$t('cal.alldayevent')"></q-checkbox>-->
+
+                            <div class="q-gutter-sm row myflex">
                                 <q-input color="blue-6" outlined v-model="eventForm.dateTimeStart"
-                                         :label="$t('cal.enterdate')" mask="####-##-## ##:##">
+                                         :label="$t('cal.eventstartdatetime')" mask="####-##-## ##:##"
+                                         class="calendar_comp">
                                     <template #append>
                                         <q-icon name="event" class="cursor-pointer">
                                             <q-popup-proxy v-model="showDateTimeScrollerStart">
@@ -165,7 +162,8 @@
                                     </template>
                                 </q-input>
                                 <q-input color="blue-6" outlined v-model="eventForm.dateTimeEnd"
-                                         :label="$t('cal.enterEndDateTime')" mask="####-##-## ##:##">
+                                         :label="$t('cal.enterEndDateTime')" mask="####-##-## ##:##"
+                                         class="calendar_comp">
                                     <template #append>
                                         <q-icon name="event" class="cursor-pointer">
                                             <q-popup-proxy v-model="showDateTimeScrollerEnd">
@@ -189,23 +187,94 @@
                                         </q-icon>
                                     </template>
                                 </q-input>
+                                <q-input dense v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
                             </div>
 
-                            <q-input v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
+                            <div class="q-gutter-sm myflex">
+
+                                <CMySelect myclass="myflex" :label="$t('cal.teacher') + ' 1°'"
+                                           :value.sync="eventForm.teacher"
+                                           optval="username" :optlab="(item) => item.name + ' ' + item.surname"
+                                           :options="getTeachersArr" :useinput="false">
+                                </CMySelect>
+                                <CMySelect myclass="myflex" :label="$t('cal.teacher') + ' 2°'"
+                                           :value.sync="eventForm.teacher2"
+                                           optval="username" :optlab="(item) => item.name + ' ' + item.surname"
+                                           :options="getTeachersArr" :useinput="false">
+                                </CMySelect>
+                            </div>
+
+                            <div class="q-gutter-sm myflex wrap">
+                                <CMySelect :label="$t('cal.where')" :value.sync="eventForm.wherecode" optval="code"
+                                           optlab="placename"
+                                           :options="getWhereArr" :useinput="false">
+                                </CMySelect>
+                                <q-checkbox class="myflex wrap" dense v-model="eventForm.news"
+                                            :label="$t('event.news')"></q-checkbox>
+                                <q-checkbox class="myflex wrap" dense v-model="eventForm.nobookable"
+                                            :label="$t('event.nobookable')"></q-checkbox>
+                                <q-checkbox class="myflex wrap" dense v-model="eventForm.canceled"
+                                            :label="$t('event.canceled')"></q-checkbox>
+                            </div>
+
+                            <div class="q-gutter-sm row items-start">
+
+                            </div>
+
+                            <div class="q-gutter-sm myflex">
+
+                                <q-input class="myflex" dense v-model="eventForm.img"
+                                         :label="$t('event.img')"></q-input>
+                                <q-input class="myflex" dense v-model="eventForm.img_small"
+                                         :label="$t('event.img_small')"></q-input>
+
+                            </div>
+
+                            <div class="q-gutter-sm myflex">
+
+                                <q-input
+                                        class="myflex"
+                                        :style="`background-color: ${eventForm.bgcolor} !important; color: white !important;`"
+                                        filled
+                                        color="white"
+                                        dense
+                                        :label="$t('event.bgcolor')"
+                                        v-model="eventForm.bgcolor">
+                                    <template #append>
+                                        <q-icon name="colorize" class="cursor-pointer" color="white">
+                                            <q-popup-proxy>
+                                                <q-color format-model="hex" v-model="eventForm.bgcolor"></q-color>
+                                            </q-popup-proxy>
+                                        </q-icon>
+                                    </template>
+                                </q-input>
+                                <q-input class="myflex" dense v-model="eventForm.icon"
+                                         :label="$t('event.icon')"></q-input>
+                            </div>
+
+                            <div class="q-gutter-sm myflex">
+
+                                <CMySelect :label="$t('event.contribtype')" :value.sync="eventForm.contribtype"
+                                           optval="_id" optlab="label"
+                                           :useinput="false"
+                                           :newvaluefunc="createContribType" :options="getContribTypeArr">
+                                </CMySelect>
+
+                                <div v-if="isShowPrice(eventForm)">
+                                    <q-input dense type="number" v-model="eventForm.price"
+                                             :label="$t('event.price')"></q-input>
+                                    <q-input dense v-model="eventForm.infoafterprice"
+                                             :label="$t('event.infoafterprice')"></q-input>
+                                </div>
+                            </div>
+
+                            <div class="q-gutter-sm myflex">
+                                <q-input class="myflex" dense v-model="eventForm.linkpage"
+                                         :label="$t('event.linkpage')"></q-input>
+                                <q-input class="myflex" dense v-model="eventForm.linkpdf"
+                                         :label="$t('event.linkpdf')"></q-input>
+                            </div>
 
-                            <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">
@@ -225,38 +294,54 @@
                     </q-toolbar>
 
                     <q-card-section class="inset-shadow">
-                        <q-img :src="`../../statics/`+myevent.img"
+                        <q-img :src="getImgEvent(myevent)"
                                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>
+                            <q-chip
-                            <div v-if="myevent.date" class="cal__when">
+                                    :style="`background-color: ${myevent.bgcolor} !important; color: white !important;`"
+                                    text-color="white"
+                                    class="shadow-5 q-mb-md" dense>
+                                {{myevent.title}}
+                            </q-chip>
+                            <div v-if="myevent.dateTimeStart" class="cal__when">
                                 <span class="cal__where-title">{{$t('cal.when')}}: </span>
-                                <span class="cal__where-content">{{func_tools.getDateStr(myevent.date)}}</span>
+                                <span class="cal__where-content">{{func_tools.getDateStr(myevent.dateTimeStart)}}</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="tools.hasManyDays(myevent.dateTimeStart)" class="cal__where-content"> - {{func_tools.getDateStr(myevent.dateTimeEnd)}}<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.withtime" class="cal__hours">
+                                        <span v-if="!tools.hasManyDays(myevent.dateTimeStart, myevent.dateTimeEnd)"
+                                              class="cal__hours">
                                              -
                                             <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
-                                            <span class="cal__hours-content"><span v-if="!tools.isMobile()">{{$t('cal.starttime')}} </span>{{ tools.getstrTime(myevent.date) }} <span v-if="!tools.isMobile()">{{$t('cal.endtime')}} </span><span v-else> - </span> {{
+                                            <span class="cal__hours-content"><span v-if="!tools.isMobile()">{{$t('cal.starttime')}} </span>{{ tools.getstrTime(myevent.dateTimeStart) }}
-                                                getEndTime(myevent) }}</span>
+                                                <span v-if="myevent.dateTimeEnd">
+                                                    <span v-if="!tools.isMobile()">
+                                                    {{$t('cal.endtime')}}
+                                                    </span>
+                                                    <span v-else> - </span>
+                                                    {{ tools.getstrTime(myevent.dateTimeEnd) }}
+                                                </span>
+                                            </span>
                                         </span>
                                     </span>
                             </div>
                             <div class="q-pa-xs">
                                 <q-card class="text-white windowcol">
                                     <q-card-section>
-                                        <q-checkbox :disable="((bookEventpage.bookedevent && bookEventpage.bookedevent.booked) || (bookEventpage.bookedevent === undefined)) || !isEventEnabled(myevent)" style="color: black;" v-model="bookEventForm.booked" :label="$t('cal.bookingtextdefault')" color="green">
+                                        <q-checkbox
+                                                :disable="((bookEventpage.bookedevent && bookEventpage.bookedevent.booked) || (bookEventpage.bookedevent === undefined)) || !isEventEnabled(myevent)"
+                                                style="color: black;" v-model="bookEventForm.booked"
+                                                :label="$t('cal.bookingtextdefault')" color="green">
                                         </q-checkbox>
 
-                                        <div v-if="bookEventForm.booked" class="q-gutter-md centermydiv" style="max-width: 150px; margin-top:10px;">
+                                        <div v-if="bookEventForm.booked" class="q-gutter-sm centermydiv"
+                                             style="max-width: 150px; margin-top:10px;">
                                             <q-select
                                                     rounded outlined v-model="bookEventForm.numpeople"
                                                     :options="tools.SelectListNumPeople"
@@ -264,7 +349,8 @@
                                             </q-select>
                                         </div>
 
-                                        <q-input v-model="bookEventForm.msgbooking" :label="$t('cal.msgbooking')+':'" autogrow>
+                                        <q-input v-model="bookEventForm.msgbooking" :label="$t('cal.msgbooking')+':'"
+                                                 autogrow>
                                         </q-input>
                                     </q-card-section>
                                 </q-card>
@@ -281,8 +367,10 @@
                     </q-card-section>
                     <q-card-actions align="right">
                         <q-btn v-if="bookEventpage.state === EState.Modifying" flat :label="$t('cal.cancelbooking')"
-                               color="negative" @click="tools.CancelBookingEvent(mythis, myevent, bookEventForm._id, true)"></q-btn>
+                               color="negative"
-                        <q-btn v-if="checkseinviaMsg" flat :label="$t('dialog.sendmsg')" color="primary" @click="sendMsg(myevent)"></q-btn>
+                               @click="tools.CancelBookingEvent(mythis, myevent, bookEventForm._id, true)"></q-btn>
+                        <q-btn v-if="checkseinviaMsg" flat :label="$t('dialog.sendmsg')" color="primary"
+                               @click="sendMsg(myevent)"></q-btn>
                         <q-btn v-else flat :label="getTitleBtnBooking" color="primary" @click="saveBookEvent(myevent)"
                                :disable="!(bookEventpage.state === EState.Creating || hasModifiedBooking)"></q-btn>
 
@@ -370,7 +458,7 @@
                                     :class="badgeClasses(event, 'day')"
                                     :style="badgeStyles(event, 'day')"
                                     @click.stop.prevent="showEvent(event)"
-                                    :draggable="true"
+                                    :draggable="tools.isManager()"
                                     @dragstart.native="(e) => onDragStart(e, event)"
                                     @dragend.native="(e) => onDragEnd(e, event)"
                                     @dragenter.native="(e) => onDragEnter(e, event)"
@@ -385,44 +473,42 @@
                     <template #day-header="{ date }">
                         <div class="row justify-center">
                             <template v-for="(event, index) in eventsMap[date]">
+                                <!--<q-badge-->
+                                <!--v-if="event.allday"-->
+                                <!--: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) => {}"-->
+                                <!--&gt;-->
+                                <!--<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-if="!event.withtime"
-                                        :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"
-                                />
+                                ></q-badge>
                             </template>
                         </div>
                     </template>
                     <template #day-body="{ date, timeStartPos, timeDurationHeight }">
                         <template v-for="(event, index) in getEvents(date)">
                             <q-badge
-                                    v-if="event.withtime"
                                     :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"
+                                    :draggable="tools.isManager()"
                                     @dragstart.native="(e) => onDragStart(e, event)"
                                     @dragend.native="(e) => onDragEnd(e, event)"
                                     @dragenter.native="(e) => onDragEnter(e, event)"
@@ -438,44 +524,47 @@
 
         </q-page>
 
-        <div>
+        <div class="q-mt-md">
             <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">
+                        <p class="listaev__align_chips">
-                            <img :src="`../../statics/`+event.img"
+                            <img :src="getImgEvent(event)"
                                  class="text-left padding_cell listaev__tdimg listaev__img">
-                            <q-chip dense v-if="isAlreadyBooked(event)" class="cltexth4 chipbooked shadow-5"
+                            <q-chip dense v-if="isAlreadyBooked(event)" class="cltexth4 chipbooked shadow-5 q-mb-md"
                                     color="green" text-color="white"
-                                    icon="event_available"
+                                    icon="event_available">{{$t('cal.booked')}}
-                                    dense>{{$t('cal.booked')}}
                             </q-chip>
+
+                            <q-chip v-if="event.news" class="cltexth4 chipnews shadow-5 glossy text-right" color="red"
+                                    text-color="white" icon-right="star" icon="star" dense
+                                    style="">
+                                {{$t('event.news')}}
+                            </q-chip>
+
                         </p>
                         <div class="listaev__date listaev__align_center_mobile">
 
                             <div v-if="event.infoextra">
-                                    <span class="listaev__date">{{func_tools.getDateStr(event.date)}} - <span
+                                    <span class="listaev__date">{{func_tools.getDateStr(event.dateTimeStart)}} - <span
                                             class="cal__hours-content">{{ event.infoextra }}</span> </span>
                             </div>
                             <div v-else>
-                                <div v-if="event.date" class="listaev__date">
+                                <div v-if="event.dateTimeStart" class="listaev__date">
-                                    {{func_tools.getDateStr(event.date)}}
+                                    {{tools.getstrDateTime(event.dateTimeStart)}} -
-                                    <span v-if="event.withtime" class="cal__hours-content"> - {{ tools.getstrTime(event.date) }} <span
+                                    {{tools.getstrDateTime(event.dateTimeEnd)}}
-                                            v-if="event.dur">- {{ 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 class="listaev__align_center_mobile">
 
                             <div style="margin: 10px;"></div>
 
-                            <div class="listaev__align_center_mobile">
+                            <div class="">
                                 <!-- Se c'è un link, allora -->
                                 <q-btn v-if="event.linkpdf" size="md" type="a"
                                        :href="`../../statics/` + event.linkpdf"
@@ -486,11 +575,13 @@
                                 </q-btn>
                                 <!-- altrimenti mostra solo Chip -->
                                 <div v-else>
-                                    <div v-if="tools.isMobile()" class="cltexth3"
+                                    <div v-if="tools.isMobile()" class="cltexth3 text-center"
                                          :style="`background-color: ${event.bgcolor} !important; color: white !important;`">
                                         {{event.title}}
                                     </div>
-                                    <q-chip v-else class="cltexth3" :color="event.bgcolor" text-color="white"
+                                    <q-chip v-else class="cltexth3 text-center"
+                                            :style="`background-color: ${event.bgcolor} !important; color: white !important;`"
+                                            text-color="white"
                                             :icon="event.icon"
                                             dense>{{event.title}}
                                     </q-chip>
@@ -518,20 +609,36 @@
                                     <span class="cal__teacher-content">{{getTeacherName(event.teacher2)}}</span>
                                 </q-chip>
 
-                                <span v-if="event.where" class="">
+                                <span v-if="event.wherecode" class="">
                                         <span v-if="tools.isMobile()"><br/></span>
                                         <span class="cal__where-title">{{$t('cal.where')}}: </span>
 
                                         <q-chip>
-                                            <q-avatar v-if="event.whereicon">
+                                            <q-avatar v-if="getWhereIcon(event.wherecode)">
-                                                <img :src="`../../statics/images/avatar/` + event.whereicon">
+                                                <img :src="`../../statics/images/avatar/` + getWhereIcon(event.wherecode)">
                                             </q-avatar>
                                             <q-avatar color="blue" font-size="20px" text-color="white" icon="home">
                                             </q-avatar>
-                                            <span class="cal__teacher-content">{{event.where}}</span>
+                                            <span class="cal__teacher-content">{{getWhereName(event.wherecode)}}</span>
                                         </q-chip>
                                     </span>
                             </div>
+                            <div v-if="event.contribtype" class="">
+                                <span class="cal__quota-title">{{$t('event.price')}}:<span
+                                        class="margin_with"></span></span>
+                                <span v-if="!isShowPrice(event)" class="">
+                                    <q-chip class="glossy" color="orange" text-color="white">
+                                        <span class="cal__quota-content">{{getContribtypeById(event.contribtype)}}</span>
+                                    </q-chip>
+                                </span>
+
+                                <q-chip v-if="event.price && isShowPrice(event)" class="glossy" color="orange"
+                                        text-color="white" icon-right="star">
+                                    <span class="cal__quota-content">{{getPrice(event)}}</span>
+                                </q-chip>
+                            </div>
+
+
                             <p class="text-center">
                                         <span v-if="event.linkpdf" class="">
                                             <q-btn size="md" type="a" :href="`../../statics/` + event.linkpdf"

src/components/CGridTableRec/CGridTableRec.ts

@@ -88,10 +88,9 @@ export default class CGridTableRec extends Vue {
   }
 
   public SaveValue(newVal, valinitial) {
-    console.log('SaveValue', newVal, 'selected', this.selected)
+    // console.log('SaveValue', newVal, 'selected', this.selected)
 
     const mydata = {
-      // colkey: this.colkey,
       id: this.idsel,
       table: this.mytable,
       fieldsvalue: {}
@@ -99,13 +98,8 @@ export default class CGridTableRec extends Vue {
 
     mydata.fieldsvalue[this.colsel] = newVal
 
-    console.table(mydata)
-
     this.valPrec = valinitial
 
-    // console.log('this.idsel', this.idsel, 'this.colsel', this.colsel)
-    // console.table(mydata)
-
     this.saveFieldValue(mydata)
   }
 
@@ -321,7 +315,7 @@ export default class CGridTableRec extends Vue {
 
   public clickFunz(item, col: IColGridTable) {
     if (col.action) {
-      tools.ActionRecTable(this, col.action, this.mytable, item._id, item)
+      tools.ActionRecTable(this, col.action, this.mytable, item._id, item, col.askaction)
     }
   }
 
@@ -331,7 +325,8 @@ export default class CGridTableRec extends Vue {
         this.serverData.splice(this.serverData.indexOf(item), 1)
     } else if (action === lists.MenuAction.DUPLICATE_RECTABLE) {
       // Add record duplicated
-      this.serverData.push(data)
+      // this.serverData.push(data)
+      this.refresh()
     }
   }
 
@@ -354,8 +349,12 @@ export default class CGridTableRec extends Vue {
       } else {
         return tools.getstrDateTime(val)
       }
+    } else if (col.fieldtype === 'boolean') {
+      return (val) ? this.$t('dialog.yes') : this.$t('dialog.no')
     } else {
-      if (val === undefined) {
+      if (val === undefined)
+        return '[]'
+      else if (val === '') {
         return '[]'
       } else {
         let mystr = tools.firstchars(val, tools.MAX_CHARACTERS)

src/components/CGridTableRec/CGridTableRec.vue

@@ -86,40 +86,52 @@
                 <q-td v-for="col in mycolumns" :key="col.name" :props="props" v-if="colVisib.includes(col.field)">
                     <div v-if="col.fieldtype === 'date'">
                         <div style="max-width: 250px; min-width: 200px">
-                            <q-input dense v-model="props.row[col.name]">
+                            <div class="flex flex-container">
-                                <template v-slot:prepend>
+                                <q-icon name="event" class="cursor-pointer">
-                                    <q-icon name="event" class="cursor-pointer">
+                                    <q-popup-edit transition-show="scale" transition-hide="scale" v-if="canEdit"
-                                        <q-popup-edit transition-show="scale" transition-hide="scale" v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
+                                                  v-model="props.row[col.name]" :disable="col.disable"
-                                                      :title="col.title" buttons
+                                                  :title="col.title" buttons
-                                                      @save="SaveValue" @show="selItem(props.row, col.field)">
+                                                  @save="SaveValue" @show="selItem(props.row, col.field)">
-                                            <q-date v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" />
+                                        <q-date v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm"/>
 
-                                        </q-popup-edit>
+                                    </q-popup-edit>
-                                        <!--<q-popup-proxy transition-show="scale" transition-hide="scale">-->
+                                    <!--<q-popup-proxy transition-show="scale" transition-hide="scale">-->
-                                            <!--<q-date v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" />-->
+                                    <!--<q-date v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" />-->
-                                        <!--</q-popup-proxy>-->
+                                    <!--</q-popup-proxy>-->
-                                    </q-icon>
+                                </q-icon>
-                                </template>
+                                <div>
+                                    {{ visuValByType(col, props.row[col.name]) }}
+                                </div>
 
-                                <template v-slot:append>
+                                <q-icon name="access_time" class="cursor-pointer">
-                                    <q-icon name="access_time" class="cursor-pointer">
+                                    <q-popup-edit transition-show="scale" transition-hide="scale" v-if="canEdit"
-                                        <q-popup-edit transition-show="scale" transition-hide="scale" v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
+                                                  v-model="props.row[col.name]" :disable="col.disable"
-                                                      :title="col.title" buttons
+                                                  :title="col.title" buttons
-                                                      @save="SaveValue" @show="selItem(props.row, col.field)">
+                                                  @save="SaveValue" @show="selItem(props.row, col.field)">
-                                            <q-time v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" format24h />
+                                        <q-time v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" format24h/>
 
-                                        </q-popup-edit>
+                                    </q-popup-edit>
 
-                                        <!--<q-popup-proxy transition-show="scale" transition-hide="scale">-->
+                                    <!--<q-popup-proxy transition-show="scale" transition-hide="scale">-->
-                                            <!--<q-time v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" format24h />-->
+                                    <!--<q-time v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" format24h />-->
-                                        <!--</q-popup-proxy>-->
+                                    <!--</q-popup-proxy>-->
-                                    </q-icon>
+                                </q-icon>
-                                </template>
+                            </div>
-                            </q-input>
                         </div>
                     </div>
-                    <div v-if="col.fieldtype === 'boolean'">
+                    <div v-else-if="col.fieldtype === 'boolean'">
-                        <q-checkbox v-model="props.row[col.name])" label="" />
+                        <div :class="getclassCol(col)">
+                            {{ visuValByType(col, props.row[col.name]) }}
+                            <q-popup-edit v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
+                                          :title="col.title" buttons
+                                          @save="SaveValue" @show="selItem(props.row, col.field)">
+                                <q-checkbox v-model="props.row[col.name]" label="">
+
+                                </q-checkbox>
+                                {{ visuValByType(col, props.row[col.name]) }}
+
+                            </q-popup-edit>
+                        </div>
                     </div>
                     <div v-else>
                         <div :class="getclassCol(col)">

src/components/index.ts

@@ -6,6 +6,8 @@ export * from './CCard'
 export * from './CBook'
 export * from './CMyPage'
 export * from './CTitle'
+export * from './CMySelect'
+export * from './CMyEditor'
 export * from './CImgText'
 export * from './CImgTitle'
 export * from './CPreloadImages'

src/model/Calendar.ts

@@ -5,27 +5,28 @@ export interface IEvents {
   short_tit?: string
   title?: string
   details?: string
-  withtime?: boolean
+  dateTimeStart?: Date
-  dur?: number
+  dateTimeEnd?: Date
-  dur2?: number
-  date?: string
   side?: string
   bgcolor?: string
-  days?: number
   icon?: string
   img?: string
-  where?: string
+  img_small?: string
-  contribtype?: number
+  wherecode?: string
-  teacher?: string  // teacherid
+  contribtype?: string
-  teacher2?: string // teacherid2
+  price?: number
+  infoafterprice?: string
+  teacher?: string
+  teacher2?: string
   infoextra?: string
   linkpage?: string
   linkpdf?: string
   nobookable?: boolean
   news?: boolean
-  dupId?: any
   canceled?: boolean
   deleted?: boolean
+  dupId?: any
+  modified?: boolean
 }
 
 export interface IBookedEvent {
@@ -55,6 +56,18 @@ export interface IOperators {
   offers?: string
 }
 
+export interface IWheres {
+  code: string
+  placename: string
+  whereicon: string
+}
+
+export interface IContribtype {
+  _id: any
+  label: string
+  showprice: boolean
+}
+
 export enum EState {
   None, Creating, Modifying
 }
@@ -70,6 +83,8 @@ export interface ICalendarState {
   eventlist: IEvents[]
   bookedevent: IBookedEvent[]
   operators: IOperators[]
+  wheres: IWheres[]
+  contribtype: IContribtype[]
   // ---------------
   titlebarHeight: number
   locale: string,

src/model/GlobalStore.ts

@@ -226,6 +226,7 @@ export interface IColGridTable {
   visible?: boolean
   icon?: string
   action?: any
+  askaction?: string
   foredit?: boolean
   fieldtype?: string
   visuonlyEditVal?: boolean

src/statics/i18n.js

@@ -30,6 +30,7 @@ const msgglobal = {
       delete: 'Elimina',
       cancel: 'Annulla',
       update: 'Aggiorna',
+      add: 'Aggiungi',
       today: 'Oggi',
       book: 'Prenota',
       sendmsg: 'Invia solo un Msg',
@@ -206,13 +207,13 @@ const msgglobal = {
       hours: 'Orario',
       when: 'Quando',
       where: 'Dove',
-      teacher: 'Con',
+      teacher: 'Condotto da',
       enterdate: 'Inserisci data',
       details: 'Dettagli',
       infoextra: 'Date e Ora Extra:',
       alldayevent: 'Tutto il giorno',
-      eventstartdatetime: 'Data e Ora Inizio Evento',
+      eventstartdatetime: 'Inizio',
-      enterEndDateTime: 'Data e Ora Fine Evento',
+      enterEndDateTime: 'Fine',
       selnumpeople: 'Partecipanti',
       selnumpeople_short: 'Num',
       msgbooking: 'Messaggio da inviare',
@@ -229,27 +230,29 @@ const msgglobal = {
       short_tit: 'Titolo Breve',
       title: 'Titolo',
       details: 'Dettagli',
-      withtime: 'Con Tempo',
-      dur: 'durata (min)',
-      dur2: 'durata2 (min)',
       date: 'Data',
       bgcolor: 'Colore Sfondo',
       days: 'Giorni',
       icon: 'Icona',
       img: 'Nomefile Immagine',
+      img_small: 'Img Piccola',
       where: 'Dove',
       contribtype: 'Tipo Contributo',
+      price: 'Contributo',
+      askinfo: 'Chiedi Info',
+      infoafterprice: 'Note dopo la Quota',
       teacher: 'Insegnante',  // teacherid
       teacher2: 'Insegnante2', // teacherid2
       infoextra: 'InfoExtra',
       linkpage: 'WebSite',
       linkpdf: 'Link ad un PDF',
-      nobookable: 'No Prenotabile',
+      nobookable: 'Non Prenotabile',
       news: 'Novità',
       dupId: 'Id Duplicato',
       canceled: 'Cancellato',
       deleted: 'Eliminato',
-      duplicate: 'Duplica'
+      duplicate: 'Duplica',
+      modified: 'Modificato'
     },
     newsletter: {
       title: 'Desideri ricevere la nostra Newsletter?',
@@ -297,6 +300,7 @@ const msgglobal = {
       delete: 'Borrar',
       cancel: 'Cancelar',
       update: 'Actualiza',
+      add: 'Aggrega',
       today: 'Hoy',
       book: 'Reserva',
       sendmsg: 'Envia solo Mensaje',
@@ -467,13 +471,13 @@ const msgglobal = {
       hours: 'Tiempo',
       when: 'Cuando',
       where: 'Donde',
-      teacher: 'Con',
+      teacher: 'Dirigido por',
       enterdate: 'Ingresar la fecha',
       details: 'Detalles',
       infoextra: 'Fecha y Hora Extras:',
       alldayevent: 'Todo el dia',
-      eventstartdatetime: 'Evento de inicio de fecha y hora',
+      eventstartdatetime: 'Inicio',
-      enterEndDateTime: 'Fecha y hora del evento final',
+      enterEndDateTime: 'final',
       selnumpeople: 'Partecipantes',
       selnumpeople_short: 'Num',
       msgbooking: 'Mensaje para enviar',
@@ -490,16 +494,17 @@ const msgglobal = {
       short_tit: 'Título Corto',
       title: 'Título',
       details: 'Detalles',
-      withtime: 'Con Tiempo',
-      dur: 'duración (min)',
-      dur2: 'duración2 (min)',
       date: 'Fecha',
       bgcolor: 'Color de fondo',
       days: 'Días',
       icon: 'Icono',
       img: 'Nombre Imagen',
+      img_small: 'Imagen Pequeña',
       where: 'Dónde',
       contribtype: 'Tipo de Contribución',
+      price: 'Precio',
+      askinfo: 'Solicitar información',
+      infoafterprice: 'notas después del precio',
       teacher: 'Profesor',  // teacherid
       teacher2: 'Profesor2', // teacherid2
       infoextra: 'InfoExtra',
@@ -511,6 +516,7 @@ const msgglobal = {
       canceled: 'Cancelado',
       deleted: 'Eliminado',
       duplicate: 'Duplica',
+      modified: 'Modificado'
     },
     newsletter: {
       title: '¿Desea recibir nuestro boletín informativo?',
@@ -557,6 +563,7 @@ const msgglobal = {
       no: 'Non',
       delete: 'Supprimer',
       update: 'mises à jour',
+      add: 'Ajouter',
       cancel: 'annuler',
       today: 'Aujourd\'hui',
       book: 'Réserve',
@@ -727,13 +734,13 @@ const msgglobal = {
       hours: 'Le temps',
       when: 'Quand',
       where: 'Où',
-      teacher: 'Avec',
+      teacher: 'Dirigé par',
       enterdate: 'Entrez la date',
       details: 'Les détails',
       infoextra: 'Extras Date et heure:',
       alldayevent: 'Toute la journée',
-      eventstartdatetime: 'Date de début et heure de l\'événement',
+      eventstartdatetime: 'début',
-      enterEndDateTime: 'Date et heure de l\'événement final',
+      enterEndDateTime: 'final',
       selnumpeople: 'Participants',
       selnumpeople_short: 'Num',
       msgbooking: 'Message à envoyer',
@@ -750,16 +757,17 @@ const msgglobal = {
       short_tit: 'Titre abrégé\'',
       title: 'Titre',
       details: 'Détails',
-      withtime: 'avec le temps',
-      dur: 'durée (min)',
-      dur2: 'durée2 (min)',
       date: 'Date',
       bgcolor: 'Couleur de fond',
       days: 'Journées',
       icon: 'Icône',
       img: 'Image du nom de fichier',
+      img_small: 'Image petite',
       where: 'Où',
       contribtype: 'Type de contribution',
+      price: 'Prix',
+      askinfo: 'Demander des infos',
+      infoafterprice: 'Notes après le prix',
       teacher: 'Enseignant',  // teacherid
       teacher2: 'Enseignant2', // teacherid2
       infoextra: 'Extra Info',
@@ -770,7 +778,8 @@ const msgglobal = {
       dupId: 'Id Double',
       canceled: 'Annulé',
       deleted: 'Supprimé',
-      duplicate: 'Duplique'
+      duplicate: 'Duplique',
+      modified: 'modifié'
     },
     newsletter: {
       title: 'Souhaitez-vous recevoir notre newsletter?',
@@ -817,6 +826,7 @@ const msgglobal = {
       no: 'No',
       delete: 'Delete',
       update: 'Update',
+      add: 'Add',
       cancel: 'Cancel',
       today: 'Today',
       book: 'Book',
@@ -986,13 +996,13 @@ const msgglobal = {
       hours: 'Hours',
       when: 'When',
       where: 'Where',
-      teacher: 'With',
+      teacher: 'Led by',
       enterdate: 'Enter date',
       details: 'Details',
       infoextra: 'Extra Info DateTime',
       alldayevent: 'All-Day myevent',
-      eventstartdatetime: 'Event start date and time',
+      eventstartdatetime: 'Start',
-      enterEndDateTime: 'Event end date and time',
+      enterEndDateTime: 'End',
       selnumpeople: 'Participants',
       selnumpeople_short: 'Num',
       msgbooking: 'Message to send',
@@ -1009,16 +1019,17 @@ const msgglobal = {
       short_tit: 'Short Title',
       title: 'Title',
       details: 'Details',
-      withtime: 'With Time',
-      dur: 'Duration (min)',
-      dur2: 'Duration2 (min)',
       date: 'Date',
       bgcolor: 'Background color',
       days: 'Days',
       icon: 'Icon',
       img: 'Nomefile Img',
+      img_small: 'Img Small',
       where: 'Qhere',
       contribtype: 'Contribute Type',
+      price: 'Price',
+      askinfo: 'Ask for Info',
+      infoafterprice: 'Info after Price',
       teacher: 'Teacher',  // teacherid
       teacher2: 'Teacher2', // teacherid2
       infoextra: 'Extra Info',
@@ -1029,7 +1040,8 @@ const msgglobal = {
       dupId: 'Id Duplicate',
       canceled: 'Canceled',
       deleted: 'Deleted',
-      duplicate: 'Duplicate'
+      duplicate: 'Duplicate',
+      modified: 'Modified'
     },
     newsletter: {
       title: 'Would you like to receive our Newsletter?',
@@ -1076,6 +1088,7 @@ const msgglobal = {
       no: 'No',
       delete: 'Delete',
       update: 'Update',
+      add: 'Add',
       cancel: 'Cancel',
       today: 'Today',
       book: 'Book',
@@ -1247,13 +1260,13 @@ const msgglobal = {
       hours: 'Hours',
       when: 'When',
       where: 'Where',
-      teacher: 'With',
+      teacher: 'Led by',
       enterdate: 'Enter date',
       details: 'Details',
       infoextra: 'Extra Info DateTime',
       alldayevent: 'All-Day myevent',
-      eventstartdatetime: 'Event start date and time',
+      eventstartdatetime: 'Start',
-      enterEndDateTime: 'Event end date and time',
+      enterEndDateTime: 'End',
       selnumpeople: 'Participants',
       selnumpeople_short: 'Num',
       msgbooking: 'Message to send',
@@ -1270,16 +1283,17 @@ const msgglobal = {
       short_tit: 'Short Title',
       title: 'Title',
       details: 'Details',
-      withtime: 'With Time',
-      dur: 'Duration (min)',
-      dur2: 'Duration2 (min)',
       date: 'Date',
       bgcolor: 'Background color',
       days: 'Days',
       icon: 'Icon',
       img: 'Nomefile Img',
+      img_small: 'Img Small',
       where: 'Qhere',
       contribtype: 'Contribute Type',
+      price: 'Price',
+      askinfo: 'Ask for Info',
+      infoafterprice: 'Info after Price',
       teacher: 'Teacher',  // teacherid
       teacher2: 'Teacher2', // teacherid2
       infoextra: 'Extra Info',
@@ -1290,7 +1304,8 @@ const msgglobal = {
       dupId: 'Id Duplicate',
       canceled: 'Canceled',
       deleted: 'Deleted',
-      duplicate: 'Duplicate'
+      duplicate: 'Duplicate',
+      modified: 'Modified'
     },
     newsletter: {
       title: 'Would you like to receive our Newsletter?',

src/store/Modules/GlobalStore.ts

@@ -270,10 +270,14 @@ namespace Mutations {
   }
 
   function getListByTable(table): any[] {
-    if (table === 'events')
+    if (table === 'myevents')
       return CalendarStore.state.eventlist
     else if (table === 'operators')
       return CalendarStore.state.operators
+    else if (table === 'wheres')
+      return CalendarStore.state.wheres
+    else if (table === 'contribtype')
+      return CalendarStore.state.contribtype
     else if (table === 'bookings')
       return CalendarStore.state.bookedevent
     else if (table === 'users')
@@ -491,6 +495,8 @@ namespace Actions {
     // console.log('loadAfterLogin')
     actions.clearDataAfterLoginOnlyIfActiveConnection()
 
+    await Actions.actions.loadSite()
+
     state.arrConfig = await globalroutines(null, 'readall', 'config', null)
   }
 
@@ -622,10 +628,39 @@ namespace Actions {
       })
   }
 
+  async function loadSite(context) {
+    // console.log('CalendarStore: loadAfterLogin')
+    // Load local data
+    CalendarStore.state.editable = UserStore.state.isAdmin || UserStore.state.isManager
+
+    const showall = UserStore.state.isAdmin || UserStore.state.isManager ? '1' : '0'
+
+    const myuserid = (UserStore.state.userId) ? UserStore.state.userId : '0'
+
+    const ris = await Api.SendReq('/loadsite/' + myuserid + '/' + process.env.APP_ID + '/' + showall, 'GET', null)
+      .then((res) => {
+        CalendarStore.state.bookedevent = (res.data.bookedevent) ? res.data.bookedevent : []
+        CalendarStore.state.eventlist = (res.data.eventlist) ? res.data.eventlist : []
+        CalendarStore.state.operators = (res.data.operators) ? res.data.operators : []
+        CalendarStore.state.wheres = (res.data.wheres) ? res.data.wheres : []
+        CalendarStore.state.contribtype = (res.data.contribtype) ? res.data.contribtype : []
+
+      })
+      .catch((error) => {
+        console.log('error dbLoad', error)
+        // UserStore.mutations.setErrorCatch(error)
+        return new Types.AxiosError(serv_constants.RIS_CODE_ERR, null, tools.ERR_GENERICO, error)
+      })
+
+    return ris
+
+  }
+
   export const actions = {
     setConta: b.dispatch(setConta),
     createPushSubscription: b.dispatch(createPushSubscription),
     loadAfterLogin: b.dispatch(loadAfterLogin),
+    loadSite: b.dispatch(loadSite),
     clearDataAfterLogout: b.dispatch(clearDataAfterLogout),
     clearDataAfterLoginOnlyIfActiveConnection: b.dispatch(clearDataAfterLoginOnlyIfActiveConnection),
     prova: b.dispatch(prova),

src/store/Modules/Store/calendar/CalendarStore.ts

@@ -18,6 +18,8 @@ const state: ICalendarState = {
   eventlist: [],
   bookedevent: [],
   operators: [],
+  wheres: [],
+  contribtype: [],
   // ---------------
   titlebarHeight: 0,
   locale: 'it-IT',
@@ -63,6 +65,41 @@ namespace Getters {
     return mystate.bookedevent.filter((bookedevent) => (bookedevent.id_bookedevent === idevent) && (bookedevent.booked) && (showall || (!showall && bookedevent.userId === UserStore.state.userId) ))
   }, 'getEventsBookedByIdEvent')
 
+  const getTeacherName = b.read((mystate: ICalendarState) => (teacherusername) => {
+    const op = mystate.operators.find((myop) => myop.username === teacherusername)
+    return (op) ? `${op.name} ${op.surname}` : ''
+
+  }, 'getTeacherName')
+
+  const getTeacher = b.read((mystate: ICalendarState) => (teacherusername) => {
+    const op = mystate.operators.find((myop) => myop.username === teacherusername)
+    return (op)
+
+  }, 'getTeacher')
+
+  const getWhereRec = b.read((mystate: ICalendarState) => (wherecode) => {
+    const whererec = mystate.wheres.find((mywhere) => mywhere.code === wherecode)
+    return (whererec)
+
+  }, 'getWhereRec')
+
+  const getContribtypeRec = b.read((mystate: ICalendarState) => (id) => {
+    const ctrec = mystate.contribtype.find((mycontr) => mycontr._id === id)
+    return (ctrec)
+
+  }, 'getContribtypeRec')
+
+  const getContribtypeById = b.read((mystate: ICalendarState) => (id) => {
+    const ctrec = mystate.contribtype.find((mycontr) => mycontr._id === id)
+    return (ctrec) ? ctrec.label : ''
+
+  }, 'getContribtypeById')
+  const getContribtypeRecByLabel = b.read((mystate: ICalendarState) => (label) => {
+    const ctrec = mystate.contribtype.find((mycontr) => mycontr.label === label)
+    return (ctrec)
+
+  }, 'getContribtypeRecByLabel')
+
   export const getters = {
     get findEventBooked() {
       return findEventBooked()
@@ -72,6 +109,24 @@ namespace Getters {
     },
     get getEventsBookedByIdEvent() {
       return getEventsBookedByIdEvent()
+    },
+    get getTeacher() {
+      return getTeacher()
+    },
+    get getWhereRec() {
+      return getWhereRec()
+    },
+    get getContribtypeRec() {
+      return getContribtypeRec()
+    },
+    get getContribtypeById() {
+      return getContribtypeById()
+    },
+    get getContribtypeRecByLabel() {
+      return getContribtypeRecByLabel()
+    },
+    get getTeacherName() {
+      return getTeacherName()
     }
   }
 
@@ -89,41 +144,6 @@ namespace Mutations {
 }
 
 namespace Actions {
-  async function loadAfterLogin(context) {
-    // console.log('CalendarStore: loadAfterLogin')
-    // Load local data
-    state.editable = db_data.userdata.calendar_editable
-    // state.eventlist = db_data.events
-    // state.bookedevent = db_data.userdata.bookedevent
-
-    if (UserStore.getters.isUserInvalid) {
-      state.bookedevent = []
-      return false
-    }
-
-    // Load local data
-    // console.log('CALENDAR loadAfterLogin', 'userid=', UserStore.state.userId)
-
-    let ris = null
-
-    const showall = UserStore.state.isAdmin || UserStore.state.isManager ? '1' : '0'
-
-    ris = await Api.SendReq('/booking/' + UserStore.state.userId + '/' + process.env.APP_ID + '/' + showall, 'GET', null)
-      .then((res) => {
-        state.bookedevent = (res.data.bookedevent) ? res.data.bookedevent : []
-        state.eventlist = (res.data.eventlist) ? res.data.eventlist : []
-        state.operators = (res.data.operators) ? res.data.operators : []
-
-      })
-      .catch((error) => {
-        console.log('error dbLoad', error)
-        // UserStore.mutations.setErrorCatch(error)
-        return new Types.AxiosError(serv_constants.RIS_CODE_ERR, null, tools.ERR_GENERICO, error)
-      })
-
-    return ris
-
-  }
 
   function getparambyevent(bookevent) {
     return {
@@ -195,7 +215,6 @@ namespace Actions {
   }
 
   export const actions = {
-    loadAfterLogin: b.dispatch(loadAfterLogin),
     BookEvent: b.dispatch(BookEvent),
     CancelBookingEvent: b.dispatch(CancelBookingEvent)
   }

src/store/Modules/UserStore.ts

@@ -621,8 +621,6 @@ namespace Actions {
       GlobalStore.actions.checkUpdates()
     }
 
-    const p2 = await CalendarStore.actions.loadAfterLogin()
-
     const p3 = await GlobalStore.actions.loadAfterLogin()
 
     if (static_data.functionality.ENABLE_TODOS_LOADING)

src/store/Modules/lists.ts

@@ -19,7 +19,7 @@ export const lists = {
     DUPLICATE_RECTABLE: 310,
 
     CAN_EDIT_TABLE: 400,
-    SHOW_PREV_REC: 401,
+    SHOW_PREV_REC: 401
   },
 
   selectTheme: [

src/store/Modules/tools.ts

@@ -1628,8 +1628,17 @@ export const tools = {
     } else {
       return 'red'
     }
-  }
+  },
-  ,
+  hasManyDays(mydatestart, mydateend) {
+    if (mydateend)
+      return tools.getstrDate(mydatestart) !== tools.getstrDate(mydateend)
+    else
+      return false
+  },
+
+  isManager() {
+    return UserStore.state.isManager
+  },
 
   getstrDate(mytimestamp) {
     // console.log('getstrDate', mytimestamp)
@@ -1654,6 +1663,14 @@ export const tools = {
     else
       return ''
   },
+
+  getstrDateEmailTime(mythis, mytimestamp) {
+    // console.log('getstrDate', mytimestamp)
+    if (!!mytimestamp)
+      return date.formatDate(mytimestamp, 'DD/MM/YYYY') + ' ' + mythis.$t('starttime') + ' ' + date.formatDate(mytimestamp, 'HH:mm')
+    else
+      return ''
+  },
   getstrMMMDate(mytimestamp) {
     // console.log('getstrDate', mytimestamp)
     if (!!mytimestamp)
@@ -1664,8 +1681,10 @@ export const tools = {
   ,
   getstrYYMMDDDate(mytimestamp) {
     return date.formatDate(mytimestamp, 'YYYY-MM-DD')
-  }
+  },
-  ,
+  getstrYYMMDDDateTime(mytimestamp) {
+    return date.formatDate(mytimestamp, 'YYYY-MM-DD HH:mm')
+  },
 
 // mystrdate "26.04.2013"
   convertstrtoDate(mystrdate
@@ -1925,7 +1944,7 @@ export const tools = {
 
   myheight_dialog() {
     if (Screen.width < 400) {
-      return '350'
+      return '337'
     } else if (Screen.width < 600) {
       return '400'
     } else {
@@ -2031,6 +2050,10 @@ export const tools = {
     return date.addToDate(mydate, { days })
   },
 
+  addMinutes(mydate, minutes) {
+    return date.addToDate(mydate, { minutes })
+  },
+
   gettitlemain(datamain: ITimeLineMain) {
     if (datamain.titlemain[toolsext.getLocale()])
       return datamain.titlemain[toolsext.getLocale()]
@@ -2142,9 +2165,9 @@ export const tools = {
 
     return msg
   },
-  gettextevent(myevent: IEvents) {
+  gettextevent(mythis, myevent: IEvents) {
     // return '"' + myevent.title + '" (' + func_tools.getDateStr(myevent.date) + ') - ' + myevent.time
-    return '"' + myevent.title + '" (' + tools.getstrDateTime(myevent.date)
+    return '"' + myevent.title + '" (' + tools.getstrDateEmailTime(mythis, myevent.dateTimeStart) + ')'
   },
 
   setLangAtt(mylang) {
@@ -2280,32 +2303,51 @@ export const tools = {
   },
   displayClasses(eventparam) {
     return {
-      [`bg-${eventparam.bgcolor}`]: !tools.isCssColor(eventparam.bgcolor),
+      // [`bg-${eventparam.bgcolor}`]: !tools.isCssColor(eventparam.bgcolor),
       'text-white': !tools.isCssColor(eventparam.bgcolor)
     }
   },
   displayStyles(eventparam) {
     const s = { color: '' }
     if (tools.isCssColor(eventparam.bgcolor)) {
-      s['background-color'] = eventparam.bgcolor
+      // s['background-color'] = eventparam.bgcolor
       s.color = colors.luminosity(eventparam.bgcolor) > 0.5 ? 'black' : 'white'
     }
     return s
   },
   CancelBookingEvent(mythis, eventparam: IEvents, bookeventid: string, notify: boolean) {
     console.log('CancelBookingEvent ', eventparam)
-    tools.askConfirm(mythis.$q, translate('cal.titlebooking'), translate('cal.cancelbooking') + ' ' + tools.gettextevent(eventparam) + '?', translate('dialog.yes'), translate('dialog.no'), mythis, '', lists.MenuAction.DELETE, 0, {
+    tools.askConfirm(mythis.$q, translate('cal.titlebooking'), translate('cal.cancelbooking') + ' ' + tools.gettextevent(mythis, eventparam) + '?', translate('dialog.yes'), translate('dialog.no'), mythis, '', lists.MenuAction.DELETE, 0, {
       param1: bookeventid,
       param2: notify
     })
   },
-  ActionRecTable(mythis, action, table, id, item?) {
+  ActionRecTable(mythis, action, table, id, item, askaction) {
-    console.log('CancelRecTable', id)
+    console.log('ActionRecTable', id)
-    return tools.askConfirm(mythis.$q, translate('db.deleterecord'), translate('db.deletetherecord'), translate('dialog.yes'), translate('dialog.no'), mythis, table, action, 0, {
+    return tools.askConfirm(mythis.$q, 'Action', translate(askaction) + '?', translate('dialog.yes'), translate('dialog.no'), mythis, table, action, 0, {
       param1: id,
       param2: item
     })
   },
+
+  async createNewRecord(mythis, table, data) {
+
+    const mydata = {
+      table,
+      data
+    }
+
+    return await GlobalStore.actions.saveTable(mydata)
+      .then((record) => {
+        if (record) {
+          tools.showPositiveNotif(mythis.$q, mythis.$t('db.recupdated'))
+        } else {
+          tools.showNegativeNotif(mythis.$q, mythis.$t('db.recfailed'))
+        }
+        return record
+      })
+  },
+
   isBitActive(bit, whattofind) {
     return ((bit & whattofind) === whattofind)
   }

src/store/Modules/toolsext.ts

@@ -1,4 +1,5 @@
 import { UserStore } from '@store'
+import { date } from 'quasar'
 
 export const toolsext = {
   getLocale(vero?: boolean) {
@@ -33,11 +34,21 @@ export const func_tools = {
       year: 'numeric'
       // timeZone: 'UTC'
     })
-    if (DateFormatter) {
+    try {
-      const date = new Date(mydate)
+      console.log('mydate', mydate, DateFormatter)
-      return DateFormatter.format(date)
+      if (DateFormatter) {
+        const date1 = new Date(mydate)
+        return DateFormatter.format(date1)
+      }
+      return mydate
+    }catch (e) {
+      return ''
     }
-    return mydate
+
+  },
+
+  getMinutesDuration(mydatestart, mydateend) {
+    return date.getDateDiff(mydateend, mydatestart, 'minutes')
   },
 
   getDateTimeShortStr(mydate) {