ui/web/README.md

   1 # Web UI
   2
   3 The Web UI code and configuration is in the repository directory [ui/web](./../../ui/web/). Commands execution is relative to that directory.
   4
   5 ## Project setup
   6
   7 ### Dependencies
   8
   9 ```shell
  10 corepack enable
  11 corepack prepare pnpm@latest --activate
  12 pnpm install
  13 ```
  14
  15 ### Configuration
  16
  17 #### Simulator UI Server Configuration
  18
  19 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:
  20
  21 ```json
  22   "uiServer": {
  23     "enabled": true,
  24     "type": "ws",
  25     "authentication": {
  26       "enabled": false,
  27       "type": "basic-auth",
  28       "username": "admin",
  29       "password": "admin"
  30     }
  31   },
  32 ```
  33
  34 See [here](./../../README.md#charging-stations-simulator-configuration) for more details.
  35
  36 #### Web UI configuration
  37
  38 Copy the configuration template [src/assets/config-template.json](./src/assets/config-template.json) to `public/config.json`.
  39
  40 ### Run
  41
  42 #### Compiles for production and preview locally
  43
  44 ```shell
  45 pnpm preview
  46 ```
  47
  48 #### Try it out
  49
  50 You can now follow the link displayed in the terminal. The Web UI looks like the following:
  51
  52 ![webui](./src/assets/webui.png)
  53
  54 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)`
  55 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.
  56
  57 ### Development
  58
  59 #### Compiles and run for development
  60
  61 ```shell
  62 pnpm dev
  63 ```
  64
  65 #### Formats files
  66
  67 ```shell
  68 pnpm format
  69 ```
  70
  71 #### Lints and fixes files
  72
  73 ```shell
  74 pnpm lint:fix
  75 ```