95 lines
2.9 KiB
Svelte
95 lines
2.9 KiB
Svelte
<script>
|
|
import { goto } from '$app/navigation';
|
|
import { page } from '$app/stores';
|
|
|
|
import {
|
|
Button,
|
|
Container,
|
|
Input,
|
|
Icon,
|
|
ListGroup,
|
|
ListGroupItem,
|
|
Spinner,
|
|
} from 'sveltestrap';
|
|
|
|
import { getGong } from '$lib/gong';
|
|
import { gongs } from '$lib/stores/gongs';
|
|
|
|
function deleteThis(gong) {
|
|
gong.delete().then(() => {
|
|
gongs.refresh();
|
|
goto('musiks/gongs/');
|
|
})
|
|
}
|
|
|
|
let confirmDeletion = false;
|
|
</script>
|
|
|
|
{#await getGong($page.params.gid)}
|
|
<div class="d-flex flex-fill justify-content-center align-items-center gap-2">
|
|
<Spinner color="primary" /> Chargement en cours…
|
|
</div>
|
|
{:then gong}
|
|
<Container>
|
|
<h2>
|
|
{gong.name}
|
|
</h2>
|
|
<ListGroup>
|
|
<ListGroupItem>
|
|
<strong>Chemin</strong>
|
|
{gong.path}
|
|
</ListGroupItem>
|
|
<ListGroupItem class="d-flex gap-2">
|
|
<strong>Par défaut ?</strong>
|
|
<Input type="switch" on:change={() => gong.setDefault()} checked={gong.enabled} disabled={gong.enabled} />
|
|
</ListGroupItem>
|
|
<ListGroupItem>
|
|
<strong>ID</strong>
|
|
<span class="text-muted">{gong.id}</span>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
|
|
<div class="my-2 d-flex justify-content-center">
|
|
<audio controls class="w-100 rounded">
|
|
<source src="api/gongs/{gong.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={gong.enabled?"fw-bold":"text-danger fw-bold"}
|
|
disabled={gong.enabled}
|
|
on:click={() => confirmDeletion = !confirmDeletion}
|
|
>
|
|
<Icon name="trash" />
|
|
Supprimer ce gong
|
|
</ListGroupItem>
|
|
{:else}
|
|
<ListGroupItem>
|
|
<p class="fw-bold">
|
|
Êtes-vous sûr ?
|
|
</p>
|
|
<div class="d-flex justify-content-around">
|
|
<Button
|
|
color="danger"
|
|
on:click={() => deleteThis(gong)}
|
|
>
|
|
<Icon name="heartbreak-fill" /> Oui, supprimer ce gong
|
|
</Button>
|
|
<Button
|
|
color="outline-success"
|
|
on:click={() => confirmDeletion = !confirmDeletion}
|
|
>
|
|
<Icon name="balloon-heart" /> Non, garder le gong
|
|
</Button>
|
|
</div>
|
|
</ListGroupItem>
|
|
{/if}
|
|
</ListGroup>
|
|
</Container>
|
|
{/await}
|