From 8e0b7a2ef968345cf51e95ea495e5a59e42b9667 Mon Sep 17 00:00:00 2001
From: Djuri Baars <dsbaars@users.noreply.github.com>
Date: Fri, 17 Nov 2023 22:04:28 +0100
Subject: [PATCH] Add LEDs status display

---
 src/routes/Status.svelte | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/routes/Status.svelte b/src/routes/Status.svelte
index 2e2f6fd..059426a 100644
--- a/src/routes/Status.svelte
+++ b/src/routes/Status.svelte
@@ -2,10 +2,9 @@
     import { PUBLIC_BASE_URL } from '$env/static/public';
 
     import { onMount } from 'svelte';
-
 	import { _ } from 'svelte-i18n';
 	import { writable } from 'svelte/store';
-	import { Button, ButtonGroup, Card, CardBody, CardHeader, Col, Progress,CardTitle } from 'sveltestrap';
+	import { Row, Input, Button, ButtonGroup, Card, CardBody, CardHeader, Col, Progress,CardTitle } from 'sveltestrap';
 	import Rendered from './Rendered.svelte';
 	
     export let settings; 
@@ -110,6 +109,16 @@
               {/if}
             {/if}
         <hr>
+        <Row class="justify-content-evenly">
+            {#if $status.leds}
+            {#each $status.leds as led}
+            <Col>
+            <Input type="color" id="ledColorPicker" bind:value="{led.hex}" class="mx-auto" disabled />
+            </Col>
+            {/each}
+            {/if}
+        </Row>
+        <hr>
         <Progress striped value={memoryFreePercent}>{ memoryFreePercent }%</Progress>
         <div class="d-flex justify-content-between">
             <div>{ $_('section.status.memoryFree') } </div>