migration to Svelte 5
This commit is contained in:
parent
a032d3a166
commit
1378636a98
28 changed files with 164 additions and 206 deletions
|
|
@ -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 className = '';
|
||||
|
||||
let refreshInProgress = false;
|
||||
let refreshInProgress = $state(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"
|
||||
size="sm"
|
||||
class="btn btn-sm btn-outline-info"
|
||||
>
|
||||
<Icon name="pencil" />
|
||||
</Button>
|
||||
</a>
|
||||
{/if}
|
||||
<Button
|
||||
color="outline-dark"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
size="sm"
|
||||
class="float-end {($page.params.kind === 'exceptions' && $page.url.pathname.endsWith('/new'))?'active':''}"
|
||||
class="btn btn-sm btn-outline-primary float-end {($page.params.kind === 'single' && $page.url.pathname.endsWith('/new'))?'active':''}"
|
||||
>
|
||||
<Icon name="plus-lg" />
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
{#if $alarmsExceptions.list !== null}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
size="sm"
|
||||
class="float-end {($page.params.kind === 'repeated' && $page.url.pathname.endsWith('/new'))?'active':''}"
|
||||
class="btn btn-sm btn-outline-primary float-end {($page.params.kind === 'single' && $page.url.pathname.endsWith('/new'))?'active':''}"
|
||||
>
|
||||
<Icon name="plus-lg" />
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
{#if $alarmsRepeated.list !== null}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
size="sm"
|
||||
class="float-end {($page.params.kind === 'single' && $page.url.pathname.endsWith('/new'))?'active':''}"
|
||||
class="btn btn-sm btn-outline-primary 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}
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@
|
|||
|
||||
import { actions_idx } from '$lib/stores/actions';
|
||||
|
||||
export let routine = {
|
||||
let { routine = {
|
||||
name: "Classique",
|
||||
steps: [],
|
||||
};
|
||||
} } = $props();
|
||||
</script>
|
||||
|
||||
<Card>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@
|
|||
Icon,
|
||||
} from '@sveltestrap/sveltestrap';
|
||||
|
||||
export let routinesStats = [
|
||||
let { routinesStats = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Classique",
|
||||
nb: 10,
|
||||
},
|
||||
];
|
||||
] } = $props();
|
||||
</script>
|
||||
|
||||
<Card>
|
||||
|
|
|
|||
|
|
@ -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 className = 'text-muted';
|
||||
let { begins = $bindable(null), ends, class: className = 'text-muted' } = $props();
|
||||
</script>
|
||||
|
||||
{#if begins && ends}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<script>
|
||||
export let date;
|
||||
export let dateStyle;
|
||||
export let timeStyle;
|
||||
let { date, dateStyle, timeStyle } = $props();
|
||||
|
||||
function formatDate(input, dateStyle, timeStyle) {
|
||||
if (typeof input === 'string') {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<script>
|
||||
export let startDate;
|
||||
export let endDate;
|
||||
export let dateStyle;
|
||||
export let timeStyle;
|
||||
let {
|
||||
startDate,
|
||||
endDate,
|
||||
dateStyle,
|
||||
timeStyle
|
||||
} = $props();
|
||||
|
||||
function formatRange(startDate, endDate, dateStyle, timeStyle) {
|
||||
if (typeof input === 'string') {
|
||||
|
|
|
|||
|
|
@ -3,18 +3,17 @@
|
|||
|
||||
import {
|
||||
Input,
|
||||
} from '@sveltestrap/sveltestrap';
|
||||
} from '@sveltestrap/sveltestrap';
|
||||
|
||||
export let format = 'YYYY-MM-DD HH:mm';
|
||||
export let date = new Date();
|
||||
let {
|
||||
format = 'YYYY-MM-DD HH:mm',
|
||||
date = $bindable(new Date()),
|
||||
class: className = '',
|
||||
id = null,
|
||||
required = false
|
||||
} = $props();
|
||||
|
||||
let className = '';
|
||||
export { className as class };
|
||||
|
||||
export let id = null;
|
||||
export let required = false;
|
||||
|
||||
let internal;
|
||||
let internal = $state();
|
||||
|
||||
const input = (x) => (internal = dayjs(x).format(format));
|
||||
const output = (x) => {
|
||||
|
|
@ -24,8 +23,12 @@
|
|||
}
|
||||
};
|
||||
|
||||
$: input(date)
|
||||
$: output(internal)
|
||||
$effect(() => {
|
||||
input(date)
|
||||
});
|
||||
$effect(() => {
|
||||
output(internal)
|
||||
});
|
||||
</script>
|
||||
|
||||
<Input type="datetime-local" class={className} id={id} {required} bind:value={internal} />
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@
|
|||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let id = "";
|
||||
export let value = { };
|
||||
let { id = "", value = $bindable({ }) } = $props();
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -16,13 +16,9 @@
|
|||
});
|
||||
}
|
||||
|
||||
export let flush = false;
|
||||
export let edit = false;
|
||||
let { flush = false, edit = false, class: className = '' } = $props();
|
||||
|
||||
export { className as class };
|
||||
let className = '';
|
||||
|
||||
let refreshInProgress = false;
|
||||
let refreshInProgress = $state(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"
|
||||
size="sm"
|
||||
class="btn btn-sm btn-outline-info"
|
||||
>
|
||||
<Icon name="pencil" />
|
||||
</Button>
|
||||
</a>
|
||||
{/if}
|
||||
<Button
|
||||
<a
|
||||
href="musiks/gongs/new"
|
||||
color="outline-primary"
|
||||
size="sm"
|
||||
class="btn btn-sm btn-outline-primary"
|
||||
>
|
||||
<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 {
|
||||
|
|
|
|||
|
|
@ -12,15 +12,7 @@
|
|||
|
||||
const version = fetch('api/version', {headers: {'Accept': 'application/json'}}).then((res) => res.json())
|
||||
|
||||
export let activemenu = "";
|
||||
$: {
|
||||
const path = $page.url.pathname.split("/");
|
||||
if (path.length > 1) {
|
||||
activemenu = path[1];
|
||||
}
|
||||
}
|
||||
export { className as class };
|
||||
let className = '';
|
||||
let { class: className = '' } = $props();
|
||||
</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
|
||||
|
|
|
|||
|
|
@ -10,13 +10,9 @@
|
|||
|
||||
import { tracks } from '$lib/stores/tracks';
|
||||
|
||||
export let flush = false;
|
||||
export let edit = false;
|
||||
let { flush = false, edit = false, class: className = '' } = $props();
|
||||
|
||||
export { className as class };
|
||||
let className = '';
|
||||
|
||||
let refreshInProgress = false;
|
||||
let refreshInProgress = $state(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"
|
||||
size="sm"
|
||||
class="btn btn-sm btn-outline-info"
|
||||
>
|
||||
<Icon name="pencil" />
|
||||
</Button>
|
||||
</a>
|
||||
{/if}
|
||||
<Button
|
||||
<a
|
||||
href="musiks/tracks/new"
|
||||
color="outline-primary"
|
||||
size="sm"
|
||||
class="btn btn-sm btn-outline-primary"
|
||||
>
|
||||
<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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue