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

# Web UI

## Project setup

```shell
corepack enable
pnpm install
```

The simulator UI server must be enabled, use WebSocket and disable authentication. The simulator main configuration file should have a `uiServer` section like this:

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

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

### Run

#### Compiles and run for production

```shell
pnpm start
```

#### Compiles and run for development

```shell
pnpm run serve
```

#### Try it out

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

![webui](./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.

### Compiles and minifies for production

```shell
pnpm run build
```

### Lints files

```shell
pnpm run lint
```
Commit	Line	Data
	1	# Web UI
	2
	3	## Project setup
	4
	5	```shell
	6	corepack enable
	7	pnpm install
	8	```
	9
	10	The simulator UI server must be enabled, use WebSocket and disable authentication. The simulator main configuration file should have a `uiServer` section like this:
	11
	12	```json
	13	"uiServer": {
	14	"enabled": true,
	15	"type": "ws",
	16	"authentication": {
	17	"enabled": false,
	18	"type": "basic-auth",
	19	"username": "admin",
	20	"password": "admin"
	21	}
	22	},
	23	```
	24
	25	See [here](../../README.md#charging-stations-simulator-configuration) for more details.
	26
	27	### Run
	28
	29	#### Compiles and run for production
	30
	31	```shell
	32	pnpm start
	33	```
	34
	35	#### Compiles and run for development
	36
	37	```shell
	38	pnpm run serve
	39	```
	40
	41	#### Try it out
	42
	43	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
	44
	45	![webui](./assets/webui.png)
	46
	47	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)`
	48	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.
	49
	50	### Compiles and minifies for production
	51
	52	```shell
	53	pnpm run build
	54	```
	55
	56	### Lints files
	57
	58	```shell
	59	pnpm run lint
	60	```