simulation panel now opens, it still misses the content

smart-hut/src/components/HeaderController.js

@@ -11,6 +11,7 @@ import { Segment, Image } from "semantic-ui-react";
 import { RemoteService } from "../remote";
 import { withRouter } from "react-router-dom";
 import { connect } from "react-redux";
+import SimulationPanel from "./SimulationPanel";
 
 const IconHomeImage = () => (
   <Image
@@ -27,7 +28,7 @@ const TitleImage = () => <Image src="sm_logo.png" size="medium" centered />;
 export class MyHeader extends React.Component {
   constructor(props) {
     super(props);
-
+    this.state = { simulationPanel: undefined };
     this.getInfo();
     this.logout = this.logout.bind(this);
   }
@@ -52,6 +53,19 @@ export class MyHeader extends React.Component {
       .catch((err) => console.error("Camera enabled", err));
   }
 
+  openSimulationPanel = () => {
+    this.setState((state) => {
+      return { simulationPanel: true };
+    });
+  };
+
+  closeSimulationPanel = () => {
+    this.setState((state) => {
+      return { simulationPanel: undefined };
+    });
+  };
+
+
   render() {
     return (
       <div>
@@ -66,7 +80,13 @@ export class MyHeader extends React.Component {
               </Grid.Row>
               <Divider />
               <Grid.Row>
-                <Button > Similuation Panel </Button>
+                <div onClick={this.openSimulationPanel}>
+                  <Button > Similuation Panel </Button>
+                </div>
+                <SimulationPanel 
+                  simulationPanel={this.state.simulationPanel}
+                  closeSimulationPanel={this.closeSimulationPanel}
+                />
               </Grid.Row>
               </Grid.Column>
               <Grid.Column>
@@ -114,20 +134,23 @@ export class MyHeader extends React.Component {
                 <IconHomeImage />
               </Grid.Column>
               <Grid.Column>
-                <Label as="a" image color="black">
-                  <img alt="SmartHut logo" src="smart-home.png" />
-                  {this.props.username}
-                </Label>
+                <Grid.Row>
+                  <Label as="a" image color="black">
+                    <img alt="SmartHut logo" src="smart-home.png" />
+                    {this.props.username}
+                  </Label>
+                </Grid.Row>
                 <Divider />
-                <Button onClick={this.logout}>Logout</Button>
-                <Segment
-                  compact
-                  style={{
-                    margin: "auto",
-                    marginTop: "1em",
-                    textAlign: "center",
-                  }}
-                >
+                <Grid.Row>
+                  <Button onClick={this.logout}>Logout</Button>
+                  <Segment
+                    compact
+                    style={{
+                      margin: "auto",
+                      marginTop: "1em",
+                      textAlign: "center",
+                    }}
+                  >
                 <Divider />
                   <Checkbox
                     label={<label>Share cameras</label>}
@@ -136,6 +159,7 @@ export class MyHeader extends React.Component {
                     onChange={(e, val) => this.setCameraEnabled(val.checked)}
                   />
                 </Segment>
+                </Grid.Row>
               </Grid.Column>
             </Grid.Row>
           </Grid>

smart-hut/src/components/SimulationPanel.js

@@ -0,0 +1,42 @@
+import React from "react";
+import Modal from "react-modal";
+import { Button } from "semantic-ui-react";
+
+const ReactModalPortal = {
+  opacity: 0
+};
+
+const ReactModal__Overlay = {
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  transition: 'opacity 200ms ease-in-out'
+};
+
+
+const modal = {
+  background: 'grey',
+  color: 'white',
+  maxWidth: '2rem',
+  outline: 'none',
+  padding: '2rem',
+  textAlign: 'center'
+};
+
+const SimulationPanel = (props) => (
+  <Modal
+    isOpen={!!props.simulationPanel}
+    contentLabel="Simulation Panel"
+    onRequestClose={props.closeSimulationPanel}
+    style={ReactModalPortal,ReactModal__Overlay, modal}
+  >
+    {props.simulationPanel && (
+     <p> hey man </p>
+    )}
+    <Button fluid primary onClick={props.closeSimulationPanel}>
+     Exit
+    </Button>
+  </Modal>
+);
+
+export default SimulationPanel;