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

# Web UI

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

```shell
corepack enable
corepack prepare pnpm@latest --activate
pnpm install
```

### Configuration

#### Simulator UI Server Configuration

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:

```json
  "uiServer": {
    "enabled": true,
    "type": "ws",
    "authentication": {
      "enabled": true,
      "type": "protocol-basic-auth",
      "username": "admin",
      "password": "admin"
    }
  },
```

See [here](./../../README.md#charging-stations-simulator-configuration) for more details.

#### Web UI configuration

Copy the configuration template [src/assets/config-template.json](./src/assets/config-template.json) to `public/config.json`.

### Run

#### Compiles for production and preview locally

```shell
pnpm preview
```

#### Try it out

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.

### Development

#### Compiles and run for development

```shell
pnpm dev
```

#### Formats files

```shell
pnpm format
```

#### Lints and fixes files

```shell
pnpm lint:fix
```
Commit	Line	Data
	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	### Dependencies
	8
	9	```shell
	10	corepack enable
	11	corepack prepare pnpm@latest --activate
	12	pnpm install
	13	```
	14
	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:
	20
	21	```json
	22	"uiServer": {
	23	"enabled": true,
	24	"type": "ws",
	25	"authentication": {
	26	"enabled": true,
	27	"type": "protocol-basic-auth",
	28	"username": "admin",
	29	"password": "admin"
	30	}
	31	},
	32	```
	33
	34	See [here](./../../README.md#charging-stations-simulator-configuration) for more details.
	35
	36	#### Web UI configuration
	37
	38	Copy the configuration template [src/assets/config-template.json](./src/assets/config-template.json) to `public/config.json`.
	39
	40	### Run
	41
	42	#### Compiles for production and preview locally
	43
	44	```shell
	45	pnpm preview
	46	```
	47
	48	#### Try it out
	49
	50	You can now follow the link displayed in the terminal. The Web UI looks like the following:
	51
	52	![webui](./src/assets/webui.png)
	53
	54	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)`
	55	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.
	56
	57	### Development
	58
	59	#### Compiles and run for development
	60
	61	```shell
	62	pnpm dev
	63	```
	64
	65	#### Formats files
	66
	67	```shell
	68	pnpm format
	69	```
	70
	71	#### Lints and fixes files
	72
	73	```shell
	74	pnpm lint:fix
	75	```