FaSTTUBe/charger-display-svelte
51
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add overview popout

Browse Source
This commit is contained in:
Jasper Blanckenburg
2024-09-06 14:04:29 +02:00
parent 1da81476f7
commit 917464347a
4 changed files with 56 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/routes/+layout.svelte Normal file
View File

@ -0,0 +1,5 @@
<script lang="ts">
import '../app.css';
</script>
<slot />

7
src/routes/+page.svelte
View File

@ -1,15 +1,18 @@
<script lang="ts"> <script lang="ts">
import MasterStatusDisplay from './master-status-display.svelte'; import MasterStatusDisplay from './master-status-display.svelte';
import SlaveStatusDisplay from './slave-status-display.svelte'; import SlaveStatusDisplay from './slave-status-display.svelte';
import '../app.css';
import MasterErrorDisplay from './master-error-display.svelte'; import MasterErrorDisplay from './master-error-display.svelte';
import ShuntStatusDisplay from './shunt-status-display.svelte'; import ShuntStatusDisplay from './shunt-status-display.svelte';
import Overview from './overview.svelte'; import Overview from './overview.svelte';
import { amsStatus, error, shunt, slaveLog, slaveStatus } from '$lib/client'; import { amsStatus, error, shunt, slaveLog, slaveStatus } from '$lib/client';
</script> </script>
<svelte:head>
<title>Charging</title>
</svelte:head>
<div class="vertical-wrapper"> <div class="vertical-wrapper">
<Overview amsStatus={$amsStatus} current={$shunt.current} voltage={$shunt.voltage1} /> <Overview amsStatus={$amsStatus} shunt={$shunt} showPopout={true} />
<div class="wrapper"> <div class="wrapper">
<MasterErrorDisplay error={$error} /> <MasterErrorDisplay error={$error} />
<MasterStatusDisplay status={$amsStatus} /> <MasterStatusDisplay status={$amsStatus} />

56
src/routes/overview.svelte
View File

@ -1,32 +1,48 @@
<script lang="ts"> <script lang="ts">
import type { ShuntData } from '$lib/client';
import { AMSState, type AMSStatus } from '$lib/messages'; import { AMSState, type AMSStatus } from '$lib/messages';
export let amsStatus: AMSStatus | undefined; export let amsStatus: AMSStatus | undefined;
export let current: number | undefined; export let shunt: ShuntData;
export let voltage: number | undefined; export let showPopout: boolean = false;
</script> </script>
<div class="overview grid grid-rows-3 gap-3"> <div class="flex flex-col w-[30rem] border-2 border-black p-1 m-1">
{#if amsStatus != null && current != null && voltage != null} {#if showPopout}
<div class="progress" data-label="{amsStatus.soc}%"> <div class="flex flex-row justify-end mb-2">
<span class="value" style="width:{amsStatus.soc}%;"></span> <a
</div> class="text-sm underline hover:no-underline"
<div class="grid grid-cols-4 gap-2"> href="/overview"
<span class="text-center border-r">{voltage.toFixed(1)} V</span> target="_blank"
<span class="text-center border-r">{current.toFixed(1)} A</span> on:click|preventDefault={() => {
<span class="text-center border-r">{amsStatus.maxCellTemp.toFixed(1)}°C</span> window.open('/overview', 'newwindow', 'width=500,height=200,resizable=yes');
<span class="text-center">SDC {amsStatus.sdcClosed ? '✅' : '❌'}</span> return false;
</div> }}>Pop out</a
<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> </div>
{/if} {/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> </div>
<style> <style>

10
src/routes/overview/+page.svelte Normal file
View File

@ -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} />