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

<script>
    import { run } from 'svelte/legacy';

 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";
     }
 }

 function callRightFunction(kind) {
     switch(kind) {
         case "single":
             return getAlarmSingle;
         case "repeated":
             return getAlarmRepeated;
         case "exceptions":
             return getAlarmException;
     }
 }

 let edit = $state(false);

 function deleteThis(obj) {
     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">
    {#await callRightFunction($page.params["kind"])($page.params["aid"])}
        <div class="d-flex justify-content-center align-items-center gap-2">
            <Spinner color="primary" /> Chargement en cours&hellip;
        </div>
    {:then alarm}
        {#if $page.params["kind"] == "single"}
            <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>
                <ListGroupItem class="d-flex">
                    <strong>Fédération activée&nbsp;?</strong>
                    <Input type="switch" class="ms-2" on:change={() => {alarm.enable_federation = !alarm.enable_federation; alarm.save();}} checked={alarm.enable_federation} /> {alarm.enable_federation?"oui":"non"}
                </ListGroupItem>
            </ListGroup>
        {:else if $page.params["kind"] == "repeated"}
            <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={() => {alarm.disabled = !alarm.disabled; alarm.save().then(() => {alarm.next_time = null; alarmsRepeated.refresh()});}} checked={!alarm.disabled} /> {!alarm.disabled?"oui":"non"}
                </ListGroupItem>
                <ListGroupItem class="d-flex">
                    <strong>Ignorer les exceptions&nbsp;?</strong>
                    <Input type="switch" class="ms-2" on:change={() => {alarm.ignore_exceptions = !alarm.ignore_exceptions; alarm.save();}} checked={alarm.ignore_exceptions} /> {alarm.ignore_exceptions?"oui":"non"}
                </ListGroupItem>
                <ListGroupItem class="d-flex">
                    <strong>Fédération activée&nbsp;?</strong>
                    <Input type="switch" class="ms-2" on:change={() => {alarm.enable_federation = !alarm.enable_federation; alarm.save();}} checked={alarm.enable_federation} /> {alarm.enable_federation?"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}
        {:else if $page.params["kind"] == "exceptions"}
            <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" />
        {/if}
        {#if !edit}
            <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(alarm)}
                >
                    <Icon name="trash" />
                    Supprimer ce {slugToTitle($page.params["kind"]).toLowerCase()}
                </ListGroupItem>
            </ListGroup>
        {/if}
    {/await}
</Container>