Implement dashboard data logic

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>