[WIP] allow branding

src/branding/branding.js

@@ -0,0 +1,37 @@
+/**
+ * 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/>.
+ ******************************************************************************/
+
+import brands from './brands'
+import config from '../config'
+import _ from 'lodash';
+
+class Branding {
+    constructor(chosenbrand) {
+        var brand = _.get(brands, [chosenbrand]);
+        if (!brand) {
+            console.error("Branding '" + chosenbrand + "' not available, will use 'villasweb' branding");
+            brand = _.get(brands, ['villasweb']);
+        }
+
+        this.brand = brand;
+    }
+
+    static instance = Branding.instance || new Branding(config.branding);
+};
+
+
+export default Branding;

src/branding/brands.js

@@ -0,0 +1,70 @@
+/**
+ * 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 brands = {
+   villasweb: {
+      title: 'VILLASweb',
+      subtitle: 'ACS',
+      logo: 'villas_web.svg',
+      pages: {
+         home: true,
+         scenarios: true,
+         infrastructure: true,
+         users: true,
+         account: true,
+         api: true,
+      },
+      links: {
+         "VILLASframework project": "http://fein-aachen.org/projects/villas-framework/",
+         "VILLASweb Documentation": "https://villas.fein-aachen.org/doc/web.html",
+         "VILLASweb frontend source": "https://git.rwth-aachen.de/acs/public/villas/web",
+         "VILLASweb backend source":"https://git.rwth-aachen.de/acs/public/villas/web-backend-go",
+      }
+   },
+   slew: {
+      title: 'SLEW',
+      subtitle: 'Second Life for Energiewende',
+      logo: "slew-logo.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"
+      }
+   },
+   test: {
+      title: 'SLEW',
+      subtitle: 'Second Life for Energiewende',
+      logo: "slew-logo.png",
+      pages: {
+         home: true,
+         scenarios: true,
+         infrastructure: false,
+         users: false,
+         account: false,
+         api: false
+      },    
+   }
+}
+
+export default brands;

src/common/header.js

@@ -19,14 +19,14 @@ import React from 'react';
 import { Col, Button } from 'react-bootstrap';
 import { Hidden } from 'react-grid-system'
 import Icon from './icon';
-import config from '../config';
+import Branding from '../branding/branding';
 
 class Header extends React.Component {
   render() {
     return (
       <header className="app-header">
         <Col xs={{span: 10}} sm={{span: 8, offset: 2}}>
-          <h1>{config.instance} - {config.subtitle}</h1>
+          <h1>{Branding.instance.brand.title} - {Branding.instance.brand.subtitle}</h1>
         </Col>
         <Hidden sm md lg xl>
           <Col xs={2} style={{ paddingLeft: 'auto', paddingRight: 0 }}>

src/common/home.js

@@ -17,9 +17,11 @@
 
 import React from 'react';
 
-import config from '../config';
 import { Redirect } from "react-router-dom";
 import { NavLink } from 'react-router-dom';
+import Branding from '../branding/branding';
+
+const images = require.context('../img', true)
 
 class Home extends React.Component {
 
@@ -38,50 +40,19 @@ class Home extends React.Component {
       return (<Redirect to="/logout" />);
     }
 
+    const brand = Branding.instance.brand;
+
     return (
       <div className="home-container">
-        <img style={{height: 120, float: 'right'}} src={require('../img/villas_web.svg').default} alt="Logo VILLASweb" />
+        <img style={{height: 120, float: 'right'}} src={images("./" + brand.logo).default} alt="Logo VILLASweb" />
         <h1>Home</h1>
         <p>
-          {/*Welcome to <b>{config.instance}</b>  hosted by  <a href={"mailto:" + config.admin.mail}>{config.admin.name}</a>!<br />*/}
-          Welcome to <b>{config.instance}</b>!
+          Welcome to <b>{Branding.instance.brand.title}</b>!
         </p>
         <p>
         You are logged in as user <b>{currentUser.username}</b> with <b>ID {currentUser.id}</b> and role <b>{currentUser.role}</b>.
         </p>
 
