Handle tracks

ui/src/components/TrackList.svelte

@@ -5,33 +5,24 @@
  import {
      Button,
      Icon,
+     Spinner,
  } from 'sveltestrap';
 
- let musiks = [
-     {
-         id: 1,
-         title: "Hall Of Fame",
-         artist: "The Script",
-         enabled: true,
-     },
-     {
-         id: 2,
-         title: "Poker face",
-         artist: "Lady Gaga",
-     },
-     {
-         id: 3,
-         title: "Puisque tu m'aimes encore",
-         artist: "Céline Dion",
-         enabled: true,
-     },
- ];
+ import { tracks } from '../stores/tracks';
 
  export let flush = false;
  export let edit = false;
 
  export { className as class };
  let className = '';
+
+ let refreshInProgress = false;
+ function refresh_tracks() {
+     refreshInProgress = true;
+     tracks.refresh().then(() => {
+         refreshInProgress = false;
+     });
+ }
 </script>
 
 <div class="d-flex justify-content-between align-items-center" class:px-2={flush}>
@@ -58,30 +49,47 @@
         <Button
             color="outline-dark"
             size="sm"
+            title="Rafraîchir la liste des pistes"
+            on:click={refresh_tracks}
+            disabled={refreshInProgress}
         >
-            <Icon name="arrow-clockwise" />
+            {#if !refreshInProgress}
+                <Icon name="arrow-clockwise" />
+            {:else}
+                <Spinner color="dark" size="sm" />
+            {/if}
         </Button>
     </div>
 </div>
 <div class="list-group {className}" class:list-group-flush={flush}>
-    {#each musiks as track (track.id)}
-        <button
-            type="button"
-            class="list-group-item list-group-item-action"
-            class:active={$page.url.pathname.indexOf('/tracks/') !== -1 && $page.params.tid == track.id}
-            aria-current="true"
-            on:click={() => {
-                     if (edit) {
-                         goto('musiks/tracks/' + track.id)
-                     } else {
-                         track.enabled = !track.enabled
-                     }
-                     }}
-        >
-            {#if !edit}
-                <input class="form-check-input me-1" type="checkbox" checked={track.enabled}>
-            {/if}
-            <span class:fw-bold={!edit && track.enabled}>{track.artist} &ndash; {track.title}</span>
-        </button>
-    {/each}
+    {#if $tracks.list}
+        {#each $tracks.list as track (track.id)}
+            <button
+                type="button"
+                class="list-group-item list-group-item-action"
+                class:active={$page.url.pathname.indexOf('/tracks/') !== -1 && $page.params.tid == track.id}
+                aria-current="true"
+                on:click={() => {
+                         if (edit) {
+                             goto('musiks/tracks/' + track.id);
+                         } else {
+                             track = track.toggleEnable()
+                         }
+                         }}
+            >
+                {#if !edit}
+                    <input class="form-check-input me-1" type="checkbox" checked={track.enabled}>
+                {/if}
+                <span class:fw-bold={!edit && track.enabled}>{track.name}</span>
+            </button>
+        {/each}
+    {:else}
+        {#await tracks.refresh()}
+            <div class="d-flex justify-content-center align-items-center gap-2">
+                <Spinner color="primary" /> Chargement en cours&hellip;
+            </div>
+        {:then}
+            test
+        {/await}
+    {/if}
 </div>

ui/src/lib/track.js

@@ -0,0 +1,65 @@
+export class Track {
+  constructor(res) {
+    if (res) {
+      this.update(res);
+    }
+  }
+
+  update({ id, name, path, enabled }) {
+    this.id = id;
+    this.name = name;
+    this.path = path;
+    this.enabled = enabled;
+  }
+
+  async delete() {
+    const res = await fetch(`api/tracks/${this.id}`, {
+      method: 'DELETE',
+      headers: {'Accept': 'application/json'}
+    });
+    if (res.status == 200) {
+      return true;
+    } else {
+      throw new Error((await res.json()).errmsg);
+    }
+  }
+
+  toggleEnable() {
+    this.enabled = !this.enabled;
+    this.save();
+    return this;
+  }
+
+  async save() {
+    const res = await fetch(this.id?`api/tracks/${this.id}`:'api/tracks', {
+      method: this.id?'PUT':'POST',
+      headers: {'Accept': 'application/json'},
+      body: JSON.stringify(this),
+    });
+    if (res.status == 200) {
+      const data = await res.json();
+      this.update(data);
+      return data;
+    } else {
+      throw new Error((await res.json()).errmsg);
+    }
+  }
+}
+
+export async function getTracks() {
+  const res = await fetch(`api/tracks`, {headers: {'Accept': 'application/json'}})
+  if (res.status == 200) {
+    return (await res.json()).map((t) => new Track(t));
+  } else {
+    throw new Error((await res.json()).errmsg);
+  }
+}
+
+export async function getTrack(tid) {
+  const res = await fetch(`api/tracks/${tid}`, {headers: {'Accept': 'application/json'}})
+  if (res.status == 200) {
+    return new Track(await res.json());
+  } else {
+    throw new Error((await res.json()).errmsg);
+  }
+}

ui/src/routes/musiks/tracks/[tid]/+page.svelte

@@ -1,3 +1,39 @@
-<h2>
-    Track
-</h2>
+<script>
+ import { page } from '$app/stores';
+
+ import {
+     Container,
+     Input,
+     ListGroup,
+     ListGroupItem,
+     Spinner,
+ } from 'sveltestrap';
+
+ import { getTrack } from '../../../../lib/track';
+</script>
+
+{#await getTrack($page.params.tid)}
+    <div class="d-flex flex-fill justify-content-center align-items-center gap-2">
+        <Spinner color="primary" /> Chargement en cours&hellip;
+    </div>
+{:then track}
+    <Container>
+        <h2>
+            {track.name}
+        </h2>
+        <ListGroup>
+            <ListGroupItem>
+                <strong>Chemin</strong>
+                {track.path}
+            </ListGroupItem>
+            <ListGroupItem class="d-flex gap-2">
+                <strong>Active&nbsp;?</strong>
+                <Input type="switch" on:change={() => track.toggleEnable()} checked={track.enabled} />
+            </ListGroupItem>
+            <ListGroupItem>
+                <strong>ID</strong>
+                <span class="text-muted">{track.id}</span>
+            </ListGroupItem>
+        </ListGroup>
+    </Container>
+{/await}

ui/src/stores/tracks.js

@@ -0,0 +1,36 @@
+import { writable } from 'svelte/store';
+
+import { getTracks } from '../lib/track'
+
+function createTracksStore() {
+  const { subscribe, set, update } = writable({list: null});
+
+  return {
+    subscribe,
+
+    set: (v) => {
+      update((m) => Object.assign(m, v));
+    },
+
+    refresh: async () => {
+      const list = await getTracks();
+      update((m) => Object.assign(m, {list}));
+      return list;
+    },
+
+    update: (res_tracks, cb=null) => {
+      if (res_tracks.status === 200) {
+        res_tracks.json().then((list) => {
+          update((m) => (Object.assign(m, {list})));
+
+          if (cb) {
+            cb(list);
+          }
+        });
+      }
+    },
+  };
+
+}
+
+export const tracks = createTracksStore();