The front-end of the dust project. This project was made to give an overview and show all dust devices that are planted in the ground. This front-end also gives a summary of the sensors that are connected to a device. And can display all values for each sensor if wished.
This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
.vue
Imports in TSTypeScript cannot handle type information for .vue
imports by default, so we replace the tsc
CLI with vue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
Extensions: Show Built-in Extensions
from VSCode's command palette
2) Find TypeScript and JavaScript Language Features
, right click and select Disable (Workspace)
Developer: Reload Window
from the command palette.See Vite Configuration Reference.
The staging server for this project can be found here.
How to run is described here, don't forget to acually use this front-end that the back-end coming with this project is required and needs to be running on the host machine.
Docker and docker-compose files are available in the directory. Just execute the following for the development version and the front-end will be online on port 8090
docker-compose -f docker-compose.dev.yaml up --build
For the distribution
docker-compose up
To build the project using npm first execute the following:
npm install
then for development:
npm run serve
To build the project:
npm run build
The Color pallet was chosen with: Adobe color-wheel
Using chart.js for the sensor charts.
Felix Falk as his bachelor thesis.