Working on next alarm retrieval

ui/src/lib/alarmrepeated.js

@@ -5,13 +5,15 @@ export class AlarmRepeated {
     }
   }
 
-  update({ id, weekday, time, routines, ignore_exceptions, comment }) {
+  update({ id, weekday, time, routines, ignore_exceptions, comment, excepts, next_time }) {
     this.id = id;
     this.weekday = weekday;
     this.time = time;
     this.routines = routines;
     this.ignore_exceptions = ignore_exceptions;
     this.comment = comment;
+    this.excepts = excepts;
+    this.next_time = next_time;
   }
 
   async delete() {

ui/src/lib/alarmsingle.js

@@ -61,3 +61,28 @@ export async function getAlarmSingle(aid) {
     throw new Error((await res.json()).errmsg);
   }
 }
+
+export async function getNextAlarm() {
+  const res = await fetch(`api/alarms/next`, {headers: {'Accept': 'application/json'}})
+  if (res.status == 200) {
+    return new Date(await res.json());
+  } else {
+    throw new Error((await res.json()).errmsg);
+  }
+}
+
+export async function newNCyclesAlarm(nCycles) {
+  const res = await fetch('api/alarms/single', {
+    method: 'POST',
+    headers: {'Accept': 'application/json'},
+    body: JSON.stringify({
+      time: new Date(Date.now() + 600000 + 5400000 * nCycles)
+    }),
+  });
+  if (res.status == 200) {
+    const data = await res.json();
+    return new AlarmSingle(data);
+  } else {
+    throw new Error((await res.json()).errmsg);
+  }
+}

ui/src/routes/+layout.svelte

@@ -21,6 +21,7 @@
 />
 <div class="flex-fill d-flex flex-column bg-light">
     <slot></slot>
+    <div class="d-flex d-lg-none mt-1 mb-4"></div>
 </div>
 <Toaster />
 <Header

ui/src/routes/+page.svelte

@@ -4,7 +4,19 @@
      Icon,
  } from 'sveltestrap';
 
+ import DateFormat from '../components/DateFormat.svelte';
+ import { getNextAlarm, newNCyclesAlarm } from '../lib/alarmsingle';
+ import { alarmsSingle } from '../stores/alarmsingle';
  import { quotes } from '../stores/quotes';
+
+ let nextAlarmP = getNextAlarm();
+
+ function newCyclesAlarm(ncycles) {
+     newNCyclesAlarm(ncycles).then(() => {
+         nextAlarmP = getNextAlarm();
+         alarmsSingle.clear();
+     })
+ }
 </script>
 
 <Container class="flex-fill d-flex flex-column justify-content-center text-center">
@@ -24,19 +36,48 @@
             </div>
         {/await}
     {/if}
