From c5dbf0139473b7914f3e49d2af8a84033ea92169 Mon Sep 17 00:00:00 2001 From: Fil Cesana Date: Tue, 17 Mar 2020 15:06:40 +0100 Subject: [PATCH 01/10] changed text in homepage, add icons, instruction page still work in progress, changed logo headController --- smart-hut/public/smart-home_index.png | Bin 0 -> 19294 bytes smart-hut/public/title6.png | Bin 0 -> 3537 bytes smart-hut/src/App.js | 4 + smart-hut/src/components/HeaderController.js | 2 +- smart-hut/src/views/Home.js | 15 +- smart-hut/src/views/Instruction.js | 21 ++ smart-hut/yarn.lock | 220 ++++++++++++++++++- 7 files changed, 244 insertions(+), 18 deletions(-) create mode 100644 smart-hut/public/smart-home_index.png create mode 100644 smart-hut/public/title6.png create mode 100644 smart-hut/src/views/Instruction.js diff --git a/smart-hut/public/smart-home_index.png b/smart-hut/public/smart-home_index.png new file mode 100644 index 0000000000000000000000000000000000000000..3b678bc937d690411b9b370e29746b15f26f7866 GIT binary patch literal 19294 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 + + + diff --git a/smart-hut/src/components/HeaderController.js b/smart-hut/src/components/HeaderController.js index 355d08a..e5d8d08 100644 --- a/smart-hut/src/components/HeaderController.js +++ b/smart-hut/src/components/HeaderController.js @@ -20,7 +20,7 @@ const ImageExampleWrapped = () => ( ) const ImageExampleWrapped3 = () => ( - + ) const HeaderExampleIconProp = () => ( diff --git a/smart-hut/src/views/Home.js b/smart-hut/src/views/Home.js index 4937938..3566a33 100644 --- a/smart-hut/src/views/Home.js +++ b/smart-hut/src/views/Home.js @@ -197,11 +197,11 @@ const Home = () => ( In a few steps your home will be fully connected with SmartHut.

- We Make Bananas That Can Dance + Choose between a wide range of devices

- Yes that's right, you thought it was the stuff of dreams, but even bananas can be - bioengineered. + SmartHut is a leading worldwide company in technology innovation. + Explore our website to find the best devices for each room of your home!

@@ -219,12 +219,13 @@ const Home = () => (
- Breaking The Grid, Grabs Your Attention + Have you ever dreamt about a smart home?

- Instead of focusing on content creation and hard work, we have learned how to master the - art of doing nothing by providing massive amounts of whitespace and generic content that - can seem massive, monolithic and worth your attention. + Let us carrying you into the future. With SmartHut, being at home + will be a refreshing experience. With just a few clicks, you will be + able the set the illumination of your entire place. + Follow the intelligent light, follow SmartHut.

- - - - - - - - - - - - - - - - ) - } + 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 03/10] 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 04/10] 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 05/10] 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 06/10] 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 07/10] 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 ? : } From 1757c8e2d724b329e2a6fd64e938deef444743b4 Mon Sep 17 00:00:00 2001 From: Fil Cesana Date: Wed, 18 Mar 2020 16:35:42 +0100 Subject: [PATCH 08/10] Instructions pages done, I will wait until the app is more or less completed before writing the actual instructions, for many thing may change along the way. --- smart-hut/src/views/Instruction.js | 97 +++++++++++++++++++++++++++++- 1 file changed, 96 insertions(+), 1 deletion(-) diff --git a/smart-hut/src/views/Instruction.js b/smart-hut/src/views/Instruction.js index a5bee71..6a58d4a 100644 --- a/smart-hut/src/views/Instruction.js +++ b/smart-hut/src/views/Instruction.js @@ -14,8 +14,103 @@ import { Grid } from "semantic-ui-react"; +const ContainerExampleAlignment = () => ( +
+ + +
Instructions Page
+ + + + + + First Step + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo + ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et + magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa + quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, + arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras + dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend + tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, + enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. + Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean + imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper + ultricies nisi. +

+ + + + Second Step + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo + ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et + magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa + quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, + arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras + dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend + tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, + enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. + Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean + imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper + ultricies nisi. +

+ + + + Third Step + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo + ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et + magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa + quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, + arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras + dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend + tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, + enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. + Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean + imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper + ultricies nisi. +

+ + + +Last Step + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo + ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et + magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa + quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, + arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras + dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend + tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, + enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. + Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean + imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper + ultricies nisi. +

+ + +
+) + + export default class Insturction extends Component{ render() { - return; + return( + + ) } } \ No newline at end of file From e786288fa8610cc880cc060eb9e44bf14fe65d84 Mon Sep 17 00:00:00 2001 From: britea Date: Thu, 19 Mar 2020 11:52:13 +0100 Subject: [PATCH 09/10] fix all warnings and cleaned code --- smart-hut/src/App.js | 13 +- smart-hut/src/client_server.js | 84 +----------- smart-hut/src/components/HeaderController.js | 10 +- smart-hut/src/components/HomeNavbar.js | 1 - smart-hut/src/components/SelectIcons.js | 3 +- .../src/components/dashboard/DevicePanel.js | 121 ++++++++++-------- .../dashboard/devices/DeviceTypeController.js | 10 +- .../components/dashboard/devices/NewDevice.js | 13 +- .../dashboard/devices/SmartPlugStyle.js | 1 - smart-hut/src/components/modalform.js | 28 ++-- smart-hut/src/views/ConfirmForgotPassword.js | 7 - smart-hut/src/views/ConfirmRegistration.js | 7 - smart-hut/src/views/Dashboard.js | 91 +++++++++---- smart-hut/src/views/Forgot-pass-reset.js | 8 +- smart-hut/src/views/Home.js | 2 - smart-hut/src/views/Navbar.js | 12 +- smart-hut/src/views/NavbarTest.js | 12 -- smart-hut/src/views/TestHeaderController.js | 11 +- 18 files changed, 192 insertions(+), 242 deletions(-) delete mode 100644 smart-hut/src/views/NavbarTest.js diff --git a/smart-hut/src/App.js b/smart-hut/src/App.js index 0054987..1126e85 100644 --- a/smart-hut/src/App.js +++ b/smart-hut/src/App.js @@ -44,18 +44,22 @@ class App extends Component { } componentDidMount() { - if (this.props.location) { - const values = queryString.parse(this.props.location.search); + if (window.location) { + const values = queryString.parse(window.location.search); + console.log(values); this.setState({ query : values }); + } else { + this.setState({ + query : "ciao" + }); } } auth(data) { return call.login(data.params) .then(res => { - console.log(res); if (res.data && res.status === 200) { localStorage.setItem("token", res.data.jwttoken); this.setState( @@ -80,7 +84,6 @@ class App extends Component { }; logout() { - console.log("logout") this.setState({ loggedIn : false, }); @@ -109,7 +112,7 @@ class App extends Component { - + diff --git a/smart-hut/src/client_server.js b/smart-hut/src/client_server.js index 3821dcb..8477ad4 100644 --- a/smart-hut/src/client_server.js +++ b/smart-hut/src/client_server.js @@ -17,132 +17,56 @@ const tkn = localStorage.getItem("token"); export var call = { login: function(data, headers) { return axios.post(config +'auth/login', data) - .then(res => { - return res; - }).catch(err => { - return {status : "Errore"}; - }); }, register: function(data, headers) { return axios.post(config + 'register', data) - .then(res => { - return res; - }).catch(err => { - //console.error(err); - return {status : "Errore"}; - }); }, initResetPassword: function(data, headers) { return axios.post(config + 'register/init-reset-password', data) - .then(res => { - return res; - }).catch(err => { - return {status : "Errore"}; - }); }, resetPassword: function(data, headers) { return axios.put(config + 'register/reset-password', data) - .then(res => { - return res; - }).catch(err => { - return {status : "Errore"}; - }); }, getAllRooms: function(token) { if (!token){ token = tkn; } return axios.get(config + 'room', { headers: { Authorization : "Bearer " + token } }) - .then(res => { - return res; - }).catch(err => { - return err; - }); }, getAllDevices: function(token) { if (!token){ token = tkn; } - return axios.get(config + 'device', { headers: { Authorization : "Bearer " + token } }) - .then(res => { - return res; - }).catch(err => { - return err; - }); + return axios.get(config + 'device', { headers: { Authorization : "Bearer " + token } }); }, getAllDevicesByRoom: function(id, token) { if (!token){ token = tkn; } - return axios.get(config + 'room/' + id + '/devices' , { headers: { Authorization : "Bearer " + token } }) - .then(res => { - return res; - }).catch(err => { - return err; - }); + return axios.get(config + 'room/' + id + '/devices' , { headers: { Authorization : "Bearer " + token } }); }, createRoom: function(data, headers) { return axios.post(config + 'room', data, { headers: { Authorization : "Bearer " + tkn } }) - .then(res => { - return res; - }).catch(err => { - return err; - }); }, updateRoom: function(data, headers) { return axios.put(config + 'room/'+data.id) - .then(res => { - return res; - }).catch(err => { - return err; - }); }, deleteRoom: function(data, headers) { - return axios.delete(config + 'room/'+data.id) - .then(res => { - return res; - }).catch(err => { - return err; - }); + return axios.delete(config + 'room/'+data.id, { headers: { Authorization : "Bearer " + tkn } }); }, devicePost: function(data, headers) { - return axios.post(config + data.device, data.params) - .then(res => { - return res; - }).catch(err => { - return err; - }); + return axios.post(config + data.device, data.params, { headers: { Authorization : "Bearer " + tkn } }) }, deviceUpdate: function(data, headers) { return axios.put(config + data.device, data.params) - .then(res => { - return res; - }).catch(err => { - return err; - }); }, deviceDelete: function(data, headers) { return axios.delete(config + data.device + '/' + data.id, data.params) - .then(res => { - return res; - }).catch(err => { - return err; - }); }, deviceGetById: function(data, headers) { return axios.get(config + data.device + '/' + data.id) - .then(res => { - return res; - }).catch(err => { - return err; - }); }, deviceGetAll: function(data, headers) { return axios.get(config + data.device) - .then(res => { - return res; - }).catch(err => { - return err; - }); } }; diff --git a/smart-hut/src/components/HeaderController.js b/smart-hut/src/components/HeaderController.js index 5bf9c9f..afb59ef 100644 --- a/smart-hut/src/components/HeaderController.js +++ b/smart-hut/src/components/HeaderController.js @@ -1,6 +1,5 @@ -import React, { Component } from "react"; -import { render } from "react-dom"; -import { Button, Menu, Header, Dropdown, Icon, Grid, Divider} from 'semantic-ui-react' +import React from "react"; +import { Dropdown, Icon, Grid, Divider} from 'semantic-ui-react' import { Segment, Image } from 'semantic-ui-react' const ImageExampleWrapped = () => ( @@ -23,10 +22,6 @@ const ImageExampleWrapped3 = () => ( ) -const HeaderExampleIconProp = () => ( -
-) - const GridExampleInverted = (props) => ( @@ -67,7 +62,6 @@ const GridExampleInverted = (props) => ( export default class MyHeader extends React.Component { render() { - console.log(this.props) return (
diff --git a/smart-hut/src/components/HomeNavbar.js b/smart-hut/src/components/HomeNavbar.js index 5bcafb5..651e1a0 100644 --- a/smart-hut/src/components/HomeNavbar.js +++ b/smart-hut/src/components/HomeNavbar.js @@ -1,6 +1,5 @@ import _ from "lodash"; import React, { Component } from "react"; -import { render } from "react-dom"; import { Container, Icon, diff --git a/smart-hut/src/components/SelectIcons.js b/smart-hut/src/components/SelectIcons.js index e9d23f6..f1a7994 100644 --- a/smart-hut/src/components/SelectIcons.js +++ b/smart-hut/src/components/SelectIcons.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Button, Header, Image, Modal, Checkbox, Form, Grid, Input, Icon } from 'semantic-ui-react' +import { Button, Grid } from 'semantic-ui-react' export default class SelectIcons extends Component { @@ -29,7 +29,6 @@ export default class SelectIcons extends Component { ['trophy', 'wrench', 'image', 'book', 'university', 'medkit'], ['paw', 'tree', 'utensils', 'male', 'female', 'life ring outline']]; - var colums = 0; return ( { diff --git a/smart-hut/src/components/dashboard/DevicePanel.js b/smart-hut/src/components/dashboard/DevicePanel.js index cb32a63..a5b4eeb 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 {editButtonStyle, panelStyle} from "./devices/styleComponents"; import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants"; @@ -9,67 +9,76 @@ import NewDevice from "./devices/NewDevice"; export default class DevicePanel extends Component { - constructor(props) { - super(props); - this.state = { - editMode : false, - devices : this.props.devices, - }; - } + constructor(props) { + super(props); + this.state = { + editMode : false, + }; + + this.addDevice = this.addDevice.bind(this); + } - editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode })); + editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode })); - changeDeviceData = (deviceId, newSettings) => { + 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]; + console.log(newSettings.name, " <-- new name --> ", deviceId ); + this.props.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(); + }; - } - } - } - return null; - }); - this.forceUpdate(); - }; + addDevice(data) { + const ds = this.props.addDevice(data); + this.setState({ + devices: ds + }); + } - render() { - return ( -
- - 0 ? this.state.devices.length : 1} divided="vertically"> - { - this.state.devices ? - this.state.devices.map((e, i) => { - return ( - - - - ) - }) - : - null - } - - - - -
- ) - } + render() { + const ds = this.state.devices ? this.state.devices : this.props.devices; + return ( +
+ + 0 ? ds.length : 1} divided="vertically"> + { + ds ? + ds.map((e, i) => { + return ( + + + + ) + }) + : + null + } + + + + +
+ ) + } -} +} diff --git a/smart-hut/src/components/dashboard/devices/DeviceTypeController.js b/smart-hut/src/components/dashboard/devices/DeviceTypeController.js index 2b1cc08..bb8de4d 100644 --- a/smart-hut/src/components/dashboard/devices/DeviceTypeController.js +++ b/smart-hut/src/components/dashboard/devices/DeviceTypeController.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import Light from "./Light"; import SmartPlug from "./SmartPlug"; import Sensor from "./Sensor"; @@ -9,8 +9,8 @@ import Switcher from "./Switch"; const DeviceType = (props) => { switch(props.type) { - case "light": - return + case "regular-light": + return () case "sensor": return case "dimmer": @@ -19,6 +19,10 @@ const DeviceType = (props) => { return case "switch": return + case "light": + return + default: + return "" } } diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js index 122ee96..77aca2e 100644 --- a/smart-hut/src/components/dashboard/devices/NewDevice.js +++ b/smart-hut/src/components/dashboard/devices/NewDevice.js @@ -25,6 +25,7 @@ export default class NewDevice extends Component { openModal : false }; this.baseState = this.state + this.createDevice = this.createDevice.bind(this); } handleOpen = () => {this.setState({openModal : true})}; @@ -59,8 +60,16 @@ export default class NewDevice extends Component { this.setState({lightsAttached : d.value}); }; - createDevice = () => { + createDevice() { // Connect to the backend and create device here. + const data = { + params: { + "name": this.state.deviceName, + }, + device: this.state.typeOfDevice + + } + this.props.addDevice(data); this.resetState(); }; @@ -70,7 +79,7 @@ export default class NewDevice extends Component { { key: 'light', text: 'Normal Light', - value: 'light', + value: 'regularLight', image: {avatar: true, src: '/img/lightOn.svg'}, }, { diff --git a/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js b/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js index ea74700..26b4b9e 100644 --- a/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js +++ b/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js @@ -1,4 +1,3 @@ -import {iconStyle} from "./styleComponents"; export const energyConsumedStyle = { color : "black", diff --git a/smart-hut/src/components/modalform.js b/smart-hut/src/components/modalform.js index 79ca7da..682bd12 100644 --- a/smart-hut/src/components/modalform.js +++ b/smart-hut/src/components/modalform.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Button, Header, Image, Modal, Checkbox, Form, Grid, Input, Icon } from 'semantic-ui-react' +import { Button, Header, Modal, Form, Input, Icon } from 'semantic-ui-react' import SelectIcons from "./SelectIcons"; export default class ModalWindow extends Component { @@ -39,10 +39,7 @@ export default class ModalWindow extends Component { } deleteRoom = (e) => { - let data = { - "id" : this.state.id - } - this.props.deleteRoom(data); + this.props.deleteRoom(); this.closeModal(); } @@ -77,40 +74,39 @@ export default class ModalWindow extends Component { return (
- {this.props.type == "new" ? + {this.props.type === "new" ? : - + null } -
{this.props.type == "new" ? "Add new room" : "Modify room" }
+
{this.props.type === "new" ? "Add new room" : "Modify room" }

Insert the name of the room:

+ value={this.props.type === "new" ? null : this.props.idRoom.name }/>

Insert an image of the room:

+ value={this.props.type === "new" ? null : this.props.idRoom.images }/>

Select an icon:

- {this.props.type == "new" ? "home" : this.props.idRoom.icon } - +
- {this.props.type == "modify" ? + {this.props.type === "modify" ? - diff --git a/smart-hut/src/views/ConfirmForgotPassword.js b/smart-hut/src/views/ConfirmForgotPassword.js index e364f0d..7de5e16 100644 --- a/smart-hut/src/views/ConfirmForgotPassword.js +++ b/smart-hut/src/views/ConfirmForgotPassword.js @@ -1,14 +1,7 @@ import React, { Component } from "react"; -import { render } from "react-dom"; import HomeNavbar from "./../components/HomeNavbar"; import { - Container, - Icon, Image, - Menu, - Sidebar, - Responsive, - Header, Divider, Message, Grid diff --git a/smart-hut/src/views/ConfirmRegistration.js b/smart-hut/src/views/ConfirmRegistration.js index 9bec496..b1c5652 100644 --- a/smart-hut/src/views/ConfirmRegistration.js +++ b/smart-hut/src/views/ConfirmRegistration.js @@ -1,14 +1,7 @@ import React, { Component } from "react"; -import { render } from "react-dom"; import HomeNavbar from "./../components/HomeNavbar"; import { - Container, - Icon, Image, - Menu, - Sidebar, - Responsive, - Header, Divider, Message, Grid diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js index e9d4253..957c204 100644 --- a/smart-hut/src/views/Dashboard.js +++ b/smart-hut/src/views/Dashboard.js @@ -25,62 +25,101 @@ export default class Dashboard extends Component{ }; this.addRoom = this.addRoom.bind(this); + this.deleteRoom = this.deleteRoom.bind(this); + this.addDevice = this.addDevice.bind(this); this.handleItemClick = this.handleItemClick.bind(this); } componentDidMount() { call.getAllRooms(this.props.tkn) .then(res => { - this.setState({ - rooms: res.data - }); + if (res.status === 200){ + this.setState({ + rooms: res.data + }); + } }).catch(err => { - console.log(err); - }); + console.log(err); + }); call.getAllDevices(this.props.tkn) .then(res => { - this.setState({ - devices: res.data - }); + if (res.status === 200) { + this.setState({ + devices: res.data + }); + } }).catch(err => { - console.log(err); - }); + console.log(err); + }); } addRoom(data) { call.createRoom(data) .then(res => { - console.log(res); if (res.status === 200 && res.data) { this.setState(state => ({ rooms: state.rooms.concat([res.data]) })); } }).catch(err => { - console.log(err); - }); + console.log(err); + }); }; - deleteRoom(id) { - call.deleteRoom(id) + deleteRoom() { + let data = { + id : this.state.activeItem + } + call.deleteRoom(data) .then(res => { //remove room in state.rooms }).catch(err => { - console.log(err); - }); + console.log(err); + }); } handleItemClick(id) { // el -> obj of name and id //da fare richiesta get della room e settare activeItem - call.getAllDevicesByRoom(id, this.props.tkn) - .then(res => { - this.setState({ - devices: res.data - }); - }).catch(err => { - console.log(err); + this.setState({ + activeItem: id }); + if ( id === -1) { + call.getAllDevices(this.props.tkn) + .then(res => { + if ( res.status === 200) { + this.setState({ + devices: res.data + }); + } + }).catch(err => { + console.log(err); + }); + } else { + call.getAllDevicesByRoom(id, this.props.tkn) + .then(res => { + if (res.status === 200) { + this.setState({ + devices: res.data + }); + } + }).catch(err => { + console.log(err); + }); + } + } + + addDevice(data) { + data.params["roomId"] = this.state.activeItem; + call.devicePost(data, this.props.tkn) + .then(res => { + this.setState(state => ({ + devices: state.devices.concat([res.data]) + })); + }).catch(err => { + + }); + return this.state.devices; } render () { @@ -94,11 +133,11 @@ export default class Dashboard extends Component{ - + - + diff --git a/smart-hut/src/views/Forgot-pass-reset.js b/smart-hut/src/views/Forgot-pass-reset.js index 170bf1d..0989b91 100644 --- a/smart-hut/src/views/Forgot-pass-reset.js +++ b/smart-hut/src/views/Forgot-pass-reset.js @@ -1,6 +1,7 @@ import React, {Component} from 'react'; import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react'; import { call } from '../client_server'; +import { Redirect } from "react-router-dom"; export default class ChangePass extends Component { @@ -13,6 +14,7 @@ export default class ChangePass extends Component { message: "", } } + this.handleChangePassword = this.handleChangePassword.bind(this); } onChangeHandler = (event) => { @@ -32,14 +34,16 @@ export default class ChangePass extends Component { handleChangePassword = (e) => { const params = { - "confirmationToken" : this.props.query.confirmationToken , + "confirmationToken" : this.props.query.token , "password" : this.state.password } call.resetPassword(params) .then(res => { - if (res.status === "Errore") { + if (res.status !== 200){ this.setState({ error: { state: true, message: "Errore"}}); + } else { + return } // else set a message that an email has been sent }).catch(err => { diff --git a/smart-hut/src/views/Home.js b/smart-hut/src/views/Home.js index 4937938..2cb4cff 100644 --- a/smart-hut/src/views/Home.js +++ b/smart-hut/src/views/Home.js @@ -4,7 +4,6 @@ import HomeNavbar from './../components/HomeNavbar'; import { Button, Container, - Divider, Grid, Header, Icon, @@ -70,7 +69,6 @@ class DesktopContainer extends Component { render() { const { children } = this.props - const { fixed } = this.state return ( diff --git a/smart-hut/src/views/Navbar.js b/smart-hut/src/views/Navbar.js index 121d4b7..de3f183 100644 --- a/smart-hut/src/views/Navbar.js +++ b/smart-hut/src/views/Navbar.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment } from "semantic-ui-react"; +import { Menu, Grid, Icon, Responsive, Segment } from "semantic-ui-react"; import {editButtonStyle} from "../components/dashboard/devices/styleComponents"; import ModalWindow from "../components/modalform"; @@ -19,7 +19,14 @@ class Navbar extends Component { handleClick = (e, {id}) => { console.log(id); + let obj = undefined; + this.props.rooms.forEach((e) => { + if (e.id === id) { + obj = e; + } + }); this.setState({ activeItem: id, + activeRoom: obj }); this.props.handleItemClick(id) } @@ -38,6 +45,7 @@ class Navbar extends Component { - //dropdown menu +
diff --git a/smart-hut/src/views/NavbarTest.js b/smart-hut/src/views/NavbarTest.js deleted file mode 100644 index c108c20..0000000 --- a/smart-hut/src/views/NavbarTest.js +++ /dev/null @@ -1,12 +0,0 @@ -import React, {Component} from 'react'; -import {Button } from 'semantic-ui-react'; - - -export default class NavbarTest extends Component { - - render() { - return ( -

Ciao

- ) - } -} \ No newline at end of file diff --git a/smart-hut/src/views/TestHeaderController.js b/smart-hut/src/views/TestHeaderController.js index 6293908..b0afedb 100644 --- a/smart-hut/src/views/TestHeaderController.js +++ b/smart-hut/src/views/TestHeaderController.js @@ -1,15 +1,6 @@ import _ from "lodash"; -import React, { Component } from "react"; +import React from "react"; import HeaderController from "./../components/HeaderController"; -import { render } from "react-dom"; -import { - Container, - Icon, - Image, - Menu, - Sidebar, - Responsive -} from "semantic-ui-react"; export default class TestHeaderController extends React.Component { render () { From 8b3200f639d5151ebf6324a2dac7985ff279a072 Mon Sep 17 00:00:00 2001 From: britea Date: Fri, 20 Mar 2020 18:42:38 +0100 Subject: [PATCH 10/10] initial setup for device with backend --- smart-hut/src/App.js | 1 + smart-hut/src/client_server.js | 20 +++- .../src/components/dashboard/DevicePanel.js | 104 ++++++++++++++++-- .../dashboard/devices/DeviceTypeController.js | 3 +- .../src/components/dashboard/devices/Light.js | 16 ++- .../components/dashboard/devices/NewDevice.js | 27 +++-- .../dashboard/devices/SettingsModal.js | 26 ++++- .../components/dashboard/devices/Switch.js | 6 +- smart-hut/src/views/Dashboard.js | 6 +- 9 files changed, 172 insertions(+), 37 deletions(-) diff --git a/smart-hut/src/App.js b/smart-hut/src/App.js index 1126e85..d9ceba3 100644 --- a/smart-hut/src/App.js +++ b/smart-hut/src/App.js @@ -62,6 +62,7 @@ class App extends Component { .then(res => { if (res.data && res.status === 200) { localStorage.setItem("token", res.data.jwttoken); + call.setToken(res.data.jwttoken); this.setState( { user: data.params.user, diff --git a/smart-hut/src/client_server.js b/smart-hut/src/client_server.js index 8477ad4..6df5b30 100644 --- a/smart-hut/src/client_server.js +++ b/smart-hut/src/client_server.js @@ -1,7 +1,7 @@ import axios from 'axios'; let config = 'http://localhost:8080/'; -const tkn = localStorage.getItem("token"); +var tkn = localStorage.getItem("token"); // requests data devices /* @@ -12,9 +12,23 @@ const tkn = localStorage.getItem("token"); id: se serve } + + device routes: + - buttonDimmer + - dimmableLight + - knobDimmer + - motionSensor + - regularLight + - sensor + - smartPlug + - switch + */ export var call = { + setToken: function(token) { + tkn = token; + }, login: function(data, headers) { return axios.post(config +'auth/login', data) }, @@ -58,10 +72,10 @@ export var call = { return axios.post(config + data.device, data.params, { headers: { Authorization : "Bearer " + tkn } }) }, deviceUpdate: function(data, headers) { - return axios.put(config + data.device, data.params) + return axios.put(config + 'device', data, { headers: { Authorization : "Bearer " + tkn } }) }, deviceDelete: function(data, headers) { - return axios.delete(config + data.device + '/' + data.id, data.params) + return axios.delete(config + data.device + '/' + data.id, {}, { headers: { Authorization : "Bearer " + tkn } }) }, deviceGetById: function(data, headers) { return axios.get(config + data.device + '/' + data.id) diff --git a/smart-hut/src/components/dashboard/DevicePanel.js b/smart-hut/src/components/dashboard/DevicePanel.js index a5b4eeb..52466d6 100644 --- a/smart-hut/src/components/dashboard/DevicePanel.js +++ b/smart-hut/src/components/dashboard/DevicePanel.js @@ -6,6 +6,8 @@ import {editButtonStyle, panelStyle} from "./devices/styleComponents"; import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants"; import DeviceType from './devices/DeviceTypeController'; import NewDevice from "./devices/NewDevice"; +import SettingsModal from "./devices/SettingsModal"; +import { call } from '../../client_server'; export default class DevicePanel extends Component { @@ -20,6 +22,13 @@ export default class DevicePanel extends Component { editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode })); + openModal = (settingsDeviceId) => { + this.setState(prevState => ({ + openSettingsModal: !prevState.openSettingsModal, + settingsDeviceId: settingsDeviceId + })) + } + changeDeviceData = (deviceId, newSettings) => { console.log(newSettings.name, " <-- new name --> ", deviceId ); @@ -46,35 +55,116 @@ export default class DevicePanel extends Component { this.forceUpdate(); }; - addDevice(data) { - const ds = this.props.addDevice(data); + getDevices() { + if (this.props.activeItem === -1) { + call.getAllDevices() + .then(res => { + if ( res.status === 200) { + this.setState({ + devices: res.data + }); + } + }).catch(err => { + console.log(err); + }); + } else { + call.getAllDevicesByRoom(this.state.settingsDeviceId) + .then(res => { + if (res.status === 200) { + this.setState({ + devices: res.data + }); + } + }).catch(err => { + + }); + } + } + + async addDevice(data) { + const ds = await this.props.addDevice(data); this.setState({ devices: ds }); + this.forceUpdate(); + } + + updateDevice = (data) => { + const roomId = this.props.devices.filter(d => d.id === this.state.settingsDeviceId)[0].roomId; + console.log(roomId) + data["id"] = this.state.settingsDeviceId; + data["roomId"] = roomId; + call.deviceUpdate(data) + .then(res => { + if (res.status === 200) { + this.getDevices(); + } + }).catch(err => { + + }) + } + + removeDevice = () => { + const item = this.props.devices.filter(d => d.id === this.state.settingsDeviceId)[0]; + console.log(item) + const data = { + device: item.kind, + id: this.state.settingsDeviceId + }; + + call.deviceDelete(data) + .then(res => { + console.log(res) + if (res.status === 200) { + this.getDevices(); + } + }).catch(err => { + + }); } + + + + render() { + const edit = { + mode: this.state.editMode, + openModal: this.openModal, + }; const ds = this.state.devices ? this.state.devices : this.props.devices; return (
- 0 ? ds.length : 1} divided="vertically"> + + {this.state.openSettingsModal ? + d.id === this.state.settingsDeviceId)[0]}/> : "" + } { ds ? ds.map((e, i) => { + return ( - + ) }) : null } - - - + { + this.props.activeItem !== -1 ? + + + + : + null + }
) diff --git a/smart-hut/src/components/dashboard/devices/DeviceTypeController.js b/smart-hut/src/components/dashboard/devices/DeviceTypeController.js index bb8de4d..9049fd6 100644 --- a/smart-hut/src/components/dashboard/devices/DeviceTypeController.js +++ b/smart-hut/src/components/dashboard/devices/DeviceTypeController.js @@ -6,7 +6,6 @@ import DefaultDimmer from "./Dimmer"; import Switcher from "./Switch"; - const DeviceType = (props) => { switch(props.type) { case "regular-light": @@ -20,7 +19,7 @@ const DeviceType = (props) => { case "switch": return case "light": - return + return () default: return "" } diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js index 53ac67a..c307da6 100644 --- a/smart-hut/src/components/dashboard/devices/Light.js +++ b/smart-hut/src/components/dashboard/devices/Light.js @@ -18,7 +18,6 @@ export default class Light extends Component { super(props); this.state = { turnedOn: false, - hasIntensity: false }; this.iconOn = "/img/lightOn.svg"; this.iconOff = "/img/lightOff.svg" @@ -29,7 +28,7 @@ export default class Light extends Component { }; setIntensity = (newValue) => { - this.setState({intensityLevel: newValue}); + this.setState({intensity: newValue}); }; getIcon = () => { @@ -40,10 +39,9 @@ export default class Light extends Component { }; componentDidMount() { - if (this.props.device.hasOwnProperty("hasIntensity") && this.props.device.hasOwnProperty("intensityLevel")) { + if (this.props.device.hasOwnProperty("intensity")) { this.setState({ - hasIntensity: this.props.device.hasIntensity, - intensityLevel: this.props.device.intensityLevel + intensity: this.props.device.intensity }); } // Get the state and update it @@ -54,7 +52,7 @@ export default class Light extends Component { render() { const intensityLightView = ( @@ -63,7 +61,7 @@ export default class Light extends Component { - {Math.round(this.state.intensityLevel * 100)}% + {Math.round(this.state.intensity * 100)}% {this.props.device.name} @@ -78,14 +76,14 @@ export default class Light extends Component {
{this.props.device.name}
); - + return ( this.props.onChangeData(id, newSettings)}/> - {this.state.hasIntensity ? (intensityLightView) : (normalLightView)} + {this.state.intensity ? (intensityLightView) : (normalLightView)} ) } diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js index 77aca2e..e3ddf2a 100644 --- a/smart-hut/src/components/dashboard/devices/NewDevice.js +++ b/smart-hut/src/components/dashboard/devices/NewDevice.js @@ -45,7 +45,12 @@ export default class NewDevice extends Component { }; setTypeOfDevice = (e, d) => { - this.setState({typeOfDevice: d.value}); + if (d.value === "dimmableLight"){ + this.setState({typeOfDevice: d.value, + intensity: 0,}); + } else { + this.setState({typeOfDevice: d.value,}); + } }; setDeviceName = (e, d) => { @@ -69,6 +74,14 @@ export default class NewDevice extends Component { device: this.state.typeOfDevice } + + switch(this.state.typeOfDevice) { + case "dimmableLight": + data.params["intensity"] = 1; + break; + default: + break; + } this.props.addDevice(data); this.resetState(); }; @@ -85,13 +98,13 @@ export default class NewDevice extends Component { { key: 'intensity-light', text: 'Intensity Light', - value: 'intensity-light', + value: 'dimmableLight', image: {avatar: true, src: '/img/intensity-light.svg'}, }, { key: 'smart-plug', text: 'Smart Plug', - value: 'smart-plug', + value: 'smartPlug', image: {avatar: true, src: '/img/smart-plug.svg'}, }, { @@ -117,25 +130,25 @@ export default class NewDevice extends Component { { key: "temperature", text: "Temperature Sensor", - value: "temperature", + value: "TEMPERATURE", image: {avatar: true, src: '/img/temperature-sensor.svg'}, }, { key: "humidity", text: "Humidity Sensor", - value: "humidity", + value: "HUMIDITY", image: {avatar: true, src: '/img/humidity-sensor.svg'}, }, { key: "light", text: "Light Sensor", - value: "light", + value: "LIGHT", image: {avatar: true, src: '/img/light-sensor.svg'}, }, { key: "motion", text: "Motion Sensor", - value: "motion", + value: "motionSensor", image: {avatar: true, src: '/img/sensorOn.svg'}, } ]; diff --git a/smart-hut/src/components/dashboard/devices/SettingsModal.js b/smart-hut/src/components/dashboard/devices/SettingsModal.js index ac5f982..3166cc2 100644 --- a/smart-hut/src/components/dashboard/devices/SettingsModal.js +++ b/smart-hut/src/components/dashboard/devices/SettingsModal.js @@ -1,5 +1,19 @@ import React, {Component, useState} from 'react'; -import {Button, Checkbox, Form, Modal} from "semantic-ui-react"; +import {Button, Checkbox, Form, Icon, Header, Modal} from "semantic-ui-react"; + +const DeleteModal = (props) => ( + Remove} closeIcon> +
+ + + + + +) const SettingsForm = (props) => { @@ -21,11 +35,15 @@ const SettingsForm = (props) => { + {props.type === "smart-plug" ? ( ) : ""} + + props.removeDevice(values)} /> + ) @@ -47,16 +65,20 @@ export default class SettingsModal extends Component { saveSettings = (device) => { // TODO Here there should be all the connections to save the data in the backend console.log("SAVED: ", device); + if (device.name.length > 0) { + this.props.updateDevice(device); + } this.props.openModal(); }; + render() { const SettingsModal = () => ( Settings of {this.props.device.name} - + ); diff --git a/smart-hut/src/components/dashboard/devices/Switch.js b/smart-hut/src/components/dashboard/devices/Switch.js index 20a0cee..20080b3 100644 --- a/smart-hut/src/components/dashboard/devices/Switch.js +++ b/smart-hut/src/components/dashboard/devices/Switch.js @@ -33,12 +33,8 @@ export default class Switch 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(){ diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js index 957c204..f84c813 100644 --- a/smart-hut/src/views/Dashboard.js +++ b/smart-hut/src/views/Dashboard.js @@ -99,6 +99,7 @@ export default class Dashboard extends Component{ call.getAllDevicesByRoom(id, this.props.tkn) .then(res => { if (res.status === 200) { + console.log(res.data); this.setState({ devices: res.data }); @@ -116,12 +117,13 @@ export default class Dashboard extends Component{ this.setState(state => ({ devices: state.devices.concat([res.data]) })); + return this.state.devices; }).catch(err => { }); - return this.state.devices; } + render () { return(
@@ -137,7 +139,7 @@ export default class Dashboard extends Component{ - +