fix(ui): move v-show to the UI server container component

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

diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts
index ce459f1b253504abbb478fa54b5aef5544646a22..51d61f263f7788adcd45e930ef79103dbd92d883 100644 (file)
--- a/ui/web/src/composables/UIClient.ts
+++ b/ui/web/src/composables/UIClient.ts
@@ -1,12 +1,14 @@
+import { useToast } from 'vue-toast-notification'
 import {
   ApplicationProtocol,
   AuthenticationType,
-  type ConfigurationData,
+  type ChargingStationOptions,
   ProcedureName,
   type ProtocolResponse,
   type RequestPayload,
   type ResponsePayload,
-  ResponseStatus
+  ResponseStatus,
+  type UIServerConfigurationSection
 } from '@/types'
 
 type ResponseHandler = {
@@ -21,18 +23,24 @@ export class UIClient {
   private ws!: WebSocket
   private responseHandlers: Map<string, ResponseHandler>
 
-  private constructor(private configuration: ConfigurationData) {
+  private constructor(private uiServerConfiguration: UIServerConfigurationSection) {
     this.openWS()
     this.responseHandlers = new Map<string, ResponseHandler>()
   }
 
-  public static getInstance(configuration: ConfigurationData) {
+  public static getInstance(uiServerConfiguration: UIServerConfigurationSection): UIClient {
     if (UIClient.instance === null) {
-      UIClient.instance = new UIClient(configuration)
+      UIClient.instance = new UIClient(uiServerConfiguration)
     }
     return UIClient.instance
   }
 
+  public setConfiguration(uiServerConfiguration: UIServerConfigurationSection): void {
+    this.ws.close()
+    this.uiServerConfiguration = uiServerConfiguration
+    this.openWS()
+  }
+
   public registerWSEventListener<K extends keyof WebSocketEventMap>(
     event: K,
     listener: (event: WebSocketEventMap[K]) => void
@@ -58,9 +66,14 @@ export class UIClient {
 
   public async addChargingStations(
     template: string,
-    numberOfStations: number
+    numberOfStations: number,
+    options?: ChargingStationOptions
   ): Promise<ResponsePayload> {
-    return this.sendRequest(ProcedureName.ADD_CHARGING_STATIONS, { template, numberOfStations })
+    return this.sendRequest(ProcedureName.ADD_CHARGING_STATIONS, {
+      template,
+      numberOfStations,
+      options
+    })
   }
 
   public async deleteChargingStation(hashId: string): Promise<ResponsePayload> {
@@ -138,26 +151,32 @@ export class UIClient {
 
   private openWS(): void {
     const protocols =
-      this.configuration.uiServer.authentication?.enabled === true &&
-      this.configuration.uiServer.authentication?.type === AuthenticationType.PROTOCOL_BASIC_AUTH
+      this.uiServerConfiguration.authentication?.enabled === true &&
+      this.uiServerConfiguration.authentication?.type === AuthenticationType.PROTOCOL_BASIC_AUTH
         ? [
-            `${this.configuration.uiServer.protocol}${this.configuration.uiServer.version}`,
-            `authorization.basic.${btoa(`${this.configuration.uiServer.authentication.username}:${this.configuration.uiServer.authentication.password}`).replace(/={1,2}$/, '')}`
+            `${this.uiServerConfiguration.protocol}${this.uiServerConfiguration.version}`,
+            `authorization.basic.${btoa(`${this.uiServerConfiguration.authentication.username}:${this.uiServerConfiguration.authentication.password}`).replace(/={1,2}$/, '')}`
           ]
-        : `${this.configuration.uiServer.protocol}${this.configuration.uiServer.version}`
+        : `${this.uiServerConfiguration.protocol}${this.uiServerConfiguration.version}`
     this.ws = new WebSocket(
-      `${this.configuration.uiServer.secure === true ? ApplicationProtocol.WSS : ApplicationProtocol.WS}://${this.configuration.uiServer.host}:${this.configuration.uiServer.port}`,
+      `${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`)
     }
   }
 
@@ -207,8 +226,10 @@ export class UIClient {
           reject(responsePayload)
           break
         default:
-          console.error(
-            `Response status for procedure '${procedureName}' not supported: '${responsePayload.status}'`
+          reject(
+            new Error(
+              `Response status for procedure '${procedureName}' not supported: '${responsePayload.status}'`
+            )
           )
       }
       this.responseHandlers.delete(uuid)