Add conditional topology sidebar

10 files changed, 88 insertions, 8 deletions

diff --git a/src/components/map/MapStage.js b/src/components/map/MapStage.js
index 879c7c39..644b4c54 100644
--- a/src/components/map/MapStage.js
+++ b/src/components/map/MapStage.js
@@ -2,6 +2,7 @@ import React from "react";
 import {Group, Layer, Stage} from "react-konva";
 import DatacenterContainer from "../../containers/map/DatacenterContainer";
 import jQuery from "../../util/jquery";
+import {NAVBAR_HEIGHT} from "../navigation/Navbar";
 import Backdrop from "./elements/Backdrop";
 import GridGroup from "./groups/GridGroup";
 import {MAP_SIZE_IN_PIXELS} from "./MapConstants";
@@ -25,7 +26,7 @@ class MapStage extends React.Component {
     }
 
     updateDimensions() {
-        this.setState({width: jQuery(window).width(), height: jQuery(window).height()});
+        this.setState({width: jQuery(window).width(), height: jQuery(window).height() - NAVBAR_HEIGHT});
     }
 
     dragBoundFunc(pos) {
diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js
index 7c650e5d..68fa2ab1 100644
--- a/src/components/navigation/Navbar.js
+++ b/src/components/navigation/Navbar.js
@@ -7,6 +7,8 @@ import Logout from "../../containers/auth/Logout";
 import ProfileName from "../../containers/auth/ProfileName";
 import "./Navbar.css";
 
+export const NAVBAR_HEIGHT = 62;
+
 export const NavItem = withRouter(props => <NavItemWithoutRoute {...props}/>);
 export const LoggedInSection = withRouter(props => <LoggedInSectionWithoutRoute {...props}/>);
 
diff --git a/src/components/navigation/Navbar.sass b/src/components/navigation/Navbar.sass
index 8e95b9c6..94c52936 100644
--- a/src/components/navigation/Navbar.sass
+++ b/src/components/navigation/Navbar.sass
@@ -9,14 +9,7 @@
 
 .opendc-brand
   display: inline-block
-  //float: left
-  //margin-left: $global-padding
-
-  //padding: 0 10px
-
-  //cursor: pointer
   color: $gray-very-dark
-  //height: 100%
 
   +transition(background, $transition-length)
 
diff --git a/src/components/sidebars/BuildingSidebarContent.js b/src/components/sidebars/BuildingSidebarContent.js
new file mode 100644
index 00000000..44688bb8
--- /dev/null
+++ b/src/components/sidebars/BuildingSidebarContent.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+const BuildingSidebarContent = () => {
+    return (
+        <p>Test</p>
+    );
+};
+
+export default BuildingSidebarContent;
diff --git a/src/components/sidebars/Sidebar.js b/src/components/sidebars/Sidebar.js
new file mode 100644
index 00000000..be957956
--- /dev/null
+++ b/src/components/sidebars/Sidebar.js
@@ -0,0 +1,11 @@
+import classNames from "classnames";
+import React from "react";
+import "./Sidebar.css";
+
+const Sidebar = ({isRight, children}) => (
+    <div className={classNames("sidebar p-3", {"sidebar-right": isRight})}>
+        {children}
+    </div>
+);
+
+export default Sidebar;
diff --git a/src/components/sidebars/Sidebar.sass b/src/components/sidebars/Sidebar.sass
new file mode 100644
index 00000000..79ea3c27
--- /dev/null
+++ b/src/components/sidebars/Sidebar.sass
@@ -0,0 +1,20 @@
+@import ../../style-globals/_variables.sass
+
+.sidebar
+  position: absolute
+  top: 0
+  left: 0
+  width: 300px
+  height: 100%
+
+  z-index: 100
+  background: white
+
+  border-right: $gray-semi-dark 1px solid
+
+.sidebar-right
+  left: auto
+  right: 0
+
+  border-left: $gray-semi-dark 1px solid
+  border-right: none
diff --git a/src/components/sidebars/TopologySidebarComponent.js b/src/components/sidebars/TopologySidebarComponent.js
new file mode 100644
index 00000000..371463d1
--- /dev/null
+++ b/src/components/sidebars/TopologySidebarComponent.js
@@ -0,0 +1,27 @@
+import React from "react";
+import BuildingSidebarContent from "./BuildingSidebarContent";
+import Sidebar from "./Sidebar";
+
+const TopologySidebarComponent = ({interactionLevel}) => {
+    let sidebarHeading;
+    let sidebarContent;
+
+    switch (interactionLevel.mode) {
+        case "BUILDING":
+            sidebarHeading = "Building";
+            sidebarContent = <BuildingSidebarContent/>;
+            break;
+        default:
+            sidebarHeading = "Error";
+            sidebarContent = "Missing Content";
+    }
+
+    return (
+        <Sidebar isRight={true}>
+            <h3>{sidebarHeading}</h3>
+            {sidebarContent}
+        </Sidebar>
+    );
+};
+
+export default TopologySidebarComponent;
diff --git a/src/containers/sidebars/TopologySidebar.js b/src/containers/sidebars/TopologySidebar.js
new file mode 100644
index 00000000..1909443a
--- /dev/null
+++ b/src/containers/sidebars/TopologySidebar.js
@@ -0,0 +1,14 @@
+import {connect} from "react-redux";
+import TopologySidebarComponent from "../../components/sidebars/TopologySidebarComponent";
+
+const mapStateToProps = state => {
+    return {
+        interactionLevel: state.interactionLevel
+    };
+};
+
+const TopologySidebar = connect(
+    mapStateToProps
+)(TopologySidebarComponent);
+
+export default TopologySidebar;
diff --git a/src/index.sass b/src/index.sass
index 76383352..18d14843 100644
--- a/src/index.sass
+++ b/src/index.sass
@@ -8,6 +8,7 @@ html, body, #root
   background: #eee
 
 .full-height
+  position: relative
   height: 100%
 
 .page-container
diff --git a/src/pages/App.js b/src/pages/App.js
index ade2536d..4f973ab7 100644
--- a/src/pages/App.js
+++ b/src/pages/App.js
@@ -5,6 +5,7 @@ import {openSimulationSucceeded} from "../actions/simulations";
 import {fetchLatestDatacenter} from "../actions/topology";
 import MapStage from "../components/map/MapStage";
 import AppNavbar from "../components/navigation/AppNavbar";
+import TopologySidebar from "../containers/sidebars/TopologySidebar";
 
 class AppContainer extends React.Component {
     static propTypes = {
@@ -22,6 +23,7 @@ class AppContainer extends React.Component {
                 <AppNavbar/>
                 <div className="full-height">
                     <MapStage/>
+                    <TopologySidebar/>
                 </div>
             </div>
         );