smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

update branch

Browse source
This commit is contained in:
britea 2020-05-23 16:11:25 +02:00
parent 747bd370cc
commit a184333579
8 changed files with 369 additions and 363 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
smart-hut/src/components/DropdownSimulation.js
View file

@ -1,15 +1,15 @@
import React from 'react' import React from 'react';
import { Dropdown } from 'semantic-ui-react' import { Dropdown } from 'semantic-ui-react';
const options = [ const options = [
{ key: 'Living Room', text: 'Living Room', value: 'Living Room' }, { key: 'Living Room', text: 'Living Room', value: 'Living Room' },
{ key: 'Kitchen', text: 'Kitchen', value: 'Kitchen' }, { key: 'Kitchen', text: 'Kitchen', value: 'Kitchen' },
{ key: 'Garden', text: 'Garden', value: 'Garden' }, { key: 'Garden', text: 'Garden', value: 'Garden' },
{ key: 'Bedroom 1', text: 'Bedroom 1', value: 'Bedroom 1' }, { key: 'Bedroom 1', text: 'Bedroom 1', value: 'Bedroom 1' },
] ];
const DropdownSimulation = () => ( const DropdownSimulation = () => (
<Dropdown placeholder='Skills' fluid multiple selection options={options} /> <Dropdown placeholder="Skills" fluid multiple selection options={options} />
) );
export default DropdownSimulation export default DropdownSimulation;

386
smart-hut/src/components/SimulationPanel.js
View file

