Add submenu

app/templates/admin/_menu-edit.html

@@ -28,11 +28,11 @@
       {% endif %}
       {% endfor %}
 
-   
+  </div>  
     <button class="btn btn-outline-success" onclick="openForm()">+</button>
     <hr>
     <button class="btn btn-success" type="submit"> Enregistrer </button>
-  </div>
+ 
 </form>
 
 
@@ -43,7 +43,7 @@
     
     <label for="nom"><b>Nom</b></label>
     <input type="text" placeholder="Nom" id="newEntry_name" required="">
-    
+    <input type="checkbox" id="submenu" onclick="disableLink()" value="Cette entré est un sous-menu"><br>
     <label for="link"><b>Lien</b></label>
     <input type="text" placeholder="un lien ou nom d'un bloc" id="newEntry_link">
     <button type="button" onclick="addEntry()" class="btn">Ajouter</button>
@@ -114,6 +114,8 @@
       
 		      
 </script>
+
+<!-- Add entry to menu-->
 <style>
 
   .entry {
@@ -180,6 +182,10 @@
 </style>
 
 <script>
+  function disableLink() {
+      document.getElementById("newEntry_link").setAttribute("disabled", true);
+  }
+
   function openForm() {
       document.getElementById("myForm").style.display = "block";
   }
@@ -193,34 +199,86 @@
       var menu = document.getElementById("Menu");
       var entry_name =  document.getElementById("newEntry_name").value;
       var entry_link = document.getElementById("newEntry_link").value;
-      console.log(entry_name);
-      console.log(entry_link);
+      
       
       // Create menu button
       new_entry_btn = document.createElement("button");
       new_entry_btn.setAttribute("class", "btn");
       text_button = document.createTextNode(entry_name);
       new_entry_btn.appendChild(text_button);
-
-      // Create input
-      new_entry_input = document.createElement("input");
-      text_link = document.createTextNode(entry_link);
-      new_entry_input.setAttribute("id", entry_name);
-      new_entry_input.setAttribute("name", entry_name);
-      new_entry_input.setAttribute("class", "input-menu");
-      new_entry_input.setAttribute("value", text_link.textContent);
-
-      // Create menu entry
+      
       new_menu_entry = document.createElement("div");
       new_menu_entry.setAttribute("class", "entry");
       new_menu_entry.setAttribute("id", entry_name);
-      new_menu_entry.appendChild(new_entry_btn);
-      new_menu_entry.appendChild(new_entry_input);
-      
-      
-      menu.appendChild(new_menu_entry);
 
+      submenu_check = document.getElementById("submenu").checked;
       
+      if ( submenu_check )
+      {
+	  new_entry_btn.setAttribute("class", "btn btn-outline-dark");
+	  new_menu_entry.setAttribute("class", "entry submenu n1");
+	  
+	  new_submenu = document.createElement("div");
+	  new_submenu.setAttribute("class", "list");
+	  new_submenu.setAttribute("id", entry_name);
+
+	  new Sortable(new_submenu, {
+	  group: 'shared',
+	  animation: 150,
+	  invertSwap: true,
+	  fallbackOnBody: true,
+	  swapThreshold: 0.65,
+	  onAdd: function (evt) {
+	      var itemEl = evt.item;
+	      console.log(itemEl.parentElement.id);
+	      parentid = itemEl.parentElement.id;
+	      if ( parentid === "Menu" ){
+		      itemEl.setAttribute("id", itemEl.getAttribute("name"));
+		      for (child of itemEl.children){
+			  nodeName= child.nodeName;
+			  if ( nodeName === "INPUT"){
+			      child.setAttribute("name", itemEl.getAttribute("name")); 
+			      child.setAttribute("id", itemEl.getAttribute("name"));
+			  }
+		      }
+		  }
+		  else {
+		      itemEl.setAttribute("id", itemEl.parentElement.id.concat("§§", itemEl.getAttribute("id")) );
+		      for (child of itemEl.children){
+			  nodeName= child.nodeName;
+			  if ( nodeName === "INPUT"){
+			      console.log(child.nodeName);
+			      child.setAttribute("name", itemEl.id); 
+			      child.setAttribute("id", itemEl.id);
+			  }
+		      }
+		  }
+	      }
+      });
+
+
+	  
+	  new_menu_entry.appendChild(new_entry_btn);
+	  new_menu_entry.appendChild(new_submenu); 
+      }
+      else
+      {
+	  // Create input
+	  new_entry_input = document.createElement("input");
+	  text_link = document.createTextNode(entry_link);
+	  new_entry_input.setAttribute("id", entry_name);
+	  new_entry_input.setAttribute("name", entry_name);
+	  new_entry_input.setAttribute("class", "input-menu");
+	  new_entry_input.setAttribute("value", text_link.textContent);
+	  
+	  // Create menu entry
+	  
+	  new_menu_entry.appendChild(new_entry_btn);
+	  new_menu_entry.appendChild(new_entry_input);
+	   
+      }
+
+      menu.appendChild(new_menu_entry);
       document.getElementById("myForm").style.display = "none";
   }
 </script>