From ba70f0e66aa07b8ca037dd0535dbf1f168477105 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Fri, 9 Feb 2024 16:54:30 +0100
Subject: [PATCH] feat(ui): add template name to charging stations list
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---
 .../src/components/charging-stations/CSData.vue |  1 +
 .../charging-stations/CSInfoModal.vue           |  2 +-
 .../components/charging-stations/CSTable.vue    |  2 ++
 ui/web/src/types/ChargingStationType.ts         | 17 +++++++++++++++++
 ui/web/src/views/ChargingStationsView.vue       |  5 +----
 ui/web/tests/unit/CSTable.spec.ts               |  1 +
 6 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index ad5e81c7..1b740f75 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -11,6 +11,7 @@
     <td class="cs-table__started-col">{{ getStarted() }}</td>
     <td class="cs-table__wsState-col">{{ getWsState() }}</td>
     <td class="cs-table__registration-status-col">{{ getRegistrationStatus() }}</td>
+    <td class="cs-table__template-col">{{ getInfo().templateName }}</td>
     <td class="cs-table__vendor-col">{{ getVendor() }}</td>
     <td class="cs-table__model-col">{{ getModel() }}</td>
     <td class="cs-table__firmware-col">{{ getFirmwareVersion() }}</td>
diff --git a/ui/web/src/components/charging-stations/CSInfoModal.vue b/ui/web/src/components/charging-stations/CSInfoModal.vue
index 27096c7b..8afb2de1 100644
--- a/ui/web/src/components/charging-stations/CSInfoModal.vue
+++ b/ui/web/src/components/charging-stations/CSInfoModal.vue
@@ -17,6 +17,6 @@ const props = defineProps<{
 <style>
 .card-info {
   background-color: white;
-  padding: 15px;
+  padding: 0.2%;
 }
 </style>
diff --git a/ui/web/src/components/charging-stations/CSTable.vue b/ui/web/src/components/charging-stations/CSTable.vue
index 1fffaadb..11dfb5bb 100644
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -13,6 +13,7 @@
         <th scope="col" class="cs-table__started-col">Started</th>
         <th scope="col" class="cs-table__wsState-col">WebSocket State</th>
         <th scope="col" class="cs-table__registration-status-col">Registration Status</th>
+        <th scope="col" class="cs-table__template-col">Template</th>
         <th scope="col" class="cs-table__vendor-col">Vendor</th>
         <th scope="col" class="cs-table__model-col">Model</th>
         <th scope="col" class="cs-table__firmware-col">Firmware Version</th>
@@ -88,6 +89,7 @@ const props = defineProps<{
 .cs-table__started-col,
 .cs-table__wsState-col,
 .cs-table__registration-status-col,
+.cs-table__template-col,
 .cs-table__model-col,
 .cs-table__vendor-col,
 .cs-table__firmware-col {
diff --git a/ui/web/src/types/ChargingStationType.ts b/ui/web/src/types/ChargingStationType.ts
index 2e79fbc8..7e8457a9 100644
--- a/ui/web/src/types/ChargingStationType.ts
+++ b/ui/web/src/types/ChargingStationType.ts
@@ -5,6 +5,7 @@ export type ChargingStationData = {
   stationInfo: ChargingStationInfo
   connectors: ConnectorStatus[]
   evses: EvseStatus[]
+  ocppConfiguration: ChargingStationOcppConfiguration
   wsState?:
     | typeof WebSocket.CONNECTING
     | typeof WebSocket.OPEN
@@ -31,6 +32,7 @@ export type FirmwareStatus = OCPP16FirmwareStatus
 
 export type ChargingStationInfo = {
   hashId: string
+  templateName: string
   chargingStationId?: string
   chargePointModel: string
   chargePointVendor: string
@@ -87,6 +89,21 @@ export type ChargingStationInfo = {
   messageTriggerSupport?: Record<MessageTrigger, boolean>
 }
 
+export interface ChargingStationOcppConfiguration {
+  configurationKey?: ConfigurationKey[]
+}
+
+export type ConfigurationKey = OCPPConfigurationKey & {
+  visible?: boolean
+  reboot?: boolean
+}
+
+export type OCPPConfigurationKey = {
+  key: string
+  readonly: boolean
+  value?: string
+} & JsonObject
+
 export enum OCPP16IncomingRequestCommand {
   RESET = 'Reset',
   CLEAR_CACHE = 'ClearCache',
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 5e385955..4e4772ec 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -63,11 +63,10 @@ function stopSimulator(): void {
 #charging-stations {
   height: 100%;
   width: 100%;
-  padding: 30px;
+  padding: 0.5%;
   background-color: rgb(233, 227, 227);
   display: flex;
   flex-direction: column;
-  gap: 0.5%;
 }
 
 #inputs-container {
@@ -77,9 +76,7 @@ function stopSimulator(): void {
 
 #reload-button {
   flex: auto;
-  padding: 5px 15px;
   background-color: rgb(25, 118, 210);
-  border-radius: 5px;
   color: white;
   font-size: 35px;
   font-weight: bold;
diff --git a/ui/web/tests/unit/CSTable.spec.ts b/ui/web/tests/unit/CSTable.spec.ts
index 39c980c5..d2738748 100644
--- a/ui/web/tests/unit/CSTable.spec.ts
+++ b/ui/web/tests/unit/CSTable.spec.ts
@@ -16,6 +16,7 @@ test('renders CS table columns name', () => {
   expect(wrapper.text()).to.include('Started')
   expect(wrapper.text()).to.include('WebSocket State')
   expect(wrapper.text()).to.include('Registration Status')
+  expect(wrapper.text()).to.include('Template')
   expect(wrapper.text()).to.include('Vendor')
   expect(wrapper.text()).to.include('Model')
   expect(wrapper.text()).to.include('Firmware Version')
-- 
2.34.1