webui/src/routes/Control.svelte

89 lines
2.4 KiB
Svelte
Raw Normal View History

2023-11-17 00:05:35 +00:00
<script lang="ts">
import { PUBLIC_BASE_URL } from '$env/static/public';
import { _ } from 'svelte-i18n';
import {
Button,
ButtonGroup,
Card,
2023-11-17 02:15:23 +00:00
CardTitle,
2023-11-17 00:05:35 +00:00
CardBody,
CardHeader,
Col,
Container,
Form,
Input,
Label,
Row
} from 'sveltestrap';
export let settings = {};
export let customText:String;
2023-11-17 02:15:23 +00:00
export let ledColor:String = "#FFCC00";
2023-11-17 00:05:35 +00:00
const setCustomText = () => {
fetch(`${PUBLIC_BASE_URL}/api/show/text/${customText}`).catch(err => { });
};
const setLEDcolor = () => {
2023-11-17 02:15:23 +00:00
console.log(`${PUBLIC_BASE_URL}/api/lights/${ledColor}`);
fetch(`${PUBLIC_BASE_URL}/api/lights/${encodeURIComponent(ledColor.replace(/^#/, ''))}`).catch(err => { });
};
2023-11-17 00:05:35 +00:00
2023-11-17 02:15:23 +00:00
const turnOffLeds = () => {
fetch(`${PUBLIC_BASE_URL}/api/lights/off`).catch(err => { });
2023-11-17 00:05:35 +00:00
};
2023-11-17 02:15:23 +00:00
const restartClock = () => {
fetch(`${PUBLIC_BASE_URL}/api/restart`).catch(err => { });
}
const forceFullRefresh = () => {
fetch(`${PUBLIC_BASE_URL}/api/full_refresh`).catch(err => { });
}
2023-11-17 00:05:35 +00:00
</script>
<Col>
<Card>
<CardHeader>
2023-11-17 02:15:23 +00:00
<CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle>
2023-11-17 00:05:35 +00:00
</CardHeader>
<CardBody>
<Form>
<Row>
<Label md={6} for="customText" size="sm">Text</Label>
<Col md="6">
2023-11-17 02:15:23 +00:00
<Input type="text" id="customText" bind:value={customText} bsSize="sm" maxLength="{$settings.numScreens}"/>
2023-11-17 00:05:35 +00:00
</Col>
</Row>
<Button color="primary" on:click={setCustomText}>Show text</Button>
</Form>
<hr />
<h3>LEDs</h3>
<Form>
<Row>
<Label md={6} for="ledColorPicker" size="sm">LEDs color</Label>
<Col md="6">
2023-11-17 02:15:23 +00:00
<Input type="color" id="ledColorPicker" bind:value="{ledColor}" />
2023-11-17 00:05:35 +00:00
</Col>
</Row>
2023-11-17 02:15:23 +00:00
<Button color="secondary" id="turnOffLedsBtn" on:click={turnOffLeds}>Turn off</Button>
<Button color="primary" on:click={setLEDcolor}>Set color</Button>
2023-11-17 00:05:35 +00:00
</Form>
<hr />
<h3>System info</h3>
<ul class="small system_info">
<li>Version: {$settings.gitRev}</li>
<li>Build time: {new Date(($settings.lastBuildTime * 1000)).toLocaleString()}</li>
<li>IP: {$settings.ip}</li>
<li>Hostname: {$settings.hostname}</li>
</ul>
2023-11-17 02:15:23 +00:00
<Button color="danger" id="restartBtn" on:click="{restartClock}">Restart</Button>
<Button color="warning" id="forceFullRefresh" on:click="{forceFullRefresh}">Force full refresh</Button>
2023-11-17 00:05:35 +00:00
</CardBody>
</Card>
</Col>