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 01480020337b9d89d70ebd44e24509f5cf3fc3f4..2462e6d6172daeba545bbec7f03add81eae16bf2 100644 (file)
--- 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 963e0e4b868d2a577f8d92f3a83d8f9c987d83c1..bd0208ad007f833c368c0543ede372c15a9dd003 100644 (file)
--- 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 f3c9ef036f6fb46445aa2f06f0c482d632e4e1cc..0e79968462d64a39b87bd39afc86d0b3feaea48a 100644 (file)
--- 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 113137c80a44a5eb302c0d1cead562f5acae90ad..d4848e11e8a631186424aec088f0a72624e9035e 100644 (file)
--- 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')