fix(ui): refresh add charging stations button on UI server switch

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

diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts
index 491a0b12cacb4c646cf76e72eb8a1ea998be19a9..023aef111f4fc41309ac3d3bf4eb915866dfda84 100644 (file)
--- a/ui/web/src/composables/UIClient.ts
+++ b/ui/web/src/composables/UIClient.ts
@@ -1,4 +1,5 @@
 import { useToast } from 'vue-toast-notification'
+import { randomUUID } from './Utils'
 import {
   ApplicationProtocol,
   AuthenticationType,
@@ -10,7 +11,6 @@ import {
   ResponseStatus,
   type UIServerConfigurationSection
 } from '@/types'
-import { randomUUID } from '@/composables'
 
 type ResponseHandler = {
   procedureName: ProcedureName

diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index fa313d6ec54b002e7c676eca395a499b0f215410..997b2a67b4f5e3c1b89cfbf738a87e3c1e1a6612 100644 (file)
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -20,11 +20,6 @@
                 'open',
                 () => {
                   setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
-                  for (const key in getLocalStorage()) {
-                    if (key.includes('toggle-button')) {
-                      removeFromLocalStorage(key)
-                    }
-                  }
                   $router.currentRoute.value.name !== 'charging-stations' &&
                     $router.push({ name: 'charging-stations' })
                 },
@@ -60,6 +55,7 @@
       <Button @click="stopSimulator()">Stop Simulator</Button>
       <ToggleButton
         :id="'add-charging-stations'"
+        :key="state.renderAddChargingStations"
         :shared="true"
         :on="
           () => {
@@ -110,6 +106,21 @@ import ToggleButton from '@/components/buttons/ToggleButton.vue'
 
 const app = getCurrentInstance()
 
+const clearToggleButtons = (): void => {
+  for (const key in getLocalStorage()) {
+    if (key.includes('toggle-button')) {
+      removeFromLocalStorage(key)
+    }
+  }
+}
+
+const clearChargingStations = (): void => {
+  clearToggleButtons()
+  app!.appContext.config.globalProperties.$chargingStations = []
+  state.value.renderAddChargingStations = randomUUID()
+  state.value.renderChargingStationsList = randomUUID()
+}
+
 const initializeWSEventListeners = () => {
   app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
     uiClient
@@ -126,16 +137,20 @@ const initializeWSEventListeners = () => {
         $toast.error('Error at fetching charging station templates')
         console.error('Error at fetching charging station templates:', error)
       })
-    loadChargingStations(() => (state.value.renderChargingStationsList = randomUUID()))
-  })
-  app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('error', () => {
-    app.appContext.config.globalProperties.$chargingStations = []
-    state.value.renderChargingStationsList = randomUUID()
-  })
-  app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('close', () => {
-    app.appContext.config.globalProperties.$chargingStations = []
-    state.value.renderChargingStationsList = randomUUID()
+    clearToggleButtons()
+    loadChargingStations(() => {
+      state.value.renderAddChargingStations = randomUUID()
+      state.value.renderChargingStationsList = randomUUID()
+    })
   })
+  app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
+    'error',
+    clearChargingStations
+  )
+  app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
+    'close',
+    clearChargingStations
+  )
 }
 
 onMounted(() => {
@@ -143,6 +158,7 @@ onMounted(() => {
 })
 
 const state = ref({
+  renderAddChargingStations: randomUUID(),
   renderChargingStationsList: randomUUID(),
   loading: false,
   uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)