Handle gongs

ui/src/components/GongsList.svelte

@@ -5,29 +5,15 @@
  import {
      Button,
      Icon,
+     Spinner,
  } from 'sveltestrap';
 
- let gongs = [
-     {
-         id: 1,
-         title: "Coq",
-     },
-     {
-         id: 2,
-         title: "Marseillaise",
-         enabled: true,
-     },
-     {
-         id: 3,
-         title: "Trompette de l'armée française",
-     },
- ];
+ import { gongs } from '../stores/gongs';
 
  function chooseGong(gong) {
-     gongs = gongs.map((g) => {
-         g.enabled = g.id == gong.id
-         return g;
-     })
+     gong.setDefault().then(() => {
+         gongs.refresh();
+     });
  }
 
  export let flush = false;
@@ -35,6 +21,14 @@
 
  export { className as class };
  let className = '';
+
+ let refreshInProgress = false;
+ function refresh_gongs() {
+     refreshInProgress = true;
+     gongs.refresh().then(() => {
+         refreshInProgress = false;
+     });
+ }
 </script>
 
 <div class="d-flex justify-content-between align-items-center" class:px-2={flush}>
@@ -61,27 +55,43 @@
         <Button
             color="outline-dark"
             size="sm"
+            title="Rafraîchir la liste des gongs"
+            on:click={refresh_gongs}
+            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 gongs as gong (gong.id)}
-        <button
-            type="button"
-            class="list-group-item list-group-item-action"
-            class:active={(edit && $page.url.pathname.indexOf('/gongs/') !== -1 && $page.params.gid == gong.id) || (!edit && gong.enabled)}
-            aria-current="true"
-            on:click={() => {
-                     if (edit) {
-                         goto('musiks/gongs/' + gong.id);
-                     } else {
-                         chooseGong(gong);
-                     }
-                     }}
-        >
-            {gong.title}
-        </button>
-    {/each}
+    {#if $gongs.list}
+        {#each $gongs.list as gong (gong.id)}
+            <button
+                type="button"
+                class="list-group-item list-group-item-action"
+                class:active={(edit && $page.url.pathname.indexOf('/gongs/') !== -1 && $page.params.gid == gong.id) || (!edit && gong.enabled)}
+                aria-current="true"
+                on:click={() => {
+                         if (edit) {
+                             goto('musiks/gongs/' + gong.id);
+                         } else {
+                             chooseGong(gong);
+                         }
+                         }}
+            >
+                {gong.name}
+            </button>
+        {/each}
+    {:else}
+        {#await gongs.refresh()}
+            <div class="d-flex justify-content-center align-items-center gap-2">
+                <Spinner color="primary" /> Chargement en cours&hellip;
+            </div>
+        {:then gongs}
+        {/await}
+    {/if}
 </div>

ui/src/lib/gong.js

@@ -0,0 +1,64 @@
+export class Gong {
+  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/gongs/${this.id}`, {
+      method: 'DELETE',
+      headers: {'Accept': 'application/json'}
+    });
+    if (res.status == 200) {
+      return true;
+    } else {
+      throw new Error((await res.json()).errmsg);
+    }
+  }
+
+  async setDefault() {
+    this.enabled = !this.enabled;
+    return await this.save();
+  }
+
+  async save() {
+    const res = await fetch(this.id?`api/gongs/${this.id}`:'api/gongs', {
+      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 getGongs() {
+  const res = await fetch(`api/gongs`, {headers: {'Accept': 'application/json'}})
+  if (res.status == 200) {
+    return (await res.json()).map((g) => new Gong(g));
+  } else {
+    throw new Error((await res.json()).errmsg);
+  }
+}
+
+export async function getGong(gid) {
+  const res = await fetch(`api/gongs/${gid}`, {headers: {'Accept': 'application/json'}})
+  if (res.status == 200) {
+    return new Gong(await res.json());
+  } else {
+    throw new Error((await res.json()).errmsg);
+  }
+}

ui/src/routes/musiks/gongs/[gid]/+page.svelte

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

ui/src/stores/gongs.js

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