feat(ui): allow to specificy a UI server configuration name

[e-mobility-charging-stations-simulator.git] / ui / web / src / views / ChargingStationsView.vue

diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 18b0cc028d1373845cf5a3f4e73f8c83339a5958..abea2075cc1207114d0a0d1174f5b1453058a709 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')
@@ -31,7 +45,7 @@
           v-for="uiServerConfiguration in uiServerConfigurations"
           :value="uiServerConfiguration.index"
         >
-          {{ uiServerConfiguration.configuration.host }}
+          {{ uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host }}
         </option>
       </select>
     </Container>
@@ -44,7 +58,7 @@
       <ReloadButton
         id="reload-button"
         :loading="state.loading"
-        @click="loadChargingStations(() => (state.reload = randomUUID()))"
+        @click="loadChargingStations(() => (state.renderChargingStationsList = randomUUID()))"
       />
     </Container>
     <CSTable
@@ -52,7 +66,7 @@
         Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
         app?.appContext.config.globalProperties.$chargingStations.length > 0
       "
-      :key="state.reload"
+      :key="state.renderChargingStationsList"
       :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
     />
   </Container>
@@ -73,8 +87,8 @@ const randomUUID = (): `${string}-${string}-${string}-${string}-${string}` => {
 }
 
 const state = reactive({
+  renderChargingStationsList: randomUUID(),
   loading: false,
-  reload: randomUUID(),
   uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
 })
 
@@ -90,7 +104,7 @@ const uiServerConfigurations: { configuration: UIServerConfigurationSection; ind
 
 const $toast = useToast()
 
-const loadChargingStations = (reloadCallback?: () => void): void => {
+const loadChargingStations = (renderCallback?: () => void): void => {
   if (state.loading === false) {
     state.loading = true
     uiClient
@@ -105,8 +119,8 @@ const loadChargingStations = (reloadCallback?: () => void): void => {
         console.error('Error at fetching charging stations:', error)
       })
       .finally(() => {
-        if (reloadCallback != null) {
-          reloadCallback()
+        if (renderCallback != null) {
+          renderCallback()
         }
         state.loading = false
       })