From: Jérôme Benoit <jerome.benoit@sap.com>
Date: Tue, 27 Feb 2024 21:04:56 +0000 (+0100)
Subject: fix(ui): ensure the charging stations list re-rendered after UI server
X-Git-Tag: v1.2.38~32
X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=7e2e8c9b820004dc6a84d6a5629575460daf8167;p=e-mobility-charging-stations-simulator.git

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

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 01480020..2462e6d6 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -41,6 +41,7 @@
     </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>
diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts
index 963e0e4b..bd0208ad 100644
--- a/ui/web/src/composables/UIClient.ts
+++ b/ui/web/src/composables/UIClient.ts
@@ -43,9 +43,10 @@ export class UIClient {
 
   public registerWSEventListener<K extends keyof WebSocketEventMap>(
     event: K,
-    listener: (event: WebSocketEventMap[K]) => void
+    listener: (event: WebSocketEventMap[K]) => void,
+    options?: boolean | AddEventListenerOptions
   ) {
-    this.ws.addEventListener(event, listener)
+    this.ws.addEventListener(event, listener, options)
   }
 
   public async startSimulator(): Promise<ResponsePayload> {
diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index f3c9ef03..0e799684 100644
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -37,20 +37,24 @@ const initializeApp = (app: AppType, config: ConfigurationData) => {
         getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
       ]
     )
-    app.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
-      app.config.globalProperties.$uiClient
-        .listChargingStations()
-        .then((response: ResponsePayload) => {
-          app.config.globalProperties.$chargingStations = response.chargingStations
-        })
-        .catch((error: Error) => {
-          // TODO: add code for UI notifications or other error handling logic
-          console.error('Error at fetching charging stations:', error)
-        })
-        .finally(() => {
-          app.use(router).use(ToastPlugin).mount('#app')
-        })
-    })
+    app.config.globalProperties.$uiClient.registerWSEventListener(
+      'open',
+      () => {
+        app.config.globalProperties.$uiClient
+          .listChargingStations()
+          .then((response: ResponsePayload) => {
+            app.config.globalProperties.$chargingStations = response.chargingStations
+          })
+          .catch((error: Error) => {
+            // TODO: add code for UI notifications or other error handling logic
+            console.error('Error at fetching charging stations:', error)
+          })
+          .finally(() => {
+            app.use(router).use(ToastPlugin).mount('#app')
+          })
+      },
+      { once: true }
+    )
   }
 }
 
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 113137c8..d4848e11 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -14,11 +14,25 @@
                 getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
               ) {
                 setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
-                app!.appContext.config.globalProperties.$uiClient.setConfiguration(
+                app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
+                  'close',
+                  () => {
+                    app!.appContext.config.globalProperties.$chargingStations = []
+                  },
+                  { once: true }
+                )
+                app?.appContext.config.globalProperties.$uiClient.setConfiguration(
                   app?.appContext.config.globalProperties.$configuration.uiServer[
                     getFromLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
                   ]
                 )
+                app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
+                  'open',
+                  () => {
+                    loadChargingStations(() => (state.renderChargingStationsList = randomUUID()))
+                  },
+                  { once: true }
+                )
               }
             } catch (error) {
               $toast.error('Error at changing UI server configuration')