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

40 lines
1.0 KiB
Svelte

<script>
import { page } from '$app/stores';
import {
Container,
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}