Add LEDs status display

This commit is contained in:
Djuri Baars 2023-11-17 22:04:28 +01:00
parent d51747ad5a
commit 8e0b7a2ef9

View File

@ -2,10 +2,9 @@
import { PUBLIC_BASE_URL } from '$env/static/public'; import { PUBLIC_BASE_URL } from '$env/static/public';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import { writable } from 'svelte/store'; 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'; import Rendered from './Rendered.svelte';
export let settings; export let settings;
@ -110,6 +109,16 @@
{/if} {/if}
{/if} {/if}
<hr> <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> <Progress striped value={memoryFreePercent}>{ memoryFreePercent }%</Progress>
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<div>{ $_('section.status.memoryFree') } </div> <div>{ $_('section.status.memoryFree') } </div>