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": true,
  27       "type": "protocol-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 ##### Unique UI server:
  41
  42 ```json
  43 {
  44   "uiServer": {
  45     "host": "localhost",
  46     "port": 8080,
  47     "protocol": "ui",
  48     "version": "0.0.1",
  49     "authentication": {
  50       "enabled": true,
  51       "type": "protocol-basic-auth",
  52       "username": "admin",
  53       "password": "admin"
  54     }
  55   }
  56 }
  57 ```
  58
  59 ##### Multiple UI servers:
  60
  61 ```json
  62 {
  63   "uiServer": [
  64     {
  65       "host": "server1.domain.tld",
  66       "port": 8080,
  67       "protocol": "ui",
  68       "version": "0.0.1",
  69       "authentication": {
  70         "enabled": true,
  71         "type": "protocol-basic-auth",
  72         "username": "admin",
  73         "password": "admin"
  74       }
  75     },
  76     ...
  77     {
  78       "host": "serverN.domain.tld",
  79       "port": 8080,
  80       "protocol": "ui",
  81       "version": "0.0.1",
  82       "authentication": {
  83         "enabled": true,
  84         "type": "protocol-basic-auth",
  85         "username": "admin",
  86         "password": "admin"
  87       }
  88     }
  89   ]
  90 }
  91 ```
  92
  93 ### Run
  94
  95 #### Compiles for production and preview locally
  96
  97 ```shell
  98 pnpm preview
  99 ```
 100
 101 #### Try it out
 102
 103 You can now follow the link displayed in the terminal. The Web UI looks like the following:
 104
 105 ![webui](./src/assets/webui.png)
 106
 107 1. With the buttons on the top you can change UI server, start/stop the simulator, add new charging stations and refresh the content.
 108 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'.
 109
 110 ### Development
 111
 112 #### Compiles and run for development
 113
 114 ```shell
 115 pnpm dev
 116 ```
 117
 118 #### Formats files
 119
 120 ```shell
 121 pnpm format
 122 ```
 123
 124 #### Lints and fixes files
 125
 126 ```shell
 127 pnpm lint:fix
 128 ```