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.ts](src/assets/config-template.ts) to `src/assets/config.ts`.
  39
  40 ### Run
  41
  42 #### Compiles for production
  43
  44 ```shell
  45 pnpm build
  46 ```
  47
  48 #### Compiles and preview locally for production
  49
  50 ```shell
  51 pnpm preview
  52 ```
  53
  54 #### Compiles and run for production
  55
  56 ```shell
  57 pnpm start
  58 ```
  59
  60 #### Try it out
  61
  62 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
  63
  64 ![webui](./assets/webui.png)
  65
  66 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)`
  67 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.
  68
  69 ### Development
  70
  71 #### Compiles and run for development
  72
  73 ```shell
  74 pnpm dev
  75 ```
  76
  77 #### Formats files
  78
  79 ```shell
  80 pnpm format
  81 ```
  82
  83 #### Lints and fixes files
  84
  85 ```shell
  86 pnpm lint:fix
  87 ```