docs: add ToC to ui/web/README.md

[e-mobility-charging-stations-simulator.git] / ui / web / README.md

diff --git a/ui/web/README.md b/ui/web/README.md
index f2c21d13074db20a4238a3f88d15dc27bdb0311f..250d0bd02008cca24121bc9c69d888ef8935e7ec 100644 (file)
--- a/ui/web/README.md
+++ b/ui/web/README.md
@@ -2,15 +2,23 @@
 
 The Web UI code and configuration is in the repository directory [ui/web](./../../ui/web/). Commands execution is relative to that directory.
 
-## Project setup
-
-### Dependencies
+## Table of contents
+
+- [Project setup](#project-setup)
+  - [Configuration](#configuration)
+    - [Simulator UI Server Configuration](#simulator-ui-server-configuration)
+    - [Web UI configuration](#web-ui-configuration)
+      - [Unique UI server](#unique-ui-server)
+      - [Multiple UI servers](#multiple-ui-servers)
+  - [Run](#run)
+    - [Compiles and run for production](#compiles-and-run-for-production)
+    - [Preview locally](#preview-locally)
+  - [Development](#development)
+    - [Compiles and run for development](#compiles-and-run-for-development)
+    - [Formats files](#formats-files)
+    - [Lints and fixes files](#lints-and-fixes-files)
 
-```shell
-corepack enable
-corepack prepare pnpm@latest --activate
-pnpm install
-```
+## Project setup
 
 ### Configuration
 
@@ -23,8 +31,8 @@ The simulator UI server must be enabled, use WebSocket transport type and have a
     "enabled": true,
     "type": "ws",
     "authentication": {
-      "enabled": false,
-      "type": "basic-auth",
+      "enabled": true,
+      "type": "protocol-basic-auth",
       "username": "admin",
       "password": "admin"
     }
@@ -35,36 +43,77 @@ See [here](./../../README.md#charging-stations-simulator-configuration) for more
 
 #### Web UI configuration
 
-Copy the configuration template [src/assets/config-template.json](src/assets/config-template.json) to `public/config.json`.
+Copy the configuration template [src/assets/config-template.json](./src/assets/config-template.json) to `public/config.json`.
 
-### Run
+##### Unique UI server
 
-#### Compiles for production
-
-```shell
-pnpm build
+```json
+{
+  "uiServer": {
+    "host": "localhost",
+    "port": 8080,
+    "protocol": "ui",
+    "version": "0.0.1",
+    "authentication": {
+      "enabled": true,
+      "type": "protocol-basic-auth",
+      "username": "admin",
+      "password": "admin"
+    }
+  }
+}
 ```
 
-#### Compiles and preview locally for production
+##### Multiple UI servers
 
-```shell
-pnpm preview
+```json
+{
+  "uiServer": [
+    {
+      "host": "server1.domain.tld",
+      "port": 8080,
+      "protocol": "ui",
+      "version": "0.0.1",
+      "authentication": {
+        "enabled": true,
+        "type": "protocol-basic-auth",
+        "username": "admin",
+        "password": "admin"
+      }
+    },
+    ...
+    {
+      "host": "serverN.domain.tld",
+      "port": 8080,
+      "protocol": "ui",
+      "version": "0.0.1",
+      "authentication": {
+        "enabled": true,
+        "type": "protocol-basic-auth",
+        "username": "admin",
+        "password": "admin"
+      }
+    }
+  ]
+}
 ```
 
+### Run
+
 #### Compiles and run for production
 
 ```shell
-pnpm start
+pnpm preview
 ```
 
-#### Try it out
+#### Preview locally
 
-For both options above you can then follow the link displayed in the terminal at the end of compilation. The Web UI looks like the following
+You can now follow the link displayed in the terminal. The Web UI looks like the following:
 
 ![webui](./src/assets/webui.png)
 
-1. With the top 2 buttons you can now stop and afterwards start the simulator and inspect the server console for the number of charging stations, e.g. with the default configuration: `Charging stations simulator ... started with 10 charging station(s)`
-2. Each charging station is a row in the table below, try "Stop Charging Station" and refresh with the large blue button and see the status Started turns from Yes into No.
+1. With the buttons on the top you can change UI server, start/stop the simulator, add new charging stations and refresh the content.
+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'.
 
 ### Development