From 0f18b10c3f75f5cff012f2a0321d8d2b83108fe0 Mon Sep 17 00:00:00 2001
From: Mattia Mancini <mancini@astron.nl>
Date: Fri, 21 Sep 2018 14:04:56 +0000
Subject: [PATCH] OSB-6: created barebone setup of the webpage
---
.../MDB_WebView/maintenancedb_view/src/App.js | 34 ++++++++++++-------
.../src/components/header.css | 6 +---
.../src/components/header.js | 26 +++++++++++---
.../src/pages/LandingPage.js | 6 +++-
4 files changed, 49 insertions(+), 23 deletions(-)
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js
index f5aeda75e01..9ab0dca7a23 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js
@@ -1,7 +1,8 @@
import React, { Component } from 'react';
import LandingPage from './pages/LandingPage.js'
-import StationTestPage from './pages/StationTestPage.js'
-import RTSMPage from './pages/RTSMPage.js'
+import StationOverviewPage from './pages/StationOverviewPage.js'
+import TilesPage from './pages/TilesPage.js'
+import DetailsPage from './pages/DetailsPage.js'
import Header from './components/header.js'
@@ -14,15 +15,24 @@ import {
-const App = () => (
-<Router>
- <div>
- <Header />
- <Route exact path="/" component={LandingPage}/>
- <Route exact path="/stationtest/:page?" component={StationTestPage}/>
- <Route exact path="/rtsm" component={RTSMPage}/>
- </div>
-</Router>
-)
+class App extends Component {
+ constructor(props){
+ super(props);
+ }
+
+ render(){
+ console.log(this.props.location);
+ return (
+ <Router>
+ <div>
+ <Route exact path="/" component={LandingPage}/>
+ <Route exact path="/station_overview" component={StationOverviewPage}/>
+ <Route exact path="/tiles" component={TilesPage}/>
+ <Route exact path="/details" component={DetailsPage}/>
+ </div>
+ </Router>
+ );
+ }
+}
export default App;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css
index bf158f950d7..e22f2097ebf 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css
@@ -1,14 +1,10 @@
.header {
- background-color: #2590ff;
+ background-color: rgba(111,84,153,1);
padding: 20px;
color: white;
}
.lofar {
- height:1.4em;
- font-size: 1.8em;
font-weight: bold;
- color: #d16af5;
font-style: normal;
- text-shadow: -.05em -.03em white;
}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js
index 4679f33fce0..1fc15124b9f 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js
@@ -24,16 +24,32 @@ class Header extends Component {
});
}
+ check_status(item){
+ console.log(this.props.active_page.pathname)
+ if (this.props.active_page.pathname === item){
+ return "active"
+ }
+ }
+
render() {
return (
- <Navbar className="header" dark expand="md">
- <NavbarBrand><em className='lofar'>LOFAR</em> Tests Overview</NavbarBrand>
+ <Navbar className="header" dark expand="lg">
+ <NavbarBrand><h1><em className='lofar'>LOFAR</em> Station monitor</h1></NavbarBrand>
<NavbarToggler onClick={() => this.toggle()} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
- <NavItem><NavLink tag={Link} to="/">Home</NavLink></NavItem>
- <NavItem><NavLink tag={Link} to="/stationtest">Station Tests</NavLink></NavItem>
- <NavItem><NavLink tag={Link} to="/rtsm">RTSM</NavLink></NavItem>
+ <NavItem className={this.check_status("/")}>
+ <NavLink tag={Link} to="/"><h3>Dashboard</h3></NavLink>
+ </NavItem>
+ <NavItem className={this.check_status("/station_overview")}>
+ <NavLink tag={Link} to="/station_overview"><h3>Station Overview</h3></NavLink>
+ </NavItem>
+ <NavItem className={this.check_status("/tiles")}>
+ <NavLink tag={Link} to="/tiles"><h3>Tiles</h3></NavLink>
+ </NavItem>
+ <NavItem className={this.check_status("/details")}>
+ <NavLink tag={Link} to="/details"><h3>Details</h3></NavLink></NavItem>
+
</Nav>
</Collapse>
</Navbar>
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
index aa107c51da0..7e1cf0036fc 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
@@ -1,9 +1,13 @@
import React, { Component } from 'react';
+import Header from '../components/header.js'
class LandingPage extends Component {
render() {
return (
- <div>Home sweet home</div>
+ <div>
+ <Header active_page={this.props.location} />
+ <div>Home sweet home</div>
+ </div>
);
}
}
--
GitLab