- Enable Edit Event into dialog form ... (and save to the db)
- 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
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,11 +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 &&
|
||||
eventparam.details === CalendarStore.state.eventlist[i].details &&
|
||||
eventparam.dateTimeStart === CalendarStore.state.eventlist[i].dateTimeStart &&
|
||||
eventparam.dateTimeEnd === CalendarStore.state.eventlist[i].dateTimeEnd) {
|
||||
return i
|
||||
if (eventparam) {
|
||||
if (eventparam.title === CalendarStore.state.eventlist[i].title &&
|
||||
eventparam.details === CalendarStore.state.eventlist[i].details &&
|
||||
eventparam.dateTimeStart === CalendarStore.state.eventlist[i].dateTimeStart &&
|
||||
eventparam.dateTimeEnd === CalendarStore.state.eventlist[i].dateTimeEnd) {
|
||||
return i
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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,19 +561,42 @@ export default class CEventsCalendar extends Vue {
|
||||
fieldsvalue: data
|
||||
}
|
||||
|
||||
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...
|
||||
const index = self.findEventIndex(self.contextDay)
|
||||
if (index >= 0) {
|
||||
// @ts-ignore
|
||||
CalendarStore.state.eventlist.splice(index, 1, { ...self.contextDay })
|
||||
}
|
||||
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...
|
||||
const index = self.findEventIndex(self.contextDay)
|
||||
if (index >= 0) {
|
||||
// @ts-ignore
|
||||
CalendarStore.state.eventlist.splice(index, 1, { ...self.contextDay })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
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])
|
||||
|
||||
@@ -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,49 +17,61 @@
|
||||
<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
|
||||
class="margin_with"></span></span>
|
||||
<!--<span class="cal__teacher-content">{{myevent.teacher}}</span>-->
|
||||
<span class="cal__teacher-content">
|
||||
<q-chip>
|
||||
<q-avatar>
|
||||
<img :src="`../../statics/images/` + getTeacherImg(myevent.teacher)">
|
||||
</q-avatar>
|
||||
<span class="cal__teacher-content">{{getTeacherName(myevent.teacher)}}</span>
|
||||
</q-chip>
|
||||
<span v-if="getTeacherImg(myevent.teacher2) && myevent.teacher2"
|
||||
class="margin_avatar2"></span>
|
||||
<q-chip v-if="getTeacherImg(myevent.teacher2) && myevent.teacher2">
|
||||
<q-avatar>
|
||||
<img :src="`../../statics/images/` + getTeacherImg(myevent.teacher2)">
|
||||
</q-avatar>
|
||||
<span class="cal__teacher-content">{{getTeacherName(myevent.teacher2)}}</span>
|
||||
</q-chip>
|
||||
</span>
|
||||
<q-chip>
|
||||
<q-avatar>
|
||||
<img :src="`../../statics/images/` + getTeacherImg(myevent.teacher)">
|
||||
</q-avatar>
|
||||
<span class="cal__teacher-content">{{getTeacherName(myevent.teacher)}}</span>
|
||||
</q-chip>
|
||||
<span v-if="getTeacherImg(myevent.teacher2) && myevent.teacher2"
|
||||
class="margin_avatar2"></span>
|
||||
<q-chip v-if="getTeacherImg(myevent.teacher2) && myevent.teacher2">
|
||||
<q-avatar>
|
||||
<img :src="`../../statics/images/` + getTeacherImg(myevent.teacher2)">
|
||||
</q-avatar>
|
||||
<span class="cal__teacher-content">{{getTeacherName(myevent.teacher2)}}</span>
|
||||
</q-chip>
|
||||
</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>
|
||||
<q-avatar v-if="getWhereIcon(myevent.wherecode)">
|
||||
<img :src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)">
|
||||
</q-avatar>
|
||||
<q-avatar color="blue" font-size="20px" text-color="white" icon="home">
|
||||
</q-avatar>
|
||||
<span class="cal__teacher-content">{{getWhereName(myevent.wherecode)}}</span>
|
||||
</q-chip>
|
||||
</span>
|
||||
<q-chip>
|
||||
<q-avatar v-if="getWhereIcon(myevent.wherecode)">
|
||||
<img :src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)">
|
||||
</q-avatar>
|
||||
<q-avatar color="blue" font-size="20px" text-color="white" icon="home">
|
||||
</q-avatar>
|
||||
<span class="cal__teacher-content">{{getWhereName(myevent.wherecode)}}</span>
|
||||
</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>
|
||||
@@ -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>
|
||||
|
||||
<q-input dense 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>
|
||||
<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>
|
||||
|
||||
<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 row items-start">
|
||||
|
||||
<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>
|
||||
</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-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"
|
||||
|
||||
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user