From 217db0589a326b179780002c076e9ec7fca59d8c Mon Sep 17 00:00:00 2001 From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= Date: Wed, 14 Feb 2024 17:52:58 +0100 Subject: [PATCH] refactor(ui): refine configuration file type and make it conditional MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit reference: #980 Signed-off-by: Jérôme Benoit --- ui/web/.gitignore | 1 + ui/web/README.md | 42 +++++++++++++++++++++------ ui/web/src/assets/config-template.ts | 18 ++++++++++++ ui/web/src/assets/config.ts | 11 ------- ui/web/src/composables/UIClient.ts | 7 +++-- ui/web/src/types/ConfigurationType.ts | 14 +++++++-- ui/web/src/types/UIProtocol.ts | 8 +++-- ui/web/src/types/index.ts | 4 +++ 8 files changed, 78 insertions(+), 27 deletions(-) create mode 100644 ui/web/src/assets/config-template.ts delete mode 100644 ui/web/src/assets/config.ts diff --git a/ui/web/.gitignore b/ui/web/.gitignore index 8e66ec81..546c9397 100644 --- a/ui/web/.gitignore +++ b/ui/web/.gitignore @@ -1,6 +1,7 @@ .DS_Store node_modules /dist +/assets/config.ts # Created by git for backups. To disable backups in git: # $ git config --global mergetool.keepBackup false diff --git a/ui/web/README.md b/ui/web/README.md index 1035fe9a..ffbc5f0b 100644 --- a/ui/web/README.md +++ b/ui/web/README.md @@ -4,13 +4,19 @@ The Web UI code and configuration is in the repository directory [ui/web](./../. ## Project setup +### Dependencies + ```shell corepack enable corepack prepare pnpm@latest --activate pnpm install ``` -The simulator UI server must be enabled, use WebSocket and disable authentication. The simulator main configuration file should have a `uiServer` section like this: +### Configuration + +#### Simulator UI Server Configuration + +The simulator UI server must be enabled, use WebSocket transport type and have authentication disabled. The simulator main configuration file should have a `uiServer` section like this: ```json "uiServer": { @@ -27,18 +33,28 @@ The simulator UI server must be enabled, use WebSocket and disable authenticatio See [here](./../../README.md#charging-stations-simulator-configuration) for more details. +#### Web UI configuration + +Copy the configuration template [assets/config-template.ts](assets/config-template.ts) to `assets/config.ts`. + ### Run -#### Compiles and run for production +#### Compiles for production ```shell -pnpm start +pnpm build ``` -#### Compiles and run for development +#### Compiles and preview locally for production + +```shell +pnpm preview +``` + +#### Compiles and run for production ```shell -pnpm serve +pnpm start ``` #### Try it out @@ -50,14 +66,22 @@ For both options above you can then follow the link displayed in the terminal at 1. With the top 2 buttons you can now stop and afterwards start the simulator and inspect the server console for the number of charging stations, e.g. with the default configuration: `Charging stations simulator ... started with 10 charging station(s)` 2. Each charging station is a row in the table below, try "Stop Charging Station" and refresh with the large blue button and see the status Started turns from Yes into No. -### Compiles and minifies for production +### Development + +#### Compiles and run for development ```shell -pnpm build +pnpm dev +``` + +#### Formats files + +```shell +pnpm format ``` -### Lints files +#### Lints and fixes files ```shell -pnpm lint +pnpm lint:fix ``` diff --git a/ui/web/src/assets/config-template.ts b/ui/web/src/assets/config-template.ts new file mode 100644 index 00000000..b5807ce4 --- /dev/null +++ b/ui/web/src/assets/config-template.ts @@ -0,0 +1,18 @@ +import { AuthenticationType, type ConfigurationData, Protocol, ProtocolVersion } from '@/types' + +const configuration: ConfigurationData = { + uiServer: { + host: 'localhost', + port: 8080, + protocol: Protocol.UI, + version: ProtocolVersion['0.0.1'], + authentication: { + enabled: false, + type: AuthenticationType.BASIC_AUTH, + username: 'admin', + password: 'admin' + } + } +} + +export default configuration diff --git a/ui/web/src/assets/config.ts b/ui/web/src/assets/config.ts deleted file mode 100644 index 28b3f158..00000000 --- a/ui/web/src/assets/config.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { ConfigurationData } from '@/types' - -const configuration: ConfigurationData = { - uiServer: { - host: 'localhost', - port: 8080, - protocol: 'ui0.0.1' - } -} - -export default configuration diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts index d056f631..9848fac0 100644 --- a/ui/web/src/composables/UIClient.ts +++ b/ui/web/src/composables/UIClient.ts @@ -1,10 +1,13 @@ import { + ApplicationProtocol, ProcedureName, type ProtocolResponse, type RequestPayload, type ResponsePayload, ResponseStatus } from '@/types' +// @ts-expect-error: configuration file can be non existent +// eslint-disable-next-line import/no-unresolved import configuration from '@/assets/config' type ResponseHandler = { @@ -111,8 +114,8 @@ export class UIClient { private openWS(): void { this.ws = new WebSocket( - `ws://${configuration.uiServer.host}:${configuration.uiServer.port}`, - configuration.uiServer.protocol + `${configuration.uiServer.secure === true ? ApplicationProtocol.WSS : ApplicationProtocol.WS}://${configuration.uiServer.host}:${configuration.uiServer.port}`, + `${configuration.uiServer.protocol}${configuration.uiServer.version}` ) this.ws.onmessage = this.responseHandler.bind(this) this.ws.onerror = errorEvent => { diff --git a/ui/web/src/types/ConfigurationType.ts b/ui/web/src/types/ConfigurationType.ts index cfdbf34a..93cfe86e 100644 --- a/ui/web/src/types/ConfigurationType.ts +++ b/ui/web/src/types/ConfigurationType.ts @@ -1,3 +1,5 @@ +import type { AuthenticationType, Protocol, ProtocolVersion } from './UIProtocol' + export type ConfigurationData = { uiServer: UIServerConfigurationSection } @@ -5,7 +7,13 @@ export type ConfigurationData = { type UIServerConfigurationSection = { host: string port: number - protocol: string - username?: string - password?: string + secure?: boolean + protocol: Protocol + version: ProtocolVersion + authentication?: { + enabled: boolean + type: AuthenticationType + username?: string + password?: string + } } diff --git a/ui/web/src/types/UIProtocol.ts b/ui/web/src/types/UIProtocol.ts index 07eb5212..1f8d1e6f 100644 --- a/ui/web/src/types/UIProtocol.ts +++ b/ui/web/src/types/UIProtocol.ts @@ -5,14 +5,18 @@ export enum Protocol { } export enum ApplicationProtocol { - HTTP = 'http', - WS = 'ws' + WS = 'ws', + WSS = 'wss' } export enum ProtocolVersion { '0.0.1' = '0.0.1' } +export enum AuthenticationType { + BASIC_AUTH = 'basic-auth' +} + export type ProtocolRequest = [string, ProcedureName, RequestPayload] export type ProtocolResponse = [string, ResponsePayload] diff --git a/ui/web/src/types/index.ts b/ui/web/src/types/index.ts index 1f1f0556..85709be3 100644 --- a/ui/web/src/types/index.ts +++ b/ui/web/src/types/index.ts @@ -5,8 +5,12 @@ export type { } from './ChargingStationType' export type { ConfigurationData } from './ConfigurationType' export { + ApplicationProtocol, + AuthenticationType, ProcedureName, + Protocol, type ProtocolResponse, + ProtocolVersion, type RequestPayload, type ResponsePayload, ResponseStatus -- 2.34.1