1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00

format branding code

Signed-off-by: Steffen Vogel <steffen.vogel@opal-rt.com>
This commit is contained in:
Steffen Vogel 2023-05-02 15:48:33 +02:00
parent ed3a2988d0
commit a70debc43f
8 changed files with 319 additions and 320 deletions

View file

@ -28,188 +28,187 @@ import { template_welcome, template_home, template_footer } from './template/tem
import template_values from './template/template-values';
class Branding {
constructor(chosenbrand) {
this.brand = chosenbrand;
this.setValues();
this.checkValues();
this.applyStyle();
constructor(brand) {
this.brand = brand;
Branding.branding = this;
this.setValues();
this.checkValues();
this.applyStyle();
Branding.branding = this;
}
setValues() {
switch (this.brand) {
case 'villasweb':
this.values = villasweb_values;
break;
case 'slew':
this.values = slew_values;
break;
case 'opalrt':
this.values = opalrt_values;
break;
case 'template':
this.values = template_values;
break;
default:
console.error("Branding '" + this.brand + "' not available, will use 'villasweb' branding");
this.brand = 'villasweb';
this.values = villasweb_values;
break;
}
}
getHome(username = '', userid = '', role = '') {
var homepage = '';
switch (this.brand) {
case 'villasweb':
homepage = villasweb_home(this.getTitle(), username, userid, role);
break;
case 'slew':
homepage = slew_home();
break;
case 'opalrt':
homepage = opalrt_home();
break;
case 'template':
homepage = template_home();
break;
default:
homepage = villasweb_home(this.getTitle(), username, userid, role);
break;
}
return homepage;
}
getFooter() {
var footer = '';
switch (this.brand) {
case 'template':
footer = template_footer();
break;
default:
footer = villasweb_footer();
break;
}
return footer;
}
getWelcome() {
var welcome = '';
switch (this.brand) {
case 'villasweb':
welcome = villasweb_welcome();
break;
case 'slew':
welcome = slew_welcome();
break;
case 'opalrt':
welcome = opalrt_welcome();
break;
case 'template':
welcome = template_welcome();
break;
default:
welcome = this.defaultWelcome();
break;
}
return welcome;
}
defaultWelcome() {
return (<div><h1>Welcome!</h1><p>This is the welcome page and you are very welcome here.</p></div>);
}
// 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;
}
var oldlink = document.getElementById('dynamic-favicon');
var link = document.createElement('link');
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon'
link.href = '/' + this.values.icon;
if (oldlink) {
document.head.removeChild(oldlink);
}
document.head.appendChild(link);
}
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');
for (const [key, value] of Object.entries(this.values.style)) {
rootEl.style.setProperty('--' + key, value);
}
}
getLogo(style) {
let image = null;
try {
image = <img style={style} src={require('./' + this.brand + '/img/' + this.values.logo).default} alt={'Logo ' + this.values.title} />
} catch (err) {
console.error("cannot find './" + this.brand + '/img/' + this.values.logo + "'");
}
setValues() {
switch (this.brand) {
case 'villasweb':
this.values = villasweb_values;
break;
case 'slew':
this.values = slew_values;
break;
case 'opalrt':
this.values = opalrt_values;
break;
case 'template':
this.values = template_values;
break;
default:
console.error("Branding '" + this.brand + "' not available, will use 'villasweb' branding");
this.brand = 'villasweb';
this.values = villasweb_values;
break;
}
}
return image;
}
getHome(username = '', userid = '', role = '') {
var homepage = '';
switch (this.brand) {
case 'villasweb':
homepage = villasweb_home(this.getTitle(), username, userid, role);
break;
case 'slew':
homepage = slew_home();
break;
case 'opalrt':
homepage = opalrt_home();
break;
case 'template':
homepage = template_home();
break;
default:
homepage = villasweb_home(this.getTitle(), username, userid, role);
break;
}
return homepage;
}
getTitle() {
return this.values.title ? this.values.title : "No Title!";
}
getFooter() {
var footer = '';
switch(this.brand) {
case 'template':
footer = template_footer();
break;
default:
footer = villasweb_footer();
break;
}
return footer;
}
getWelcome() {
var welcome = '';
switch (this.brand) {
case 'villasweb':
welcome = villasweb_welcome();
break;
case 'slew':
welcome = slew_welcome();
break;
case 'opalrt':
welcome = opalrt_welcome();
break;
case 'template':
welcome = template_welcome();
break;
default:
welcome = this.defaultWelcome();
break;
}
return welcome;
}
defaultWelcome() {
return (<div><h1>Welcome!</h1><p>This is the welcome page and you are very welcome here.</p></div>);
}
// 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;
}
var oldlink = document.getElementById('dynamic-favicon');
var link = document.createElement('link');
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon'
link.href = '/' + this.values.icon;
if (oldlink) {
document.head.removeChild(oldlink);
}
document.head.appendChild(link);
}
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');
for (const [key, value] of Object.entries(this.values.style)) {
rootEl.style.setProperty('--' + key, value);
}
}
getLogo(style) {
let image = null;
try {
image = <img style={style} src={require('./' + this.brand + '/img/' + this.values.logo).default} alt={'Logo ' + this.values.title} />
} catch (err) {
console.error("cannot find './" + this.brand + '/img/' + this.values.logo + "'");
}
return image;
}
getTitle() {
return this.values.title ? this.values.title : "No Title!";
}
getSubtitle() {
return this.values.subtitle ? this.values.subtitle : null;
}
getSubtitle() {
return this.values.subtitle ? this.values.subtitle : null;
}
};
var branding = new Branding(process.env.REACT_APP_BRAND);

