other components... (2)
This commit is contained in:
Paolo Arena
303
src/components/CEventsCalendar/CEventsCalendar.scss
Executable file
303
src/components/CEventsCalendar/CEventsCalendar.scss
Executable file
@@ -0,0 +1,303 @@
|
||||
$graytext: #555;
|
||||
|
||||
.calendar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.my-event {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.my-event-rel {
|
||||
width: 100%;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25rem;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
padding: 4px 2px 4px 2px !important;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
background-color: #ccc;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
background-color: #9f9f9f;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.cal {
|
||||
color: black;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.25rem;
|
||||
letter-spacing: 0.03333em;
|
||||
|
||||
&__title {
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
&__details {
|
||||
color: black;
|
||||
}
|
||||
|
||||
&__hours {
|
||||
color: blue;
|
||||
&-title {
|
||||
color: $graytext;
|
||||
}
|
||||
&-content {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
&__where {
|
||||
margin-top: 5px;
|
||||
color: blue;
|
||||
|
||||
&-title {
|
||||
color: $graytext;
|
||||
}
|
||||
&-content {
|
||||
color: darkblue;
|
||||
}
|
||||
}
|
||||
|
||||
&__when {
|
||||
margin-top: 5px;
|
||||
color: blue;
|
||||
|
||||
&-title {
|
||||
color: $graytext;
|
||||
}
|
||||
&-content {
|
||||
color: darkblue;
|
||||
}
|
||||
}
|
||||
|
||||
&__teacher {
|
||||
margin-top: 5px;
|
||||
&-title {
|
||||
color: $graytext;
|
||||
}
|
||||
&-content {
|
||||
color: darkblue;
|
||||
}
|
||||
}
|
||||
|
||||
&__quota {
|
||||
margin-top: 5px;
|
||||
&-title {
|
||||
color: $graytext;
|
||||
}
|
||||
&-content {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.listaev {
|
||||
color: black;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.25rem;
|
||||
letter-spacing: 0.03333em;
|
||||
|
||||
&__date {
|
||||
color: #061220;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: red;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.066em;
|
||||
}
|
||||
|
||||
&__details {
|
||||
color: black;
|
||||
}
|
||||
|
||||
&__tdimg {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
&__tdimg_small {
|
||||
width: auto;
|
||||
height: 50px !important;
|
||||
@media (max-width: 800px) {
|
||||
height: 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__table {
|
||||
margin: 10px;
|
||||
border: solid 1px #4198ef;
|
||||
border-radius: 1rem;
|
||||
padding: 2px;
|
||||
}
|
||||
&__table tr {
|
||||
border: solid 1px #4198ef;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
&__table tr:hover {
|
||||
background-color: #deecef;
|
||||
}
|
||||
|
||||
&__align_center_mobile {
|
||||
text-align: left;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
padding: 0.25rem !important;
|
||||
float: left;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 1rem;
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
float: none;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__img:hover {
|
||||
transition: transform .2s;
|
||||
transform: scale(1.05);
|
||||
border: inset;
|
||||
border-color: blue;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
.q-chip__content {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
.q-chip > div {
|
||||
white-space: normal !important;
|
||||
}
|
||||
.inline > div {
|
||||
white-space: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mytoolbar {
|
||||
padding: 0 2px !important;
|
||||
}
|
||||
|
||||
.margin_avatar, .margin_avatar2, .margin_with {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.margin_avatar {
|
||||
margin-left: 28px;
|
||||
}
|
||||
|
||||
.margin_avatar2 {
|
||||
margin-left: 38px;
|
||||
}
|
||||
|
||||
.margin_with {
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.chipbooked {
|
||||
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
@media (max-width: 400px) {
|
||||
left: initial;
|
||||
position: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.chipnews {
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@media (max-width: 400px) {
|
||||
position: initial;
|
||||
right: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.chipmodif {
|
||||
|
||||
position: absolute;
|
||||
margin-top: -10px;
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
box-sizing: border-box;
|
||||
right: 0;
|
||||
@media (max-width: 400px) {
|
||||
position: initial;
|
||||
right: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.windowcol {
|
||||
background-color: #ffffff;
|
||||
// background: radial-gradient(circle, #ffffff 0%, #94dbfb 100%)
|
||||
}
|
||||
|
||||
.mysel {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.myflex {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
@media (max-width: 400px) {
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
.itemprenota{
|
||||
align-self: center;
|
||||
color: blue;
|
||||
}
|
||||
891
src/components/CEventsCalendar/CEventsCalendar.ts.off
Executable file
891
src/components/CEventsCalendar/CEventsCalendar.ts.off
Executable file
@@ -0,0 +1,891 @@
|
||||
import { defineComponent, ref, computed, PropType, reactive, watch } from 'vue'
|
||||
import { useI18n } from '@src/boot/i18n'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { colors, Screen, Platform, date } from 'quasar'
|
||||
import { static_data } from '@src/db/static_data'
|
||||
import translate from '@src/globalroutines/util'
|
||||
import { lists } from '@store/Modules/lists'
|
||||
import { EState, IBookedEvent, IBookedEventPage, IEvents, IMessage, IMessagePage, IOperators } from "model"
|
||||
import { Logo } from '../logo'
|
||||
import { Footer } from '../Footer'
|
||||
import { CTitle } from '../CTitle'
|
||||
import { CImgText } from '../CImgText'
|
||||
import { CMyEditor } from '../CMyEditor'
|
||||
import { CDateTime } from "@/components/CDateTime"
|
||||
import { CMyAvatar } from '../CMyAvatar'
|
||||
import { CMySingleEvent } from "@/components/CMySingleEvent"
|
||||
import { CMyTeacher } from "@/components/CMyTeacher"
|
||||
import { CMySelect } from '../CMySelect'
|
||||
import { tools } from "@store/Modules/tools"
|
||||
import { costanti } from "@costanti"
|
||||
|
||||
import MixinEvents from '../../mixins/mixin-events'
|
||||
import { useCalendarStore } from '@store/CalendarStore'
|
||||
import { toolsext } from "@store/Modules/toolsext"
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CEventsCalendar',
|
||||
props: {
|
||||
mysingleevent: {
|
||||
type: Object as PropType<IEvents>,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
showfirstN: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0,
|
||||
},
|
||||
mybool: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Logo,
|
||||
Footer,
|
||||
CTitle,
|
||||
CImgText,
|
||||
CMySelect,
|
||||
CMyEditor,
|
||||
CDateTime,
|
||||
CMyAvatar,
|
||||
CMySingleEvent,
|
||||
CMyTeacher
|
||||
},
|
||||
setup(props, { emit, root }) {
|
||||
const $q = useQuasar()
|
||||
const { t } = useI18n()
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
const calendarStore = useCalendarStore()
|
||||
|
||||
const calendarView = ref('month')
|
||||
const selectedDate = ref('')
|
||||
const tabeditor = ref('details')
|
||||
const showPrev = ref(false)
|
||||
const formDefault = ref(<IEvents> {
|
||||
title: '',
|
||||
details: '',
|
||||
bodytext: '',
|
||||
dateTimeStart: tools.getstrYYMMDDDateTime(tools.getDateNow()),
|
||||
dateTimeEnd: tools.getstrYYMMDDDateTime(tools.getDateNow()),
|
||||
icon: '',
|
||||
bgcolor: '#839ff2'
|
||||
})
|
||||
|
||||
const formbookEventDefault = ref(<IBookedEvent> {
|
||||
userId: '',
|
||||
msgbooking: '',
|
||||
infoevent: '',
|
||||
numpeople: 1,
|
||||
numpeopleLunch: 0,
|
||||
numpeopleDinner: 0,
|
||||
numpeopleDinnerShared: 0,
|
||||
datebooked: tools.getDateNow(),
|
||||
booked: false,
|
||||
modified: false
|
||||
})
|
||||
|
||||
const formAskForDefault = ref(<IMessage> {
|
||||
dest: {
|
||||
idapp: process.env.APP_ID,
|
||||
username: ''
|
||||
},
|
||||
origin: {
|
||||
idapp: process.env.APP_ID,
|
||||
username: ''
|
||||
},
|
||||
message: ''
|
||||
})
|
||||
|
||||
const dateFormatter = ref('')
|
||||
const titleFormatter: any = ref(null)
|
||||
|
||||
const keyValue = ref(0)
|
||||
const direction = ref('forward')
|
||||
const weekdays = reactive([1, 2, 3, 4, 5, 6, 0])
|
||||
const viewOptions = reactive([
|
||||
{ label: 'Day', value: 'day' },
|
||||
{ label: '5 Day', value: '5day' },
|
||||
{ label: 'Week', value: 'week' },
|
||||
{ label: 'Month', value: 'month' }
|
||||
])
|
||||
const addEvent = ref(false)
|
||||
const bookEventpage = ref(<IBookedEventPage> {
|
||||
show: false,
|
||||
bookedevent: {
|
||||
userId: '',
|
||||
numpeople: 0,
|
||||
infoevent: '',
|
||||
msgbooking: '',
|
||||
modified: false,
|
||||
booked: false
|
||||
},
|
||||
state: EState.None
|
||||
})
|
||||
|
||||
const askInfopage = ref(<IMessagePage> {
|
||||
show: false,
|
||||
msg: {
|
||||
message: ''
|
||||
},
|
||||
state: EState.None
|
||||
})
|
||||
|
||||
const contextDay = ref(null)
|
||||
const eventForm = ref(<IEvents> { ...formDefault })
|
||||
const bookEventForm = ref({ ...formbookEventDefault })
|
||||
const askInfoForm = ref(<IMessage> { ...formAskForDefault })
|
||||
const displayEvent = ref(false)
|
||||
const myevent = ref(null)
|
||||
// const events = []
|
||||
const gmt = ''
|
||||
const dragging = ref(false)
|
||||
const draggedEvent = ref(null)
|
||||
const ignoreNextSwipe = ref(false)
|
||||
|
||||
const locale = computed(() => calendarStore.locale)
|
||||
|
||||
const { findEventIndex, UpdateDbByFields, isAlreadyBooked } = MixinEvents()
|
||||
|
||||
function visuAllCal() {
|
||||
return props.mysingleevent === null
|
||||
}
|
||||
|
||||
function title_cal() {
|
||||
if (titleFormatter.value && locale) {
|
||||
const mydate = new Date(selectedDate.value)
|
||||
return titleFormatter.value.format(mydate)
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
function dayHeight() {
|
||||
if (Screen.height < 410)
|
||||
return 80
|
||||
else if (Screen.height < 500)
|
||||
return 100
|
||||
if (Screen.height < 700)
|
||||
return 110
|
||||
else if (Screen.height < 800)
|
||||
return 120
|
||||
else
|
||||
return 140
|
||||
}
|
||||
|
||||
function theme() {
|
||||
return calendarStore.theme
|
||||
}
|
||||
|
||||
function intervalStart() {
|
||||
return calendarStore.intervalRange.min * (1 / calendarStore.intervalRangeStep)
|
||||
}
|
||||
|
||||
function intervalCount() {
|
||||
return (calendarStore.intervalRange.max - calendarStore.intervalRange.min) * (1 / calendarStore.intervalRangeStep)
|
||||
}
|
||||
|
||||
function containerStyle() {
|
||||
const styles = { height: '' }
|
||||
if (calendarView.value !== 'month' || (calendarView.value === 'month' && calendarStore.dayHeight === 0)) {
|
||||
styles.height = `calc(100vh - ${calendarStore.titlebarHeight}px)`
|
||||
}
|
||||
return styles
|
||||
}
|
||||
|
||||
// convert the events into a map of lists keyed by date
|
||||
function eventsMap() {
|
||||
// console.log('eventsMap')
|
||||
const map = {}
|
||||
calendarStore.eventlist.forEach((myevent: IEvents) => (map[tools.getstrDateTime(myevent.dateTimeStart)] = map[tools.getstrDateTime(myevent.dateTimeStart)] || []).push(myevent))
|
||||
return map
|
||||
}
|
||||
|
||||
function addOrUpdateEvent() {
|
||||
if (contextDay.value && contextDay.value.bgcolor) {
|
||||
return t('dialog.update')
|
||||
}
|
||||
return t('dialog.add')
|
||||
}
|
||||
|
||||
function scrollerPopupStyle160() {
|
||||
if ($q.screen.lt.sm) {
|
||||
return {
|
||||
width: '100vw',
|
||||
height: '100vh'
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
maxHeight: '400px',
|
||||
height: '400px',
|
||||
width: '160px'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function hasModifiedBooking() {
|
||||
return (bookEventpage.value.bookedevent.numpeople !== bookEventForm.value.numpeople) ||
|
||||
(bookEventpage.value.bookedevent.numpeopleLunch !== bookEventForm.value.numpeopleLunch) ||
|
||||
(bookEventpage.value.bookedevent.numpeopleDinner !== bookEventForm.value.numpeopleDinner) ||
|
||||
(bookEventpage.value.bookedevent.numpeopleDinnerShared !== bookEventForm.value.numpeopleDinnerShared) ||
|
||||
(bookEventpage.value.bookedevent.msgbooking !== bookEventForm.value.msgbooking) ||
|
||||
(bookEventpage.value.bookedevent.booked !== bookEventForm.value.booked)
|
||||
}
|
||||
|
||||
function checkseinviaMsg() {
|
||||
return (bookEventpage.value.state === EState.Creating) && (!bookEventForm.value.booked)
|
||||
}
|
||||
|
||||
function getTitleBtnBooking() {
|
||||
if (bookEventpage.value.state === EState.Creating) {
|
||||
return t('dialog.book')
|
||||
} else {
|
||||
return t('dialog.update')
|
||||
}
|
||||
}
|
||||
|
||||
/*function $refs: {
|
||||
calendar: any
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
watch(locale, (val, oldval) => {
|
||||
updateFormatters()
|
||||
})
|
||||
|
||||
function mounted() {
|
||||
root.$on('calendar:next', calendarNext)
|
||||
root.$on('calendar:prev', calendarPrev)
|
||||
root.$on('calendar:today', calendarToday)
|
||||
|
||||
SetToday()
|
||||
// calendarStore.eventlist = events
|
||||
updateFormatters()
|
||||
|
||||
}
|
||||
|
||||
function beforeMount() {
|
||||
// console.log('mounted')
|
||||
selectedDate.value = formatDate(tools.getDateNow())
|
||||
// console.log('selectedDate', selectedDate)
|
||||
|
||||
calendarStore.locale = toolsext.getLocale()
|
||||
updateFormatters()
|
||||
}
|
||||
|
||||
function beforeDestroy() {
|
||||
root.$off('calendar:next', calendarNext)
|
||||
root.$off('calendar:prev', calendarPrev)
|
||||
root.$off('calendar:today', calendarToday)
|
||||
}
|
||||
|
||||
function showEvent(eventparam: IEvents) {
|
||||
// console.log('showEvent - INIZIO')
|
||||
myevent.value = eventparam
|
||||
displayEvent.value = true
|
||||
// console.log('showEvent - FINE ' + myevent)
|
||||
}
|
||||
|
||||
function selectEvent(eventparam: IEvents) {
|
||||
if (myevent.value === eventparam)
|
||||
myevent.value = null
|
||||
else
|
||||
myevent.value = eventparam
|
||||
|
||||
}
|
||||
|
||||
function onDateChanged(mydate: any) {
|
||||
calendarView.value = 'day'
|
||||
}
|
||||
|
||||
function resourceClicked(resource: any) {
|
||||
console.log('resource clicked:', resource)
|
||||
}
|
||||
|
||||
function resourceDayClicked(resource: any) {
|
||||
console.log('resource:day clicked:', resource)
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
eventForm.value = { ...formDefault }
|
||||
}
|
||||
|
||||
function addEventMenu(day: any) {
|
||||
console.log('addeventmenu', day)
|
||||
if (calendarView.value === 'scheduler' || calendarView.value === 'week-scheduler' || calendarView.value === 'month-scheduler' || !editable.value) {
|
||||
return
|
||||
}
|
||||
resetForm()
|
||||
contextDay.value = { ...day.scope }
|
||||
|
||||
eventForm.value.dateTimeStart.value = tools.getstrYYMMDDDateTime(day.scope.timestamp.date + ' 21:00:00')
|
||||
eventForm.value.dateTimeEnd.value = tools.getstrYYMMDDDateTime(day.scope.timestamp.date + ' 22:00:00')
|
||||
|
||||
console.log('eventForm', eventForm)
|
||||
|
||||
addEvent.value = true // show dialog
|
||||
}
|
||||
|
||||
function addBookEventMenu(eventparam: IEvents) {
|
||||
if (!userStore.isLogged || !userStore.my.verified_email) {
|
||||
// Visu right Toolbar to make SignIn
|
||||
globalStore.rightDrawerOpen = true
|
||||
tools.showNeutralNotif($q, t('login.needlogin'))
|
||||
tools.scrollToTop()
|
||||
// window.scrollTo(0, 0)
|
||||
|
||||
// $router.push('/signin')
|
||||
} else {
|
||||
console.log('addBookEventMenu')
|
||||
resetForm()
|
||||
myevent.value = eventparam
|
||||
bookEventForm.value.msgbooking = ''
|
||||
bookEventForm.value.numpeople = 1
|
||||
bookEventForm.value.numpeopleLunch = 0
|
||||
bookEventForm.value.numpeopleDinner = 0
|
||||
bookEventForm.value.numpeopleDinnerShared = 0
|
||||
bookEventForm.value.booked = true
|
||||
bookEventpage = EState.Creating
|
||||
|
||||
displayEvent = false
|
||||
bookEventpage.value.show = true // show dialog
|
||||
}
|
||||
}
|
||||
|
||||
function askForInfoEventMenu(eventparam) {
|
||||
if (!userStore.isLogged || !userStore.my.verified_email) {
|
||||
// Visu right Toolbar to make SignIn
|
||||
globalStore.rightDrawerOpen = true
|
||||
|
||||
tools.showNeutralNotif($q, t('login.needlogin'))
|
||||
tools.scrollToTop()
|
||||
|
||||
// $router.push('/signin')
|
||||
} else {
|
||||
console.log('askForInfoEventMenu')
|
||||
askInfoForm.value = { ...formAskForDefault }
|
||||
|
||||
myevent.value = eventparam
|
||||
|
||||
askInfoForm.value = {
|
||||
message: ''
|
||||
}
|
||||
|
||||
askInfopage.value = EState.Creating
|
||||
|
||||
displayEvent.value = false
|
||||
askInfopage.value.show = true // show dialog
|
||||
}
|
||||
}
|
||||
|
||||
function clEvent(event: IEvents) {
|
||||
return (isAlreadyBooked(event) ? 'text-left bg-light-green-1' : 'text-left')
|
||||
}
|
||||
|
||||
function checkFieldUndef() {
|
||||
if (eventForm.value.bodytext === undefined)
|
||||
eventForm.value.bodytext = ''
|
||||
if (eventForm.value.details === undefined)
|
||||
eventForm.value.details = ''
|
||||
}
|
||||
|
||||
function editEvent(eventparam: IEvents) {
|
||||
console.log('editEvent - INIZIO')
|
||||
resetForm()
|
||||
|
||||
contextDay.value = { ...eventparam }
|
||||
|
||||
eventForm.value = { ...eventparam }
|
||||
|
||||
checkFieldUndef()
|
||||
|
||||
eventForm.value.dateTimeStart = tools.getstrYYMMDDDateTime(eventparam.dateTimeStart)
|
||||
eventForm.value.dateTimeEnd = tools.getstrYYMMDDDateTime(eventparam.dateTimeEnd)
|
||||
|
||||
addEvent.value = true // show dialog
|
||||
}
|
||||
|
||||
function deleteEvent(eventparam: IEvents) {
|
||||
tools.CancelEvent($q, eventparam)
|
||||
}
|
||||
|
||||
function duplicateEvent(eventparam, numgg, numev = 1) {
|
||||
for (let i = 0; i < numev; ++i) {
|
||||
globalStore.DuplicateRec({ table: tools.TABEVENTS, id: eventparam._id }).then((rec) => {
|
||||
if (rec) {
|
||||
rec.dateTimeStart = tools.addDays(new Date(rec.dateTimeStart), numgg * (i + 1))
|
||||
rec.dateTimeEnd = tools.addDays(new Date(rec.dateTimeEnd), numgg * (i + 1))
|
||||
calendarStore.eventlist.push(rec)
|
||||
editEvent(rec)
|
||||
}
|
||||
})
|
||||
}
|
||||
// tools.ActionRecTable(this, lists.MenuAction.DUPLICATE_RECTABLE, tools.TABEVENTS, eventparam._id, eventparam, 'db.duplicatedrecord')
|
||||
}
|
||||
|
||||
|
||||
function formatDate(mydate: any) {
|
||||
let d = void 0
|
||||
|
||||
if (mydate !== void 0) {
|
||||
d = new Date(mydate)
|
||||
} else {
|
||||
d = new Date()
|
||||
}
|
||||
const month = '' + (d.getMonth() + 1)
|
||||
const day = '' + d.getDate()
|
||||
const year = d.getFullYear()
|
||||
|
||||
return [year, tools.padTime(month), tools.padTime(day)].join('-')
|
||||
}
|
||||
|
||||
function formatTime(mydate) {
|
||||
const d = mydate !== void 0 ? new Date(mydate) : new Date(),
|
||||
hours = '' + d.getHours(),
|
||||
minutes = '' + d.getMinutes()
|
||||
|
||||
return [tools.padTime(hours), tools.padTime(minutes)].join(':')
|
||||
}
|
||||
|
||||
function getDuration(dateTimeStart, dateTimeEnd, unit) {
|
||||
const start = new Date(dateTimeStart)
|
||||
const end = new Date(dateTimeEnd)
|
||||
const diff = date.getDateDiff(end, start, unit)
|
||||
return diff
|
||||
}
|
||||
|
||||
function saveEvent() {
|
||||
const self = this
|
||||
|
||||
// ++Todo VALIDATE $refs.myevent
|
||||
|
||||
if (true) {
|
||||
// close the dialog
|
||||
self.addEvent = false
|
||||
const form = { ...self.eventForm }
|
||||
let update = false
|
||||
if (self.contextDay._id) {
|
||||
// an update
|
||||
update = true
|
||||
} else {
|
||||
// an add
|
||||
}
|
||||
const data = { ...form }
|
||||
|
||||
// ++Save into the Database
|
||||
const mydatatosave = {
|
||||
id: data._id,
|
||||
table: tools.TABEVENTS,
|
||||
fieldsvalue: data
|
||||
}
|
||||
|
||||
if (update === true) {
|
||||
UpdateDbByFields($q, data, true, contextDay.value)
|
||||
} else {
|
||||
const mydataadd = {
|
||||
table: tools.TABEVENTS,
|
||||
data
|
||||
}
|
||||
|
||||
globalStore.saveTable(mydataadd).then((record) => {
|
||||
if (record) {
|
||||
tools.showPositiveNotif($q, t('db.recupdated'))
|
||||
|
||||
if (update === true) {
|
||||
const index = self.findEventIndex(self.contextDay)
|
||||
if (index >= 0) {
|
||||
// @ts-ignore
|
||||
calendarStore.eventlist.splice(index, 1, { ...data })
|
||||
}
|
||||
} else {
|
||||
data._id = record._id
|
||||
// add to events array
|
||||
// @ts-ignore
|
||||
calendarStore.eventlist.push(data)
|
||||
}
|
||||
|
||||
} else {
|
||||
tools.showNegativeNotif($q, t('db.recfailed'))
|
||||
// Undo...
|
||||
const index = self.findEventIndex(self.contextDay)
|
||||
if (index >= 0) {
|
||||
// @ts-ignore
|
||||
calendarStore.eventlist.splice(index, 1, { ...self.contextDay })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
self.contextDay = null
|
||||
}
|
||||
}
|
||||
|
||||
function EditBookEvent(myevent: IEvents) {
|
||||
myevent = myevent
|
||||
const bookedevent = calendarStore.getters.findEventBooked(myevent, false)
|
||||
|
||||
console.log('bookedevent', bookedevent)
|
||||
|
||||
if (bookedevent) {
|
||||
bookEventForm.value._id = bookedevent._id
|
||||
bookEventForm.value.numpeople = bookedevent.numpeople
|
||||
bookEventForm.value.numpeopleLunch = bookedevent.numpeopleLunch
|
||||
bookEventForm.value.numpeopleDinner = bookedevent.numpeopleDinner
|
||||
bookEventForm.value.numpeopleDinnerShared = bookedevent.numpeopleDinnerShared
|
||||
bookEventForm.value.infoevent = bookedevent.infoevent
|
||||
bookEventForm.value.msgbooking = bookedevent.msgbooking
|
||||
bookEventForm.value.booked = bookedevent.booked
|
||||
bookEventForm.value.datebooked = bookedevent.datebooked
|
||||
}
|
||||
|
||||
bookEventpage = EState.Modifying
|
||||
bookEventpage.value.bookedevent = bookedevent
|
||||
bookEventpage.value.show = true
|
||||
}
|
||||
|
||||
function sendMsg(myevent: IEvents) {
|
||||
const self = this
|
||||
askInfopage.show = false
|
||||
|
||||
const data: IMessage = {
|
||||
source: {
|
||||
event_id: myevent._id,
|
||||
infoevent: tools.gettextevent(this, myevent)
|
||||
},
|
||||
dest: {
|
||||
idapp: process.env.APP_ID,
|
||||
username: myevent.teacher
|
||||
},
|
||||
message: askInfoForm.message
|
||||
}
|
||||
|
||||
MessageStore.SendMsgEvent(data).then((ris) => {
|
||||
self.contextDay = null
|
||||
if (ris)
|
||||
tools.showPositiveNotif(self.$q, self.t('cal.sendmsg_sent'))
|
||||
else
|
||||
tools.showNegativeNotif(self.$q, self.t('cal.sendmsg_error'))
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function saveBookEvent(myevent: IEvents) {
|
||||
// ++Todo VALIDATE $refs.myevent
|
||||
|
||||
if (true) {
|
||||
// close the dialog
|
||||
bookEventpage.value.show = false
|
||||
|
||||
// bookEventForm.value.booked = bookEventForm.value.bookedcheck
|
||||
|
||||
const data: IBookedEvent = {
|
||||
userId: userStore.my._id,
|
||||
id_bookedevent: myevent._id,
|
||||
numpeople: bookEventForm.value.numpeople,
|
||||
numpeopleLunch: bookEventForm.value.numpeopleLunch,
|
||||
numpeopleDinner: bookEventForm.value.numpeopleDinner,
|
||||
numpeopleDinnerShared: bookEventForm.value.numpeopleDinnerShared,
|
||||
infoevent: tools.gettextevent(myevent),
|
||||
msgbooking: bookEventForm.value.msgbooking,
|
||||
booked: bookEventForm.value.booked,
|
||||
datebooked: tools.getDateNow(),
|
||||
modified: (bookEventpage.value !== EState.Creating)
|
||||
}
|
||||
|
||||
BookEvent(data).then((ris) => {
|
||||
console.log('ris uscita di BookEvent', ris)
|
||||
if (ris)
|
||||
tools.showPositiveNotif($q, t('cal.booked') + ' ' + t('cal.event') + ' "' + myevent.title + '"')
|
||||
else
|
||||
tools.showNegativeNotif($q, t('cal.booked_error'))
|
||||
})
|
||||
|
||||
contextDay.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function adjustTimestamp(day: any) {
|
||||
day.minute = day.minute < 15 || day.minute >= 45 ? 0 : 30
|
||||
return day
|
||||
}
|
||||
|
||||
// function getTimestamp(day) {
|
||||
// return day.date + ' ' + tools.padTime(day.hour) + ':' + tools.padTime(day.minute) + ':00.000'
|
||||
// }
|
||||
|
||||
function updateFormatters() {
|
||||
try {
|
||||
// console.log('tools.getLocale() =', tools.getLocale())
|
||||
// console.log('Calendar', calendarStore.locale)
|
||||
dateFormatter.value = new Intl.DateTimeFormat(tools.getLocale() || void 0, {
|
||||
weekday: calendarStore.shortWeekdayLabel ? 'short' : 'long',
|
||||
month: calendarStore.shortMonthLabel ? 'short' : 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
timeZone: 'UTC'
|
||||
})
|
||||
titleFormatter.value = new Intl.DateTimeFormat(locale.value || void 0, {
|
||||
month: calendarStore.shortMonthLabel ? 'short' : 'long',
|
||||
year: 'numeric',
|
||||
timeZone: 'UTC'
|
||||
})
|
||||
|
||||
} catch (e) {
|
||||
console.error('Intl.DateTimeFormat not supported')
|
||||
dateFormatter.value = void 0
|
||||
}
|
||||
}
|
||||
|
||||
function handleSwipe({ evt, ...info }) {
|
||||
if (dragging.value === false) {
|
||||
if (info.dur >= 30 && ignoreNextSwipe.value === false) {
|
||||
if (info.direction === 'right') {
|
||||
calendarPrev()
|
||||
} else if (info.direction === 'left') {
|
||||
calendarNext()
|
||||
}
|
||||
} else {
|
||||
ignoreNextSwipe.value = false
|
||||
}
|
||||
}
|
||||
stopAndPrevent(evt)
|
||||
}
|
||||
|
||||
function onDragEnter(ev: any, eventparam) {
|
||||
prevent(ev)
|
||||
}
|
||||
|
||||
function onDragStart(ev, eventparam) {
|
||||
dragging.value = true
|
||||
draggedEvent.value = eventparam
|
||||
stop(ev)
|
||||
}
|
||||
|
||||
function onDragEnd(ev, eventparam) {
|
||||
stopAndPrevent(ev)
|
||||
resetDrag()
|
||||
}
|
||||
|
||||
function onDragOver(ev, day, type) {
|
||||
if (type === 'day') {
|
||||
stopAndPrevent(ev)
|
||||
return draggedEvent.value.dateTimeStart !== day.dateTimeStart
|
||||
} else if (type === 'interval') {
|
||||
stopAndPrevent(ev)
|
||||
// return draggedEvent.value.date !== day.date && draggedEvent.value.time !== day.time
|
||||
return draggedEvent.value.dateTimeStart !== day.dateTimeStart
|
||||
}
|
||||
}
|
||||
|
||||
function onDrop(ev, day, type) {
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
console.log('day.dateTimeStart', day.dateTimeStart, day.date, 'day.time', day.time)
|
||||
if (type === 'day') {
|
||||
draggedEvent.value.dateTimeStart = day.date + ' ' + tools.getstrTime(draggedEvent.value.dateTimeStart)
|
||||
draggedEvent.value.dateTimeEnd = day.date + ' ' + tools.getstrTime(draggedEvent.value.dateTimeEnd)
|
||||
draggedEvent.value.side = void 0
|
||||
} else if (type === 'interval') {
|
||||
const mins = date.getDateDiff(draggedEvent.value.dateTimeEnd, draggedEvent.value.dateTimeStart, 'minutes')
|
||||
draggedEvent.value.dateTimeStart = day.date + ' ' + day.time
|
||||
const mystart = new Date(draggedEvent.value.dateTimeStart)
|
||||
draggedEvent.value.dateTimeEnd = tools.addMinutes(mystart, mins)
|
||||
// draggedEvent.value.dateTimeEnd = day.dateTimeEnd
|
||||
// draggedEvent.value.time = day.time
|
||||
draggedEvent.value.side = void 0
|
||||
}
|
||||
// console.log('Start', draggedEvent.value.dateTimeStart, 'End', draggedEvent.value.dateTimeEnd)
|
||||
|
||||
// Save Date
|
||||
UpdateDbByFields($q, {
|
||||
_id: draggedEvent.value._id,
|
||||
dateTimeStart: draggedEvent.value.dateTimeStart,
|
||||
dateTimeEnd: draggedEvent.value.dateTimeEnd
|
||||
}, true, contextDay.value)
|
||||
|
||||
}
|
||||
|
||||
function resetDrag() {
|
||||
draggedEvent.value = void 0
|
||||
dragging.value = false
|
||||
if (Platform.is.desktop) {
|
||||
ignoreNextSwipe = true
|
||||
}
|
||||
}
|
||||
|
||||
async function BookEvent(eventparam: IBookedEvent)
|
||||
{
|
||||
return await calendarStore.BookEvent(eventparam)
|
||||
}
|
||||
|
||||
function createContribType(value) {
|
||||
console.log('createContribType', value)
|
||||
tools.createNewRecord(this, 'contribtype', { label: value }).then((myrec) => {
|
||||
// console.log('myrec')
|
||||
calendarStore.contribtype.push(myrec)
|
||||
})
|
||||
}
|
||||
|
||||
function getEventDate(eventparam) {
|
||||
const parts = eventparam.dateTimeStart.split('-')
|
||||
const mydate = new Date(parts[0], parts[1] - 1, parts[2])
|
||||
return dateFormatter.format(mydate)
|
||||
}
|
||||
|
||||
function badgeClasses(eventparam, type) {
|
||||
const cssColor = tools.isCssColor(eventparam.bgcolor)
|
||||
const isHeader = type === 'header'
|
||||
return {
|
||||
[`text-white bg-${eventparam.bgcolor}`]: !cssColor,
|
||||
'full-width': !isHeader && (!eventparam.side || eventparam.side === 'full'),
|
||||
'left-side': !isHeader && eventparam.side === 'left',
|
||||
'right-side': !isHeader && eventparam.side === 'right'
|
||||
}
|
||||
}
|
||||
|
||||
function badgeStyles(eventparam, type, timeStartPos, timeDurationHeight) {
|
||||
const s = { color: '', top: '', height: '', opacity: 1 }
|
||||
|
||||
if (tools.isCssColor(eventparam.bgcolor)) {
|
||||
s['background-color'] = eventparam.bgcolor
|
||||
s.color = colors.luminosity(eventparam.bgcolor) > 0.5 ? 'black' : 'white'
|
||||
}
|
||||
if (timeStartPos) {
|
||||
s.top = timeStartPos(tools.getstrTime(eventparam.dateTimeStart)) + 'px'
|
||||
}
|
||||
if (timeDurationHeight) {
|
||||
s.height = timeDurationHeight(func_tools.getMinutesDuration(eventparam.dateTimeStart, eventparam.dateTimeEnd)) + 'px'
|
||||
}
|
||||
|
||||
if (!isEventEnabled(eventparam)) {
|
||||
s.opacity = 0.5
|
||||
}
|
||||
|
||||
s['align-items'] = 'flex-start'
|
||||
return s
|
||||
}
|
||||
|
||||
function calendarNext() {
|
||||
$refs.calendar.next()
|
||||
}
|
||||
|
||||
function calendarPrev() {
|
||||
$refs.calendar.prev()
|
||||
}
|
||||
|
||||
function calendarToday(today) {
|
||||
selectedDate = today
|
||||
}
|
||||
|
||||
function SetToday() {
|
||||
root.$emit('calendar:today', formatDate(tools.getDateNow()))
|
||||
}
|
||||
|
||||
function onChanged(data) {
|
||||
// uncomment to see data in console
|
||||
// let { start, end } = data
|
||||
// console.log('onChanged:', start, end)
|
||||
}
|
||||
|
||||
function onMoved(moved) {
|
||||
// uncomment to see data in console
|
||||
// console.log('onMoved:', moved)
|
||||
}
|
||||
|
||||
function getEventList() {
|
||||
const mylist = calendarStore.eventlist.filter((rec) => (new Date(rec.dateTimeEnd) >= tools.getDateNowEvent()))
|
||||
if (props.showfirstN > 0)
|
||||
return mylist.slice(0, props.showfirstN)
|
||||
else
|
||||
return mylist
|
||||
}
|
||||
|
||||
function getEvents(dt: any) {
|
||||
const eventsloc = []
|
||||
// console.log('dt', dt)
|
||||
|
||||
for (let i = 0; i < calendarStore.eventlist.length; ++i) {
|
||||
let added = false
|
||||
if (tools.getstrYYMMDDDate(calendarStore.eventlist[i].dateTimeStart) === dt) {
|
||||
if (eventsloc.length > 0) {
|
||||
// check for overlapping times
|
||||
const startTime = calendarStore.eventlist[i].dateTimeStart
|
||||
const endTime = calendarStore.eventlist[i].dateTimeEnd
|
||||
for (const item of eventsloc) {
|
||||
const startTime2 = item.dateTimeStart
|
||||
const endTime2 = item.dateTimeEnd
|
||||
if (date.isBetweenDates(startTime, startTime2, endTime2) || date.isBetweenDates(endTime, startTime2, endTime2)) {
|
||||
item.side = 'left'
|
||||
eventsloc.push(calendarStore.eventlist[i])
|
||||
added = true
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
// }
|
||||
if (!added) {
|
||||
// calendarStore.eventlist[i].side = void 0
|
||||
eventsloc.push(calendarStore.eventlist[i])
|
||||
}
|
||||
} else if (tools.hasManyDays(calendarStore.eventlist[i].dateTimeStart, calendarStore.eventlist[i].dateTimeEnd)) {
|
||||
// check for overlapping dates
|
||||
if (date.isBetweenDates(dt, calendarStore.eventlist[i].dateTimeStart, calendarStore.eventlist[i].dateTimeEnd)) {
|
||||
eventsloc.push(calendarStore.eventlist[i])
|
||||
added = true
|
||||
}
|
||||
}
|
||||
}
|
||||
// if (eventsloc.length > 0)
|
||||
// console.log('eventsloc', eventsloc)
|
||||
return eventsloc
|
||||
}
|
||||
|
||||
function isEventEnabled(myevent: IEvents) {
|
||||
// check if event is in the past
|
||||
const datenow = tools.addDays(tools.getDateNow(), -1)
|
||||
|
||||
// console.log('datenow', datenow, 'end', myevent.dateTimeEnd)
|
||||
|
||||
return (new Date(myevent.dateTimeEnd) >= datenow)
|
||||
}
|
||||
|
||||
function getTitleEv(event: IEvents) {
|
||||
return (!!event.short_tit) ? event.short_tit : event.title
|
||||
}
|
||||
|
||||
function getLongTitleEv(event: IEvents) {
|
||||
return event.title
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
calendarView,
|
||||
selectedDate,
|
||||
tabeditor,
|
||||
showPrev,
|
||||
|
||||
|
||||
keyValue,
|
||||
weekdays,
|
||||
addEvent,
|
||||
bookEventpage,
|
||||
askInfopage,
|
||||
contextDay,
|
||||
eventForm,
|
||||
bookEventForm,
|
||||
askInfoForm,
|
||||
displayEvent,
|
||||
myevent,
|
||||
dragging,
|
||||
UpdateDbByFields,
|
||||
visuAllCal,
|
||||
title_cal,
|
||||
calendarStore,
|
||||
}
|
||||
}
|
||||
})
|
||||
937
src/components/CEventsCalendar/CEventsCalendar.vue.off
Executable file
937
src/components/CEventsCalendar/CEventsCalendar.vue.off
Executable file
@@ -0,0 +1,937 @@
|
||||
<template>
|
||||
<div class="landing">
|
||||
<!-- <div v-if="!tools.IsLogged() && (!mysingleevent)">
|
||||
<div class="centermydiv">
|
||||
<q-banner class="bg-secondary text-white">
|
||||
Il Calendario sarà visibile solo dopo aver effettuato l'accesso
|
||||
</q-banner>
|
||||
|
||||
</div>
|
||||
</div>-->
|
||||
<div>
|
||||
<!-- display an myevent -->
|
||||
<q-dialog v-model="displayEvent">
|
||||
<q-card v-if="myevent" :style="`min-width: ` + tools.myheight_dialog() + `px;`">
|
||||
<q-toolbar class="bg-primary text-white">
|
||||
<!--<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>
|
||||
<q-btn v-if="editable" flat round color="white" icon="fas fa-copy">
|
||||
<q-menu
|
||||
transition-show="flip-right"
|
||||
transition-hide="flip-left">
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item clickable @click="duplicateEvent(myevent, 7)">
|
||||
<q-item-section>Tra 1 Settimana</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="duplicateEvent(myevent, 14)">
|
||||
<q-item-section>Tra 2 Settimane</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="duplicateEvent(myevent, 7, 4)">
|
||||
<q-item-section>4 Eventi ogni Settimana</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="editable" flat round color="white" icon="delete" v-close-popup
|
||||
@click="deleteEvent(myevent)"></q-btn>
|
||||
<q-btn
|
||||
v-if="editable" flat round color="white" icon="edit" v-close-popup
|
||||
@click="editEvent(myevent)"></q-btn>
|
||||
<q-btn
|
||||
flat round color="white" icon="cancel" v-close-popup
|
||||
@click="myevent = null; displayEvent = false"></q-btn>
|
||||
</q-toolbar>
|
||||
<q-card-section class="inset-shadow">
|
||||
<q-img
|
||||
:src="getImgEvent(myevent)"
|
||||
class="absolute-top"
|
||||
style="height: 150px;"
|
||||
:alt="myevent.title">
|
||||
</q-img>
|
||||
<div style="margin-top: 150px;">
|
||||
<!--<div v-if="myevent.allday" class="text-caption">{{ getEventDate(myevent) }}</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>-->
|
||||
<CMyTeacher :username="myevent.teacher"></CMyTeacher>
|
||||
<CMyTeacher :username="myevent.teacher2"></CMyTeacher>
|
||||
<CMyTeacher :username="myevent.teacher3"></CMyTeacher>
|
||||
<CMyTeacher :username="myevent.teacher4"></CMyTeacher>
|
||||
</div>
|
||||
<div v-if="myevent.wherecode" class="cal__where">
|
||||
<!--<span v-if="tools.isMobile()"><br/></span>-->
|
||||
<span class="cal__where-title">{{ $t('cal.where') }}: </span>
|
||||
<span class="cal__where-content">
|
||||
<q-chip>
|
||||
<q-avatar v-if="getWhereIcon(myevent.wherecode)">
|
||||
<img
|
||||
:src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)"
|
||||
alt="Località">
|
||||
</q-avatar>
|
||||
<q-avatar v-else 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 v-html="tools.getstrDateTimeEvent(mythis, myevent, true)"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p v-if="myevent.linkpdf" style="margin-top: 10px; text-align: center">
|
||||
<q-btn
|
||||
size="md" type="a" :href="`../../statics/` + myevent.linkpdf"
|
||||
target="_blank" rounded color="primary" icon="info" :label="$t('cal.showpdf')">
|
||||
</q-btn>
|
||||
</p>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
rounded v-if="!myevent.nobookable && static_data.functionality.BOOKING_EVENTS"
|
||||
color="primary" @click="addBookEventMenu(myevent)" :disable="!isEventEnabled(myevent)"
|
||||
:label="$t('cal.booking')">
|
||||
</q-btn>
|
||||
<q-btn v-else :label="$t('dialog.ok')" color="primary" v-close-popup></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<!-- id_bookedeventadd/edit an myevent -->
|
||||
|
||||
<q-dialog v-model="addEvent" no-backdrop-dismiss persistent>
|
||||
<q-card v-if="addEvent" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
|
||||
<q-toolbar class="bg-primary text-white">
|
||||
<q-toolbar-title>
|
||||
{{ addOrUpdateEvent }} {{ $t('cal.event') }}
|
||||
</q-toolbar-title>
|
||||
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
||||
</q-toolbar>
|
||||
<q-card-section class="inset-shadow">
|
||||
<q-form
|
||||
v-if="contextDay"
|
||||
ref='myevent'
|
||||
class="q-gutter-sm">
|
||||
|
||||
<CMySelect
|
||||
:label="$t('event.typol')" v-model:value="eventForm.typol" optval="typol_code"
|
||||
optlab="label"
|
||||
:options="calendarStore.disciplines" :useinput="false">
|
||||
</CMySelect>
|
||||
|
||||
<div>
|
||||
<q-input
|
||||
color="grey-1" v-model="eventForm.short_tit" autofocus
|
||||
debounce="1000"
|
||||
:input-style="`background-color: ${eventForm.bgcolor} !important; color: white !important; font-weight: bold; `"
|
||||
borderless rounded dense :label="$t('event.short_tit')"
|
||||
></q-input>
|
||||
|
||||
<q-input
|
||||
color="grey-1" v-model="eventForm.title" autofocus
|
||||
debounce="1000"
|
||||
: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 || $t('event.notempty')]"></q-input>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<q-tabs
|
||||
v-model="tabeditor"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-color="primary"
|
||||
indicator-color="primary"
|
||||
align="justify"
|
||||
narrow-indicator
|
||||
>
|
||||
<q-tab name="details" label="Descrizione Breve" icon="fas fa-pencil-alt"/>
|
||||
<q-tab name="container" label="Dettaglio Pagina" icon="fas fa-book"/>
|
||||
<q-tab name="settings" label="Impostazioni" icon="fas fa-calendar-day"/>
|
||||
</q-tabs>
|
||||
|
||||
|
||||
<q-tab-panels v-model="tabeditor" animated>
|
||||
<q-tab-panel name="details">
|
||||
<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>
|
||||
|
||||
<CMyEditor v-model:value="eventForm.details" :showButtons="false">
|
||||
|
||||
</CMyEditor>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="container">
|
||||
<CMyEditor v-model:value="eventForm.bodytext" :showButtons="false">
|
||||
|
||||
</CMyEditor>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="settings" class="q-gutter-sm">
|
||||
<!--<q-checkbox v-model="eventForm.allday" :label="$t('cal.alldayevent')"></q-checkbox>-->
|
||||
|
||||
|
||||
<div class="q-gutter-sm row myflex">
|
||||
<CDateTime
|
||||
v-model:value="eventForm.dateTimeStart"
|
||||
:label="$t('cal.eventstartdatetime')"
|
||||
:readonly="false">
|
||||
</CDateTime>
|
||||
<CDateTime
|
||||
v-model:value="eventForm.dateTimeEnd"
|
||||
:label="$t('cal.enterEndDateTime')"
|
||||
:readonly="false">
|
||||
</CDateTime>
|
||||
<q-input dense v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
|
||||
</div>
|
||||
|
||||
<div class="q-gutter-sm myflex">
|
||||
|
||||
<CMySelect
|
||||
myclass="myflex" :label="$t('cal.teacher') + ' 1°'"
|
||||
v-model:value="eventForm.teacher"
|
||||
optval="username" :optlab="(item) => item.name + ' ' + item.surname"
|
||||
:options="calendarStore.operators" :useinput="false">
|
||||
</CMySelect>
|
||||
<CMySelect
|
||||
myclass="myflex" :label="$t('cal.teacher') + ' 2°'"
|
||||
v-model:value="eventForm.teacher2"
|
||||
optval="username" :optlab="(item) => item.name + ' ' + item.surname"
|
||||
:options="calendarStore.operators" :useinput="false">
|
||||
</CMySelect>
|
||||
<CMySelect
|
||||
myclass="myflex" :label="$t('cal.teacher') + ' 3°'"
|
||||
v-model:value="eventForm.teacher3"
|
||||
optval="username" :optlab="(item) => item.name + ' ' + item.surname"
|
||||
:options="calendarStore.operators" :useinput="false">
|
||||
</CMySelect>
|
||||
<CMySelect
|
||||
myclass="myflex" :label="$t('cal.teacher') + ' 4°'"
|
||||
v-model:value="eventForm.teacher4"
|
||||
optval="username" :optlab="(item) => item.name + ' ' + item.surname"
|
||||
:options="calendarStore.operators" :useinput="false">
|
||||
</CMySelect>
|
||||
<CMySelect
|
||||
:label="$t('cal.where')" v-model:value="eventForm.wherecode" optval="code"
|
||||
optlab="placename"
|
||||
:options="calendarStore.wheres" :useinput="false">
|
||||
</CMySelect>
|
||||
</div>
|
||||
|
||||
<div class="q-gutter-sm myflex wrap">
|
||||
<q-checkbox
|
||||
class="myflex wrap" dense v-model="eventForm.internal"
|
||||
:label="$t('event.internal')"></q-checkbox>
|
||||
<q-checkbox
|
||||
class="myflex wrap" dense v-model="eventForm.lunchAvailable"
|
||||
:label="$t('event.lunchAvailable')"></q-checkbox>
|
||||
<q-checkbox
|
||||
class="myflex wrap" dense v-model="eventForm.dinnerAvailable"
|
||||
:label="$t('event.dinnerAvailable')"></q-checkbox>
|
||||
<q-checkbox
|
||||
class="myflex wrap" dense v-model="eventForm.dinnerSharedAvailable"
|
||||
:label="$t('event.dinnerSharedAvailable')"></q-checkbox>
|
||||
<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">
|
||||
|
||||
<CMySelect
|
||||
:label="$t('event.contribtype')" v-model:value="eventForm.contribtype"
|
||||
optval="_id" optlab="label"
|
||||
:useinput="false"
|
||||
:newvaluefunc="createContribType" :options="calendarStore.contribtype">
|
||||
</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">
|
||||
|
||||
<CMySelect
|
||||
myclass="myflex" :label="$t('event.pagefooter') + ' 1°'"
|
||||
v-model:value="eventForm.pagefooter"
|
||||
style="min-width: 300px;"
|
||||
:multiple="true"
|
||||
optval="path" optlab="title"
|
||||
:options="calendarStore.internalpages" :useinput="false">
|
||||
</CMySelect>
|
||||
<br>
|
||||
<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>
|
||||
<q-input
|
||||
class="myflex" dense v-model="eventForm.facebook"
|
||||
:label="$t('event.facebook')"></q-input>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat :label="$t('dialog.ok')" color="primary" @click="saveEvent"></q-btn>
|
||||
<q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="bookEventpage.show" no-backdrop-dismiss>
|
||||
<q-card v-if="bookEventpage.show" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
|
||||
<q-toolbar class="bg-primary text-white">
|
||||
<q-toolbar-title>
|
||||
{{ $t('cal.booking') }}
|
||||
</q-toolbar-title>
|
||||
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
||||
</q-toolbar>
|
||||
|
||||
<q-card-section class="inset-shadow">
|
||||
<q-img
|
||||
:src="getImgEvent(myevent)"
|
||||
class="absolute-top"
|
||||
style="height: 200px;"
|
||||
:alt="myevent.title">
|
||||
</q-img>
|
||||
<div style="margin-top: 150px;">
|
||||
|
||||
<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 v-html="tools.getstrDateTimeEvent(mythis, myevent, true)"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="q-pa-xs">
|
||||
<q-card class="text-white windowcol" style="display: block; ">
|
||||
<q-card-section class="q-pa-xs">
|
||||
|
||||
<div style="display: inline-flex; " class="q-px-xs centermydiv">
|
||||
<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-xs q-mx-xs"
|
||||
style="min-width: 140px;">
|
||||
<q-select
|
||||
rounded outlined v-model="bookEventForm.numpeople"
|
||||
:options="tools.SelectListNumPeople"
|
||||
:label="$t('cal.selnumpeople')" emit-value map-options>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="myevent.lunchAvailable" class="q-px-xs centermydiv" style="display: inline-flex; ">
|
||||
<div style="display: inline-flex; " class="q-px-xs centermydiv">
|
||||
<div class="itemprenota">{{ $t('cal.selnumpeopleLunch') }}</div>
|
||||
<div
|
||||
class="q-gutter-xs"
|
||||
style="min-width: 140px; margin-left: 10px;">
|
||||
<q-select
|
||||
rounded outlined v-model="bookEventForm.numpeopleLunch"
|
||||
:options="tools.SelectListNumPeople"
|
||||
:label="$t('cal.Lunch')" emit-value map-options>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div v-if="myevent.dinnerAvailable" class="q-px-xs centermydiv" style="display: inline-flex; ">
|
||||
<div style="display: inline-flex; " class="q-px-xs centermydiv">
|
||||
<div class="itemprenota">{{ $t('cal.selnumpeopleDinner') }}</div>
|
||||
<div class="q-gutter-xs " style="min-width: 180px; margin-left: 10px;">
|
||||
<q-select
|
||||
rounded outlined v-model="bookEventForm.numpeopleDinner"
|
||||
:options="tools.SelectListNumPeople"
|
||||
:label="$t('cal.Dinner')" emit-value map-options>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="myevent.dinnerSharedAvailable" class="q-px-xs centermydiv"
|
||||
style="display: inline-flex; ">
|
||||
<div style="display: inline-flex; " class="q-px-xs centermydiv">
|
||||
<div class="itemprenota">{{ $t('cal.selnumpeopleDinnerShared') }}</div>
|
||||
<div class="q-gutter-xs " style="min-width: 180px; margin-left: 10px;">
|
||||
<q-select
|
||||
rounded outlined v-model="bookEventForm.numpeopleDinnerShared"
|
||||
:options="tools.SelectListNumPeople"
|
||||
:label="$t('cal.DinnerShared')" emit-value map-options>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
v-model="bookEventForm.msgbooking" :label="$t('cal.writemsg')+':'"
|
||||
type="textarea" debounce="500"
|
||||
input-class="myinput-area"
|
||||
>
|
||||
</q-input>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<p v-if="myevent.linkpdf" style="margin-top: 10px; text-align: center">
|
||||
<q-btn
|
||||
size="md" type="a" :href="`../../statics/` + myevent.linkpdf"
|
||||
target="_blank" rounded color="primary" icon="info" :label="$t('cal.showpdf')">
|
||||
</q-btn>
|
||||
</p>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
v-if="bookEventpage.state === EState.Modifying" flat :label="$t('cal.cancelbooking')"
|
||||
color="negative"
|
||||
@click="tools.CancelBookingEvent($q, myevent, bookEventForm._id, true)"></q-btn>
|
||||
<q-btn
|
||||
v-if="checkseinviaMsg" flat :label="$t('dialog.sendonlymsg')" color="primary"
|
||||
@click="sendMsg(myevent)"></q-btn>
|
||||
<q-btn
|
||||
v-else :label="getTitleBtnBooking" color="primary" @click="saveBookEvent(myevent)"
|
||||
:disable="!(bookEventpage.state === EState.Creating || hasModifiedBooking)"></q-btn>
|
||||
|
||||
|
||||
<q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="askInfopage.show" no-backdrop-dismiss>
|
||||
<q-card v-if="askInfopage.show" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
|
||||
<q-toolbar class="bg-primary text-white">
|
||||
<q-toolbar-title>
|
||||
{{ $t('cal.booking') }}
|
||||
</q-toolbar-title>
|
||||
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
||||
</q-toolbar>
|
||||
|
||||
<q-card-section class="inset-shadow">
|
||||
<q-img
|
||||
:src="getImgEvent(myevent)"
|
||||
class="absolute-top"
|
||||
style="height: 150px;"
|
||||
:alt="myevent.title">
|
||||
</q-img>
|
||||
<div style="margin-top: 150px;">
|
||||
|
||||
<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 v-html="tools.getstrDateTimeEvent(mythis, myevent, true)"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="q-pa-xs">
|
||||
<q-card class="text-white windowcol">
|
||||
<q-card-section>
|
||||
<q-input
|
||||
v-model="askInfoForm.message" :label="$t('cal.writemsg')+':'"
|
||||
autofocus debounce="500" type="textarea"
|
||||
input-class="myinput-area">
|
||||
</q-input>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
flat :label="$t('dialog.sendmsg')" color="primary"
|
||||
@click="sendMsg(myevent)"></q-btn>
|
||||
<q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!--v-touch-swipe.mouse.left.right="handleSwipe" -->
|
||||
|
||||
<!-- the calendar -->
|
||||
<q-page v-if="visuAllCal && showfirstN === 0" class="column" style="min-height: 200px !important;">
|
||||
|
||||
<div>
|
||||
<q-toolbar class="mytoolbar">
|
||||
<q-btn color="primary" round icon="keyboard_arrow_left" @click="calendarPrev"/>
|
||||
<q-btn color="primary" round icon="keyboard_arrow_right" @click="calendarNext"/>
|
||||
<q-separator vertical/>
|
||||
<!--<q-btn color="primary" :label="$t('dialog.today')" class="q-mx-md" @click="SetToday"></q-btn>-->
|
||||
<q-separator vertical/>
|
||||
<!--<q-btn label="GG" color="primary" @click="calendarView = 'day'"/>
|
||||
<q-btn label="Set" color="primary" @click="calendarView = 'week'"/>-->
|
||||
<q-btn label="5 GG" color="primary" @click="calendarView = '5day-agenda'"/>
|
||||
<q-btn label="Sett" color="primary" @click="calendarView = 'week-agenda'"/>
|
||||
<q-btn label="Mese" color="primary" @click="calendarView = 'month'"/>
|
||||
<q-space/>
|
||||
</q-toolbar>
|
||||
<q-separator/>
|
||||
<div class="text-center"><span
|
||||
class="q-mr-xl q-toolbar__title nowrap text-blue">{{ title_cal }}</span>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
:theme="theme"
|
||||
:enable-themes="enableThemes === true"
|
||||
|
||||
-->
|
||||
|
||||
<q-calendar
|
||||
v-if="visuAllCal"
|
||||
ref="calendar"
|
||||
class="calendar"
|
||||
:key="keyValue"
|
||||
v-model="selectedDate"
|
||||
:locale="calendarStore.locale"
|
||||
:maxDays="calendarStore.maxDays"
|
||||
animated
|
||||
transition-prev="slide-right"
|
||||
transition-next="slide-left"
|
||||
:dragOverFunc="onDragOver"
|
||||
:dropFunc="onDrop"
|
||||
:view="calendarView"
|
||||
:weekdays="weekdays"
|
||||
:interval-minutes="60 * calendarStore.intervalRangeStep"
|
||||
:interval-start="calendarStore.intervalStart"
|
||||
:interval-count="calendarStore.intervalCount"
|
||||
:hour24-format="calendarStore.hour24Format"
|
||||
:short-month-label="calendarStore.shortMonthLabel"
|
||||
:show-day-of-year-label="calendarStore.showDayOfYearLabel"
|
||||
:hide-header="calendarStore.hideHeader"
|
||||
:no-scroll="calendarStore.noScroll"
|
||||
:short-weekday-label="calendarStore.shortWeekdayLabel"
|
||||
:short-interval-label="calendarStore.shortIntervalLabel"
|
||||
:interval-height="calendarStore.intervalHeight"
|
||||
:resource-height="calendarStore.resourceHeight"
|
||||
:resource-width="calendarStore.resourceWidth"
|
||||
:day-height="dayHeight"
|
||||
:show-month-label="calendarStore.showMonthLabel"
|
||||
:show-work-weeks="calendarStore.showWorkWeeks"
|
||||
:resources="resources"
|
||||
@change="onChanged"
|
||||
@moved="onMoved"
|
||||
@click:date="onDateChanged"
|
||||
@click:interval="addEventMenu"
|
||||
@click:time="addEventMenu"
|
||||
@click:day="addEventMenu"
|
||||
@click:week="addEventMenu"
|
||||
@click:resource="resourceClicked"
|
||||
@click:resource:day="resourceDayClicked"
|
||||
dayPadding="35px 2px"
|
||||
>
|
||||
|
||||
<template #day="{ timestamp }">
|
||||
<template v-for="(event, index) in getEvents(timestamp.date)">
|
||||
<q-badge
|
||||
style="width: 100%; cursor: pointer;"
|
||||
:class="badgeClasses(event, 'day')"
|
||||
:style="badgeStyles(event, 'day')"
|
||||
@click.stop.prevent="showEvent(event)"
|
||||
:draggable="tools.isManager()"
|
||||
@dragstart.native="(e) => onDragStart(e, event)"
|
||||
@dragend.native="(e) => onDragEnd(e, event)"
|
||||
@dragenter.native="(e) => onDragEnter(e, event)"
|
||||
@touchmove.native="(e) => {}"
|
||||
>
|
||||
|
||||
<span class="">{{ getTitleEv(event) }}</span>
|
||||
</q-badge>
|
||||
<div class="text-center"><img
|
||||
:src="getImgEvent(event)"
|
||||
class="text-center listaev__tdimg_small" :alt="event.title">
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #day-header="{ timestamp }">
|
||||
<div class="row justify-center">
|
||||
<template v-for="(event, index) in eventsMap[timestamp.date]">
|
||||
<q-badge
|
||||
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="{ timestamp, timeStartPos, timeDurationHeight }">
|
||||
<template v-for="(event, index) in getEvents(timestamp.date)">
|
||||
<div
|
||||
:label="tools.getstrTime(event.dateTimeStart)"
|
||||
class="justify-start q-ma-sm shadow-5 bg-blue-grey-6"
|
||||
>
|
||||
<div
|
||||
v-if="getImgEvent(event)" class="row justify-center"
|
||||
style="margin-top: 30px; width: 100%;">
|
||||
<q-avatar
|
||||
style="margin-top: -25px; margin-bottom: 10px; font-size: 60px; max-height: 50px;">
|
||||
<img :src="getImgEvent(event)" style="border: #a4edf6 solid 5px;">
|
||||
</q-avatar>
|
||||
</div>
|
||||
<div class="col-12 q-px-xs text-white">
|
||||
<strong>{{ tools.getstrTime(event.dateTimeStart) }}</strong>
|
||||
</div>
|
||||
<div
|
||||
v-if="getTitleEv(event)" class="col-12 q-px-xs text-white"
|
||||
style="font-size: 0.75rem;">
|
||||
<q-badge
|
||||
:key="index"
|
||||
multi-line
|
||||
class="my-event-rel justify-center rounded-borders"
|
||||
:class="badgeClasses(event, 'body')"
|
||||
:style="badgeStyles(event, 'body', timeStartPos, timeDurationHeight)"
|
||||
@click.stop.prevent="showEvent(event)"
|
||||
:draggable="tools.isManager()"
|
||||
@dragstart.native="(e) => onDragStart(e, event)"
|
||||
@dragend.native="(e) => onDragEnd(e, event)"
|
||||
@dragenter.native="(e) => onDragEnter(e, event)"
|
||||
@touchmove.native="(e) => {}"
|
||||
>
|
||||
<span class="">{{ getTitleEv(event) }}</span> <br>
|
||||
|
||||
</q-badge>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<q-badge
|
||||
:key="index"
|
||||
class="my-event justify-center"
|
||||
:class="badgeClasses(event, 'body')"
|
||||
:style="badgeStyles(event, 'body', timeStartPos, timeDurationHeight)"
|
||||
@click.stop.prevent="showEvent(event)"
|
||||
:draggable="tools.isManager()"
|
||||
@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>
|
||||
<p class="">{{ getTitleEv(event) }}</p> <br>
|
||||
<div class="text-center"><img :src="getImgEvent(event)"
|
||||
class="text-center listaev__tdimg_small"
|
||||
:alt="event.title">
|
||||
</div>
|
||||
|
||||
|
||||
</q-badge> -->
|
||||
</template>
|
||||
</template>
|
||||
</q-calendar>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
|
||||
<div class="q-mt-md">
|
||||
<div v-if="!mysingleevent">
|
||||
<p class="text-subtitle1 text-red bg-amber text-center ">LISTA PROSSIMI <span
|
||||
v-if="showfirstN > 0">{{ showfirstN }}</span>
|
||||
EVENTI:</p>
|
||||
|
||||
<!--<q-toggle v-model="showPrev" :val="lists.MenuAction.SHOW_PREV_REC"
|
||||
:label="$t('grid.showprevedit')"></q-toggle>-->
|
||||
|
||||
<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)">
|
||||
<div class="listaev__align_chips">
|
||||
<img
|
||||
:src="getImgEvent(event)"
|
||||
@click="selectEvent(event)"
|
||||
class="text-left padding_cell listaev__tdimg listaev__img cursor-pointer q-mx-sm"
|
||||
:style="getStyleByEvent(event, event === myevent)"
|
||||
:alt="event.title">
|
||||
<q-chip
|
||||
dense v-if="isAlreadyBooked(event)" class="cltexth4 chipbooked shadow-5 q-mb-md"
|
||||
color="green" text-color="white"
|
||||
icon="event_available">{{ $t('cal.booked') }}
|
||||
</q-chip>
|
||||
|
||||
<q-chip
|
||||
v-if="event === myevent && !displayEvent && editable"
|
||||
class="text-center shadow-5 glossy bg-blue chipmodif">
|
||||
|
||||
<q-btn v-if="editable" flat round color="white" icon="fas fa-copy">
|
||||
<q-menu
|
||||
transition-show="flip-right"
|
||||
transition-hide="flip-left">
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item clickable @click="duplicateEvent(myevent, 7)">
|
||||
<q-item-section>Tra 1 Settimana</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="duplicateEvent(myevent, 14)">
|
||||
<q-item-section>Tra 2 Settimane</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="duplicateEvent(myevent, 7, 4)">
|
||||
<q-item-section>4 Eventi ogni Settimana</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="editable" flat round color="white" icon="delete" v-close-popup
|
||||
@click="deleteEvent(myevent)"></q-btn>
|
||||
<q-btn
|
||||
v-if="editable" flat round color="white" icon="edit" v-close-popup
|
||||
@click="editEvent(myevent)"></q-btn>
|
||||
<q-btn
|
||||
v-if="editable" flat round color="white" icon="cancel"
|
||||
@click="selectEvent(null)"></q-btn>
|
||||
</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>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="listaev__date listaev__align_center_mobile text-center">
|
||||
<span v-html="tools.getstrDateTimeEvent(mythis, event, true)"></span>
|
||||
</div>
|
||||
|
||||
<div class="listaev__align_center_mobile">
|
||||
|
||||
<div style="margin: 10px;"></div>
|
||||
|
||||
<div v-if="event.internal">
|
||||
<q-chip color="blue" text-color="white">Evento Interno:</q-chip>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<!-- Se c'è un link, allora -->
|
||||
<q-btn
|
||||
size="md" type="a"
|
||||
class="text-center boldhigh"
|
||||
:to="`/event/${event.typol}/${event._id}`"
|
||||
target="_blank"
|
||||
:style="`background-color: ${event.bgcolor} !important; color: white !important;`"
|
||||
ripple
|
||||
rounded
|
||||
:label="getTitleEv(event)"
|
||||
:color="event.bgcolor" text-color="white" glossy>
|
||||
|
||||
</q-btn>
|
||||
<!--<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 text-center"-->
|
||||
<!--:style="`background-color: ${event.bgcolor} !important; color: white !important;`"-->
|
||||
<!--text-color="white"-->
|
||||
<!--:icon="event.icon"-->
|
||||
<!--dense>{{event.title}}-->
|
||||
<!--</q-chip>-->
|
||||
</div>
|
||||
|
||||
<div style="margin: 10px;"></div>
|
||||
|
||||
<p class="listaev__details" v-html="event.details"></p>
|
||||
<div v-if="event.teacher" class="">
|
||||
<span class="cal__teacher-title">{{ $t('cal.teacher') }}: <span
|
||||
class="margin_with"></span></span>
|
||||
|
||||
<CMyTeacher :username="event.teacher"></CMyTeacher>
|
||||
<CMyTeacher :username="event.teacher2"></CMyTeacher>
|
||||
<CMyTeacher :username="event.teacher3"></CMyTeacher>
|
||||
<CMyTeacher :username="event.teacher4"></CMyTeacher>
|
||||
|
||||
<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="getWhereIcon(event.wherecode)">
|
||||
<img
|
||||
:src="`../../statics/images/avatar/` + getWhereIcon(event.wherecode)"
|
||||
:alt="event.wherecode">
|
||||
</q-avatar>
|
||||
<q-avatar color="blue" font-size="20px" text-color="white" icon="home">
|
||||
</q-avatar>
|
||||
<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>
|
||||
|
||||
|
||||
<div class="row centeritems">
|
||||
<q-btn
|
||||
v-if="event.linkpdf" size="md" type="a"
|
||||
:href="`../../statics/` + event.linkpdf"
|
||||
target="_blank" rounded color="primary" icon="info"
|
||||
class="q-ma-sm"
|
||||
:label="$t('cal.showpdf')">
|
||||
|
||||
</q-btn>
|
||||
<q-btn
|
||||
rounded
|
||||
class="q-ma-sm"
|
||||
color="primary"
|
||||
:to="`/event/${event.typol}/${event._id}`"
|
||||
:label="$t('event.openpage')">
|
||||
</q-btn>
|
||||
<q-btn
|
||||
rounded outline class="q-ma-sm"
|
||||
color="primary" @click="askForInfoEventMenu(event)"
|
||||
:label="$t('event.askinfo')">
|
||||
</q-btn>
|
||||
<!--<q-btn rounded outline class="q-ma-sm"
|
||||
v-if="!event.nobookable && !isAlreadyBooked(event) && static_data.functionality.BOOKING_EVENTS"
|
||||
color="primary" @click="addBookEventMenu(event)"
|
||||
:label="$t('cal.booking')" :disable="!isEventEnabled(event)">
|
||||
</q-btn>-->
|
||||
<q-btn
|
||||
rounded outline class="q-ma-sm"
|
||||
v-if="!event.nobookable && isAlreadyBooked(event) && static_data.functionality.BOOKING_EVENTS"
|
||||
text-color="red"
|
||||
@click.native="EditBookEvent(event)"
|
||||
:label="$t('cal.modifybooking')">
|
||||
</q-btn>
|
||||
<!--
|
||||
<q-btn push rounded v-if="!event.nobookable && isAlreadyBooked(event)" color="positive" @click="BookEvent(event)"
|
||||
:label="$t('cal.booked')">
|
||||
</q-btn>
|
||||
-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</q-markup-table>
|
||||
|
||||
<div class="q-ma-lg text-center">
|
||||
<q-btn
|
||||
rounded type="a" to="/calendario-eventi" color="primary" icon="event" size="lg"
|
||||
:label="$t('cal.showlastschedule')">
|
||||
</q-btn>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else>
|
||||
<CMySingleEvent
|
||||
:myevent="mysingleevent" calendarView="month" :iseditable="editable"
|
||||
@duplicateEvent="duplicateEvent"
|
||||
@askForInfoEventMenu="askForInfoEventMenu"
|
||||
@deleteEvent="deleteEvent"
|
||||
@editEvent="editEvent"
|
||||
@addBookEventMenu="addBookEventMenu"
|
||||
@EditBookEvent="EditBookEvent">
|
||||
|
||||
</CMySingleEvent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" src="./CEventsCalendar.ts">
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './CEventsCalendar.scss';
|
||||
</style>
|
||||
1
src/components/CEventsCalendar/index.ts
Executable file
1
src/components/CEventsCalendar/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export {default as CEventsCalendar} from './CEventsCalendar.vue'
|
||||
Reference in New Issue
Block a user