feat(ui): add template name to charging stations list

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>

diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index ad5e81c788f22bf6beacb0d15aa01caf7d80c629..1b740f750f1b5cc558e91a3e75e69c597331e758 100644 (file)
--- 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 27096c7b347e05437cb8d7baa485e741a467cb48..8afb2de1a5b04fdfcc143963ae499ebb226c657c 100644 (file)
--- 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 1fffaadbd70beeca620935d6324b48b1cb8db2d8..11dfb5bb286923fa9feccc03d85cc185ebd26307 100644 (file)
--- 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 2e79fbc8b44204fe57ea395b3aa934555ae650da..7e8457a9e8df6bc9a2fda96eee4d0670ae9d5aeb 100644 (file)
--- 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 5e385955fb060abef6d59dfbffb1d85a94f19703..4e4772ecbf22c84a153471243d86c0280d5b16c8 100644 (file)
--- 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 39c980c5d244ef1a0f954bcf1241b8ff6129064f..d27387480fdbe0f93991538292b84ebc854fd18d 100644 (file)
--- 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')