View file

@ -19,48 +19,48 @@ import './slew.css'
export function slew_home() {
return (
<div className="home-container">
<h1>Home</h1>
<p>
Welcome to <b>SLEW</b>!
</p>
<p>SLEW is a learning platform for running experiments in a virtual power engineering world.
The platform enables interaction with the experiments in real time and performing analysis on the experimental results.</p>
return (
<div className="home-container">
<h1>Home</h1>
<p>
Welcome to <b>SLEW</b>!
</p>
<p>SLEW is a learning platform for running experiments in a virtual power engineering world.
The platform enables interaction with the experiments in real time and performing analysis on the experimental results.</p>
<p>The motivation behind SLEW is the ongoing transformation of the energy system, which is making the system more and more complex.
Hence, understanding new phenomena and underlying interactions is getting more challenging, also because real experimental
activities for obtaining a better understanding are not possible for obvious reasons of security and safety.</p>
<p>The motivation behind SLEW is the ongoing transformation of the energy system, which is making the system more and more complex.
Hence, understanding new phenomena and underlying interactions is getting more challenging, also because real experimental
activities for obtaining a better understanding are not possible for obvious reasons of security and safety.</p>
<p>The SLEW platform gives the possibility to perform experiments in a virtual infrastructure and to learn from the execution
of complex models. It provides a virtual power engineering world where complex phenomena take place while users can interact
with the system in real time.</p>
<p>The SLEW platform gives the possibility to perform experiments in a virtual infrastructure and to learn from the execution
of complex models. It provides a virtual power engineering world where complex phenomena take place while users can interact
with the system in real time.</p>
<p>The platform is based on the real-time simulation tool DPsim developed in RWTH,
which is available as open-source software project to the power engineering community. Besides, it integrates the interactive
computing environment Jupyter for further analysis of experimental results.</p>
<p>The platform is based on the real-time simulation tool DPsim developed in RWTH,
which is available as open-source software project to the power engineering community. Besides, it integrates the interactive
computing environment Jupyter for further analysis of experimental results.</p>
<h3>Contacts</h3>
<ul>
<li><a href="mailto:jdinkelbach@eonerc.rwth-aachen.de">Jan Dinkelbach</a></li>
<li><a href="mailto:ikoester@eonerc.rwth-aachen.de">Iris Köster</a></li>
<li><a href="mailto:post@steffenvogel.de">Steffen Vogel</a></li>
</ul>
<h3>Contacts</h3>
<ul>
<li><a href="mailto:jdinkelbach@eonerc.rwth-aachen.de">Jan Dinkelbach</a></li>
<li><a href="mailto:ikoester@eonerc.rwth-aachen.de">Iris Köster</a></li>
<li><a href="mailto:post@steffenvogel.de">Steffen Vogel</a></li>
</ul>
<h3>Credits</h3>
<div>
<img id="images" height={70} src={require('./img/eonerc_rwth.svg').default} alt="Logo EONERC"/>
<img id="images" height={70} src={require('./img/erigrid2.png').default} alt="Logo Erigrid"/>
<img id="images" height={70} src={require('./img/european_commission.svg').default} alt="Logo EU"/>
</div>
</div>)
<h3>Credits</h3>
<div>
<img id="images" height={70} src={require('./img/eonerc_rwth.svg').default} alt="Logo EONERC" />
<img id="images" height={70} src={require('./img/erigrid2.png').default} alt="Logo Erigrid" />
<img id="images" height={70} src={require('./img/european_commission.svg').default} alt="Logo EU" />
</div>
</div>)
}
export function slew_welcome() {
return (
<div >
<h1>Welcome!</h1>
<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>
</div>)
<div >
<h1>Welcome!</h1>
<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>
</div>)
}

View file

