From 27793b65fe14aae41ceb5b314f9275fe2ad0d9e2 Mon Sep 17 00:00:00 2001
From: kitoy <kitoy@kitoy.me>
Date: Fri, 6 Feb 2026 13:11:37 +0100
Subject: [PATCH] ADd menu edition

---
 app/templates/admin/_menu-edit.html | 225 ++++++++++++++++++++++++++++
 1 file changed, 225 insertions(+)

diff --git a/app/templates/admin/_menu-edit.html b/app/templates/admin/_menu-edit.html
index 8b13789..4075815 100644
--- a/app/templates/admin/_menu-edit.html
+++ b/app/templates/admin/_menu-edit.html
@@ -1 +1,226 @@
+<form class="sortable" action="/editmenu" method="POST" hx-post="/editmenu" hx-swap="none">
+  <div id="Menu" class="list">
+    
+    {% for item in menu.keys() %}
+    {% if menu[item] is mapping %}
 
+    <div class="entry submenu n1" id="{{item}}" style="padding-bottom: 30px;">   
+      <button class="btn btn-outline-dark"> {{ item }} </button>
+      <div class="list" id="{{item}}" name="{{ item }}"> 
+    
+	{% for subitem in menu[item].keys() %}
+	<div class="entry n1" id="{{item}}§§{{subitem}}" name="{{subitem}}">
+	  <button class="btn"> {{subitem}}</button>
+	  <input class="input-menu" id="{{item}}§§{{subitem}}" name="{{item}}§§{{subitem}}" value="{{menu[item][subitem]}}">
+	  <button class="btn btn-danger" onclick="deleteItem(this)"> x </button>
+	</div>
+	{% endfor %}
+
+      </div>
+    </div>
+      {% else %}
+      <div class="entry" id="{{ item }}">
+	<button class="btn"> {{ item }}</button>
+	<input class="input-menu" id="{{item }}" name="{{item}}" value="{{menu[item]}}"> 
+	<button class="btn btn-danger" onclick="deleteItem(this)"> x </button>
+      </div>
+      
+      {% endif %}
+      {% endfor %}
+
+   
+    <button class="btn btn-outline-success" onclick="openForm()">+</button>
+    <hr>
+    <button class="btn btn-success" type="submit"> Enregistrer </button>
+  </div>
+</form>
+
+
+
+<div class="form-popup" id="myForm" style="display: none;">
+  <form action="/action_page.php" class="form-container">
+    <h3>Nouvelle entrée</h3><br>
+    
+    <label for="nom"><b>Nom</b></label>
+    <input type="text" placeholder="Nom" id="newEntry_name" required="">
+    
+    <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>
+    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
+  </form>
+</div>
+
+
+<script src="/static/vendors/Sortable/Sortable.min.js"></script>
+<script type="text/javascript">
+ 
+  var elements = document.getElementsByClassName('list');
+  
+  for (var i = 0; i < elements.length; i++) {
+      
+      new Sortable(elements[i], {
+	  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);
+			  }
+		      }
+		  }
+	      }
+      });
+      }
+  
+</script>
+<script>
+  document.ondrop = function(event) {
+      event.preventDefault();
+      
+      var menu_entry = document.getElementsByClassName('input-menu');
+      
+      for (var i = 0; i < menu_entry.length; i++) {
+	  parentElement = menu_entry[i].parentElement;
+	  menu_entry[i].setAttribute("name", parentElement.id); 
+	  menu_entry[i].setAttribute("id", parentElement.id);
+      }
+  }
+
+  function deleteItem(e){
+      e.parentElement.remove()
+  }
+      
+		      
+</script>
+<style>
+
+  .entry {
+      padding-bottom: 5px;
+  }
+  
+  /* The popup form - hidden by default */
+  .form-popup {
+      display: none;
+      position: fixed;
+      top: 20%;
+      right: 50%;
+      opacity: 1;
+      background-color: white;
+      border: 3px solid #f1f1f1;
+      z-index: 9999;
+  }
+  
+  /* Add styles to the form container */
+  .form-container {
+      max-width: 300px;
+      padding:0;
+      text-align:center;
+  }
+  
+  /* Full-width input fields */
+  .form-container input[type=text], .form-container{
+      width: 100%;
+      padding: 15px;
+      margin: 5px 0 22px 0;
+      border: none;
+      background: #fff;
+      z-index: 9999;
+  }
+  
+  /* When the inputs get focus, do something */
+  .form-container input[type=text]:focus, .form-container input[type=password]:focus {
+      background-color: #ddd;
+      outline: 1px;
+  }
+  
+  /* Set a style for the submit/login button */
+  .form-container .btn {
+      background-color: #04AA6D;
+      color: white;
+      padding: 20px 20px;
+      border: none;
+      cursor: pointer;
+      text-align :center;
+      width: 40%;
+      opacity: 0.8;
+  }
+  
+  /* Add a red background color to the cancel button */
+  .form-container .cancel {
+      background-color: red;  
+  }
+  
+  /* Add some hover effects to buttons */
+.form-container .btn:hover, .open-button:hover {
+    opacity: 1;
+}
+
+</style>
+
+<script>
+  function openForm() {
+      document.getElementById("myForm").style.display = "block";
+  }
+
+  function closeForm() {
+      document.getElementById("myForm").style.display = "none";
+  } 
+
+  function addEntry()
+  {
+      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);
+
+      
+      document.getElementById("myForm").style.display = "none";
+  }
+</script>