surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Enable Edit Event into dialog form ... (and save to the db)

Browse Source 
- Event: enabled drag and drop (date)
- Q-Select components in every table field external: Where, Operators, etc...
- CMyEditor: Add HTML Editor to the details field !
- Added button Color for change font color to the text.
- Complete insert Events Site
This commit is contained in:
Paolo Arena
2019-10-23 23:47:12 +02:00
parent bfe5053407
commit c39f0d8486
11 changed files with 608 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/CEventsCalendar/CEventsCalendar.scss
View File

@@ -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;
}
}

313
src/components/CEventsCalendar/CEventsCalendar.ts
View File

@@ -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,9 +32,90 @@ 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 $q
public $t: any
public calendarView = 'month'
public selectedDate = '2019-04-01'
public formDefault: IEvents = {
title: '',
details: '',
dateTimeStart: tools.getstrYYMMDDDateTime(tools.getDateNow()),
dateTimeEnd: tools.getstrYYMMDDDateTime(tools.getDateNow()),
icon: '',
bgcolor: '#839ff2'
}
public formbookEventDefault: IBookedEvent = {
userId: '',
msgbooking: '',
infoevent: '',
numpeople: 1,
datebooked: tools.getDateNow(),
booked: false,
modified: false
}
public mioalert = false
public dateFormatter: any = ''
public titleFormatter: any = null
public keyValue = 0
public direction = 'forward'
public weekdays = [1, 2, 3, 4, 5, 6, 0]
public viewOptions = [
{ label: 'Day', value: 'day' },
{ label: '5 Day', value: '5day' },
{ label: 'Week', value: 'week' },
{ label: 'Month', value: 'month' }
]
public addEvent = false
public bookEventpage: IBookedEventPage = {
show: false,
bookedevent: null,
state: EState.None
}
public contextDay = null
public eventForm: IEvents = { ...this.formDefault }
public bookEventForm = { ...this.formbookEventDefault }
public displayEvent = false
public myevent = null
// public events = []
public gmt = ''
public dragging = false
public draggedEvent = null
public ignoreNextSwipe = false
public showDateScrollerAllDay = false
public showDateTimeScrollerStart = false
public showDateTimeScrollerEnd = false
public resources = [
{
label: 'John'
},
{
label: 'Mary'
},
{
label: 'Susan'
},
{
label: 'Olivia'
},
{
label: 'Board Room'
},
{
label: 'Room-1'
},
{
label: 'Room-2'
}
]
// public eventdata =
// [
@@ -189,7 +272,7 @@ export default class CEventsCalendar extends Vue {
get eventsMap() {
// console.log('eventsMap')
const map = {}
CalendarStore.state.eventlist.forEach((myevent) => (map[myevent.dateTimeStart.toDateString()] = map[myevent.dateTimeStart.toDateString()] || []).push(myevent))
CalendarStore.state.eventlist.forEach((myevent) => (map[tools.getstrDateTime(myevent.dateTimeStart)] = map[tools.getstrDateTime(myevent.dateTimeStart)] || []).push(myevent))
return map
}
@@ -271,85 +354,7 @@ export default class CEventsCalendar extends Vue {
get mythis() {
return this
}
public $t: any
public $q
public calendarView = 'month'
public selectedDate = '2019-04-01'
public formDefault: IEvents = {
title: '',
details: '',
icon: '',
bgcolor: '#0000FF'
}
public formbookEventDefault: IBookedEvent = {
userId: '',
msgbooking: '',
infoevent: '',
numpeople: 1,
datebooked: tools.getDateNow(),
booked: false,
modified: false
}
public mioalert = false
public dateFormatter: any = ''
public titleFormatter: any = null
public keyValue = 0
public direction = 'forward'
public weekdays = [1, 2, 3, 4, 5, 6, 0]
public viewOptions = [
{ label: 'Day', value: 'day' },
{ label: '5 Day', value: '5day' },
{ label: 'Week', value: 'week' },
{ label: 'Month', value: 'month' }
]
public addEvent = false
public bookEventpage: IBookedEventPage = {
show: false,
bookedevent: null,
state: EState.None
}
public contextDay = null
public eventForm = { ...this.formDefault }
public bookEventForm = { ...this.formbookEventDefault }
public displayEvent = false
public myevent = null
// public events = []
public gmt = ''
public dragging = false
public draggedEvent = null
public ignoreNextSwipe = false
public showDateScrollerAllDay = false
public showDateTimeScrollerStart = false
public showDateTimeScrollerEnd = false
public resources = [
{
label: 'John'
},
{
label: 'Mary'
},
{
label: 'Susan'
},
{
label: 'Olivia'
},
{
label: 'Board Room'
},
{
label: 'Room-1'
},
{
label: 'Room-2'
}
]
public $refs: {
calendar: any
@@ -367,6 +372,7 @@ export default class CEventsCalendar extends Vue {
this.$root.$on('calendar:today', this.calendarToday)
// CalendarStore.state.eventlist = events
this.updateFormatters()
}
public beforeMount() {
@@ -411,6 +417,9 @@ export default class CEventsCalendar extends Vue {
this.resetForm()
this.contextDay = { ...day }
this.eventForm.dateTimeStart = tools.getstrYYMMDDDateTime(day.date + ' 21:00:00')
this.eventForm.dateTimeEnd = tools.getstrYYMMDDDateTime(day.date + ' 22:00:00')
this.addEvent = true // show dialog
}
@@ -423,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
@@ -440,9 +448,10 @@ export default class CEventsCalendar extends Vue {
public editEvent(eventparam) {
console.log('editEvent - INIZIO')
this.resetForm()
this.contextDay = { ...eventparam }
this.eventForm = {... eventparam }
this.eventForm = { ...eventparam }
this.eventForm.dateTimeStart = tools.getstrYYMMDDDateTime(eventparam.dateTimeStart)
this.eventForm.dateTimeEnd = tools.getstrYYMMDDDateTime(eventparam.dateTimeEnd)
@@ -459,6 +468,7 @@ export default class CEventsCalendar extends Vue {
public findEventIndex(eventparam) {
for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
if (eventparam) {
if (eventparam.title === CalendarStore.state.eventlist[i].title &&
eventparam.details === CalendarStore.state.eventlist[i].details &&
eventparam.dateTimeStart === CalendarStore.state.eventlist[i].dateTimeStart &&
@@ -467,6 +477,7 @@ export default class CEventsCalendar extends Vue {
}
}
}
}
public formatDate(mydate: any) {
let d = void 0
@@ -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,7 +546,7 @@ 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 {
@@ -516,18 +554,6 @@ export default class CEventsCalendar extends Vue {
}
const data = { ...form }
if (update === true) {
const index = self.findEventIndex(self.contextDay)
if (index >= 0) {
// @ts-ignore
CalendarStore.state.eventlist.splice(index, 1, { ...data })
}
} else {
// add to events array
// @ts-ignore
CalendarStore.state.eventlist.push(data)
}
// ++Save into the Database
const mydatatosave = {
id: data._id,
@@ -535,9 +561,31 @@ export default class CEventsCalendar extends Vue {
fieldsvalue: data
}
GlobalStore.actions.saveFieldValue(mydatatosave).then((esito) => {
if (esito) {
if (update === true) {
this.UpdateDbByFields(data, true)
} else {
const mydataadd = {
table: 'myevents',
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...
@@ -548,6 +596,7 @@ export default class CEventsCalendar extends Vue {
}
}
})
}
self.contextDay = null
}
@@ -592,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(),
@@ -686,14 +735,29 @@ export default class CEventsCalendar extends Vue {
public onDrop(ev, day, type) {
ev.preventDefault()
ev.stopPropagation()
console.log('day.dateTimeStart', day.dateTimeStart, day.date, 'day.time', day.time)
if (type === 'day') {
this.draggedEvent.dateTimeStart = day.dateTimeStart
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.dateTimeStart = day.dateTimeStart
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() {
@@ -712,12 +776,58 @@ 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.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) {
return CalendarStore.getters.getTeacherName(teacherusername)
}
@@ -726,6 +836,7 @@ export default class CEventsCalendar extends Vue {
const whererec = CalendarStore.getters.getWhereRec(where)
return (whererec) ? whererec.whereicon : ''
}
public getWhereName(where) {
const whererec = CalendarStore.getters.getWhereRec(where)
return (whererec) ? whererec.placename : ''
@@ -835,7 +946,7 @@ export default class CEventsCalendar extends Vue {
// CalendarStore.state.eventlist[i].side = void 0
eventsloc.push(CalendarStore.state.eventlist[i])
}
} else if (func_tools.hasManyDays(CalendarStore.state.eventlist[i].dateTimeStart, CalendarStore.state.eventlist[i].dateTimeEnd)) {
} else if (tools.hasManyDays(CalendarStore.state.eventlist[i].dateTimeStart, CalendarStore.state.eventlist[i].dateTimeEnd)) {
// check for overlapping dates
if (date.isBetweenDates(dt, CalendarStore.state.eventlist[i].dateTimeStart, CalendarStore.state.eventlist[i].dateTimeEnd)) {
eventsloc.push(CalendarStore.state.eventlist[i])

194
src/components/CEventsCalendar/CEventsCalendar.vue
View File

@@ -4,8 +4,9 @@
<!-- display an myevent -->
<q-dialog v-model="displayEvent">
<q-card v-if="myevent">
<q-toolbar :class="tools.displayClasses(myevent)"
:style="tools.displayStyles(myevent) + ` min-width: `+ tools.myheight_dialog() + `px;`">
<q-toolbar class="bg-primary text-white" :style="`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,14 +17,20 @@
<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 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
@@ -47,7 +54,7 @@
</span>
</div>
<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>
@@ -60,6 +67,12 @@
</q-chip>
</span>
</div>
<div v-if="myevent.price && isShowPrice(myevent)" class="cal__quota">
<span class="cal__quota-title">{{$t('event.price')}}:</span>
<q-chip>
<span class="cal__quota-content">{{getPrice(myevent)}}</span>
</q-chip>
</div>
<div v-if="myevent.dateTimeStart" class="cal__when">
<span class="cal__where-title">{{$t('cal.when')}}: </span>
<span class="cal__where-content">{{ tools.getstrDate(myevent.dateTimeStart)}} - {{ tools.getstrDate(myevent.dateTimeEnd)}}</span>
@@ -69,7 +82,7 @@
<span class="cal__hours-content">{{ myevent.infoextra }} </span>
</span>
<span v-else>
<span v-if="!func_tools.hasManyDays(myevent.dateTimeStart, myevent.dateTimeEnd)"
<span v-if="!tools.hasManyDays(myevent.dateTimeStart, myevent.dateTimeEnd)"
class="cal__hours">
-
<span class="cal__hours-title">{{$t('cal.hours')}}: </span>
@@ -109,16 +122,22 @@
<q-form
v-if="contextDay"
ref='myevent'
class="q-gutter-md">
<q-input v-model="eventForm.title" autofocus label="Title"
class="q-gutter-sm">
<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>
<CMyEditor :value.sync="eventForm.details">
</CMyEditor>
<!--<q-checkbox v-model="eventForm.allday" :label="$t('cal.alldayevent')"></q-checkbox>-->
<div class="q-gutter-sm">
<div class="q-gutter-sm row myflex">
<q-input color="blue-6" outlined v-model="eventForm.dateTimeStart"
:label="$t('cal.eventstartdatetime')" mask="####-##-## ##:##">
:label="$t('cal.eventstartdatetime')" mask="####-##-## ##:##"
class="calendar_comp">
<template #append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy v-model="showDateTimeScrollerStart">
@@ -143,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">
@@ -167,40 +187,93 @@
</q-icon>
</template>
</q-input>
<q-input dense v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
</div>
<q-input dense v-model="eventForm.teacher" :label="$t('event.teacher')"></q-input>
<q-input dense v-model="eventForm.teacher2" :label="$t('event.teacher2')"></q-input>
<div class="q-gutter-sm myflex">
<q-input dense v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
<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 dense v-model="eventForm.icon" label="Icon"></q-input>
<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">
<q-icon name="colorize" class="cursor-pointer" color="white">
<q-popup-proxy>
<q-color v-model="eventForm.bgcolor"></q-color>
<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>
<q-input dense v-model="eventForm.img" :label="$t('event.img')"></q-input>
<q-input dense v-model="eventForm.img_small" :label="$t('event.img_small')"></q-input>
<q-input dense v-model="eventForm.wherecode" :label="$t('event.where')"></q-input>
<q-input dense v-model="eventForm.contribtype" :label="$t('event.contribtype')"></q-input>
<q-input dense v-model="eventForm.price" :label="$t('event.price')"></q-input>
<q-input dense v-model="eventForm.infoafterprice" :label="$t('event.infoafterprice')"></q-input>
<div class="q-gutter-sm myflex">
<q-input dense v-model="eventForm.linkpage" :label="$t('event.linkpage')"></q-input>
<q-input dense v-model="eventForm.linkpdf" :label="$t('event.linkpdf')"></q-input>
<q-checkbox dense v-model="eventForm.news" :label="$t('event.news')"></q-checkbox>
<q-checkbox dense v-model="eventForm.nobookable" :label="$t('event.nobookable')"></q-checkbox>
<q-checkbox dense v-model="eventForm.canceled" :label="$t('event.canceled')"></q-checkbox>
<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-form>
</q-card-section>
@@ -221,23 +294,28 @@
</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 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 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.dateTimeStart)}}</span>
<span v-if="func_tools.hasManyDays(myevent.dateTimeStart)" class="cal__where-content"> - {{func_tools.getDateStr(myevent.dateTimeEnd)}}<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="!func_tools.hasManyDays(myevent.dateTimeStart, myevent.dateTimeEnd)"
<span v-if="!tools.hasManyDays(myevent.dateTimeStart, myevent.dateTimeEnd)"
class="cal__hours">
-
<span class="cal__hours-title">{{$t('cal.hours')}}: </span>
@@ -262,7 +340,7 @@
:label="$t('cal.bookingtextdefault')" color="green">
</q-checkbox>
<div v-if="bookEventForm.booked" class="q-gutter-md centermydiv"
<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"
@@ -380,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)"
@@ -430,7 +508,7 @@
: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)"
@@ -453,14 +531,20 @@
<tbody>
<tr v-for="(event, index) in getEventList()" class="listaev listaev__table">
<td :class="clEvent(event)">
<p class="listaev__align_center_mobile">
<img :src="`../../statics/`+event.img"
<p class="listaev__align_chips">
<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"
dense>{{$t('cal.booked')}}
icon="event_available">{{$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">
@@ -476,11 +560,11 @@
</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"
@@ -491,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>
@@ -537,6 +623,22 @@
</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"

2
src/components/index.ts
View File

@@ -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'

7
src/model/Calendar.ts
View File

@@ -62,6 +62,12 @@ export interface IWheres {
whereicon: string
}
export interface IContribtype {
_id: any
label: string
showprice: boolean
}
export enum EState {
None, Creating, Modifying
}
@@ -78,6 +84,7 @@ export interface ICalendarState {
bookedevent: IBookedEvent[]
operators: IOperators[]
wheres: IWheres[]
contribtype: IContribtype[]
// ---------------
titlebarHeight: number
locale: string,

39
src/statics/i18n.js
View File

@@ -207,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',
enterEndDateTime: 'Data e Ora Fine Evento',
eventstartdatetime: 'Inizio',
enterEndDateTime: 'Fine',
selnumpeople: 'Partecipanti',
selnumpeople_short: 'Num',
msgbooking: 'Messaggio da inviare',
@@ -238,14 +238,15 @@ const msgglobal = {
img_small: 'Img Piccola',
where: 'Dove',
contribtype: 'Tipo Contributo',
price: 'Quota',
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',
@@ -470,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',
enterEndDateTime: 'Fecha y hora del evento final',
eventstartdatetime: 'Inicio',
enterEndDateTime: 'final',
selnumpeople: 'Partecipantes',
selnumpeople_short: 'Num',
msgbooking: 'Mensaje para enviar',
@@ -502,6 +503,7 @@ const msgglobal = {
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
@@ -732,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',
enterEndDateTime: 'Date et heure de l\'événement final',
eventstartdatetime: 'début',
enterEndDateTime: 'final',
selnumpeople: 'Participants',
selnumpeople_short: 'Num',
msgbooking: 'Message à envoyer',
@@ -764,6 +766,7 @@ const msgglobal = {
where: 'Où',
contribtype: 'Type de contribution',
price: 'Prix',
askinfo: 'Demander des infos',
infoafterprice: 'Notes après le prix',
teacher: 'Enseignant', // teacherid
teacher2: 'Enseignant2', // teacherid2
@@ -993,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',
enterEndDateTime: 'Event end date and time',
eventstartdatetime: 'Start',
enterEndDateTime: 'End',
selnumpeople: 'Participants',
selnumpeople_short: 'Num',
msgbooking: 'Message to send',
@@ -1025,6 +1028,7 @@ const msgglobal = {
where: 'Qhere',
contribtype: 'Contribute Type',
price: 'Price',
askinfo: 'Ask for Info',
infoafterprice: 'Info after Price',
teacher: 'Teacher', // teacherid
teacher2: 'Teacher2', // teacherid2
@@ -1256,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',
enterEndDateTime: 'Event end date and time',
eventstartdatetime: 'Start',
enterEndDateTime: 'End',
selnumpeople: 'Participants',
selnumpeople_short: 'Num',
msgbooking: 'Message to send',
@@ -1288,6 +1292,7 @@ const msgglobal = {
where: 'Qhere',
contribtype: 'Contribute Type',
price: 'Price',
askinfo: 'Ask for Info',
infoafterprice: 'Info after Price',
teacher: 'Teacher', // teacherid
teacher2: 'Teacher2', // teacherid2

33
src/store/Modules/GlobalStore.ts
View File

@@ -276,6 +276,8 @@ namespace Mutations {
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')
@@ -493,6 +495,8 @@ namespace Actions {
// console.log('loadAfterLogin')
actions.clearDataAfterLoginOnlyIfActiveConnection()
await Actions.actions.loadSite()
state.arrConfig = await globalroutines(null, 'readall', 'config', null)
}
@@ -624,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),

62
src/store/Modules/Store/calendar/CalendarStore.ts
View File

@@ -19,6 +19,7 @@ const state: ICalendarState = {
bookedevent: [],
operators: [],
wheres: [],
contribtype: [],
// ---------------
titlebarHeight: 0,
locale: 'it-IT',
@@ -82,6 +83,23 @@ namespace Getters {
}, '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()
@@ -98,6 +116,15 @@ namespace Getters {
get getWhereRec() {
return getWhereRec()
},
get getContribtypeRec() {
return getContribtypeRec()
},
get getContribtypeById() {
return getContribtypeById()
},
get getContribtypeRecByLabel() {
return getContribtypeRecByLabel()
},
get getTeacherName() {
return getTeacherName()
}
@@ -117,40 +144,6 @@ namespace Mutations {
}
namespace Actions {
async function loadAfterLogin(context) {
// console.log('CalendarStore: loadAfterLogin')
// Load local data
state.editable = UserStore.state.isAdmin || UserStore.state.isManager
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 : []
state.wheres = (res.data.wheres) ? res.data.wheres : []
})
.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 {
@@ -222,7 +215,6 @@ namespace Actions {
}
export const actions = {
loadAfterLogin: b.dispatch(loadAfterLogin),
BookEvent: b.dispatch(BookEvent),
CancelBookingEvent: b.dispatch(CancelBookingEvent)
}

2
src/store/Modules/UserStore.ts
View File

@@ -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)

56
src/store/Modules/tools.ts
View File

@@ -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)
@@ -1927,7 +1944,7 @@ export const tools = {
myheight_dialog() {
if (Screen.width < 400) {
return '350'
return '337'
} else if (Screen.width < 600) {
return '400'
} else {
@@ -2033,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()]
@@ -2144,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.dateTimeStart)
return '"' + myevent.title + '" (' + tools.getstrDateEmailTime(mythis, myevent.dateTimeStart) + ')'
},
setLangAtt(mylang) {
@@ -2282,21 +2303,21 @@ 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
})
@@ -2308,6 +2329,25 @@ export const tools = {
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)
}

11
src/store/Modules/toolsext.ts
View File

@@ -34,18 +34,17 @@ export const func_tools = {
year: 'numeric'
// timeZone: 'UTC'
})
try {
console.log('mydate', mydate, DateFormatter)
if (DateFormatter) {
const date1 = new Date(mydate)
return DateFormatter.format(date1)
}
return mydate
},
}catch (e) {
return ''
}
hasManyDays(mydatestart, mydateend) {
if (mydateend)
return this.getDateStr(mydatestart) !== this.getDateStr(mydateend)
else
return false
},
getMinutesDuration(mydatestart, mydateend) {