73 lines
1.9 KiB
Svelte
73 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import type { SlaveStatus } from '$lib/messages';
|
|
import type { SlaveLogData } from '$lib/slave-log';
|
|
|
|
export let id: number;
|
|
export let status: SlaveStatus;
|
|
export let logData: SlaveLogData | undefined;
|
|
</script>
|
|
|
|
<div class="slave-content" style:--lightness={status.error ? "60%" : "100%"}>
|
|
<h2><b>Slave #{id}</b></h2>
|
|
|
|
<div class="log-collumn">
|
|
<div class="log-entry"><div>Error:</div><div><b>{status.error}</b></div></div>
|
|
<div class="log-entry"><div>Min. cell voltage:</div><div><b>{Math.round(status.minCellVolt*100)/100}V</b></div></div>
|
|
<div class="log-entry"><div>Max. cell voltage:</div><div><b>{Math.round(status.maxCellVolt*100)/100}V</b></div></div>
|
|
<div class="log-entry"><div>Max. temperature:</div><div><b>{Math.round(status.maxTemp*100)/100}°</b></div></div>
|
|
<!-- <div>SoC</div>
|
|
<div>{status.soc}</div> -->
|
|
<!-- <div>Failed temperature sensors</div>
|
|
<div>{logData?.failedTempSensors ?? 0}</div> -->
|
|
</div>
|
|
|
|
{#if logData}
|
|
<div class="log-collumn">
|
|
{#each logData.voltages as volt, i}
|
|
{#if i < 15}
|
|
<div class="log-entry" style:--hue={Math.max(((volt-2.5)*70.5), 0)}>
|
|
<div>V{i}:</div><div><b>{Math.round(volt*100)/100}V</b></div>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
{#each logData.temperatures as temp, i}
|
|
{#if i > 33 && i < 44}
|
|
<div class="log-entry" style:--hue={210-(temp*3.5)}>
|
|
<div>T{i}:</div><div><b>{temp}°</b></div>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.slave-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 12vw;
|
|
padding: 2px;
|
|
margin: 2px;
|
|
border: 2px solid black;
|
|
font-size: 14px;
|
|
margin-top: 10px;
|
|
background-color: hsl(0, 60%, --lightness);
|
|
}
|
|
|
|
.log-entry {
|
|
display: grid;
|
|
grid-template-columns: 5fr 3fr;
|
|
margin: 2px;
|
|
padding: 2px;
|
|
background-color: hsl(var(--hue), 80%, 80%);
|
|
}
|
|
|
|
.log-collumn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
h2 {
|
|
text-align: center;
|
|
}
|
|
</style> |