X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=ui%2Fweb%2FREADME.md;h=1541dd2b276922697b64088af6dc477a9d64bde8;hb=47521384ba9d093d453f8a71b847afcac37d68e4;hp=6e554a492315124d18361c6744626821d8637e51;hpb=1a662d2902d8ba4c41e55febda8a77f52d155a90;p=e-mobility-charging-stations-simulator.git diff --git a/ui/web/README.md b/ui/web/README.md index 6e554a49..1541dd2b 100644 --- a/ui/web/README.md +++ b/ui/web/README.md @@ -1,61 +1,75 @@ # Web UI +The Web UI code and configuration is in the repository directory [ui/web](./../../ui/web/). Commands execution is relative to that directory. + ## 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": { "enabled": true, "type": "ws", "authentication": { - "enabled": false, - "type": "basic-auth", + "enabled": true, + "type": "protocol-basic-auth", "username": "admin", "password": "admin" } }, ``` -See [here](../../README.md#charging-stations-simulator-configuration) for more details. +See [here](./../../README.md#charging-stations-simulator-configuration) for more details. -### Run +#### Web UI configuration -#### Compiles and run for production +Copy the configuration template [src/assets/config-template.json](./src/assets/config-template.json) to `public/config.json`. -```shell -pnpm start -``` +### Run -#### Compiles and run for development +#### Compiles for production and preview locally ```shell -pnpm run serve +pnpm preview ``` #### Try it out -For both options above you can then follow the link displayed in the terminal at the end of compilation. The Web UI looks like the following +You can now follow the link displayed in the terminal. The Web UI looks like the following: + +![webui](./src/assets/webui.png) -![webui](./assets/webui.png) +1. With the buttons on the top you can start/stop the simulator, add new charging stations and refresh the content. +2. Each charging station is a row in the table with specific 'Actions' to execute. Try 'Stop Charging Station' and refresh with the large blue button and see the status 'Started' turns from 'Yes' into 'No'. -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. +### Development + +#### Compiles and run for development + +```shell +pnpm dev +``` -### Compiles and minifies for production +#### Formats files ```shell -pnpm run build +pnpm format ``` -### Lints files +#### Lints and fixes files ```shell -pnpm run lint +pnpm lint:fix ```