139 lines
5.0 KiB
Svelte
139 lines
5.0 KiB
Svelte
<script>
|
|
import {
|
|
Container,
|
|
Icon,
|
|
} from 'sveltestrap';
|
|
|
|
import CycleCounter from '$lib/components/CycleCounter.svelte';
|
|
import DateFormat from '$lib/components/DateFormat.svelte';
|
|
import { isAlarmActive, alarmNextTrack, runAlarm, alarmStop } from '$lib/alarm';
|
|
import { getNextAlarm, newNCyclesAlarm } from '$lib/alarmsingle';
|
|
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();
|
|
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 :
|
|
{#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>
|