80 lines
2.4 KiB
Svelte
80 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import type { Host } from '$lib/hosts.js';
|
|
import { cpuTemperature, formatTemperature, temperatureLabel } from '$lib/host-temperatures.js';
|
|
import { hostReadingsStale } from '$ui/host-overview.js';
|
|
import { onMount } from 'svelte';
|
|
let { host }: { host: Host } = $props();
|
|
let now = $state(Date.now());
|
|
const stale = $derived(hostReadingsStale(host, now));
|
|
const sensors = $derived(host.inventory.temperatures ?? []);
|
|
const cpu = $derived(cpuTemperature(sensors));
|
|
onMount(() => {
|
|
const clock = setInterval(() => (now = Date.now()), 15_000);
|
|
return () => clearInterval(clock);
|
|
});
|
|
</script>
|
|
|
|
<div class:stale>
|
|
{formatTemperature(cpu?.celsius)}{#if stale && cpu}
|
|
(last reported){/if}
|
|
{#if cpu}<span class="source">{temperatureLabel(cpu)}</span>{/if}
|
|
{#if sensors.length}
|
|
<details>
|
|
<summary>Temperature sensors</summary>
|
|
<ul>
|
|
{#each sensors as sensor (sensor.id)}
|
|
<li>
|
|
<span
|
|
>{temperatureLabel(sensor)}<small
|
|
>{sensor.device} · {sensor.label} · {sensor.id.slice(-6)}</small
|
|
></span
|
|
><span>{formatTemperature(sensor.celsius)}</span>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{#if stale}<p>Last reported readings; waiting for a fresh host heartbeat.</p>{/if}
|
|
</details>
|
|
{:else}<span class="source">No supported temperature sensors reported.</span>{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.source,
|
|
small {
|
|
display: block;
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-xs);
|
|
margin-top: var(--space-1);
|
|
}
|
|
.stale {
|
|
color: var(--text-secondary);
|
|
}
|
|
details {
|
|
margin-top: var(--space-2);
|
|
}
|
|
summary {
|
|
cursor: pointer;
|
|
font-size: var(--text-sm);
|
|
}
|
|
summary:focus-visible {
|
|
outline: 2px solid var(--accent-primary);
|
|
outline-offset: 3px;
|
|
}
|
|
ul {
|
|
padding: 0;
|
|
list-style: none;
|
|
margin: var(--space-3) 0;
|
|
display: grid;
|
|
gap: var(--space-3);
|
|
}
|
|
li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-2);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
p {
|
|
font-size: var(--text-xs);
|
|
}
|
|
</style>
|