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

[e-mobility-charging-stations-simulator.git] / ui / web / src / main.ts

diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index 6dc93195770718d467a2b03bf78934eacf126e21..f3c9ef036f6fb46445aa2f06f0c482d632e4e1cc 100644 (file)
--- 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)