From 442d7ca7408bbe7545f6358ff4937028dfbcd701 Mon Sep 17 00:00:00 2001
From: Josh Pinto <joshpinto6@outlook.com>
Date: Thu, 21 Aug 2025 08:31:20 -0400
Subject: [PATCH] :sparkles: Add playlist deletion

---
 backend/app.py                     |  5 +-
 frontend/src/Layout.svelte         | 25 +++++++-
 frontend/src/pages/Playlist.svelte | 95 +++++++++++++++++++++++-------
 3 files changed, 99 insertions(+), 26 deletions(-)

diff --git a/backend/app.py b/backend/app.py
index 4cd1190..55c8bbf 100644
--- a/backend/app.py
+++ b/backend/app.py
@@ -586,8 +586,6 @@ def start_playlist(playlist_id: int):
 
 @app.post('/playlists/stop')
 def stop_playlist():
-    if device_store.status != "online" or not device_store.amp:
-        raise HTTPException(status_code=400, detail="Device not online")
     try:
         device_store.active_playlist_details = {
             "id": None,
@@ -599,7 +597,8 @@ def stop_playlist():
             "first_tap_time": None,
             "second_tap_time": None,
         }
-        device_store.amp.set_qa_slots([0, 0])
+        if not (device_store.status != "online" or not device_store.amp):
+            device_store.amp.set_qa_slots([0, 0])
     except Exception as e:
         return {"error": str(e)}
     return {"ok": True}
diff --git a/frontend/src/Layout.svelte b/frontend/src/Layout.svelte
index 9571e2c..c9dd4a9 100644
--- a/frontend/src/Layout.svelte
+++ b/frontend/src/Layout.svelte
@@ -40,7 +40,7 @@
     memoryUsage,
     processorUsage,
     firmwareVersion,
-		activePlaylist,
+    activePlaylist,
     playlists,
     playlistsLoading,
     playlistItems,
@@ -139,7 +139,7 @@
           processorUsage.set(msg.processor_usage ?? processorUsage);
           firmwareVersion.set(msg.firmware_version ?? firmwareVersion);
           allPresets.set(msg.presets ?? allPresets);
-					activePlaylist.set(msg.active_playlist ?? null);
+          activePlaylist.set(msg.active_playlist ?? null);
           if ($allPresets && $allPresets.length > 0) {
             presetsLoading.set(false);
           }
@@ -229,7 +229,6 @@
 
   $effect(async () => {
     if ($routerLocation.split('/').includes('playlist')) {
-
       await refreshPlaylistItems();
     }
   });
@@ -277,6 +276,26 @@
         if ($routerLocation.split('/').includes('playlist')) {
           refreshPlaylistItems();
         }
+      } else if ($layoutEvents.type === 'playlist_deleted') {
+        toaster.success({
+          title: 'Playlist Deleted',
+          description: 'The playlist has been successfully deleted.'
+        });
+        fetchPlaylists();
+
+        if ($routerLocation.split('/').includes('playlist')) {
+          window.location.href = '/#/playlists';
+        }
+      } else if ($layoutEvents.type === 'playlist_started') {
+        toaster.success({
+          title: 'Playlist Started',
+          description: `The playlist has been started successfully.`
+        });
+      } else if ($layoutEvents.type === 'playlist_stopped') {
+        toaster.success({
+          title: 'Playlist Stopped',
+          description: `The playlist has been stopped successfully.`
+        });
       }
 
       layoutEvents.set(null);
diff --git a/frontend/src/pages/Playlist.svelte b/frontend/src/pages/Playlist.svelte
index 5554a16..6902360 100644
--- a/frontend/src/pages/Playlist.svelte
+++ b/frontend/src/pages/Playlist.svelte
@@ -1,7 +1,11 @@
 <script>
   let { params } = $props();
 
+  // components
+  import { Modal } from '@skeletonlabs/skeleton-svelte';
+
   import PresetList from '../components/PresetList.svelte';
+
   // router
   import { link } from 'svelte-spa-router';
 
@@ -13,8 +17,9 @@
     playlistItems,
     allPresets,
     presetsLoading,
