# 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
-npm install
+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
-npm start
-```
+### Run
-#### Compiles and run for development
+#### Compiles for production and preview locally
```shell
-npm 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)
+
+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'.
-![webui](./assets/webui.png)
+### Development
-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 run for development
+
+```shell
+pnpm dev
+```
-### Compiles and minifies for production
+#### Formats files
```shell
-npm run build
+pnpm format
```
-### Lints files
+#### Lints and fixes files
```shell
-npm run lint
+pnpm lint:fix
```