refactor(ui): cleanup vue.js app initialization code and logic

[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 de796ba9e7eb314ec135506c33053654f8b5136d..572dc5d48182c5a6ed883b8472842a3c64326532 100644 (file)
--- a/ui/web/src/composables/UIClient.ts
+++ b/ui/web/src/composables/UIClient.ts
@@ -1,11 +1,13 @@
 import {
+  ApplicationProtocol,
+  AuthenticationType,
+  type ConfigurationData,
   ProcedureName,
   type ProtocolResponse,
   type RequestPayload,
   type ResponsePayload,
   ResponseStatus
 } from '@/types'
-import config from '@/assets/config'
 
 type ResponseHandler = {
   procedureName: ProcedureName
@@ -19,14 +21,14 @@ export class UIClient {
   private ws!: WebSocket
   private responseHandlers: Map<string, ResponseHandler>
 
-  private constructor() {
+  private constructor(private configuration: ConfigurationData) {
     this.openWS()
     this.responseHandlers = new Map<string, ResponseHandler>()
   }
 
-  public static getInstance() {
+  public static getInstance(configuration: ConfigurationData) {
     if (UIClient.instance === null) {
-      UIClient.instance = new UIClient()
+      UIClient.instance = new UIClient(configuration)
     }
     return UIClient.instance
   }
@@ -43,6 +45,10 @@ export class UIClient {
     return this.sendRequest(ProcedureName.STOP_SIMULATOR, {})
   }
 
+  public async deleteChargingStation(hashId: string): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.DELETE_CHARGING_STATIONS, { hashIds: [hashId] })
+  }
+
   public async listChargingStations(): Promise<ResponsePayload> {
     return this.sendRequest(ProcedureName.LIST_CHARGING_STATIONS, {})
   }
@@ -109,63 +115,54 @@ export class UIClient {
     })
   }
 
-  private openWS(): void {
+  public openWS(): void {
+    const protocols =
+      this.configuration.uiServer.authentication?.enabled === true &&
+      this.configuration.uiServer.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.configuration.uiServer.protocol}${this.configuration.uiServer.version}`
     this.ws = new WebSocket(
-      `ws://${config.uiServer.host}:${config.uiServer.port}`,
-      config.uiServer.protocol
+      `${this.configuration.uiServer.secure === true ? ApplicationProtocol.WSS : ApplicationProtocol.WS}://${this.configuration.uiServer.host}:${this.configuration.uiServer.port}`,
+      protocols
     )
+    this.ws.onopen = openEvent => {
+      console.info('WebSocket opened', openEvent)
+    }
     this.ws.onmessage = this.responseHandler.bind(this)
-    this.ws.onerror = (errorEvent) => {
+    this.ws.onerror = errorEvent => {
       console.error('WebSocket error: ', errorEvent)
     }
-    this.ws.onclose = (closeEvent) => {
+    this.ws.onclose = closeEvent => {
       console.info('WebSocket closed: ', closeEvent)
     }
   }
 
-  private setResponseHandler(
-    id: string,
-    procedureName: ProcedureName,
-    resolve: (value: ResponsePayload | PromiseLike<ResponsePayload>) => void,
-    reject: (reason?: unknown) => void
-  ): void {
-    this.responseHandlers.set(id, { procedureName, resolve, reject })
-  }
-
-  private getResponseHandler(id: string): ResponseHandler | undefined {
-    return this.responseHandlers.get(id)
-  }
-
-  private deleteResponseHandler(id: string): boolean {
-    return this.responseHandlers.delete(id)
-  }
-
   private async sendRequest(
-    command: ProcedureName,
-    data: RequestPayload
+    procedureName: ProcedureName,
+    payload: RequestPayload
   ): Promise<ResponsePayload> {
     return new Promise<ResponsePayload>((resolve, reject) => {
-      if (this.ws.readyState !== WebSocket.OPEN) {
-        this.openWS()
-      }
       if (this.ws.readyState === WebSocket.OPEN) {
         const uuid = crypto.randomUUID()
-        const msg = JSON.stringify([uuid, command, data])
+        const msg = JSON.stringify([uuid, procedureName, payload])
         const sendTimeout = setTimeout(() => {
-          this.deleteResponseHandler(uuid)
-          return reject(new Error(`Send request '${command}' message timeout`))
-        }, 60 * 1000)
+          this.responseHandlers.delete(uuid)
+          return reject(new Error(`Send request '${procedureName}' message: connection timeout`))
+        }, 60000)
         try {
           this.ws.send(msg)
-          this.setResponseHandler(uuid, command, resolve, reject)
+          this.responseHandlers.set(uuid, { procedureName, resolve, reject })
         } catch (error) {
-          this.deleteResponseHandler(uuid)
+          this.responseHandlers.delete(uuid)
           reject(error)
         } finally {
           clearTimeout(sendTimeout)
         }
       } else {
-        throw new Error(`Send request '${command}' message: connection not opened`)
+        reject(new Error(`Send request '${procedureName}' message: connection closed`))
       }
     })
   }
@@ -180,7 +177,7 @@ export class UIClient {
     const [uuid, responsePayload] = response
 
     if (this.responseHandlers.has(uuid) === true) {
-      const { procedureName, resolve, reject } = this.getResponseHandler(uuid)!
+      const { procedureName, resolve, reject } = this.responseHandlers.get(uuid)!
       switch (responsePayload.status) {
         case ResponseStatus.SUCCESS:
           resolve(responsePayload)
@@ -193,7 +190,7 @@ export class UIClient {
             `Response status for procedure '${procedureName}' not supported: '${responsePayload.status}'`
           )
       }
-      this.deleteResponseHandler(uuid)
+      this.responseHandlers.delete(uuid)
     } else {
       throw new Error(`Not a response to a request: ${JSON.stringify(response, undefined, 2)}`)
     }