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;

150
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,
@ -17,8 +10,15 @@ import {
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,8 +49,8 @@ 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}
@ -58,7 +58,7 @@ const SimulationPanel = (props) => (
{/* 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>
@ -68,23 +68,23 @@ const SimulationPanel = (props) => (
<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 />
@ -95,8 +95,8 @@ const SimulationPanel = (props) => (
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderTemperature /> <SliderTemperature />
@ -104,8 +104,8 @@ const SimulationPanel = (props) => (
<Divider /> <Divider />
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderTempRange /> <SliderTempRange />
@ -118,23 +118,23 @@ const SimulationPanel = (props) => (
<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 />
@ -145,8 +145,8 @@ const SimulationPanel = (props) => (
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderHumidty /> <SliderHumidty />
@ -154,8 +154,8 @@ const SimulationPanel = (props) => (
<Divider /> <Divider />
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderTempRange /> <SliderTempRange />
@ -168,23 +168,23 @@ const SimulationPanel = (props) => (
<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 />
@ -195,8 +195,8 @@ const SimulationPanel = (props) => (
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderLight /> <SliderLight />
@ -204,8 +204,8 @@ const SimulationPanel = (props) => (
<Divider /> <Divider />
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderLightRange /> <SliderLightRange />
@ -218,23 +218,23 @@ const SimulationPanel = (props) => (
<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 />
@ -245,8 +245,8 @@ const SimulationPanel = (props) => (
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderMotion /> <SliderMotion />
@ -254,8 +254,8 @@ const SimulationPanel = (props) => (
<Divider /> <Divider />
<div <div
style={{ style={{
display: "block", display: 'block',
marginLeft: "30%", marginLeft: '30%',
}} }}
> >
<SliderTempRange /> <SliderTempRange />

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

@ -1,6 +1,7 @@
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 {
@ -8,22 +9,22 @@ export default class SliderHumidity extends Component {
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} %`} {`Humidity: ${duration} %`}
</p> </p>
@ -31,14 +32,14 @@ export default class SliderHumidity extends Component {
<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>
) );
} }
} }

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

@ -1,6 +1,7 @@
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 {
@ -8,22 +9,22 @@ export default class SliderLight extends Component {
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`} {`Light intensity: ${duration} lm`}
</p> </p>
@ -31,14 +32,14 @@ export default class SliderLight extends Component {
<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>
) );
} }
} }

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

@ -1,6 +1,7 @@
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 {
@ -8,22 +9,22 @@ export default class SliderTempRange extends Component {
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}`} {`Chosen tolerance: +/- ${duration}`}
</p> </p>
@ -32,14 +33,14 @@ export default class SliderTempRange extends Component {
<Form.Input <Form.Input
min={0} min={0}
max={1000} max={1000}
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>
) );
} }
} }

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

@ -1,6 +1,7 @@
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 {
@ -8,22 +9,22 @@ export default class SliderLight extends Component {
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`} {`Range: ${duration} meters`}
</p> </p>
@ -31,14 +32,14 @@ export default class SliderLight extends Component {
<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>
) );
} }
} }

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

@ -1,6 +1,7 @@
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 {
@ -8,22 +9,22 @@ export default class SliderTempRange extends Component {
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}`} {`Chosen tolerance: +/- ${duration}`}
</p> </p>
@ -32,14 +33,14 @@ export default class SliderTempRange extends Component {
<Form.Input <Form.Input
min={0} min={0}
max={10} max={10}
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>
) );
} }
} }

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

@ -1,6 +1,7 @@
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 {
@ -8,22 +9,22 @@ export default class SliderTemperature extends Component {
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`} {`Heat: ${duration} Celsius Degrees`}
</p> </p>
@ -31,14 +32,14 @@ export default class SliderTemperature extends Component {
<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>
) );
} }
} }