frontend/smart-hut/src/components/dashboard/devices/NewDevice.js

225 lines
5.9 KiB
JavaScript
Raw Normal View History

import React, {Component} from 'react';
import styled from 'styled-components';
2020-03-18 13:18:37 +00:00
import {Button, Dropdown, Form, Icon, Image, Input, Modal} from "semantic-ui-react";
const StyledDiv = styled.div`
background-color : #ff4050;
padding : 3rem;
width: 10rem;
height: 10rem;
border-radius : 100%;
border : none;
position : relative;
box-shadow: 3px 2px 10px 5px #ccc;
transition : all .3s ease-out;
:hover{
background-color : #ff2436;
}
`;
2020-03-18 13:18:37 +00:00
export default class NewDevice extends Component {
constructor(props) {
super(props);
this.state = {
step: 1,
openModal : false
};
2020-03-18 13:18:37 +00:00
this.baseState = this.state
}
2020-03-18 13:18:37 +00:00
handleOpen = () => {this.setState({openModal : true})};
handleClose = () => {this.setState({openModal : false})};
2020-03-18 13:18:37 +00:00
resetState = () => {
this.setState(this.baseState);
this.handleClose();
};
2020-03-18 13:18:37 +00:00
nextStep = () => {
this.setState((prevState) => ({step: prevState.step + 1}));
};
previousStep = () => {
this.setState((prevState) => ({step: prevState.step - 1}));
};
2020-03-18 13:18:37 +00:00
setTypeOfDevice = (e, d) => {
this.setState({typeOfDevice: d.value});
};
2020-03-18 13:18:37 +00:00
setDeviceName = (e, d) => {
this.setState({deviceName: d.value});
};
2020-03-18 13:18:37 +00:00
setTypeOfSensor = (e, d) => {
this.setState({typeOfSensor: d.value});
};
setLightsDimmerSwitch = (e, d) => {
this.setState({lightsAttached : d.value});
};
createDevice = () => {
// Connect to the backend and create device here.
this.resetState();
};
2020-03-18 13:18:37 +00:00
render() {
const deviceOptions = [
{
key: 'light',
text: 'Normal Light',
value: 'light',
image: {avatar: true, src: '/img/lightOn.svg'},
},
{
key: 'intensity-light',
text: 'Intensity Light',
value: 'intensity-light',
image: {avatar: true, src: '/img/intensity-light.svg'},
},
{
key: 'smart-plug',
text: 'Smart Plug',
value: 'smart-plug',
image: {avatar: true, src: '/img/smart-plug.svg'},
},
{
key: 'sensor',
text: 'Sensor',
value: 'sensor',
image: {avatar: true, src: '/img/sensorOn.svg'},
},
{
key: 'switch',
text: 'Switch',
value: 'switch',
image: {avatar: true, src: '/img/switchOn.svg'},
},
{
key: 'dimmer',
text: 'Dimmer',
value: 'dimmer',
image: {avatar: true, src: '/img/dimmer.svg'},
},
];
const sensorOptions = [
{
key: "temperature",
text: "Temperature Sensor",
value: "temperature",
image: {avatar: true, src: '/img/temperature-sensor.svg'},
},
{
key: "humidity",
text: "Humidity Sensor",
value: "humidity",
image: {avatar: true, src: '/img/humidity-sensor.svg'},
},
{
key: "light",
text: "Light Sensor",
value: "light",
image: {avatar: true, src: '/img/light-sensor.svg'},
},
{
key: "motion",
text: "Motion Sensor",
value: "motion",
image: {avatar: true, src: '/img/sensorOn.svg'},
}
];
const availableLights = [];
this.props.devices.forEach(d => {
availableLights.push(
{
key: d.id,
text: d.name,
value: d.id,
}
)
});
const step1 = (
<Dropdown
name="typeOfDevice"
placeholder='Select a Type of Device'
fluid
selection
onChange={this.setTypeOfDevice}
options={deviceOptions}
/>
);
const step2 = (typeOfDevice) => {
const deviceName = (<div>
<Form.Field>
<label>Device Name: </label>
<Input fluid size={"large"} onChange={this.setDeviceName} focus placeholder='Device Name'/>
</Form.Field>
</div>);
const sensorForm = (<Form.Field style={{marginTop : "1rem"}}>
<label>Type of Sensor: </label>
<Dropdown
name="typeOfDevice"
placeholder='Select a Type of Sensor'
fluid
selection
onChange={this.setTypeOfSensor}
options={sensorOptions}
/>
</Form.Field>);
const switchDimmerOptions = (<Form.Field style={{marginTop : "1rem"}}>
<label>Select the Lights You Want to Attach: </label>
<Dropdown
name="typeOfDevice"
placeholder='Select Lights'
fluid
multiple
onChange={this.setLightsDimmerSwitch}
options={availableLights}
/>
</Form.Field>);
return (
<Form>
{deviceName}
{this.state.typeOfDevice === "sensor" ? (sensorForm) : ""}
{this.state.typeOfDevice === "switch" || this.state.typeOfDevice === "dimmer" ?
(switchDimmerOptions) : ""
}
</Form>
)
};
const steps = [step1, step2()];
return (
<Modal closeIcon open={this.state.openModal} onClose={this.resetState} trigger={<StyledDiv onClick={this.handleOpen}>
<Image src="/img/add.svg" style={{filter: "invert()"}}/>
</StyledDiv>} centered={true}>
<Modal.Header>Add a New Device</Modal.Header>
<Modal.Content>
{steps[this.state.step -1]}
</Modal.Content>
<Modal.Actions>
{this.state.step > 1 ? (
<Button onClick={this.previousStep} color="blue" icon labelPosition='left'>
<Icon name='left arrow'/>
Back
</Button>
) : ""}
{this.state.step < steps.length ? (
<Button color="blue" onClick={this.nextStep} icon labelPosition='right'>
Next
<Icon name='right arrow'/>
</Button>
) : ""}
{this.state.step === steps.length ? (
<Button onClick={this.createDevice} color="blue" icon labelPosition='right'>
<Icon name='up arrow'/>
Finish
</Button>
) : ""}
</Modal.Actions>
</Modal>
)
}
}