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

<script>
 import {
     Container,
     Icon,
     Spinner,
 } from '@sveltestrap/sveltestrap';

 import CycleCounter from '$lib/components/CycleCounter.svelte';
 import DateFormat from '$lib/components/DateFormat.svelte';
 import { isAlarmActive, alarmNextTrack, runAlarm, alarmStop, deleteNextAlarm } from '$lib/alarm';
 import { getNextAlarm, newNCyclesAlarm } from '$lib/alarmsingle';
 import { alarmsExceptions } from '$lib/stores/alarmexceptions';
 import { alarmsSingle } from '$lib/stores/alarmsingle';
 import { quotes } from '$lib/stores/quotes';

 let nextAlarmP = getNextAlarm();
 let isActiveP = isAlarmActive();

 function reloadNextAlarm() {
     nextAlarmP = getNextAlarm();
     alarmsSingle.clear();
 }
 function reloadIsActiveAlarm() {
     isActiveP = isAlarmActive();
     isActiveP.then((isActive) => {
         if (!isActive) {
             extinctionInProgress = false;
         }
     })
     return isActiveP;
 }

 function newCyclesAlarm(ncycles) {
     newNCyclesAlarm(ncycles).then(reloadNextAlarm);
 }

 function stopAlarm() {
     extinctionInProgress = true;
     alarmStop();
     reloadIsActiveAlarm().then((isActive) => {
         if (isActive) {
             setTimeout(reloadIsActiveAlarm, 10000);
             setTimeout(reloadIsActiveAlarm, 25000);
         }
     })
 }

 function dropNextAlarm() {
     deleteNextAlarm().then(() => {
         alarmsExceptions.clear();
         alarmsSingle.clear();
         reloadNextAlarm();
     });
 }

 let extinctionInProgress = false;
</script>

<Container class="flex-fill d-flex flex-column justify-content-center text-center">
    {#if $quotes.quoteOfTheDay}
        <figure>
            <blockquote class="blockquote text-muted">
                <p class="display-6">{$quotes.quoteOfTheDay.content}</p>
            </blockquote>
            <figcaption class="blockquote-footer">
                {$quotes.quoteOfTheDay.author}
            </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-5">
        {#await nextAlarmP}
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        {:then nextalarm}
            {#if nextalarm === null}
                <Icon name="x-octagon" /> Pas de prochain réveil programmé
            {:else}
                <Icon name="alarm-fill" /> 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" />
                    <CycleCounter ends={nextalarm} on:reload={reloadNextAlarm} />
                {: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" />
                    <CycleCounter ends={nextalarm} on:reload={reloadNextAlarm} />
                {: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}
                <button
                    class="btn btn-lg btn-link"
                    title="Supprimer ce prochain réveil"
                    on:click={dropNextAlarm}
                >
                    <Icon name="x-circle-fill" />
                </button>
            {/if}
        {/await}
    </div>
    {#await isActiveP then isActive}
        {#if !isActive}
            <div class="d-flex gap-3 justify-content-center">
                <a
                    href="alarms/single/new"
                    title="Programmer un nouveau réveil"
                    class="btn btn-primary d-flex align-items-center justify-content-center gap-2"
                >
                    <Icon name="node-plus" />
                    Programmer <span class="d-none d-lg-inline">un nouveau réveil</span>
                </a>
                <button
                    class="btn btn-info"
                    on:click={() => newCyclesAlarm(5)}
                >
                    <Icon name="node-plus" />
                    5 cycles
                </button>
                <button
                    class="btn btn-info"
                    on:click={() => newCyclesAlarm(6)}
                >
                    <Icon name="node-plus" />
                    6 cycles
                </button>
                <button
                    class="btn btn-outline-warning"
                    title="Lancer le réveil"
                    on:click={() => { runAlarm(); setTimeout(reloadIsActiveAlarm, 500); }}
                >
                    <Icon name="play-circle" />
                    Lancer <span class="d-none d-lg-inline">le réveil</span>
                </button>
            </div>
        {:else}
            <div class="d-flex gap-3 mt-3 justify-content-center">
                <button
                    class="btn btn-outline-info"
                    on:click={alarmNextTrack}
                >
                    <Icon name="skip-end-fill" />
                    Chanson suivante
                </button>
                <button
                    class="btn btn-danger"
                    on:click={stopAlarm}
                >
                    {#if extinctionInProgress}
                        <Spinner size="sm" />
                    {:else}
                        <Icon name="stop-circle" />
                    {/if}
                    Éteindre le réveil
                </button>
                <button class="btn btn-outline-info">
                    <Icon name="fast-forward-fill" />
                    Passer cette étape de la routine
                </button>
            </div>
        {/if}
    {/await}
</Container>