webui/src/routes/Control.svelte

<script lang="ts">
import { PUBLIC_BASE_URL } from '$env/static/public';
	import { onDestroy } from 'svelte';
import { _ } from 'svelte-i18n';
	import type { Subscriber, Unsubscriber } from 'svelte/motion';
	import type { Writable } from 'svelte/store';
import {
    Button,
    ButtonGroup,
    Card,
    CardTitle,
    CardBody,
    CardHeader,
    Col,
    Container,
    Form,
    Input,
    Label,
    Row
} from 'sveltestrap';

export let settings = {};
export let customText:String;
export let ledColor:String = "#FFCC00";
export let status:Writable<{leds:[]}>;
let ledStatus = [];
let keepLedsSameColor = false;

const setCustomText = () => {
    fetch(`${PUBLIC_BASE_URL}/api/show/text/${customText}`).catch(err => { });
};

const checkSyncLeds = (e:Event) => {
	console.log('checksyncleds', keepLedsSameColor);
	if (keepLedsSameColor) {
		console.log(e.target.value);

		ledStatus.forEach((element, i) => {
			if (ledStatus[i].hex != e.target_value) {
				ledStatus[i].hex = e.target.value;
			}
		});
	}
}

const setLEDcolor = () => {
    console.log(`${PUBLIC_BASE_URL}/api/lights/${ledColor}`);
    fetch(`${PUBLIC_BASE_URL}/api/lights`, {
		headers: {
			'Content-Type': 'application/json'
		},
		method: 'PATCH',
		body: JSON.stringify(ledStatus)
	}
	).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 => { });
}

let firstLedDataSubscription = () => {};

firstLedDataSubscription = status.subscribe(async(val) => {
	if (val && val.leds) {
		ledStatus = val.leds.map((obj) => ({ ["hex"]: obj["hex"] }));
		firstLedDataSubscription();
	}
})

onDestroy(firstLedDataSubscription);
</script>

<Col>
	<Card>
		<CardHeader>
			<CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle>
		</CardHeader>
		<CardBody>
			<Form>
				<Row>
					<Label md={6} for="customText">{ $_('section.control.text') }</Label>
					<Col md="6">
						<Input type="text" id="customText" bind:value={customText} bsSize="sm" maxLength="{$settings.numScreens}" />
					</Col>
				</Row>
                <Button color="primary" on:click={setCustomText}>{ $_('section.control.showText') }</Button>

			</Form>
			<hr />
			<h3>LEDs</h3>
            <Form>
				<Row>
					<Label md={6} for="ledColorPicker" size="sm">{ $_('section.control.ledColor') }</Label>
					<Col md="6">
						<Row class="justify-content-between">
							{#if ledStatus}
							{#each ledStatus as led, i }
							<Col>
							<Input type="color" id="ledColorPicker[{i}]" bind:value="{led.hex}" class="mx-auto" on:change="{checkSyncLeds}" />
							</Col>
							{/each}
							{/if}
							<Col>
							<Input bind:checked={keepLedsSameColor} type="switch" class="mx-auto"  label="{ $_('sections.control.keepSameColor') }" />
							</Col>
						</Row>
					</Col>
				</Row>
                <Button color="secondary" id="turnOffLedsBtn" on:click={turnOffLeds}>{ $_('section.control.turnOff') }</Button>
                <Button color="primary" on:click={setLEDcolor}>{ $_('section.control.setColor') }</Button>
			</Form>

			<hr />
			<h3>{ $_('section.control.systemInfo') }</h3>
			<ul class="small system_info">
				<li>{ $_('section.control.version') }: {$settings.gitRev}</li>
				<li>{ $_('section.control.buildTime') }: {new Date(($settings.lastBuildTime * 1000)).toLocaleString()}</li>
				<li>IP: {$settings.ip}</li>
				<li>{ $_('section.control.hostname') }: {$settings.hostname}</li>
			</ul>
            <Button color="danger" id="restartBtn" on:click="{restartClock}">{ $_('button.restart') }</Button>
            <Button color="warning" id="forceFullRefresh" on:click="{forceFullRefresh}">{ $_('button.forceFullRefresh') }</Button>
		</CardBody>
	</Card>
</Col>