2022-10-01 17:37:12 +00:00
|
|
|
<script>
|
|
|
|
import {
|
|
|
|
Container,
|
|
|
|
Icon,
|
2022-10-15 12:21:26 +00:00
|
|
|
Spinner,
|
2022-10-01 17:37:12 +00:00
|
|
|
} from 'sveltestrap';
|
2022-10-04 10:29:16 +00:00
|
|
|
|
2022-10-15 09:12:51 +00:00
|
|
|
import CycleCounter from '$lib/components/CycleCounter.svelte';
|
|
|
|
import DateFormat from '$lib/components/DateFormat.svelte';
|
2022-12-08 15:43:56 +00:00
|
|
|
import { isAlarmActive, alarmNextTrack, runAlarm, alarmStop, deleteNextAlarm } from '$lib/alarm';
|
2022-10-14 18:08:03 +00:00
|
|
|
import { getNextAlarm, newNCyclesAlarm } from '$lib/alarmsingle';
|
2022-12-08 15:43:56 +00:00
|
|
|
import { alarmsExceptions } from '$lib/stores/alarmexceptions';
|
2022-10-15 09:12:51 +00:00
|
|
|
import { alarmsSingle } from '$lib/stores/alarmsingle';
|
|
|
|
import { quotes } from '$lib/stores/quotes';
|
2022-10-06 12:02:56 +00:00
|
|
|
|
|
|
|
let nextAlarmP = getNextAlarm();
|
2022-10-14 18:08:03 +00:00
|
|
|
let isActiveP = isAlarmActive();
|
2022-10-06 12:02:56 +00:00
|
|
|
|
2022-10-06 12:48:36 +00:00
|
|
|
function reloadNextAlarm() {
|
|
|
|
nextAlarmP = getNextAlarm();
|
|
|
|
alarmsSingle.clear();
|
|
|
|
}
|
2022-10-14 18:08:03 +00:00
|
|
|
function reloadIsActiveAlarm() {
|
|
|
|
isActiveP = isAlarmActive();
|
2022-10-15 12:21:26 +00:00
|
|
|
isActiveP.then((isActive) => {
|
|
|
|
if (!isActive) {
|
|
|
|
extinctionInProgress = false;
|
|
|
|
}
|
|
|
|
})
|
2022-10-14 18:08:03 +00:00
|
|
|
return isActiveP;
|
|
|
|
}
|
2022-10-06 12:48:36 +00:00
|
|
|
|
2022-10-06 12:02:56 +00:00
|
|
|
function newCyclesAlarm(ncycles) {
|
2022-10-06 12:48:36 +00:00
|
|
|
newNCyclesAlarm(ncycles).then(reloadNextAlarm);
|
2022-10-06 12:02:56 +00:00
|
|
|
}
|
2022-10-14 18:08:03 +00:00
|
|
|
|
|
|
|
function stopAlarm() {
|
2022-10-15 12:21:26 +00:00
|
|
|
extinctionInProgress = true;
|
2022-10-14 18:08:03 +00:00
|
|
|
alarmStop();
|
|
|
|
reloadIsActiveAlarm().then((isActive) => {
|
|
|
|
if (isActive) {
|
|
|
|
setTimeout(reloadIsActiveAlarm, 10000);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
2022-10-15 12:21:26 +00:00
|
|
|
|
2022-12-08 15:43:56 +00:00
|
|
|
function dropNextAlarm() {
|
|
|
|
deleteNextAlarm().then(() => {
|
|
|
|
alarmsExceptions.clear();
|
|
|
|
alarmsSingle.clear();
|
|
|
|
reloadNextAlarm();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-10-15 12:21:26 +00:00
|
|
|
let extinctionInProgress = false;
|
2022-10-01 17:37:12 +00:00
|
|
|
</script>
|
|
|
|
|
2022-10-02 21:24:33 +00:00
|
|
|
<Container class="flex-fill d-flex flex-column justify-content-center text-center">
|
2022-10-04 10:29:16 +00:00
|
|
|
{#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}
|
2022-10-06 12:02:56 +00:00
|
|
|
<div class="display-5 mb-5">
|
|
|
|
{#await nextAlarmP}
|
2022-10-14 18:08:03 +00:00
|
|
|
<div class="spinner-border" role="status">
|
|
|
|
<span class="visually-hidden">Loading...</span>
|
|
|
|
</div>
|
2022-10-06 12:02:56 +00:00
|
|
|
{:then nextalarm}
|
2022-10-15 12:34:55 +00:00
|
|
|
{#if nextalarm === null}
|
|
|
|
<Icon name="x-octagon" /> Pas de prochain réveil programmé
|
2022-10-06 12:02:56 +00:00
|
|
|
{:else}
|
2022-10-15 12:34:55 +00:00
|
|
|
<Icon name="alarm-fill" /> Prochain réveil :
|
|
|
|
{#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}
|
2022-12-08 15:43:56 +00:00
|
|
|
<button
|
|
|
|
class="btn btn-lg btn-link"
|
|
|
|
title="Supprimer ce prochain réveil"
|
|
|
|
on:click={dropNextAlarm}
|
|
|
|
>
|
|
|
|
<Icon name="x-circle-fill" />
|
|
|
|
</button>
|
2022-10-06 12:02:56 +00:00
|
|
|
{/if}
|
|
|
|
{/await}
|
2022-10-01 17:37:12 +00:00
|
|
|
</div>
|
2022-10-14 18:08:03 +00:00
|
|
|
{#await isActiveP then isActive}
|
|
|
|
{#if !isActive}
|
|
|
|
<div class="d-flex gap-3 justify-content-center">
|
|
|
|
<a
|
|
|
|
href="alarms/single/new"
|
2022-12-08 21:09:19 +00:00
|
|
|
title="Programmer un nouveau réveil"
|
|
|
|
class="btn btn-primary d-flex align-items-center justify-content-center gap-2"
|
2022-10-14 18:08:03 +00:00
|
|
|
>
|
|
|
|
<Icon name="node-plus" />
|
2022-12-08 21:09:19 +00:00
|
|
|
Programmer <span class="d-none d-lg-inline">un nouveau réveil</span>
|
2022-10-14 18:08:03 +00:00
|
|
|
</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"
|
2022-12-08 21:09:19 +00:00
|
|
|
title="Lancer le réveil"
|
2022-10-14 18:08:03 +00:00
|
|
|
on:click={() => { runAlarm(); reloadIsActiveAlarm(); }}
|
|
|
|
>
|
|
|
|
<Icon name="play-circle" />
|
2022-12-08 21:09:19 +00:00
|
|
|
Lancer <span class="d-none d-lg-inline">le réveil</span>
|
2022-10-14 18:08:03 +00:00
|
|
|
</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}
|
|
|
|
>
|
2022-10-15 12:21:26 +00:00
|
|
|
{#if extinctionInProgress}
|
|
|
|
<Spinner size="sm" />
|
|
|
|
{:else}
|
|
|
|
<Icon name="stop-circle" />
|
|
|
|
{/if}
|
2022-10-14 18:08:03 +00:00
|
|
|
É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}
|
2022-10-01 17:37:12 +00:00
|
|
|
</Container>
|