Handle quote of the day

ui/src/routes/+page.svelte

@@ -3,17 +3,27 @@
      Container,
      Icon,
  } from 'sveltestrap';
+
+ import { quotes } from '../stores/quotes';
 </script>
 
 <Container class="flex-fill d-flex flex-column justify-content-center text-center">
-    <figure>
+    {#if $quotes.quoteOfTheDay}
-        <blockquote class="blockquote text-muted">
+        <figure>
-            <p class="display-6">A well-known quote, contained in a blockquote element.</p>
+            <blockquote class="blockquote text-muted">
-        </blockquote>
+                <p class="display-6">{$quotes.quoteOfTheDay.content}</p>
-        <figcaption class="blockquote-footer">
+            </blockquote>
-            Someone famous in <cite title="Source Title">Source Title</cite>
+            <figcaption class="blockquote-footer">
-        </figcaption>
+                {$quotes.quoteOfTheDay.author}
-    </figure>
+            </figcaption>
+        </figure>
+    {:else}
+        {#await quotes.refreshQOTD()}
+            <div class="spinner-border" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        {/await}
+    {/if}
     <div class="display-5 mb-4">
         Prochain réveil&nbsp;: demain matin à 7h10 (dans 5 cycles)
     </div>

ui/src/stores/quotes.js

@@ -0,0 +1,43 @@
+import { writable } from 'svelte/store';
+
+function createQuotesStore() {
+  const { subscribe, set, update } = writable({quotes: [], quoteOfTheDay: null});
+
+  return {
+    subscribe,
+
+    set: (quotes) => {
+      update((m) => Object.assign(m, {quotes}));
+    },
+
+    setQOTD: (quoteOfTheDay) => {
+      update((m) => Object.assign(m, {quoteOfTheDay}));
+    },
+
+    refreshQOTD: async () => {
+      const res = await fetch(`api/quoteoftheday`, {headers: {'Accept': 'application/json'}})
+      if (res.status == 200) {
+        const quoteOfTheDay = await res.json();
+        update((m) => Object.assign(m, {quoteOfTheDay}));
+        return quoteOfTheDay;
+      } else {
+        throw new Error((await res.json()).errmsg);
+      }
+    },
+
+    update: (res_quotes, cb=null) => {
+      if (res_quotes.status === 200) {
+        res_quotes.json().then((quotes) => {
+          update((m) => (Object.assign(m, {quotes})));
+
+          if (cb) {
+            cb(quotes);
+          }
+        });
+      }
+    },
+  };
+
+}
+
+export const quotes = createQuotesStore();