Commit 1023aee9 authored by Richard Blechinger's avatar Richard Blechinger
Browse files

Merge branch 'develop'

parents d9ab2f4e d642d8e2
# dashboard
> The Web-UI component of the AUTOradio framework
> The web UI component of the AuRa framework
# Setup
## Setup
## Prerequisites
### Prerequisites
This version is an early development prototype.
Detailed setup infos will follow, as soon as we reach something between alpha and beta stage.
Detailed setup infos will follow, as soon as we reach something between alpha
and beta stage.
## Running it locally (dev environment)
For dashboard to run locally or to deploy it to some web space, you need
[Node.js](https://nodejs.org) and the Node Package Manager (`npm`), which comes
with Node.js. You have different [download options for Node.js](https://nodejs.org/en/download/)
depending on your operating system. You need at least Node.js v10.
### 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 production 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)
This repository already provides sample environments in the files
_sample.env.development_ and _sample.env.production_, so you can copy them
to _.env.development_ and _.env.production_ depending on wheter you want to
set up a dev or prod environment.
All needed values are provided with comments in the `sample.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. For developers: 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.
### Running it locally (dev environment)
After you have set up the environment you just need to do the following:
``` bash
## Project setup
......@@ -20,30 +55,34 @@ npm install
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/).
For customizing the whole vue cli development environment, see [Configuration
Reference](https://cli.vuejs.org/config/).
## Setting it up on a server (production environment)
### 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 the final client code, you have to copy the
`sample.env.production` file to `.env.production` and change the values to your
final setup, as described in the _Configuration_ section above.
Before building you have to copy the `sample.env.production` file to `.env.production` and change the values to your final setup.
Similar to the dev environment you first have to install all dependencies by
`npm install`. Then you can build the production code, use `npm run build`. This
compiles and minifies the code for production. Then you just have to put the
contents of the _dist_ folder on some web space. From a web server's perspective
this is just static code, so nothing special is needed except a plain web server
(using HTTPS with Let's Encrypt or any other TLS certificates is highly
recommended).
> TODO: provide an example setup
## Common problems and solutions
## 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
### Access to steering is denied due to CORS issues
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:
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 module](https://gitlab.servus.at/aura/steering) 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
......@@ -52,13 +91,59 @@ CORS_ORIGIN_WHITELIST = (
)
```
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.
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.
### Authentication is not working due to redirect issues
Dashboard can only be used with working authentication against the OIDC provider,
which is AuRa steering. Therefore you have to set up an OpenID Connect client
there first. Additionally you will also need a separate client for tank.
The standard setup for the dashboard client should use these values:
- _Client Type_: `Public`
- _Response Type_: `id_token token (Implicit Flow)`
- _JWT Algorithm_: `RS256`
- _Require Consent?_: `No`
- _Reuse Consent?_: `Yes`
You also have to set the _Redirect URIs_, which have to __match exactly__ the
ones you configure in your _.env.development_ or _.env.production_ files here
in the dashboard source. This also means that if you use _localhost_ in steering,
you must not put _127.0.0.1_ or any aquivalent in your dashboard config, but
use exactly the same string (and vice versa).
So if for example the _Redirect URIs_ in the steering OIDC client are set to:
```
http://localhost:8080/static/oidc_callback.html
http://localhost:8080/static/oidc_callback_silentRenew.html
```
Then your _.env.development_ (assuming this a dev environment) should contain:
```
VUE_APP_API_STEERING_OIDC_REDIRECT_URI = http://localhost:8080/oidc_callback.html
VUE_APP_API_STEERING_OIDC_REDIRECT_URI_SILENT = http://localhost:8080/oidc_callback_silentRenew.html
```
# Infos on build environment
## 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).
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/).
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).
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).
/* Note that any color adjustments here must also be reflected in tailwind.config.js and tailwind.css */
$primary: #252f3f;
$info: #5029c4;
$link-color: #5029c4;
/* Note that any color adjustments here must also be reflected in custom.css!! */
@tailwind components;
@tailwind utilities;
:root {
--primary: theme('colors.gray.800');
--info: theme('colors.aura.purple');
}
header a,
footer a {
color: theme('colors.gray.50');
}
header a:hover,
footer a:hover {
color: theme('colors.gray.400');
}
.fc-event {
padding: 1px 2px;
background-color: theme('colors.gray.800');
border-color: theme('colors.gray.900');
color: white;
}
.fc-bg {
}
.otherShow {
background-color: theme('colors.gray.300');
border-color: theme('colors.gray.400');
color: theme('colors.gray.900');
}
.otherShow:hover {
color: theme('colors.gray.900');
cursor: pointer;
}
.currentShow {
background-color: theme('colors.aura.purple');
border-color: theme('colors.indigo.800');
color: white;
}
.conflict,
.currentShow.emptySlot{
background-color: theme('colors.red.600');
border-color: theme('colors.red.800');
color: white;
}
.noconflict {
background-color: theme('colors.aura.purple') !important;
border-color: theme('colors.indigo.800') !important;
color: white;
}
.timeslot-discarded {
background-color: theme('colors.red.500');
opacity: 0.5;
text-decoration: line-through !important;
color: white;
}
.timeslot-accepted {
background-color: theme('colors.aura.purple');
border-color: theme('colors.indigo.800');
}
.timeslot-partly {
background-color: theme('colors.aura.purple');
border-color: theme('colors.indigo.800');
opacity: 0.5;
font-weight: bold;
}
This diff is collapsed.
......@@ -8,23 +8,37 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.18.0",
"bootstrap-vue": "^2.0.0-rc.19",
"dompurify": "^1.0.10",
"filesize": "^4.1.2",
"oidc-client": "^1.7.1",
"vue": "^2.6.10",
"vue-router": "^3.0.6"
"@tailwindcss/ui": "^0.6.2",
"axios": "^0.18.1",
"bootstrap-vue": "^2.16.0",
"dompurify": "^2.0.12",
"filesize": "^4.2.1",
"jquery": "3.4.1",
"moment": "^2.27.0",
"node-polyglot": "^2.4.0",
"oidc-client": "^1.10.1",
"vue": "^2.6.12",
"vue-full-calendar": "^2.8.0",
"vue-router": "^3.4.3",
"vue-toast-notification": "^0.6.0",
"vuejs-logger": "^1.5.4",
"vuex": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-eslint": "^3.7.0",
"@vue/cli-service": "^3.7.0",
"babel-eslint": "^10.0.1",
"copy-webpack-plugin": "^4.6.0",
"@vue/cli-plugin-babel": "^3.12.1",
"@vue/cli-plugin-eslint": "^3.12.1",
"@vue/cli-service": "^4.5.7",
"@vue/devtools": "^5.3.3",
"babel-eslint": "^10.1.0",
"copy-webpack-plugin": "^6.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.2",
"vue-template-compiler": "^2.6.10"
"eslint-plugin-vue": "^5.2.3",
"minimist": "^1.2.5",
"sass": "^1.30.0",
"sass-loader": "^10.1.0",
"tailwindcss": "^1.7.6",
"vue-cli-plugin-tailwind": "~1.4.2",
"vue-template-compiler": "^2.6.12"
},
"eslintConfig": {
"root": true,
......@@ -39,7 +53,14 @@
"no-console": "off",
"curly": "error",
"block-spacing": "error",
"keyword-spacing": "error"
"keyword-spacing": "error",
"vue/html-indent": [
"warning",
4,
{
"baseIndent": 1
}
]
},
"parserOptions": {
"parser": "babel-eslint"
......@@ -47,6 +68,8 @@
},
"postcss": {
"plugins": {
"tailwindcss": {},
"vue-cli-plugin-tailwind/purgecss": false,
"autoprefixer": {}
}
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment