feat!: handle Set at JSON serialization to string

[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 f3c9ef036f6fb46445aa2f06f0c482d632e4e1cc..a39c049ba99052c4e48a2898fe3039508f1aab15 100644 (file)
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -1,10 +1,12 @@
-import { type App as AppType, createApp } from 'vue'
+import 'vue-toast-notification/dist/theme-bootstrap.css'
+
+import { type App as AppType, createApp, ref } from 'vue'
 import ToastPlugin from 'vue-toast-notification'
-import type { ConfigurationData, ResponsePayload } from '@/types'
-import { router } from '@/router'
-import { UIClient, getFromLocalStorage, setToLocalStorage } from '@/composables'
+
 import App from '@/App.vue'
-import 'vue-toast-notification/dist/theme-bootstrap.css'
+import { getFromLocalStorage, setToLocalStorage, UIClient } from '@/composables'
+import { router } from '@/router'
+import type { ChargingStationData, ConfigurationData, UIServerConfigurationSection } from '@/types'
 
 const app = createApp(App)
 
@@ -19,39 +21,31 @@ const initializeApp = (app: AppType, config: ConfigurationData) => {
     config.uiServer = [config.uiServer]
   }
   if (app.config.globalProperties.$configuration == null) {
-    app.config.globalProperties.$configuration = config
+    app.config.globalProperties.$configuration = ref<ConfigurationData>(config)
+  }
+  if (!Array.isArray(app.config.globalProperties.$templates?.value)) {
+    app.config.globalProperties.$templates = ref<string[]>([])
   }
-  if (!Array.isArray(app.config.globalProperties.$chargingStations)) {
-    app.config.globalProperties.$chargingStations = []
+  if (!Array.isArray(app.config.globalProperties.$chargingStations?.value)) {
+    app.config.globalProperties.$chargingStations = ref<ChargingStationData[]>([])
   }
   if (
     getFromLocalStorage<number | undefined>('uiServerConfigurationIndex', undefined) == null ||
     getFromLocalStorage<number>('uiServerConfigurationIndex', 0) >
-      app.config.globalProperties.$configuration.uiServer.length - 1
+      (app.config.globalProperties.$configuration.value.uiServer as UIServerConfigurationSection[])
+        .length -
+        1
   ) {
     setToLocalStorage<number>('uiServerConfigurationIndex', 0)
   }
   if (app.config.globalProperties.$uiClient == null) {
     app.config.globalProperties.$uiClient = UIClient.getInstance(
-      app.config.globalProperties.$configuration.uiServer[
+      (app.config.globalProperties.$configuration.value.uiServer as UIServerConfigurationSection[])[
         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')
-        })
-    })
   }
+  app.use(router).use(ToastPlugin).mount('#app')
 }
 
 fetch('/config.json')
@@ -64,12 +58,7 @@ fetch('/config.json')
     response
       .json()
       .then(config => {
-        try {
-          initializeApp(app, config)
-        } catch (error) {
-          // TODO: add code for UI notifications or other error handling logic
-          console.error('Error at initializing app:', error)
-        }
+        initializeApp(app, config)
       })
       .catch(error => {
         // TODO: add code for UI notifications or other error handling logic