monsiteperso/app/templates/admin/_menu-edit.html

<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>