Handle actions

ui/src/components/ActionList.svelte

@@ -0,0 +1,77 @@
+<script>
+ import { goto } from '$app/navigation';
+ import { page } from '$app/stores';
+
+ import {
+     Button,
+     Icon,
+     Spinner,
+ } from 'sveltestrap';
+
+ import { actions } from '../stores/actions';
+
+ export let flush = false;
+
+ export { className as class };
+ let className = '';
+
+ let refreshInProgress = false;
+ function refresh_actions() {
+     refreshInProgress = true;
+     actions.refresh().then(() => {
+         refreshInProgress = false;
+     });
+ }
+</script>
+
+<div class="d-flex justify-content-between align-items-center" class:px-2={flush}>
+    <h2>
+        Actions
+    </h2>
+    <div>
+        {#if !flush}
+            <Button
+                href="routines/actions"
+                color="outline-info"
+                size="sm"
+            >
+                <Icon name="pencil" />
+            </Button>
+        {/if}
+        <Button
+            color="outline-dark"
+            size="sm"
+            title="Rafraîchir la liste des actions"
+            on:click={refresh_actions}
+            disabled={refreshInProgress}
+        >
+            {#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}>
+    {#if $actions.list}
+        {#each $actions.list as action (action.id)}
+            <a
+                href="routines/actions/{action.id}"
+                class="list-group-item list-group-item-action"
+                class:active={$page.url.pathname.indexOf('/actions/') !== -1 && $page.params.aid == action.id}
+                aria-current="true"
+            >
+                <span class:fw-bold={action.enabled}>{action.name}</span>
+            </a>
+        {/each}
+    {:else}
+        {#await actions.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/action.js

@@ -0,0 +1,66 @@
+export class Action {
+  constructor(res) {
+    if (res) {
+      this.update(res);
+    }
+  }
+
+  update({ id, name, description, path, enabled }) {
+    this.id = id;
+    this.name = name;
+    this.description = description;
+    this.path = path;
+    this.enabled = enabled;
+  }
+
+  async delete() {
+    const res = await fetch(`api/actions/${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/actions/${this.id}`:'api/actions', {
+      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 getActions() {
+  const res = await fetch(`api/actions`, {headers: {'Accept': 'application/json'}})
+  if (res.status == 200) {
+    return (await res.json()).map((t) => new Action(t));
+  } else {
+    throw new Error((await res.json()).errmsg);
+  }
+}
+
+export async function getAction(aid) {
+  const res = await fetch(`api/actions/${aid}`, {headers: {'Accept': 'application/json'}})
+  if (res.status == 200) {
+    return new Action(await res.json());
+  } else {
+    throw new Error((await res.json()).errmsg);
+  }
+}

ui/src/routes/routines/+page.svelte

@@ -8,20 +8,28 @@
  } from 'sveltestrap';
 
  import CardRoutine from '../../components/CardRoutine.svelte';
+ import ActionList from '../../components/ActionList.svelte';
 </script>
 
 <Container fluid class="flex-fill d-flex flex-column py-2">
-    <Row cols={{xs: 1, md: 2, lg: 3}}>
-        <Col class="mb-4">
-        <CardRoutine />
+    <Row>
+        <Col md="8">
+        <Row cols={{xs: 1, lg: 2, xl: 3}}>
+            <Col class="mb-4">
+            <CardRoutine />
+            </Col>
+            <Col class="mb-4">
+            <Card
+                class="h-100 d-flex justify-content-center align-items-center fst-italic"
+                style="cursor: pointer; border-style: dashed; min-height: 5em;"
+            >
+                Ajouter une routine &hellip;
+            </Card>
+            </Col>
+        </Row>
         </Col>
-        <Col class="mb-4">
-        <Card
-            class="h-100 d-flex justify-content-center align-items-center fst-italic"
-            style="cursor: pointer; border-style: dashed;"
-        >
-            Ajouter une routine &hellip;
-        </Card>
+        <Col md="4">
+        <ActionList class="mb-5" />
         </Col>
     </Row>
 </Container>

ui/src/stores/actions.js

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