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