reveil/ui/src/routes/settings/+page.svelte

115 lines
3.8 KiB
Svelte

<script>
import {
Container,
Form,
FormGroup,
Icon,
Input,
InputGroup,
InputGroupText,
Label,
Spinner,
} from 'sveltestrap';
import { actions } from '../../stores/actions';
import { getSettings } from '../../lib/settings';
let settingsP = getSettings();
$: settingsP.then((s) => settings = s);
let settings;
</script>
<Container class="flex-fill d-flex flex-column py-2">
<h2>
Paramètres
</h2>
<Form>
{#await settingsP}
<div class="d-flex justify-content-center align-items-center gap-2">
<Spinner color="primary" /> Chargement en cours&hellip;
</div>
{:then}
<FormGroup>
<Label for="gongIntervals">Intervalle entre les gongs</Label>
<InputGroup>
<Input
type="number"
id="gongIntervals"
placeholder="20"
bind:value={settings.gong_interval}
on:change={() => settings.save()}
/>
<InputGroupText>min</InputGroupText>
</InputGroup>
</FormGroup>
<FormGroup>
<Label for="weatherDelay">Annonce météo après</Label>
<InputGroup>
<Input
type="number"
id="weatherDelay"
placeholder="5"
bind:value={settings.weather_delay}
on:change={() => settings.save()}
/>
<InputGroupText>min</InputGroupText>
</InputGroup>
</FormGroup>
<FormGroup>
<Label for="weatherRituel">Rituel pour l'annonce météo</Label>
{#if $actions.list}
<Input
type="select"
id="weatherRituel"
bind:value={settings.weather_action}
on:change={() => settings.save()}
>
{#each $actions.list as action (action.id)}
<option value="{action.path}">{action.name}</option>
{/each}
</Input>
{:else}
{#await actions.refresh()}
<div class="d-flex justify-content-center align-items-center gap-2">
<Spinner color="primary" /> Chargement en cours&hellip;
</div>
{/await}
{/if}
</FormGroup>
<FormGroup>
<Label for="greetingLanguage">Langue de salutation</Label>
<Input
type="select"
id="greetingLanguage"
bind:value={settings.lang}
on:change={() => settings.save()}
>
<option value="fr_FR">Français</option>
<option value="en_US">Anglais</option>
<option value="es_ES">Espagnol</option>
<option value="de_DE">Allemand</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="maxRunTime">Durée maximale d'exécution du réveil</Label>
<InputGroup>
<Input
type="number"
id="maxRunTime"
placeholder="60"
bind:value={settings.max_run_time}
on:change={() => settings.save()}
/>
<InputGroupText>min</InputGroupText>
</InputGroup>
</FormGroup>
{/await}
</Form>
</Container>