reveil/ui/src/routes/routines/actions/[aid]/+page.svelte

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

 import {
     Container,
     Icon,
     Input,
     ListGroup,
     ListGroupItem,
     Spinner,
 } from '@sveltestrap/sveltestrap';

 import { getAction } from '$lib/action';
 import { actions } from '$lib/stores/actions';

 function deleteThis(action) {
     action.delete().then(() => {
         actions.refresh();
         goto('routines/actions/');
     })
 }
</script>

{#await getAction($page.params.aid)}
    <div class="d-flex flex-fill justify-content-center align-items-center gap-2">
        <Spinner color="primary" /> Chargement en cours&hellip;
    </div>
{:then action}
    <Container>
        <h2>
            {action.name}
        </h2>
        <p class="text-muted">
            {action.description}
        </p>
        <ListGroup>
            <ListGroupItem>
                <strong>Chemin</strong>
                {action.path}
            </ListGroupItem>
            <ListGroupItem class="d-flex gap-2">
                <strong>Actif&nbsp;?</strong>
                <Input type="switch" on:change={() => action.toggleEnable()} checked={action.enabled} />
            </ListGroupItem>
        </ListGroup>

        <ListGroup class="my-2 text-center">
            <ListGroupItem
                action
                tag="button"
                class="text-success fw-bold"
                on:click={() => action.launch()}
            >
                <Icon name="play-fill" />
                Lancer cette action
            </ListGroupItem>
            <ListGroupItem
                action
                tag="button"
                class="text-danger fw-bold"
                on:click={() => deleteThis(action)}
            >
                <Icon name="trash" />
                Supprimer cette action
            </ListGroupItem>
        </ListGroup>
    </Container>
{/await}