README.md

# dashboard

> The Web-UI component of the AUTOradio framework

# Setup

## Prerequisites

This version is an early development prototype.

Detailed setup infos will follow, as soon as we reach something between alpha and beta stage.

## Running it locally (dev environment)

``` bash
## Project setup
npm install

### Compiles and hot-reloads for development
npm run serve
```

Before you can actually run it, you have to copy the `sample.env.development` file to `.env.development` and change the values to reflect your local setup.

For customizing the whole vue cli development environment, see [Configuration Reference](https://cli.vuejs.org/config/).

## Setting it up on a server (production environment)

To build the production code, use `npm run build`. This compiles and minifies the code for production. Then you just have to put it on some static website.

Before building you have to copy the `sample.env.production` file to `.env.production` and change the values to your final setup.

> TODO: provide an example setup


## Configuration

All global configuration settings of the dashboard application can be set in the corresponding `.env.*` files. You can use different settings for a `development` and a `production` environment. So for a productive environment you will have to set all values in `.env.production`. For development use `.env.development`. For more infos on environment variables, also for test and staging modes, see [Vue CLI 3: Environment Variables and Modes](https://cli.vuejs.org/guide/mode-and-env.html)

All needed values are provided with comments in the `.env.production` file, so you can just take a look there and create your copy for the development environment. There are some important notes on what to set and what to not forget. Also be aware that these settings become environment variables once compiled by _Vue.js_, so hot reload does not work, when you change them. You have to compile the app again for changes to take effect.

For the _OpenID Connect_ settings it is very important to use exactly the same redirect URIs as defined in you OIDC client settings in the _aura/steering_ module. So `VUE_APP_API_STEERING_OIDC_REDIRECT_URI` and `VUE_APP_API_STEERING_OIDC_REDIRECT_URI_SILENT` should ideally be a copy-paste from there. This can be a nasty debug issue if you don't get the login to work. For example we once had the issue that while the _steering_ used `http://localhost:8080/oidc_callback.html` as the parameter for the REDIRECT_URI, the dashboard had configured `http://127.0.0.1:8080/oidc_callback.html`. You would expect that this resolves to the same location, but even if `localhost` resolves to `127.0.0.1`, the _OIDC provider_ in the _steering_ module does a string comparison of what it receives from the client and what it has configured.

## Configuration of the steering 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](https://gitlab.servus.at/autoradio/pv) running somewhere. There you need to add the following lines to the `pv/local_settings.py`, in order to allow CORS requests from your 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 `.env.development` file of the dashboard package.


# Infos on build environment

This project is built with [Vue.js 2](https://vuejs.org). Take a look at their [Guide](https://vuejs.org/v2/guide/) or the [API docs](https://vuejs.org/v2/api/) 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](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). For the whole einvornment setup we started out with Vue CLI 2 but now work with [Vue CLI 3](https://cli.vuejs.org).

Webpack also comes with code linting, using [ESLint](https://eslint.org/), which makes our code consistent, functional and less error-prone. For infos on how the routes work, take a look at the [vue-router](http://router.vuejs.org/).

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](https://github.com/vuejs/awesome-vue).