88 lines
2.2 KiB
Svelte
88 lines
2.2 KiB
Svelte
<script>
|
|
import { goto } from '$app/navigation';
|
|
import { page } from '$app/stores';
|
|
|
|
import {
|
|
Button,
|
|
Icon,
|
|
} from 'sveltestrap';
|
|
|
|
let musiks = [
|
|
{
|
|
id: 1,
|
|
title: "Hall Of Fame",
|
|
artist: "The Script",
|
|
enabled: true,
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Poker face",
|
|
artist: "Lady Gaga",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Puisque tu m'aimes encore",
|
|
artist: "Céline Dion",
|
|
enabled: true,
|
|
},
|
|
];
|
|
|
|
export let flush = false;
|
|
export let edit = false;
|
|
|
|
export { className as class };
|
|
let className = '';
|
|
</script>
|
|
|
|
<div class="d-flex justify-content-between align-items-center" class:px-2={flush}>
|
|
<h2>
|
|
Musiques {#if !flush}du réveil{/if}
|
|
</h2>
|
|
<div>
|
|
{#if !edit}
|
|
<Button
|
|
href="musiks/tracks"
|
|
color="outline-info"
|
|
size="sm"
|
|
>
|
|
<Icon name="pencil" />
|
|
</Button>
|
|
{/if}
|
|
<Button
|
|
href="musiks/tracks/new"
|
|
color="outline-primary"
|
|
size="sm"
|
|
>
|
|
<Icon name="plus-lg" />
|
|
</Button>
|
|
<Button
|
|
color="outline-dark"
|
|
size="sm"
|
|
>
|
|
<Icon name="arrow-clockwise" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div class="list-group {className}" class:list-group-flush={flush}>
|
|
{#each musiks as track (track.id)}
|
|
<button
|
|
type="button"
|
|
class="list-group-item list-group-item-action"
|
|
class:active={$page.url.pathname.indexOf('/tracks/') !== -1 && $page.params.tid == track.id}
|
|
aria-current="true"
|
|
on:click={() => {
|
|
if (edit) {
|
|
goto('musiks/tracks/' + track.id)
|
|
} else {
|
|
track.enabled = !track.enabled
|
|
}
|
|
}}
|
|
>
|
|
{#if !edit}
|
|
<input class="form-check-input me-1" type="checkbox" checked={track.enabled}>
|
|
{/if}
|
|
<span class:fw-bold={!edit && track.enabled}>{track.artist} – {track.title}</span>
|
|
</button>
|
|
{/each}
|
|
</div>
|