-
-        {/*<h3>Data Model</h3>
-        <img height={400} src={require('../img/datamodel.png').default} alt="Datamodel VILLASweb" />
-
-        <h3>Terminology </h3>
-
-        <h5>Infrastructure Component</h5>
-          <ul>
-            <li>A component of research infrastructure</li>
-            <li>Category: for example simulator, gateway, amplifier, database, etc.</li>
-            <li>Type: for example RTDS, OpalRT, VILLASnode, Cassandra</li>
-          </ul>
-
-        <h5>Component Configuration</h5>
-          <ul>
-            <li>Input signals: Signals that can be modified in VILLASweb</li>
-            <li>Output signals: Signals that can be visualized on dashboards of VILLASweb</li>
-            <li>Parameters: Further configuration parameters of the infrastructure component</li>
-          </ul>
-
-        <h5>Dashboard</h5>
-          <ul>
-            <li>Visualize ongoing experiments in real-time</li>
-            <li>Interact with ongoing experiments in real-time</li>
-          </ul>
-
-        <h5>Scenario</h5>
-          <ul>
-            <li>A collection of component configurations and dashboards for a specific experiment</li>
-            <li>Users can have access to multiple scenarios</li>
-          </ul>*/}
-
         <h3>Credits</h3>
         <p>VILLASweb is an open source project developed by the <a href="http://acs.eonerc.rwth-aachen.de">Institute for Automation of Complex Power Systems</a> at <a href="https;//www.rwth-aachen.de">RWTH Aachen University</a>.</p>
         <img height={60} src={require('../img/eonerc_rwth.svg').default} alt="Logo ACS" />

src/common/menu-sidebar.js

@@ -17,24 +17,53 @@
 
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import Branding from '../branding/branding';
+
 
 class SidebarMenu extends React.Component {
   render() {
+    const brand = Branding.instance.brand;
+    console.log(brand.links)
+    let links = []
+
+    /*++++
+    for (var key of Object.keys(brand.links) ) {
+      console.log(`${key}: ${brand.links[key]}`);
+      links.push(<li><a href={brand.links[key]} title={key}>{key}</a></li>);
+    }*/
+
+    if (brand.links) {
+      Object.keys(brand.links).forEach(key => {
+        console.log(`${key}: ${brand.links[key]}`);
+        links.push(<li><a href={brand.links[key]} title={key}>{key}</a></li>);
+      })
+    }
+
+
     return (
       <div className="menu-sidebar">
         <h2>Menu</h2>
 
         <ul>
-          <li><NavLink to="/home" activeClassName="active" title="Home">Home</NavLink></li>
-          <li><NavLink to="/scenarios" activeClassName="active" title="Scenarios">Scenarios</NavLink></li>
-          <li><NavLink to="/infrastructure" activeClassName="active" title="Infrastructure Components">Infrastructure Components</NavLink></li>
-          { this.props.currentRole === 'Admin' ?
-              <li><NavLink to="/users" activeClassName="active" title="User Management">User Management</NavLink></li> : ''
+          <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 Components">Infrastructure Components</NavLink></li>
+          {this.props.currentRole === 'Admin' ?
+            <li><NavLink to="/users" activeClassName="active" title="User Management">User Management</NavLink></li> : ''
           }
-          <li><NavLink to="/account" title="Account">Account</NavLink></li>
+          <li hidden={!brand.pages.account}><NavLink to="/account" title="Account">Account</NavLink></li>
           <li><NavLink to="/logout" title="Logout">Logout</NavLink></li>
-          <li><NavLink to="/api" title="API Browser">API Browser</NavLink></li>
+          <li hidden={!brand.pages.api}><NavLink to="/api" title="API Browser">API Browser</NavLink></li>
         </ul>
+        {
+          links.length > 0 ?
+            <div>
+              <br></br>
+              <h4> Links</h4>
+              <ul> {links} </ul>
+            </div>
+            : ''
+        }
       </div>
     );
   }

src/config.js

@@ -16,13 +16,12 @@
  ******************************************************************************/
 
 const config = {
-    publicPathBase: 'public/',
-    instance: 'VILLASweb',
-    subtitle: 'ACS',
-    admin: {
-      name: 'Institute for Automation of Complex Power Systems (ACS), RWTH Aachen University, Germany',
-      mail: 'stvogel@eonerc.rwth-aachen.de'
-    }
-};
+  publicPathBase: 'public/',
+  admin: {
+    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/router.js

@@ -29,6 +29,7 @@ import InfrastructureComponents from './ic/ics';
 import Users from './user/users';
 import User from "./user/user";
 
+
 class Root extends React.Component {
   render() {
     return (