From 7d1b51918f5fee8791d1bd4e36056c4d979a2a96 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 21:42:42 +0100
Subject: [PATCH] delete confirmation

ref #11
---
 src/components/Tracks.svelte | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/Tracks.svelte b/src/components/Tracks.svelte
index fccb285b..8a9a2bdd 100644
--- a/src/components/Tracks.svelte
+++ b/src/components/Tracks.svelte
@@ -69,7 +69,24 @@
   };
   window.track__delete_handler = () => {
     const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
-    // TODO: modal or double click confirmation?
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+    document
+      .querySelector(`[data-id="deleteconfirmation_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+  };
+  window.track__delete_cancel = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+    document
+      .querySelector(`[data-id="deleteconfirmation_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+  };
+  window.track__delete_confirm = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
     TrackService.trackControllerRemove(trackid)
       .then(() => {
         const newStoreVal = trackscache.filter((obj) => obj.id !== trackid);
@@ -115,6 +132,10 @@
           <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_handler()">Edit</button>
           <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_handler()">Delete</button>
         </div>
+        <div class="hidden" data-id="deleteconfirmation_table_actions_${track.id}">
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_cancel()">Cancel</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_confirm()">Confirm</button>
+        </div>
       `),
       ]);
     });