webui/src/routes/Status.svelte

160 lines
3.7 KiB
Svelte
Raw Normal View History

2023-11-17 00:05:35 +00:00
<script lang="ts">
2023-11-19 19:27:22 +00:00
import { PUBLIC_BASE_URL } from '$env/static/public';
2023-11-17 00:05:35 +00:00
import { _ } from 'svelte-i18n';
2023-11-19 19:27:22 +00:00
import { writable } from 'svelte/store';
import {
Button,
ButtonGroup,
Card,
CardBody,
CardHeader,
CardTitle,
Col,
Input,
Progress,
Row
} from 'sveltestrap';
2023-11-17 00:05:35 +00:00
import Rendered from './Rendered.svelte';
2023-11-19 19:27:22 +00:00
export let settings;
export let status: writable<object>;
2023-11-17 00:05:35 +00:00
2023-11-19 19:27:22 +00:00
const toTime = (secs: number) => {
var hours = Math.floor(secs / (60 * 60));
2023-11-17 00:05:35 +00:00
2023-11-19 19:27:22 +00:00
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
2023-11-17 00:05:35 +00:00
2023-11-19 19:27:22 +00:00
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
2023-11-17 00:05:35 +00:00
2023-11-19 19:27:22 +00:00
var obj = {
h: hours,
m: minutes,
s: seconds
};
return obj;
};
2023-11-17 00:05:35 +00:00
2023-11-19 19:27:22 +00:00
const toUptimestring = (secs: number): string => {
let time = toTime(secs);
2023-11-17 00:05:35 +00:00
2023-11-19 19:27:22 +00:00
return `${time.h}h ${time.m}m ${time.s}s`;
};
2023-11-17 12:12:22 +00:00
2023-11-19 19:27:22 +00:00
let memoryFreePercent: number = 50;
let lightMode: boolean = false;
2023-11-17 00:05:35 +00:00
2023-11-19 19:27:22 +00:00
status.subscribe((value: object) => {
memoryFreePercent = Math.round((value.espFreeHeap / value.espHeapSize) * 100);
});
2023-11-17 12:12:22 +00:00
2023-11-19 19:27:22 +00:00
settings.subscribe((value: object) => {
lightMode = value.bgColor > value.fgColor;
});
2023-11-17 00:05:35 +00:00
2023-11-19 19:27:22 +00:00
const setScreen = (id: number) => () => {
fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(() => {});
};
2023-11-17 12:12:22 +00:00
2023-11-19 19:27:22 +00:00
const toggleTimer = (currentStatus: boolean) => (e: Event) => {
e.preventDefault();
if (currentStatus) {
fetch(`${PUBLIC_BASE_URL}/api/action/pause`);
} else {
fetch(`${PUBLIC_BASE_URL}/api/action/timer_restart`);
}
};
2023-11-17 00:05:35 +00:00
</script>
<Col>
<Card>
<CardHeader>
2023-11-17 02:15:23 +00:00
<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
2023-11-17 00:05:35 +00:00
</CardHeader>
<CardBody>
2023-11-19 19:27:22 +00:00
{#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
href={'#'}
style="cursor: pointer"
tabindex="0"
role="button"
aria-pressed="false"
on:click={toggleTimer($status.timerRunning)}
>{#if $status.timerRunning}&#9205; {$_('timer.running')}{:else}&#9208; {$_(
'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}
&#9989;
{:else}
&#10060;
{/if}
</span>
-
{$_('section.status.wsMempoolConnection')}:
<span>
{#if $status.connectionStatus && $status.connectionStatus.blocks}
&#9989;
{:else}
&#10060;
{/if}
</span><br />
{#if $settings.fetchEurPrice}
<small>{$_('section.status.fetchEuroNote')}</small>
{/if}
</p>
</CardBody>
</Card>
2023-11-17 00:05:35 +00:00
</Col>