page menu et chemins, partie3

10 files changed, 473 insertions, 150 deletions

diff --git a/public/css/menu.css b/public/css/menu.css
index cce1d43..5016610 100644
--- a/public/css/menu.css
+++ b/public/css/menu.css
@@ -4,11 +4,19 @@
 {
         padding: 0 20px;
 }
+.menu_edit_entry
+{
+        margin-left: 29px;
+}
 .menu img
 {
         width: 20px;
         vertical-align: middle;
 }
+.menu form
+{
+        display: inline;
+}
 
 /* explications pour l'utiisateur */
 .menu aside
@@ -58,6 +66,7 @@ input
 {
         background-color: white;
         padding: 10px;
+        margin-top: 10px;
 }
 .menu .new_entry_buttons p
 {
@@ -65,8 +74,5 @@ input
 }
 
 @media screen and (min-width: 80rem) {
-        i
-        {
-                /*display: none;*/
-        }
+        i{}
 }
\ No newline at end of file
diff --git a/public/js/main.js b/public/js/main.js
index f74c670..e278325 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -202,97 +202,4 @@ function findParent(element, tag_name){
         element = element.parentElement;
     }
     return null;
-}
-
-
-/* page Menu et chemins */
-function moveOneLevelUp(){}
-function moveOneLevelDown(){}
-
-function switchMenuPositions(page_id, direction)
-{
-        const nav_zone = document.getElementById("nav_zone"); // parent de <nav>
-        const clicked_menu_entry = document.getElementById(page_id); // div parente du bouton
-        var other_entry = null;
-
-        // pas bon
-        if(direction == 'down'){
-                other_entry = clicked_menu_entry.nextElementSibling;
-        }
-        else if(direction == 'up'){
-                other_entry = clicked_menu_entry.previousElementSibling;
-        }
-
-        if(other_entry == null){
-                console.log('Inversion impossible');
-                return;
-        }
-        
-    fetch('index.php?menu_edit=switch_positions', {
-        method: 'POST',
-        headers: {
-        'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ id1: clicked_menu_entry.id, id2: other_entry.id })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if(data.success)
-        {
-                if(direction == 'down'){
-                                clicked_menu_entry.parentElement.insertBefore(other_entry, clicked_menu_entry);
-                                console.log('Inversion réussie');
-                        }
-                        else if(direction == 'up'){
-                                other_entry.parentElement.insertBefore(clicked_menu_entry, other_entry);
-                                console.log('Inversion réussie');
-                        }
-                        else{
-                                console.error('Échec de l\'inversion');
-                        }
-
-                nav_zone.innerHTML = '';
-                nav_zone.insertAdjacentHTML('afterbegin', data.nav);
-        }
-        else {
-
-            console.error('Échec de l\'inversion');
-        }
-    })
-    .catch(error => {
-        console.error('Erreur:', error);
-    });
-}
-
-function checkMenuEntry(page_id){
-        const nav_zone = document.getElementById("nav_zone"); // parent de <nav>
-        const clicked_menu_entry = document.getElementById(page_id); // div parente du bouton
-        const checkbox = clicked_menu_entry.querySelector("input");
-        let color;
-
-        fetch('index.php?menu_edit=displayInMenu', {
-        method: 'POST',
-        headers: {
-        'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ id: clicked_menu_entry.id, checked: checkbox.checked })
-    })
-    .then(response => response.json())
-    .then(data => {
-        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 {
-
-            console.error('Échec de l\'inversion');
-        }
-    })
-    .catch(error => {
-        console.error('Erreur:', error);
-    });
 }
\ No newline at end of file
diff --git a/public/js/menu.js b/public/js/menu.js
new file mode 100644
index 0000000..a864597
--- /dev/null
+++ b/public/js/menu.js
@@ -0,0 +1,240 @@
+// flèche gauche <=: position = position du parent + 1, parent = grand-parent, recalculer les positions
+function moveOneLevelUp(page_id)
+{
+        const nav_zone = document.getElementById("nav_zone"); // parent de <nav>
+        const menu_edit_buttons = document.getElementById("menu_edit_buttons"); // div englobant le html généré par MenuBuilder
+
+        fetch('index.php?menu_edit=move_one_level_up', {
+        method: 'POST',
+        headers: {
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id: page_id })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success)
+        {
+                console.log(data);
+                        // affichage
+                        nav_zone.innerHTML = '';
+                nav_zone.insertAdjacentHTML('afterbegin', data.nav);
+                menu_edit_buttons.innerHTML = '';
+                        menu_edit_buttons.insertAdjacentHTML('afterbegin', data.menu_buttons);
+        }
+        else {
+
+            console.error('Échec du déplacement');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
+
+// flèche droite =>: position = nombre d'éléments de la fraterie + 1, l'élément précédent devient le parent
+function moveOneLevelDown(page_id)
+{
+        const nav_zone = document.getElementById("nav_zone"); // parent de <nav>
+        const menu_edit_buttons = document.getElementById("menu_edit_buttons"); // div englobant le html généré par MenuBuilder
+
+        fetch('index.php?menu_edit=move_one_level_down', {
+        method: 'POST',
+        headers: {
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id: page_id })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success)
+        {
+                console.log(data);
+                        // affichage
+                        nav_zone.innerHTML = '';
+                nav_zone.insertAdjacentHTML('afterbegin', data.nav);
+                menu_edit_buttons.innerHTML = '';
+                        menu_edit_buttons.insertAdjacentHTML('afterbegin', data.menu_buttons);
+        }
+        else {
+            console.error('Échec du déplacement');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+    
+        /*const element = document.getElementById(page_id); // div parente du bouton cliqué
+        let previous_element = element.previousElementSibling;
+        
+        if(previous_element != null)
+        {
+                // si l'element précédent n'a pas de chemin relatif, donc est une URL, on vérifie le précédent également
+                if(previous_element.querySelector(".path") == null){
+                        let test_previous = previous_element;
+                        while(test_previous.querySelector(".url") != null){
+                                console.log(test_previous);
+                                //if()
+                                test_previous = test_previous.previousElementSibling;
+                                if(test_previous == null){
+                                        console.log("pas d'élément précédent");
+                                        return;
+                                }
+                                console.log(test_previous);
+                        }
+                        previous_element = test_previous;
+                }
+
+                fetch('index.php?menu_edit=move_one_level_down', {
+                method: 'POST',
+                headers: {
+                'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ id: element.id })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if(data.success)
+                {
+                        //
+
+                                // menu régénéré
+                        nav_zone.innerHTML = '';
+                        nav_zone.insertAdjacentHTML('afterbegin', data.nav);
+                }
+                else {
+
+                    console.error('Échec de l\'inversion');
+                }
+            })
+            .catch(error => {
+                console.error('Erreur:', error);
+            });
+                
+                // nouveau parent
+                let level_div = previous_element.querySelector(".level");
+                if(level_div == null){
+                        // créer une <div class="level">
+                        level_div = document.createElement("div");
+                        level_div.classList.add("level");
+                        previous_element.appendChild(level_div);
+                }
+
+                // déplacement
+                level_div.appendChild(element);
+
+                // marges
+                let margin_left = parseInt(element.style.marginLeft);
+                margin_left += 29;
+                element.style.marginLeft = String(margin_left) + "px";
+
+                // MAJ des chemins affichés si c'est un chemin relatif (les liens URL ne peuvent avoir d'enfants)
+                const element_path = element.querySelector(".path");
+                if(element_path != null){
+                        const previous_element_path = previous_element.querySelector(".path");
+                        element_path.innerHTML = previous_element_path.innerHTML + "/" + element_path.innerHTML.split("/").slice(-1);
+
+                        // même chose pour tous les enfants sauf les URL vers l'extérieur
+                        if(element.querySelector(".level") != null){
+                                element.querySelector(".level").querySelectorAll(".path").forEach( (one_elem) => {
+                                        const parent_elem_path = one_elem.parentNode.parentNode.parentNode.querySelector(".path"); // => div de l'élém => div class level => div du parent
+                                        const end_of_path = one_elem.innerHTML.split("/").slice(-1);
+                                        one_elem.innerHTML = parent_elem_path.innerHTML + "/" + end_of_path[0];
+                                });
+                        }
+                }
+
+                // dernier problème à corriger: le parent est une URL vers l'extérieur
+        }
+        else{
+                // ne rien faire
+                console.log("pas d'élément précédent");
+        }*/
+}
+
+function switchMenuPositions(page_id, direction)
+{
+        const nav_zone = document.getElementById("nav_zone"); // parent de <nav>
+        const clicked_menu_entry = document.getElementById(page_id); // div parente du bouton
+        let other_entry = null;
+
+        // pas bon
+        if(direction == 'down'){
+                other_entry = clicked_menu_entry.nextElementSibling;
+        }
+        else if(direction == 'up'){
+                other_entry = clicked_menu_entry.previousElementSibling;
+        }
+
+        if(other_entry == null){
+                console.log('Inversion impossible');
+                return;
+        }
+        
+    fetch('index.php?menu_edit=switch_positions', {
+        method: 'POST',
+        headers: {
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id1: clicked_menu_entry.id, id2: other_entry.id })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success)
+        {
+                if(direction == 'down'){
+                                clicked_menu_entry.parentElement.insertBefore(other_entry, clicked_menu_entry);
+                        }
+                        else if(direction == 'up'){
+                                other_entry.parentElement.insertBefore(clicked_menu_entry, other_entry);
+                        }
+                        else{
+                                console.error('Échec de l\'inversion');
+                        }
+
+                        // menu régénéré
+                nav_zone.innerHTML = '';
+                nav_zone.insertAdjacentHTML('afterbegin', data.nav);
+        }
+        else {
+
+            console.error('Échec de l\'inversion');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
+
+function checkMenuEntry(page_id){
+        const nav_zone = document.getElementById("nav_zone"); // parent de <nav>
+        const clicked_menu_entry = document.getElementById(page_id); // div parente du bouton
+        const checkbox = clicked_menu_entry.querySelector("input");
+        let color;
+
+        fetch('index.php?menu_edit=displayInMenu', {
+        method: 'POST',
+        headers: {
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id: clicked_menu_entry.id, checked: checkbox.checked })
+    })
+    .then(response => response.json())
+    .then(data => {
+        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 {
+
+            console.error('Échec de l\'inversion');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
\ No newline at end of file
diff --git a/src/controller/ajax.php b/src/controller/ajax.php
index 9d1cc42..a20bd87 100644
--- a/src/controller/ajax.php
+++ b/src/controller/ajax.php
@@ -170,7 +170,8 @@ if($_SERVER['CONTENT_TYPE'] === 'application/json' && isset($_GET['action']))
 }
 
 // détection des requêtes d'upload d'image de tinymce
-if(strpos($_SERVER['CONTENT_TYPE'], 'multipart/form-data') !== false && isset($_GET['action']) && $_GET['action'] === 'upload_image'){
+if(strpos($_SERVER['CONTENT_TYPE'], 'multipart/form-data') !== false && isset($_GET['action']) && $_GET['action'] === 'upload_image')
+{
         if (isset($_FILES['file'])) {
         $file = $_FILES['file'];
         $dest = 'images/';
@@ -211,6 +212,90 @@ if($_SERVER['CONTENT_TYPE'] === 'application/json' && isset($_GET['menu_edit']))
         $json = json_decode($data, true);
         Director::$menu_data = new Menu($entityManager);
 
+        // flèche gauche <=: position = position du parent + 1, parent = grand-parent, recalculer les positions
+        if($_GET['menu_edit'] === 'move_one_level_up' && isset($json['id'])){
+                $id = $json['id'];
+                $page = Director::$menu_data->findPageById((int)$id);
+
+        $parent = $page->getParent(); // peut être null
+        if($parent === null){
+            // 1er niveau: ne rien faire
+            echo json_encode(['success' => false]);
+            die;
+        }
+        // BDD
+        else{
+            $page->setPosition($parent->getPosition() + 1); // nouvelle position
+
+            // 2ème niveau: le parent devient $menu_data, puis null après tri
+            if($parent->getParent() === null){
+                // connexion dans les deux sens
+                $page->setParent(Director::$menu_data); // => pour la persistance
+                
+                //Director::$menu_data->addChild($page); // => pour sortChildren
+                $page->getParent()->addChild($page); // => pour sortChildren
+                //Director::$menu_data->sortChildren(true); // positions décaléees des nouveaux petits frères
+                $page->getParent()->sortChildren(true); // positions décaléees des nouveaux petits frères
+                $page->setParent(null);
+
+                // affichage
+                $page->setPagePath($page->getEndOfPath());
+                $page->fillChildrenPagePath();
+            }
+            // 3ème niveau et plus
+            else{
+                $page->setParent($parent->getParent()); // nouveau parent
+                $page->getParent()->addChild($page); // => pour sortChildren
+                $page->getParent()->sortChildren(true); // positions décaléees des nouveaux petits frères
+                $page->fillChildrenPagePath($page->getParent()->getPagePath());
+            }
+            //$parent->sortChildren(true); // positions des enfants restants, inutile si la fonction est récursive?
+            $entityManager->flush();
+            
+            // affichage
+            $parent->removeChild($page);
+            $nav_builder = new NavBuilder();
+                $menu_builder = new MenuBuilder(null, false);
+                        echo json_encode(['success' => true, 'nav' => $nav_builder->render(), 'menu_buttons' => $menu_builder->render()]);
+                        die;
+        }
+        }
+
+        // flèche droite =>: position = nombre d'éléments de la fraterie + 1, l'élément précédent devient le parent
+        if($_GET['menu_edit'] === 'move_one_level_down' && isset($json['id'])){
+                $id = $json['id'];
+                $page = Director::$menu_data->findPageById((int)$id);
+
+        $parent = $page->getParent(); // peut être null
+        if($parent == null){
+            $parent = Director::$menu_data;
+        }
+
+        // BDD
+        $parent->sortChildren(true); // trie et réindexe par sécurité: 1, 2, 3...
+        if($page->getPosition() > 1){
+            foreach($parent->getChildren() as $child){
+                //echo $child->getPageName();
+                if($child->getPosition() === $page->getPosition() - 1){
+                    $page->setParent($child);
+                    break;
+                }
+            }
+            $page->setPosition(count($page->getParent()->getChildren()) + 1);
+        }
+        $entityManager->flush();
+
+        // affichage
+                $parent->removeChild($page);
+        $page->getParent()->addChild($page);
+        $page->fillChildrenPagePath($page->getParent()->getPagePath()); // variable non mappée $page_path
+        $nav_builder = new NavBuilder();
+                $menu_builder = new MenuBuilder(null, false);
+
+                echo json_encode(['success' => true, 'nav' => $nav_builder->render(), 'menu_buttons' => $menu_builder->render()]);
+                die;
+        }
+
         if($_GET['menu_edit'] === 'switch_positions' && isset($json['id1']) && isset($json['id2']))
         {
         $id1 = $json['id1'];
diff --git a/src/controller/installation.php b/src/controller/installation.php
index ff168eb..4aaa4e0 100644
--- a/src/controller/installation.php
+++ b/src/controller/installation.php
@@ -77,12 +77,12 @@ HTACCESS;
 function makeStartPage(EntityManager $entityManager){
         /* -- table page -- */
         // paramètres: name_page, end_of_path, reachable, in_menu, position, parent
-        $accueil = new Page('Accueil', 'accueil', true, true, 1, NULL);
-        $connection = new Page('Connexion', 'connexion', true, false, NULL, NULL);
-        $article = new Page('Article', 'article', true, false, NULL, NULL);
-        $menu_paths = new Page("Menu et chemins", 'menu_chemins', true, false, NULL, NULL);
-        $edit_page = new Page("Modification d'une page", 'modif_page', true, false, NULL, NULL);
-        $new_page = new Page('Nouvelle page', 'nouvelle_page', true, false, NULL, NULL);
+        $accueil = new Page('Accueil', 'accueil', true, true, false, 1, NULL);
+        $connection = new Page('Connexion', 'connexion', true, false, false, NULL, NULL);
+        $article = new Page('Article', 'article', true, false, false, NULL, NULL);
+        $menu_paths = new Page("Menu et chemins", 'menu_chemins', true, false, false, NULL, NULL);
+        $edit_page = new Page("Modification d'une page", 'modif_page', true, false, false, NULL, NULL);
+        $new_page = new Page('Nouvelle page', 'nouvelle_page', true, false, false, NULL, NULL);
         
         /* -- table node -- */
         // paramètres: name_node, article_timestamp, attributes, position, parent, page, article
@@ -95,7 +95,7 @@ function makeStartPage(EntityManager $entityManager){
         $head_login = new Node('head', NULL, ["stop" => true, 'css_array' => ['body', 'head', 'nav', 'main'], 'js_array' => ['main']], 1, NULL, $connection, NULL);
         $login = new Node('login', NULL, [], 1, $main, $connection, NULL);
         $head_article = new Node('head', NULL, ['css_array' => ['body', 'head', 'nav', 'main', 'foot'], 'js_array' => ['main']], 1, NULL, $article, NULL);
-        $head_edit_menu = new Node('head', NULL, ['css_array' => ['body', 'head', 'nav', 'main', 'menu'], 'js_array' => ['main']], 1, NULL, $menu_paths, NULL);
+        $head_edit_menu = new Node('head', NULL, ['css_array' => ['body', 'head', 'nav', 'main', 'menu'], 'js_array' => ['main', 'menu']], 1, NULL, $menu_paths, NULL);
         $edit_menu = new Node('menu', NULL, [], 1, $main, $menu_paths, NULL);
 
         /* -- table image -- */
diff --git a/src/controller/post.php b/src/controller/post.php
index 926a5ae..8924686 100644
--- a/src/controller/post.php
+++ b/src/controller/post.php
@@ -5,13 +5,89 @@ declare(strict_types=1);
 
 if($_SERVER['REQUEST_METHOD'] === 'POST' && $_SESSION['admin'] === true)
 {
-    // requêtes AJAX
+    /* -- requêtes non AJAX -- */
+    // page Menu et chemin
+    /*if(isset($_POST['menu_edit_post']) && isset($_POST['id']))
+    {
+        // <= flèche gauche: le parent devient le grand-parent position = position du parent + 1, recalculer les positions des enfants restants
+        if($_POST['menu_edit_post'] == 'move_one_level_up'){
+            Director::$menu_data = new Menu($entityManager);
+            $page = Director::$menu_data->findPageById((int)$_POST['id']);
+
+            $parent = $page->getParent(); // peut être null
+            if($parent === null){
+                // 1er niveau: ne rien faire
+                header('Location: ' . new URL(['page' => 'menu_chemins']));
+                die;
+            }
+            else{
+                $page->setPosition($parent->getPosition() + 1); // nouvelle position
+
+                // 2ème niveau: le parent devient $menu_data, puis null après tri
+                if($parent->getParent() === null){
+                    // connexion dans les deux sens
+                    $page->setParent(Director::$menu_data); // => pour la persistance
+                    Director::$menu_data->addChild($page); // => pour sortChildren
+
+                    //Director::$menu_data->sortChildren(true); // positions décaléees des nouveaux petits frères
+                    $page->getParent()->sortChildren(true); // positions décaléees des nouveaux petits frères
+
+                    $page->setParent(null);
+                }
+                // 3ème niveau et plus
+                else{
+                    $page->setParent($parent->getParent()); // nouveau parent
+                    $page->getParent()->sortChildren(true); // positions décaléees des nouveaux petits frères
+                }
+                //$parent->sortChildren(true); // positions des enfants restants, inutile si la fonction est récursive?
+                echo $page->getPosition();
+                //die;
+            }
+            $entityManager->flush();
+
+            header('Location: ' . new URL(['page' => 'menu_chemins']));
+            die;
+        }
+        // => flèche droite: l'élément précédent devient le parent, position = nombre d'éléments de la fraterie + 1
+        elseif($_POST['menu_edit_post'] == 'move_one_level_down')
+        {
+            Director::$menu_data = new Menu($entityManager);
+            $page = Director::$menu_data->findPageById((int)$_POST['id']);
+
+            $parent = $page->getParent(); // peut être null
+            if($parent == null){
+                $parent = Director::$menu_data;
+            }
+
+            $parent->sortChildren(true); // trie et réindexe par sécurité: 1, 2, 3...
+            if($page->getPosition() > 1){
+                foreach($parent->getChildren() as $child){
+                    echo $child->getPageName();
+                    if($child->getPosition() === $page->getPosition() - 1){
+                        $page->setParent($child);
+                        break;
+                    }
+                }
+                $page->setPosition(count($page->getParent()->getChildren()) + 1);
+            }
+            $entityManager->flush();
+
+            header('Location: ' . new URL(['page' => 'menu_chemins']));
+            die;
+        }
+        else{
+            // you talking to me?
+            die;
+        }
+    }*/
+
+    /* -- requêtes AJAX -- */
     require '../src/controller/ajax.php';
 
     // formulaires HTML
-    if(isset($_POST['from']) // page d'où vient la requête
+    /*if(isset($_POST['from']) // page d'où vient la requête
         && isset($_POST)) // données
     {
         echo "requête envoyée en validant un formulaire";
-    }
+    }*/
 }
diff --git a/src/model/Position.php b/src/model/Position.php
index 74d173a..76de966 100644
--- a/src/model/Position.php
+++ b/src/model/Position.php
@@ -7,34 +7,30 @@ declare(strict_types=1);
 
 trait Position
 {
-        public function sortChildren(bool $reposition = false): void
+        public function sortChildren(bool $reindexation = false): void
     {
-        // ordre du tableau des enfants
-        // inefficace quand des noeuds ont la même position
-        
-        // tri par insertion avant affichage
+        // tri par insertion du tableau des enfants
         for($i = 1; $i < count($this->children); $i++)
         {
             $tmp = $this->children[$i];
             $j = $i - 1;
 
-            // Déplacez les éléments du tableau qui sont plus grands que la clé
-            // à une position devant leur position actuelle
-            while ($j >= 0 && $this->children[$j]->getPosition() > $tmp->getPosition()) {
+            // Déplacez les éléments du tableau qui sont plus grands que la clé à une position devant leur position actuelle
+            while($j >= 0 && $this->children[$j]->getPosition() > $tmp->getPosition()) {
                 $this->children[$j + 1] = $this->children[$j];
-                $j = $j - 1;
+                $j--;
             }
             $this->children[$j + 1] = $tmp;
         }
         
-        foreach ($this->children as $child) {
-            if (count($child->children) > 0) {
-                $child->sortChildren($reposition);
+        foreach($this->children as $child) {
+            if(count($child->children) > 0) {
+                $child->sortChildren($reindexation);
             }
         }
 
         // nouvelles positions (tableau $children => BDD)
-        if($reposition){
+        if($reindexation){
             $i = 1;
             foreach($this->children as $child){
                 $child->setPosition($i);
diff --git a/src/model/entities/Page.php b/src/model/entities/Page.php
index e3e60ca..aaff1ff 100644
--- a/src/model/entities/Page.php
+++ b/src/model/entities/Page.php
@@ -75,6 +75,10 @@ class Page
     {
         return $this->page_path;
     }
+    public function setPagePath(string $path):void
+    {
+        $this->page_path = $path;
+    }
     public function getEndOfPath(): string
     {
         return $this->end_of_path;
@@ -107,6 +111,10 @@ class Page
     {
         return $this->parent;
     }
+    public function setParent(?Page $parent): void
+    {
+        $this->parent = $parent;
+    }
     public function getChildren(): Collection
     {
         return $this->children;
@@ -125,6 +133,14 @@ class Page
         $this->children[] = $child;
         $this->sortChildren(false);
     }
+    public function removeChild(self $child): void
+    {
+        foreach($this->children as $index => $candidate){
+            if($candidate === $child){
+                unset($this->children[$index]);
+            }
+        }
+    }
 
     public function findPageById(int $id): ?Page
     {
diff --git a/src/view/MenuBuilder.php b/src/view/MenuBuilder.php
index 5a010d5..42c9273 100644
--- a/src/view/MenuBuilder.php
+++ b/src/view/MenuBuilder.php
@@ -1,19 +1,19 @@
 <?php
 // src/view/MenuBuilder.php
 //
-// page Menu et chemins en mode admin
+// page Menu et chemins en mode admin, fonctionne avec menu.js
 
 use App\Entity\Node;
 use App\Entity\Page;
 
 class MenuBuilder extends AbstractBuilder
 {
-    private int $margin_left_multiplier = 29;
+    //private int $margin_left_multiplier = 29;
 
-    public function __construct(Node $node)
+    public function __construct(Node $node = null, bool $template = true)
     {
-        parent::__construct($node);
-        $viewFile = self::VIEWS_PATH . $node->getName() . '.php';
+        //parent::__construct($node);
+        $viewFile = $node === null ? self::VIEWS_PATH . 'menu.php' : self::VIEWS_PATH . $node->getName() . '.php';
         
         if(file_exists($viewFile))
         {
@@ -22,33 +22,33 @@ class MenuBuilder extends AbstractBuilder
                 extract($node->getNodeData()->getData());
             }*/
 
-            if($_SESSION['admin'])
-            {
-                $this->unfoldMenu(Director::$menu_data, 0 - $this->margin_left_multiplier);
+            if($_SESSION['admin']){
+                $this->unfoldMenu(Director::$menu_data/*, 0 - $this->margin_left_multiplier*/);
             }
             else{
                 header('Location: ' . new URL);
                 die;
             }
 
-            ob_start();
-            require $viewFile;
-            $this->html = ob_get_clean(); // pas de concaténation ici, on écrase
+            // si faux, n'utilise pas le template
+            if($template){
+                ob_start();
+                require $viewFile; // insertion de $this->html généré par unfoldMenu
+                $this->html = ob_get_clean(); // pas de concaténation .= cette fois on écrase
+            }
         }
     }
 
-    private function unfoldMenu(Page $menu, int $margin_left): void
+    private function unfoldMenu(Page $menu): void
     {
-        $margin_left += $this->margin_left_multiplier;
         $this->html .= '<div class="level">' . "\n";
 
         foreach($menu->getChildren() as $entry)
         {
-            $div_style = 'margin-left: ' . $margin_left . 'px;';
             $checked = $entry->isHidden() ? '' : 'checked';
-            $this->html .= '<div id="' . $entry->getId() . '" style="' . $div_style . '">
-                <img class="move_entry_icon" onclick="" src="assets/arrow-left.svg">
-                <img class="move_entry_icon" onclick="" src="assets/arrow-right.svg">
+            $this->html .= '<div id="' . $entry->getId() . '" class="menu_edit_entry">
+                <img class="move_entry_icon" onclick="moveOneLevelUp(' . $entry->getId() . ')" src="assets/arrow-left.svg">
+                <img class="move_entry_icon" onclick="moveOneLevelDown(' . $entry->getId() . ')" src="assets/arrow-right.svg">
                 <img class="move_entry_icon" onclick="switchMenuPositions(' . $entry->getId() . ', \'up\')" src="assets/arrow-up.svg">
                 <img class="move_entry_icon" onclick="switchMenuPositions(' . $entry->getId() . ', \'down\')" src="assets/arrow-down.svg">
                 <span class="menu_entry_checkbox">
@@ -58,24 +58,18 @@ class MenuBuilder extends AbstractBuilder
 
             if(str_starts_with($entry->getEndOfPath(), 'http')){
                 $this->html .= '<span id="edit-i..."><img class="move_entry_icon" src="assets/edit.svg" onclick="openEditor(\'i...\')"></span>
-                    <i>' . $entry->getEndOfPath() . '</i>
+                    <i class="url">' . $entry->getEndOfPath() . '</i>
                     <span id="delete-i..."><img class="move_entry_icon" src="assets/delete-bin.svg" onclick="delete(\'i...\')"></span>';
             }
             else{
-                $this->html .= '<i>' . $entry->getPagePath() . '</i>';
+                $this->html .= '<i class="path">' . $entry->getPagePath() . '</i>';
             }
             
-            /*
-            => flèche gauche: position = position du parent + 1, parent = grand-parent, recalculer les positions
-            => flèche droite: position = nombre d'éléments de la fraterie + 1, l'élément précédent devient le parent
-            */
-            
             if(count($entry->getChildren()) > 0){
-                $this->unfoldMenu($entry, $margin_left);
+                $this->unfoldMenu($entry);
             }
             $this->html .= '</div>' . "\n";
         }
         $this->html .= "</div>\n";
-        $margin_left -= $this->margin_left_multiplier;
     }
 }
\ No newline at end of file
diff --git a/src/view/templates/menu.php b/src/view/templates/menu.php
index a7f318e..1414ab0 100644
--- a/src/view/templates/menu.php
+++ b/src/view/templates/menu.php
@@ -6,10 +6,13 @@
                 <p><img src="assets/arrow-up.svg"><img src="assets/arrow-down.svg"> déplacer la branche parmi celles de même niveau</p>
             <p><input type="checkbox" checked>afficher/cacher</p>
         </aside>
+        <div id="menu_edit_buttons">
 <?= $this->html ?>
+        </div>
         <div class="new_entry_buttons">
-                <p>Ajouter une nouvelle entrée dans le menu?</p>
-                <button id="new-i..." onclick="openEditor('i...')"><img class="action_icon" src="assets/edit.svg">avec une URL</button>
-                        ...sinon cliquer sur Nouvelle page<img src="assets/arrow-down.svg">dans la barre jaune
+                <p>Ajouter une nouvelle entrée dans le menu
+                        <button id="new-i..." onclick="openEditor('i...')"><img class="action_icon" src="assets/edit.svg">avec une URL</button>
+                ?</p>
+                <p>... ou cliquer sur <span style="color: #ff1d04;">Nouvelle page</span><img src="assets/arrow-down.svg">dans la barre jaune</p>
         </div>
 </section>
\ No newline at end of file