From f4de04e61f218112bd984ebcfa7f6b0f334e6043 Mon Sep 17 00:00:00 2001 From: Victor Mours Date: Fri, 17 Jan 2025 14:33:13 +0100 Subject: [PATCH] more js refactoring --- app/javascript/components/calendar.js | 87 +------------ app/javascript/components/calendar/utils.js | 86 ++++++++++++- .../components/rdv-plan-calendar.js | 117 +++--------------- 3 files changed, 102 insertions(+), 188 deletions(-) diff --git a/app/javascript/components/calendar.js b/app/javascript/components/calendar.js index b8d62e520..0a04e0485 100644 --- a/app/javascript/components/calendar.js +++ b/app/javascript/components/calendar.js @@ -3,7 +3,7 @@ import dayGridPlugin from '@fullcalendar/daygrid'; import timeGridPlugin from '@fullcalendar/timegrid'; import listPlugin from '@fullcalendar/list'; import interactionPlugin from '@fullcalendar/interaction'; -import { defaultFullCalendarConfig } from './calendar/utils' +import { defaultFullCalendarConfig, eventRenderer } from './calendar/utils' import Bowser from "bowser"; const browser = Bowser.getParser(window.navigator.userAgent); @@ -83,10 +83,8 @@ class CalendarRdvSolidarites { buttonText: 'Journée' } }, - minTime: '07:00:00', - maxTime: '20:00:00', datesRender: this.datesRender, - eventRender: this.eventRender, + eventRender: eventRenderer(this.data.selectedEventId), } return new Calendar(this.calendarEl, { ...defaultFullCalendarConfig(), ...options }); } @@ -146,86 +144,7 @@ class CalendarRdvSolidarites { } } - eventRender = (info) => { - let $el = $(info.el); - let extendedProps = info.event.extendedProps; - - if (extendedProps.past == true) { - $el.addClass("fc-event-past"); - }; - if (extendedProps.duration <= 30) { - $el.addClass("fc-event-small"); - }; - if (extendedProps.unauthorizedRdvExplanation) { - $el.addClass("fc-unauthorized-rdv"); - }; - - if (this.data.selectedEventId && info.event.id == this.data.selectedEventId) - $el.addClass("selected"); - - $el.addClass("fc-event-" + extendedProps.status); - - if (extendedProps.userInWaitingRoom == true) { - $el.addClass("fc-event-waiting"); - } - - if (extendedProps.jour_feries == true) { - return - } - - let title = ``; - const start = Intl.DateTimeFormat("fr", { timeZone: 'UTC', hour: 'numeric', minute: 'numeric' }).format(info.event.start); - const end = Intl.DateTimeFormat("fr", { timeZone: 'UTC', hour: 'numeric', minute: 'numeric' }).format(info.event.end); - - if (info.isStart && info.isEnd) { - title += `${start} - ${end}`; - } else if (info.isStart) { - title += `À partir de ${start}`; - } else if (info.isEnd) { - title += `Jusqu'à ${end}`; - } else { - title += `Toute la journée`; - } - - if (info.event.rendering == 'background') { - $el.append("
" + info.event.title + "
"); - - if (extendedProps.organisationName) { - title += `
${extendedProps.organisationName}`; - } - title += `
${info.event.title}`; - if (extendedProps.lieu) { - title += `
Lieu : ${extendedProps.lieu}`; - } - } else { - if (extendedProps.duration) { - title += ` (${extendedProps.duration} min)`; - title += `
${extendedProps.motif}`; - } - - title += `
${info.event.title}`; - - if (extendedProps.organisationName) { - title += `
${extendedProps.organisationName}`; - } - if (extendedProps.lieu) { - title += `
Lieu: ${extendedProps.lieu}`; - } - if (extendedProps.readableStatus) { - title += `
Statut: ${extendedProps.readableStatus}`; - } - if (extendedProps.unauthorizedRdvExplanation) { - title += `
${extendedProps.unauthorizedRdvExplanation}`; - } - } - - $el.attr("title", title); - $el.attr("data-toggle", "tooltip"); - $el.attr("data-html", "true"); - $el.tooltip() - } - - isTodayVisible = ({ activeStart, activeEnd }) => { + isTodayVisible = ({ activeStart, activeEnd }) => { const now = new Date() return now >= activeStart && now <= activeEnd; } diff --git a/app/javascript/components/calendar/utils.js b/app/javascript/components/calendar/utils.js index 0315b98c5..b8e2a1d45 100644 --- a/app/javascript/components/calendar/utils.js +++ b/app/javascript/components/calendar/utils.js @@ -12,6 +12,8 @@ const defaultFullCalendarConfig = () => ({ startTime: '07:00', endTime: '19:00', }, + minTime: '07:00:00', + maxTime: '20:00:00', eventMouseLeave: (info) => $(info.el).tooltip('hide'), // extra security timeZone: "Europe/Paris" // This is a hack to make sure that the events will be shown at the proper time in the calendar. // If this is removed, there is a bug that causes the events in the calendar to be show at the wrong @@ -26,4 +28,86 @@ const defaultFullCalendarConfig = () => ({ // for the rdv. This seems unlikely for now. }) -export { defaultFullCalendarConfig } +function eventRenderer(selectedEventId) { + // On renvoie une fonction qui aura le bon selectedEventId + return (info) => { + let $el = $(info.el); + let extendedProps = info.event.extendedProps; + + if (extendedProps.past == true) { + $el.addClass("fc-event-past"); + }; + if (extendedProps.duration <= 30) { + $el.addClass("fc-event-small"); + }; + if (extendedProps.unauthorizedRdvExplanation) { + $el.addClass("fc-unauthorized-rdv"); + }; + + if (selectedEventId && info.event.id == selectedEventId) + $el.addClass("selected"); + + $el.addClass("fc-event-" + extendedProps.status); + + if (extendedProps.userInWaitingRoom == true) { + $el.addClass("fc-event-waiting"); + } + + if (extendedProps.jour_feries == true) { + return + } + + let title = ``; + const start = Intl.DateTimeFormat("fr", { timeZone: 'UTC', hour: 'numeric', minute: 'numeric' }).format(info.event.start); + const end = Intl.DateTimeFormat("fr", { timeZone: 'UTC', hour: 'numeric', minute: 'numeric' }).format(info.event.end); + + if (info.isStart && info.isEnd) { + title += `${start} - ${end}`; + } else if (info.isStart) { + title += `À partir de ${start}`; + } else if (info.isEnd) { + title += `Jusqu'à ${end}`; + } else { + title += `Toute la journée`; + } + + if (info.event.rendering == 'background') { + $el.append("
" + info.event.title + "
"); + + if (extendedProps.organisationName) { + title += `
${extendedProps.organisationName}`; + } + title += `
${info.event.title}`; + if (extendedProps.lieu) { + title += `
Lieu : ${extendedProps.lieu}`; + } + } else { + if (extendedProps.duration) { + title += ` (${extendedProps.duration} min)`; + title += `
${extendedProps.motif}`; + } + + title += `
${info.event.title}`; + + if (extendedProps.organisationName) { + title += `
${extendedProps.organisationName}`; + } + if (extendedProps.lieu) { + title += `
Lieu: ${extendedProps.lieu}`; + } + if (extendedProps.readableStatus) { + title += `
Statut: ${extendedProps.readableStatus}`; + } + if (extendedProps.unauthorizedRdvExplanation) { + title += `
${extendedProps.unauthorizedRdvExplanation}`; + } + } + + $el.attr("title", title); + $el.attr("data-toggle", "tooltip"); + $el.attr("data-html", "true"); + $el.tooltip() + } +} + +export { defaultFullCalendarConfig, eventRenderer } diff --git a/app/javascript/components/rdv-plan-calendar.js b/app/javascript/components/rdv-plan-calendar.js index 9ff6ae10f..326fe6351 100644 --- a/app/javascript/components/rdv-plan-calendar.js +++ b/app/javascript/components/rdv-plan-calendar.js @@ -3,49 +3,40 @@ import 'bootstrap'; import { Calendar } from '@fullcalendar/core'; import timeGridPlugin from '@fullcalendar/timegrid'; import interactionPlugin from '@fullcalendar/interaction'; - -import { defaultFullCalendarConfig } from './calendar/utils' +import { defaultFullCalendarConfig, eventRenderer } from './calendar/utils' class RdvPlanCalendar { constructor() { - this.calendarEl = document.getElementById('rdvPlanCalendar'); - if (this.calendarEl == null || this.calendarEl.innerHTML !== "") + const calendarEl = document.getElementById('rdvPlanCalendar'); + if (calendarEl == null || calendarEl.innerHTML !== "") return - this.data = this.calendarEl.dataset - this.fullCalendarInstance = this.initFullCalendar(this.calendarEl.dataset) - this.fullCalendarInstance.render(); + return new Calendar(calendarEl, this.calendarConfig(calendarEl.dataset)).render(); } - initFullCalendar = (dataset) => { - var hiddenDays = [] - if (dataset.displaySaturdays !== "true") { - hiddenDays.push(6); - } - if (dataset.displaySundays !== "true") { - hiddenDays.push(0); - } - + calendarConfig = (dataset) => { const options = { plugins: [timeGridPlugin, interactionPlugin], eventSources: JSON.parse(dataset.eventSourcesJson), defaultDate: JSON.parse(dataset.defaultDateJson), defaultView: dataset.singleDay === "true" ? 'timeGridDay' : 'timeGridWeek', - hiddenDays: hiddenDays, + hiddenDays: [], + header: { left: '', center: '', right: '' }, select: this.selectEvent, minTime: dataset.minTime || '07:00:00', maxTime: dataset.maxTime || '20:00:00', - eventRender: this.eventRender, + eventRender: eventRenderer(), } - if (dataset.singleDay === "true") { - options.header = { left: '', center: '', right: '' }; - } else { - options.header = { left: '', center: '', right: 'prev,next' }; + if (dataset.displaySaturdays !== "true") { + options.hiddenDays.push(6); + } + if (dataset.singleDay !== "true") { + options.header.right = 'prev,next'; } - return new Calendar(this.calendarEl, { ...defaultFullCalendarConfig(), ...options }); + return { ...defaultFullCalendarConfig(), ...options }; } selectEvent = (info) => { @@ -54,86 +45,6 @@ class RdvPlanCalendar { const form = document.getElementById('rdvPlanCalendarForm') form.submit() } - - // TODO: extraire cette fonction pour la partager avec l'autre calendrier - eventRender = (info) => { - let $el = $(info.el); - let extendedProps = info.event.extendedProps; - - if (extendedProps.past == true) { - $el.addClass("fc-event-past"); - }; - if (extendedProps.duration <= 30) { - $el.addClass("fc-event-small"); - }; - if (extendedProps.unauthorizedRdvExplanation) { - $el.addClass("fc-unauthorized-rdv"); - }; - - if (this.data.selectedEventId && info.event.id == this.data.selectedEventId) - $el.addClass("selected"); - - $el.addClass("fc-event-" + extendedProps.status); - - if (extendedProps.userInWaitingRoom == true) { - $el.addClass("fc-event-waiting"); - } - - if (extendedProps.jour_feries == true) { - return - } - - let title = ``; - const start = Intl.DateTimeFormat("fr", { timeZone: 'UTC', hour: 'numeric', minute: 'numeric' }).format(info.event.start); - const end = Intl.DateTimeFormat("fr", { timeZone: 'UTC', hour: 'numeric', minute: 'numeric' }).format(info.event.end); - - if (info.isStart && info.isEnd) { - title += `${start} - ${end}`; - } else if (info.isStart) { - title += `À partir de ${start}`; - } else if (info.isEnd) { - title += `Jusqu'à ${end}`; - } else { - title += `Toute la journée`; - } - - if (info.event.rendering == 'background') { - $el.append("
" + info.event.title + "
"); - - if (extendedProps.organisationName) { - title += `
${extendedProps.organisationName}`; - } - title += `
${info.event.title}`; - if (extendedProps.lieu) { - title += `
Lieu : ${extendedProps.lieu}`; - } - } else { - if (extendedProps.duration) { - title += ` (${extendedProps.duration} min)`; - title += `
${extendedProps.motif}`; - } - - title += `
${info.event.title}`; - - if (extendedProps.organisationName) { - title += `
${extendedProps.organisationName}`; - } - if (extendedProps.lieu) { - title += `
Lieu: ${extendedProps.lieu}`; - } - if (extendedProps.readableStatus) { - title += `
Statut: ${extendedProps.readableStatus}`; - } - if (extendedProps.unauthorizedRdvExplanation) { - title += `
${extendedProps.unauthorizedRdvExplanation}`; - } - } - - $el.attr("title", title); - $el.attr("data-toggle", "tooltip"); - $el.attr("data-html", "true"); - $el.tooltip() - } } document.addEventListener('turbolinks:load', function () {