From f977313ff095a10478291334109d9aae40528a34 Mon Sep 17 00:00:00 2001 From: polo Date: Thu, 18 Sep 2025 17:26:24 +0200 Subject: =?UTF-8?q?gestion=20correcte=20des=20dates=20des=20articles:=20UT?= =?UTF-8?q?C=20c=C3=B4t=C3=A9=20serveur,=20locale=20c=C3=B4t=C3=A9=20clien?= =?UTF-8?q?t=20+=20date=20UTC=20dans=20l'attribut=20date-utc?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/js/main.js | 142 ++++++++++++++++++++++++++++----------------------- public/js/tinymce.js | 7 +-- 2 files changed, 82 insertions(+), 67 deletions(-) (limited to 'public') diff --git a/public/js/main.js b/public/js/main.js index 2936ea0..d2f8876 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -29,7 +29,7 @@ function copyInClipBoard(link){ alert('Cette adresse a été copiée dans le presse-papier:\n\n' + link); } -function toastNotify(message) { +function toastNotify(message){ var toast = document.getElementById('toast'); toast.textContent = message; toast.className = 'toast show'; @@ -37,7 +37,15 @@ function toastNotify(message) { } -document.addEventListener('DOMContentLoaded', () => { // pour pouvoir attraper les balises +// exécuté à la fin du chargement de la page +document.addEventListener('DOMContentLoaded', () => { + + // détection des dates et conversion à l'heure locale + document.querySelectorAll('.local_date').forEach(function(element){ + const utc_date = element.getAttribute('date-utc'); // forme: 2025-10-10T12:17:00+00:00 + element.innerText = toFormatedLocalDate(utc_date); + }); + // ouvrir/fermer les sous-menus avec écran tactile document.querySelectorAll('.sub-menu-toggle').forEach(button => { button.addEventListener('click', e => { @@ -108,8 +116,7 @@ function switchPositions(article_id, direction) }) .then(response => response.json()) .then(data => { - if(data.success) - { + if(data.success){ if(direction == 'down'){ current_article.parentElement.insertBefore(other_article, current_article); console.log('Inversion réussie'); @@ -119,12 +126,11 @@ function switchPositions(article_id, direction) console.log('Inversion réussie'); } else{ - console.error('Échec de l\'inversion'); + console.error("Échec de l'inversion"); } } - else { - - console.error('Échec de l\'inversion'); + else{ + console.error("Échec de l'inversion"); } }) .catch(error => { @@ -132,14 +138,42 @@ function switchPositions(article_id, direction) }); } -function changeDate(id_date) +function closeInput(id) +{ + const date_span = document.getElementById(id); + const date_input = document.getElementById('input-' + id); + const date_label = document.getElementById('label-' + id); + + date_span.classList.remove('hidden'); + date_input.remove(); + date_label.remove(); + document.querySelector(`#edit-${id}`).classList.remove('hidden'); + document.querySelector(`#cancel-${id}`).classList.add('hidden'); + document.querySelector(`#submit-${id}`).classList.add('hidden'); +} + +function findParentByTagName(element, tag_name){ + while(element !== null){ + if(element.tagName === tag_name.toUpperCase()){ // tagName est en majuscules + return element; + } + element = element.parentElement; + } + return null; +} + + +/* -- fonctions spécifiques à la gestion des dates -- */ + +function openDatetimeLocalInput(id_date) { const real_id = 'i' + id_date.slice(1); const date_span = document.getElementById(id_date); // = - var old_date = date_span.innerHTML; - - old_date = dateToISO(old_date); + /*var old_date = date_span.innerHTML;*/ + let old_date = new Date(date_span.getAttribute('date-utc')); + old_date = forInputTypeDatetimeLocal(old_date); // 2025-06-03T17:24 + var label = document.createElement('label'); label.textContent = 'Choisir une date: '; label.id = 'label-' + id_date; @@ -159,39 +193,22 @@ function changeDate(id_date) document.querySelector(`#submit-${id_date}`).classList.remove('hidden'); } -function dateToISO(date){ - // changer "le 28-12-2024 à 23h14" en "2024-12-28T23:14" - let values = date.split(" à "); // 2 parties: date et heure - values[1] = values[1].replace('h', ':'); - values[0] = values[0].replace("le ", ""); - let date_array = values[0].split("-"); // tableau jj-mm-aaaa - return date_array[2] + '-' + date_array[1] + "-" + date_array[0] + "T" + values[1]; -} - -function closeInput(id) -{ - const date_span = document.getElementById(id); - const date_input = document.getElementById('input-' + id); - const date_label = document.getElementById('label-' + id); - - date_span.classList.remove('hidden'); - date_input.remove(); - date_label.remove(); - document.querySelector(`#edit-${id}`).classList.remove('hidden'); - document.querySelector(`#cancel-${id}`).classList.add('hidden'); - document.querySelector(`#submit-${id}`).classList.add('hidden'); -} - function submitDate(id_date) { - var date_input = document.getElementById('input-' + id_date); + const date_input = document.getElementById('input-' + id_date); + const date_span = document.getElementById(id_date); + + let date = new Date(date_input.value); // forme: 2025-02-04T00:24 + let utc_date = date.toISOString(); // forme: 2025-02-03T23:24:00.000Z // cas des nouvelles "news" const params = new URL(document.location).searchParams; // "search" = ? et paramètres, searchParams = objet avec des getters if(params != null && params.get("id")[0] === 'n') { - // modifier la date dans le caché - date_input = updateDate(id_date, date_input); + // modifier la date dans le caché ET l'attribut date-utc + date_span.setAttribute('date-utc', utc_date); // heure UTC + date_span.innerHTML = toFormatedLocalDate(utc_date); // heure locale + closeInput(id_date); return; } @@ -201,44 +218,41 @@ function submitDate(id_date) headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({id: id_date, date: date_input.value}) + body: JSON.stringify({id: id_date, date: utc_date.slice(0, 16)}) // heure UTC }) .then(response => response.json()) .then(data => { - if (data.success) { - // modifier la date dans le caché - date_input = updateDate(id_date, date_input); + if(data.success){ + // modifier la date dans le caché ET l'attribut date-utc + date_span.setAttribute('date-utc', utc_date); // heure UTC + date_span.innerHTML = toFormatedLocalDate(utc_date); // heure locale + closeInput(id_date); } - else { + else{ console.error('Erreur lors de la sauvegarde de la date.'); } }) .catch(error => { console.error('Erreur:', error); }); - } + } } -function updateDate(id_date, date_input){ - var date_span = document.getElementById(id_date); - let date = new Date(date_input.value); - date_span.innerHTML = - 'le ' + String(date.getDate()).padStart(2, '0') + '-' + - String(date.getMonth() + 1).padStart(2, '0') + '-' + - String(date.getFullYear()).padStart(4, '0') + ' à ' + - String(date.getHours()).padStart(2, '0') + 'h' + - String(date.getMinutes()).padStart(2, '0'); - - return date_input; -} +function toFormatedLocalDate(utc_string_date){ // forme: 2025-07-17T13:54:00.000Z ou 2025-02-04T00:24 + const date = new Date(utc_string_date); -function findParentByTagName(element, tag_name){ - while(element !== null){ - if(element.tagName === tag_name.toUpperCase()){ // tagName est en majuscules - return element; - } - element = element.parentElement; - } - return null; + // donne l'heure locale, forme: le 10-10-2025 à 14:17 + return 'le ' + String(date.getDate()).padStart(2, '0') + + '-' + String(date.getMonth() + 1).padStart(2, '0') // mois comptés à partir de 0 !! + + '-' + date.getFullYear() + + ' à ' + String(date.getHours()).padStart(2, '0') + + 'h' + String(date.getMinutes()).padStart(2, '0'); +} +function forInputTypeDatetimeLocal(date){ // forme: 2024-12-28T23:14 + return date.getFullYear() + + '-' + String(date.getMonth() + 1).padStart(2, '0') // mois comptés à partir de 0 !! + + '-' + String(date.getDate()).padStart(2, '0') + + 'T' + String(date.getHours()).padStart(2, '0') + + ':' + String(date.getMinutes()).padStart(2, '0'); } \ No newline at end of file diff --git a/public/js/tinymce.js b/public/js/tinymce.js index 81ba8ea..97ecad8 100644 --- a/public/js/tinymce.js +++ b/public/js/tinymce.js @@ -292,7 +292,6 @@ class Editor } submit(clone = null){ - //var editor; var content; const params = new URL(document.location).searchParams; // "search" = ? et paramètres, searchParams = objet avec des getters // à comparer avec: new URLSearchParams(window.location.search); @@ -312,9 +311,12 @@ class Editor if(first_letter === 'i'){ id_from_builder = element.id; } + else if(first_letter === 'd'){ + content[first_letter] = element.getAttribute('date-utc'); + } } }) - content['d'] = dateToISO(content['d']); + content['d'] = new Date(content['d']).toISOString().slice(0, 16); // date UTC, format: 2025-09-18T15:21 } // champs à remplir des nouvelles "news" else if(window.Config.page === 'article' && params != null && params.get("id")[0] === 'n'){ @@ -324,7 +326,6 @@ class Editor // dans les autres cas, on doit pouvoir récupérer l'éditeur else{ // l'éditeur correspond à l'article OU si page = "article" à un élément: titre, aperçu, article - //editor = editors[id]; if(!this.tiny_instance){ console.error("Éditeur non trouvé pour l'article:", this.id); return; -- cgit v1.2.3