-
+
diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js
index 1fc4428..122ee96 100644
--- a/smart-hut/src/components/dashboard/devices/NewDevice.js
+++ b/smart-hut/src/components/dashboard/devices/NewDevice.js
@@ -1,8 +1,6 @@
import React, {Component} from 'react';
import styled from 'styled-components';
-import {Button, Dropdown, Form, Image} from "semantic-ui-react";
-import {addDeviceFormStyle} from "./styleComponents";
-import {deviceList} from "./TypesOfDevices";
+import {Button, Dropdown, Form, Icon, Image, Input, Modal} from "semantic-ui-react";
const StyledDiv = styled.div`
background-color : #ff4050;
@@ -19,90 +17,208 @@ const StyledDiv = styled.div`
}
`;
-class NewDeviceForm extends Component {
- constructor(props) {
- super(props);
- }
-
- formSelector = (option) => {
- switch (option) {
- case "Light":
- return ;
- case "Sensor":
- return "This is a sensor form";
- default:
- return "This is a default text"
- }
- };
-
- render() {
- let options = [];
- deviceList.forEach((e, i) => {
- options.push({key: i, text: e, value: e})
- });
-
- return (
-
-
-
-
-
-
-
- );
- }
-}
-
-
-class LightForm extends Component {
- constructor(props) {
- super(props);
- this.state = {}
- }
-
- render() {
- let options = [
- {
- key: 1,
- value: "common",
- text: "Normal Light"
- },
- {
- key: 1,
- value: "intensity",
- text: "Supports intensity level"
- }
- ]
- return (
-
-
-
-
- );
- };
-};
-
export default class NewDevice extends Component {
- constructor(props) {
- super(props);
- this.state = {
- openForm: false
- }
- }
-
- onClickDevice = (event) => {
- this.setState((prevState) => ({openForm: !prevState.openForm}));
+ constructor(props) {
+ super(props);
+ this.state = {
+ step: 1,
+ openModal : false
};
+ this.baseState = this.state
+ }
- render() {
- return (
-
-
- {this.state.openForm ? (
-
- ) : ""}
-
- )
- }
+ handleOpen = () => {this.setState({openModal : true})};
+ handleClose = () => {this.setState({openModal : false})};
+
+
+ resetState = () => {
+ this.setState(this.baseState);
+ this.handleClose();
+ };
+
+ nextStep = () => {
+ this.setState((prevState) => ({step: prevState.step + 1}));
+ };
+ previousStep = () => {
+ this.setState((prevState) => ({step: prevState.step - 1}));
+ };
+
+ setTypeOfDevice = (e, d) => {
+ this.setState({typeOfDevice: d.value});
+ };
+
+ setDeviceName = (e, d) => {
+ this.setState({deviceName: d.value});
+ };
+
+ 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();
+ };
+
+
+ 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 = (
+
+ );
+ const step2 = (typeOfDevice) => {
+ const deviceName = (
+
+
+
+
+ );
+ const sensorForm = (
+
+
+ );
+ const switchDimmerOptions = (
+
+
+ );
+ return (
+
+ )
+ };
+ const steps = [step1, step2()];
+ return (
+
+
+ } centered={true}>
+ Add a New Device
+
+ {steps[this.state.step -1]}
+
+
+ {this.state.step > 1 ? (
+
+ ) : ""}
+ {this.state.step < steps.length ? (
+
+ ) : ""}
+ {this.state.step === steps.length ? (
+
+ ) : ""}
+
+
+ )
+ }
}
diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js
index 1078924..75222fc 100644
--- a/smart-hut/src/views/Dashboard.js
+++ b/smart-hut/src/views/Dashboard.js
@@ -61,10 +61,12 @@ export default class Dashboard extends Component{
return(
-
+
+
+ {/*TODO change this back
-
+ */}