Add experiments route

2 files changed, 46 insertions, 8 deletions

diff --git a/src/components/map/MapStageComponent.js b/src/components/map/MapStageComponent.js
index 10d84948..62d8687c 100644
--- a/src/components/map/MapStageComponent.js
+++ b/src/components/map/MapStageComponent.js
@@ -20,18 +20,25 @@ class MapStageComponent extends React.Component {
         mouseY: 0
     };
 
+    constructor() {
+        super();
+
+        this.updateDimensions = this.updateDimensions.bind(this);
+        this.updateScale = this.updateScale.bind(this);
+    }
+
     componentWillMount() {
         this.updateDimensions();
     }
 
     componentDidMount() {
-        window.addEventListener("resize", this.updateDimensions.bind(this));
-        window.addEventListener("wheel", this.updateScale.bind(this));
+        window.addEventListener("resize", this.updateDimensions);
+        window.addEventListener("wheel", this.updateScale);
     }
 
     componentWillUnmount() {
-        window.removeEventListener("resize", this.updateDimensions.bind(this));
-        window.removeEventListener("wheel", this.updateScale.bind(this));
+        window.removeEventListener("resize", this.updateDimensions);
+        window.removeEventListener("wheel", this.updateScale);
     }
 
     updateDimensions() {
diff --git a/src/components/navigation/AppNavbar.js b/src/components/navigation/AppNavbar.js
index 83959f08..94eaa7fa 100644
--- a/src/components/navigation/AppNavbar.js
+++ b/src/components/navigation/AppNavbar.js
@@ -1,21 +1,52 @@
 import React from 'react';
+import FontAwesome from "react-fontawesome";
 import Mailto from "react-mailto";
 import {Link} from "react-router-dom";
 import Navbar, {NavItem} from "./Navbar";
 import "./Navbar.css";
 
-const AppNavbar = () => (
+const AppNavbar = ({simulationId, inSimulation}) => (
     <Navbar>
+        {inSimulation ?
+            <NavItem route={"/simulations/" + simulationId}>
+                <Link
+                    className="nav-link"
+                    title="Build"
+                    to={"/simulations/" + simulationId}>
+                    <FontAwesome name="industry" className="mr-1"/>
+                    Build
+                </Link>
+            </NavItem> :
+            undefined
+        }
+        {inSimulation ?
+            <NavItem route={"/simulations/" + simulationId + "/experiments"}>
+                <Link
+                    className="nav-link"
+                    title="Simulate"
+                    to={"/simulations/" + simulationId + "/experiments"}>
+                    <FontAwesome name="play" className="mr-1"/>
+                    Simulate
+                </Link>
+            </NavItem> :
+            undefined
+        }
         <NavItem route="/simulations">
-            <Link className="nav-link simulations" title="Simulations" to="/simulations">Simulations</Link>
+            <Link
+                className="nav-link"
+                title="My Simulations"
+                to="/simulations">
+                <FontAwesome name="list" className="mr-1"/>
+                My Simulations
+            </Link>
         </NavItem>
         <NavItem route="email">
-            <Mailto className="nav-link support" title="Support" email="opendc@atlarge-research.com"
+            <Mailto className="nav-link" title="Support" email="opendc@atlarge-research.com"
                     headers={{subject: "OpenDC Support"}}>
+                <FontAwesome name="envelope" className="mr-1"/>
                 Support
             </Mailto>
         </NavItem>
-
     </Navbar>
 );