modification d'une URL page Menu et chemin, htmlspecialchars sur les URL du menu à l'affichage

4 files changed, 132 insertions, 11 deletions

diff --git a/public/assets/save-nb.svg b/public/assets/save-nb.svg
new file mode 100644
index 0000000..f7fe755
--- /dev/null
+++ b/public/assets/save-nb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 19V13H17V19H19V7.82843L16.1716 5H5V19H7ZM4 3H17L21 7V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM9 15V19H15V15H9Z"></path></svg>
\ No newline at end of file
diff --git a/public/assets/save.svg b/public/assets/save.svg
new file mode 100644
index 0000000..f2405a5
--- /dev/null
+++ b/public/assets/save.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 24 24"
+   fill="currentColor"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="save.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="5.5"
+     inkscape:cx="16.090909"
+     inkscape:cy="19.545455"
+     inkscape:window-width="1330"
+     inkscape:window-height="1032"
+     inkscape:window-x="586"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     style="fill:#dd3333;stroke:#dd3333;stroke-width:0.687187"
+     d="M 3.7700827,20.814384 C 3.5436283,20.721841 3.2752699,20.427615 3.1737307,20.160547 3.0560503,19.851024 3.007568,16.786203 3.0400116,11.70747 3.0870587,4.3427109 3.1154561,3.7154214 3.415392,3.4154406 3.712924,3.1178639 4.2867777,3.0867003 10.324483,3.0402361 l 6.584608,-0.050673 2.052117,2.0601995 2.052117,2.0601994 -0.05212,6.575086 c -0.04777,6.027435 -0.07915,6.602112 -0.37665,6.899564 -0.300533,0.300481 -0.91908,0.327199 -8.363636,0.361255 C 7.6163,20.966927 4.0059136,20.910757 3.7700807,20.814384 Z M 7,16 v -3 h 5 5 v 3 3 h 1 1 V 13.322457 7.6449149 L 17.686369,6.3224575 16.372737,5 H 10.686369 5 v 7 7 h 1 1 z m 8,1 V 15 H 12 9 v 2 2 h 3 3 z"
+     id="path2" />
+</svg>
diff --git a/public/css/menu.css b/public/css/menu.css
index 62e6623..57d842a 100644
--- a/public/css/menu.css
+++ b/public/css/menu.css
@@ -70,7 +70,7 @@
         vertical-align: middle;
         border: 2px transparent solid;
 }
-.menu #location:hover, .menu input[type=submit]:hover, .move_entry_icon:hover
+.menu #location:hover, .menu input[type=submit]:hover, .menu .move_entry_icon:hover
 {
         background-color: yellow;
         border-radius: 4px;
@@ -106,8 +106,17 @@
 {
         margin: 5px;
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
 }
+.menu .url
+{
+        text-wrap: nowrap;
+}
+.menu .url input[type=url]
+{
+        width: 50%;
+}
 
 @media screen and (min-width: 80rem) {
         i{}
diff --git a/public/js/menu.js b/public/js/menu.js
index 8f1f326..ef58c42 100644
--- a/public/js/menu.js
+++ b/public/js/menu.js
@@ -122,7 +122,7 @@ function checkMenuEntry(page_id){
         const checkbox = clicked_menu_entry.querySelector("input");
         let color;
 
-        fetch('index.php?menu_edit=displayInMenu', {
+        fetch('index.php?menu_edit=display_in_menu', {
         method: 'POST',
         headers: {
         'Content-Type': 'application/json'
@@ -131,16 +131,14 @@ function checkMenuEntry(page_id){
     })
     .then(response => response.json())
     .then(data => {
-        if(data.success)
-        {
+        if(data.success){
                 color = checkbox.checked ? "#ff1d04" : "grey";
                 clicked_menu_entry.querySelector("button").style.color = color;
 
                 nav_zone.innerHTML = '';
                 nav_zone.insertAdjacentHTML('afterbegin', data.nav);
         }
-        else {
-
+        else{
             console.error('Échec de l\'inversion');
         }
     })
@@ -149,13 +147,89 @@ function checkMenuEntry(page_id){
     });
 }
 
-
+// seul la modification des URL est possible pour l'instant, les noms des entrées de menu attendront
 function editUrlEntry(page_id){
-        const selected_div = document.getElementById(page_id);
-        console.log(selected_div.id);
+    const parent_div = document.getElementById(page_id);
+    const url_input = parent_div.querySelector('.url').querySelector('input').value;
+    
+    fetch('index.php?menu_edit=edit_url_entry', {
+        method: 'POST',
+        headers: {
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id: page_id, url_input: url_input })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success){
+            findParentByTagName(document.getElementById('m_' + page_id), 'a').href = data.url_input; // MAJ menu
+            toastNotify("Nouvelle adresse enregistrée avec succès")
+        }
+        else{
+            toastNotify("Erreur rencontrée par le serveur, changements non pris en compte");
+            console.error("Erreur rencontrée par le serveur, changements non pris en compte");
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
 }
 
-function deleteUrlEntry(page_id){
+
+
+// code à recycler pour pouvoir modifier le nom de l'entrée de menu correspondant aux liens
+/*function editUrlEntry(page_id){
+        const parent_div = document.getElementById(page_id);
+    parent_div.querySelector('i').classList.add('hidden');
+    parent_div.querySelector('.url').querySelector('input').classList.remove('hidden');
+    parent_div.querySelector('#edit-i' + page_id).classList.add('hidden');
+    parent_div.querySelector('#delete-i' + page_id).querySelector('input[type=image]').classList.add('hidden');
+    parent_div.querySelector('#cancel-i' + page_id).querySelector('button').classList.remove('hidden');
+    parent_div.querySelector('#submit-i' + page_id).querySelector('input[type=submit]').classList.remove('hidden');
+}
+function cancelUrlEntry(page_id){
+    const parent_div = document.getElementById(page_id);
+    parent_div.querySelector('.url').querySelector('input').value = parent_div.querySelector('i').textContent; // textContent (contrairement à innerHTML) ne transforme pas les & en entités HTML
+    closeUrlEntry(page_id, parent_div);
+}
+function submitUrlEntry(page_id){
+    const parent_div = document.getElementById(page_id);
+    const url_input = parent_div.querySelector('.url').querySelector('input').value;
+
+    fetch('index.php?menu_edit=edit_url_entry', {
+        method: 'POST',
+        headers: {
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id: page_id, url_input: url_input })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success){
+            parent_div.querySelector('i').innerHTML = data.url_input; // MAJ <i>
+            findParentByTagName(document.getElementById('m_' + page_id), 'a').href = data.url_input; // MAJ menu
+            closeUrlEntry(page_id, parent_div);
+        }
+        else{
+            toastNotify("Erreur rencontrée par le serveur, changements non pris en compte");
+            console.error("Erreur rencontrée par le serveur, changements non pris en compte");
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
+function closeUrlEntry(page_id, parent_div){
+    parent_div.querySelector('i').classList.remove('hidden');
+    parent_div.querySelector('.url').querySelector('input').classList.add('hidden');
+    parent_div.querySelector('#edit-i' + page_id).classList.remove('hidden');
+    parent_div.querySelector('#delete-i' + page_id).querySelector('input[type=image]').classList.remove('hidden');
+    parent_div.querySelector('#cancel-i' + page_id).querySelector('button').classList.add('hidden');
+    parent_div.querySelector('#submit-i' + page_id).querySelector('input[type=submit]').classList.add('hidden');
+}*/
+
+/*function deleteUrlEntry(page_id){
         const selected_div = document.getElementById(page_id);
         console.log(selected_div.id);
-}
\ No newline at end of file
+}*/
+