66 lines
1.8 KiB
Markdown
66 lines
1.8 KiB
Markdown
# 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_API_KEY=your_api_key
|
|
export VUE_APP_API_SECRET=your_api_secret
|
|
```
|
|
windows:
|
|
```terminal
|
|
# use wsl ...
|
|
```
|
|
|
|
### Compile and run for development
|
|
|
|
```terminal
|
|
npm run serve
|
|
```
|
|
|
|
### Compile and minifie for production
|
|
```terminal
|
|
npm run build
|
|
```
|
|
|
|
### 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/).
|