diff --git a/public/js/CalendarModalView.js b/public/js/CalendarModalView.js new file mode 100644 index 0000000..a7afba9 --- /dev/null +++ b/public/js/CalendarModalView.js @@ -0,0 +1,120 @@ +// js/CalendarModalView.js + +class CalendarModalView { + constructor(data) { + this.modal = ''; + if (data.mode !== 'show' && data.mode !== 'new' && data.mode !== 'edit') { + throw new Error("unknown mode in CalendarModal's constructor"); + } + this.data = data; + } + getView() { + switch (this.data.mode) { + case 'show': + this.makeShowView(); + break; + case 'new': + case 'edit': + this.makeEditView(); + break; + default: + throw new Error("unknown mode set in CalendarModal"); + } + return this.modal; + } + makeShowView() { + if (this.data.mode !== 'show') { + throw new Error(''); + } + if (this.data.all_day) { + this.data.end.setDate(this.data.end.getDate() - 1); // jour de fin modifié pour ne pas faire bizarre pour l'utilisateur + } + this.modal += `

` + this.escapeHtml(this.data.title) + `

` + this.escapeHtml(this.data.description) + `

`; + // allDay un jour + if (this.data.all_day && (this.data.start.getTime() === this.data.end.getTime())) { // comparaison des timestamps + this.modal += `

le ` + this.escapeHtml(this.displayDate(this.data.start)) + `

`; // affichage simplifié évènement d'un jour + } + // allDay plusieurs jours + else if (this.data.all_day) { + this.modal += `

du ` + this.escapeHtml(this.displayDate(this.data.start)) + `
+ au ` + this.escapeHtml(this.displayDate(this.data.end)) + `

`; + } + // non allDay + else { + this.modal += `

du ` + this.escapeHtml(this.displayDate(this.data.start)) + `
+ à ` + this.escapeHtml(this.displayHour(this.data.start)) + `

au ` + this.escapeHtml(this.displayDate(this.data.end)) + `
+ à ` + this.escapeHtml(this.displayHour(this.data.end)) + `

`; + } + this.modal += ` +

`; + } + displayDate(date) { + return date.getDate().toString().padStart(2, '0') + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getFullYear(); + } + displayHour(date) { + return date.getHours().toString().padStart(2, '0') + 'h' + date.getMinutes().toString().padStart(2, '0'); + } + makeEditView() { + if (this.data.mode === 'show') { + throw new Error(''); + } + if (this.data.all_day) { + this.data.end.setDate(this.data.end.getDate() - 1); // jour de fin modifié pour ne pas faire bizarre pour l'utilisateur + } + const title = this.data.mode === 'edit' ? this.data.title : ''; + const id = this.data.mode === 'edit' ? this.data.id : ''; + const description = this.data.mode === 'edit' ? this.data.description : ''; + const color = this.data.mode === 'edit' ? this.data.color : '#3788D8'; // bleu par défaut + this.modal += `

` + (this.data.mode === 'edit' ? "Modifier un" : "Nouvel") + ` évènement

+ Nom + + +

+ Description + +

+ + Journée entière +

+ Début + +

+ Fin + +

+ Couleur + +

` + + (this.data.mode === 'edit' + ? '' + : '') + + ` +