@ -16,29 +16,29 @@
******************************************************************************/
const slew_values = {
title: 'SLEW',
subtitle: 'Second Life for Energiewende',
icon: "slew_blue.png",
logo: "slew_logo.png",
pages: {
home: true,
scenarios: true,
infrastructure: false,
account: false,
api: false
},
links: {
"DPsim Simulator": "https://dpsim.fein-aachen.org",
"VILLASframework": "https://villas.fein-aachen.org/doc"
},
style: {
background: 'rgba(207,209,210, 1)',
highlights: 'rgba(0,84,159, 0.75)',
main: 'rgba(80,80,80, 1)',
secondaryText: 'rgba(80,80,80, 0.9)',
fontFamily: "Roboto, sans-serif",
borderRadius: "10px"
}
title: 'SLEW',
subtitle: 'Second Life for Energiewende',
icon: "slew_blue.png",
logo: "slew_logo.png",
pages: {
home: true,
scenarios: true,
infrastructure: false,
account: false,
api: false
},
links: {
"DPsim Simulator": "https://dpsim.fein-aachen.org",
"VILLASframework": "https://villas.fein-aachen.org/doc"
},
style: {
background: 'rgba(207,209,210, 1)',
highlights: 'rgba(0,84,159, 0.75)',
main: 'rgba(80,80,80, 1)',
secondaryText: 'rgba(80,80,80, 0.9)',
fontFamily: "Roboto, sans-serif",
borderRadius: "10px"
}
}
export default slew_values;

View file

@ -1,4 +1,4 @@
#images {
margin-left: 2em;
margin-right: 2em
}
}

View file

@ -14,39 +14,39 @@
* You should have received a copy of the GNU General Public License
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import React from 'react';
import React from 'react';
export function template_home() {
return (
<div className="home-container">
<img style={{ height: 120, float: 'right' }} src={require('./img/template_logo.svg').default} alt="Template Logo" />
<h1>Home</h1>
<p>
Welcome to <b>BRAND</b>!
</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>)
}
export function template_welcome() {
return (
<div >
<h1>Welcome!</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>)
}
export function template_footer() {
return (
<footer className="app-footer">
<p>HELLO WORLD, THIS IS MY FOOTER!</p>
</footer>)
}
export function template_home() {
return (
<div className="home-container">
<img style={{ height: 120, float: 'right' }} src={require('./img/template_logo.svg').default} alt="Template Logo" />
<h1>Home</h1>
<p>
Welcome to <b>BRAND</b>!
</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>)
}
export function template_welcome() {
return (
<div >
<h1>Welcome!</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>)
}
export function template_footer() {
return (
<footer className="app-footer">
<p>HELLO WORLD, THIS IS MY FOOTER!</p>
</footer>)
}

View file

@ -15,30 +15,30 @@
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
const template_values = {
title: 'Template',
subtitle: 'change me!',
icon: "template_logo.svg",
pages: {
home: true,
scenarios: true,
infrastructure: true,
users: true,
account: true,
api: true
},
links: {
"Google": "https://www.google.com/",
"StackOverFlow": "https://stackoverflow.com/"
},
style: {
background: 'rgba(50,30,90, 0.6)',
highlights: 'rgba(0,230,5, 0.75)',
main: 'rgba(255,0,0, 1)',
secondaryText: 'rgba(0,0,100, 0.8)',
fontFamily: "Comic Sans, sans-serif",
borderRadius: "60px"
}
}
const template_values = {
title: 'Template',
subtitle: 'change me!',
icon: "template_logo.svg",
pages: {
home: true,
scenarios: true,
infrastructure: true,
users: true,
account: true,
api: true
},
links: {
"Google": "https://www.google.com/",
"StackOverFlow": "https://stackoverflow.com/"
},
style: {
background: 'rgba(50,30,90, 0.6)',
highlights: 'rgba(0,230,5, 0.75)',
main: 'rgba(255,0,0, 1)',
secondaryText: 'rgba(0,0,100, 0.8)',
fontFamily: "Comic Sans, sans-serif",
borderRadius: "60px"
}
}
export default template_values;
export default template_values;

View file

@ -22,14 +22,14 @@ import { NavLink } from 'react-router-dom';
export function villasweb_welcome() {
let url = 'https://villas.fein-aachen.org/doc/web.html';
return (
<div >
<h1>Welcome!</h1>
<p>VILLASweb is a tool to configure real-time co-simulations and display simulation real-time data.
It enables the management and monitoring of simulators, models and simulations.</p>
<span className='solid-button'>
<Button key="learnmore" onClick={e => window.location = url }>Learn more</Button>
</span>
</div>)
<div >
<h1>Welcome!</h1>
<p>VILLASweb is a tool to configure real-time co-simulations and display simulation real-time data.
It enables the management and monitoring of simulators, models and simulations.</p>
<span className='solid-button'>
<Button key="learnmore" onClick={e => window.location = url}>Learn more</Button>
</span>
</div>)
}
export function villasweb_home(title, username, userid, role) {

View file

@ -16,22 +16,22 @@
******************************************************************************/
const villasweb_values = {
title: 'VILLASweb',
subtitle: 'ACS',
logo: 'villas_web.svg',
pages: {
home: true,
scenarios: true,
infrastructure: true,
account: true,
api: true,
},
style: {
background: '#6EA2B0',
highlights: '#527984',
main: '#4d4d4d',
secondaryText: '#818181',
}
title: 'VILLASweb',
subtitle: 'ACS',
logo: 'villas_web.svg',
pages: {
home: true,
scenarios: true,
infrastructure: true,
account: true,
api: true,
},
style: {
background: '#6EA2B0',
highlights: '#527984',
main: '#4d4d4d',
secondaryText: '#818181',
}
}
export default villasweb_values;