From ebf9c2050339da7a42dd67f09b98af1e92f833a3 Mon Sep 17 00:00:00 2001 From: polo Date: Mon, 16 Jun 2025 02:49:38 +0200 Subject: =?UTF-8?q?front-end=20plus=20ou=20moins=20termin=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/js/calendar.js | 181 +++++++++++++++++++++++++++++++++++--------------- 1 file changed, 127 insertions(+), 54 deletions(-) (limited to 'public/js/calendar.js') diff --git a/public/js/calendar.js b/public/js/calendar.js index 3046ef0..22cdab3 100644 --- a/public/js/calendar.js +++ b/public/js/calendar.js @@ -1,3 +1,19 @@ +/* // à utiliser plus tard? +const current_view = calendar.view; +switch(current_view.type){ + case 'dayGridMonth': + console.log('mois'); + break; + case 'timeGridWeek': + console.log('semaine'); + break; + case 'timeGridDay': + console.log('jour'); + break; + default: + console.log('erreur'); +}*/ + document.addEventListener('DOMContentLoaded', function(){ const calendarEl = document.getElementById('calendar'); let selected_start_string = null; @@ -35,29 +51,48 @@ document.addEventListener('DOMContentLoaded', function(){ select: function(info){ const aside = document.querySelector('aside'); - let start_value; + let checked = ''; + let input = 'datetime-local'; // on veut des chaines de la forme 2025-05-20T07:05 // il faut retirer les secondes et le fuseau horaire du format ISO, c'est chiant - // enverra par contre une chaine ISO au serveur pour avoir un enregistrement correct - //selected_start = document.getElementById('event_start'); + // on enverra par contre une chaine ISO au serveur pour avoir un enregistrement correct + let start_value; + let end_value; const end = new Date(info.endStr); + + console.log(info.startStr); + console.log(info.endStr); + if(calendar.view.type == 'dayGridMonth'){ start_value = info.startStr + 'T10:00'; - end.setDate(end.getDate() - 1); + end.setDate(end.getDate() - 1); // jour de fin modifié pour ne pas faire bizarre pour l'utilisateur end.setHours(11); } else if(calendar.view.type == 'timeGridWeek' || calendar.view.type == 'timeGridDay'){ const start_array = info.startStr.split("T"); - start_value = start_array[0] + "T" + start_array[1].substr(0,5); // format 2025-06-12T10:00 - } + const end_array = info.endStr.split("T"); - const end_value = end.toISOString().split('T')[0] + "T" + String(end.getHours()).padStart(2, '0') + ":" + String(end.getMinutes()).padStart(2, '0'); - selected_start_string = start_value; + // clic sur la ligne "Journée", = 'dayGridMonth' + if(start_array.length == 1){ + checked = 'checked'; + input = 'date'; + start_value = info.startStr; + end.setDate(end.getDate() - 1); + end_value = end.toISOString().split('T')[0]; + } + else if(start_array.length == 2){ + start_value = start_array[0] + "T" + start_array[1].substr(0,5); // format 2025-06-12T10:00 + end_value = end_array[0] + "T" + end_array[1].substr(0,5); + } + else{ + console.log('pas censé se produire'); + return; + } + } - //console.log(info.endStr); - //console.log(end_value.value); + selected_start_string = start_value; // variable "globale" const aside_content = `
@@ -68,16 +103,16 @@ document.addEventListener('DOMContentLoaded', function(){
- +
- +
- +
@@ -89,23 +124,24 @@ document.addEventListener('DOMContentLoaded', function(){ aside.innerHTML = aside_content; calendar.updateSize(); }, - //~ unselect: function(event, view) { - //~ const aside = document.querySelector('aside'); - //~ aside.innerHTML = ''; - //~ //calendar.updateSize(); - //~ }, + //unselect: function(event, view){}, eventClick: function(info){ const aside = document.querySelector('aside'); const checked = info.event.allDay ? 'checked' : ''; const input = info.event.allDay ? 'date' : 'datetime-local'; - - // change des objets Date en chaînes compatibles avec des input type datetime-local, ex: 2025-05-20T07:05 - function formatDate(date, all_day){ + + // 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') - + (all_day ? '' : 'T' + date.getHours().toString().padStart(2, '0') + ':' + date.getMinutes().toString().padStart(2, '0')); + + (info.event.allDay ? '' : 'T' + date.getHours().toString().padStart(2, '0') + ':' + date.getMinutes().toString().padStart(2, '0')); + } + function getEndMinusOneDay(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, info.event.allDay); - const formated_end = formatDate(info.event.end, info.event.allDay); + + 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 aside_content = `
@@ -156,63 +192,100 @@ document.addEventListener('DOMContentLoaded', function(){ function submitEvent(new_event){ const event_title = document.getElementById('event_title').value; const event_all_day = document.getElementById('event_all_day').checked; - const event_start = document.getElementById('event_start').value; - const event_end = document.getElementById('event_end').value; + let event_start = document.getElementById('event_start').value; + let event_end = document.getElementById('event_end').value; const event_color = document.getElementById('event_color').value; // #3788d8 par défaut const event_id = new_event ? '' : document.getElementById('event_id').value; if(event_title.length !== 0 && event_start.length !== 0 && event_end.length !== 0 && event_color.length !== 0 && (new_event || event_id.length !== 0)) { - const event_start_utc = new Date(event_start).toISOString(); // heure UTC pour fullcalendar (et pour le serveur) - const event_end_utc = new Date(event_end).toISOString(); + if(event_all_day){ + // on remet le jour de fin exclu + const tmp_object = new Date(event_end); + tmp_object.setDate(tmp_object.getDate() + 1); + event_end = tmp_object.toISOString().split('T')[0]; + } + else{ + event_start = new Date(event_start).toISOString(); + event_end = new Date(event_end).toISOString(); + } + console.log(event_end); - if(event_start_utc >= event_end_utc){ + if(event_start > event_end || (!event_all_day && event_start == event_end)){ return; } // création if(new_event){ - /*const current_view = calendar.view; - switch(current_view.type){ - case 'dayGridMonth': - console.log('mois'); - break; - case 'timeGridWeek': - console.log('semaine'); - break; - case 'timeGridDay': - console.log('jour'); - break; - default: - console.log('erreur'); - }*/ - calendar.addEvent({ - // pas d'id, c'est au serveur de le créer + const event = { title: event_title, allDay: event_all_day, - start: event_start_utc, - end: event_end_utc, + start: event_start, + end: event_end, color: event_color + }; + + fetch('../src/post-ajax.php', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(event), + }) + .then(response => response.json()) + .then(data => { + if(data.success){ + event.id = data.id; + calendar.addEvent(event); + hideModal(); + } + }) + .catch((error) => { + console.error('Error:', error); }); + } // modification else{ const event = calendar.getEventById(event_id); if(event){ - event.setProp('title', event_title); - event.setAllDay(event_all_day); - event.setStart(event_start_utc); - event.setEnd(event_end_utc); - event.setProp('color', event_color); + const event_copy = { + id: parseInt(event.id), + title: event_title, + allDay: event_all_day, + start: event_start, + end: event_end, + color: event_color + }; + + fetch('../src/post-ajax.php', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(event_copy), + }) + .then(response => response.json()) + .then(data => { + if(data.success){ + event.setProp('title', event_title); + event.setAllDay(event_all_day); + event.setStart(event_start); + event.setEnd(event_end); + event.setProp('color', event_color); + hideModal(); + } + }) + .catch((error) => { + console.error('Error:', error); + }); } else{ console.log("Événement non trouvé !"); } } - - hideModal(); } else{ // notif input vide -- cgit v1.2.3