# web-app
This is a web application that uses Vue.js and Chart.js to display data from a database. The data is fetched from the database using an API and displayed in a chart.

## Usage
The web page contains two buttons:
- **New measurments**: fetch the data from the database and add it to the chart.
- **Fetch measurments**: ask for a new measurement at the currrent time.

It has too 3 selectors:
- **User**: select the user to fetch the data from.
- **Room**: select the room to fetch the data from.
- **Device**: select the device to fetch the data from.

The chart is updated when the web page is loaded with default values for the selectors.

The chart can be updated by clicking on the **New measurments** button after selecting the user, room and device. But, the application doesn't care if the combination of user, room and device is valid or not. It will just fetch the data from the database and plot it on the chart.

## Environment setup

Install Node.js version v22.15.0 from [Node.js](https://nodejs.org/en/download/releases/) (LTS version).

Verify the installation by running the following command in your terminal:
```terminal
node --version
npm --version
```
With the following output:
```result
v22.15.0
10.9.2
```

Then install the project dependencies by running:
```terminal
npm install
```

Setup the environment:

linux:
```terminal
export VUE_APP_REST_USER=
export VUE_APP_REST_PASSWORD=
export VUE_APP_REST_URL=
export VUE_APP_REST_PAGE=
```
windows:
```terminal
# use wsl ...
```

### Compile and run for development

```terminal
npm run serve
```

### Compile and minifie for production
```terminal
npm run build
```

## Documentation
### Class diagram

<p align="center"> ![Class Diagram](docs/class-diagramm-web-app.svg)

## Tests
Details in [web-app/test.md](web-app/test.md)

# Links
See [Configuration Reference](https://cli.vuejs.org/config/).\
See [Vue.js](https://vuejs.org/guide/introduction.html).\
See [chartjs](https://www.chartjs.org/docs/latest/).\
See [vue-chartjs](https://vue-chartjs.org/).