frontend/smart-hut/src/components/SimulationPanel.js

import React from "react";
import Modal from "react-modal";
import SliderTemperature from "./SliderTemperature.js";
import SliderTempRange from "./SliderTempRange.js";
import SliderHumidty from "./SliderHumidity.js";
import SliderLight from "./SliderLight.js";
import SliderLightRange from "./SliderLightRange.js";
import SliderMotion from "./SliderMotion.js";
import DropdownSimulation from "./DropdownSimulation.js";
import {
    Grid,
    Divider,
    Button,
    Label,
    Responsive,
    Checkbox,
    Image,
    GridColumn, 
    Header,
    Segment
  } from "semantic-ui-react";


const SimulationPanel = (props) => (
  <Modal
    isOpen={!!props.simulationPanel}
    contentLabel="Simulation Panel"
    onRequestClose={props.closeSimulationPanel}
    // style={ReactModalPortal,ReactModal__Overlay, modal}
    style={{
        overlay: {
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0,0,0,0.5)'
        },
        content: {
          position: 'absolute',
          top: '40px',
          left: '40px',
          right: '40px',
          bottom: '40px',
          border: '1px solid #ccc',
          background: '#fff',
          overflow: 'auto',
          WebkitOverflowScrolling: 'touch',
          borderRadius: '4px',
          outline: 'none',
          padding: '20px',
          backgroundColor: 'rgb(65, 67, 69)'
        }
      }}
  >
    {props.simulationPanel}
    <Grid celled>

    {/* TITLE */}
    <Grid.Row  textAlign="center">
      <h1 style={{ color: "white", padding:"1rem", fontFamily: "Arial"}}>
        Welcome in the Simulation Panel
      </h1>
    </Grid.Row>

    {/* TEMPERATURE SENSOR */}
    <Grid.Row>
      <Grid.Column width={6} textAlign="center">
      <Divider 
        style={{ 
          marginTop: "3rem",
          marginBottom: "auto"
      }}
      />
        <Image 
            src='./../img/thermo-simulation.png' 
            style={{ 
                width: "60px", 
                height: "auto", 
                display:"block", 
                marginLeft:"auto", 
                marginRight:"auto",
                marginTop: "1rem",
                marginBottom: "1rem"
            }}
        />
        <p style={{ color: "white", padding:"0.5rem"}}> 
            Temperature Sensor
        </p>
        <Divider />
      </Grid.Column>

    
      <Grid.Column width={10} textAlign="center">
    
        <div
            style={{ 
                display: "block",
                marginLeft: "30%",
            }}
        >
        <SliderTemperature />
        </div>
        <Divider />
        <div
          style={{ 
              display: "block",
              marginLeft: "30%",
          }}
        >
        <SliderTempRange/>
        </div>
    </Grid.Column>
    </Grid.Row>

    {/*  HUMIDTY SENSOR */}
    <Grid.Row>
      <Grid.Column width={6} textAlign="center">
      <Divider 
        style={{ 
          marginTop: "3rem",
          marginBottom: "auto"
      }}
      />
        <Image 
            src='./../img/humidity-simulation.png' 
            style={{ 
                width: "60px", 
                height: "auto", 
                display:"block", 
                marginLeft:"auto", 
                marginRight:"auto",
                marginTop: "1rem",
                marginBottom: "1rem"
            }}
        />
        <p style={{ color: "white", padding:"0.5rem"}}> 
            Humidity Sensor
        </p>
        <Divider />
      </Grid.Column>

    
      <Grid.Column width={10} textAlign="center">
    
        <div
            style={{ 
                display: "block",
                marginLeft: "30%",
            }}
        >
        <SliderHumidty />
        </div>
        <Divider />
        <div
          style={{ 
              display: "block",
              marginLeft: "30%",
          }}
        >
        <SliderTempRange/>
        </div>
    </Grid.Column>
    </Grid.Row>

     {/*  LIGHT SENSOR */}
     <Grid.Row>
      <Grid.Column width={6} textAlign="center">
      <Divider 
        style={{ 
          marginTop: "3rem",
          marginBottom: "auto"
      }}
      />
        <Image 
            src='./../img/light-simulation.png' 
            style={{ 
                width: "60px", 
                height: "auto", 
                display:"block", 
                marginLeft:"auto", 
                marginRight:"auto",
                marginTop: "1rem",
                marginBottom: "1rem"
            }}
        />
        <p style={{ color: "white", padding:"0.5rem"}}> 
            Light Sensor
        </p>
        <Divider />
      </Grid.Column>

    
      <Grid.Column width={10} textAlign="center">
    
        <div
            style={{ 
                display: "block",
                marginLeft: "30%",
            }}
        >
        <SliderLight />
        </div>
        <Divider />
        <div
          style={{ 
              display: "block",
              marginLeft: "30%",
          }}
        >
        <SliderLightRange/>
        </div>
    </Grid.Column>
    </Grid.Row>

     {/*  MOTION SENSOR */}
     <Grid.Row>
      <Grid.Column width={6} textAlign="center">
      <Divider 
        style={{ 
          marginTop: "3rem",
          marginBottom: "auto"
      }}
      />
        <Image 
            src='./../img/motion-simulation.png' 
            style={{ 
                width: "60px", 
                height: "auto", 
                display:"block", 
                marginLeft:"auto", 
                marginRight:"auto",
                marginTop: "1rem",
                marginBottom: "1rem"
            }}
        />
        <p style={{ color: "white", padding:"0.5rem"}}> 
           Motion Sensor
        </p>
        <Divider />
      </Grid.Column>

    
      <Grid.Column width={10} textAlign="center">
    
        <div
            style={{ 
                display: "block",
                marginLeft: "30%",
            }}
        >
        <SliderMotion />
        </div>
        <Divider />
        <div
          style={{ 
              display: "block",
              marginLeft: "30%",
          }}
        >
        <SliderTempRange/>
        </div>
    </Grid.Column>
    </Grid.Row>
    

    </Grid>
  </Modal>
);

export default SimulationPanel;