-    <div class="display-5 mb-4">
-        Prochain réveil&nbsp;: demain matin à 7h10 (dans 5 cycles)
+    <div class="display-5 mb-5">
+        {#await nextAlarmP}
+        {:then nextalarm}
+            Prochain réveil&nbsp;:
+            {#if nextalarm.getDay() == new Date().getDay() && nextalarm.getMonth() == new Date().getMonth() && nextalarm.getFullYear() == new Date().getFullYear()}
+                aujourd'hui à
+                <DateFormat date={nextalarm} timeStyle="long" />
+                <br class="d-block d-md-none" />
+                <span class="text-muted">(dans {Math.trunc((nextalarm.getTime()-Date.now())/5400000)}&nbsp;cycles + {Math.trunc(((nextalarm.getTime()-Date.now())%5400000)/60000)}&nbsp;min)</span>
+            {:else if nextalarm.getDay() == new Date(Date.now() + 86400000).getDay() && nextalarm.getMonth() == new Date(Date.now() + 86400000).getMonth() && nextalarm.getFullYear() == new Date(Date.now() + 86400000).getFullYear()}
+                demain à
+                <DateFormat date={nextalarm} timeStyle="long" />
+                <br class="d-block d-md-none" />
+                <span class="text-muted">(dans {Math.trunc((nextalarm.getTime()-Date.now())/5400000)}&nbsp;cycles + {Math.trunc(((nextalarm.getTime()-Date.now())%5400000)/60000)}&nbsp;min)</span>
+            {:else if nextalarm.getTime() < Date.now() + 604800000}
+                <span title={nextalarm}>{nextalarm.toLocaleString('default', {weekday: 'long'})}</span>
+                à
+                <DateFormat date={nextalarm} timeStyle="long" />
+            {:else}
+                <DateFormat date={nextalarm} dateStyle="short" timeStyle="long" />
+            {/if}
+        {/await}
     </div>
     <div class="d-flex gap-3 justify-content-center">
-        <button class="btn btn-primary">
+        <a
+            href="alarms/single/new"
+            class="btn btn-primary"
+        >
             <Icon name="node-plus" />
             Programmer un nouveau réveil
-        </button>
-        <button class="btn btn-info">
+        </a>
+        <button
+            class="btn btn-info"
+            on:click={() => newCyclesAlarm(5)}
+        >
             <Icon name="node-plus" />
             5 cycles
         </button>
-        <button class="btn btn-info">
+        <button
+            class="btn btn-info"
+            on:click={() => newCyclesAlarm(6)}
+        >
             <Icon name="node-plus" />
             6 cycles
         </button>

ui/src/routes/alarms/[kind]/[aid]/+page.svelte

@@ -51,9 +51,7 @@
      objP.then((o) => obj = o);
  }
 
- function editThis() {
-     goto('alarms/' + $page.params["kind"]);
- }
+ let edit = false;
 
  function deleteThis() {
      obj.delete().then(() => {
@@ -84,6 +82,11 @@
             <h2 class="mb-0">
                 {slugToTitle($page.params["kind"])} du <DateFormat date={alarm.time} dateStyle="long" />
             </h2>
+            {#if alarm.comment}
+                <p>
+                    {alarm.comment}
+                </p>
+            {/if}
             <ListGroup class="my-2">
                 <ListGroupItem>
                     <strong>Date du réveil</strong> <DateFormat date={alarm.time} dateStyle="long" />
@@ -100,8 +103,13 @@
             </div>
         {:then alarm}
             <h2 class="mb-0">
-                {slugToTitle($page.params["kind"])} des {weekdayStr(alarm.weekday)} à {alarm.time}
+                {slugToTitle($page.params["kind"])} des {weekdayStr(alarm.weekday)}s à {alarm.time}
             </h2>
+            {#if alarm.comment}
+                <p>
+                    {alarm.comment}
+                </p>
+            {/if}
             <ListGroup class="my-2">
                 <ListGroupItem>
                     <strong>Jour de la semaine</strong> {weekdayStr(alarm.weekday)}
@@ -112,7 +120,22 @@
                 <ListGroupItem>
                     <strong>Ignorer les exceptions&nbsp;?</strong> {alarm.ignore_exceptions?"oui":"non"}
                 </ListGroupItem>
+                {#if alarm.next_time}
+                    <ListGroupItem>
+                        <strong>Prochaine occurrence</strong> <DateFormat date={new Date(alarm.next_time)} dateStyle="long" />
+                    </ListGroupItem>
+                {/if}
             </ListGroup>
+            {#if alarm.excepts}
+                <h3>Prochaines exceptions</h3>
+                <ListGroup class="my-2">
+                    {#each alarm.excepts as except}
+                        <ListGroupItem>
+                            <DateFormat date={new Date(except)} dateStyle="long" />
+                        </ListGroupItem>
+                    {/each}
+                </ListGroup>
+            {/if}
         {/await}
     {:else if $page.params["kind"] == "exceptions"}
         {#await objP}
@@ -123,30 +146,37 @@
             <h2 class="mb-0">
                 {slugToTitle($page.params["kind"])} du <DateRangeFormat startDate={exception._start()} endDate={exception._end()} dateStyle="long" />
             </h2>
+            {#if exception.comment}
+                <p>
+                    {exception.comment}
+                </p>
+            {/if}
             Entre le <DateRangeFormat startDate={exception._start()} endDate={exception._end()} dateStyle="long" />
         {/await}
     {/if}
 
-    {#await objP then alarm}
-        <ListGroup class="my-2 text-center">
-            <ListGroupItem
-                action
-                tag="button"
-                class="text-info fw-bold"
-                on:click={editThis}
-            >
-                <Icon name="pencil" />
-                Éditer ce {slugToTitle($page.params["kind"]).toLowerCase()}
-            </ListGroupItem>
-            <ListGroupItem
-                action
-                tag="button"
-                class="text-danger fw-bold"
-                on:click={deleteThis}
-            >
-                <Icon name="trash" />
-                Supprimer ce {slugToTitle($page.params["kind"]).toLowerCase()}
-            </ListGroupItem>
-        </ListGroup>
-    {/await}
+    {#if !edit}
+        {#await objP then alarm}
+            <ListGroup class="my-2 text-center">
+                <ListGroupItem
+                    action
+                    tag="button"
+                    class="text-info fw-bold"
+                    on:click={() => edit = !edit}
+                >
+                    <Icon name="pencil" />
+                    Éditer ce {slugToTitle($page.params["kind"]).toLowerCase()}
+                </ListGroupItem>
+                <ListGroupItem
+                    action
+                    tag="button"
+                    class="text-danger fw-bold"
+                    on:click={deleteThis}
+                >
+                    <Icon name="trash" />
+                    Supprimer ce {slugToTitle($page.params["kind"]).toLowerCase()}
+                </ListGroupItem>
+            </ListGroup>
+        {/await}
+    {/if}
 </Container>

ui/src/routes/alarms/[kind]/new/+page.svelte

@@ -148,6 +148,11 @@
             </FormGroup>
         {/if}
 
+        <FormGroup>
+            <Label for="comment">Commentaire</Label>
+            <Input id="comment" type="text" bind:value={obj.comment} />
+        </FormGroup>
+
         <Button type="submit" color="primary" class="d-none d-md-block">
             Ajouter
         </Button>