@ -1,12 +1,5 @@
import React from "react"; import React from 'react';
import Modal from "react-modal"; 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 { import {
Grid, Grid,
Divider, Divider,
@ -15,10 +8,17 @@ import {
Responsive, Responsive,
Checkbox, Checkbox,
Image, Image,
GridColumn, GridColumn,
Header, Header,
Segment Segment,
} from "semantic-ui-react"; } from 'semantic-ui-react';
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';
const SimulationPanel = (props) => ( const SimulationPanel = (props) => (
@ -34,7 +34,7 @@ const SimulationPanel = (props) => (
left: 0, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
backgroundColor: 'rgba(0,0,0,0.5)' backgroundColor: 'rgba(0,0,0,0.5)',
}, },
content: { content: {
position: 'absolute', position: 'absolute',
@ -49,220 +49,220 @@ const SimulationPanel = (props) => (
borderRadius: '4px', borderRadius: '4px',
outline: 'none', outline: 'none',
padding: '20px', padding: '20px',
backgroundColor: 'rgb(65, 67, 69)' backgroundColor: 'rgb(65, 67, 69)',
} },
}} }}
> >
{props.simulationPanel} {props.simulationPanel}
<Grid celled> <Grid celled>
{/* TITLE */} {/* TITLE */}
<Grid.Row textAlign="center"> <Grid.Row textAlign="center">
<h1 style={{ color: "white", padding:"1rem", fontFamily: "Arial"}}> <h1 style={{ color: 'white', padding: '1rem', fontFamily: 'Arial' }}>
Welcome in the Simulation Panel Welcome in the Simulation Panel
</h1> </h1>
</Grid.Row> </Grid.Row>
{/* TEMPERATURE SENSOR */} {/* TEMPERATURE SENSOR */}
<Grid.Row> <Grid.Row>
<Grid.Column width={6} textAlign="center"> <Grid.Column width={6} textAlign="center">
<Divider <Divider
style={{ style={{
marginTop: "3rem", marginTop: '3rem',
marginBottom: "auto" marginBottom: 'auto',
}} }}
/> />
<Image <Image
src='./../img/thermo-simulation.png' src="./../img/thermo-simulation.png"
style={{ style={{
width: "60px", width: '60px',
height: "auto", height: 'auto',
display:"block", display: 'block',
marginLeft:"auto", marginLeft: 'auto',
marginRight:"auto", marginRight: 'auto',
marginTop: "1rem", marginTop: '1rem',
marginBottom: "1rem" marginBottom: '1rem',
}} }}
/> />
<p style={{ color: "white", padding:"0.5rem"}}> <p style={{ color: 'white', padding: '0.5rem' }}>
Temperature Sensor Temperature Sensor
</p> </p>
<Divider /> <Divider />
</Grid.Column> </Grid.Column>
<Grid.Column width={10} textAlign="center"> <Grid.Column width={10} textAlign="center">
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderTemperature /> <SliderTemperature />
</div> </div>
<Divider /> <Divider />
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderTempRange/> <SliderTempRange />
</div> </div>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
{/* HUMIDTY SENSOR */} {/* HUMIDTY SENSOR */}
<Grid.Row> <Grid.Row>
<Grid.Column width={6} textAlign="center"> <Grid.Column width={6} textAlign="center">
<Divider <Divider
style={{ style={{
marginTop: "3rem", marginTop: '3rem',
marginBottom: "auto" marginBottom: 'auto',
}} }}
/> />
<Image <Image
src='./../img/humidity-simulation.png' src="./../img/humidity-simulation.png"
style={{ style={{
width: "60px", width: '60px',
height: "auto", height: 'auto',
display:"block", display: 'block',
marginLeft:"auto", marginLeft: 'auto',
marginRight:"auto", marginRight: 'auto',
marginTop: "1rem", marginTop: '1rem',
marginBottom: "1rem" marginBottom: '1rem',
}} }}
/> />
<p style={{ color: "white", padding:"0.5rem"}}> <p style={{ color: 'white', padding: '0.5rem' }}>
Humidity Sensor Humidity Sensor
</p> </p>
<Divider /> <Divider />
</Grid.Column> </Grid.Column>
<Grid.Column width={10} textAlign="center"> <Grid.Column width={10} textAlign="center">
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderHumidty /> <SliderHumidty />
</div> </div>
<Divider /> <Divider />
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderTempRange/> <SliderTempRange />
</div> </div>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
{/* LIGHT SENSOR */} {/* LIGHT SENSOR */}
<Grid.Row> <Grid.Row>
<Grid.Column width={6} textAlign="center"> <Grid.Column width={6} textAlign="center">
<Divider <Divider
style={{ style={{
marginTop: "3rem", marginTop: '3rem',
marginBottom: "auto" marginBottom: 'auto',
}} }}
/> />
<Image <Image
src='./../img/light-simulation.png' src="./../img/light-simulation.png"
style={{ style={{
width: "60px", width: '60px',
height: "auto", height: 'auto',
display:"block", display: 'block',
marginLeft:"auto", marginLeft: 'auto',
marginRight:"auto", marginRight: 'auto',
marginTop: "1rem", marginTop: '1rem',
marginBottom: "1rem" marginBottom: '1rem',
}} }}
/> />
<p style={{ color: "white", padding:"0.5rem"}}> <p style={{ color: 'white', padding: '0.5rem' }}>
Light Sensor Light Sensor
</p> </p>
<Divider /> <Divider />
</Grid.Column> </Grid.Column>
<Grid.Column width={10} textAlign="center"> <Grid.Column width={10} textAlign="center">
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderLight /> <SliderLight />
</div> </div>
<Divider /> <Divider />
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderLightRange/> <SliderLightRange />
</div> </div>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
{/* MOTION SENSOR */} {/* MOTION SENSOR */}
<Grid.Row> <Grid.Row>
<Grid.Column width={6} textAlign="center"> <Grid.Column width={6} textAlign="center">
<Divider <Divider
style={{ style={{
marginTop: "3rem", marginTop: '3rem',
marginBottom: "auto" marginBottom: 'auto',
}} }}
/> />
<Image <Image
src='./../img/motion-simulation.png' src="./../img/motion-simulation.png"
style={{ style={{
width: "60px", width: '60px',
height: "auto", height: 'auto',
display:"block", display: 'block',
marginLeft:"auto", marginLeft: 'auto',
marginRight:"auto", marginRight: 'auto',
marginTop: "1rem", marginTop: '1rem',
marginBottom: "1rem" marginBottom: '1rem',
}} }}
/> />
<p style={{ color: "white", padding:"0.5rem"}}> <p style={{ color: 'white', padding: '0.5rem' }}>
Motion Sensor Motion Sensor
</p> </p>
<Divider /> <Divider />
</Grid.Column> </Grid.Column>
<Grid.Column width={10} textAlign="center"> <Grid.Column width={10} textAlign="center">
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderMotion /> <SliderMotion />
</div> </div>
<Divider /> <Divider />
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderTempRange/> <SliderTempRange />
</div> </div>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
</Modal> </Modal>

55
smart-hut/src/components/SliderHumidity.js
View file

