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

<script>
 import {
     Button,
     Col,
     Container,
     Icon,
     Input,
     ListGroup,
     ListGroupItem,
     Row,
     Spinner,
 } from '@sveltestrap/sveltestrap';

 import { goto } from '$app/navigation';
 import { page } from '$app/stores';

 import DateFormat from '$lib/components/DateFormat.svelte';
 import DateRangeFormat from '$lib/components/DateRangeFormat.svelte';
 import { getAlarmSingle } from '$lib/alarmsingle';
 import { getAlarmRepeated, weekdayStr } from '$lib/alarmrepeated';
 import { getAlarmException } from '$lib/alarmexception';
 import { alarmsRepeated } from '$lib/stores/alarmrepeated';
 import { alarmsSingle } from '$lib/stores/alarmsingle';
 import { alarmsExceptions } from '$lib/stores/alarmexceptions';

 function slugToTitle(slug) {
     switch(slug) {
         case "single":
             return "Réveil manuel";
         case "repeated":
             return "Réveil habituel";
         case "exceptions":
             return "Exception";
     }
 }

 let objP;
 let obj;

 $: {
     switch ($page.params["kind"]) {
         case "single":
             objP = getAlarmSingle($page.params["aid"]);
             break;
         case "repeated":
             objP = getAlarmRepeated($page.params["aid"]);
             break;
         case "exceptions":
             objP = getAlarmException($page.params["aid"]);
             break;
     }
     objP.then((o) => obj = o);
 }

 let edit = false;

 function deleteThis() {
     obj.delete().then(() => {
         switch($page.params["kind"]) {
             case "single":
                 alarmsSingle.clear();
                 break;
             case "repeated":
                 alarmsRepeated.clear();
                 break;
             case "exceptions":
                 alarmsExceptions.clear();
                 break;
         }

         goto('alarms/' + $page.params["kind"]);
     })
 }
</script>

<Container fluid class="flex-fill">
    {#if $page.params["kind"] == "single"}
        {#await objP}
            <div class="d-flex justify-content-center align-items-center gap-2">
                <Spinner color="primary" /> Chargement en cours&hellip;
            </div>
        {:then alarm}
            <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" />
                </ListGroupItem>
                <ListGroupItem>
                    <strong>Heure du réveil</strong> <DateFormat date={alarm.time} timeStyle="long" />
                </ListGroupItem>
            </ListGroup>
        {/await}
    {:else if $page.params["kind"] == "repeated"}
        {#await objP}
            <div class="d-flex justify-content-center align-items-center gap-2">
                <Spinner color="primary" /> Chargement en cours&hellip;
            </div>
        {:then alarm}
            <h2 class="mb-0">
                {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)}
                </ListGroupItem>
                <ListGroupItem>
                    <strong>Heure du réveil</strong> {alarm.time}
                </ListGroupItem>
                <ListGroupItem class="d-flex">
                    <strong>Alarme active&nbsp;?</strong>
                    <Input type="switch" class="ms-2" on:change={() => {obj.disabled = !obj.disabled; obj.save().then(() => {obj.next_time = null; alarmsRepeated.refresh()});}} checked={!obj.disabled} /> {!obj.disabled?"oui":"non"}
                </ListGroupItem>
                <ListGroupItem class="d-flex">
                    <strong>Ignorer les exceptions&nbsp;?</strong>
                    <Input type="switch" class="ms-2" on:change={() => {obj.ignore_exceptions = !obj.ignore_exceptions; obj.save();}} checked={obj.ignore_exceptions} /> {obj.ignore_exceptions?"oui":"non"}
                </ListGroupItem>
                {#if alarm.next_time}
                    <ListGroupItem>
                        <strong>Prochaine occurrence</strong> <DateFormat date={new Date(obj.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}
            <div class="d-flex justify-content-center align-items-center gap-2">
                <Spinner color="primary" /> Chargement en cours&hellip;
            </div>
        {:then exception}
            <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}

    {#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>