Skip to content

Commit

Permalink
more js refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
victormours committed Jan 17, 2025
1 parent 31f6d3b commit f4de04e
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 188 deletions.
87 changes: 3 additions & 84 deletions app/javascript/components/calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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 });
}
Expand Down Expand Up @@ -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("<div class=\"fc-title\" style=\"color: white; padding: 2px 4px; font-size: 12px; font-weight: bold;\">" + info.event.title + "</div>");

if (extendedProps.organisationName) {
title += `<br>${extendedProps.organisationName}`;
}
title += `<br><strong>${info.event.title}</strong>`;
if (extendedProps.lieu) {
title += `<br> <small>Lieu : ${extendedProps.lieu}</small>`;
}
} else {
if (extendedProps.duration) {
title += ` <small>(${extendedProps.duration} min)</small>`;
title += ` <br>${extendedProps.motif}`;
}

title += `<br><strong>${info.event.title}</strong>`;

if (extendedProps.organisationName) {
title += `<br>${extendedProps.organisationName}`;
}
if (extendedProps.lieu) {
title += `<br><strong>Lieu:</strong> ${extendedProps.lieu}`;
}
if (extendedProps.readableStatus) {
title += `<br><strong>Statut:</strong> ${extendedProps.readableStatus}`;
}
if (extendedProps.unauthorizedRdvExplanation) {
title += `<br>${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;
}
Expand Down
86 changes: 85 additions & 1 deletion app/javascript/components/calendar/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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("<div class=\"fc-title\" style=\"color: white; padding: 2px 4px; font-size: 12px; font-weight: bold;\">" + info.event.title + "</div>");

if (extendedProps.organisationName) {
title += `<br>${extendedProps.organisationName}`;
}
title += `<br><strong>${info.event.title}</strong>`;
if (extendedProps.lieu) {
title += `<br> <small>Lieu : ${extendedProps.lieu}</small>`;
}
} else {
if (extendedProps.duration) {
title += ` <small>(${extendedProps.duration} min)</small>`;
title += ` <br>${extendedProps.motif}`;
}

title += `<br><strong>${info.event.title}</strong>`;

if (extendedProps.organisationName) {
title += `<br>${extendedProps.organisationName}`;
}
if (extendedProps.lieu) {
title += `<br><strong>Lieu:</strong> ${extendedProps.lieu}`;
}
if (extendedProps.readableStatus) {
title += `<br><strong>Statut:</strong> ${extendedProps.readableStatus}`;
}
if (extendedProps.unauthorizedRdvExplanation) {
title += `<br>${extendedProps.unauthorizedRdvExplanation}`;
}
}

$el.attr("title", title);
$el.attr("data-toggle", "tooltip");
$el.attr("data-html", "true");
$el.tooltip()
}
}

export { defaultFullCalendarConfig, eventRenderer }
117 changes: 14 additions & 103 deletions app/javascript/components/rdv-plan-calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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("<div class=\"fc-title\" style=\"color: white; padding: 2px 4px; font-size: 12px; font-weight: bold;\">" + info.event.title + "</div>");

if (extendedProps.organisationName) {
title += `<br>${extendedProps.organisationName}`;
}
title += `<br><strong>${info.event.title}</strong>`;
if (extendedProps.lieu) {
title += `<br> <small>Lieu : ${extendedProps.lieu}</small>`;
}
} else {
if (extendedProps.duration) {
title += ` <small>(${extendedProps.duration} min)</small>`;
title += ` <br>${extendedProps.motif}`;
}

title += `<br><strong>${info.event.title}</strong>`;

if (extendedProps.organisationName) {
title += `<br>${extendedProps.organisationName}`;
}
if (extendedProps.lieu) {
title += `<br><strong>Lieu:</strong> ${extendedProps.lieu}`;
}
if (extendedProps.readableStatus) {
title += `<br><strong>Statut:</strong> ${extendedProps.readableStatus}`;
}
if (extendedProps.unauthorizedRdvExplanation) {
title += `<br>${extendedProps.unauthorizedRdvExplanation}`;
}
}

$el.attr("title", title);
$el.attr("data-toggle", "tooltip");
$el.attr("data-html", "true");
$el.tooltip()
}
}

document.addEventListener('turbolinks:load', function () {
Expand Down

0 comments on commit f4de04e

Please sign in to comment.