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