From b2757ff10e42813e5656d8f7800d337dbc432369 Mon Sep 17 00:00:00 2001
From: FrederikBaerentsen <frederik+gitea@baerentsen.net>
Date: Thu, 18 Apr 2024 15:44:04 +0200
Subject: [PATCH] added confirmation to delete

---
 templates/base.html | 102 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 89 insertions(+), 13 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index 42bc7e9..0b3f12d 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -253,27 +253,51 @@ td img{
           Home
         </a>
     
-        <a class="navbar-item" href="/create">
-          Add Set
-        </a>
         <a class="navbar-item hidden-desktop" id="expand-button">
           Expand Columns
         </a> 
-	<a class="navbar-item" href="{{ '/delete/' + u_id }}" class="navbar-item">
-			Delete
-		</a>
+        
+        <a class="navbar-item hidden-desktop js-modal-trigger" data-target="modal-delete-set" >
+            Delete
+          </a>
+        
       </div>
       
-      <div id="navMenu" class="navbar-menu">
-        <div class="navbar-start">
-    
-        </div>
-    
-        <div class="navbar-end">
+      <div id="navMenu" class="navbar-menu"> 
+        <div class="navbar-end"> 
+          <!-- <a class="navbar-item" onclick="delete_set('{{ u_id }}','{{ tmp }}', '{{ title }}')">
+            Delete
+          </a> -->
+          <a class="navbar-item js-modal-trigger" data-target="modal-delete-set">
+            Delete
+          </a>
         </div>
       </div>
     </nav>
 
+    <div class="modal" id="modal-delete-set">
+      <div class="modal-background"></div>
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Delete set?</p>
+          <button class="delete" aria-label="close"></button>
+        </header>
+        <section class="modal-card-body">
+          Are you sure you want to delete:
+          <br>
+          <b>{{ tmp }} - {{ title }}</b>
+          <br><br>
+          With unique ID: <br><b>{{ u_id }}</b>
+        </section>
+        <footer class="modal-card-foot">
+          <div class="buttons">
+            <a href="{{ '/delete/' + u_id }}" class="button is-danger">Delete</a>
+            <button class="button">Cancel</button>
+          </div>
+        </footer>
+      </div>
+    </div>
+
     <div class="container">
       <center>
         <h1 class="title">{{ tmp }} - {{ title }}</h1>
@@ -282,5 +306,57 @@ td img{
     </div>
     {% block scripts %}{% endblock %}
   </body>
-  
+  <script>
+    function delete_set(u_id,tmp,title) {
+      let text = "";
+      if (confirm(text) == true) {
+        text = "You pressed OK!";
+      } else {
+        text = "You canceled!";
+      }
+      document.getElementById("demo").innerHTML = text;
+    }
+    document.addEventListener('DOMContentLoaded', () => {
+  // Functions to open and close a modal
+  function openModal($el) {
+    $el.classList.add('is-active');
+  }
+
+  function closeModal($el) {
+    $el.classList.remove('is-active');
+  }
+
+  function closeAllModals() {
+    (document.querySelectorAll('.modal') || []).forEach(($modal) => {
+      closeModal($modal);
+    });
+  }
+
+  // Add a click event on buttons to open a specific modal
+  (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
+    const modal = $trigger.dataset.target;
+    const $target = document.getElementById(modal);
+
+    $trigger.addEventListener('click', () => {
+      openModal($target);
+    });
+  });
+
+  // Add a click event on various child elements to close the parent modal
+  (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+    const $target = $close.closest('.modal');
+
+    $close.addEventListener('click', () => {
+      closeModal($target);
+    });
+  });
+
+  // Add a keyboard event to close all modals
+  document.addEventListener('keydown', (event) => {
+    if(event.key === "Escape") {
+      closeAllModals();
+    }
+  });
+});
+  </script>
 </html>