summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/map/MapStageComponent.js15
-rw-r--r--src/components/navigation/AppNavbar.js39
-rw-r--r--src/pages/App.js4
-rw-r--r--src/pages/Experiments.js36
-rw-r--r--src/pages/Profile.js2
-rw-r--r--src/pages/Simulations.js4
-rw-r--r--src/routes/index.js4
7 files changed, 90 insertions, 14 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>
);
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>
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 14:13:30 +0000