All functionality ready
This commit is contained in:
Djuri Baars
parent
96d609a89e
commit
287d04bc97
@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
|
||||
import {
|
||||
Navbar,
|
||||
NavbarBrand,
|
||||
|
||||
@ -10,7 +10,9 @@
|
||||
import { writable } from 'svelte/store';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let settings = writable({});
|
||||
let settings = writable({
|
||||
fgColor: "0"
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
fetch( PUBLIC_BASE_URL + `/api/settings`)
|
||||
@ -18,6 +20,11 @@
|
||||
.then((data) => {
|
||||
data.fgColor = String(data.fgColor);
|
||||
data.bgColor = String(data.bgColor);
|
||||
data.timePerScreen = data.timerSeconds / 60;
|
||||
|
||||
if (data.fgColor> 65535) {
|
||||
data.fgColor = "65535";
|
||||
}
|
||||
settings.set(data);
|
||||
});
|
||||
});
|
||||
|
||||
@ -5,6 +5,7 @@ import {
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Card,
|
||||
CardTitle,
|
||||
CardBody,
|
||||
CardHeader,
|
||||
Col,
|
||||
@ -17,20 +18,36 @@ import {
|
||||
|
||||
export let settings = {};
|
||||
export let customText:String;
|
||||
export let ledColor:String = "#FFCC00";
|
||||
|
||||
|
||||
const setCustomText = () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/show/text/${customText}`).catch(err => { });
|
||||
};
|
||||
|
||||
const setLEDcolor = () => {
|
||||
|
||||
console.log(`${PUBLIC_BASE_URL}/api/lights/${ledColor}`);
|
||||
fetch(`${PUBLIC_BASE_URL}/api/lights/${encodeURIComponent(ledColor.replace(/^#/, ''))}`).catch(err => { });
|
||||
};
|
||||
|
||||
const turnOffLeds = () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/lights/off`).catch(err => { });
|
||||
};
|
||||
|
||||
const restartClock = () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/restart`).catch(err => { });
|
||||
}
|
||||
|
||||
const forceFullRefresh = () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/full_refresh`).catch(err => { });
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Col>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2>{$_('section.control.title', { default: 'Control' })}</h2>
|
||||
<CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Form>
|
||||
@ -49,11 +66,11 @@ const setLEDcolor = () => {
|
||||
<Row>
|
||||
<Label md={6} for="ledColorPicker" size="sm">LEDs color</Label>
|
||||
<Col md="6">
|
||||
<Input type="color" id="ledColorPicker" />
|
||||
<Input type="color" id="ledColorPicker" bind:value="{ledColor}" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Button color="secondary" id="turnOffLedsBtn">Turn off</Button>
|
||||
<Button color="primary">Set color</Button>
|
||||
<Button color="secondary" id="turnOffLedsBtn" on:click={turnOffLeds}>Turn off</Button>
|
||||
<Button color="primary" on:click={setLEDcolor}>Set color</Button>
|
||||
</Form>
|
||||
|
||||
<hr />
|
||||
@ -64,8 +81,8 @@ const setLEDcolor = () => {
|
||||
<li>IP: {$settings.ip}</li>
|
||||
<li>Hostname: {$settings.hostname}</li>
|
||||
</ul>
|
||||
<Button color="danger" id="restartBtn">Restart</Button>
|
||||
<Button color="warning" id="forceFullRefresh">Force full refresh</Button>
|
||||
<Button color="danger" id="restartBtn" on:click="{restartClock}">Restart</Button>
|
||||
<Button color="warning" id="forceFullRefresh" on:click="{forceFullRefresh}">Force full refresh</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { PUBLIC_BASE_URL } from '$env/static/public';
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { readonly, writable } from 'svelte/store';
|
||||
|
||||
@ -8,6 +10,7 @@
|
||||
Container,
|
||||
Row,
|
||||
Card,
|
||||
CardTitle,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
Form,
|
||||
@ -21,21 +24,38 @@
|
||||
} from 'sveltestrap';
|
||||
|
||||
export let settings;
|
||||
|
||||
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)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<Col>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2>{$_('section.settings.title', { default: 'Settings' })}</h2>
|
||||
<CardTitle>{$_('section.settings.title', { default: 'Settings' })}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Form>
|
||||
<Form on:submit={onSave}>
|
||||
<Row>
|
||||
<Label md={6} for="fgColor" size="sm">Text color</Label>
|
||||
<Col md="6">
|
||||
<Input
|
||||
type="select"
|
||||
value={$settings.fgColor}
|
||||
bind:value={$settings.fgColor}
|
||||
name="select"
|
||||
id="fgColor"
|
||||
bsSize="sm"
|
||||
@ -66,7 +86,7 @@
|
||||
<Label md={6} for="timePerScreen" size="sm">Time per screen</Label>
|
||||
<Col md="6">
|
||||
<InputGroup size="sm">
|
||||
<Input type="number" min={1} step="1" bind:value={$settings.timerSeconds} />
|
||||
<Input type="number" min={1} step="1" bind:value={$settings.timePerScreen} />
|
||||
<InputGroupText>minutes</InputGroupText>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
@ -147,7 +167,41 @@
|
||||
</Input>
|
||||
</Col>
|
||||
</Row>
|
||||
<Button color="secondary">Reset</Button>
|
||||
<Row>
|
||||
<Col md="6">
|
||||
<Input id="ledTestOnPower" bind:checked={$settings.ledTestOnPower} type="switch" bsSize="sm" label="LED power-on test" />
|
||||
</Col>
|
||||
<Col md="6">
|
||||
<Input id="ledFlashOnUpd" bind:checked={$settings.ledFlashOnUpd} type="switch" bsSize="sm" label="LED flash on new block" />
|
||||
</Col>
|
||||
<Col md="6">
|
||||
<Input id="stealFocus" bind:checked={$settings.stealFocus} type="switch" bsSize="sm" label="Steal focus on new block" />
|
||||
</Col>
|
||||
<Col md="6">
|
||||
<Input id="mcapBigChar" bind:checked={$settings.mcapBigChar} type="switch" bsSize="sm" label="Use big characters for market cap" />
|
||||
</Col>
|
||||
<Col md="6">
|
||||
<Input id="otaEnabled" bind:checked={$settings.otaEnabled} type="switch" bsSize="sm" label="OTA updates (restart required)" />
|
||||
</Col>
|
||||
<Col md="6">
|
||||
<Input id="mdnsEnabled" bind:checked={$settings.mdnsEnabled} type="switch" bsSize="sm" label="mDNS (restart required)" />
|
||||
</Col>
|
||||
<Col md="6">
|
||||
<Input id="fetchEurPrice" bind:checked={$settings.fetchEurPrice} type="switch" bsSize="sm" label="Fetch € price (restart required)" />
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<h3>Screens</h3>
|
||||
{#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>
|
||||
<Button type="reset" color="secondary">Reset</Button>
|
||||
<Button color="primary">Save</Button>
|
||||
</Form>
|
||||
</CardBody>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
import { _ } from 'svelte-i18n';
|
||||
import { writable } from 'svelte/store';
|
||||
import { Button, ButtonGroup, Card, CardBody, CardHeader, Col, Progress } from 'sveltestrap';
|
||||
import { Button, ButtonGroup, Card, CardBody, CardHeader, Col, Progress,CardTitle } from 'sveltestrap';
|
||||
import Rendered from './Rendered.svelte';
|
||||
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
<Col>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2>{$_('section.status.title', { default: 'Status' })}</h2>
|
||||
<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{#if $settings.screens}
|
||||
@ -93,7 +93,7 @@
|
||||
<hr>
|
||||
{#if $status.data}
|
||||
<Rendered status="{$status}"></Rendered>
|
||||
Screen cycle: {#if status.timerRunning}⏵ running{:else}⏸ stopped{/if}
|
||||
Screen cycle: <span on:click="{toggleTimer($status.timerRunning)}">{#if $status.timerRunning}⏵ running{:else}⏸ stopped{/if}</span>
|
||||
{/if}
|
||||
{/if}
|
||||
<hr>
|
||||
@ -123,7 +123,9 @@
|
||||
❌
|
||||
{/if}
|
||||
</span><br>
|
||||
{#if $settings.fetchEurPrice}
|
||||
<small>If you use "Fetch € price" the WS Price connection will show ❌ since it uses another data source.</small>
|
||||
{/if}
|
||||
</p>
|
||||
</CardBody>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user