reveil/ui/src/routes/musiks/tracks/[tid]/+page.svelte

<script>
 import { goto } from '$app/navigation';
 import { page } from '$app/stores';

 import {
     Container,
     Icon,
     Input,
     ListGroup,
     ListGroupItem,
     Spinner,
 } from 'sveltestrap';

 import { getTrack } from '$lib/track';
</script>

{#await getTrack($page.params.tid)}
    <div class="d-flex flex-fill justify-content-center align-items-center gap-2">
        <Spinner color="primary" /> Chargement en cours&hellip;
    </div>
{:then track}
    <Container>
        <h2>
            {track.name}
        </h2>
        <ListGroup>
            <ListGroupItem>
                <strong>Chemin</strong>
                {track.path}
            </ListGroupItem>
            <ListGroupItem class="d-flex gap-2">
                <strong>Active&nbsp;?</strong>
                <Input type="switch" on:change={() => track.toggleEnable()} checked={track.enabled} />
            </ListGroupItem>
            <ListGroupItem>
                <strong>ID</strong>
                <span class="text-muted">{track.id}</span>
            </ListGroupItem>
        </ListGroup>
    </Container>
{/await}