Implement dashboard data logic

2025-05-25 21:07:28 +00:00 · 2025-05-25 21:07:28 +00:00 · 5fa13de642
commit 5fa13de642
parent 1c810e6293
7 changed files with 115 additions and 78 deletions
--- a/frontend/src/lib/component/DashboardCard.svelte
+++ b/frontend/src/lib/component/DashboardCard.svelte
@ -25,18 +25,20 @@
          <p class="text-2xl font-semibold">
            {props.value}{#if props.unit}{' ' + props.unit}{/if}
          </p>
-          {#if diff > 0}
-            <div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
-              <i class="bi bi-arrow-up-right"></i>{diff}%
-            </div>
-          {:else if diff < 0}
-            <div class="badge badge-soft badge-error badge-sm gap-0.5 px-1 font-medium">
-              <i class="bi bi-arrow-down-right"></i>{diff}%
-            </div>
-          {:else}
-            <div class="badge badge-soft badge-warning badge-sm gap-0.5 px-1 font-medium">
-              <i class="bi bi-arrow-right"></i>{diff}%
-            </div>
+          {#if !Number.isNaN(diff)}
+            {#if diff > 0}
+              <div class="badge badge-outline badge-success badge-sm gap-0.5 px-1 font-medium">
+                <i class="bi bi-arrow-up-right"></i>{diff}%
+              </div>
+            {:else if diff < 0}
+              <div class="badge badge-outline badge-error badge-sm gap-0.5 px-1 font-medium">
+                <i class="bi bi-arrow-down-right"></i>{diff}%
+              </div>
+            {:else}
+              <div class="badge badge-outline badge-warning badge-sm gap-0.5 px-1 font-medium">
+                <i class="bi bi-arrow-right"></i>{diff}%
+              </div>
+            {/if}
          {/if}
        </div>
      </div>
--- a/frontend/src/lib/component/TransactionTable.svelte
+++ b/frontend/src/lib/component/TransactionTable.svelte
@ -1,18 +1,9 @@
 <script lang="ts">
  import i18n from '$lib/i18n'
+  import type { Transaction } from '$lib/types/transaction'

  let props: {
-    transactions: {
-      id: string
-      begin: Date
-      end: Date
-      chargepoint: {
-        name: string
-        id: string
-      }
-      energyAmmount: number
-      cost: number
-    }[]
+    transactions: Transaction[]
  } = $props()
 </script>

@ -36,7 +27,7 @@
                <div>
                  <p>
                    {$i18n.t('common:transactionTable.startTime', {
-                      time: transaction.begin,
+                      time: new Date(transaction.started_at),
                      formatParams: {
                        time: {
                          year: 'numeric',
@ -51,7 +42,7 @@
                  </p>
                  <p>
                    {$i18n.t('common:transactionTable.endTime', {
-                      time: transaction.end,
+                      time: new Date(transaction.ended_at!),
                      formatParams: {
                        time: {
                          year: 'numeric',
@ -70,11 +61,15 @@
            <td>
              <a href="/chargepoint/{transaction.chargepoint.id}" class="btn btn-sm btn-primary">
                <i class="bi bi-plug-fill text-lg"></i>
-                {transaction.chargepoint.name}
+                {transaction.chargepoint.identity}
              </a>
            </td>
-            <td class="font-bold">{transaction.energyAmmount} kWh</td>
-            <td class="font-bold">{transaction.cost} €</td>
+            <td class="font-bold"
+              >{(transaction.meter_end - transaction.meter_start).toFixed(2)} kWh</td
+            >
+            <td class="font-bold"
+              >{((transaction.meter_end - transaction.meter_start) * transaction.price).toFixed(2)} €</td
+            >
            <th>
              <a href="/transaction/{transaction.id}" class="btn btn-sm btn-primary">
                {$i18n.t('common:transactionTable.detailButton')}
--- 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;
 }
--- a/frontend/src/lib/types/dashboard.ts
+++ 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[];
+}
--- a/frontend/src/lib/types/transaction.ts
+++ 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;
+}
--- a/frontend/src/lib/types/user.ts
+++ b/frontend/src/lib/types/user.ts
@ -0,0 +1,4 @@
+export type UserThumb = {
+  id: string;
+  friendly_name: string;
+}
--- 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)
+  })
 </script>

 <div class="w-full h-full mt-10 flex flex-col">
@ -23,18 +52,21 @@
              {$i18n.t('dashboard:cards.currentTransaction')}
            </p>
            <div class="mt-3 flex items-center gap-2">
-              {#if hasActiveTransaction}
+              {#if dashboardData.current_transaction}
                <div class="inline-grid *:[grid-area:1/1]">
                  <div class="status status-success animate-ping"></div>
                  <div class="status status-success"></div>
                </div>
              {/if}
              <p class="text-2xl font-semibold">
-                {#if hasActiveTransaction}0,25 kWh{:else}-{/if}
+                {#if dashboardData.current_transaction}{dashboardData.current_transaction
+                    .meter_end - dashboardData.current_transaction.meter_start} kWh{:else}-{/if}
              </p>
-              {#if hasActiveTransaction}
+              {#if dashboardData.current_transaction}
                <div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
-                  2,30 €
+                  {(dashboardData.current_transaction.meter_end -
+                    dashboardData.current_transaction.meter_start) *
+                    dashboardData.current_transaction.price} €
                </div>
              {/if}
            </div>
@ -43,13 +75,15 @@
        </div>
        <div class="w-full flex flex-row items-center">
          <p class="text-base-content/60 text-sm">
-            {#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}
          </p>
-          {#if hasActiveTransaction}
+          {#if dashboardData.current_transaction}
            <button class="btn btn-xs btn-primary">
              {$i18n.t('dashboard:cards.toCurrentTransactionButton')}
              <i class="bi bi-arrow-right"></i>
@ -61,61 +95,26 @@
    <DashboardCard
      title={$i18n.t('dashboard:cards.transactionCount')}
      icon={'bi-battery-charging'}
-      value={3}
-      previousValue={1}
+      value={dashboardData.stats.transaction_count}
+      previousValue={dashboardData.stats.transaction_count_previous}
    />
    <DashboardCard
      title={$i18n.t('dashboard:cards.transactionEnergyTotal')}
      icon={'bi-lightning-charge-fill'}
-      value={180}
-      previousValue={50}
+      value={+dashboardData.stats.transaction_energy_total.toFixed(2)}
+      previousValue={+dashboardData.stats.transaction_energy_total_previous.toFixed(2)}
      unit={'kWh'}
    />
    <DashboardCard
      title={$i18n.t('dashboard:cards.transactionCostTotal')}
      icon={'bi-currency-exchange'}
-      value={30.56}
-      previousValue={30.56}
+      value={+dashboardData.stats.transaction_cost_total.toFixed(2)}
+      previousValue={+dashboardData.stats.transaction_cost_total_previous.toFixed(2)}
      unit={'€'}
    />
  </div>
  <div class="w-full flex flex-col mt-10">
    <p class="text-xl font-bold">{$i18n.t('dashboard:table.title')}</p>
-    <TransactionTable
-      transactions={[
-        {
-          id: '1',
-          begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
-          end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
-          chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
-          energyAmmount: 58.65,
-          cost: 36.45,
-        },
-        {
-          id: '2',
-          begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
-          end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
-          chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
-          energyAmmount: 58.65,
-          cost: 36.45,
-        },
-        {
-          id: '3',
-          begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
-          end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
-          chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
-          energyAmmount: 58.65,
-          cost: 36.45,
-        },
-        {
-          id: '4',
-          begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
-          end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
-          chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
-          energyAmmount: 58.65,
-          cost: 36.45,
-        },
-      ]}
-    />
+    <TransactionTable transactions={dashboardData.recent_transactions} />
  </div>
 </div>