From edf1706986e479f3ab3b27b05009072bca4b19e3 Mon Sep 17 00:00:00 2001 From: christiancp Date: Wed, 18 Mar 2020 14:18:37 +0100 Subject: [PATCH] Add device feature finished --- smart-hut/public/img/dimmer.svg | 1 + smart-hut/public/img/humidity-sensor.svg | 1 + smart-hut/public/img/intensity-light.svg | 1 + smart-hut/public/img/light-sensor.svg | 1 + smart-hut/public/img/temperature-sensor.svg | 14 + smart-hut/src/App.js | 3 +- .../src/components/dashboard/DevicePanel.js | 3 +- .../components/dashboard/devices/NewDevice.js | 288 ++++++++++++------ smart-hut/src/views/Dashboard.js | 6 +- 9 files changed, 227 insertions(+), 91 deletions(-) create mode 100644 smart-hut/public/img/dimmer.svg create mode 100644 smart-hut/public/img/humidity-sensor.svg create mode 100644 smart-hut/public/img/intensity-light.svg create mode 100644 smart-hut/public/img/light-sensor.svg create mode 100644 smart-hut/public/img/temperature-sensor.svg diff --git a/smart-hut/public/img/dimmer.svg b/smart-hut/public/img/dimmer.svg new file mode 100644 index 0000000..587066c --- /dev/null +++ b/smart-hut/public/img/dimmer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/smart-hut/public/img/humidity-sensor.svg b/smart-hut/public/img/humidity-sensor.svg new file mode 100644 index 0000000..3f2aee8 --- /dev/null +++ b/smart-hut/public/img/humidity-sensor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/smart-hut/public/img/intensity-light.svg b/smart-hut/public/img/intensity-light.svg new file mode 100644 index 0000000..8a726f9 --- /dev/null +++ b/smart-hut/public/img/intensity-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/smart-hut/public/img/light-sensor.svg b/smart-hut/public/img/light-sensor.svg new file mode 100644 index 0000000..7c01850 --- /dev/null +++ b/smart-hut/public/img/light-sensor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/smart-hut/public/img/temperature-sensor.svg b/smart-hut/public/img/temperature-sensor.svg new file mode 100644 index 0000000..678696b --- /dev/null +++ b/smart-hut/public/img/temperature-sensor.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/smart-hut/src/App.js b/smart-hut/src/App.js index 232f63e..5cc0cd3 100644 --- a/smart-hut/src/App.js +++ b/smart-hut/src/App.js @@ -98,7 +98,8 @@ class App extends Component { - {this.state.loggedIn ? : } + {/* ToDO change this back */} + {!this.state.loggedIn ? : } diff --git a/smart-hut/src/components/dashboard/DevicePanel.js b/smart-hut/src/components/dashboard/DevicePanel.js index 4dfa259..0276963 100644 --- a/smart-hut/src/components/dashboard/DevicePanel.js +++ b/smart-hut/src/components/dashboard/DevicePanel.js @@ -74,7 +74,6 @@ class Panel extends Component { editModeController = (e) => { this.setState((prevState) => ({editMode: !prevState.editMode})); - console.log("CAMBIADO", this.state.editMode) }; changeDeviceData = (deviceId, newSettings) => { @@ -132,7 +131,7 @@ class Panel extends Component { - + 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 ( +
+ {deviceName} + {this.state.typeOfDevice === "sensor" ? (sensorForm) : ""} + {this.state.typeOfDevice === "switch" || this.state.typeOfDevice === "dimmer" ? + (switchDimmerOptions) : "" + } +
+ ) + }; + 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 - + */}