ui/web/README.md

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