migration to Svelte 5

2025-01-04 15:52:29 +01:00 · 2025-01-04 15:52:29 +01:00 · 1378636a98
commit 1378636a98
parent a032d3a166
28 changed files with 164 additions and 206 deletions
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@ -10,6 +10,8 @@
 import Toaster from '$lib/components/Toaster.svelte';
 import { ToastsStore } from '$lib/stores/toasts';

+ let { children } = $props();
+
 window.onunhandledrejection = (e) => {
     ToastsStore.addErrorToast({
         message: e.reason,
@ -28,7 +30,7 @@
    class="d-none d-lg-flex py-2"
 />
 <div class="flex-fill d-flex flex-column bg-light">
-    <slot></slot>
+    {@render children?.()}
    <div class="d-flex d-lg-none mt-3 mb-5"></div>
 </div>
 <Toaster />
--- a/ui/src/routes/+page.svelte
+++ b/ui/src/routes/+page.svelte
@ -13,8 +13,8 @@
 import { alarmsSingle } from '$lib/stores/alarmsingle';
 import { quotes } from '$lib/stores/quotes';

- let nextAlarmP = getNextAlarm();
- let isActiveP = isAlarmActive();
+ let nextAlarmP = $state(getNextAlarm());
+ let isActiveP = $state(isAlarmActive());

 function reloadNextAlarm() {
     nextAlarmP = getNextAlarm();
@ -53,7 +53,7 @@
     });
 }

- let extinctionInProgress = false;
+ let extinctionInProgress = $state(false);
 </script>

 <Container class="flex-fill d-flex flex-column justify-content-center text-center">
@ -103,7 +103,7 @@
                <button
                    class="btn btn-lg btn-link"
                    title="Supprimer ce prochain réveil"
-                    on:click={dropNextAlarm}
+                    onclick={dropNextAlarm}
                >
                    <Icon name="x-circle-fill" />
                </button>
@ -123,14 +123,14 @@
                </a>
                <button
                    class="btn btn-info"
-                    on:click={() => newCyclesAlarm(5)}
+                    onclick={() => newCyclesAlarm(5)}
                >
                    <Icon name="node-plus" />
                    5 cycles
                </button>
                <button
                    class="btn btn-info"
-                    on:click={() => newCyclesAlarm(6)}
+                    onclick={() => newCyclesAlarm(6)}
                >
                    <Icon name="node-plus" />
                    6 cycles
@ -138,7 +138,7 @@
                <button
                    class="btn btn-outline-warning"
                    title="Lancer le réveil"
-                    on:click={() => { runAlarm(); setTimeout(reloadIsActiveAlarm, 500); }}
+                    onclick={() => { runAlarm(); setTimeout(reloadIsActiveAlarm, 500); }}
                >
                    <Icon name="play-circle" />
                    Lancer <span class="d-none d-lg-inline">le réveil</span>
@ -148,14 +148,14 @@
            <div class="d-flex gap-3 mt-3 justify-content-center">
                <button
                    class="btn btn-outline-info"
-                    on:click={alarmNextTrack}
+                    onclick={alarmNextTrack}
                >
                    <Icon name="skip-end-fill" />
                    Chanson suivante
                </button>
                <button
                    class="btn btn-danger"
-                    on:click={stopAlarm}
+                    onclick={stopAlarm}
                >
                    {#if extinctionInProgress}
                        <Spinner size="sm" />
--- a/ui/src/routes/alarms/[kind]/+layout.svelte
+++ b/ui/src/routes/alarms/[kind]/+layout.svelte
@ -13,6 +13,8 @@
 import AlarmRepeatedList from '$lib/components/AlarmRepeatedList.svelte';
 import AlarmExceptionList from '$lib/components/AlarmExceptionList.svelte';

+ let { children } = $props();
+
 function slugToComponent(slug) {
     switch(slug) {
         case "single":
@ -37,7 +39,7 @@
            <svelte:component this={slugToComponent($page.params["kind"])} flush={true} />
            </Col>
            <Col md={9} class="d-flex py-2">
-            <slot></slot>
+            {@render children?.()}
            </Col>
        </Row>
    </Container>
--- a/ui/src/routes/alarms/[kind]/[aid]/+page.svelte
+++ b/ui/src/routes/alarms/[kind]/[aid]/+page.svelte
@ -1,4 +1,6 @@
 <script>
+    import { run } from 'svelte/legacy';
+
 import {
     Button,
     Col,
@ -34,27 +36,20 @@
     }
 }

- let objP;
- let obj;
-
- $: {
-     switch ($page.params["kind"]) {
+ function callRightFunction(kind) {
+     switch(kind) {
         case "single":
-             objP = getAlarmSingle($page.params["aid"]);
-             break;
+             return getAlarmSingle;
         case "repeated":
-             objP = getAlarmRepeated($page.params["aid"]);
-             break;
+             return getAlarmRepeated;
         case "exceptions":
-             objP = getAlarmException($page.params["aid"]);
-             break;
+             return getAlarmException;
     }
-     objP.then((o) => obj = o);
 }

- let edit = false;
+ let edit = $state(false);

- function deleteThis() {
+ function deleteThis(obj) {
     obj.delete().then(() => {
         switch($page.params["kind"]) {
             case "single":
@ -74,12 +69,12 @@
 </script>

 <Container fluid class="flex-fill">
-    {#if $page.params["kind"] == "single"}
-        {#await objP}
-            <div class="d-flex justify-content-center align-items-center gap-2">
-                <Spinner color="primary" /> Chargement en cours&hellip;
-            </div>
-        {:then alarm}
+    {#await callRightFunction($page.params["kind"])($page.params["aid"])}
+        <div class="d-flex justify-content-center align-items-center gap-2">
+            <Spinner color="primary" /> Chargement en cours&hellip;
+        </div>
+    {:then alarm}
+        {#if $page.params["kind"] == "single"}
            <h2 class="mb-0">
                {slugToTitle($page.params["kind"])} du <DateFormat date={alarm.time} dateStyle="long" />
            </h2>
@ -97,16 +92,10 @@
                </ListGroupItem>
                <ListGroupItem class="d-flex">
                    <strong>Fédération activée&nbsp;?</strong>
-                    <Input type="switch" class="ms-2" on:change={() => {obj.enable_federation = !obj.enable_federation; obj.save();}} checked={obj.enable_federation} /> {obj.enable_federation?"oui":"non"}
+                    <Input type="switch" class="ms-2" on:change={() => {alarm.enable_federation = !alarm.enable_federation; alarm.save();}} checked={alarm.enable_federation} /> {alarm.enable_federation?"oui":"non"}
                </ListGroupItem>
            </ListGroup>
-        {/await}
-    {:else if $page.params["kind"] == "repeated"}
-        {#await objP}
-            <div class="d-flex justify-content-center align-items-center gap-2">
-                <Spinner color="primary" /> Chargement en cours&hellip;
-            </div>
-        {:then alarm}
+        {:else if $page.params["kind"] == "repeated"}
            <h2 class="mb-0">
                {slugToTitle($page.params["kind"])} des {weekdayStr(alarm.weekday)}s à {alarm.time}
            </h2>
@ -124,19 +113,19 @@
                </ListGroupItem>
                <ListGroupItem class="d-flex">
                    <strong>Alarme active&nbsp;?</strong>
-                    <Input type="switch" class="ms-2" on:change={() => {obj.disabled = !obj.disabled; obj.save().then(() => {obj.next_time = null; alarmsRepeated.refresh()});}} checked={!obj.disabled} /> {!obj.disabled?"oui":"non"}
+                    <Input type="switch" class="ms-2" on:change={() => {alarm.disabled = !alarm.disabled; alarm.save().then(() => {alarm.next_time = null; alarmsRepeated.refresh()});}} checked={!alarm.disabled} /> {!alarm.disabled?"oui":"non"}
                </ListGroupItem>
                <ListGroupItem class="d-flex">
                    <strong>Ignorer les exceptions&nbsp;?</strong>
-                    <Input type="switch" class="ms-2" on:change={() => {obj.ignore_exceptions = !obj.ignore_exceptions; obj.save();}} checked={obj.ignore_exceptions} /> {obj.ignore_exceptions?"oui":"non"}
+                    <Input type="switch" class="ms-2" on:change={() => {alarm.ignore_exceptions = !alarm.ignore_exceptions; alarm.save();}} checked={alarm.ignore_exceptions} /> {alarm.ignore_exceptions?"oui":"non"}
                </ListGroupItem>
                <ListGroupItem class="d-flex">
                    <strong>Fédération activée&nbsp;?</strong>
-                    <Input type="switch" class="ms-2" on:change={() => {obj.enable_federation = !obj.enable_federation; obj.save();}} checked={obj.enable_federation} /> {obj.enable_federation?"oui":"non"}
+                    <Input type="switch" class="ms-2" on:change={() => {alarm.enable_federation = !alarm.enable_federation; alarm.save();}} checked={alarm.enable_federation} /> {alarm.enable_federation?"oui":"non"}
                </ListGroupItem>
                {#if alarm.next_time}
                    <ListGroupItem>
-                        <strong>Prochaine occurrence</strong> <DateFormat date={new Date(obj.next_time)} dateStyle="long" />
+                        <strong>Prochaine occurrence</strong> <DateFormat date={new Date(alarm.next_time)} dateStyle="long" />
                    </ListGroupItem>
                {/if}
            </ListGroup>
@ -150,13 +139,7 @@
                    {/each}
                </ListGroup>
            {/if}
-        {/await}
-    {:else if $page.params["kind"] == "exceptions"}
-        {#await objP}
-            <div class="d-flex justify-content-center align-items-center gap-2">
-                <Spinner color="primary" /> Chargement en cours&hellip;
-            </div>
-        {:then exception}
+        {:else if $page.params["kind"] == "exceptions"}
            <h2 class="mb-0">
                {slugToTitle($page.params["kind"])} du <DateRangeFormat startDate={exception._start()} endDate={exception._end()} dateStyle="long" />
            </h2>
@ -166,11 +149,8 @@
                </p>
            {/if}
            Entre le <DateRangeFormat startDate={exception._start()} endDate={exception._end()} dateStyle="long" />
-        {/await}
-    {/if}
-
-    {#if !edit}
-        {#await objP then alarm}
+        {/if}
+        {#if !edit}
            <ListGroup class="my-2 text-center">
                <ListGroupItem
                    action
@ -185,12 +165,12 @@
                    action
                    tag="button"
                    class="text-danger fw-bold"
-                    on:click={deleteThis}
+                    on:click={() => deleteThis(alarm)}
                >
                    <Icon name="trash" />
                    Supprimer ce {slugToTitle($page.params["kind"]).toLowerCase()}
                </ListGroupItem>
            </ListGroup>
-        {/await}
-    {/if}
+        {/if}
+    {/await}
 </Container>
--- a/ui/src/routes/alarms/[kind]/new/+page.svelte
+++ b/ui/src/routes/alarms/[kind]/new/+page.svelte
@ -35,7 +35,7 @@
     }
 }

- let obj;
+ let obj = $state();

 const vtime = new Date(Date.now() + 7.6*3600000);

@ -56,7 +56,8 @@
         break;
 }

- function submit() {
+ function submit(e) {
+     e.preventDefault();
     obj.save().then((res) => {
         switch($page.params["kind"]) {
             case "single":
@ -76,7 +77,7 @@
 </script>

 <Container fluid class="flex-fill">
-    <form on:submit|preventDefault={submit}>
+    <form onsubmit={submit}>
        <Button type="submit" color="link" class="d-block d-md-none float-end">
            Ajouter
        </Button>
--- a/ui/src/routes/musiks/gongs/+layout.svelte
+++ b/ui/src/routes/musiks/gongs/+layout.svelte
@ -8,6 +8,8 @@
 } from '@sveltestrap/sveltestrap';

 import GongsList from '$lib/components/GongsList.svelte';
+
+ let { children } = $props();
 </script>

 <div class="d-flex flex-fill flex-column">
@ -22,7 +24,7 @@
            <GongsList edit flush />
            </Col>
            <Col md={9} class="d-flex py-2">
-            <slot></slot>
+            {@render children?.()}
            </Col>
        </Row>
    </Container>
--- a/ui/src/routes/musiks/gongs/[gid]/+page.svelte
+++ b/ui/src/routes/musiks/gongs/[gid]/+page.svelte
@ -22,7 +22,7 @@
     })
 }

- let confirmDeletion = false;
+ let confirmDeletion = $state(false);
 </script>

 {#await getGong($page.params.gid)}
--- a/ui/src/routes/musiks/gongs/new/+page.svelte
+++ b/ui/src/routes/musiks/gongs/new/+page.svelte
@ -15,7 +15,9 @@
 import { gongs } from '$lib/stores/gongs';
 import { uploadGong } from '$lib/gong';

- function submitGong() {
+ function submitGong(e) {
+     e.preventDefault();
+
     if (files.length == 0) {
         alert("Vous n'avez sélectionné aucun fichier !")
         return false;
@ -27,7 +29,7 @@
     })
 }

- export let files = [];
+ let { files = $bindable([]) } = $props();
 </script>

 <Container>
@ -35,7 +37,7 @@
        Nouveau gong
    </h2>

-    <form on:submit|preventDefault={submitGong}>
+    <form onsubmit={submitGong}>
        <Input type="file" bind:files />

        <Button type="submit" color="primary" class="mt-2" disabled={files.length == 0}>
--- a/ui/src/routes/musiks/tracks/+layout.svelte
+++ b/ui/src/routes/musiks/tracks/+layout.svelte
@ -8,6 +8,8 @@
 } from '@sveltestrap/sveltestrap';

 import TrackList from '$lib/components/TrackList.svelte';
+
+ let { children } = $props();
 </script>

 <div class="d-flex flex-fill flex-column">
@ -22,7 +24,7 @@
            <TrackList edit flush />
            </Col>
            <Col md={9} class="d-flex py-2">
-            <slot></slot>
+            {@render children?.()}
            </Col>
        </Row>
    </Container>
--- a/ui/src/routes/musiks/tracks/[tid]/+page.svelte
+++ b/ui/src/routes/musiks/tracks/[tid]/+page.svelte
@ -28,7 +28,7 @@
     })
 }

- let confirmDeletion = false;
+ let confirmDeletion = $state(false);
 </script>

 {#await getTrack($page.params.tid)}
--- a/ui/src/routes/musiks/tracks/new/+page.svelte
+++ b/ui/src/routes/musiks/tracks/new/+page.svelte
@ -15,7 +15,9 @@
 import { tracks } from '$lib/stores/tracks';
 import { uploadTrack } from '$lib/track';

- function submitTrack() {
+ function submitTrack(e) {
+     e.preventDefault();
+
     if (files.length == 0) {
         alert("Vous n'avez sélectionné aucun fichier !")
         return false;
@ -27,7 +29,7 @@
     })
 }

- export let files = [];
+ let { files = $bindable([]) } = $props();
 </script>

 <Container>
@ -35,7 +37,7 @@
        Nouvelle musique
    </h2>

-    <form on:submit|preventDefault={submitTrack}>
+    <form onsubmit={submitTrack}>
        <Input type="file" bind:files />

        <Button type="submit" color="primary" class="mt-2" disabled={files.length == 0}>
--- a/ui/src/routes/routines/actions/+layout.svelte
+++ b/ui/src/routes/routines/actions/+layout.svelte
@ -8,6 +8,8 @@
 } from '@sveltestrap/sveltestrap';

 import ActionList from '$lib/components/ActionList.svelte';
+
+ let { children } = $props();
 </script>

 <div class="d-flex flex-fill flex-column">
@ -22,7 +24,7 @@
            <ActionList edit flush />
            </Col>
            <Col md={9} class="d-flex py-2">
-            <slot></slot>
+            {@render children?.()}
            </Col>
        </Row>
    </Container>
--- a/ui/src/routes/settings/+page.svelte
+++ b/ui/src/routes/settings/+page.svelte
@ -17,13 +17,7 @@
 import { getSettings } from '$lib/settings';
 import FederationSettings from '$lib/components/FederationSettings.svelte';

- let settingsP = getSettings();
-
- $: settingsP.then((s) => settings = s);
-
- let settings;
-
- async function submitSettings() {
+ async function submitSettings(settings) {
     await tick();
     settings.save();
 }
@ -33,12 +27,12 @@
    <h2>
        Paramètres
    </h2>
-    <Form on:submit={submitSettings}>
-        {#await settingsP}
-            <div class="d-flex justify-content-center align-items-center gap-2">
-                <Spinner color="primary" /> Chargement en cours&hellip;
-            </div>
-        {:then}
+    {#await getSettings()}
+        <div class="d-flex justify-content-center align-items-center gap-2">
+            <Spinner color="primary" /> Chargement en cours&hellip;
+        </div>
+    {:then settings}
+        <Form on:submit={() => submitSettings(settings)}>
            <FormGroup>
                <Label for="gongIntervals">Intervalle entre les gongs</Label>
                <InputGroup>
@ -47,7 +41,7 @@
                        id="gongIntervals"
                        placeholder="20"
                        bind:value={settings.gong_interval}
-                        on:input={submitSettings}
+                        on:input={() => submitSettings(settings)}
                    />
                    <InputGroupText>min</InputGroupText>
                </InputGroup>
@ -61,7 +55,7 @@
                        id="weatherDelay"
                        placeholder="5"
                        bind:value={settings.weather_delay}
-                        on:input={submitSettings}
+                        on:input={() => submitSettings(settings)}
                    />
                    <InputGroupText>min</InputGroupText>
                </InputGroup>
@ -74,7 +68,7 @@
                        type="select"
                        id="weatherRituel"
                        bind:value={settings.weather_action}
-                        on:input={submitSettings}
+                        on:input={() => submitSettings(settings)}
                    >
                    {#each $actions.list as action (action.id)}
                        <option value="{action.path}">{action.name}</option>
@ -97,7 +91,7 @@
                        id="preAlarmDelay"
                        placeholder="5"
                        bind:value={settings.pre_alarm_delay}
-                        on:input={submitSettings}
+                        on:input={() => submitSettings(settings)}
                    />
                    <InputGroupText>min</InputGroupText>
                </InputGroup>
@ -110,7 +104,7 @@
                        type="select"
                        id="preAlarmRituel"
                        bind:value={settings.pre_alarm_action}
-                        on:input={submitSettings}
+                        on:input={() => submitSettings(settings)}
                    >
                    {#each $actions.list as action (action.id)}
                        <option value="{action.path}">{action.name}</option>
@ -129,7 +123,7 @@
                    type="select"
                    id="greetingLanguage"
                    bind:value={settings.language}
-                    on:input={submitSettings}
+                    on:input={() => submitSettings(settings)}
                >
                    <option value="fr_FR">Français</option>
                    <option value="en_US">Anglais</option>
@ -146,7 +140,7 @@
                        id="maxRunTime"
                        placeholder="60"
                        bind:value={settings.max_run_time}
-                        on:input={submitSettings}
+                        on:input={() => submitSettings(settings)}
                    />
                    <InputGroupText>min</InputGroupText>
                </InputGroup>
@ -161,7 +155,7 @@
                        min="0"
                        max="65535"
                        bind:value={settings.max_volume}
-                        on:input={submitSettings}
+                        on:input={() => submitSettings(settings)}
                    />
                </InputGroup>
            </FormGroup>
@ -171,9 +165,9 @@
                <FederationSettings
                    id="federation"
                    bind:value={settings.federation}
-                    on:input={submitSettings}
+                    on:input={() => submitSettings(settings)}
                />
            </FormGroup>
-        {/await}
-    </Form>
+        </Form>
+    {/await}
 </Container>