btclock/webui
3
0
Fork 2
Code Issues Pull requests 1 Projects Releases 16 Wiki Activity Actions

All functionality ready

Browse source
This commit is contained in:
Djuri Baars 2023-11-17 03:15:23 +01:00
parent 96d609a89e
commit 287d04bc97
5 changed files with 97 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/routes/+layout.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts">
import {
Navbar,
NavbarBrand,

9
src/routes/+page.svelte
View file

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

33
src/routes/Control.svelte
View file

@ -5,6 +5,7 @@ import {
Button,
ButtonGroup,
Card,
CardTitle,
CardBody,
CardHeader,
Col,
@ -17,27 +18,43 @@ 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>
<Row>
<Label md={6} for="customText" size="sm">Text</Label>
<Col md="6">
<Input type="text" id="customText"bind:value={customText} bsSize="sm" maxLength="{$settings.numScreens}"/>
<Input type="text" id="customText" bind:value={customText} bsSize="sm" maxLength="{$settings.numScreens}"/>
</Col>
</Row>
<Button color="primary" on:click={setCustomText}>Show text</Button>
@ -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>

64
src/routes/Settings.svelte
View file

@ -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 &euro; 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>

8
src/routes/Status.svelte
View file

@ -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}&#9205; running{:else}&#9208; stopped{/if}
Screen cycle: <span on:click="{toggleTimer($status.timerRunning)}">{#if $status.timerRunning}&#9205; running{:else}&#9208; stopped{/if}</span>
{/if}
{/if}
<hr>
@ -123,7 +123,9 @@
&#10060;
{/if}
</span><br>
{#if $settings.fetchEurPrice}
<small>If you use "Fetch &euro; price" the WS Price connection will show &#10060; since it uses another data source.</small>
{/if}
</p>
</CardBody>