From: Jérôme Benoit <jerome.benoit@sap.com>
Date: Mon, 26 Feb 2024 23:13:27 +0000 (+0100)
Subject: feat(ui): add support for multiple UI server configurations
X-Git-Tag: v1.2.38~39
X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=0344ad2b24f8b043b5848a0fea8b5a120d6781db;p=e-mobility-charging-stations-simulator.git

feat(ui): add support for multiple UI server configurations

closes #978

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 d569b93b..51d61f26 100644
--- a/ui/web/src/composables/UIClient.ts
+++ b/ui/web/src/composables/UIClient.ts
@@ -1,3 +1,4 @@
+import { useToast } from 'vue-toast-notification'
 import {
   ApplicationProtocol,
   AuthenticationType,
@@ -161,15 +162,21 @@ export class UIClient {
       `${this.uiServerConfiguration.secure === true ? ApplicationProtocol.WSS : ApplicationProtocol.WS}://${this.uiServerConfiguration.host}:${this.uiServerConfiguration.port}`,
       protocols
     )
-    this.ws.onopen = openEvent => {
-      console.info('WebSocket opened', openEvent)
+    this.ws.onopen = () => {
+      useToast().success(
+        `WebSocket to UI server '${this.uiServerConfiguration.host}' successfully opened`
+      )
     }
     this.ws.onmessage = this.responseHandler.bind(this)
     this.ws.onerror = errorEvent => {
-      console.error('WebSocket error: ', errorEvent)
+      useToast().error(`Error in WebSocket to UI server '${this.uiServerConfiguration.host}'`)
+      console.error(
+        `Error in WebSocket to UI server '${this.uiServerConfiguration.host}'`,
+        errorEvent
+      )
     }
-    this.ws.onclose = closeEvent => {
-      console.info('WebSocket closed: ', closeEvent)
+    this.ws.onclose = () => {
+      useToast().info(`WebSocket to UI server '${this.uiServerConfiguration.host}' closed`)
     }
   }
 
diff --git a/ui/web/src/composables/Utils.ts b/ui/web/src/composables/Utils.ts
index 451c4155..fffd7a54 100644
--- a/ui/web/src/composables/Utils.ts
+++ b/ui/web/src/composables/Utils.ts
@@ -32,3 +32,12 @@ export const convertToInt = (value: unknown): number => {
   }
   return changedValue
 }
+
+export const setToLocalStorage = <T>(key: string, value: T): void => {
+  localStorage.setItem(key, JSON.stringify(value))
+}
+
+export const getFromLocalStorage = <T>(key: string, defaultValue: T): T => {
+  const item = localStorage.getItem(key)
+  return item != null ? (JSON.parse(item) as T) : defaultValue
+}
diff --git a/ui/web/src/composables/index.ts b/ui/web/src/composables/index.ts
index 31e231e8..bc62dcb5 100644
--- a/ui/web/src/composables/index.ts
+++ b/ui/web/src/composables/index.ts
@@ -1,2 +1,2 @@
 export { UIClient } from './UIClient'
-export { convertToBoolean, convertToInt } from './Utils'
+export { convertToBoolean, convertToInt, getFromLocalStorage, setToLocalStorage } from './Utils'
diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index 6dc93195..f3c9ef03 100644
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -1,38 +1,57 @@
-import { createApp } from 'vue'
+import { type App as AppType, createApp } from 'vue'
 import ToastPlugin from 'vue-toast-notification'
 import type { ConfigurationData, ResponsePayload } from '@/types'
 import { router } from '@/router'
-import { UIClient } from '@/composables'
+import { UIClient, getFromLocalStorage, setToLocalStorage } from '@/composables'
 import App from '@/App.vue'
 import 'vue-toast-notification/dist/theme-bootstrap.css'
 
-const initializeApp = (config: ConfigurationData) => {
-  const app = createApp(App)
+const app = createApp(App)
+
+const initializeApp = (app: AppType, config: ConfigurationData) => {
   app.config.errorHandler = (error, instance, info) => {
     console.error('Error:', error)
     console.info('Vue instance:', instance)
     console.info('Error info:', info)
     // TODO: add code for UI notifications or other error handling logic
   }
-  app.config.globalProperties.$configuration = config
-  app.config.globalProperties.$chargingStations = []
-  app.config.globalProperties.$uiClient = UIClient.getInstance(
-    app.config.globalProperties.$configuration.uiServer
-  )
-  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')
-      })
-  })
+  if (!Array.isArray(config.uiServer)) {
+    config.uiServer = [config.uiServer]
+  }
+  if (app.config.globalProperties.$configuration == null) {
+    app.config.globalProperties.$configuration = config
+  }
+  if (!Array.isArray(app.config.globalProperties.$chargingStations)) {
+    app.config.globalProperties.$chargingStations = []
+  }
+  if (
+    getFromLocalStorage<number | undefined>('uiServerConfigurationIndex', undefined) == null ||
+    getFromLocalStorage<number>('uiServerConfigurationIndex', 0) >
+      app.config.globalProperties.$configuration.uiServer.length - 1
+  ) {
+    setToLocalStorage<number>('uiServerConfigurationIndex', 0)
+  }
+  if (app.config.globalProperties.$uiClient == null) {
+    app.config.globalProperties.$uiClient = UIClient.getInstance(
+      app.config.globalProperties.$configuration.uiServer[
+        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')
+        })
+    })
+  }
 }
 
 fetch('/config.json')
