131 lines
4.2 KiB
Svelte
131 lines
4.2 KiB
Svelte
<script lang="ts">
|
|
import { PUBLIC_BASE_URL } from '$env/static/public';
|
|
|
|
import { onMount } from 'svelte';
|
|
import { _ } from 'svelte-i18n';
|
|
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;
|
|
export let status:Writable<{}>;
|
|
|
|
const toTime = (secs:Number) => {
|
|
var hours = Math.floor(secs / (60 * 60));
|
|
|
|
var divisor_for_minutes = secs % (60 * 60);
|
|
var minutes = Math.floor(divisor_for_minutes / 60);
|
|
|
|
var divisor_for_seconds = divisor_for_minutes % 60;
|
|
var seconds = Math.ceil(divisor_for_seconds);
|
|
|
|
var obj = {
|
|
"h": hours,
|
|
"m": minutes,
|
|
"s": seconds
|
|
};
|
|
return obj;
|
|
}
|
|
|
|
const toUptimeString = (secs:Number):String => {
|
|
let time = toTime(secs);
|
|
|
|
return `${time.h}h ${time.m}m ${time.s}s`;
|
|
}
|
|
|
|
let memoryFreePercent:number = 50;
|
|
let lightMode:boolean = false;
|
|
|
|
status.subscribe((value: {}) => {
|
|
memoryFreePercent = Math.round(value.espFreeHeap / value.espHeapSize * 100);
|
|
});
|
|
|
|
settings.subscribe((value: {}) => {
|
|
lightMode = value.bgColor > value.fgColor;
|
|
});
|
|
|
|
const setScreen = (id:number) => () => {
|
|
fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(err => { });
|
|
}
|
|
|
|
const toggleTimer = (currentStatus:boolean) => () => {
|
|
if (currentStatus) {
|
|
fetch(`${PUBLIC_BASE_URL}/api/action/pause`);
|
|
} else {
|
|
fetch(`${PUBLIC_BASE_URL}/api/action/timer_restart`);
|
|
}
|
|
}
|
|
|
|
const isLightMode = () => {
|
|
return $settings.bgColor > $settings.fgColor;
|
|
}
|
|
|
|
</script>
|
|
|
|
<Col>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
|
|
</CardHeader>
|
|
<CardBody>
|
|
{#if $settings.screens}
|
|
<div class="d-flex justify-content-center">
|
|
<ButtonGroup size="sm">
|
|
{#each $settings.screens as s}
|
|
<Button color="outline-primary" active={$status.currentScreen == s.id} on:click={setScreen(s.id)}>{s.name}</Button>
|
|
{/each}
|
|
</ButtonGroup>
|
|
</div>
|
|
<hr>
|
|
{#if $status.data}
|
|
<section class={lightMode ? 'lightMode': ''}>
|
|
<Rendered status="{$status}"></Rendered>
|
|
</section>
|
|
{ $_('section.status.screenCycle') }: <a style="cursor: pointer" on:click="{toggleTimer($status.timerRunning)}">{#if $status.timerRunning}⏵ { $_('timer.running') }{:else}⏸ { $_('timer.stopped') }{/if}</a>
|
|
{/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>
|
|
<div>{ Math.round($status.espFreeHeap / 1024) } / { Math.round($status.espHeapSize / 1024) } KiB</div>
|
|
</div>
|
|
<hr>
|
|
{ $_('section.status.uptime') }: {toUptimeString($status.espUptime)}
|
|
<br>
|
|
<p>
|
|
{ $_('section.status.wsPriceConnection') }:
|
|
<span>
|
|
{#if $status.connectionStatus && $status.connectionStatus.price}
|
|
✅
|
|
{:else}
|
|
❌
|
|
{/if}
|
|
</span>
|
|
-
|
|
{ $_('section.status.wsMempoolConnection') }:
|
|
<span>
|
|
{#if $status.connectionStatus && $status.connectionStatus.blocks}
|
|
✅
|
|
{:else}
|
|
❌
|
|
{/if}
|
|
</span><br>
|
|
{#if $settings.fetchEurPrice}
|
|
<small>{ $_('section.status.fetchEuroNote') }</small>
|
|
{/if}
|
|
</p>
|
|
</CardBody>
|
|
|
|
</Card>
|
|
</Col>
|