Add overview box

src/routes/+page.svelte

@@ -17,6 +17,7 @@
 	import MasterErrorDisplay from './master-error-display.svelte';
 	import { SlaveLogData } from '$lib/slave-log';
 	import ShuntStatusDisplay from './shunt-status-display.svelte';
+	import Overview from './overview.svelte';
 
 	let error: AMSError | undefined;
 	let amsStatus: AMSStatus | undefined;
@@ -73,8 +74,9 @@
 		});
 </script>
 
-<div class="wrapper">
+<div class="vertical-wrapper">
-	<div class="vertical-wrapper">
+	<Overview {amsStatus} current={shuntCurrentLog?.value} voltage={shuntVoltage1Log?.value} />
+	<div class="wrapper">
 		<MasterErrorDisplay {error} />
 		<MasterStatusDisplay status={amsStatus} />
 		<ShuntStatusDisplay
@@ -83,9 +85,11 @@
 			voltage2LogData={shuntVoltage2Log}
 		/>
 	</div>
-	{#each Object.entries(slaveStatus) as [id, status]}
+	<div class="wrapper">
-		<SlaveStatusDisplay {id} {status} logData={slaveLog[id]} />
+		{#each Object.entries(slaveStatus) as [id, status]}
-	{/each}
+			<SlaveStatusDisplay {id} {status} logData={slaveLog[id]} />
+		{/each}
+	</div>
 </div>
 
 <style>

src/routes/master-status-display.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { AMSStatus } from '$lib/messages';
+	import { AMSState, type AMSStatus } from '$lib/messages';
 
 	export let status: AMSStatus | undefined;
 </script>
@@ -8,9 +8,9 @@
 	{#if status}
 		<h2><b>Master Status</b></h2>
 		<div class="log-collumn">
-			<div>State: {status.state}</div>
+			<div>State: {AMSState[status.state]}</div>
 			<div>SDC Closed: {status.sdcClosed}</div>
-			<div>SoC: {status.soc}</div>
+			<div>SoC: {status.soc}%</div>
 			<div>Min. cell voltage: {Math.round(status.minCellVolt * 100) / 100}</div>
 			<div>Max. cell temperature: {Math.round(status.maxCellTemp * 100) / 100}</div>
 		</div>

src/routes/overview.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { AMSState, type AMSStatus } from '$lib/messages';
+
+	export let amsStatus: AMSStatus | undefined;
+	export let current: number | undefined;
+	export let voltage: number | undefined;
+</script>
+
+<div class="overview grid grid-rows-3 gap-3">
+	{#if amsStatus != null && current != null && voltage != null}
+		<div class="progress" data-label="{amsStatus.soc}%">
+			<span class="value" style="width:{amsStatus.soc}%;"></span>
+		</div>
+		<div class="grid grid-cols-4 gap-2">
+			<span class="text-center border-r">{voltage.toFixed(1)} V</span>
+			<span class="text-center border-r">{current.toFixed(1)} A</span>
+			<span class="text-center border-r">{amsStatus.maxCellTemp.toFixed(1)}°C</span>
+			<span class="text-center">SDC {amsStatus.sdcClosed ? '✅' : '❌'}</span>
+		</div>
+		<div class="text-center">
+			<button
+				class="w-1/2 bg-green-600 text-white font-bold h-8 rounded-md hover:bg-green-800 disabled:bg-gray-600"
+				disabled={amsStatus.state != AMSState.TS_INACTIVE}
+				on:click={() => {
+					fetch('/start-charging', { method: 'POST' });
+				}}>Start Charging</button
+			>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.overview {
+		display: flex;
+		flex-direction: column;
+		width: 24vw;
+		border: 2px solid black;
+		padding: 2px;
+		margin: 2px;
+	}
+
+	.progress {
+		height: 3em;
+		width: 100%;
+		background-color: white;
+		position: relative;
+		border: 1px solid black;
+	}
+	.progress:before {
+		content: attr(data-label);
+		font-weight: bold;
+		color: darkgray;
+		font-size: 1em;
+		position: absolute;
+		text-align: center;
+		top: 50%;
+		transform: translateY(-50%);
+		left: 0;
+		right: 0;
+	}
+	.progress .value {
+		background-color: green;
+		display: inline-block;
+		height: 100%;
+	}
+</style>

src/routes/start-charging/+server.ts

@@ -0,0 +1,10 @@
+import { json } from '@sveltejs/kit';
+import * as can from 'socketcan';
+
+export function POST() {
+	const network = can.createRawChannel('can0');
+	network.start();
+	network.send({ id: 0x00b, data: Buffer.from([0x01]), ext: false, rtr: false });
+	network.stop();
+	return json({ success: true }, { status: 201 });
+}