a?

server/src/data/templates/index.html

@@ -33,7 +33,7 @@
                 </div>
                 <div class="col-md-1">
                     <button type="submit" class="btn btn-sm btn-primary w-100">
-                        <i class="bi bi-plus-lg"> Save</i>
+                        <i class="bi bi-plus-lg"> Add</i>
                     </button>
                 </div>
             </form>
@@ -94,8 +94,17 @@
                             {{ item.time }}
                         {% endif %}
                     </div>
-
-                    <div class="col-2 text-end">
+                    <div class="col-2 text-end d-flex justify-content-end gap-2">
+                        <button 
+                            type="button"
+                            class="btn btn-sm btn-warning edit-btn"
+                            data-name="{{ item.name }}"
+                            data-noshutdown="{{ item.noshutdown }}"
+                            data-time="{{ item.time }}"
+                            data-bs-toggle="modal"
+                            data-bs-target="#editModal">
+                            Modifier
+                        </button>
                         <form method="post" action="/delete" class="m-0">
                             <input type="hidden" name="item_name" value="{{ item.name }}">
                             <button type="submit" class="btn btn-sm btn-danger">
@@ -108,6 +117,47 @@
                     <hr class="border-secondary my-1">
                 {% endif %}
             {% endfor %}
+            <div class="modal fade" id="editModal" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content bg-dark text-white">
+      <form method="post" action="/edit">
+        <div class="modal-header">
+          <h5 class="modal-title">Modifier l'élément</h5>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal">swag</button>
+        </div>
+
+        <div class="modal-body">
+
+          <input type="hidden" name="original_name" id="editOriginalName">
+
+          <div class="mb-3">
+            <label class="form-label">Nom</label>
+            <input type="text" class="form-control" name="name" id="editName">
+          </div>
+
+          <div class="mb-3">
+            <label class="form-label">No Shutdown</label>
+            <select class="form-select" name="noshutdown" id="editNoshutdown">
+              <option value="1">OUI</option>
+              <option value="0">NON</option>
+            </select>
+          </div>
+
+          <div class="mb-3">
+            <label class="form-label">Time</label>
+            <input type="text" class="form-control" name="time" id="editTime">
+          </div>
+
+        </div>
+
+        <div class="modal-footer">
+          <button type="submit" class="btn btn-success">Enregistrer</button>
+        </div>
+
+      </form>
+    </div>
+  </div>
+</div>
         </div>
     </div>
 
@@ -123,5 +173,23 @@ tickCheckbox.addEventListener('change', function() {
     timeSelect.disabled = this.checked;
 });
 </script>
+<script>
+document.querySelectorAll('.edit-btn').forEach(button => {
+  button.addEventListener('click', function () {
+
+    const name = this.dataset.name;
+    const noshutdown = this.dataset.noshutdown;
+    const time = this.dataset.time;
+
+    document.getElementById('editOriginalName').value = name;
+    document.getElementById('editName').value = name;
+    document.getElementById('editNoshutdown').value = noshutdown;
+    document.getElementById('editTime').value = time;
+
+    document.getElementById('editTime').disabled = (noshutdown == "1");
+
+  });
+});
+</script>
 
 {% endblock %}