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

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

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

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

 function reloadNextAlarm() {
     nextAlarmP = getNextAlarm();
     alarmsSingle.clear();
 }
 function reloadIsActiveAlarm() {
     isActiveP = isAlarmActive();
     return isActiveP;
 }

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

 function stopAlarm() {
     alarmStop();
     reloadIsActiveAlarm().then((isActive) => {
         if (isActive) {
             setTimeout(reloadIsActiveAlarm, 10000);
         }
     })
 }
</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}
            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}
        {/await}
    </div>
    {#await isActiveP then isActive}
        {#if !isActive}
            <div class="d-flex gap-3 justify-content-center">
                <a
                    href="alarms/single/new"
                    class="btn btn-primary"
                >
                    <Icon name="node-plus" />
                    Programmer un nouveau réveil
                </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"
                    on:click={() => { runAlarm(); reloadIsActiveAlarm(); }}
                >
                    <Icon name="play-circle" />
                    Lancer le réveil
                </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}
                >
                    <Icon name="stop-circle" />
                    É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>