fix(ui): ensure the charging stations list re-rendered after UI server

[e-mobility-charging-stations-simulator.git] / ui / web / src / components / charging-stations / CSData.vue

diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index 300cfa441ea35b2fdfebf25de22bf31329469a7f..2462e6d6172daeba545bbec7f03add81eae16bf2 100644 (file)
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -7,7 +7,7 @@
     <td class="cs-table__column">
       {{ getSupervisionUrl() }}
     </td>
-    <td class="cs-table__column">{{ getWsState() }}</td>
+    <td class="cs-table__column">{{ getWSState() }}</td>
     <td class="cs-table__column">
       {{ props.chargingStation?.bootNotificationResponse?.status ?? 'Ø' }}
     </td>
@@ -32,14 +32,16 @@
             }
           })
         "
-        >Set Supervision Url</Button
       >
+        Set Supervision Url
+      </Button>
       <Button @click="openConnection()">Open Connection</Button>
       <Button @click="closeConnection()">Close Connection</Button>
       <Button @click="deleteChargingStation()">Delete Charging Station</Button>
     </td>
     <td class="cs-table__connectors-column">
       <table id="connectors-table">
+        <caption></caption>
         <thead id="connectors-table__head">
           <tr class="connectors-table__row">
             <th scope="col" class="connectors-table__column">Identifier</th>
@@ -52,7 +54,7 @@
         <tbody id="connectors-table__body">
           <!-- eslint-disable-next-line vue/valid-v-for -->
           <CSConnector
-            v-for="(connector, index) in getConnectors()"
+            v-for="(connector, index) in getConnectorStatuses()"
             :hash-id="props.chargingStation.stationInfo.hashId"
             :charging-station-id="props.chargingStation.stationInfo.chargingStationId"
             :connector-id="index + 1"
@@ -76,17 +78,17 @@ const props = defineProps<{
   chargingStation: ChargingStationData
 }>()
 
-const getConnectors = (): ConnectorStatus[] => {
+const getConnectorStatuses = (): ConnectorStatus[] => {
   if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
-    const connectorsStatus: ConnectorStatus[] = []
+    const connectorStatuses: ConnectorStatus[] = []
     for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) {
       if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) {
         for (const connectorStatus of evseStatus.connectors) {
-          connectorsStatus.push(connectorStatus)
+          connectorStatuses.push(connectorStatus)
         }
       }
     }
-    return connectorsStatus
+    return connectorStatuses
   }
   return props.chargingStation.connectors?.slice(1)
 }
@@ -98,7 +100,7 @@ const getSupervisionUrl = (): string => {
   const supervisionUrl = new URL(props.chargingStation.supervisionUrl)
   return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}`
 }
-const getWsState = (): string => {
+const getWSState = (): string => {
   switch (props.chargingStation?.wsState) {
     case WebSocket.CONNECTING:
       return 'Connecting'
@@ -194,6 +196,7 @@ const deleteChargingStation = (): void => {
   flex-direction: row;
   justify-content: center;
   align-items: center;
+  border: solid 0.25px black;
 }
 
 .connectors-table__row:nth-of-type(even) {