@ -1,44 +1,45 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react' import {
Form, Grid, Image, Transition, Divider,
} from 'semantic-ui-react';
export default class SliderHumidity extends Component { export default class SliderHumidity extends Component {
state = {visible: true, duration: 78 } state = { visible: true, duration: 78 }
handleChange = (e, { name, value }) => this.setState({ [name]: value }) handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleVisibility = () => handleVisibility = () => this.setState((prevState) => ({ visible: !prevState.visible }))
this.setState((prevState) => ({ visible: !prevState.visible }))
render() { render() {
const { duration } = this.state const { duration } = this.state;
return ( return (
<Grid columns={2}> <Grid columns={2}>
<Grid.Column as={Form} textAlign="center"> <Grid.Column as={Form} textAlign="center">
<p <p
style={{ style={{
color: "white", color: 'white',
padding:"0.5rem", padding: '0.5rem',
display:"block", display: 'block',
marinLeft:"auto", marinLeft: 'auto',
marginRight:"auto",}} marginRight: 'auto',
> }}
{`Humidity: ${duration} %`} >
</p> {`Humidity: ${duration} %`}
</p>
<Form.Input <Form.Input
min={0} min={0}
max={100} max={100}
name='duration' name="duration"
onChange={this.handleChange} onChange={this.handleChange}
step={1} step={1}
type='range' type="range"
value={duration} value={duration}
/> />
</Grid.Column> </Grid.Column>
</Grid> </Grid>
) );
} }
} }

55
smart-hut/src/components/SliderLight.js
View file

@ -1,44 +1,45 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react' import {
Form, Grid, Image, Transition, Divider,
} from 'semantic-ui-react';
export default class SliderLight extends Component { export default class SliderLight extends Component {
state = {visible: true, duration: 10500 } state = { visible: true, duration: 10500 }
handleChange = (e, { name, value }) => this.setState({ [name]: value }) handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleVisibility = () => handleVisibility = () => this.setState((prevState) => ({ visible: !prevState.visible }))
this.setState((prevState) => ({ visible: !prevState.visible }))
render() { render() {
const { duration } = this.state const { duration } = this.state;
return ( return (
<Grid columns={2}> <Grid columns={2}>
<Grid.Column as={Form} textAlign="center"> <Grid.Column as={Form} textAlign="center">
<p <p
style={{ style={{
color: "white", color: 'white',
padding:"0.5rem", padding: '0.5rem',
display:"block", display: 'block',
marinLeft:"auto", marinLeft: 'auto',
marginRight:"auto",}} marginRight: 'auto',
> }}
{`Light intensity: ${duration} lm`} >
</p> {`Light intensity: ${duration} lm`}
</p>
<Form.Input <Form.Input
min={0} min={0}
max={15000} max={15000}
name='duration' name="duration"
onChange={this.handleChange} onChange={this.handleChange}
step={5} step={5}
type='range' type="range"
value={duration} value={duration}
/> />
</Grid.Column> </Grid.Column>
</Grid> </Grid>
) );
} }
} }

57
smart-hut/src/components/SliderLightRange.js
View file

@ -1,45 +1,46 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react' import {
Form, Grid, Image, Transition, Divider,
} from 'semantic-ui-react';
export default class SliderTempRange extends Component { export default class SliderTempRange extends Component {
state = {visible: true, duration: 500 } state = { visible: true, duration: 500 }
handleChange = (e, { name, value }) => this.setState({ [name]: value }) handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleVisibility = () => handleVisibility = () => this.setState((prevState) => ({ visible: !prevState.visible }))
this.setState((prevState) => ({ visible: !prevState.visible }))
render() { render() {
const { duration } = this.state const { duration } = this.state;
return ( return (
<Grid columns={2}> <Grid columns={2}>
<Grid.Column as={Form} textAlign="center"> <Grid.Column as={Form} textAlign="center">
<p <p
style={{ style={{
color: "white", color: 'white',
padding:"0.5rem", padding: '0.5rem',
display:"block", display: 'block',
marinLeft:"auto", marinLeft: 'auto',
marginRight:"auto",}} marginRight: 'auto',
> }}
{`Chosen tolerance: +/- ${duration}`} >
</p> {`Chosen tolerance: +/- ${duration}`}
</p>
<Form.Input
min={0} <Form.Input
max={1000} min={0}
name='duration' max={1000}
onChange={this.handleChange} name="duration"
step={1} onChange={this.handleChange}
type='range' step={1}
value={duration} type="range"
/> value={duration}
/>
</Grid.Column> </Grid.Column>
</Grid> </Grid>
) );
} }
} }

55
smart-hut/src/components/SliderMotion.js
View file

