nemunaire/reveil
1
0
Fork 0
Code Issues 1 Pull Requests 1 Releases 23 Activity

Add a confirmation before deleting the song

Browse Source
This commit is contained in:
nemunaire 2022-10-15 13:36:25 +02:00
parent 2bcac6edd1
commit 14b95876c5
2 changed files with 69 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
ui/src/routes/musiks/gongs/[gid]/+page.svelte
View File

@ -3,6 +3,7 @@
import { page } from '$app/stores'; import { page } from '$app/stores';
import { import {
Button,
Container, Container,
Input, Input,
Icon, Icon,
@ -20,6 +21,8 @@
goto('musiks/gongs/'); goto('musiks/gongs/');
}) })
} }
let confirmDeletion = false;
</script> </script>
{#await getGong($page.params.gid)} {#await getGong($page.params.gid)}
@ -47,15 +50,38 @@
</ListGroup> </ListGroup>
<ListGroup class="my-2 text-center"> <ListGroup class="my-2 text-center">
<ListGroupItem {#if !confirmDeletion}
action <ListGroupItem
tag="button" action
class="text-danger fw-bold" tag="button"
on:click={() => deleteThis(gong)} class={gong.enabled?"fw-bold":"text-danger fw-bold"}
> disabled={gong.enabled}
<Icon name="trash" /> on:click={() => confirmDeletion = !confirmDeletion}
Supprimer ce gong >
</ListGroupItem> <Icon name="trash" />
Supprimer ce gong
</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(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> </ListGroup>
</Container> </Container>
{/await} {/await}

43
ui/src/routes/musiks/tracks/[tid]/+page.svelte
View File

@ -3,6 +3,7 @@
import { page } from '$app/stores'; import { page } from '$app/stores';
import { import {
Button,
Container, Container,
Icon, Icon,
Input, Input,
@ -26,6 +27,8 @@
goto('musiks/tracks/'); goto('musiks/tracks/');
}) })
} }
let confirmDeletion = false;
</script> </script>
{#await getTrack($page.params.tid)} {#await getTrack($page.params.tid)}
@ -60,15 +63,37 @@
</div> </div>
<ListGroup class="my-2 text-center"> <ListGroup class="my-2 text-center">
<ListGroupItem {#if !confirmDeletion}
action <ListGroupItem
tag="button" action
class="text-danger fw-bold" tag="button"
on:click={() => deleteThis(track)} class="text-danger fw-bold"
> on:click={() => confirmDeletion = !confirmDeletion}
<Icon name="trash" /> >
Supprimer cette piste <Icon name="trash" />
</ListGroupItem> 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> </ListGroup>
</Container> </Container>
{/await} {/await}