on a desktop browser, this approach allows to display all categories at once. we also increase readability as the values are much closer to their label. previously, the values were far to the right of the screen and it was unpleasent to read which value belonged to which setting. the grouping of values per category was also not very well conceived. by using cards, we also avoid some styling issues, namely the use of rowspan, which caused a spurious table cell border at the end of the old table layout. |
||
|---|---|---|
| .. | ||
| .vscode | ||
| public | ||
| src | ||
| .gitignore | ||
| .prettierrc.json | ||
| env.d.ts | ||
| eslint.config.js | ||
| index.html | ||
| package.json | ||
| README.md | ||
| tsconfig.config.json | ||
| tsconfig.json | ||
| vite.config.ts | ||
| yarn.lock | ||
OpenDTU web frontend
You can run the webapp locally with yarn dev. If you enter the IP of your ESP in the vite.user.ts beforehand (template can be found in vite.config.ts), all api requests will even be proxied to the real ESP. Then you can develop the webapp as if it were running directly on the ESP. The yarn dev also supports hot reload, i.e. as soon as you save a vue file, it is automatically reloaded in the browser.
Project Setup
yarn install
Compile and Hot-Reload for Development
yarn dev
Type-Check, Compile and Minify for Production
yarn build
Lint with ESLint
yarn lint