From ab1e911ccd4144c2a6b4c6068352650f317bd61a Mon Sep 17 00:00:00 2001 From: christiancp Date: Wed, 25 Mar 2020 16:04:02 +0100 Subject: [PATCH] Working on conflicts --- smart-hut/package-lock.json | 14 +++ smart-hut/public/img/humidityIcon.svg | 12 ++ smart-hut/public/img/lightSensorIcon.svg | 58 +++++++++ smart-hut/public/img/motionSensorIcon.svg | 62 ++++++++++ smart-hut/public/img/temperatureIcon.svg | 18 +++ .../src/components/dashboard/devices/Light.js | 62 ++++------ .../dashboard/devices/LightStyle.js | 12 +- .../components/dashboard/devices/NewDevice.js | 12 +- .../components/dashboard/devices/Sensor.js | 111 ++++++++++++------ .../dashboard/devices/SensorStyle.js | 78 +++++++++++- .../components/dashboard/devices/SmartPlug.js | 25 ++-- .../components/dashboard/devices/Switch.js | 8 +- .../dashboard/devices/SwitchStyle.js | 11 ++ .../dashboard/devices/styleComponents.js | 5 +- 14 files changed, 381 insertions(+), 107 deletions(-) create mode 100644 smart-hut/public/img/humidityIcon.svg create mode 100644 smart-hut/public/img/lightSensorIcon.svg create mode 100644 smart-hut/public/img/motionSensorIcon.svg create mode 100644 smart-hut/public/img/temperatureIcon.svg diff --git a/smart-hut/package-lock.json b/smart-hut/package-lock.json index 11b699e..b2d2c82 100644 --- a/smart-hut/package-lock.json +++ b/smart-hut/package-lock.json @@ -10483,6 +10483,12 @@ "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" }, + "prettier": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.1.tgz", + "integrity": "sha512-piXGBcY1zoFOG0MvHpNE5reAGseLmaCRifQ/fmfF49BcYkInEs/naD/unxGNAeOKFA5+JxVrPyMvMlpzcd20UA==", + "dev": true + }, "pretty-bytes": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz", @@ -10897,6 +10903,14 @@ } } }, + "react-device-detect": { + "version": "1.11.14", + "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-1.11.14.tgz", + "integrity": "sha512-WSjch241xI+rXHVtJaSYxNUT2WAykzfJgMI2Hg9xjNNTlIZdJu/fmWf4iedNH7qzFq+JaJ6fDJu3mrKFLerKBw==", + "requires": { + "ua-parser-js": "^0.7.20" + } + }, "react-dom": { "version": "16.12.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.12.0.tgz", diff --git a/smart-hut/public/img/humidityIcon.svg b/smart-hut/public/img/humidityIcon.svg new file mode 100644 index 0000000..aacac30 --- /dev/null +++ b/smart-hut/public/img/humidityIcon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/smart-hut/public/img/lightSensorIcon.svg b/smart-hut/public/img/lightSensorIcon.svg new file mode 100644 index 0000000..f2836c2 --- /dev/null +++ b/smart-hut/public/img/lightSensorIcon.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/smart-hut/public/img/motionSensorIcon.svg b/smart-hut/public/img/motionSensorIcon.svg new file mode 100644 index 0000000..ff89667 --- /dev/null +++ b/smart-hut/public/img/motionSensorIcon.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/smart-hut/public/img/temperatureIcon.svg b/smart-hut/public/img/temperatureIcon.svg new file mode 100644 index 0000000..414c428 --- /dev/null +++ b/smart-hut/public/img/temperatureIcon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js index 7ef0ad1..1ba9bb8 100644 --- a/smart-hut/src/components/dashboard/devices/Light.js +++ b/smart-hut/src/components/dashboard/devices/Light.js @@ -9,14 +9,13 @@ */ import React, { Component } from "react"; -import { iconStyle, StyledDiv, ThumbText } from "./styleComponents"; +import { iconStyle, StyledDiv, BottomPanel, ThumbText } from "./styleComponents"; import Settings from "./DeviceSettings"; import { Image } from "semantic-ui-react"; import { CircularInput, CircularProgress, CircularThumb, - CircularTrack, } from "react-circular-input"; import { LightDimmerContainer, @@ -27,7 +26,9 @@ import { CircularThumbStyle, knobIcon } from "./LightStyle"; -import { call } from "../../../client_server"; +import { call } from '../../../client_server'; + + export default class Light extends Component { constructor(props) { @@ -37,33 +38,17 @@ export default class Light extends Component { intensity: props.device.intensity, }; this.iconOn = "/img/lightOn.svg"; - this.iconOff = "/img/lightOff.svg"; - - this.stateCallback = (e) => { - const update = {}; - if (e.kind === "dimmableLight") { - update.intensity = e.intensity; - } else { - update.turnedOn = e.on; - } - - this.setState(Object.assign(this.state, update)); - }; - - call.socketSubscribe(this.props.device.id, this.stateCallback); - } - - componentWillUnmount() { - call.socketUnsubscribe(this.props.device.id, this.stateCallback); + this.iconOff = "/img/lightOff.svg" } onClickDevice = () => { this.props.device.on = !this.state.turnedOn; - call.deviceUpdate(this.props.device, "regularLight").then((res) => { - if (res.status === 200) { - this.setState((prevState) => ({ turnedOn: !prevState.turnedOn })); - } - }); + call.deviceUpdate(this.props.device, 'regularLight') + .then(res => { + if (res.status === 200) { + this.setState((prevState) => ({ turnedOn: !prevState.turnedOn })); + } + }) }; @@ -90,6 +75,7 @@ export default class Light extends Component { }; + render() { const intensityLightView = (
@@ -111,24 +97,24 @@ export default class Light extends Component {
); - const normalLightView = ( -
{ - } : this.onClickDevice}> - -
{this.props.device.name}
-
- - - ); - - return ( -
this.props.onChangeData(id, newSettings)} /> +
{ + } : this.onClickDevice}> + + +
{this.props.device.name}
+ +
+ + ); + + return ( +
{ this.props.device.intensity ? (intensityLightView) : (normalLightView) } diff --git a/smart-hut/src/components/dashboard/devices/LightStyle.js b/smart-hut/src/components/dashboard/devices/LightStyle.js index 7d78a46..6273125 100644 --- a/smart-hut/src/components/dashboard/devices/LightStyle.js +++ b/smart-hut/src/components/dashboard/devices/LightStyle.js @@ -1,10 +1,4 @@ -export const style = { - width: "10rem", - height: "10rem", - position: "absolute", - top: "0", - left: "0", -}; + export const valueStyle = { fill: "#3e99ff", fontSize: "2.5rem", @@ -30,10 +24,10 @@ export const textStyle = { export const nameStyle = { fontSize: "1rem", position: "absolute", - top: "50%", + top: "30%", left: "50%", transform: "translateX(-50%)", - color: "black", + color: "white", }; export const LightDimmerStyle = { diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js index 81b309d..4df5900 100644 --- a/smart-hut/src/components/dashboard/devices/NewDevice.js +++ b/smart-hut/src/components/dashboard/devices/NewDevice.js @@ -147,18 +147,18 @@ export default class NewDevice extends Component { value: "switch", image: { avatar: true, src: "/img/switchOn.svg" }, }, + { + key: 'knobDimmer', + text: 'Knob Dimmer', + value: 'knobDimmer', + image: { avatar: true, src: '/img/knob.svg' }, + }, { key: 'buttonDimmer', text: 'Button Dimmer', value: 'buttonDimmer', image: { avatar: true, src: '/img/plusMinus.svg' }, }, - { - key: "knobDimmer", - text: "Knob Dimmer", - value: "knobDimmer", - image: { avatar: true, src: "/img/dimmer.svg" }, - }, ]; const sensorOptions = [ { diff --git a/smart-hut/src/components/dashboard/devices/Sensor.js b/smart-hut/src/components/dashboard/devices/Sensor.js index b02c072..9e7ab37 100644 --- a/smart-hut/src/components/dashboard/devices/Sensor.js +++ b/smart-hut/src/components/dashboard/devices/Sensor.js @@ -25,7 +25,20 @@ import { CircularProgress, CircularTrack, } from "react-circular-input"; -import { sensorText, style, valueStyle } from "./SensorStyle"; +import { + container, + sensorText, + style, + valueStyle, + motionSensorInnerCircle, + motionSensorOuterCircle, + nameMotionStyle, + motionSensorIcon, + temperatureSensorColors, + lightSensorColors, + humiditySensorColors, + iconSensorStyle +} from "./SensorStyle"; import Settings from "./DeviceSettings"; import { StyledDiv } from "./styleComponents"; import { call } from "../../../client_server"; @@ -45,8 +58,8 @@ export default class Sensor extends Component { this.setState(Object.assign(this.state, e)); }; - this.iconOn = "/img/lightOn.svg"; - this.iconOff = "/img/lightOff.svg"; + this.colors = temperatureSensorColors; + this.icon = "temperatureIcon.svg"; call.socketSubscribe(this.props.device.id, this.stateCallback); } @@ -67,12 +80,18 @@ export default class Sensor extends Component { switch (this.props.device.sensor) { case "TEMPERATURE": this.units = "ºC"; + this.colors = temperatureSensorColors; + this.icon = "temperatureIcon.svg" break; case "HUMIDITY": this.units = "%"; + this.colors = humiditySensorColors; + this.icon = "humidityIcon.svg" break; case "LIGHT": this.units = "lm"; + this.colors = lightSensorColors; + this.icon = "lightSensorIcon.svg" break; default: this.units = ""; @@ -96,8 +115,26 @@ export default class Sensor extends Component { }; render() { + + const MotionSensor = (props) => { + return ( +
+
+ + {this.props.device.name} +
+
+ ) + }; + return ( - +
{this.state.motion ? ( -
{} : this.onClickDevice}> - -
Motion Sensor
-
+ ) : ( - - - - - {+(Math.round(this.state.value + "e+2") + "e-2")} - {this.units} - - - {this.setName()} - - - )} - + + + + + {+(Math.round(this.state.value + "e+2") + "e-2")} + {this.units} + + + {this.setName()} + + + + + )} +
); } } diff --git a/smart-hut/src/components/dashboard/devices/SensorStyle.js b/smart-hut/src/components/dashboard/devices/SensorStyle.js index cb49676..84f8465 100644 --- a/smart-hut/src/components/dashboard/devices/SensorStyle.js +++ b/smart-hut/src/components/dashboard/devices/SensorStyle.js @@ -6,18 +6,24 @@ export const style = { left: "0", }; +export const container = { + width: "10rem", + height: "10rem", + borderRadius: "100%", + border: "none", + position: "relative", +} + export const sensorText = { fill: "#3e99ff", fontSize: "1.2rem", fontFamily: "Lato", - textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)", }; export const valueStyle = { fill: "#3e99ff", - fontSize: "2.5rem", + fontSize: "2.4rem", fontFamily: "Lato", - textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)", }; export const errorStyle = { @@ -26,3 +32,69 @@ export const errorStyle = { fontFamily: "Lato", textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)", }; + +export const motionSensorInnerCircle = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: "8rem", + height: "8rem", + borderRadius: "100%", + border: "none", +} + +export const motionSensorOuterCircle = { + textAlign: "center", + cursor: "pointer", + position: "relative", + width: "10rem", + height: "10rem", + borderRadius: "100%", + border: "none", + /*boxShadow: "3px 2px 10px 5px #ccc",*/ +} + +export const nameMotionStyle = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translateX(-50%)", + fontSize: "1.2rem", +} + +export const motionSensorIcon = { + width: "2rem", + height: "2rem", + position: "absolute", + top: "15%", + left: "50%", + transform: "translateX(-50%)", +} +export const temperatureSensorColors = { + circle: "#323232", + progress: "#ff1e56", + text: "white" +} + +export const lightSensorColors = { + circle: "#000839", + progress: "#ffa41b", + text: "white" +} + +export const humiditySensorColors = { + circle: "#005082", + progress: "#00a8cc", + text: "white" +} + +export const iconSensorStyle = { + position: "absolute", + top: "20%", + left: "50%", + transform: "translateX(-50%)", + width: "2rem", + height: "2rem", + +} \ No newline at end of file diff --git a/smart-hut/src/components/dashboard/devices/SmartPlug.js b/smart-hut/src/components/dashboard/devices/SmartPlug.js index 9c61fa1..7b78bbc 100644 --- a/smart-hut/src/components/dashboard/devices/SmartPlug.js +++ b/smart-hut/src/components/dashboard/devices/SmartPlug.js @@ -4,13 +4,14 @@ 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, BottomPanel } from "./styleComponents"; +import React, { Component } from 'react'; +import { BottomPanel, StyledDiv } from "./styleComponents"; import Settings from "./DeviceSettings"; import { Image } from "semantic-ui-react"; -import { energyConsumedStyle, imageStyle, nameStyle, kwhStyle } from "./SmartPlugStyle"; +import { energyConsumedStyle, imageStyle, kwhStyle, nameStyle } from "./SmartPlugStyle"; import { call } from "../../../client_server"; + export default class SmartPlug extends Component { constructor(props) { super(props); @@ -33,6 +34,18 @@ export default class SmartPlug extends Component { call.socketSubscribe(this.props.device.id, this.stateCallback); } + componentWillUnmount() { + call.socketUnsubscribe(this.props.device.id, this.stateCallback); + } + onClickDevice = () => { + this.props.device.on = !this.state.turnedOn; + call.deviceUpdate(this.props.device, "smartPlug").then((res) => { + if (res.status === 200) { + this.setState((prevState) => ({ turnedOn: !prevState.turnedOn })); + } + }); + }; + getIcon = () => { if (this.state.turnedOn) { return this.iconOn; @@ -47,12 +60,6 @@ export default class SmartPlug extends Component { }); } - - componentWillUnmount() { - call.socketUnsubscribe(this.props.device.id, this.stateCallback); - } - - render() { return ( { diff --git a/smart-hut/src/components/dashboard/devices/Switch.js b/smart-hut/src/components/dashboard/devices/Switch.js index dcdcc15..e081abe 100644 --- a/smart-hut/src/components/dashboard/devices/Switch.js +++ b/smart-hut/src/components/dashboard/devices/Switch.js @@ -9,8 +9,7 @@ import React, { Component } from 'react'; import { BottomPanel, StyledDiv } from "./styleComponents"; import Settings from "./DeviceSettings"; import { Image } from "semantic-ui-react"; -import { imageStyle, nameStyle } from "./SwitchStyle"; -import { energyConsumedStyle } from "./SmartPlugStyle"; +import { imageStyle, nameStyle, turnedOnStyle } from "./SwitchStyle"; import { call } from "../../../client_server"; export default class Switch extends Component { @@ -70,9 +69,10 @@ export default class Switch extends Component { {this.props.device.name} - {this.state.turnedOn ? "ON" : "OFF"} + {this.state.turnedOn ? "ON" : "OFF"} - ); + ) } + } diff --git a/smart-hut/src/components/dashboard/devices/SwitchStyle.js b/smart-hut/src/components/dashboard/devices/SwitchStyle.js index af46778..e5c213d 100644 --- a/smart-hut/src/components/dashboard/devices/SwitchStyle.js +++ b/smart-hut/src/components/dashboard/devices/SwitchStyle.js @@ -14,3 +14,14 @@ export const nameStyle = { left: "50%", transform: "translateX(-50%)", }; + + + +export const turnedOnStyle = { + color: "white", + fontSize: "1.3rem", + position: "absolute", + top: "20%", + left: "50%", + transform: "translateX(-50%)" +}; \ No newline at end of file diff --git a/smart-hut/src/components/dashboard/devices/styleComponents.js b/smart-hut/src/components/dashboard/devices/styleComponents.js index 1f5b0b9..485b91b 100644 --- a/smart-hut/src/components/dashboard/devices/styleComponents.js +++ b/smart-hut/src/components/dashboard/devices/styleComponents.js @@ -49,13 +49,12 @@ export const editModeIconStyle = { }; export const iconStyle = { - width: "4rem", + width: "3.5rem", height: "auto", position: "absolute", - top: "20%", + top: "10%", left: "50%", transform: "translateX(-50%)", - filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))" }; export const nameStyle = { position: "absolute",