From e7e7179cd98a42f36f128a5ff0260ac97af8fc5e Mon Sep 17 00:00:00 2001
From: Bluemedia <oliver@traber-info.de>
Date: Sun, 27 Apr 2025 13:56:20 +0000
Subject: [PATCH] WIP: Add chargepoint list

---
 frontend/src/lib/types/chargepoint.ts         | 19 ++++
 .../routes/(navbar)/chargepoint/+page.svelte  | 98 +++++++++++++++++++
 frontend/static/locales/de/chargepoint.json   | 13 +++
 frontend/static/locales/en/chargepoint.json   | 13 +++
 4 files changed, 143 insertions(+)
 create mode 100644 frontend/src/lib/types/chargepoint.ts
 create mode 100644 frontend/static/locales/de/chargepoint.json
 create mode 100644 frontend/static/locales/en/chargepoint.json

diff --git a/frontend/src/lib/types/chargepoint.ts b/frontend/src/lib/types/chargepoint.ts
new file mode 100644
index 0000000..ade067b
--- /dev/null
+++ b/frontend/src/lib/types/chargepoint.ts
@@ -0,0 +1,19 @@
+export type ChargePoint = {
+  identity: string;
+  is_active: boolean;
+  price: number;
+  id: string;
+  last_seen: string;
+  vendor_name: string;
+  model: string;
+  serial_number: string,
+  firmware_version: string;
+  connectors: [
+    {
+      id: string;
+      evse: number;
+      index: number;
+      status: 'Available' | 'Occupied' | 'Reserved' | 'Unavailable' | 'Faulted'
+    }
+  ]
+}
\ No newline at end of file
diff --git a/frontend/src/routes/(navbar)/chargepoint/+page.svelte b/frontend/src/routes/(navbar)/chargepoint/+page.svelte
index e69de29..f12908f 100644
--- a/frontend/src/routes/(navbar)/chargepoint/+page.svelte
+++ b/frontend/src/routes/(navbar)/chargepoint/+page.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+  import i18n from '$lib/i18n'
+  import type { ChargePoint } from '$lib/types/chargepoint'
+
+  $i18n.loadNamespaces('chargepoint')
+
+  let chargepoints: ChargePoint[] = $state([])
+  let page: number = $state(1)
+
+  
+</script>
+
+<div class="w-full h-full mt-4 flex flex-col">
+  <p class="w-full text-2xl font-bold">
+    {$i18n.t('chargepoint:header')}
+  </p>
+  <div class="overflow-x-auto mt-8 bg-base-100 rounded-md">
+    <table class="table">
+      <thead>
+        <tr>
+          <th>{$i18n.t('chargepoint:tableHeader.name')}</th>
+          <th>{$i18n.t('chargepoint:tableHeader.active')}</th>
+          <th>{$i18n.t('chargepoint:tableHeader.lastSeen')}</th>
+          <th>{$i18n.t('chargepoint:tableHeader.price')}</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        {#if chargepoints.length > 0}
+          {#each chargepoints as chargepoint}
+            <tr>
+              <td>
+                <div class="flex items-center gap-3">
+                  <div>
+                    <p>
+                      {$i18n.t('common:transactionTable.startTime', {
+                        time: transaction.begin,
+                        formatParams: {
+                          time: {
+                            year: 'numeric',
+                            month: 'numeric',
+                            day: 'numeric',
+                            hour: 'numeric',
+                            minute: 'numeric',
+                            second: 'numeric',
+                          },
+                        },
+                      })}
+                    </p>
+                    <p>
+                      {$i18n.t('common:transactionTable.endTime', {
+                        time: transaction.end,
+                        formatParams: {
+                          time: {
+                            year: 'numeric',
+                            month: 'numeric',
+                            day: 'numeric',
+                            hour: 'numeric',
+                            minute: 'numeric',
+                            second: 'numeric',
+                          },
+                        },
+                      })}
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <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}
+                </a>
+              </td>
+              <td class="font-bold">{transaction.energyAmmount} kWh</td>
+              <td class="font-bold">{transaction.cost} €</td>
+              <th>
+                <a href="/chargepoint/{chargepoint.id}" class="btn btn-sm btn-primary">
+                  {$i18n.t('common:transactionTable.detailButton')}
+                  <i class="bi bi-arrow-right"></i>
+                </a>
+              </th>
+            </tr>
+          {/each}
+        {/if}
+      </tbody>
+    </table>
+    {#if chargepoints.length === 0}
+      <p class="w-full mt-15 mb-15 text-center text-xl font-bold">
+        {$i18n.t('chargepoint:noChargepoints')}
+      </p>
+    {/if}
+  </div>
+  <div class="join mt-4">
+    <button class="join-item btn bg-base-100">«</button>
+    <button class="join-item btn bg-base-100">Page {page}</button>
+    <button class="join-item btn bg-base-100">»</button>
+  </div>
+</div>
diff --git a/frontend/static/locales/de/chargepoint.json b/frontend/static/locales/de/chargepoint.json
new file mode 100644
index 0000000..4f76841
--- /dev/null
+++ b/frontend/static/locales/de/chargepoint.json
@@ -0,0 +1,13 @@
+{
+  "header": "Ladepunkte",
+  "tableHeader": {
+    "name": "Name",
+    "active": "Aktiv",
+    "price": "Preis",
+    "lastSeen": "Zuletzt gesehen"
+  },
+  "tableFormatting": {
+    "lastSeen": "{{val, relativetime}}"
+  },
+  "noChargepoints": "Noch keine Ladepunkte vorhanden."
+}
\ No newline at end of file
diff --git a/frontend/static/locales/en/chargepoint.json b/frontend/static/locales/en/chargepoint.json
new file mode 100644
index 0000000..0bcbf00
--- /dev/null
+++ b/frontend/static/locales/en/chargepoint.json
@@ -0,0 +1,13 @@
+{
+  "header": "Chargepoints",
+  "tableHeader": {
+    "name": "Name",
+    "active": "Active",
+    "price": "Price",
+    "lastSeen": "Last seen"
+  },
+  "tableFormatting": {
+    "lastSeen": "{{val, relativetime}}"
+  },
+  "noChargepoints": "There are no chargepoints yet."
+}
\ No newline at end of file