All functionality ready

2023-11-17 03:15:23 +01:00 · 2023-11-17 03:15:23 +01:00 · 287d04bc97
commit 287d04bc97
parent 96d609a89e
5 changed files with 97 additions and 18 deletions
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,5 +1,4 @@
 <script lang="ts">
-
 	import {
 		Navbar,
 		NavbarBrand,
--- a/src/routes/+page.svelte
+++ b/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);
 			});
 	});
--- a/src/routes/Control.svelte
+++ b/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="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>
--- a/src/routes/Settings.svelte
+++ b/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>
--- a/src/routes/Status.svelte
+++ b/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>