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 ### Configuration
   8
   9 #### Simulator UI Server Configuration
  10
  11 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:
  12
  13 ```json
  14   "uiServer": {
  15     "enabled": true,
  16     "type": "ws",
  17     "authentication": {
  18       "enabled": true,
  19       "type": "protocol-basic-auth",
  20       "username": "admin",
  21       "password": "admin"
  22     }
  23   },
  24 ```
  25
  26 See [here](./../../README.md#charging-stations-simulator-configuration) for more details.
  27
  28 #### Web UI configuration
  29
  30 Copy the configuration template [src/assets/config-template.json](./src/assets/config-template.json) to `public/config.json`.
  31
  32 ##### Unique UI server:
  33
  34 ```json
  35 {
  36   "uiServer": {
  37     "host": "localhost",
  38     "port": 8080,
  39     "protocol": "ui",
  40     "version": "0.0.1",
  41     "authentication": {
  42       "enabled": true,
  43       "type": "protocol-basic-auth",
  44       "username": "admin",
  45       "password": "admin"
  46     }
  47   }
  48 }
  49 ```
  50
  51 ##### Multiple UI servers:
  52
  53 ```json
  54 {
  55   "uiServer": [
  56     {
  57       "host": "server1.domain.tld",
  58       "port": 8080,
  59       "protocol": "ui",
  60       "version": "0.0.1",
  61       "authentication": {
  62         "enabled": true,
  63         "type": "protocol-basic-auth",
  64         "username": "admin",
  65         "password": "admin"
  66       }
  67     },
  68     ...
  69     {
  70       "host": "serverN.domain.tld",
  71       "port": 8080,
  72       "protocol": "ui",
  73       "version": "0.0.1",
  74       "authentication": {
  75         "enabled": true,
  76         "type": "protocol-basic-auth",
  77         "username": "admin",
  78         "password": "admin"
  79       }
  80     }
  81   ]
  82 }
  83 ```
  84
  85 ### Run
  86
  87 #### Compiles for production and preview locally
  88
  89 ```shell
  90 pnpm preview
  91 ```
  92
  93 #### Try it out
  94
  95 You can now follow the link displayed in the terminal. The Web UI looks like the following:
  96
  97 ![webui](./src/assets/webui.png)
  98
  99 1. With the buttons on the top you can change UI server, start/stop the simulator, add new charging stations and refresh the content.
 100 2. Each charging station is a row in the table with specific 'Actions' to execute on. Try 'Stop Charging Station' and refresh with the large blue button and see the status 'Started' turns from 'Yes' into 'No'.
 101
 102 ### Development
 103
 104 #### Compiles and run for development
 105
 106 ```shell
 107 pnpm dev
 108 ```
 109
 110 #### Formats files
 111
 112 ```shell
 113 pnpm format
 114 ```
 115
 116 #### Lints and fixes files
 117
 118 ```shell
 119 pnpm lint:fix
 120 ```