Added individual LED control

src/routes/+page.svelte

@@ -14,6 +14,17 @@
         fgColor: "0"
     });
 
+	let status = writable({
+        data: ["L", "O", "A", "D", "I", "N", "G"],
+        espFreeHeap: 0,
+        espHeapSize: 0,
+        connectionStatus: {
+            "price": false,
+            "blocks": false
+        },
+		leds: []
+    }); 
+
 	onMount(() => {
 		fetch( PUBLIC_BASE_URL + `/api/settings`)
 			.then((res) => res.json())
@@ -31,6 +42,19 @@
                 }
 				settings.set(data);
 			});
+
+		fetch(`${PUBLIC_BASE_URL}/api/status`)
+			.then((res) => res.json())
+			.then((data) => {
+				status.set(data);
+			});
+
+			const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
+
+			evtSource.addEventListener('status', (e) => {
+				let dataObj = (JSON.parse(e.data));
+				status.set(dataObj);
+			});	
 	});
 </script>
 
@@ -40,8 +64,8 @@
 
 <Container fluid>
 	<Row>
-		<Control bind:settings></Control>
-		<Status  bind:settings></Status>
+		<Control bind:settings bind:status></Control>
+		<Status  bind:settings bind:status></Status>
 		<Settings bind:settings></Settings>
 	</Row>
 </Container>

src/routes/Control.svelte

@@ -1,6 +1,9 @@
 <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,
@@ -19,15 +22,37 @@ import {
 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/${encodeURIComponent(ledColor.replace(/^#/, ''))}`).catch(err => { });
+    fetch(`${PUBLIC_BASE_URL}/api/lights`, {
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		method: 'PATCH',
+		body: JSON.stringify(ledStatus)
+	}
+	).catch(err => { });
 };
 
 const turnOffLeds = () => {
@@ -42,6 +67,16 @@ 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>
@@ -54,7 +89,7 @@ const forceFullRefresh = () => {
 				<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}"/>
+						<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>
@@ -66,7 +101,18 @@ const forceFullRefresh = () => {
 				<Row>
 					<Label md={6} for="ledColorPicker" size="sm">{ $_('section.control.ledColor') }</Label>
 					<Col md="6">
-						<Input type="color" id="ledColorPicker" bind:value="{ledColor}" />
+						<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>

src/routes/Status.svelte

@@ -3,36 +3,12 @@
 
     import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
-	import { writable } from 'svelte/store';
+	import { writable, type Writable } from 'svelte/store';
 	import { Row, Input, Button, ButtonGroup, Card, CardBody, CardHeader, Col, Progress,CardTitle } from 'sveltestrap';
 	import Rendered from './Rendered.svelte';
 	
     export let settings; 
-
-    const status = writable({
-        data: ["L", "O", "A", "D", "I", "N", "G"],
-        espFreeHeap: 0,
-        espHeapSize: 0,
-        connectionStatus: {
-            "price": false,
-            "blocks": false
-        }
-    }); 
-
-    onMount(() => {
-        fetch(`${PUBLIC_BASE_URL}/api/status`)
-        .then((res) => res.json())
-		.then((data) => {
-            status.set(data);
-        });
-
-        const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
-
-        evtSource.addEventListener('status', (e) => {
-            let dataObj = (JSON.parse(e.data));
-            status.set(dataObj);
-        });
-    });
+    export let status:Writable<{}>;
 
     const toTime = (secs:Number) => {
         var hours = Math.floor(secs / (60 * 60));
@@ -60,11 +36,11 @@
     let memoryFreePercent:number = 50;
     let lightMode:boolean = false;
 
-    status.subscribe((value) => {
+    status.subscribe((value: {}) => {
         memoryFreePercent = Math.round(value.espFreeHeap / value.espHeapSize * 100);
     });
 
-    settings.subscribe((value) => {
+    settings.subscribe((value: {}) => {
         lightMode = value.bgColor > value.fgColor;
     });