@@ -46,7 +65,7 @@ fetch('/config.json')
       .json()
       .then(config => {
         try {
-          initializeApp(config)
+          initializeApp(app, config)
         } catch (error) {
           // TODO: add code for UI notifications or other error handling logic
           console.error('Error at initializing app:', error)
diff --git a/ui/web/src/types/ConfigurationType.ts b/ui/web/src/types/ConfigurationType.ts
index 5d0f7679..51bd2138 100644
--- a/ui/web/src/types/ConfigurationType.ts
+++ b/ui/web/src/types/ConfigurationType.ts
@@ -1,7 +1,7 @@
 import type { AuthenticationType, Protocol, ProtocolVersion } from './UIProtocol'
 
 export type ConfigurationData = {
-  uiServer: UIServerConfigurationSection
+  uiServer: UIServerConfigurationSection | UIServerConfigurationSection[]
 }
 
 export type UIServerConfigurationSection = {
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index d5868083..fe660111 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -1,5 +1,38 @@
 <template>
   <Container id="charging-stations-container">
+    <Container id="ui-server-container">
+      <select
+        v-show="Array.isArray(uiServerConfigurations) && uiServerConfigurations.length > 1"
+        id="ui-server-selector"
+        v-model="state.uiServerIndex"
+        @change="
+          () => {
+            try {
+              if (
+                getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
+              ) {
+                setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
+                app!.appContext.config.globalProperties.$uiClient.setConfiguration(
+                  app?.appContext.config.globalProperties.$configuration.uiServer[
+                    getFromLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
+                  ]
+                )
+              }
+            } catch (error) {
+              $toast.error('Error at changing UI server configuration')
+              console.error('Error at changing UI server configuration:', error)
+            }
+          }
+        "
+      >
+        <option
+          v-for="uiServerConfiguration in uiServerConfigurations"
+          :value="uiServerConfiguration.index"
+        >
+          {{ uiServerConfiguration.configuration.host }}
+        </option>
+      </select>
+    </Container>
     <Container id="buttons-container">
       <Button @click="startSimulator()">Start Simulator</Button>
       <Button @click="stopSimulator()">Stop Simulator</Button>
@@ -26,17 +59,26 @@
 import { getCurrentInstance, reactive } from 'vue'
 import { useToast } from 'vue-toast-notification'
 import CSTable from '@/components/charging-stations/CSTable.vue'
-import type { ResponsePayload } from '@/types'
+import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
 import Container from '@/components/Container.vue'
 import ReloadButton from '@/components/buttons/ReloadButton.vue'
 import Button from '@/components/buttons/Button.vue'
+import { getFromLocalStorage, setToLocalStorage } from '@/composables'
 
 const state = reactive({
-  isLoading: false
+  isLoading: false,
+  uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
 })
 
 const app = getCurrentInstance()
 const uiClient = app?.appContext.config.globalProperties.$uiClient
+const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
+  app?.appContext.config.globalProperties.$configuration.uiServer.map(
+    (configuration: UIServerConfigurationSection, index: number) => ({
+      configuration,
+      index
+    })
+  )
 
 const $toast = useToast()
 
@@ -98,6 +140,16 @@ const stopSimulator = (): void => {
   flex-direction: column;
 }
 
+#ui-server-container {
+  display: flex;
+  flex-direction: row;
+}
+
+#ui-server-selector {
+  width: 100%;
+  text-align: center;
+}
+
 #buttons-container {
   display: flex;
   flex-direction: row;