params au chargement des données, suppression d'un évènement

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 ? '' : '<br>à ' + 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 ? '' : '<br>à ' + 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 = `<div class="form_event">
                     <div class="event_title_box">
@@ -155,6 +161,7 @@ document.addEventListener('DOMContentLoaded', function(){
                     </div>
                     <button class="submit_update_event">Modifier</button>
                     <button class="event_close_button">Annuler</button>
+                    <button class="delete_event">Supprimer</button>
                 </div>`;
             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 @@
 <?php
-$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);
+// 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);
+}
+
+