From 14b95876c5a7a27214639088306b269219f94af2 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Sat, 15 Oct 2022 13:36:25 +0200
Subject: [PATCH] Add a confirmation before deleting the song

---
 ui/src/routes/musiks/gongs/[gid]/+page.svelte | 44 +++++++++++++++----
 .../routes/musiks/tracks/[tid]/+page.svelte   | 43 ++++++++++++++----
 2 files changed, 69 insertions(+), 18 deletions(-)

diff --git a/ui/src/routes/musiks/gongs/[gid]/+page.svelte b/ui/src/routes/musiks/gongs/[gid]/+page.svelte
index 3948a04..e0dc2f2 100644
--- a/ui/src/routes/musiks/gongs/[gid]/+page.svelte
+++ b/ui/src/routes/musiks/gongs/[gid]/+page.svelte
@@ -3,6 +3,7 @@
  import { page } from '$app/stores';
 
  import {
+     Button,
      Container,
      Input,
      Icon,
@@ -20,6 +21,8 @@
          goto('musiks/gongs/');
      })
  }
+
+ let confirmDeletion = false;
 </script>
 
 {#await getGong($page.params.gid)}
@@ -47,15 +50,38 @@
         </ListGroup>
 
         <ListGroup class="my-2 text-center">
-            <ListGroupItem
-                action
-                tag="button"
-                class="text-danger fw-bold"
-                on:click={() => deleteThis(gong)}
-            >
-                <Icon name="trash" />
-                Supprimer ce gong
-            </ListGroupItem>
+            {#if !confirmDeletion}
+                <ListGroupItem
+                    action
+                    tag="button"
+                    class={gong.enabled?"fw-bold":"text-danger fw-bold"}
+                    disabled={gong.enabled}
+                    on:click={() => confirmDeletion = !confirmDeletion}
+                >
+                    <Icon name="trash" />
+                    Supprimer ce gong
+                </ListGroupItem>
+            {:else}
+                <ListGroupItem>
+                    <p class="fw-bold">
+                        Êtes-vous sûr&nbsp;?
+                    </p>
+                    <div class="d-flex justify-content-around">
+                        <Button
+                            color="danger"
+                            on:click={() => deleteThis(gong)}
+                        >
+                            <Icon name="heartbreak-fill" /> Oui, supprimer ce gong
+                        </Button>
+                        <Button
+                            color="outline-success"
+                            on:click={() => confirmDeletion = !confirmDeletion}
+                        >
+                            <Icon name="balloon-heart" /> Non, garder le gong
+                        </Button>
+                    </div>
+                </ListGroupItem>
+            {/if}
         </ListGroup>
     </Container>
 {/await}
diff --git a/ui/src/routes/musiks/tracks/[tid]/+page.svelte b/ui/src/routes/musiks/tracks/[tid]/+page.svelte
index efdf1b4..8a2e635 100644
--- a/ui/src/routes/musiks/tracks/[tid]/+page.svelte
+++ b/ui/src/routes/musiks/tracks/[tid]/+page.svelte
@@ -3,6 +3,7 @@
  import { page } from '$app/stores';
 
  import {
+     Button,
      Container,
      Icon,
      Input,
@@ -26,6 +27,8 @@
          goto('musiks/tracks/');
      })
  }
+
+ let confirmDeletion = false;
 </script>
 
 {#await getTrack($page.params.tid)}
@@ -60,15 +63,37 @@
         </div>
 
         <ListGroup class="my-2 text-center">
-            <ListGroupItem
-                action
-                tag="button"
-                class="text-danger fw-bold"
-                on:click={() => deleteThis(track)}
-            >
-                <Icon name="trash" />
-                Supprimer cette piste
-            </ListGroupItem>
+            {#if !confirmDeletion}
+                <ListGroupItem
+                    action
+                    tag="button"
+                    class="text-danger fw-bold"
+                    on:click={() => confirmDeletion = !confirmDeletion}
+                >
+                    <Icon name="trash" />
+                    Supprimer cette piste
+                </ListGroupItem>
+            {:else}
+                <ListGroupItem>
+                    <p class="fw-bold">
+                        Êtes-vous sûr&nbsp;?
+                    </p>
+                    <div class="d-flex justify-content-around">
+                        <Button
+                            color="danger"
+                            on:click={() => deleteThis(track)}
+                        >
+                            <Icon name="heartbreak-fill" /> Oui, supprimer cette piste
+                        </Button>
+                        <Button
+                            color="outline-success"
+                            on:click={() => confirmDeletion = !confirmDeletion}
+                        >
+                            <Icon name="balloon-heart" /> Non, garder la piste
+                        </Button>
+                    </div>
+                </ListGroupItem>
+            {/if}
         </ListGroup>
     </Container>
 {/await}