migration to Svelte 5

ui/src/lib/components/ActionList.svelte

@@ -9,12 +9,9 @@
 
  import { actions } from '$lib/stores/actions';
 
- export let flush = false;
+ let { flush = false, class: className = '' } = $props();
 
- export { className as class };
+ let refreshInProgress = $state(false);
- let className = '';
-
- let refreshInProgress = false;
  function refresh_actions() {
      refreshInProgress = true;
      actions.refresh().then(() => {
@@ -29,13 +26,12 @@
     </h2>
     <div>
         {#if !flush}
-            <Button
+            <a
                 href="routines/actions"
-                color="outline-info"
+                class="btn btn-sm btn-outline-info"
-                size="sm"
             >
                 <Icon name="pencil" />
-            </Button>
+            </a>
         {/if}
         <Button
             color="outline-dark"

ui/src/lib/components/AlarmExceptionList.svelte

@@ -10,21 +10,19 @@
  import DateRangeFormat from '$lib/components/DateRangeFormat.svelte';
  import { alarmsExceptions } from '$lib/stores/alarmexceptions';
 
- export let flush = false;
+ let { flush = false } = $props();
 </script>
 
 <div class="d-flex justify-content-between align-items-center" class:mx-2={flush}>
     <h2>
         Exceptions
     </h2>
-    <Button
+    <a
         href="alarms/exceptions/new"
-        color="outline-primary"
+        class="btn btn-sm btn-outline-primary float-end {($page.params.kind === 'single' && $page.url.pathname.endsWith('/new'))?'active':''}"
-        size="sm"
-        class="float-end {($page.params.kind === 'exceptions' && $page.url.pathname.endsWith('/new'))?'active':''}"
     >
         <Icon name="plus-lg" />
-    </Button>
+    </a>
 </div>
 <div class="text-center">
     {#if $alarmsExceptions.list !== null}

ui/src/lib/components/AlarmRepeatedList.svelte

@@ -10,21 +10,19 @@
  import { weekdayStr } from '$lib/alarmrepeated';
  import { alarmsRepeated } from '$lib/stores/alarmrepeated';
 
- export let flush = false;
+ let { flush = false } = $props();
 </script>
 
 <div class="d-flex justify-content-between align-items-center" class:mx-2={flush}>
     <h2>
         Réveils habituels
     </h2>
-    <Button
+    <a
         href="alarms/repeated/new"
-        color="outline-primary"
+        class="btn btn-sm btn-outline-primary float-end {($page.params.kind === 'single' && $page.url.pathname.endsWith('/new'))?'active':''}"
-        size="sm"
-        class="float-end {($page.params.kind === 'repeated' && $page.url.pathname.endsWith('/new'))?'active':''}"
     >
         <Icon name="plus-lg" />
-    </Button>
+    </a>
 </div>
 <div class="text-center">
     {#if $alarmsRepeated.list !== null}

ui/src/lib/components/AlarmSingleList.svelte

@@ -10,21 +10,19 @@
  import DateFormat from '$lib/components/DateFormat.svelte';
  import { alarmsSingle } from '$lib/stores/alarmsingle';
 
- export let flush = false;
+ let { flush = false } = $props();
 </script>
 
 <div class="d-flex justify-content-between align-items-center" class:mx-2={flush}>
     <h2>
         Réveils manuels
     </h2>
-    <Button
+    <a
         href="alarms/single/new"
-        color="outline-primary"
+        class="btn btn-sm btn-outline-primary float-end {($page.params.kind === 'single' && $page.url.pathname.endsWith('/new'))?'active':''}"
-        size="sm"
-        class="float-end {($page.params.kind === 'single' && $page.url.pathname.endsWith('/new'))?'active':''}"
     >
         <Icon name="plus-lg" />
-    </Button>
+    </a>
 </div>
 <div class="text-center">
     {#if $alarmsSingle.list !== null}

ui/src/lib/components/CardRoutine.svelte

@@ -15,10 +15,10 @@
 
  import { actions_idx } from '$lib/stores/actions';
 
- export let routine = {
+ let { routine = {
      name: "Classique",
      steps: [],
- };
+ } } = $props();
 </script>
 
 <Card>

ui/src/lib/components/CardStatAlarms.svelte

@@ -7,12 +7,12 @@
      Icon,
  } from '@sveltestrap/sveltestrap';
 
- export let awakingList = [
+ let { awakingList = [
      {
          id: 1,
          date: new Date("2022-10-01T09:15:00.000Z"),
      },
- ];
+ ] } = $props();
 </script>
 
 <Card>

ui/src/lib/components/CardStatRoutines.svelte

@@ -8,13 +8,13 @@
      Icon,
  } from '@sveltestrap/sveltestrap';
 
- export let routinesStats = [
+ let { routinesStats = [
      {
          id: 1,
          name: "Classique",
          nb: 10,
      },
- ];
+ ] } = $props();
 </script>
 
 <Card>

ui/src/lib/components/CycleCounter.svelte

@@ -1,9 +1,6 @@
-<script>
+<script lang="ts">
  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
 
- export let begins = null;
- export let ends;
-
  const dispatch = createEventDispatcher();
 
  let interval;
@@ -24,8 +21,7 @@
      }
  });
 
- export { className as class };
+ let { begins = $bindable(null), ends, class: className = 'text-muted' } = $props();
- let className = 'text-muted';
 </script>
 
 {#if begins && ends}

ui/src/lib/components/DateFormat.svelte

@@ -1,7 +1,5 @@
 <script>
- export let date;
+ let { date, dateStyle, timeStyle } = $props();
- export let dateStyle;
- export let timeStyle;
 
  function formatDate(input, dateStyle, timeStyle) {
      if (typeof input === 'string') {

ui/src/lib/components/DateRangeFormat.svelte

@@ -1,8 +1,10 @@
 <script>
- export let startDate;
+ let {
- export let endDate;
+     startDate,
- export let dateStyle;
+     endDate,
- export let timeStyle;
+     dateStyle,
+     timeStyle
+ } = $props();
 
  function formatRange(startDate, endDate, dateStyle, timeStyle) {
      if (typeof input === 'string') {

ui/src/lib/components/DateTimeInput.svelte

@@ -5,16 +5,15 @@
      Input,
  } from '@sveltestrap/sveltestrap';
 
- export let format = 'YYYY-MM-DD HH:mm';
+ let {
- export let date = new Date();
+     format = 'YYYY-MM-DD HH:mm',
+     date = $bindable(new Date()),
+     class: className = '',
+     id = null,
+     required = false
+ } = $props();
 
- let className = '';
+ let internal = $state();
- export { className as class };
-
- export let id = null;
- export let required = false;
-
- let internal;
 
  const input = (x) => (internal = dayjs(x).format(format));
  const output = (x) => {
@@ -24,8 +23,12 @@
      }
  };
 
- $: input(date)
+ $effect(() => {
- $: output(internal)
+     input(date)
+ });
+ $effect(() => {
+     output(internal)
+ });
 </script>
 
 <Input type="datetime-local" class={className} id={id} {required} bind:value={internal} />

ui/src/lib/components/FederationSettings.svelte

@@ -14,8 +14,7 @@
 
  const dispatch = createEventDispatcher();
 
- export let id = "";
+ let { id = "", value = $bindable({ }) } = $props();
- export let value = { };
 
  function changeKey(bak, to) {
      if (bak === null && to.target.value) {
@@ -29,7 +28,7 @@
      }
  }
 
- const syncInProgress = { };
+ const syncInProgress = $state({ });
  async function syncMusic(srv) {
      syncInProgress[srv] = true;
 
@@ -64,12 +63,13 @@
                     bind:value={value[key].url}
                     on:change={() => dispatch("input")}
                 />
-                <Button
+                <a
                     href={value[key].url}
+                    class="btn btn-secondary"
                     target="_blank"
                 >
                     <Icon name="globe" />
-                </Button>
+                </a>
             </InputGroup>
         </Col>
         <Col>

ui/src/lib/components/GongsList.svelte

@@ -16,13 +16,9 @@
      });
  }
 
- export let flush = false;
+ let { flush = false, edit = false, class: className = '' } = $props();
- export let edit = false;
 
- export { className as class };
+ let refreshInProgress = $state(false);
- let className = '';
-
- let refreshInProgress = false;
  function refresh_gongs() {
      refreshInProgress = true;
      gongs.refresh().then(() => {
@@ -37,26 +33,24 @@
     </h2>
     <div>
         {#if !edit}
-            <Button
+            <a
                 href="musiks/gongs"
-                color="outline-info"
+                class="btn btn-sm btn-outline-info"
-                size="sm"
             >
                 <Icon name="pencil" />
-            </Button>
+            </a>
         {/if}
-        <Button
+        <a
             href="musiks/gongs/new"
-            color="outline-primary"
+            class="btn btn-sm btn-outline-primary"
-            size="sm"
         >
             <Icon name="plus-lg" />
-        </Button>
+        </a>
         <Button
             color="outline-dark"
             size="sm"
             title="Rafraîchir la liste des gongs"
-            on:click={refresh_gongs}
+            onclick={refresh_gongs}
             disabled={refreshInProgress}
         >
             {#if !refreshInProgress}
@@ -75,7 +69,7 @@
                 class="list-group-item list-group-item-action"
                 class:active={(edit && $page.url.pathname.indexOf('/gongs/') !== -1 && $page.params.gid == gong.id) || (!edit && gong.enabled)}
                 aria-current="true"
-                on:click={() => {
+                onclick={() => {
                          if (edit) {
                              goto('musiks/gongs/' + gong.id);
                          } else {

ui/src/lib/components/Header.svelte

@@ -12,15 +12,7 @@
 
  const version = fetch('api/version', {headers: {'Accept': 'application/json'}}).then((res) => res.json())
 
- export let activemenu = "";
+ let { class: className = '' } = $props();
- $: {
-     const path = $page.url.pathname.split("/");
-     if (path.length > 1) {
-         activemenu = path[1];
-     }
- }
- export { className as class };
- let className = '';
 </script>
 
 <Navbar container={false} class="{className} px-md-2" color="primary" dark expand="xs" style="overflow-x: auto">
@@ -30,7 +22,7 @@
     <Nav navbar>
         <NavItem class="d-block d-md-none">
             <NavLink
-                active={activemenu === ''}
+                active={$page.route.id === '/'}
                 class="text-center"
                 href="."
             >
@@ -40,7 +32,7 @@
         </NavItem>
         <NavItem>
             <NavLink
-                active={activemenu === 'alarms'}
+                active={$page.route.id.startsWith('/alarms')}
                 class="text-center"
                 href="alarms"
             >
@@ -52,7 +44,7 @@
             <NavLink
                 href="musiks"
                 class="text-center"
-                active={activemenu === 'musiks'}
+                active={$page.route.id.startsWith('/musiks')}
             >
                 <Icon name="music-note-list" /><br class="d-inline d-md-none">
                 Musiques
@@ -62,7 +54,7 @@
             <NavLink
                 href="routines"
                 class="text-center"
-                active={activemenu === 'routines'}
+                active={$page.route.id.startsWith('/routines')}
             >
                 <Icon name="activity" /><br class="d-inline d-md-none">
                 Routines
@@ -72,7 +64,7 @@
             <NavLink
                 href="history"
                 class="text-center"
-                active={activemenu === 'history'}
+                active={$page.route.id.startsWith('/history')}
             >
                 <Icon name="clipboard-pulse" /><br class="d-inline d-md-none">
                 Historique
@@ -82,7 +74,7 @@
             <NavLink
                 href="settings"
                 class="text-center"
-                active={activemenu === 'settings'}
+                active={$page.route.id.startsWith('/settings')}
             >
                 <Icon name="gear-fill" /><br class="d-inline d-md-none">
                 Paramètres

ui/src/lib/components/TrackList.svelte

@@ -10,13 +10,9 @@
 
  import { tracks } from '$lib/stores/tracks';
 
- export let flush = false;
+ let { flush = false, edit = false, class: className = '' } = $props();
- export let edit = false;
 
- export { className as class };
+ let refreshInProgress = $state(false);
- let className = '';
-
- let refreshInProgress = false;
  function refresh_tracks() {
      refreshInProgress = true;
      tracks.refresh().then(() => {
@@ -31,26 +27,24 @@
     </h2>
     <div>
         {#if !edit}
-            <Button
+            <a
                 href="musiks/tracks"
-                color="outline-info"
+                class="btn btn-sm btn-outline-info"
-                size="sm"
             >
                 <Icon name="pencil" />
-            </Button>
+            </a>
         {/if}
-        <Button
+        <a
             href="musiks/tracks/new"
-            color="outline-primary"
+            class="btn btn-sm btn-outline-primary"
-            size="sm"
         >
             <Icon name="plus-lg" />
-        </Button>
+        </a>
         <Button
             color="outline-dark"
             size="sm"
             title="Rafraîchir la liste des pistes"
-            on:click={refresh_tracks}
+            onclick={refresh_tracks}
             disabled={refreshInProgress}
         >
             {#if !refreshInProgress}
@@ -69,7 +63,7 @@
                 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={() => {
+                onclick={() => {
                          if (edit) {
                              goto('musiks/tracks/' + track.id);
                          } else {

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 />

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 nextAlarmP = $state(getNextAlarm());
- let isActiveP = isAlarmActive();
+ 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" />

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>

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;
+ function callRightFunction(kind) {
- let obj;
+     switch(kind) {
-
- $: {
-     switch ($page.params["kind"]) {
          case "single":
-             objP = getAlarmSingle($page.params["aid"]);
+             return getAlarmSingle;
-             break;
          case "repeated":
-             objP = getAlarmRepeated($page.params["aid"]);
+             return getAlarmRepeated;
-             break;
          case "exceptions":
-             objP = getAlarmException($page.params["aid"]);
+             return getAlarmException;
-             break;
      }
-     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 callRightFunction($page.params["kind"])($page.params["aid"])}
-        {#await objP}
         <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}
             <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}
             <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}
             <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}
+    {/await}
 </Container>

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>

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>

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)}

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}>

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>

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)}

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}>

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>

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();
+ async function submitSettings(settings) {
-
- $: settingsP.then((s) => settings = s);
-
- let settings;
-
- async function submitSettings() {
      await tick();
      settings.save();
  }
@@ -33,12 +27,12 @@
     <h2>
         Paramètres
     </h2>
-    <Form on:submit={submitSettings}>
+    {#await getSettings()}
-        {#await settingsP}
         <div class="d-flex justify-content-center align-items-center gap-2">
             <Spinner color="primary" /> Chargement en cours&hellip;
         </div>
-        {:then}
+    {: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>
+    {/await}
 </Container>