All functionality ready

src/routes/+layout.svelte

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

src/routes/+page.svelte

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

src/routes/Control.svelte

@@ -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="secondary" id="turnOffLedsBtn" on:click={turnOffLeds}>Turn off</Button>
-                <Button color="primary">Set color</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="danger" id="restartBtn" on:click="{restartClock}">Restart</Button>
-            <Button color="warning" id="forceFullRefresh">Force full refresh</Button>
+            <Button color="warning" id="forceFullRefresh" on:click="{forceFullRefresh}">Force full refresh</Button>
 		</CardBody>
 	</Card>
 </Col>

src/routes/Settings.svelte

@@ -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>

src/routes/Status.svelte

@@ -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>