reveil/ui/src/lib/components/AlarmExceptionList.svelte
Pierre-Olivier Mercier 1378636a98
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/tag Build is passing
migration to Svelte 5
2025-01-04 15:53:07 +01:00

51 lines
1.7 KiB
Svelte

<script>
import { page } from '$app/stores';
import {
Button,
Icon,
Spinner,
} from '@sveltestrap/sveltestrap';
import DateRangeFormat from '$lib/components/DateRangeFormat.svelte';
import { alarmsExceptions } from '$lib/stores/alarmexceptions';
let { flush = false } = $props();
</script>
<div class="d-flex justify-content-between align-items-center" class:mx-2={flush}>
<h2>
Exceptions
</h2>
<a
href="alarms/exceptions/new"
class="btn btn-sm btn-outline-primary float-end {($page.params.kind === 'single' && $page.url.pathname.endsWith('/new'))?'active':''}"
>
<Icon name="plus-lg" />
</a>
</div>
<div class="text-center">
{#if $alarmsExceptions.list !== null}
{#if $alarmsExceptions.list.length}
<div class="list-group" class:list-group-flush={flush}>
{#each $alarmsExceptions.list as alarm (alarm.id)}
<a
href="alarms/exceptions/{alarm.id}"
class="list-group-item list-group-item-action"
class:active={$page.params.kind === "exceptions" && $page.params.aid === alarm.id}
>
Du <DateRangeFormat startDate={alarm._start()} endDate={alarm._end()} dateStyle="long" />
</a>
{/each}
</div>
{:else}
<p class="fst-italic">Pas d'exception programmée</p>
{/if}
{:else}
{#await alarmsExceptions.refresh()}
<div class="d-flex justify-content-center align-items-center gap-2">
<Spinner color="primary" /> Chargement en cours&hellip;
</div>
{/await}
{/if}
</div>