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