94 lines
2.2 KiB
Svelte
94 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { _ } from 'svelte-i18n';
|
|
import {
|
|
Card,
|
|
CardBody,
|
|
CardHeader,
|
|
CardTitle,
|
|
Col,
|
|
Progress,
|
|
Tooltip
|
|
} from '@sveltestrap/sveltestrap';
|
|
import Rendered from './Rendered.svelte';
|
|
import { writable } from 'svelte/store';
|
|
|
|
export let status: writable<object>;
|
|
|
|
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 rssiPercent: number = 50;
|
|
let wifiStrengthColor: string = 'info';
|
|
|
|
status.subscribe((value: object) => {
|
|
memoryFreePercent = Math.round((value.espFreeHeap / value.espHeapSize) * 100);
|
|
|
|
rssiPercent = Math.round(((value.rssi + 120) / (-30 + 120)) * 100);
|
|
|
|
if (value.rssi > -55) {
|
|
wifiStrengthColor = 'success';
|
|
} else if (value.rssi < -87) {
|
|
wifiStrengthColor = 'warning';
|
|
} else {
|
|
wifiStrengthColor = 'info';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<Col>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<section>
|
|
<Rendered status={$status}></Rendered>
|
|
</section>
|
|
|
|
<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 />
|
|
<Progress striped id="rssiBar" color={wifiStrengthColor} value={rssiPercent}
|
|
>{rssiPercent}%</Progress
|
|
>
|
|
<Tooltip target="rssiBar" placement="bottom">{$_('rssiBar.tooltip')}</Tooltip>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<div>{$_('section.status.wifiSignalStrength')}</div>
|
|
<div>
|
|
{$status.rssi} dBm
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
{$_('section.status.uptime')}: {toUptimestring($status.espUptime)}
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|