dashboard

The Web-UI component of the AUTOradio framework

Prerequisites

This version is an early development prototype, only the interface to the steering/pv module is implemented partly yet.

Build Setup

For the current early dev prototype you only need the first two steps here:

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

Configuration of the steering/pv backend

For the dashboard to run in a dev mode you only need the npm install and npm run dev commands. To access show data in the show manager you also have to have the steering/pv module running somewhere. There you need to add the following lines to the pv/local_settings.py, in order to allow CORS requests from you dashboard:

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
	'localhost:8080'
)

This assumes of course that you have the dashboard running on its standard localhost port 8080. If you want to change this to e.g. port 9090, add a line PORT: 9090, to the module.exports in config/dev.env.js file of the dashboard package.

Detailed infos on build environment

This project is built with Vue.js 2. Take a look at their Guide or the API docs to find out more about the core framework. As template we are using the webpack template. For a detailed explanation on how things work with this, check out the webpack guide and docs for vue-loader.

Webpack also comes with code linting, using ESLint, which makes our code consistent, functional and less error-prone. For infos on how the routes work, take a look at the vue-router.

And if you want to dig into a lot of useful awesome stuff that was already coded by others and which can be easily integrated into this project, go to the vue-aweseome repo.