From f3dbecbf55832df686d6969756640f6f5853f996 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Tue, 12 Sep 2017 16:50:45 +0200
Subject: Add experiments route

---
 src/components/map/MapStageComponent.js | 15 +++++++++----
 src/components/navigation/AppNavbar.js  | 39 +++++++++++++++++++++++++++++----
 src/pages/App.js                        |  4 ++--
 src/pages/Experiments.js                | 36 ++++++++++++++++++++++++++++++
 src/pages/Profile.js                    |  2 +-
 src/pages/Simulations.js                |  4 +---
 src/routes/index.js                     |  4 ++++
 7 files changed, 90 insertions(+), 14 deletions(-)
 create mode 100644 src/pages/Experiments.js

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>
 );
 
diff --git a/src/pages/App.js b/src/pages/App.js
index 21b3c445..8254853d 100644
--- a/src/pages/App.js
+++ b/src/pages/App.js
@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import React from 'react';
+import React from "react";
 import {connect} from "react-redux";
 import {ShortcutManager} from "react-shortcuts";
 import {openSimulationSucceeded} from "../actions/simulations";
@@ -40,7 +40,7 @@ class AppContainer extends React.Component {
     render() {
         return (
             <div className="page-container full-height">
-                <AppNavbar/>
+                <AppNavbar simulationId={this.props.simulationId} inSimulation={true}/>
                 {this.props.datacenterIsLoading ?
                     <div className="full-height d-flex align-items-center justify-content-center">
                         <LoadingScreen/>
diff --git a/src/pages/Experiments.js b/src/pages/Experiments.js
new file mode 100644
index 00000000..b35916e5
--- /dev/null
+++ b/src/pages/Experiments.js
@@ -0,0 +1,36 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {connect} from "react-redux";
+import AppNavbar from "../components/navigation/AppNavbar";
+
+class ExperimentsContainer extends React.Component {
+    static propTypes = {
+        simulationId: PropTypes.number.isRequired,
+    };
+
+    componentDidMount() {
+        // TODO fetch experiments
+    }
+
+    render() {
+        return (
+            <div className="full-height">
+                <AppNavbar simulationId={this.props.simulationId} inSimulation={true}/>
+                <div className="container text-page-container full-height">
+                    Test
+                </div>
+            </div>
+        );
+    }
+}
+
+const mapDispatchToProps = dispatch => {
+    return {};
+};
+
+const Experiments = connect(
+    undefined,
+    mapDispatchToProps
+)(ExperimentsContainer);
+
+export default Experiments;
diff --git a/src/pages/Profile.js b/src/pages/Profile.js
index ca09d0f4..c8805c6f 100644
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@@ -6,7 +6,7 @@ import DeleteProfileModal from "../containers/modals/DeleteProfileModal";
 
 const ProfileContainer = ({onDelete}) => (
     <div className="full-height">
-        <AppNavbar/>
+        <AppNavbar inSimulation={false}/>
         <div className="container text-page-container full-height">
             <button className="btn btn-danger" onClick={onDelete}>Delete my account on OpenDC</button>
             <p>
diff --git a/src/pages/Simulations.js b/src/pages/Simulations.js
index c04c74ae..33e04a9d 100644
--- a/src/pages/Simulations.js
+++ b/src/pages/Simulations.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import {connect} from "react-redux";
 import {openNewSimulationModal} from "../actions/modals/simulations";
-import {addSimulation} from "../actions/simulations";
 import {fetchAuthorizationsOfCurrentUser} from "../actions/users";
 import AppNavbar from "../components/navigation/AppNavbar";
 import SimulationFilterPanel from "../components/simulations/FilterPanel";
@@ -17,7 +16,7 @@ class SimulationsContainer extends React.Component {
     render() {
         return (
             <div className="full-height">
-                <AppNavbar/>
+                <AppNavbar inSimulation={false}/>
                 <div className="container text-page-container full-height">
                     <SimulationFilterPanel/>
                     <VisibleSimulationList/>
@@ -33,7 +32,6 @@ const mapDispatchToProps = dispatch => {
     return {
         fetchAuthorizationsOfCurrentUser: () => dispatch(fetchAuthorizationsOfCurrentUser()),
         openNewSimulationModal: () => dispatch(openNewSimulationModal()),
-        addSimulation: (text) => dispatch(addSimulation(text)),
     };
 };
 
diff --git a/src/routes/index.js b/src/routes/index.js
index deaf8ded..8a155cb0 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import {BrowserRouter, Redirect, Route, Switch} from "react-router-dom";
 import {userIsLoggedIn} from "../auth/index";
 import App from "../pages/App";
+import Experiments from "../pages/Experiments";
 import Home from "../pages/Home";
 import NotFound from "../pages/NotFound";
 import Profile from "../pages/Profile";
@@ -10,6 +11,8 @@ import Simulations from "../pages/Simulations";
 const ProtectedComponent = (component) => () => userIsLoggedIn() ? component : <Redirect to="/"/>;
 const AppComponent = ({match}) => userIsLoggedIn() ?
     <App simulationId={parseInt(match.params.id, 10)}/> : <Redirect to="/"/>;
+const ExperimentsComponent = ({match}) => userIsLoggedIn() ?
+    <Experiments simulationId={parseInt(match.params.id, 10)}/> : <Redirect to="/"/>;
 
 const Routes = () => (
     <BrowserRouter>
@@ -17,6 +20,7 @@ const Routes = () => (
             <Route exact path="/" component={Home}/>
             <Route exact path="/simulations" render={ProtectedComponent(<Simulations/>)}/>
             <Route exact path="/simulations/:id" component={AppComponent}/>
+            <Route exact path="/simulations/:id/experiments" component={ExperimentsComponent}/>
             <Route exact path="/profile" render={ProtectedComponent(<Profile/>)}/>
             <Route path="/*" component={NotFound}/>
         </Switch>
-- 
cgit v1.2.3