modification des titres, aperçus et dates des news

3 files changed, 145 insertions, 44 deletions

diff --git a/public/css/main.css b/public/css/main.css
index a75b8cd..50c2173 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -56,22 +56,39 @@ article .logo2
         overflow: hidden;
 }
 
-article .action_icon
+.action_icon
 {
         width: 24px;
-        vertical-align: middle;
+        vertical-align: bottom;
         border: white 2px solid; /* invisible */
 }
-article .action_icon:hover
+button .action_icon
+{
+        border: none;
+}
+.action_icon:hover
 {
         background-color: #ffff00;
         border-radius: 4px;
         border: lightgrey 2px outset;
 }
-.article_title_zone
+button .action_icon:hover
+{
+        border: none;
+}
+
+.button_zone
 {
         display: flex;
-        justify-content: space-between;
+}
+
+.share
+{
+        float: right;
+}
+.article_title_zone
+{
+        padding: 10px;
 }
 .under_an_article
 {
@@ -82,8 +99,8 @@ article .action_icon:hover
 .under_an_article img
 {
         width: 24px;
-        vertical-align: middle;
         margin-right: 5px;
+        vertical-align: middle;
 }
 .article_admin_zone
 {
diff --git a/public/js/main.js b/public/js/main.js
index d985b71..1351fea 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -63,12 +63,93 @@ function switchPositions(articleId, direction)
                                 console.log('Inversion réussie');
                         }
                         else{
-                                console.log('Échec de l\'inversion');
+                                console.error('Échec de l\'inversion');
                         }
         }
         else {
 
-            console.log('Échec de l\'inversion');
+            console.error('Échec de l\'inversion');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
+
+function changeDate(id_date)
+{
+        const real_id = 'i' + id_date.slice(1);
+        const date_span = document.getElementById(id_date); // = <span>
+        var old_date = date_span.innerHTML;
+
+        // changer "le 28-12-2024 à 23h14" en "2024-12-28T23:14"
+        let values = old_date.split(" à "); // 2 parties: date et heure
+        values[1] = values[1].replace('h', ':');
+        values[0] = values[0].replace("le ", "");
+        let date = values[0].split("-"); // tableau jj-mm-aaaa
+    old_date = date[2] + '-' + date[1] + "-" + date[0] + "T" + values[1];
+
+        var label = document.createElement('label');
+        label.textContent = 'Choisir une date: ';
+        label.id = 'label-' + id_date;
+
+        var input = document.createElement('input');
+        input.type = 'datetime-local';
+    input.value = old_date;
+    input.id = 'input-' + id_date;
+
+    var parent = date_span.parentElement;
+    parent.appendChild(label)
+    parent.appendChild(input);
+        
+        date_span.classList.add('hidden');
+    document.querySelector(`#edit-${id_date}`).classList.add('hidden');
+    document.querySelector(`#cancel-${id_date}`).classList.remove('hidden');
+    document.querySelector(`#submit-${id_date}`).classList.remove('hidden');
+}
+
+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)
+{
+        const date_input = document.getElementById('input-' + id_date);
+
+    fetch('index.php?action=date_submit', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({id: id_date, date: date_input.value})
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+                // modifier la date dans le <span> caché
+                const 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');
+            
+            closeInput(id_date);
+        }
+        else {
+            console.error('Erreur lors de la sauvegarde de la date.');
         }
     })
     .catch(error => {
diff --git a/public/js/tinymce.js b/public/js/tinymce.js
index 8aeaac8..d3c9739 100644
--- a/public/js/tinymce.js
+++ b/public/js/tinymce.js
@@ -1,12 +1,14 @@
 let editors = {};
 
-function openEditor(articleId, page = '') {
+function openEditor(id, page = '') {
+    const real_id = 'i' + id.slice(1);
+
     // Récupérer et sauvegarder le contenu d'origine de l'article
-    const articleContent = document.getElementById(articleId).innerHTML;
-    document.getElementById(articleId).setAttribute('data-original-content', articleContent);
+    const articleContent = document.getElementById(id).innerHTML;
+    document.getElementById(id).setAttribute('data-original-content', articleContent);
 
     tinymce.init({
-        selector: `#${articleId}`,
+        selector: `#${id}`,
         language: 'fr_FR', // télécharger des paquets de langue ici: https://www.tiny.cloud/get-tiny/language-packages/
         language_url: 'js/tinymce-langs/fr_FR.js', // ou installer tweeb/tinymce-i18n avec composer
         license_key: 'gpl',
@@ -18,19 +20,18 @@ function openEditor(articleId, page = '') {
         statusbar: false,
         setup: function (editor) {
             editor.on('init', function () {
-                editors[articleId] = editor;
+                editors[id] = editor;
                 
                 // boutons "Modifier", "Supprimer", "déplacer vers le haut", "déplacer vers le bas", "Annuler" et "Soumettre"
-                document.querySelector(`#edit-${articleId}`).classList.add('hidden');
-                document.querySelector(`#delete-${articleId}`).classList.add('hidden');
+                document.querySelector(`#edit-${id}`).classList.add('hidden');
+                document.querySelector(`#cancel-${id}`).classList.remove('hidden');
+                document.querySelector(`#submit-${id}`).classList.remove('hidden');
+                document.querySelector(`#delete-${real_id}`).classList.add('hidden');
                 // boutons absents page article
                 if(page != 'article'){
-                    document.querySelector(`#position_up-${articleId}`).classList.add('hidden');
-                    document.querySelector(`#position_down-${articleId}`).classList.add('hidden');
+                    document.querySelector(`#position_up-${id}`).classList.add('hidden');
+                    document.querySelector(`#position_down-${id}`).classList.add('hidden');
                 }
-                document.querySelector(`#cancel-${articleId}`).classList.remove('hidden');
-                document.querySelector(`#submit-${articleId}`).classList.remove('hidden');
-                
             });
         },
         // upload d'image
@@ -59,10 +60,10 @@ function openEditor(articleId, page = '') {
     });
 
     // Remplacer le contenu de l'article par l'éditeur
-    document.getElementById(articleId).innerHTML = articleContent;
+    document.getElementById(id).innerHTML = articleContent;
 }
 
-function deleteArticle(articleId, page = '') {
+function deleteArticle(id, page = '') {
     if (confirm('Voulez-vous vraiment supprimer cet article ?'))
     {
         // Envoyer une requête au serveur pour supprimer l'article
@@ -71,7 +72,7 @@ function deleteArticle(articleId, page = '') {
             headers: {
             'Content-Type': 'application/json'
             },
-            body: JSON.stringify({ id: articleId })
+            body: JSON.stringify({ id: id })
         })
         .then(response => response.json())
         .then(data => {
@@ -85,7 +86,7 @@ function deleteArticle(articleId, page = '') {
                 }
                 else{
                     // Supprimer l'article du DOM
-                    const articleElement = document.getElementById(articleId);
+                    const articleElement = document.getElementById(id);
                     articleElement.parentElement.parentElement.remove(); // <article> est deux niveau au dessus
                 }
             }
@@ -99,40 +100,42 @@ function deleteArticle(articleId, page = '') {
     }
 }
 
-function closeEditor(articleId, page = '', display_old = true)
+function closeEditor(id, page = '', display_old = true)
 {
+    const real_id = 'i' + id.slice(1);
+
     // Fermer l'éditeur
-    tinymce.remove(`#${articleId}`);
-    delete editors[articleId];
+    tinymce.remove(`#${id}`);
+    delete editors[id];
     
     // Restaurer le contenu d'origine de l'article
     if(display_old){
-        const originalContent = document.getElementById(articleId).getAttribute('data-original-content');
-        document.getElementById(articleId).innerHTML = originalContent;
+        const originalContent = document.getElementById(id).getAttribute('data-original-content');
+        document.getElementById(id).innerHTML = originalContent;
     }
 
     // boutons "Modifier", "Supprimer", "déplacer vers le haut", "déplacer vers le bas", "Annuler" et "Soumettre"
-    document.querySelector(`#edit-${articleId}`).classList.remove('hidden');
-    document.querySelector(`#delete-${articleId}`).classList.remove('hidden');
+    document.querySelector(`#edit-${id}`).classList.remove('hidden');
+    document.querySelector(`#cancel-${id}`).classList.add('hidden');
+    document.querySelector(`#submit-${id}`).classList.add('hidden');
+    document.querySelector(`#delete-${real_id}`).classList.remove('hidden');
     // boutons absents page article
     if(page != 'article'){
-        document.querySelector(`#position_up-${articleId}`).classList.remove('hidden');
-        document.querySelector(`#position_down-${articleId}`).classList.remove('hidden');
-    }
-    document.querySelector(`#cancel-${articleId}`).classList.add('hidden');
-    document.querySelector(`#submit-${articleId}`).classList.add('hidden');
+        document.querySelector(`#position_up-${id}`).classList.remove('hidden');
+        document.querySelector(`#position_down-${id}`).classList.remove('hidden');
+    }    
 }
 
-function submitArticle(articleId, page = '') {
+function submitArticle(id, page = '') {
     // Récupérer l'éditeur correspondant à l'article
-    const editor = editors[articleId];
-    if (!editor) {
-        console.error('Éditeur non trouvé pour l\'article:', articleId);
+    const editor = editors[id];
+    if(!editor) {
+        console.error('Éditeur non trouvé pour l\'article:', id);
         return;
     }
     
     // Récupérer le contenu de l'éditeur
-    const newContent = editor.getContent();
+    const html = editor.getContent();
 
     // Envoi AJAX au serveur
     fetch('index.php?action=editor_submit', {
@@ -140,14 +143,14 @@ function submitArticle(articleId, page = '') {
         headers: {
             'Content-Type': 'application/json'
         },
-        body: JSON.stringify({id: articleId, content: newContent})
+        body: JSON.stringify({id: id, content: html})
     })
     .then(response => response.json())
     .then(data => {
         if (data.success) {
             // Fermer l'éditeur et mettre à jour le contenu de l'article
-            closeEditor(articleId, page, false);
-            document.getElementById(articleId).innerHTML = newContent;
+            closeEditor(id, page, false);
+            document.getElementById(id).innerHTML = html;
         }
         else {
             alert('Erreur lors de la sauvegarde de l\'article.');