OSB-6: created barebone setup of the webpage

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js

 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;

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css

 .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;
 }

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>

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js

 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>
     );
   }
 }