-		activePlaylist
+    activePlaylist
   } from '../stores/state.js';
+  import { layoutEvents } from '../stores/events.js';
 
   // local states
   let selectedPreset = $state('');
@@ -27,7 +32,12 @@
       : null
   );
 
-  import { layoutEvents } from '../stores/events.js';
+  // modal state
+  let openState = $state(false);
+
+  function modalClose() {
+    openState = false;
+  }
 
   function refetchPlaylistItems() {
     layoutEvents.set({
@@ -47,7 +57,7 @@
     })
       .then((d) => d.json())
       .then((data) => {
-        if (data.success) {
+        if (data.ok) {
           layoutEvents.set({
             type: 'playlist_started',
             playlistId: playlist.id
@@ -58,8 +68,31 @@
       });
   }
 
-	 function stopPlaylist() {
+  function deletePlaylist() {
+    modalClose();
+    if (!playlist) return;
+
+    fetch('/playlists/' + playlist.id, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json'
+      }
+    })
+      .then((d) => d.json())
+      .then((data) => {
+        if (data.ok) {
+          layoutEvents.set({
+            type: 'playlist_deleted',
+            playlistId: playlist.id
+          });
+        } else {
+          console.error('Failed to delete playlist:', data.error);
+        }
+      });
+  }
 
+  function stopPlaylist() {
     fetch('/playlists/stop', {
       method: 'POST',
       headers: {
@@ -69,7 +102,7 @@
     })
       .then((d) => d.json())
       .then((data) => {
-        if (data.success) {
+        if (data.ok) {
           layoutEvents.set({
             type: 'playlist_stopped',
             playlistId: playlist.id
@@ -80,7 +113,6 @@
       });
   }
 
-
   function movePresetItem(itemId, newPosition) {
     if (!playlist) return;
     if (newPosition < 0 || newPosition >= $playlistItems.length) {
@@ -140,21 +172,44 @@
         <span>Updated {formatDate(playlist.last_updated)}</span>
       </div>
       <div class="flex flex-row flex-wrap gap-2.5 items-center">
-				{#if $activePlaylist.id != playlist.id}
-        <button
-          type="button"
-          class="btn preset-filled-secondary-500"
-          disabled={$deviceStatus != 'online'}
-          onclick={startPlaylist}>Start</button
-        >
-				{:else}
-				<button
-					type="buton"
-					class="btn preset-filled-error-500"
-					onclick={stopPlaylist}>Stop</button>
-				{/if}
+        {#if $activePlaylist.id != playlist.id}
+          <button
+            type="button"
+            class="btn preset-filled-success-500"
+            disabled={$deviceStatus != 'online'}
+            onclick={startPlaylist}>Start</button
+          >
+        {:else}
+          <button type="buton" class="btn preset-filled-warning-500" onclick={stopPlaylist}
+            >Stop</button
+          >
+        {/if}
         <button type="button" class="btn preset-filled">Edit</button>
-        <button type="button" class="btn preset-filled-error-500">Delete</button>
+        <Modal
+          open={openState}
+          onOpenChange={(e) => (openState = e.open)}
+          triggerBase="btn preset-filled-error-500"
+          contentBase="card bg-surface-100-900 p-4 space-y-4 shadow-xl max-w-screen-sm"
+          backdropClasses="backdrop-blur-sm"
+        >
+          {#snippet trigger()}Delete{/snippet}
+          {#snippet content()}
+            <header class="flex justify-between">
+              <h4 class="h4">Confirm Deletion</h4>
+            </header>
+            <article>
+              <p class="opacity-60">
+                Are you sure you want to delete this playlist? This action cannot be undone.
+              </p>
+            </article>
+            <footer class="flex justify-end gap-4">
+              <button type="button" class="btn preset-tonal" onclick={modalClose}>Cancel</button>
+              <button type="button" class="btn preset-filled" onclick={deletePlaylist}
+                >Confirm</button
+              >
+            </footer>
+          {/snippet}
+        </Modal>
       </div>
     </div>
     <div class="flex flex-col gap-3 w-full max-w-5xl mx-auto">
-- 
2.51.2