`; + } + makeInputValue(date) { + return date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0') + + (this.data.all_day ? '' : 'T' + date.getHours().toString().padStart(2, '0') + ':' + date.getMinutes().toString().padStart(2, '0')); + } + escapeHtml(html) { + if (html === null || html === undefined) + return ''; + return String(html) + .replace(/&/g, "&") // & en premier + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); + } +} diff --git a/public/js/calendar.js b/public/js/calendar.js index a092632..ff1a401 100644 --- a/public/js/calendar.js +++ b/public/js/calendar.js @@ -1,115 +1,97 @@ // js/calendar.js -document.addEventListener('DOMContentLoaded', function(){ - const calendarEl = document.getElementById('calendar'); +document.addEventListener('DOMContentLoaded', function () { + const calendarEl = getElementOrThrow('calendar'); + const modal = getElementOrThrow('event_modal'); let selected_start_string = null; - - const calendar = new FullCalendar.Calendar(calendarEl,{ + const calendar = new FullCalendar.Calendar(calendarEl, { editable: true, locale: 'fr', //timeZone: 'local', // à modifier pour être à l'heure d'un autre pays initialView: 'dayGridMonth', - headerToolbar:{ + headerToolbar: { left: 'prev,next today', center: 'title', - right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' - //right: 'dayGridMonth,timeGridWeek' + //right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' + right: 'dayGridMonth,timeGridWeek,listWeek' }, slotMinWidth: 70, defaultAllDay: false, - // numéros de semaine //weekNumbers: true, //weekText: 's', - // vue mois contentHeight: 600, // après initialisation: calendar.setOption('contentHeight', 650); //aspectRatio: 1.5, // après initialisation: calendar.setOption('aspectRatio', 1.8); // pour recalculer la taille au redimensionnement du parent, exécuter: calendar.updateSize() stickyHeaderDates: true, // garder les en-tête de colonnes lors du scroll fixedWeekCount: false, // avec false, affiche 4, 5 ou 6 semaines selon le mois - selectable: true, // sélection de jours multiples + selectable: true, // sélection de jours en cliquant dessus + longPressDelay: 300, // 1000ms par défaut navLinks: true, // numéros de jour et de semaines clicables - // vue semaine slotEventOverlap: true, // superposition (limitée) de deux évènements simultanés allDayContent: 'Journée', // texte dans la case "toute la journée" nowIndicator: true, // barre rouge pour maintenant - // params en plus: https://fullcalendar.io/docs/events-json-feed events: 'index.php?action=get_events', // fichier PHP qui retourne les événements - - select: function(info){ + select: function (info) { selected_start_string = info.startStr; // variable "globale" hideModal(); }, - //unselect: function(event, view){}, - - eventClick: function(info){ - const aside = document.querySelector('aside'); - const checked = info.event.allDay ? 'checked' : ''; - - // change des objets Date en chaînes compatibles avec les input - function formatDate(date){ - return date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0') - + (info.event.allDay ? '' : 'T' + date.getHours().toString().padStart(2, '0') + ':' + date.getMinutes().toString().padStart(2, '0')); - } - function minusOneDay(date){ - date.setDate(date.getDate() - 1); // jour de fin modifié pour ne pas faire bizarre pour l'utilisateur - return date; - } - - const start = formatDate(info.event.start); - const start_date = start.split('T')[0]; - const start_hour = (info.event.allDay ? '' : '
à ' + start.split('T')[1]).replace(":", "h"); - const formated_start = start_date.split('-')[2] + '/' + start_date.split('-')[1] + '/' + start_date.split('-')[0] + start_hour; - const end = formatDate(info.event.allDay ? minusOneDay(info.event.end) : info.event.end, info.event.allDay); - const end_date = end.split('T')[0]; - const end_hour = (info.event.allDay ? '' : '
à ' + end.split('T')[1]).replace(":", "h"); - const formated_end = end_date.split('-')[2] + '/' + end_date.split('-')[1] + '/' + end_date.split('-')[0] + end_hour; - - let aside_content = `

` + info.event.title + `

` + info.event.extendedProps.description + `

`; - if(checked && (formated_start === formated_end)){ // affichage simplifié évènement d'un jour - aside_content = aside_content + `

le ` + formated_start + `

`; + // sélection d'une date simple sur mobile, évite des problèmes de conflit avec eventClick + dateClick: function (info) { + if (window.matchMedia('(pointer: coarse)').matches) { + const end = new Date(info.date.getTime()); + calendar.view.type === 'dayGridMonth' ? end.setDate(end.getDate() + 1) : end.setMinutes(end.getMinutes() + 30); + // vue date: la fin est une date exclue + // vue semaine: durée de 30min par défaut + calendar.select(info.date, end); // appeler select() avec un seul paramètre ne marche pas avec la vue "mois" } - else{ - aside_content = aside_content + `

du ` + formated_start + `

au ` + formated_end + `

` + this.escapeHtml(this.data.title) + `

` + (this.data.mode === 'edit' ? "Modifier un" : "Nouvel") + ` évènement

` + info.event.title + `

Nouvel évènement

Modifier un évènement