From 917464347a362c848ce2b96c78edc84fb474c3bb Mon Sep 17 00:00:00 2001
From: "Jasper v. Blanckenburg" <j.blanckenburg@fasttube.de>
Date: Fri, 6 Sep 2024 14:04:29 +0200
Subject: [PATCH] Add overview popout

---
 src/routes/+layout.svelte        |  5 +++
 src/routes/+page.svelte          |  7 ++--
 src/routes/overview.svelte       | 56 ++++++++++++++++++++------------
 src/routes/overview/+page.svelte | 10 ++++++
 4 files changed, 56 insertions(+), 22 deletions(-)
 create mode 100644 src/routes/+layout.svelte
 create mode 100644 src/routes/overview/+page.svelte

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..f87b35e
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import '../app.css';
+</script>
+
+<slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 565eb5d..356b731 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
 	import MasterStatusDisplay from './master-status-display.svelte';
 	import SlaveStatusDisplay from './slave-status-display.svelte';
-	import '../app.css';
 	import MasterErrorDisplay from './master-error-display.svelte';
 	import ShuntStatusDisplay from './shunt-status-display.svelte';
 	import Overview from './overview.svelte';
 	import { amsStatus, error, shunt, slaveLog, slaveStatus } from '$lib/client';
 </script>
 
+<svelte:head>
+	<title>Charging</title>
+</svelte:head>
+
 <div class="vertical-wrapper">
-	<Overview amsStatus={$amsStatus} current={$shunt.current} voltage={$shunt.voltage1} />
+	<Overview amsStatus={$amsStatus} shunt={$shunt} showPopout={true} />
 	<div class="wrapper">
 		<MasterErrorDisplay error={$error} />
 		<MasterStatusDisplay status={$amsStatus} />
diff --git a/src/routes/overview.svelte b/src/routes/overview.svelte
index 4f4b78c..341ee3b 100644
--- a/src/routes/overview.svelte
+++ b/src/routes/overview.svelte
@@ -1,32 +1,48 @@
 <script lang="ts">
+	import type { ShuntData } from '$lib/client';
 	import { AMSState, type AMSStatus } from '$lib/messages';
 
 	export let amsStatus: AMSStatus | undefined;
-	export let current: number | undefined;
-	export let voltage: number | undefined;
+	export let shunt: ShuntData;
+	export let showPopout: boolean = false;
 </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 class="flex flex-col w-[30rem] border-2 border-black p-1 m-1">
+	{#if showPopout}
+		<div class="flex flex-row justify-end mb-2">
+			<a
+				class="text-sm underline hover:no-underline"
+				href="/overview"
+				target="_blank"
+				on:click|preventDefault={() => {
+					window.open('/overview', 'newwindow', 'width=500,height=200,resizable=yes');
+					return false;
+				}}>Pop out</a
 			>
 		</div>
 	{/if}
+	<div class="grid grid-rows-3 gap-3">
+		{#if amsStatus != 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">{shunt.voltage1.toFixed(1)} V</span>
+				<span class="text-center border-r">{shunt.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>
 </div>
 
 <style>
diff --git a/src/routes/overview/+page.svelte b/src/routes/overview/+page.svelte
new file mode 100644
index 0000000..ec09d7b
--- /dev/null
+++ b/src/routes/overview/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Overview from '../overview.svelte';
+	import { amsStatus, shunt } from '$lib/client';
+</script>
+
+<svelte:head>
+	<title>Charging Overview</title>
+</svelte:head>
+
+<Overview amsStatus={$amsStatus} shunt={$shunt} />