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

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

 import {
     Button,
     Container,
     Icon,
     Input,
     ListGroup,
     ListGroupItem,
     Spinner,
 } from '@sveltestrap/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/');
     })
 }

 let confirmDeletion = false;
</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>

        <div class="my-2 d-flex justify-content-center">
            <audio controls class="w-100 rounded">
                <source src="api/tracks/{track.id}/stream">
                Your browser does not support the audio element.
            </audio>
        </div>

        <ListGroup class="my-2 text-center">
            {#if !confirmDeletion}
                <ListGroupItem
                    action
                    tag="button"
                    class="text-danger fw-bold"
                    on:click={() => confirmDeletion = !confirmDeletion}
                >
                    <Icon name="trash" />
                    Supprimer cette piste
                </ListGroupItem>
            {:else}
                <ListGroupItem>
                    <p class="fw-bold">
                        Êtes-vous sûr&nbsp;?
                    </p>
                    <div class="d-flex justify-content-around">
                        <Button
                            color="danger"
                            on:click={() => deleteThis(track)}
                        >
                            <Icon name="heartbreak-fill" /> Oui, supprimer cette piste
                        </Button>
                        <Button
                            color="outline-success"
                            on:click={() => confirmDeletion = !confirmDeletion}
                        >
                            <Icon name="balloon-heart" /> Non, garder la piste
                        </Button>
                    </div>
                </ListGroupItem>
            {/if}
        </ListGroup>
    </Container>
{/await}