Commit | Line | Data |
---|---|---|
32de5a57 LM |
1 | # Web UI |
2 | ||
98262391 | 3 | The Web UI code and configuration is in the repository directory [ui/web](./../../ui/web/). Commands execution is relative to that directory. |
603f3fdd | 4 | |
32de5a57 LM |
5 | ## Project setup |
6 | ||
217db058 JB |
7 | ### Dependencies |
8 | ||
d6b76da3 | 9 | ```shell |
603f1011 | 10 | corepack enable |
1a662d29 | 11 | corepack prepare pnpm@latest --activate |
603f1011 | 12 | pnpm install |
32de5a57 LM |
13 | ``` |
14 | ||
217db058 JB |
15 | ### Configuration |
16 | ||
17 | #### Simulator UI Server Configuration | |
18 | ||
19 | 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: | |
8228f972 JB |
20 | |
21 | ```json | |
22 | "uiServer": { | |
23 | "enabled": true, | |
24 | "type": "ws", | |
25 | "authentication": { | |
329eab0e JB |
26 | "enabled": true, |
27 | "type": "protocol-basic-auth", | |
8228f972 JB |
28 | "username": "admin", |
29 | "password": "admin" | |
30 | } | |
31 | }, | |
32 | ``` | |
33 | ||
b4c9f3c1 | 34 | See [here](./../../README.md#charging-stations-simulator-configuration) for more details. |
8228f972 | 35 | |
217db058 JB |
36 | #### Web UI configuration |
37 | ||
f80e9e18 | 38 | Copy the configuration template [src/assets/config-template.json](./src/assets/config-template.json) to `public/config.json`. |
217db058 | 39 | |
4b08c55e JB |
40 | ##### Unique UI server: |
41 | ||
42 | ```json | |
43 | { | |
44 | "uiServer": { | |
45 | "host": "localhost", | |
46 | "port": 8080, | |
47 | "protocol": "ui", | |
48 | "version": "0.0.1", | |
49 | "authentication": { | |
50 | "enabled": true, | |
51 | "type": "protocol-basic-auth", | |
52 | "username": "admin", | |
53 | "password": "admin" | |
54 | } | |
55 | } | |
56 | } | |
57 | ``` | |
58 | ||
59 | ##### Multiple UI servers: | |
60 | ||
61 | ```json | |
62 | { | |
63 | "uiServer": [ | |
64 | { | |
65 | "host": "server1.domain.tld", | |
66 | "port": 8080, | |
67 | "protocol": "ui", | |
68 | "version": "0.0.1", | |
69 | "authentication": { | |
70 | "enabled": true, | |
71 | "type": "protocol-basic-auth", | |
72 | "username": "admin", | |
73 | "password": "admin" | |
74 | } | |
75 | }, | |
76 | ... | |
77 | { | |
78 | "host": "serverN.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 | ``` | |
92 | ||
32de5a57 LM |
93 | ### Run |
94 | ||
0d7042e2 | 95 | #### Compiles for production and preview locally |
217db058 JB |
96 | |
97 | ```shell | |
98 | pnpm preview | |
99 | ``` | |
100 | ||
d07e35d2 MK |
101 | #### Try it out |
102 | ||
0d7042e2 | 103 | You can now follow the link displayed in the terminal. The Web UI looks like the following: |
d07e35d2 | 104 | |
9d76f5ec | 105 | ![webui](./src/assets/webui.png) |
d07e35d2 | 106 | |
4b08c55e JB |
107 | 1. With the buttons on the top you can change UI server, start/stop the simulator, add new charging stations and refresh the content. |
108 | 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'. | |
32de5a57 | 109 | |
217db058 JB |
110 | ### Development |
111 | ||
112 | #### Compiles and run for development | |
32de5a57 | 113 | |
d6b76da3 | 114 | ```shell |
217db058 JB |
115 | pnpm dev |
116 | ``` | |
117 | ||
118 | #### Formats files | |
119 | ||
120 | ```shell | |
121 | pnpm format | |
32de5a57 LM |
122 | ``` |
123 | ||
217db058 | 124 | #### Lints and fixes files |
32de5a57 | 125 | |
d6b76da3 | 126 | ```shell |
217db058 | 127 | pnpm lint:fix |
32de5a57 | 128 | ``` |