From d64ea57bcb4fd9151a43b16ff4d4b5ed059ad1d7 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Fri, 1 Mar 2024 16:02:32 +0100
Subject: [PATCH] fix(ui): refresh add charging stations button on UI server
 switch
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---
 ui/web/src/composables/UIClient.ts        |  2 +-
 ui/web/src/views/ChargingStationsView.vue | 44 +++++++++++++++--------
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts
index 491a0b12..023aef11 100644
--- 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 fa313d6e..997b2a67 100644
--- 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)
-- 
2.34.1