@ -1,44 +1,45 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react' import {
Form, Grid, Image, Transition, Divider,
} from 'semantic-ui-react';
export default class SliderLight extends Component { export default class SliderLight extends Component {
state = {visible: true, duration:5 } state = { visible: true, duration: 5 }
handleChange = (e, { name, value }) => this.setState({ [name]: value }) handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleVisibility = () => handleVisibility = () => this.setState((prevState) => ({ visible: !prevState.visible }))
this.setState((prevState) => ({ visible: !prevState.visible }))
render() { render() {
const { duration } = this.state const { duration } = this.state;
return ( return (
<Grid columns={2}> <Grid columns={2}>
<Grid.Column as={Form} textAlign="center"> <Grid.Column as={Form} textAlign="center">
<p <p
style={{ style={{
color: "white", color: 'white',
padding:"0.5rem", padding: '0.5rem',
display:"block", display: 'block',
marinLeft:"auto", marinLeft: 'auto',
marginRight:"auto",}} marginRight: 'auto',
> }}
{`Range: ${duration} meters`} >
</p> {`Range: ${duration} meters`}
</p>
<Form.Input <Form.Input
min={0} min={0}
max={15} max={15}
name='duration' name="duration"
onChange={this.handleChange} onChange={this.handleChange}
step={5} step={5}
type='range' type="range"
value={duration} value={duration}
/> />
</Grid.Column> </Grid.Column>
</Grid> </Grid>
) );
} }
} }

57
smart-hut/src/components/SliderTempRange.js
View file

@ -1,45 +1,46 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react' import {
Form, Grid, Image, Transition, Divider,
} from 'semantic-ui-react';
export default class SliderTempRange extends Component { export default class SliderTempRange extends Component {
state = {visible: true, duration: 5 } state = { visible: true, duration: 5 }
handleChange = (e, { name, value }) => this.setState({ [name]: value }) handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleVisibility = () => handleVisibility = () => this.setState((prevState) => ({ visible: !prevState.visible }))
this.setState((prevState) => ({ visible: !prevState.visible }))
render() { render() {
const { duration } = this.state const { duration } = this.state;
return ( return (
<Grid columns={2}> <Grid columns={2}>
<Grid.Column as={Form} textAlign="center"> <Grid.Column as={Form} textAlign="center">
<p <p
style={{ style={{
color: "white", color: 'white',
padding:"0.5rem", padding: '0.5rem',
display:"block", display: 'block',
marinLeft:"auto", marinLeft: 'auto',
marginRight:"auto",}} marginRight: 'auto',
> }}
{`Chosen tolerance: +/- ${duration}`} >
</p> {`Chosen tolerance: +/- ${duration}`}
</p>
<Form.Input
min={0} <Form.Input
max={10} min={0}
name='duration' max={10}
onChange={this.handleChange} name="duration"
step={1} onChange={this.handleChange}
type='range' step={1}
value={duration} type="range"
/> value={duration}
/>
</Grid.Column> </Grid.Column>
</Grid> </Grid>
) );
} }
} }

55
smart-hut/src/components/SliderTemperature.js
View file

@ -1,44 +1,45 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react' import {
Form, Grid, Image, Transition, Divider,
} from 'semantic-ui-react';
export default class SliderTemperature extends Component { export default class SliderTemperature extends Component {
state = {visible: true, duration: 20 } state = { visible: true, duration: 20 }
handleChange = (e, { name, value }) => this.setState({ [name]: value }) handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleVisibility = () => handleVisibility = () => this.setState((prevState) => ({ visible: !prevState.visible }))
this.setState((prevState) => ({ visible: !prevState.visible }))
render() { render() {
const { duration } = this.state const { duration } = this.state;
return ( return (
<Grid columns={2}> <Grid columns={2}>
<Grid.Column as={Form} textAlign="center"> <Grid.Column as={Form} textAlign="center">
<p <p
style={{ style={{
color: "white", color: 'white',
padding:"0.5rem", padding: '0.5rem',
display:"block", display: 'block',
marinLeft:"auto", marinLeft: 'auto',
marginRight:"auto",}} marginRight: 'auto',
> }}
{`Heat: ${duration} Celsius Degrees`} >
</p> {`Heat: ${duration} Celsius Degrees`}
</p>
<Form.Input <Form.Input
min={10} min={10}
max={35} max={35}
name='duration' name="duration"
onChange={this.handleChange} onChange={this.handleChange}
step={1} step={1}
type='range' type="range"
value={duration} value={duration}
/> />
</Grid.Column> </Grid.Column>
</Grid> </Grid>
) );
} }
} }