webui/src/routes/Settings.svelte

210 lines
6.8 KiB
Svelte
Raw Normal View History

2023-11-17 00:05:35 +00:00
<script lang="ts">
2023-11-17 02:15:23 +00:00
import { PUBLIC_BASE_URL } from '$env/static/public';
2023-11-17 00:05:35 +00:00
import { onMount } from 'svelte';
import { readonly, writable } from 'svelte/store';
import { _ } from 'svelte-i18n';
import {
Col,
Container,
Row,
Card,
2023-11-17 02:15:23 +00:00
CardTitle,
2023-11-17 00:05:35 +00:00
CardHeader,
CardBody,
Form,
FormGroup,
FormText,
Label,
Input,
InputGroup,
InputGroupText,
Button
} from 'sveltestrap';
export let settings;
2023-11-17 02:15:23 +00:00
const onSave = async(e:Event) => {
e.preventDefault();
let formSettings = $settings;
delete formSettings["gitRev"];
delete formSettings["ip"];
delete formSettings["lastBuildTime"];
const res = await fetch(`${PUBLIC_BASE_URL}/api/json/settings`, {
method: 'PATCH',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formSettings)
})
}
2023-11-17 00:05:35 +00:00
</script>
<Col>
<Card>
<CardHeader>
2023-11-17 02:15:23 +00:00
<CardTitle>{$_('section.settings.title', { default: 'Settings' })}</CardTitle>
2023-11-17 00:05:35 +00:00
</CardHeader>
<CardBody>
2023-11-17 02:15:23 +00:00
<Form on:submit={onSave}>
2023-11-17 00:05:35 +00:00
<Row>
2023-11-17 10:48:20 +00:00
<Label md={6} for="fgColor" size="sm">{$_('section.settings.textColor', { default: 'Text color' })}</Label>
2023-11-17 00:05:35 +00:00
<Col md="6">
<Input
type="select"
2023-11-17 02:15:23 +00:00
bind:value={$settings.fgColor}
2023-11-17 00:05:35 +00:00
name="select"
id="fgColor"
bsSize="sm"
class="form-select-sm"
>
2023-11-17 10:48:20 +00:00
<option value="0">{ $_('colors.black') }</option>
<option value="65535">{ $_('colors.white') }</option>
2023-11-17 00:05:35 +00:00
</Input>
</Col>
</Row>
<Row>
2023-11-17 10:48:20 +00:00
<Label md={6} for="bgColor" size="sm">{ $_('section.settings.backgroundColor') }</Label>
2023-11-17 00:05:35 +00:00
<Col md="6">
<Input
type="select"
bind:value={$settings.bgColor}
name="select"
id="bgColor"
bsSize="sm"
class="form-select-sm"
>
2023-11-17 10:48:20 +00:00
<option value="0">{ $_('colors.black') }</option>
<option value="65535">{ $_('colors.white') }</option>
2023-11-17 00:05:35 +00:00
</Input>
</Col>
</Row>
<Row>
2023-11-17 10:48:20 +00:00
<Label md={6} for="timePerScreen" size="sm">{ $_('section.settings.timePerScreen') }</Label>
2023-11-17 00:05:35 +00:00
<Col md="6">
<InputGroup size="sm">
2023-11-17 02:15:23 +00:00
<Input type="number" min={1} step="1" bind:value={$settings.timePerScreen} />
2023-11-17 10:48:20 +00:00
<InputGroupText>{ $_('time.minutes') }</InputGroupText>
2023-11-17 00:05:35 +00:00
</InputGroup>
</Col>
</Row>
<Row>
2023-11-17 10:48:20 +00:00
<Label md={6} for="fullRefreshMin" size="sm">{ $_('section.settings.fullRefreshEvery') }</Label>
2023-11-17 00:05:35 +00:00
<Col md="6">
<InputGroup size="sm">
<Input type="number" min={1} step="1" bind:value={$settings.fullRefreshMin} />
2023-11-17 10:48:20 +00:00
<InputGroupText>{ $_('time.minutes') }</InputGroupText>
2023-11-17 00:05:35 +00:00
</InputGroup>
</Col>
</Row>
<Row>
2023-11-17 10:48:20 +00:00
<Label md={6} for="minSecPriceUpd" size="sm">{ $_('section.settings.timeBetweenPriceUpdates') }</Label>
2023-11-17 00:05:35 +00:00
<Col md="6">
<InputGroup size="sm">
<Input type="number" min={1} step="1" bind:value={$settings.minSecPriceUpd} />
2023-11-17 10:48:20 +00:00
<InputGroupText>{ $_('time.seconds') }</InputGroupText>
2023-11-17 00:05:35 +00:00
</InputGroup>
2023-11-17 12:12:22 +00:00
<FormText>{ $_('section.settings.shortAmountsWarning') }</FormText>
2023-11-17 00:05:35 +00:00
</Col>
</Row>
<Row>
2023-11-17 10:48:20 +00:00
<Label md={6} for="tzOffset" size="sm">{ $_('section.settings.timezoneOffset') }</Label>
2023-11-17 00:05:35 +00:00
<Col md="6">
<InputGroup size="sm">
<Input
type="number"
min={1}
step="1"
name="tzOffset"
id="tzOffset"
bind:value={$settings.tzOffset}
/>
2023-11-17 10:48:20 +00:00
<InputGroupText>{ $_('time.minutes') }</InputGroupText>
2023-11-17 00:05:35 +00:00
</InputGroup>
2023-11-17 12:12:22 +00:00
<FormText>{ $_('section.settings.tzOffsetHelpText') }</FormText>
2023-11-17 00:05:35 +00:00
</Col>
</Row>
<Row>
2023-11-17 10:48:20 +00:00
<Label md={6} for="ledBrightness" size="sm">{ $_('section.settings.ledBrightness') }</Label>
2023-11-17 00:05:35 +00:00
<Col md="6">
<Input
type="range"
name="ledBrightness"
id="ledBrightness"
bind:value={$settings.ledBrightness}
min={0}
max={255}
step={1}
/>
</Col>
</Row>
<Row>
2023-11-17 10:48:20 +00:00
<Label md={6} for="mempoolInstance" size="sm">{ $_('section.settings.mempoolnstance') }</Label>
2023-11-17 00:05:35 +00:00
<Col md="6">
<Input
type="text"
bind:value={$settings.mempoolInstance}
name="mempoolInstance"
id="mempoolInstance"
bsSize="sm"
>
</Input>
</Col>
</Row>
<Row>
2023-11-17 10:48:20 +00:00
<Label md={6} for="hostnamePrefix" size="sm">{ $_('section.settings.hostnamePrefix') }</Label>
2023-11-17 00:05:35 +00:00
<Col md="6">
<Input
type="text"
bind:value={$settings.hostnamePrefix}
name="hostnamePrefix"
id="hostnamePrefix"
bsSize="sm"
>
</Input>
</Col>
</Row>
2023-11-17 02:15:23 +00:00
<Row>
<Col md="6">
2023-11-17 10:48:20 +00:00
<Input id="ledTestOnPower" bind:checked={$settings.ledTestOnPower} type="switch" bsSize="sm" label="{ $_('section.settings.ledPowerOnTest') }" />
2023-11-17 02:15:23 +00:00
</Col>
<Col md="6">
2023-11-17 10:48:20 +00:00
<Input id="ledFlashOnUpd" bind:checked={$settings.ledFlashOnUpd} type="switch" bsSize="sm" label="{ $_('section.settings.ledFlashOnBlock') }" />
2023-11-17 02:15:23 +00:00
</Col>
<Col md="6">
2023-11-17 10:48:20 +00:00
<Input id="stealFocus" bind:checked={$settings.stealFocus} type="switch" bsSize="sm" label="{ $_('section.settings.StealFocusOnNewBlock') }" />
2023-11-17 02:15:23 +00:00
</Col>
<Col md="6">
2023-11-17 10:48:20 +00:00
<Input id="mcapBigChar" bind:checked={$settings.mcapBigChar} type="switch" bsSize="sm" label="{ $_('section.settings.useBigCharsMcap') }" />
2023-11-17 02:15:23 +00:00
</Col>
<Col md="6">
2023-11-17 12:12:22 +00:00
<Input id="otaEnabled" bind:checked={$settings.otaEnabled} type="switch" bsSize="sm" label="{ $_('section.settings.otaUpdates') } ({ $_('restartRequired') })" />
2023-11-17 02:15:23 +00:00
</Col>
<Col md="6">
2023-11-17 12:12:22 +00:00
<Input id="mdnsEnabled" bind:checked={$settings.mdnsEnabled} type="switch" bsSize="sm" label="{ $_('section.settings.enableMdns') } ({ $_('restartRequired') })" />
2023-11-17 02:15:23 +00:00
</Col>
<Col md="6">
2023-11-17 12:12:22 +00:00
<Input id="fetchEurPrice" bind:checked={$settings.fetchEurPrice} type="switch" bsSize="sm" label="{ $_('section.settings.fetchEuroPrice') } ({ $_('restartRequired') })" />
2023-11-17 02:15:23 +00:00
</Col>
</Row>
<Row>
2023-11-17 12:12:22 +00:00
<h3>{ $_('section.settings.screens') }</h3>
2023-11-17 02:15:23 +00:00
{#if $settings.screens}
{#each $settings.screens as s}
<Col md="6">
<Input id="screens_{s.id}" bind:checked={s.enabled} type="switch" bsSize="sm" label="{s.name}" />
</Col>
{/each}
{/if}
</Row>
2023-11-17 12:12:22 +00:00
<Button type="reset" color="secondary">{ $_('button.reset') }</Button>
<Button color="primary">{ $_('button.save') }</Button>
2023-11-17 00:05:35 +00:00
</Form>
</CardBody>
</Card>
</Col>