FEATURE: Add TODO deletion confirmation modal

pages/category.html

@@ -7,6 +7,28 @@
 <!-- Main -->
 <main class="d-flex flex-wrap">
 
+<!-- MODALS -->
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+<div class="modal-dialog">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
+      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+    </div>
+    <div class="modal-body">
+      Are you sure you want to delete this ToDo?
+    </div>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+      <button type="button" class="btn btn-danger" id="confirmDeleteButton">Delete</button>
+    </div>
+  </div>
+</div>
+</div>
+<!-- End delete confirmation modal -->
+
+
 <!-- Sidebar -->
 <div id="sidebar" class="col border-right shadow-lg flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary" style="width: 380px;">
   <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
@@ -67,8 +89,12 @@
               <td class="todo-due">{{ .Due }}</td>
               <td class="todo-due-unix" style="display: none;">{{ .DueUnix }}</td>
               <td>
-                <button class="btn btn-success" onclick="markAsDoneRefresh('{{.ID}}');"><img src='/static/images/check.svg'></button>
-                <button class="btn btn-danger" onclick="deleteTodoRefresh('{{.ID}}');"><img src='/static/images/trash3-fill.svg'></button>
+                <button class="btn btn-success" onclick="markAsDoneRefresh('{{.ID}}');">
+                  <img src='/static/images/check.svg'>
+                </button>
+                <button class="btn btn-danger" onclick="openDeleteModal('{{.ID}}');">
+                  <img src='/static/images/trash3-fill.svg'>
+                </button>
               </td>
             </tr>
           {{ end }}
@@ -103,11 +129,38 @@
 </main>
 
 <script>
+
+let todoToDeleteId;
+
+// TODO deletion modal functions
+function openDeleteModal(id) {
+  todoToDeleteId = id; // Save ID for handleDelete to work properly
+
+  const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'), {});
+  
+  // Remove any existing event listener to prevent multiple bindings
+  const confirmDeleteButton = document.getElementById('confirmDeleteButton');
+  confirmDeleteButton.removeEventListener('click', handleDelete); // Optional: Prevent multiple bindings
+
+  // Add the event listener for the delete action
+  confirmDeleteButton.addEventListener('click', handleDelete);
+  
+  deleteModal.show();
+}
+
+async function handleDelete() {
+  await deleteTodoRefresh(todoToDeleteId); // Call the delete function
+  const deleteModal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
+  deleteModal.hide(); // Hide the modal
+}
+
+// Mark TODO as done
 async function markAsDoneRefresh(id) {
   await markAsDone(id);
   window.location.reload();
 }
 
+// Delete TODO with ID
 async function deleteTodoRefresh(id) {
   await deleteTodo(id);
   window.location.reload();
@@ -142,7 +195,6 @@ async function drop(event) {
     // Do nothing
     return;
   }
-  console.log("passed");
 
   // Add a copy of this ToDo in the corresponding group
   let result = await postNewTodo({