From f0e0b449f2bd6c4417e467b2903b29ad03a9626d Mon Sep 17 00:00:00 2001 From: polo Date: Fri, 20 Jun 2025 23:59:10 +0200 Subject: =?UTF-8?q?params=20au=20chargement=20des=20donn=C3=A9es,=20suppre?= =?UTF-8?q?ssion=20d'un=20=C3=A9v=C3=A8nement?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/js/calendar.js | 8 ++-- public/js/calendar_admin.js | 49 ++++++++++++++++++-- src/load-events.php | 108 +++++++++++++++++++++++++++----------------- 3 files changed, 116 insertions(+), 49 deletions(-) diff --git a/public/js/calendar.js b/public/js/calendar.js index af9ffb4..f1c55c4 100644 --- a/public/js/calendar.js +++ b/public/js/calendar.js @@ -5,6 +5,7 @@ document.addEventListener('DOMContentLoaded', function(){ const calendar = new FullCalendar.Calendar(calendarEl,{ editable: true, locale: 'fr', + //timeZone: 'local', // à modifier pour être à l'heure d'un autre pays initialView: 'dayGridMonth', headerToolbar:{ left: 'prev,next today', @@ -32,6 +33,8 @@ document.addEventListener('DOMContentLoaded', function(){ 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 + + events: '../src/load-events.php', // fichier PHP qui retourne les événements select: function(info){ selected_start_string = info.startStr; // variable "globale" @@ -47,7 +50,7 @@ document.addEventListener('DOMContentLoaded', function(){ 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 getEndMinusOneDay(date){ + function minusOneDay(date){ date.setDate(date.getDate() - 1); // jour de fin modifié pour ne pas faire bizarre pour l'utilisateur return date; } @@ -56,7 +59,7 @@ document.addEventListener('DOMContentLoaded', function(){ const start_date = start.split('T')[0]; const start_hour = (info.event.allDay ? '' : '
à ' + start.split('T')[1]).replace(":", "h"); const formated_start = 'le ' + start_date.split('-')[2] + '/' + start_date.split('-')[1] + '/' + start_date.split('-')[0] + start_hour; - const end = formatDate(info.event.allDay ? getEndMinusOneDay(info.event.end) : info.event.end, info.event.allDay); + 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 = 'le ' + end_date.split('-')[2] + '/' + end_date.split('-')[1] + '/' + end_date.split('-')[0] + end_hour; @@ -78,7 +81,6 @@ document.addEventListener('DOMContentLoaded', function(){ } }, //datesSet: function(info){}, // déclenché lorsque des dates affichées sont chargées (= comme viewDidMount + changement de date) - events: '../src/load-events.php' // fichier PHP qui retourne les événements }); function hideModal(){ diff --git a/public/js/calendar_admin.js b/public/js/calendar_admin.js index 253d127..8fe91a3 100644 --- a/public/js/calendar_admin.js +++ b/public/js/calendar_admin.js @@ -1,10 +1,12 @@ document.addEventListener('DOMContentLoaded', function(){ const calendarEl = document.getElementById('calendar'); let selected_start_string = null; + let event_selected = false; // pour event.remove() const calendar = new FullCalendar.Calendar(calendarEl,{ editable: true, locale: 'fr', + //timeZone: 'local', // à modifier pour être à l'heure d'un autre pays initialView: 'dayGridMonth', headerToolbar:{ left: 'prev,next today', @@ -32,9 +34,12 @@ document.addEventListener('DOMContentLoaded', function(){ 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 + + events: '../src/load-events.php', // fichier PHP qui retourne les événements select: function(info){ selected_start_string = info.startStr; // variable "globale" + event_selected = false; const aside = document.querySelector('aside'); let checked = ''; let input = 'datetime-local'; @@ -107,6 +112,7 @@ document.addEventListener('DOMContentLoaded', function(){ }, //unselect: function(event, view){}, eventClick: function(info){ + event_selected = true; // variable "globale" const aside = document.querySelector('aside'); const checked = info.event.allDay ? 'checked' : ''; const input = info.event.allDay ? 'date' : 'datetime-local'; @@ -116,13 +122,13 @@ document.addEventListener('DOMContentLoaded', function(){ 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 getEndMinusOneDay(date){ + function minusOneDay(date){ date.setDate(date.getDate() - 1); // jour de fin modifié pour ne pas faire bizarre pour l'utilisateur return date; } const formated_start = formatDate(info.event.start); - const formated_end = formatDate(info.event.allDay ? getEndMinusOneDay(info.event.end) : info.event.end, info.event.allDay); + const formated_end = formatDate(info.event.allDay ? minusOneDay(info.event.end) : info.event.end, info.event.allDay); const aside_content = `
@@ -155,6 +161,7 @@ document.addEventListener('DOMContentLoaded', function(){
+
`; aside.innerHTML = aside_content; calendar.updateSize(); @@ -165,11 +172,11 @@ document.addEventListener('DOMContentLoaded', function(){ } }, //datesSet: function(info){}, // déclenché lorsque des dates affichées sont chargées (= comme viewDidMount + changement de date) - events: '../src/load-events.php' // fichier PHP qui retourne les événements }); function hideModal(){ const aside = document.querySelector('aside'); + event_selected = false; aside.innerHTML = ''; calendar.updateSize(); } @@ -304,13 +311,44 @@ document.addEventListener('DOMContentLoaded', function(){ event_end_input.value = end + 'T11:00'; } } + function removeEvent(){ + if(!confirm("Voulez-vous vraiment supprimer cet évènement du calendrier?")){ + return; + } + const event_id = document.getElementById('event_id').value; + const event = calendar.getEventById(event_id); + + fetch('../src/post-ajax.php', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(event_id), + }) + .then(response => response.json()) + .then(data => { + if(data.success){ + event.remove(); + hideModal(); + } + }) + .catch((error) => { + console.error('Error:', error); + }); + event_selected = false; + } + // touches de clavier document.addEventListener('keydown', function(event){ - if(event.key === 'Escape') { + if(event.key === 'Escape'){ hideModal(); } + else if(event.key === 'Delete' && event_selected === true){ + removeEvent(); + } }); + // boutons dans la "modale" // technique de la délégation d'événements pour utiliser un bouton ajouté dynamiquement document.addEventListener('click', function(event){ if(event.target.classList.contains('event_close_button')){ @@ -325,6 +363,9 @@ document.addEventListener('DOMContentLoaded', function(){ else if(event.target.classList.contains('submit_update_event')){ submitEvent(false); } + else if(event.target.classList.contains('delete_event')){ + removeEvent(); + } }); calendar.render(); diff --git a/src/load-events.php b/src/load-events.php index b997fce..5c71137 100644 --- a/src/load-events.php +++ b/src/load-events.php @@ -1,43 +1,67 @@ 1, - 'title' => 'Évènement1', - 'start' => '2025-06-03T05:00:00Z', // Z indique que l'heure est en UTC - 'end' => '2025-06-03T09:00:00Z', - 'allDay' => false, - 'color' => '#ffa500', // couleur hexa, éviter les couleurs CSS qui ne fonctionnent pas dans value="" en HTML - //'url' => 'https://dev.nageurs-bigoudens.fr', // comportement: https://fullcalendar.io/docs/eventClick - 'description' => 'blablabla', - ], - [ - 'id' => 2, - 'title' => 'Évènement2', - 'start' => '2025-06-06T08:00:00Z', - 'end' => '2025-06-07T08:00:00Z', - 'allDay' => false, - 'color' => '#e01b24', - 'description' => 'truc machin', - ], - [ - 'id' => 3, - 'title' => 'Évènement3', - 'start' => '2025-06-08', - 'end' => '2025-06-09', - 'allDay' => true, // pas d'heure - 'color' => '#008000', - 'description' => 'ça va chier', - ], - // provoque une erreur, si allDay la fin ne peut être égale au début - /*[ - 'id' => 4, - 'title' => 'Évènement4', - 'start' => '2025-06-09', - 'end' => '2025-06-09', - 'allDay' => true, - 'color' => '#1a5fb4', - ],*/ -]; - -header('Content-Type: application/json'); -echo json_encode($events); +// réception de deux paramètres GET: 'start' et 'end' + +if(isset($_GET['start']) && isset($_GET['end']) && empty($_POST)){ + // bornes début et fin du calendrier affiché à l'heure locale + // noter que la vue "planning" est similaire à la vue "semaine" + $start = new DateTime($_GET['start']); + $end = new DateTime($_GET['end']); + $start->setTimezone(new DateTimeZone('UTC')); + $end->setTimezone(new DateTimeZone('UTC')); + + // recherche des évènement en BDD avec ceci: + // WHERE end >= :start AND start <= :end + // on prend les évènements se finissant après le début + // ou commençant avant la fin de la fourchette + + // affichage format ISO à l'heure UTC + //$date->format('Y-m-d\TH:i:s\Z'); + + // chatgpt suggère l'utilisation d'un DTO + // => une classe de données simple et tout "public" pour des évènements obtenables autant depuis la BDD que de fichiers .ics par exemple + + $events = [ + [ + 'id' => 1, + 'title' => 'Évènement1', + 'start' => '2025-06-03T05:00:00Z', // Z indique que l'heure est en UTC + 'end' => '2025-06-03T09:00:00Z', + 'allDay' => false, + 'color' => '#ffa500', // couleur hexa, éviter les couleurs CSS qui ne fonctionnent pas dans value="" en HTML + //'url' => 'https://dev.nageurs-bigoudens.fr', // comportement: https://fullcalendar.io/docs/eventClick + 'description' => 'blablabla', + ], + [ + 'id' => 2, + 'title' => 'Évènement2', + 'start' => '2025-06-06T08:00:00Z', + 'end' => '2025-06-07T08:00:00Z', + 'allDay' => false, + 'color' => '#e01b24', + 'description' => 'truc machin', + ], + [ + 'id' => 3, + 'title' => 'Évènement3', + 'start' => '2025-06-08', + 'end' => '2025-06-09', + 'allDay' => true, // pas d'heure + 'color' => '#008000', + 'description' => 'ça va chier', + ], + // provoque une erreur, si allDay la fin ne peut être égale au début + /*[ + 'id' => 4, + 'title' => 'Évènement4', + 'start' => '2025-06-09', + 'end' => '2025-06-09', + 'allDay' => true, + 'color' => '#1a5fb4', + ],*/ + ]; + + header('Content-Type: application/json'); + echo json_encode($events); +} + + -- cgit v1.2.3