separate brands

src/app.js

@@ -20,7 +20,6 @@ import { DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import NotificationSystem from 'react-notification-system';
 import { Redirect, Route } from 'react-router-dom';
-import { Hidden } from 'react-grid-system'
 
 import AppDispatcher from './common/app-dispatcher';
 import NotificationsDataManager from './common/data-managers/notifications-data-manager';
@@ -39,7 +38,6 @@ import User from './user/user';
 import APIBrowser from './common/api-browser';
 
 import './styles/app.css';
-//import './branding/slew/slew.css'
 import Branding from './branding/branding';
 
 
@@ -62,13 +60,13 @@ class App extends React.Component {
       console.log("default branding");
       return;
     }
-    document.title = Branding.instance.brand.title + " " + Branding.instance.brand.subtitle;
+    document.title = Branding.instance.values.title + " " + Branding.instance.values.subtitle;
     var oldlink = document.getElementById('dynamic-favicon');
 
     var link = document.createElement('link');
     link.id = 'dynamic-favicon';
     link.rel = 'shortcut icon'
-    link.href = Branding.instance.brand.icon;
+    link.href = Branding.instance.values.icon;
 
     if (oldlink) {
       document.head.removeChild(oldlink);
@@ -98,7 +96,7 @@ class App extends React.Component {
 
     let secondary = Branding.instance.getSecondaryTextColor();
     if (secondary) {
-      rootEl.style.setProperty('--secondary', secondary);
+      rootEl.style.setProperty('--secondarytext', secondary);
     }
 
     let font = Branding.instance.getFont();

src/branding/branding.js

@@ -15,16 +15,15 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import brands from './brands'
-import config from '../config'
-import _ from 'lodash';
-
 import { villasweb_home } from './villasweb/villasweb-home';
-import { slew_home } from './slew/slew_home';
+import villasweb_values from './villasweb/villasweb-values';
 
+import { slew_home } from './slew/slew-home';
+import slew_values from './slew/slew-values';
 
 class Branding {
     constructor(chosenbrand) {
+        /*
         // TODO: simplify; error only for "wrong" brand, not for missing brand
         var brand = _.get(brands, [chosenbrand]);
         if (!brand) {
@@ -37,21 +36,36 @@ class Branding {
         } else {
             this.default = false;
         }
+        *****/
 
-        this.brand = brand;
-        this.name = chosenbrand;
+        this.brand = chosenbrand;
+        this.setValues();
     }
 
-    static instance = Branding.instance || new Branding(config.branding);
+    static instance = Branding.instance || new Branding(process.env.REACT_APP_BRAND);
+
+    setValues() {
+        switch(this.brand) {
+            case 'villasweb':
+                this.values = villasweb_values;
+                break;
+            case 'slew':
+                this.values = slew_values;
+                break;
+            default:
+                this.values = villasweb_values;
+                break;
+        }
+    }
 
     getHome(username = '', userid = '', role = '') {
         var homepage = '';
-        switch (this.name) {
+        switch (this.brand) {
             case 'villasweb':
-                homepage = villasweb_home(this.brand.title, username, userid, role);
+                homepage = villasweb_home(this.values.title, username, userid, role);
                 break;
             case 'slew':
-                homepage = slew_home(this.brand.title);
+                homepage = slew_home(this.values.title);
                 break;
             default:
                 homepage = villasweb_home();
@@ -61,36 +75,36 @@ class Branding {
     }
 
     getBackgroundColor() {
-        if (this.brand.style && this.brand.style.bgcolor) {
-            return this.brand.style.bgcolor;
+        if (this.values.style && this.values.style.bgcolor) {
+            return this.values.style.bgcolor;
         }
         return null;
     }
 
     getHighlightColor() {
-        if (this.brand.style && this.brand.style.highlights) {
-            return this.brand.style.highlights;
+        if (this.values.style && this.values.style.highlights) {
+            return this.values.style.highlights;
         }
         return null;
     }
 
     getPrimaryTextColor() {
-        if (this.brand.style && this.brand.style.primarytext) {
-            return this.brand.style.primarytext;
+        if (this.values.style && this.values.style.primarytext) {
+            return this.values.style.primarytext;
         }
         return null;
     }
 
     getSecondaryTextColor() {
-        if (this.brand.style && this.brand.style.secondarytext) {
-            return this.brand.style.secondarytext;
+        if (this.values.style && this.values.style.secondarytext) {
+            return this.values.style.secondarytext;
         }
         return null;
     }
 
     getFont() {
-        if (this.brand.style && this.brand.style.font) {
-            return this.brand.style.secondarytext;
+        if (this.values.style && this.values.style.font) {
+            return this.values.style.secondarytext;
         }
         return null;
     }

src/branding/slew/slew-values.js

@@ -0,0 +1,44 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+const slew_values = {
+   title: 'SLEW',
+   subtitle: 'Second Life for Energiewende',
+   logo: "slew-logo.png",
+   icon: "/slew_icon.png",
+   pages: {
+      home: true,
+      scenarios: true,
+      infrastructure: false,
+      users: false,
+      account: false,
+      api: false
+   },
+   links: {
+      "DPsim Simulator": "https://dpsim.fein-aachen.org",
+      "VILLASframework": "https://villas.fein-aachen.org/doc"
+   },
+   style: {
+      bgcolor: 'rgba(107,29,26, 0.8)',
+      highlights: '#610C04',
+      primarytext: '#472120',
+      secondarytext: '#472120',
+      font: "16px Roboto, sans-serif",
+   }
+}
+
+export default slew_values;

src/branding/villasweb/villasweb-values.js

@@ -0,0 +1,38 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+const villasweb_values = {
+   title: 'VILLASweb',
+   subtitle: 'ACS',
+   logo: 'villas_web.svg',
+   pages: {
+      home: true,
+      scenarios: true,
+      infrastructure: true,
+      users: true,
+      account: true,
+      api: true,
+   },
+   style: {
+      bgcolor: '#6EA2B0',
+      highlights: '#527984',
+      primarytext: '#4d4d4d',
+      secondarytext: '#818181',
+   }
+}
+
+export default villasweb_values;

src/common/header.js

@@ -22,7 +22,7 @@ class Header extends React.Component {
   render() {
     return (
       <header className="app-header">
-        <h1>{Branding.instance.brand.title} - {Branding.instance.brand.subtitle}</h1>
+        <h1>{Branding.instance.values.title} - {Branding.instance.values.subtitle}</h1>
       </header>
     );
   }

src/common/menu.js

@@ -66,11 +66,11 @@ class SidebarMenu extends React.Component {
   }
 
   render() {
-    const brand = Branding.instance.brand;
+    const values = Branding.instance.values;
     let links = []
-    if (brand.links) {
-      Object.keys(brand.links).forEach(key => {
-        links.push(<li key={key}><a href={brand.links[key]} title={key}>{key}</a></li>);
+    if (values.links) {
+      Object.keys(values.links).forEach(key => {
+        links.push(<li key={key}><a href={values.links[key]} title={key}>{key}</a></li>);
       })
     }
 
@@ -80,26 +80,26 @@ class SidebarMenu extends React.Component {
 
         {this.state.externalAuth ?
           <ul>
-            <li hidden={!brand.pages.home}><NavLink to="/home" activeClassName="active" title="Home">Home</NavLink></li>
-            <li hidden={!brand.pages.scenarios}><NavLink to="/scenarios" activeClassName="active" title="Scenarios">Scenarios</NavLink></li>
-            <li hidden={!brand.pages.infrastructure}><NavLink to="/infrastructure" activeClassName="active" title="Infrastructure">Infrastructure</NavLink></li>
+            <li hidden={!values.pages.home}><NavLink to="/home" activeClassName="active" title="Home">Home</NavLink></li>
+            <li hidden={!values.pages.scenarios}><NavLink to="/scenarios" activeClassName="active" title="Scenarios">Scenarios</NavLink></li>
+            <li hidden={!values.pages.infrastructure}><NavLink to="/infrastructure" activeClassName="active" title="Infrastructure">Infrastructure</NavLink></li>
             {this.props.currentRole === 'Admin' ?
               <li><NavLink to="/users" activeClassName="active" title="Users">Users</NavLink></li> : ''
             }
-            <li hidden={!brand.pages.account}><NavLink to="/account" title="Account">Account</NavLink></li>
+            <li hidden={!values.pages.account}><NavLink to="/account" title="Account">Account</NavLink></li>
             <a onClick={this.logout.bind(this)} href={this.state.logoutLink}>Logout</a>
-            <li hidden={!brand.pages.api}><NavLink to="/api" title="API Browser">API Browser</NavLink></li>
+            <li hidden={!values.pages.api}><NavLink to="/api" title="API Browser">API Browser</NavLink></li>
           </ul>
           : <ul>
-            <li hidden={!brand.pages.home}><NavLink to="/home" activeClassName="active" title="Home">Home</NavLink></li>
-            <li hidden={!brand.pages.scenarios}><NavLink to="/scenarios" activeClassName="active" title="Scenarios">Scenarios</NavLink></li>
-            <li hidden={!brand.pages.infrastructure}><NavLink to="/infrastructure" activeClassName="active" title="Infrastructure">Infrastructure</NavLink></li>
+            <li hidden={!values.pages.home}><NavLink to="/home" activeClassName="active" title="Home">Home</NavLink></li>
+            <li hidden={!values.pages.scenarios}><NavLink to="/scenarios" activeClassName="active" title="Scenarios">Scenarios</NavLink></li>
+            <li hidden={!values.pages.infrastructure}><NavLink to="/infrastructure" activeClassName="active" title="Infrastructure">Infrastructure</NavLink></li>
             {this.props.currentRole === 'Admin' ?
               <li><NavLink to="/users" activeClassName="active" title="Users">Users</NavLink></li> : ''
             }
-            <li hidden={!brand.pages.account}><NavLink to="/account" title="Account">Account</NavLink></li>
+            <li hidden={!values.pages.account}><NavLink to="/account" title="Account">Account</NavLink></li>
             <li><NavLink to={this.state.logoutLink} title="Logout">Logout</NavLink></li>
-            <li hidden={!brand.pages.api}> <NavLink to="/api" title="API Browser">API Browser</NavLink></li >
+            <li hidden={!values.pages.api}> <NavLink to="/api" title="API Browser">API Browser</NavLink></li >
           </ul >}
 
         {

src/config.js

@@ -20,7 +20,6 @@ const config = {
     name: 'Institute for Automation of Complex Power Systems (ACS), RWTH Aachen University, Germany',
     mail: 'stvogel@eonerc.rwth-aachen.de'
   },
-  branding: 'slew',
 }
 
 export default config

src/styles/app.css

@@ -62,13 +62,11 @@ body {
 
   margin-top: 20px;
   padding-bottom: 10px;
-
+  color: var(--secondarytext);
   text-align: center;
 }
 
 .app-footer a {
-  color: var(--primarytext);
-
   text-decoration: underline;
 }
 
@@ -116,7 +114,7 @@ body {
 }
 
 .menu a {
-  color: var(--primarytext);
+  color: var(--secondarytext);
   text-decoration:none;
 }