From 744f1b571042e7b74d8c7e8a1fa0128f65be65b0 Mon Sep 17 00:00:00 2001 From: christiancp Date: Tue, 17 Mar 2020 17:38:03 +0100 Subject: [PATCH 1/6] All the devices are implemented --- smart-hut/public/img/sensorOff.svg | 1 + smart-hut/public/img/sensorOn.svg | 1 + smart-hut/public/img/switchOff.svg | 48 ++++ smart-hut/public/img/switchOn.svg | 48 ++++ smart-hut/src/App.js | 7 +- .../src/components/dashboard/DevicePanel.js | 213 +++++++++--------- .../dashboard/devices/DigitalSensor.js | 58 +++++ .../dashboard/devices/DigitalSensorStyle.js | 17 ++ .../src/components/dashboard/devices/Light.js | 4 +- .../dashboard/devices/LightStyle.js | 10 +- .../components/dashboard/devices/Sensor.js | 2 +- .../components/dashboard/devices/SmartPlug.js | 5 +- .../dashboard/devices/SmartPlugStyle.js | 9 + .../components/dashboard/devices/Switch.js | 56 +++++ .../dashboard/devices/SwitchStyle.js | 17 ++ .../dashboard/devices/styleComponents.js | 4 +- smart-hut/src/views/Dashboard.js | 15 +- 17 files changed, 394 insertions(+), 121 deletions(-) create mode 100644 smart-hut/public/img/sensorOff.svg create mode 100644 smart-hut/public/img/sensorOn.svg create mode 100644 smart-hut/public/img/switchOff.svg create mode 100644 smart-hut/public/img/switchOn.svg create mode 100644 smart-hut/src/components/dashboard/devices/DigitalSensor.js create mode 100644 smart-hut/src/components/dashboard/devices/DigitalSensorStyle.js create mode 100644 smart-hut/src/components/dashboard/devices/Switch.js create mode 100644 smart-hut/src/components/dashboard/devices/SwitchStyle.js diff --git a/smart-hut/public/img/sensorOff.svg b/smart-hut/public/img/sensorOff.svg new file mode 100644 index 0000000..dbea9ab --- /dev/null +++ b/smart-hut/public/img/sensorOff.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/smart-hut/public/img/sensorOn.svg b/smart-hut/public/img/sensorOn.svg new file mode 100644 index 0000000..2dacf1c --- /dev/null +++ b/smart-hut/public/img/sensorOn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/smart-hut/public/img/switchOff.svg b/smart-hut/public/img/switchOff.svg new file mode 100644 index 0000000..5978110 --- /dev/null +++ b/smart-hut/public/img/switchOff.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/smart-hut/public/img/switchOn.svg b/smart-hut/public/img/switchOn.svg new file mode 100644 index 0000000..9046281 --- /dev/null +++ b/smart-hut/public/img/switchOn.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/smart-hut/src/App.js b/smart-hut/src/App.js index 1405c68..5eb7263 100644 --- a/smart-hut/src/App.js +++ b/smart-hut/src/App.js @@ -25,7 +25,7 @@ class App extends Component { super(props); let loggedIn = false; - + try { let userJsonString = localStorage.getItem("token"); if (userJsonString) { @@ -94,11 +94,12 @@ class App extends Component { - { this.state.loggedIn && this.state.token ? : } + { this.state.loggedIn && this.state.token ? : } - {this.state.loggedIn ? : } + //TODO Change this back the exclamation + {!this.state.loggedIn ? : } diff --git a/smart-hut/src/components/dashboard/DevicePanel.js b/smart-hut/src/components/dashboard/DevicePanel.js index 52c877e..b4b403d 100644 --- a/smart-hut/src/components/dashboard/DevicePanel.js +++ b/smart-hut/src/components/dashboard/DevicePanel.js @@ -1,6 +1,6 @@ import React, {Component} from 'react'; import { - Grid, + Grid, } from "semantic-ui-react"; import Device from "./devices/Device"; import NewDevice from "./devices/NewDevice"; @@ -10,125 +10,134 @@ import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants"; import Light from "./devices/Light"; import SmartPlug from "./devices/SmartPlug"; import Sensor from "./devices/Sensor"; +import DigitalSensor from "./devices/DigitalSensor"; +import Switch from "./devices/Switch"; const devices = [ - { - "id" : 1, - "name": "Bedroom Light", - "type" : "light", - "hasIntensity" : true, - "intensityLevel" : 0.20, - ...LightDevice - }, - { - "id" : 2, - "name": "Bathroom Light", - "type" : "light", - ...LightDevice - }, - { - "id" : 3, - "name": "Desktop Light", - "type" : "light", - ...LightDevice - }, - { - "id" : 4, - "name": "Entrance Light", - "type" : "light", - ...LightDevice - }, - { - "id" : 5, - "name": "Smart Plug", - "type" : "smartplug", - ...SmartPlugDevice - }, - { - "id" : 6, - "name": "Bedroom Thermometer", - "type" : "temperature-sensor", - }, + { + "id": 1, + "name": "Bedroom Light", + "type": "light", + "hasIntensity": true, + "intensityLevel": 0.20, + ...LightDevice + }, + { + "id": 2, + "name": "Bathroom Light", + "type": "light", + ...LightDevice + }, + { + "id": 3, + "name": "Desktop Light", + "type": "light", + ...LightDevice + }, + { + "id": 4, + "name": "Entrance Light", + "type": "light", + ...LightDevice + }, + { + "id": 5, + "name": "Smart Plug", + "type": "smartplug", + ...SmartPlugDevice + }, + { + "id": 6, + "name": "Bedroom Thermometer", + "type": "temperature-sensor", + }, + { + "id": 7, + "name": "Bedroom Alarm", + }, + ]; class Panel extends Component { - constructor(props) { - super(props); - this.state = { - editMode : false, - devices : devices, - }; - } - - editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode })); - - changeDeviceData = (deviceId, newSettings) => { - console.log(newSettings.name, " <-- new name --> ", deviceId ); - this.state.devices.map(device => { - if(device.id === deviceId){ - for(let prop in newSettings){ - if(device.hasOwnProperty(prop)){ - if(prop==="name"){ - if(checkMaxLength(newSettings[prop])){ - device[prop] = newSettings[prop]; - } - else{ - alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters."); - } - }else{ - device[prop] = newSettings[prop]; - } - - } - } - } - return null; - }); - this.forceUpdate(); + constructor(props) { + super(props); + this.state = { + editMode: false, + devices: devices, }; + } + + editModeController = (e) => this.setState((prevState) => ({editMode: !prevState.editMode})); + + changeDeviceData = (deviceId, newSettings) => { + console.log(newSettings.name, " <-- new name --> ", deviceId); + this.state.devices.map(device => { + if (device.id === deviceId) { + for (let prop in newSettings) { + if (device.hasOwnProperty(prop)) { + if (prop === "name") { + if (checkMaxLength(newSettings[prop])) { + device[prop] = newSettings[prop]; + } else { + alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters."); + } + } else { + device[prop] = newSettings[prop]; + } + + } + } + } + return null; + }); + this.forceUpdate(); + }; - render() { - return ( -
- - - - - - - - - - - - - - - -
- ) - } + render() { + return ( +
+ + + + + + + + + + + + + + + + + + +
+ ) + } } export default class DevicePanel extends Component { - constructor(props) { - super(props); - this.state = { - shownRoom: "All" - } + constructor(props) { + super(props); + this.state = { + shownRoom: "All" } + } - render() { - return ( - - ) - } + render() { + return ( + + ) + } } diff --git a/smart-hut/src/components/dashboard/devices/DigitalSensor.js b/smart-hut/src/components/dashboard/devices/DigitalSensor.js new file mode 100644 index 0000000..a39e6b3 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/DigitalSensor.js @@ -0,0 +1,58 @@ +/** + * Users can add sensors in their rooms. + * Sensors typically measure physical quantities in a room. + * You must support temperature sensors, humidity sensors, light sensors (which measure luminosity1). + * Sensors have an internal state that cannot be changed by the user. + * For this story, make the sensors return a constant value with some small random error. + */ + +import React, {Component} from "react"; +import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input"; +import {errorStyle, sensorText, style, valueStyle} from "./SensorStyle"; +import {StyledDiv} from "./styleComponents"; +import Settings from "./DeviceSettings"; +import {Image} from "semantic-ui-react"; +import {imageStyle, nameStyle} from "./DigitalSensorStyle"; + +export default class DigitalSensor extends Component { + constructor(props) { + super(props); + this.state = { + value: false, // This value is a boolean, was this type of sensor returns presence/absence + }; + + this.iconOn = "/img/sensorOn.svg"; + this.iconOff = "/img/sensorOff.svg" + } + + setName = () => { + if(this.props.device.name.length > 15){ + return this.props.device.name.slice(0,12) + "..." + } + return this.props.device.name; + }; + + getIcon = () => { + if(this.state.value){ + return this.iconOn; + } + return this.iconOff; + }; + + componentDidMount() { + } + + + render() { + return ( + + this.props.onChangeData(id, newSettings)}/> + +
{this.props.device.name}
+ + ) + } +} diff --git a/smart-hut/src/components/dashboard/devices/DigitalSensorStyle.js b/smart-hut/src/components/dashboard/devices/DigitalSensorStyle.js new file mode 100644 index 0000000..f0fdf12 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/DigitalSensorStyle.js @@ -0,0 +1,17 @@ +export const imageStyle = { + width: "3.5rem", + height: "auto", + position: "absolute", + top: "20%", + left: "50%", + transform: "translateX(-50%)", + filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))" +}; + +export const nameStyle = { + color : "black", + position: "absolute", + top: "40%", + left: "50%", + transform: "translateX(-50%)" +}; diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js index 69a7df8..9817af9 100644 --- a/smart-hut/src/components/dashboard/devices/Light.js +++ b/smart-hut/src/components/dashboard/devices/Light.js @@ -7,11 +7,11 @@ */ import React, {Component} from "react"; -import {iconStyle, StyledDiv, nameStyle} from "./styleComponents"; +import {iconStyle, StyledDiv} from "./styleComponents"; import Settings from "./DeviceSettings"; import {Image} from "semantic-ui-react"; import {CircularInput, CircularProgress, CircularThumb, CircularTrack} from "react-circular-input"; -import {valueStyle, intensityLightStyle, style} from "./LightStyle"; +import {valueStyle, intensityLightStyle, style, nameStyle} from "./LightStyle"; export default class Light extends Component { constructor(props) { diff --git a/smart-hut/src/components/dashboard/devices/LightStyle.js b/smart-hut/src/components/dashboard/devices/LightStyle.js index 046abee..528a2c1 100644 --- a/smart-hut/src/components/dashboard/devices/LightStyle.js +++ b/smart-hut/src/components/dashboard/devices/LightStyle.js @@ -8,7 +8,15 @@ export const valueStyle = { export const intensityLightStyle = { fill: "#3e99ff", - fontSize: "1.5rem", + fontSize: "1.2rem", fontFamily: "Lato", textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)", }; + +export const nameStyle = { + fontSize : "1.2rem", + position: "absolute", + top: "50%", + left: "50%", + transform: "translateX(-50%)" +}; diff --git a/smart-hut/src/components/dashboard/devices/Sensor.js b/smart-hut/src/components/dashboard/devices/Sensor.js index 5aaa7e5..2b80d19 100644 --- a/smart-hut/src/components/dashboard/devices/Sensor.js +++ b/smart-hut/src/components/dashboard/devices/Sensor.js @@ -10,7 +10,7 @@ import React, {Component} from "react"; import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input"; import {errorStyle, sensorText, style, valueStyle} from "./SensorStyle"; -export default class Light extends Component { +export default class Sensor extends Component { constructor(props) { super(props); this.state = { diff --git a/smart-hut/src/components/dashboard/devices/SmartPlug.js b/smart-hut/src/components/dashboard/devices/SmartPlug.js index cd175c1..b5bde7f 100644 --- a/smart-hut/src/components/dashboard/devices/SmartPlug.js +++ b/smart-hut/src/components/dashboard/devices/SmartPlug.js @@ -7,12 +7,11 @@ (kWh) . The user can reset this value. **/ - import React, {Component} from 'react'; -import {iconStyle, nameStyle, StyledDiv} from "./styleComponents"; +import {StyledDiv} from "./styleComponents"; import Settings from "./DeviceSettings"; import {Image} from "semantic-ui-react"; -import {energyConsumedStyle, imageStyle} from "./SmartPlugStyle"; +import {energyConsumedStyle, imageStyle, nameStyle} from "./SmartPlugStyle"; export default class SmartPlug extends Component { constructor(props){ diff --git a/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js b/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js index 4ee42fd..ea74700 100644 --- a/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js +++ b/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js @@ -1,6 +1,7 @@ import {iconStyle} from "./styleComponents"; export const energyConsumedStyle = { + color : "black", fontSize : "1.3rem", position: "absolute", top: "30%", @@ -17,3 +18,11 @@ export const imageStyle = { transform: "translateX(-50%)", filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))" }; + +export const nameStyle = { + color : "black", + position: "absolute", + top: "50%", + left: "50%", + transform: "translateX(-50%)" +}; diff --git a/smart-hut/src/components/dashboard/devices/Switch.js b/smart-hut/src/components/dashboard/devices/Switch.js new file mode 100644 index 0000000..4cc0021 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/Switch.js @@ -0,0 +1,56 @@ +/** + * Users can add on-off switches. A on-off switch can turn on (or off) lights. + * If a light has an intensity level, when it gets switched back on, it gets the last available + * intensity level that was set by the user (or 100% if no such level exists). + * The user can change the state of a switch through the SmartHut interface. + */ + +import React, {Component} from 'react'; +import {StyledDiv} from "./styleComponents"; +import Settings from "./DeviceSettings"; +import {Image} from "semantic-ui-react"; +import {imageStyle, nameStyle} from "./SwitchStyle"; + +export default class Switch extends Component { + constructor(props){ + super(props); + this.state = { + turnedOn: false, + pointingLights : [] + }; + this.iconOn = "/img/switchOn.svg"; + this.iconOff = "/img/switchOff.svg"; + } + + onClickDevice = () => { + this.setState((prevState) => ({turnedOn: !prevState.turnedOn})); + }; + + getIcon = () => { + if(this.state.turnedOn){ + return this.iconOn; + } + return this.iconOff; + }; + + resetEnergyConsumedValue = () => { + // In the settings form there must be an option to restore this value + // along with the rename feature. + } + + componentDidMount() { + } + + render(){ + return ( + {} : this.onClickDevice} style={{textAlign: "center"}}> + this.props.onChangeData(id, newSettings)}/> + +
{this.props.device.name}
+ + ) + } +} diff --git a/smart-hut/src/components/dashboard/devices/SwitchStyle.js b/smart-hut/src/components/dashboard/devices/SwitchStyle.js new file mode 100644 index 0000000..98e75c2 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/SwitchStyle.js @@ -0,0 +1,17 @@ +export const imageStyle = { + width: "4.5rem", + height: "auto", + position: "absolute", + top: "15%", + left: "50%", + transform: "translateX(-50%)", + filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))" +}; + +export const nameStyle = { + color : "black", + position: "absolute", + top: "45%", + left: "50%", + transform: "translateX(-50%)" +}; diff --git a/smart-hut/src/components/dashboard/devices/styleComponents.js b/smart-hut/src/components/dashboard/devices/styleComponents.js index 01c4083..6d3e289 100644 --- a/smart-hut/src/components/dashboard/devices/styleComponents.js +++ b/smart-hut/src/components/dashboard/devices/styleComponents.js @@ -16,9 +16,9 @@ export const editButtonStyle = { export const panelStyle = { position : "relative", backgroundColor: "#fafafa", - height: "100%", + height: "100vh", width: "auto", - padding: "3rem", + padding: "0rem 3rem", }; export const editModeStyle = { diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js index 30f36e0..c0d7411 100644 --- a/smart-hut/src/views/Dashboard.js +++ b/smart-hut/src/views/Dashboard.js @@ -56,21 +56,22 @@ export default class Dashboard extends Component{ handleItemClick(el) { //da fare richiesta get della room e settare activeItem } - + render () { return( + // TODO poner esto otra vez igual que antes.
- - - - - + {/**/} + {/* */} + {/* */} + {/* */} + {/**/} - + From 99f1e169273e02a32f0b1ecf5cd14bf59a191dbf Mon Sep 17 00:00:00 2001 From: christiancp Date: Tue, 17 Mar 2020 23:24:40 +0100 Subject: [PATCH 2/6] Everything related to the settings is done --- smart-hut/src/App.js | 3 +- .../src/components/dashboard/DevicePanel.js | 38 +++-- .../components/dashboard/devices/Device.js | 48 ------- .../dashboard/devices/DeviceSettings.js | 93 ++++-------- .../dashboard/devices/DigitalSensor.js | 2 +- .../src/components/dashboard/devices/Light.js | 136 +++++++++--------- .../dashboard/devices/LightStyle.js | 5 +- .../components/dashboard/devices/NewDevice.js | 2 +- .../components/dashboard/devices/Sensor.js | 80 ++++++----- .../dashboard/devices/SettingsModal.js | 68 +++++++++ .../components/dashboard/devices/SmartPlug.js | 14 +- .../components/dashboard/devices/Switch.js | 2 +- .../components/dashboard/devices/Switcher.js | 0 .../dashboard/devices/styleComponents.js | 4 +- smart-hut/src/views/Dashboard.js | 11 +- 15 files changed, 253 insertions(+), 253 deletions(-) delete mode 100644 smart-hut/src/components/dashboard/devices/Device.js create mode 100644 smart-hut/src/components/dashboard/devices/SettingsModal.js delete mode 100644 smart-hut/src/components/dashboard/devices/Switcher.js diff --git a/smart-hut/src/App.js b/smart-hut/src/App.js index 5eb7263..232f63e 100644 --- a/smart-hut/src/App.js +++ b/smart-hut/src/App.js @@ -98,8 +98,7 @@ class App extends Component { - //TODO Change this back the exclamation - {!this.state.loggedIn ? : } + {this.state.loggedIn ? : } diff --git a/smart-hut/src/components/dashboard/DevicePanel.js b/smart-hut/src/components/dashboard/DevicePanel.js index b4b403d..4dfa259 100644 --- a/smart-hut/src/components/dashboard/DevicePanel.js +++ b/smart-hut/src/components/dashboard/DevicePanel.js @@ -2,7 +2,6 @@ import React, {Component} from 'react'; import { Grid, } from "semantic-ui-react"; -import Device from "./devices/Device"; import NewDevice from "./devices/NewDevice"; import {LightDevice, SmartPlugDevice} from "./devices/TypesOfDevices"; import {editButtonStyle, panelStyle} from "./devices/styleComponents"; @@ -12,6 +11,7 @@ import SmartPlug from "./devices/SmartPlug"; import Sensor from "./devices/Sensor"; import DigitalSensor from "./devices/DigitalSensor"; import Switch from "./devices/Switch"; +import SettingsModal from "./devices/SettingsModal"; const devices = [ @@ -44,7 +44,7 @@ const devices = [ { "id": 5, "name": "Smart Plug", - "type": "smartplug", + "type": "smart-plug", ...SmartPlugDevice }, { @@ -64,12 +64,18 @@ class Panel extends Component { constructor(props) { super(props); this.state = { - editMode: false, devices: devices, + + editMode: false, + openSettingsModal: false, + settingsDeviceId: null, }; } - editModeController = (e) => this.setState((prevState) => ({editMode: !prevState.editMode})); + editModeController = (e) => { + this.setState((prevState) => ({editMode: !prevState.editMode})); + console.log("CAMBIADO", this.state.editMode) + }; changeDeviceData = (deviceId, newSettings) => { console.log(newSettings.name, " <-- new name --> ", deviceId); @@ -95,23 +101,35 @@ class Panel extends Component { this.forceUpdate(); }; + openModal = (settingsDeviceId) => { + this.setState(prevState => ({ + openSettingsModal: !prevState.openSettingsModal, + settingsDeviceId: settingsDeviceId + })); + }; render() { + const edit = { + mode: this.state.editMode, + openModal: this.openModal, + }; return (
+ {this.state.openSettingsModal ? + d.id === this.state.settingsDeviceId)[0]}/> : ""} - + + + + - + - - - - + diff --git a/smart-hut/src/components/dashboard/devices/Device.js b/smart-hut/src/components/dashboard/devices/Device.js deleted file mode 100644 index d1fb1f0..0000000 --- a/smart-hut/src/components/dashboard/devices/Device.js +++ /dev/null @@ -1,48 +0,0 @@ -import React, {Component} from 'react'; -import {Image} from "semantic-ui-react"; -import {iconStyle, nameStyle, StyledDiv} from "./styleComponents"; -import Settings from './DeviceSettings'; - - -export default class Device extends Component { - constructor(props) { - super(props); - this.state = { - turnOnOff: "off", - icon: this.props.device.img - } - } - - onClickDevice = () => { - if (!this.props.edit) { - if (this.props.device.type === "light") { - if (this.state.turnOnOff === "on") { - this.setState({ - turnOnOff: "off", - icon: this.props.device.img - }); - } else { - this.setState({ - turnOnOff: "on", - icon: this.props.device.imgClick - }); - } - } - } - }; - render() { - return ( - { - } : this.onClickDevice} style={{textAlign: "center"}}> - this.props.onChangeData(id, newSettings)}/> - -
{this.props.device.name}
- - ) - } -} - - diff --git a/smart-hut/src/components/dashboard/devices/DeviceSettings.js b/smart-hut/src/components/dashboard/devices/DeviceSettings.js index 7fe9884..c8e2fce 100644 --- a/smart-hut/src/components/dashboard/devices/DeviceSettings.js +++ b/smart-hut/src/components/dashboard/devices/DeviceSettings.js @@ -1,73 +1,34 @@ import React, {Component} from "react"; -import {Button, Form} from "semantic-ui-react"; -import {editModeIconStyle, editModeStyle, formStyle} from "./styleComponents"; - -class SettingsForm extends Component { - constructor(props) { - super(props); - this.state = {} - }; - - onChangeHandler = (event) => { - let nam = event.target.name; - let val = event.target.value; - this.setState({[nam]: val}); - }; - - saveChanges = () => { - let newName = this.state["new-name"]; - this.props.onChangeData(this.props.id, {"name": newName}); - }; - - render() { - return ( -
- - - - - -
- ) - } -} +import {editModeIconStyle, editModeStyle} from "./styleComponents"; export default class Settings extends Component { - constructor(props) { - super(props); - this.state = { - displayForm: false, - } - }; + constructor(props) { + super(props); + this.state = { + displayForm: true, + } + }; - displayForm = () => { - this.setState((prevState) => ({displayForm: !prevState.displayForm})); - }; + displayForm = () => { + this.setState((prevState) => ({displayForm: !prevState.displayForm})); + }; - render() { - const view = ( -
- {this.state.displayForm ? ( - ) : ("")} -
- - {!this.state.displayForm ? ( - ) - : -

×

- } - -
-
- ); - return ( - - {this.props.edit ? view : ("")} - - ) - }; + render() { + const view = ( +
this.props.edit.openModal(this.props.deviceId)}> + + + +
+ ); + return ( + + {this.props.edit.mode ? view : ("")} + + ) + }; } diff --git a/smart-hut/src/components/dashboard/devices/DigitalSensor.js b/smart-hut/src/components/dashboard/devices/DigitalSensor.js index a39e6b3..cbc026c 100644 --- a/smart-hut/src/components/dashboard/devices/DigitalSensor.js +++ b/smart-hut/src/components/dashboard/devices/DigitalSensor.js @@ -45,7 +45,7 @@ export default class DigitalSensor extends Component { render() { return ( - + { - this.setState((prevState) => ({turnedOn: !prevState.turnedOn})); + constructor(props) { + super(props); + this.state = { + turnedOn: false, + hasIntensity: false }; + this.iconOn = "/img/lightOn.svg"; + this.iconOff = "/img/lightOff.svg" + } - setIntensity = (newValue) => { - this.setState({intensityLevel : newValue}); - }; + onClickDevice = () => { + this.setState((prevState) => ({turnedOn: !prevState.turnedOn})); + }; - getIcon = () => { - if(this.state.turnedOn){ - return this.iconOn; - } - return this.iconOff; - }; - - componentDidMount() { - if(this.props.device.hasOwnProperty("hasIntensity") && this.props.device.hasOwnProperty("intensityLevel")) { - this.setState({ - hasIntensity: this.props.device.hasIntensity, - intensityLevel: this.props.device.intensityLevel - }); - } - // Get the state and update it + setIntensity = (newValue) => { + this.setState({intensityLevel: newValue}); + }; + getIcon = () => { + if (this.state.turnedOn) { + return this.iconOn; } + return this.iconOff; + }; - - render() { - const intensityLightView = ( - - - - - - - {Math.round(this.state.intensityLevel*100)}% - - - {this.props.device.name} - - - ); - - const normalLightView = ( - { - } : this.onClickDevice} style={{textAlign: "center"}}> - this.props.onChangeData(id, newSettings)}/> - -
{this.props.device.name}
- - ); - - return ( - - {this.state.hasIntensity ? (intensityLightView) : (normalLightView)} - - ) + componentDidMount() { + if (this.props.device.hasOwnProperty("hasIntensity") && this.props.device.hasOwnProperty("intensityLevel")) { + this.setState({ + hasIntensity: this.props.device.hasIntensity, + intensityLevel: this.props.device.intensityLevel + }); } + // Get the state and update it + + } + + + render() { + const intensityLightView = ( + + + + + + + {Math.round(this.state.intensityLevel * 100)}% + + + {this.props.device.name} + + + ); + + const normalLightView = ( +
{ + } : this.onClickDevice}> + +
{this.props.device.name}
+
+ ); + + return ( + + this.props.onChangeData(id, newSettings)}/> + {this.state.hasIntensity ? (intensityLightView) : (normalLightView)} + + ) + } } diff --git a/smart-hut/src/components/dashboard/devices/LightStyle.js b/smart-hut/src/components/dashboard/devices/LightStyle.js index 528a2c1..a6e672d 100644 --- a/smart-hut/src/components/dashboard/devices/LightStyle.js +++ b/smart-hut/src/components/dashboard/devices/LightStyle.js @@ -14,9 +14,10 @@ export const intensityLightStyle = { }; export const nameStyle = { - fontSize : "1.2rem", + fontSize : "1rem", position: "absolute", top: "50%", left: "50%", - transform: "translateX(-50%)" + transform: "translateX(-50%)", + color : "black" }; diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js index ddf4e4d..1fc4428 100644 --- a/smart-hut/src/components/dashboard/devices/NewDevice.js +++ b/smart-hut/src/components/dashboard/devices/NewDevice.js @@ -97,7 +97,7 @@ export default class NewDevice extends Component { render() { return ( - + {this.state.openForm ? ( diff --git a/smart-hut/src/components/dashboard/devices/Sensor.js b/smart-hut/src/components/dashboard/devices/Sensor.js index 2b80d19..23cbc51 100644 --- a/smart-hut/src/components/dashboard/devices/Sensor.js +++ b/smart-hut/src/components/dashboard/devices/Sensor.js @@ -9,48 +9,56 @@ import React, {Component} from "react"; import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input"; import {errorStyle, sensorText, style, valueStyle} from "./SensorStyle"; +import Settings from "./DeviceSettings"; +import {StyledDiv} from "./styleComponents"; export default class Sensor extends Component { - constructor(props) { - super(props); - this.state = { - turnedOn: false, - value: 20, - error : 2.4 - }; - this.units = "ºC" - } - - setName = () => { - if(this.props.device.name.length > 15){ - return this.props.device.name.slice(0,12) + "..." - } - return this.props.device.name; + constructor(props) { + super(props); + this.state = { + turnedOn: false, + value: 20, + error: 2.4 }; + this.units = "ºC" + } - componentDidMount() { + setName = () => { + if (this.props.device.name.length > 15) { + return this.props.device.name.slice(0, 12) + "..." } + return this.props.device.name; + }; + + componentDidMount() { + } - render() { - return ( - - - + render() { + return ( + + this.props.onChangeData(id, newSettings)}/> - - {Math.round(this.state.value)}{this.units} - - - ±{this.state.error} - - - {this.setName()} - - - ) - } + + + + + {Math.round(this.state.value)}{this.units} + + + ±{this.state.error} + + + {this.setName()} + + + + ) + } } diff --git a/smart-hut/src/components/dashboard/devices/SettingsModal.js b/smart-hut/src/components/dashboard/devices/SettingsModal.js new file mode 100644 index 0000000..abcb357 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/SettingsModal.js @@ -0,0 +1,68 @@ +import React, {Component, useState} from 'react'; +import {Button, Checkbox, Form, Modal} from "semantic-ui-react"; + +const SettingsForm = (props) => { + + const handleInputChange = e => { + const {name, value} = e.target; + setValues({...values, [name]: value}) + }; + + const handleCheckboxChange = (e,d) => { + const {name, checked} = d; + setValues({...values, [name]: checked}) + }; + + const [values, setValues] = useState({name: ''}); + + return ( +
+ + + + + {props.type === "smart-plug" ? ( + + + + ) : ""} + +
+ ) +} + +export default class SettingsModal extends Component { + + constructor(props) { + super(props); + this.state = { + open: true, + }; + } + + handleClose = () => { + this.setState({open: false}); + }; + + saveSettings = (device) => { + // TODO Here there should be all the connections to save the data in the backend + console.log("SAVED: ", device); + + this.props.openModal(); + }; + + render() { + const SettingsModal = () => ( + + Settings of {this.props.device.name} + + + + + ); + return ( + + ) + } + +} diff --git a/smart-hut/src/components/dashboard/devices/SmartPlug.js b/smart-hut/src/components/dashboard/devices/SmartPlug.js index b5bde7f..0c07ba4 100644 --- a/smart-hut/src/components/dashboard/devices/SmartPlug.js +++ b/smart-hut/src/components/dashboard/devices/SmartPlug.js @@ -1,11 +1,8 @@ /** - A smart plug is a plug that has a boolean internal state, i.e., that can be turned on or off, either with the SmartHut interface or by a switch. - The smart plug also stores the total energy consumed while the plug is active, in terms of kilowatt-hours - 2 - (kWh) . The user can reset this value. - + The smart plug also stores the total energy consumed while the plug is active, in terms of kilowatt-hours 2(kWh) . + The user can reset this value. **/ import React, {Component} from 'react'; import {StyledDiv} from "./styleComponents"; @@ -35,17 +32,12 @@ export default class SmartPlug extends Component { return this.iconOff; }; - resetEnergyConsumedValue = () => { - // In the settings form there must be an option to restore this value - // along with the rename feature. - } - componentDidMount() { } render(){ return ( - {} : this.onClickDevice} style={{textAlign: "center"}}> + {} : this.onClickDevice}> {} : this.onClickDevice} style={{textAlign: "center"}}> + {} : this.onClickDevice}> - {/**/} - {/* */} - {/* */} - {/* */} - {/**/} + + + + + From edf1706986e479f3ab3b27b05009072bca4b19e3 Mon Sep 17 00:00:00 2001 From: christiancp Date: Wed, 18 Mar 2020 14:18:37 +0100 Subject: [PATCH 3/6] 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 - + */} From 70e5dc8017b27b1f9746fbec528c68fdab288f6e Mon Sep 17 00:00:00 2001 From: christiancp Date: Wed, 18 Mar 2020 14:19:47 +0100 Subject: [PATCH 4/6] change button color --- smart-hut/src/components/dashboard/devices/SettingsModal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/smart-hut/src/components/dashboard/devices/SettingsModal.js b/smart-hut/src/components/dashboard/devices/SettingsModal.js index abcb357..ac5f982 100644 --- a/smart-hut/src/components/dashboard/devices/SettingsModal.js +++ b/smart-hut/src/components/dashboard/devices/SettingsModal.js @@ -26,7 +26,7 @@ const SettingsForm = (props) => { ) : ""} - + ) } From cd12d5f69f1c51230bb0a1028001409f37eb9938 Mon Sep 17 00:00:00 2001 From: christiancp Date: Wed, 18 Mar 2020 15:12:12 +0100 Subject: [PATCH 5/6] minor error fixed --- smart-hut/src/views/Dashboard.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js index 75222fc..10be5e6 100644 --- a/smart-hut/src/views/Dashboard.js +++ b/smart-hut/src/views/Dashboard.js @@ -63,10 +63,9 @@ export default class Dashboard extends Component{ - {/*TODO change this back - */} + From d7399abdea1ecfb3a8073d7edef4f9ec4bb71f17 Mon Sep 17 00:00:00 2001 From: Claudio Maggioni Date: Wed, 18 Mar 2020 15:49:33 +0100 Subject: [PATCH 6/6] Removed TODO --- smart-hut/src/App.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/smart-hut/src/App.js b/smart-hut/src/App.js index efde975..0054987 100644 --- a/smart-hut/src/App.js +++ b/smart-hut/src/App.js @@ -98,8 +98,7 @@ class App extends Component { - {/* ToDO change this back */} - {!this.state.loggedIn ? : } + {this.state.loggedIn ? : }