Handle routines

ui/src/components/CardRoutine.svelte

@@ -1,7 +1,9 @@
 <script>
  import {
+     Badge,
      Button,
      Card,
+     CardBody,
      CardHeader,
      Col,
      Container,
@@ -11,25 +13,11 @@
      Icon,
  } from 'sveltestrap';
 
+ import { actions_idx } from '../stores/actions';
+
  export let routine = {
-     title: "Classique",
-     steps: [
-         {
-             id: 1,
-             name: "Salutation & heure",
-             start: 0,
-         },
-         {
-             id: 2,
-             name: "7 min workout",
-             start: 60,
-         },
-         {
-             id: 3,
-             name: "RATP traffic",
-             start: 540,
-         },
-     ],
+     name: "Classique",
+     steps: [],
  };
 </script>
 
@@ -49,11 +37,26 @@
         >
             <Icon name="pencil" />
         </Button>
-        {routine.title}
+        {routine.name}
     </CardHeader>
-    <ListGroup>
-        {#each routine.steps as step (step.id)}
-            <ListGroupItem action>{step.name}</ListGroupItem>
-        {/each}
-    </ListGroup>
+    {#if routine.steps}
+        <ListGroup>
+            {#each routine.steps as step}
+                <ListGroupItem action>
+                    {#if $actions_idx && $actions_idx[step.action]}
+                        {$actions_idx[step.action].name}
+                    {:else}
+                        {step.action}
+                    {/if}
+                    <Badge class="float-end">
+                        {step.delay/60} min
+                    </Badge>
+                </ListGroupItem>
+            {/each}
+        </ListGroup>
+    {:else}
+        <CardBody>
+            Aucune action définie.
+        </CardBody>
+    {/if}
 </Card>

ui/src/lib/routine.js

@@ -0,0 +1,61 @@
+export class Routine {
+  constructor(res) {
+    if (res) {
+      this.update(res);
+    }
+  }
+
+  update({ id, name, path, steps }) {
+    this.id = id;
+    this.name = name;
+    this.path = path;
+
+    steps.sort((a, b) => a.delay - b.delay);
+    this.steps = steps;
+  }
+
+  async delete() {
+    const res = await fetch(`api/routines/${this.id}`, {
+      method: 'DELETE',
+      headers: {'Accept': 'application/json'}
+    });
+    if (res.status == 200) {
+      return true;
+    } else {
+      throw new Error((await res.json()).errmsg);
+    }
+  }
+
+  async save() {
+    const res = await fetch(this.id?`api/routines/${this.id}`:'api/routines', {
+      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 getRoutines() {
+  const res = await fetch(`api/routines`, {headers: {'Accept': 'application/json'}})
+  if (res.status == 200) {
+    return (await res.json()).map((r) => new Routine(r));
+  } else {
+    throw new Error((await res.json()).errmsg);
+  }
+}
+
+export async function getRoutine(rid) {
+  const res = await fetch(`api/routines/${rid}`, {headers: {'Accept': 'application/json'}})
+  if (res.status == 200) {
+    return new Routine(await res.json());
+  } else {
+    throw new Error((await res.json()).errmsg);
+  }
+}

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

@@ -3,10 +3,13 @@
      Card,
      Col,
      Container,
-     Row,
      Icon,
+     Row,
+     Spinner,
  } from 'sveltestrap';
 
+ import { routines } from '../../stores/routines';
+
  import CardRoutine from '../../components/CardRoutine.svelte';
  import ActionList from '../../components/ActionList.svelte';
 </script>
@@ -16,7 +19,19 @@
         <Col md="8">
         <Row cols={{xs: 1, lg: 2, xl: 3}}>
             <Col class="mb-4">
-            <CardRoutine />
+            {#if $routines.list}
+                {#each $routines.list as routine (routine.id)}
+                    <CardRoutine {routine} />
+                {/each}
+            {:else}
+                {#await routines.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}
             </Col>
             <Col class="mb-4">
             <Card

ui/src/stores/actions.js

@@ -1,9 +1,9 @@
-import { writable } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 
 import { getActions } from '../lib/action'
 
 function createActionsStore() {
-  const { subscribe, set, update } = writable({list: null});
+  const { subscribe, set, update } = writable({list: null, fileIdx: null});
 
   return {
     subscribe,
@@ -14,14 +14,28 @@ function createActionsStore() {
 
     refresh: async () => {
       const list = await getActions();
-      update((m) => Object.assign(m, {list}));
+      const fileIdx = {};
+      list.forEach(function(action, k) {
+	fileIdx[action.path] = action;
+      });
+
+      update((m) => (Object.assign(m, {list, fileIdx})));
       return list;
     },
 
+    getActionByFilename: (fname) => {
+
+    },
+
     update: (res_actions, cb=null) => {
       if (res_actions.status === 200) {
         res_actions.json().then((list) => {
-          update((m) => (Object.assign(m, {list})));
+	  const fileIdx = {};
+	  list.forEach(function(action, k) {
+	    fileIdx[action.path] = action;
+	  })
+
+          update((m) => (Object.assign(m, {list, fileIdx})));
 
           if (cb) {
             cb(list);
@@ -34,3 +48,8 @@ function createActionsStore() {
 }
 
 export const actions = createActionsStore();
+
+export const actions_idx = derived(
+  actions,
+  ($actions) => ($actions.fileIdx),
+);

ui/src/stores/routines.js

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