edit dialog

templates/index.html

@@ -42,6 +42,17 @@
     </div>
   </div>
 
+  <dialog id="editConditionDialog">
+      <form id="editItemForm" method="PUT" action="/conditions">
+        <label for="itemName">Name:</label><br>
+        <input type="text" id="itemName" name="itemName" required><br>
+        <label for="itemDescription">Description:</label><br>
+        <textarea id="itemDescription" name="itemDescription" required></textarea><br><br>
+        <button value="cancel" formmethod="dialog">Cancel</button>
+        <button type="submit">Submit</button>
+      </form>
+  </dialog>
+
   <script>
     // Sample data to populate the table
     const data = `{{ data.conditions | tojson }}`;
@@ -53,7 +64,7 @@
       const tableBody = document.querySelector('#dataTable tbody');
       tableBody.innerHTML = '';
       data.forEach(item => {
-        const row = `<tr>
+        const row = `<tr onclick="onRowClick('${item.id}')">
         <td title="${item.id}">${item.id.substr(0,6)}</td>
         <td>${item.itemName}</td>
         <td>${item.itemDescription}</td>
@@ -72,6 +83,17 @@
       document.getElementById('myModal').style.display = 'none';
     }
 
+    function onRowClick(id) {
+      console.log("row id", id)
+      document.getElementById("editConditionDialog").showModal();
+      const form = document.getElementById("editItemForm");
+      form.action = form.action + "/" + id
+      document.getElementById("itemName").value = "a";
+      document.getElementById("itemDescription").value = "b";
+
+
+    }
+
     // Handle form submission
     document.getElementById('addItemForm').addEventListener('submit', function (event) {
       event.preventDefault();