Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

error handling, style changes

Browse source
This commit is contained in:
irismarie 2021-03-19 09:42:50 +01:00
parent 984d3f1a5e
commit d2cd5adc14
8 changed files with 93 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app.js
View file

@ -50,7 +50,6 @@ class App extends React.Component {
type: 'config/load',
});
branding.applyBranding();
this.state = {}
}

122
src/branding/branding.js
View file

@ -23,32 +23,16 @@ import slew_values from './slew/slew-values';
class Branding {
constructor(chosenbrand) {
if (!Branding.branding) {
if (chosenbrand === undefined) {
chosenbrand = "villasweb"
}
this.brand = chosenbrand;
this.setValues();
this.isSet = true;
Branding.branding = this;
if (Branding.branding) {
return Branding.branding;
}
/*
// TODO: simplify; error only for "wrong" brand, not for missing brand
var brand = _.get(brands, [chosenbrand]);
if (!brand) {
console.error("Branding '" + chosenbrand + "' not available, will use 'villasweb' branding");
brand = _.get(brands, ['villasweb']);
chosenbrand = 'villasweb';
this.default = true;
} else if (chosenbrand === 'villasweb') {
this.default = true;
} else {
this.default = false;
}
*****/
return Branding.branding;
this.brand = chosenbrand;
this.setValues();
this.checkValues();
this.applyStyle();
Branding.branding = this;
}
setValues() {
@ -60,6 +44,8 @@ class Branding {
this.values = slew_values;
break;
default:
console.error("Branding '" + this.brand + "' not available, will use 'villasweb' branding");
this.brand = 'villasweb';
this.values = villasweb_values;
break;
}
@ -69,13 +55,13 @@ class Branding {
var homepage = '';
switch (this.brand) {
case 'villasweb':
homepage = villasweb_home(this.values.title, username, userid, role);
homepage = villasweb_home(this.getTitle(), username, userid, role);
break;
case 'slew':
homepage = slew_home(this.values.title);
homepage = slew_home();
break;
default:
homepage = villasweb_home();
homepage = villasweb_home(this.getTitle(), username, userid, role);
break;
}
return homepage;
@ -99,15 +85,22 @@ class Branding {
}
defaultWelcome() {
return (<h1>Welcome!</h1>);
return (<div><h1>Welcome!</h1><p>This is the welcome page and you are very welcome here.</p></div>);
}
// TODO: error handling if icon cannot be found
// if icon cannot be found, the default favicon will be used
changeHead() {
// set title of document
let title = this.getTitle();
if (this.getSubtitle()) {
title += " " + this.getSubtitle();
}
document.title = title;
// set document icon
if (!this.values.icon) {
return;
}
document.title = this.values.title + " " + this.values.subtitle;
var oldlink = document.getElementById('dynamic-favicon');
var link = document.createElement('link');
@ -121,14 +114,51 @@ class Branding {
document.head.appendChild(link);
}
applyBranding() {
checkValues() {
if (!this.values.hasOwnProperty('pages')) {
let pages = {};
pages.home = true;
pages.scenarios = true;
pages.infrastructure = true;
pages.users = true;
pages.account = true;
pages.api = true;
this.values.pages = pages;
} else {
if (!this.values.pages.hasOwnProperty('home')) {
this.values.pages['home'] = false;
}
if (!this.values.pages.hasOwnProperty('scenarios')) {
this.values.pages['scenarios'] = false;
}
if (!this.values.pages.hasOwnProperty('infrastructure')) {
this.values.pages['infrastructure'] = false;
}
if (!this.values.pages.hasOwnProperty('users')) {
this.values.pages['users'] = false;
}
if (!this.values.pages.hasOwnProperty('account')) {
this.values.pages['account'] = false;
}
if (!this.values.pages.hasOwnProperty('api')) {
this.values.pages['api'] = false;
}
}
}
applyStyle() {
this.changeHead();
const rootEl = document.querySelector(':root');
let background = this.getBackgroundColor();
let background = this.getBackgroundColor();
if (background) {
document.body.style.backgroundColor = background;
console.log(background)
rootEl.style.setProperty('--bg', background);
//document.body.style.backgroundColor = background;
} else {
console.log(document.body.style.backgroundColor)
}
let maincolor = this.getMainColor();
@ -141,11 +171,6 @@ class Branding {
rootEl.style.setProperty('--highlights', highlight);
}
let primary = this.getPrimaryTextColor();
if (primary) {
rootEl.style.setProperty('--primarytext', primary);
}
let secondary = this.getSecondaryTextColor();
if (secondary) {
rootEl.style.setProperty('--secondarytext', secondary);
@ -163,8 +188,8 @@ class Branding {
}
getBackgroundColor() {
if (this.values.style && this.values.style.bgcolor) {
return this.values.style.bgcolor;
if (this.values.style && this.values.style.background) {
return this.values.style.background;
}
return null;
}
@ -183,13 +208,6 @@ class Branding {
return null;
}
getPrimaryTextColor() {
if (this.values.style && this.values.style.primarytext) {
return this.values.style.primarytext;
}
return null;
}
getSecondaryTextColor() {
if (this.values.style && this.values.style.secondarytext) {
return this.values.style.secondarytext;
@ -210,6 +228,14 @@ class Branding {
}
return null;
}
getTitle() {
return this.values.title ? this.values.title : "No Title!";
}
getSubtitle() {
return this.values.subtitle ? this.values.subtitle : null;
}
};
const branding = new Branding(process.env.REACT_APP_BRAND);

4
src/branding/slew/slew-functions.js
View file

@ -18,13 +18,13 @@ import React from 'react';
import './slew.css'
export function slew_home(title) {
export function slew_home() {
return (
<div className="home-container">
<img style={{ height: 120, float: 'right' }} src={require('./img/slew-logo-draft.png').default} alt="Logo VILLASweb" />
<h1>Home</h1>
<p>
Welcome to <b>{title}</b>!
Welcome to <b>SLEW</b>!
</p>
<p>SLEW is a learning platform for running experiments in a virtual power engineering world.
The platform enables to interact with the experiments in real time and perform analyses on the experimental results.</p>

3
src/branding/slew/slew-values.js
View file

@ -32,10 +32,9 @@ const slew_values = {
"VILLASframework": "https://villas.fein-aachen.org/doc"
},
style: {
bgcolor: 'rgba(107,29,26, 0.8)',
background: 'rgba(107,29,26, 0.8)',
highlights: '#610C04',
maincolor: 'rgba(40,0,0,0.8)',
primarytext: '#472120',
secondarytext: '#472120',
font: "16px Roboto, sans-serif",
borderradius: "10px"

4
src/branding/villasweb/villasweb-values.js
View file

@ -28,9 +28,9 @@ const villasweb_values = {
api: true,
},
style: {
bgcolor: '#6EA2B0',
background: '#6EA2B0',
highlights: '#527984',
primarytext: '#4d4d4d',
maincolor: '#4d4d4d',
secondarytext: '#818181',
}
}

13
src/common/header.js
View file

@ -20,10 +20,19 @@ import branding from '../branding/branding';
class Header extends React.Component {
render() {
let hasSubtitle = branding.getSubtitle();
return (
<header className="app-header">
<h1>{branding.values.title} - {branding.values.subtitle}</h1>
<div>
{ hasSubtitle ?
<header className="app-header">
<h1>{branding.getTitle()} - {branding.getSubtitle()}</h1>
</header>
:
<header className="app-header">
<h1>{branding.getTitle()} </h1>
</header>
}
</div>
);
}
}

6
src/styles/app.css
View file

@ -22,10 +22,10 @@
:root {
--bg: #6EA2B0;
--highlights: #527984;
--primarytext: #4d4d4d;
--secondarytext: #818181;
--borderradius: 0px;
--mainfont: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
--maincolor: #4d4d4d;
}
* {
@ -33,12 +33,12 @@
}
body {
background-color: var(--bg);
background-color: var(--bg) !important;
}
.app {
height: 100vh;
color: var(--primarytext);
color: var(--maincolor);
border-radius: var(--borderradius);

3
src/user/login.js
View file

@ -38,9 +38,6 @@ class Login extends Component {
AppDispatcher.dispatch({
type: 'config/load',
});
// apply branding in case the login page gets refreshed
branding.applyBranding();
}
static getStores() {