From 5fa13de64237fc48e8883312ae011005cbdb8652 Mon Sep 17 00:00:00 2001 From: BluemediaDev Date: Sun, 25 May 2025 21:07:28 +0000 Subject: [PATCH] Implement dashboard data logic --- .../src/lib/component/DashboardCard.svelte | 26 ++--- .../src/lib/component/TransactionTable.svelte | 27 +++-- frontend/src/lib/types/chargepoint.ts | 6 ++ frontend/src/lib/types/dashboard.ts | 14 +++ frontend/src/lib/types/transaction.ts | 17 ++++ frontend/src/lib/types/user.ts | 4 + frontend/src/routes/(navbar)/+page.svelte | 99 +++++++++---------- 7 files changed, 115 insertions(+), 78 deletions(-) create mode 100644 frontend/src/lib/types/dashboard.ts create mode 100644 frontend/src/lib/types/transaction.ts create mode 100644 frontend/src/lib/types/user.ts diff --git a/frontend/src/lib/component/DashboardCard.svelte b/frontend/src/lib/component/DashboardCard.svelte index 2b77f43..c476707 100644 --- a/frontend/src/lib/component/DashboardCard.svelte +++ b/frontend/src/lib/component/DashboardCard.svelte @@ -25,18 +25,20 @@

