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

309 lines
7.5 KiB
JavaScript
Raw Normal View History

2020-03-23 20:24:17 +00:00
import React, { Component } from "react";
import styled from "styled-components";
import {
Button,
Dropdown,
Form,
Icon,
Image,
Input,
Modal,
} from "semantic-ui-react";
const StyledDiv = styled.div`
2020-03-23 20:24:17 +00:00
background-color: #ff4050;
padding: 3rem;
width: 10rem;
height: 10rem;
2020-03-23 20:24:17 +00:00
border-radius: 100%;
border: none;
position: relative;
box-shadow: 3px 2px 10px 5px #ccc;
2020-03-23 20:24:17 +00:00
transition: all 0.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,
2020-03-23 20:24:17 +00:00
openModal: false,
2020-03-24 19:35:23 +00:00
motion: false,
};
2020-03-23 20:24:17 +00:00
this.baseState = this.state;
2020-03-19 10:52:13 +00:00
this.createDevice = this.createDevice.bind(this);
2020-03-18 13:18:37 +00:00
}
2020-03-23 20:24:17 +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 = () => {
2020-03-23 20:24:17 +00:00
this.setState((prevState) => ({ step: prevState.step + 1 }));
2020-03-18 13:18:37 +00:00
};
previousStep = () => {
2020-03-23 20:24:17 +00:00
this.setState((prevState) => ({ step: prevState.step - 1 }));
2020-03-18 13:18:37 +00:00
};
2020-03-18 13:18:37 +00:00
setTypeOfDevice = (e, d) => {
2020-03-23 20:24:17 +00:00
if (d.value === "dimmableLight") {
this.setState({ typeOfDevice: d.value, intensity: 0 });
} else {
this.setState({ typeOfDevice: d.value });
}
2020-03-18 13:18:37 +00:00
};
2020-03-18 13:18:37 +00:00
setDeviceName = (e, d) => {
2020-03-23 20:24:17 +00:00
this.setState({ deviceName: d.value });
2020-03-18 13:18:37 +00:00
};
2020-03-18 13:18:37 +00:00
setTypeOfSensor = (e, d) => {
2020-03-24 19:35:23 +00:00
console.log(d.value);
if (d.value === "motionSensor") {
this.setState({ typeOfSensor: d.value, motion: true });
} else {
this.setState({ typeOfSensor: d.value });
}
2020-03-18 13:18:37 +00:00
};
setLightsDimmerSwitch = (e, d) => {
2020-03-23 20:24:17 +00:00
this.setState({ lightsAttached: d.value });
2020-03-18 13:18:37 +00:00
};
2020-03-19 10:52:13 +00:00
createDevice() {
2020-03-18 13:18:37 +00:00
// Connect to the backend and create device here.
2020-03-19 10:52:13 +00:00
const data = {
params: {
2020-03-23 20:24:17 +00:00
name: this.state.deviceName,
2020-03-19 10:52:13 +00:00
},
2020-03-24 19:35:23 +00:00
device: this.state.motion ? "motionSensor" : this.state.typeOfDevice,
2020-03-23 20:24:17 +00:00
};
2020-03-20 17:42:38 +00:00
2020-03-23 20:24:17 +00:00
switch (this.state.typeOfDevice) {
2020-03-20 17:42:38 +00:00
case "dimmableLight":
data.params["intensity"] = 1;
break;
2020-03-23 18:08:31 +00:00
case "sensor":
2020-03-24 19:35:23 +00:00
if (!this.state.motion) {
data.params["sensor"] = this.state.typeOfSensor;
data.params["value"] = 0;
}
2020-03-23 18:08:31 +00:00
break;
case "switch":
data.params["lights"] = this.state.lightsAttached;
break;
2020-03-23 20:24:17 +00:00
default:
2020-03-20 17:42:38 +00:00
break;
}
2020-03-23 20:24:17 +00:00
console.log(data);
2020-03-19 10:52:13 +00:00
this.props.addDevice(data);
2020-03-18 13:18:37 +00:00
this.resetState();
2020-03-23 20:24:17 +00:00
}
2020-03-18 13:18:37 +00:00
render() {
const deviceOptions = [
{
2020-03-23 20:24:17 +00:00
key: "light",
text: "Normal Light",
value: "regularLight",
image: { avatar: true, src: "/img/lightOn.svg" },
2020-03-18 13:18:37 +00:00
},
{
2020-03-23 20:24:17 +00:00
key: "intensity-light",
text: "Intensity Light",
value: "dimmableLight",
image: { avatar: true, src: "/img/intensity-light.svg" },
2020-03-18 13:18:37 +00:00
},
{
2020-03-23 20:24:17 +00:00
key: "smart-plug",
text: "Smart Plug",
value: "smartPlug",
image: { avatar: true, src: "/img/smart-plug.svg" },
2020-03-18 13:18:37 +00:00
},
{
2020-03-23 20:24:17 +00:00
key: "sensor",
text: "Sensor",
value: "sensor",
image: { avatar: true, src: "/img/sensorOn.svg" },
2020-03-18 13:18:37 +00:00
},
{
2020-03-23 20:24:17 +00:00
key: "switch",
text: "Switch",
value: "switch",
image: { avatar: true, src: "/img/switchOn.svg" },
2020-03-18 13:18:37 +00:00
},
{
2020-03-23 20:24:17 +00:00
key: "dimmer",
text: "Dimmer",
value: "buttonDimmer",
image: { avatar: true, src: "/img/dimmer.svg" },
2020-03-18 13:18:37 +00:00
},
];
const sensorOptions = [
{
key: "temperature",
text: "Temperature Sensor",
2020-03-20 17:42:38 +00:00
value: "TEMPERATURE",
2020-03-23 20:24:17 +00:00
image: { avatar: true, src: "/img/temperature-sensor.svg" },
2020-03-18 13:18:37 +00:00
},
{
key: "humidity",
text: "Humidity Sensor",
2020-03-20 17:42:38 +00:00
value: "HUMIDITY",
2020-03-23 20:24:17 +00:00
image: { avatar: true, src: "/img/humidity-sensor.svg" },
2020-03-18 13:18:37 +00:00
},
{
key: "light",
text: "Light Sensor",
2020-03-20 17:42:38 +00:00
value: "LIGHT",
2020-03-23 20:24:17 +00:00
image: { avatar: true, src: "/img/light-sensor.svg" },
2020-03-18 13:18:37 +00:00
},
{
key: "motion",
text: "Motion Sensor",
2020-03-20 17:42:38 +00:00
value: "motionSensor",
2020-03-23 20:24:17 +00:00
image: { avatar: true, src: "/img/sensorOn.svg" },
},
2020-03-18 13:18:37 +00:00
];
const availableLights = [];
2020-03-23 20:24:17 +00:00
this.props.devices.forEach((d) => {
availableLights.push({
key: d.id,
text: d.name,
value: d.id,
});
2020-03-18 13:18:37 +00:00
});
const step1 = (
<Dropdown
name="typeOfDevice"
2020-03-23 20:24:17 +00:00
placeholder="Select a Type of Device"
2020-03-18 13:18:37 +00:00
fluid
selection
onChange={this.setTypeOfDevice}
options={deviceOptions}
/>
);
const step2 = (typeOfDevice) => {
2020-03-23 20:24:17 +00:00
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" }}>
2020-03-18 13:18:37 +00:00
<label>Type of Sensor: </label>
<Dropdown
name="typeOfDevice"
2020-03-23 20:24:17 +00:00
placeholder="Select a Type of Sensor"
2020-03-18 13:18:37 +00:00
fluid
selection
onChange={this.setTypeOfSensor}
options={sensorOptions}
/>
2020-03-23 20:24:17 +00:00
</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>
);
2020-03-18 13:18:37 +00:00
return (
<Form>
{deviceName}
2020-03-23 20:24:17 +00:00
{this.state.typeOfDevice === "sensor" ? sensorForm : ""}
{this.state.typeOfDevice === "switch" ||
this.state.typeOfDevice === "dimmer"
? switchDimmerOptions
: ""}
2020-03-18 13:18:37 +00:00
</Form>
2020-03-23 20:24:17 +00:00
);
2020-03-18 13:18:37 +00:00
};
const steps = [step1, step2()];
return (
2020-03-23 20:24:17 +00:00
<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}
>
2020-03-18 13:18:37 +00:00
<Modal.Header>Add a New Device</Modal.Header>
2020-03-23 20:24:17 +00:00
<Modal.Content>{steps[this.state.step - 1]}</Modal.Content>
2020-03-18 13:18:37 +00:00
<Modal.Actions>
{this.state.step > 1 ? (
2020-03-23 20:24:17 +00:00
<Button
onClick={this.previousStep}
color="blue"
icon
labelPosition="left"
>
<Icon name="left arrow" />
2020-03-18 13:18:37 +00:00
Back
</Button>
2020-03-23 20:24:17 +00:00
) : (
""
)}
2020-03-18 13:18:37 +00:00
{this.state.step < steps.length ? (
2020-03-23 20:24:17 +00:00
<Button
color="blue"
onClick={this.nextStep}
icon
labelPosition="right"
>
2020-03-18 13:18:37 +00:00
Next
2020-03-23 20:24:17 +00:00
<Icon name="right arrow" />
2020-03-18 13:18:37 +00:00
</Button>
2020-03-23 20:24:17 +00:00
) : (
""
)}
2020-03-18 13:18:37 +00:00
{this.state.step === steps.length ? (
2020-03-23 20:24:17 +00:00
<Button
onClick={this.createDevice}
color="blue"
icon
labelPosition="right"
>
<Icon name="up arrow" />
2020-03-18 13:18:37 +00:00
Finish
</Button>
2020-03-23 20:24:17 +00:00
) : (
""
)}
2020-03-18 13:18:37 +00:00
</Modal.Actions>
</Modal>
2020-03-23 20:24:17 +00:00
);
2020-03-18 13:18:37 +00:00
}
}