From d2cd5adc1419fc703ce9311069e92df39ba6f981 Mon Sep 17 00:00:00 2001 From: irismarie Date: Fri, 19 Mar 2021 09:42:50 +0100 Subject: [PATCH] error handling, style changes --- src/app.js | 1 - src/branding/branding.js | 122 +++++++++++++-------- src/branding/slew/slew-functions.js | 4 +- src/branding/slew/slew-values.js | 3 +- src/branding/villasweb/villasweb-values.js | 4 +- src/common/header.js | 13 ++- src/styles/app.css | 6 +- src/user/login.js | 3 - 8 files changed, 93 insertions(+), 63 deletions(-) diff --git a/src/app.js b/src/app.js index 00abbc1..8fa96f1 100644 --- a/src/app.js +++ b/src/app.js @@ -50,7 +50,6 @@ class App extends React.Component { type: 'config/load', }); - branding.applyBranding(); this.state = {} } diff --git a/src/branding/branding.js b/src/branding/branding.js index 7a83fdb..92bb583 100644 --- a/src/branding/branding.js +++ b/src/branding/branding.js @@ -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 (

Welcome!

); + return (

Welcome!

This is the welcome page and you are very welcome here.

); } - // 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); diff --git a/src/branding/slew/slew-functions.js b/src/branding/slew/slew-functions.js index d15da26..1fecbe7 100644 --- a/src/branding/slew/slew-functions.js +++ b/src/branding/slew/slew-functions.js @@ -18,13 +18,13 @@ import React from 'react'; import './slew.css' -export function slew_home(title) { +export function slew_home() { return (
Logo VILLASweb

Home

- Welcome to {title}! + Welcome to SLEW!

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.

diff --git a/src/branding/slew/slew-values.js b/src/branding/slew/slew-values.js index 0c5b06e..34488da 100644 --- a/src/branding/slew/slew-values.js +++ b/src/branding/slew/slew-values.js @@ -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" diff --git a/src/branding/villasweb/villasweb-values.js b/src/branding/villasweb/villasweb-values.js index f4b2dd9..c055a32 100644 --- a/src/branding/villasweb/villasweb-values.js +++ b/src/branding/villasweb/villasweb-values.js @@ -28,9 +28,9 @@ const villasweb_values = { api: true, }, style: { - bgcolor: '#6EA2B0', + background: '#6EA2B0', highlights: '#527984', - primarytext: '#4d4d4d', + maincolor: '#4d4d4d', secondarytext: '#818181', } } diff --git a/src/common/header.js b/src/common/header.js index 97d094b..a01575e 100644 --- a/src/common/header.js +++ b/src/common/header.js @@ -20,10 +20,19 @@ import branding from '../branding/branding'; class Header extends React.Component { render() { + let hasSubtitle = branding.getSubtitle(); return ( -
-

{branding.values.title} - {branding.values.subtitle}

+
+ { hasSubtitle ? +
+

{branding.getTitle()} - {branding.getSubtitle()}

+ : +
+

{branding.getTitle()}

+
+ } +
); } } diff --git a/src/styles/app.css b/src/styles/app.css index 9a4b9b5..9ba1fd9 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -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); diff --git a/src/user/login.js b/src/user/login.js index 24f2fd5..f7dcc17 100644 --- a/src/user/login.js +++ b/src/user/login.js @@ -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() {