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';
 import { tracks } from '$lib/stores/tracks';

 function toggleEnable(track) {
     track.toggleEnable().then((t) => {
         tracks.refresh();
         goto('musiks/tracks/' + t.id);
     })
 }
 function deleteThis(track) {
     track.delete().then(() => {
         tracks.refresh();
         goto('musiks/tracks/');
     })
 }
</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={() => toggleEnable(track)} checked={track.enabled} />
            </ListGroupItem>
            <ListGroupItem>
                <strong>ID</strong>
                <span class="text-muted">{track.id}</span>
            </ListGroupItem>
        </ListGroup>

        <ListGroup class="my-2 text-center">
            <ListGroupItem
                action
                tag="button"
                class="text-danger fw-bold"
                on:click={() => deleteThis(track)}
            >
                <Icon name="trash" />
                Supprimer cette piste
            </ListGroupItem>
        </ListGroup>
    </Container>
{/await}