{props.value}{#if props.unit}{' ' + props.unit}{/if}

- {#if diff > 0} -
- {diff}% -
- {:else if diff < 0} -
- {diff}% -
- {:else} -
- {diff}% -
+ {#if !Number.isNaN(diff)} + {#if diff > 0} +
+ {diff}% +
+ {:else if diff < 0} +
+ {diff}% +
+ {:else} +
+ {diff}% +
+ {/if} {/if} diff --git a/frontend/src/lib/component/TransactionTable.svelte b/frontend/src/lib/component/TransactionTable.svelte index 0940a37..6b5a73e 100644 --- a/frontend/src/lib/component/TransactionTable.svelte +++ b/frontend/src/lib/component/TransactionTable.svelte @@ -1,18 +1,9 @@ @@ -36,7 +27,7 @@

{$i18n.t('common:transactionTable.startTime', { - time: transaction.begin, + time: new Date(transaction.started_at), formatParams: { time: { year: 'numeric', @@ -51,7 +42,7 @@

{$i18n.t('common:transactionTable.endTime', { - time: transaction.end, + time: new Date(transaction.ended_at!), formatParams: { time: { year: 'numeric', @@ -70,11 +61,15 @@ - {transaction.chargepoint.name} + {transaction.chargepoint.identity} - {transaction.energyAmmount} kWh - {transaction.cost} € + {(transaction.meter_end - transaction.meter_start).toFixed(2)} kWh + {((transaction.meter_end - transaction.meter_start) * transaction.price).toFixed(2)} € {$i18n.t('common:transactionTable.detailButton')} diff --git a/frontend/src/lib/types/chargepoint.ts b/frontend/src/lib/types/chargepoint.ts index ade067b..4e4574e 100644 --- a/frontend/src/lib/types/chargepoint.ts +++ b/frontend/src/lib/types/chargepoint.ts @@ -16,4 +16,10 @@ export type ChargePoint = { status: 'Available' | 'Occupied' | 'Reserved' | 'Unavailable' | 'Faulted' } ] +} + +export type ChargePointThumb = { + id: string; + identity: string; + price: number; } \ No newline at end of file diff --git a/frontend/src/lib/types/dashboard.ts b/frontend/src/lib/types/dashboard.ts new file mode 100644 index 0000000..51713ff --- /dev/null +++ b/frontend/src/lib/types/dashboard.ts @@ -0,0 +1,14 @@ +import type { Transaction } from "./transaction"; + +export type Dashboard = { + stats: { + transaction_count: number; + transaction_count_previous: number; + transaction_energy_total: number; + transaction_energy_total_previous: number; + transaction_cost_total: number; + transaction_cost_total_previous: number; + }; + current_transaction: Transaction | undefined; + recent_transactions: Transaction[]; +} \ No newline at end of file diff --git a/frontend/src/lib/types/transaction.ts b/frontend/src/lib/types/transaction.ts new file mode 100644 index 0000000..3fc6501 --- /dev/null +++ b/frontend/src/lib/types/transaction.ts @@ -0,0 +1,17 @@ +import type { ChargePointThumb } from "./chargepoint"; +import type { UserThumb } from "./user"; + +export type TransactionEventTriggerReason = 'Authorized' | 'CablePluggedIn' | 'ChargingRateChanged' | 'ChargingStateChanged' | 'Deauthorized' | 'EnergyLimitReached' | 'EVCommunicationLost' | 'EVConnectTimeout' | 'MeterValueClock' | 'MeterValuePeriodic' | 'TimeLimitReached' | 'Trigger' | 'UnlockCommand' | 'StopAuthorized' | 'EVDeparted' | 'EVDetected' | 'RemoteStop' | 'RemoteStart' | 'AbnormalCondition' | 'SignedDataReceived' | 'ResetCommand'; + +export type Transaction = { + id: string; + status: 'ongoing' | 'ended'; + started_at: string; + ended_at: string | undefined; + meter_start: number; + meter_end: number; + end_reason: TransactionEventTriggerReason; + price: number; + user: UserThumb; + chargepoint: ChargePointThumb; +} \ No newline at end of file diff --git a/frontend/src/lib/types/user.ts b/frontend/src/lib/types/user.ts new file mode 100644 index 0000000..aa1d184 --- /dev/null +++ b/frontend/src/lib/types/user.ts @@ -0,0 +1,4 @@ +export type UserThumb = { + id: string; + friendly_name: string; +} \ No newline at end of file diff --git a/frontend/src/routes/(navbar)/+page.svelte b/frontend/src/routes/(navbar)/+page.svelte index e96407d..de8c463 100644 --- a/frontend/src/routes/(navbar)/+page.svelte +++ b/frontend/src/routes/(navbar)/+page.svelte @@ -4,10 +4,39 @@ import i18n from '$lib/i18n' import DashboardCard from '$lib/component/DashboardCard.svelte' import TransactionTable from '$lib/component/TransactionTable.svelte' + import type { Dashboard } from '$lib/types/dashboard' + import axios from '$lib/axios.svelte' + import { onMount } from 'svelte' $i18n.loadNamespaces('dashboard') - let hasActiveTransaction = $state(true) + let dashboardData: Dashboard = $state({ + stats: { + transaction_count: 0, + transaction_count_previous: 0, + transaction_energy_total: 0, + transaction_energy_total_previous: 0, + transaction_cost_total: 0, + transaction_cost_total_previous: 0, + }, + current_transaction: undefined, + recent_transactions: [], + }) + + function refreshDashboard() { + axios.get('/me/dashboard').then((res) => { + dashboardData = res.data + }) + } + + onMount(() => { + refreshDashboard() + const interval = setInterval(() => { + refreshDashboard() + }, 15000) + + return () => clearInterval(interval) + })

@@ -23,18 +52,21 @@ {$i18n.t('dashboard:cards.currentTransaction')}

- {#if hasActiveTransaction} + {#if dashboardData.current_transaction}
{/if}

- {#if hasActiveTransaction}0,25 kWh{:else}-{/if} + {#if dashboardData.current_transaction}{dashboardData.current_transaction + .meter_end - dashboardData.current_transaction.meter_start} kWh{:else}-{/if}

- {#if hasActiveTransaction} + {#if dashboardData.current_transaction}
- 2,30 € + {(dashboardData.current_transaction.meter_end - + dashboardData.current_transaction.meter_start) * + dashboardData.current_transaction.price} €
{/if}
@@ -43,13 +75,15 @@

- {#if hasActiveTransaction} - {$i18n.t('dashboard:cards.chargepoint', { name: 'DE-EXMPL-0001' })} + {#if dashboardData.current_transaction} + {$i18n.t('dashboard:cards.chargepoint', { + name: dashboardData.current_transaction.chargepoint.identity, + })} {:else} {$i18n.t('dashboard:cards.noCurrentTransaction')} {/if}

- {#if hasActiveTransaction} + {#if dashboardData.current_transaction}

{$i18n.t('dashboard:table.title')}

- +