From 744f1b571042e7b74d8c7e8a1fa0128f65be65b0 Mon Sep 17 00:00:00 2001 From: christiancp Date: Tue, 17 Mar 2020 17:38:03 +0100 Subject: [PATCH] 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.
- - - - - + {/**/} + {/* */} + {/* */} + {/* */} + {/**/} - +