X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=ui%2Fweb%2Fsrc%2Fcomposables%2FUIClient.ts;h=9522c59213c666a526d48927447024f3e8fc065a;hb=9312c9d319ab997598eb1fe198f0615f12e766f4;hp=841ec3dca8c42510c3ce504c05dbe42c45773adc;hpb=82fa111074a9a4eed94579c0ff734a1564f8f8e6;p=e-mobility-charging-stations-simulator.git

diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts
index 841ec3dc..9522c592 100644
--- a/ui/web/src/composables/UIClient.ts
+++ b/ui/web/src/composables/UIClient.ts
@@ -1,203 +1,283 @@
+import { useToast } from 'vue-toast-notification'
+
 import {
+  ApplicationProtocol,
+  AuthenticationType,
+  type ChargingStationOptions,
   ProcedureName,
   type ProtocolResponse,
   type RequestPayload,
   type ResponsePayload,
   ResponseStatus,
-} from '@/types';
-import config from '@/assets/config';
+  type UIServerConfigurationSection
+} from '@/types'
+
+import { randomUUID, validateUUID } from './Utils'
 
 type ResponseHandler = {
-  procedureName: ProcedureName;
-  resolve: (value: ResponsePayload | PromiseLike<ResponsePayload>) => void;
-  reject: (reason?: unknown) => void;
-};
+  procedureName: ProcedureName
+  resolve: (value: ResponsePayload | PromiseLike<ResponsePayload>) => void
+  reject: (reason?: unknown) => void
+}
 
 export class UIClient {
-  private static instance: UIClient | null = null;
+  private static instance: UIClient | null = null
 
-  private ws!: WebSocket;
-  private responseHandlers: Map<string, ResponseHandler>;
+  private ws?: WebSocket
+  private responseHandlers: Map<
+    `${string}-${string}-${string}-${string}-${string}`,
+    ResponseHandler
+  >
 
-  private constructor() {
-    this.openWS();
-    this.responseHandlers = new Map<string, ResponseHandler>();
+  private constructor(private uiServerConfiguration: UIServerConfigurationSection) {
+    this.openWS()
+    this.responseHandlers = new Map<
+      `${string}-${string}-${string}-${string}-${string}`,
+      ResponseHandler
+    >()
   }
 
-  public static getInstance() {
+  public static getInstance(uiServerConfiguration?: UIServerConfigurationSection): UIClient {
     if (UIClient.instance === null) {
-      UIClient.instance = new UIClient();
+      if (uiServerConfiguration == null) {
+        throw new Error('Cannot initialize UIClient if no configuration is provided')
+      }
+      UIClient.instance = new UIClient(uiServerConfiguration)
+    }
+    return UIClient.instance
+  }
+
+  public setConfiguration(uiServerConfiguration: UIServerConfigurationSection): void {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      this.ws.close()
+      delete this.ws
     }
-    return UIClient.instance;
+    this.uiServerConfiguration = uiServerConfiguration
+    this.openWS()
+  }
+
+  public registerWSEventListener<K extends keyof WebSocketEventMap>(
+    event: K,
+    listener: (event: WebSocketEventMap[K]) => void,
+    options?: boolean | AddEventListenerOptions
+  ) {
+    this.ws?.addEventListener(event, listener, options)
+  }
+
+  public unregisterWSEventListener<K extends keyof WebSocketEventMap>(
+    event: K,
+    listener: (event: WebSocketEventMap[K]) => void,
+    options?: boolean | AddEventListenerOptions
+  ) {
+    this.ws?.removeEventListener(event, listener, options)
   }
 
-  public registerWSonOpenListener(listener: (event: Event) => void) {
-    this.ws.addEventListener('open', listener);
+  public async simulatorState(): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.SIMULATOR_STATE, {})
   }
 
   public async startSimulator(): Promise<ResponsePayload> {
-    return this.sendRequest(ProcedureName.START_SIMULATOR, {});
+    return this.sendRequest(ProcedureName.START_SIMULATOR, {})
   }
 
   public async stopSimulator(): Promise<ResponsePayload> {
-    return this.sendRequest(ProcedureName.STOP_SIMULATOR, {});
+    return this.sendRequest(ProcedureName.STOP_SIMULATOR, {})
+  }
+
+  public async listTemplates(): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.LIST_TEMPLATES, {})
   }
 
   public async listChargingStations(): Promise<ResponsePayload> {
-    return this.sendRequest(ProcedureName.LIST_CHARGING_STATIONS, {});
+    return this.sendRequest(ProcedureName.LIST_CHARGING_STATIONS, {})
+  }
+
+  public async addChargingStations(
+    template: string,
+    numberOfStations: number,
+    options?: ChargingStationOptions
+  ): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.ADD_CHARGING_STATIONS, {
+      template,
+      numberOfStations,
+      options
+    })
+  }
+
+  public async deleteChargingStation(hashId: string): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.DELETE_CHARGING_STATIONS, { hashIds: [hashId] })
+  }
+
+  public async setSupervisionUrl(hashId: string, supervisionUrl: string): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.SET_SUPERVISION_URL, {
+      hashIds: [hashId],
+      url: supervisionUrl
+    })
   }
 
   public async startChargingStation(hashId: string): Promise<ResponsePayload> {
-    return this.sendRequest(ProcedureName.START_CHARGING_STATION, { hashIds: [hashId] });
+    return this.sendRequest(ProcedureName.START_CHARGING_STATION, { hashIds: [hashId] })
   }
 
   public async stopChargingStation(hashId: string): Promise<ResponsePayload> {
-    return this.sendRequest(ProcedureName.STOP_CHARGING_STATION, { hashIds: [hashId] });
+    return this.sendRequest(ProcedureName.STOP_CHARGING_STATION, { hashIds: [hashId] })
   }
 
   public async openConnection(hashId: string): Promise<ResponsePayload> {
     return this.sendRequest(ProcedureName.OPEN_CONNECTION, {
-      hashIds: [hashId],
-    });
+      hashIds: [hashId]
+    })
   }
 
   public async closeConnection(hashId: string): Promise<ResponsePayload> {
     return this.sendRequest(ProcedureName.CLOSE_CONNECTION, {
-      hashIds: [hashId],
-    });
+      hashIds: [hashId]
+    })
   }
 
   public async startTransaction(
     hashId: string,
     connectorId: number,
-    idTag: string | undefined,
+    idTag: string | undefined
   ): Promise<ResponsePayload> {
     return this.sendRequest(ProcedureName.START_TRANSACTION, {
       hashIds: [hashId],
       connectorId,
-      idTag,
-    });
+      idTag
+    })
   }
 
   public async stopTransaction(
     hashId: string,
-    transactionId: number | undefined,
+    transactionId: number | undefined
   ): Promise<ResponsePayload> {
     return this.sendRequest(ProcedureName.STOP_TRANSACTION, {
       hashIds: [hashId],
-      transactionId,
-    });
+      transactionId
+    })
   }
 
   public async startAutomaticTransactionGenerator(
     hashId: string,
-    connectorId: number,
+    connectorId: number
   ): Promise<ResponsePayload> {
     return this.sendRequest(ProcedureName.START_AUTOMATIC_TRANSACTION_GENERATOR, {
       hashIds: [hashId],
-      connectorIds: [connectorId],
-    });
+      connectorIds: [connectorId]
+    })
   }
 
   public async stopAutomaticTransactionGenerator(
     hashId: string,
-    connectorId: number,
+    connectorId: number
   ): Promise<ResponsePayload> {
     return this.sendRequest(ProcedureName.STOP_AUTOMATIC_TRANSACTION_GENERATOR, {
       hashIds: [hashId],
-      connectorIds: [connectorId],
-    });
+      connectorIds: [connectorId]
+    })
   }
 
   private openWS(): void {
+    const protocols =
+      this.uiServerConfiguration.authentication?.enabled === true &&
+      this.uiServerConfiguration.authentication?.type === AuthenticationType.PROTOCOL_BASIC_AUTH
+        ? [
+            `${this.uiServerConfiguration.protocol}${this.uiServerConfiguration.version}`,
+            `authorization.basic.${btoa(`${this.uiServerConfiguration.authentication.username}:${this.uiServerConfiguration.authentication.password}`).replace(/={1,2}$/, '')}`
+          ]
+        : `${this.uiServerConfiguration.protocol}${this.uiServerConfiguration.version}`
     this.ws = new WebSocket(
-      `ws://${config.uiServer.host}:${config.uiServer.port}`,
-      config.uiServer.protocol,
-    );
-    this.ws.onmessage = this.responseHandler.bind(this);
-    this.ws.onerror = (errorEvent) => {
-      console.error('WebSocket error: ', errorEvent);
-    };
-    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);
+      `${this.uiServerConfiguration.secure === true ? ApplicationProtocol.WSS : ApplicationProtocol.WS}://${this.uiServerConfiguration.host}:${this.uiServerConfiguration.port}`,
+      protocols
+    )
+    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 => {
+      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 = () => {
+      useToast().info(`WebSocket to UI server closed`)
+    }
   }
 
   private async sendRequest(
-    command: ProcedureName,
-    data: RequestPayload,
+    procedureName: ProcedureName,
+    payload: RequestPayload
   ): Promise<ResponsePayload> {
-    let uuid: string;
-    return await new Promise<ResponsePayload>((resolve, reject) => {
-      uuid = crypto.randomUUID();
-      const msg = JSON.stringify([uuid, command, data]);
-
-      if (this.ws.readyState !== WebSocket.OPEN) {
-        this.openWS();
-      }
-      if (this.ws.readyState === WebSocket.OPEN) {
+    return new Promise<ResponsePayload>((resolve, reject) => {
+      if (this.ws?.readyState === WebSocket.OPEN) {
+        const uuid = randomUUID()
+        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.ws.send(msg)
+          this.responseHandlers.set(uuid, { procedureName, resolve, reject })
         } catch (error) {
-          this.deleteResponseHandler(uuid);
-          reject(error);
+          this.responseHandlers.delete(uuid)
+          reject(error)
         } finally {
-          clearTimeout(sendTimeout);
+          clearTimeout(sendTimeout)
         }
       } else {
-        throw new Error(`Send request '${command}' message: connection not opened`);
+        reject(new Error(`Send request '${procedureName}' message: connection closed`))
       }
-    });
+    })
   }
 
   private responseHandler(messageEvent: MessageEvent<string>): void {
-    const response = JSON.parse(messageEvent.data) as ProtocolResponse;
+    let response: ProtocolResponse
+    try {
+      response = JSON.parse(messageEvent.data)
+    } catch (error) {
+      useToast().error('Invalid response JSON format')
+      console.error('Invalid response JSON format', error)
+      return
+    }
 
-    if (Array.isArray(response) === false) {
-      throw new Error(`Response not an array: ${JSON.stringify(response, undefined, 2)}`);
+    if (!Array.isArray(response)) {
+      useToast().error('Response not an array')
+      console.error('Response not an array:', response)
+      return
     }
 
-    const [uuid, responsePayload] = response;
+    const [uuid, responsePayload] = response
+
+    if (!validateUUID(uuid)) {
+      useToast().error('Response UUID field is invalid')
+      console.error('Response UUID field is invalid:', response)
+      return
+    }
 
-    if (this.responseHandlers.has(uuid) === true) {
-      const { procedureName, resolve, reject } = this.getResponseHandler(uuid)!;
+    if (this.responseHandlers.has(uuid)) {
+      const { procedureName, resolve, reject } = this.responseHandlers.get(uuid)!
       switch (responsePayload.status) {
         case ResponseStatus.SUCCESS:
-          resolve(responsePayload);
-          break;
+          resolve(responsePayload)
+          break
         case ResponseStatus.FAILURE:
-          reject(responsePayload);
-          break;
+          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.deleteResponseHandler(uuid);
+      this.responseHandlers.delete(uuid)
     } else {
-      throw new Error(`Not a response to a request: ${JSON.stringify(response, undefined, 2)}`);
+      throw new Error(`Not a response to a request: ${JSON.stringify(response, undefined, 2)}`)
     }
   }
 }