diff --git a/smart-hut/public/index.html b/smart-hut/public/index.html index fe04f39..af4fa3e 100644 --- a/smart-hut/public/index.html +++ b/smart-hut/public/index.html @@ -3,7 +3,7 @@ diff --git a/smart-hut/src/components/dashboard/DevicePanel.js b/smart-hut/src/components/dashboard/DevicePanel.js index 0edf873..f4f3633 100644 --- a/smart-hut/src/components/dashboard/DevicePanel.js +++ b/smart-hut/src/components/dashboard/DevicePanel.js @@ -136,8 +136,8 @@ export default class DevicePanel extends Component { openModal: this.openModal, }; - var backGroundImg = - this.props.activeItem === -1 ? "" : this.props.room.image; + /*var backGroundImg = + this.props.activeItem === -1 ? "" : this.props.room.image;*/ const ds = this.state.devices ? this.state.devices : this.props.devices; return ( diff --git a/smart-hut/src/components/dashboard/devices/Dimmer.js b/smart-hut/src/components/dashboard/devices/Dimmer.js index aab7fc1..c1b6b0d 100644 --- a/smart-hut/src/components/dashboard/devices/Dimmer.js +++ b/smart-hut/src/components/dashboard/devices/Dimmer.js @@ -7,97 +7,110 @@ The user can change the state of a dimmer through an intuitive UI in SmartHut . **/ -import React, { Component, useState } from 'react'; +import React, { Component } from "react"; import { - CircularInput, - CircularProgress, - CircularThumb, - useCircularInputContext + CircularInput, + CircularProgress, + CircularThumb, } from "react-circular-input"; -import { ButtonDimmerContainer, MinusPanel, PlusPanel, ThumbText } from "./styleComponents"; +import { + ButtonDimmerContainer, + MinusPanel, + PlusPanel, + ThumbText, +} from "./styleComponents"; import Settings from "./DeviceSettings"; import { - CircularThumbStyle, - KnobDimmerStyle, - KnobProgress, - ValueStyle, - textStyle, - knobIcon, - knobContainer + CircularThumbStyle, + KnobDimmerStyle, + KnobProgress, + textStyle, + knobIcon, + knobContainer, } from "./DimmerStyle"; export class ButtonDimmer extends Component { - constructor(props) { - super(props); - this.state = {}; - }; + constructor(props) { + super(props); + this.state = {}; + } - increaseIntensity = () => { - console.log("Increase!") - }; - decreaseIntensity = () => { - console.log("Decrease!") - }; + increaseIntensity = () => { + console.log("Increase!"); + }; + decreaseIntensity = () => { + console.log("Decrease!"); + }; - componentDidMount() { - }; + componentDidMount() {} - render() { - return ( - - this.props.onChangeData(id, newSettings)} /> - icon - - {this.props.device.name} - - - + - - - − - - - - ) - } + render() { + return ( + + + this.props.onChangeData(id, newSettings) + } + /> + icon + {this.props.device.name} + + + + + + − + + + ); + } } export class KnobDimmer extends Component { - constructor(props) { - super(props); - this.state = { - pointingDevices: [], - value: 1 - } - } + constructor(props) { + super(props); + this.state = { + pointingDevices: [], + value: 1, + }; + } + componentDidMount() {} - componentDidMount() { - } - - - render() { - return ( -
- this.props.onChangeData(id, newSettings)} /> - this.setState({ value: value })}> - - - {this.props.device.name} - - - - - - -
- ) - } + render() { + return ( +
+ + this.props.onChangeData(id, newSettings) + } + /> + this.setState({ value: value })} + > + + {this.props.device.name} + + + + + + Knob Icon +
+ ); + } } diff --git a/smart-hut/src/components/dashboard/devices/DimmerStyle.js b/smart-hut/src/components/dashboard/devices/DimmerStyle.js index 5244d17..b087db8 100644 --- a/smart-hut/src/components/dashboard/devices/DimmerStyle.js +++ b/smart-hut/src/components/dashboard/devices/DimmerStyle.js @@ -1,71 +1,67 @@ -import {CircularThumb} from "react-circular-input"; -import React from "react"; - export const KnobDimmerStyle = { - cursor: "pointer", - marginTop : "1rem", - width: "9rem", - height: "9rem", - fill: "#1a2849", + cursor: "pointer", + marginTop: "1rem", + width: "9rem", + height: "9rem", + fill: "#1a2849", }; export const KnobHolder = { - marginTop : "1rem", - cursor : "pointer", - padding : "3rem", - backgroundColor : "white", - width: "10rem", - height: "10rem", -} + marginTop: "1rem", + cursor: "pointer", + padding: "3rem", + backgroundColor: "white", + width: "10rem", + height: "10rem", +}; export const KnobCircularTrack = { - fill : "white", - stroke :"#1a2849" -} - + fill: "white", + stroke: "#1a2849", +}; export const KnobIcon = { - fill: "#1a2849" + fill: "#1a2849", }; export const KnobProgress = { - stroke : "#1a2849", - strokeWidth : "3rem", + stroke: "#1a2849", + strokeWidth: "3rem", }; export const ValueStyle = { - pointerEvents: 'none', - fill: "#1a2849", - fontSize: "1.3rem", - fontFamily : "Lato", - textAnchor: "middle" + pointerEvents: "none", + fill: "#1a2849", + fontSize: "1.3rem", + fontFamily: "Lato", + textAnchor: "middle", }; export const CircularThumbStyle = { - fill: "white", - stroke: "#1a2849", - strokeWidth : ".2rem", - r: "1.4rem" + fill: "white", + stroke: "#1a2849", + strokeWidth: ".2rem", + r: "1.4rem", }; export const textStyle = { - position: "absolute", - fill: "#1a2849", - fontSize: "1.5rem", - fontFamily: "Lato", + position: "absolute", + fill: "#1a2849", + fontSize: "1.5rem", + fontFamily: "Lato", }; export const knobIcon = { - position : "absolute", - left: "50%", - top: "30%", - transform: "translateX(-50%)", - width: "2rem", - height: "2rem", + position: "absolute", + left: "50%", + top: "30%", + transform: "translateX(-50%)", + width: "2rem", + height: "2rem", }; export const knobContainer = { - position: "relative", - width: "9rem", - height: "9rem", -} + position: "relative", + width: "9rem", + height: "9rem", +}; diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js index 0433016..efbfbed 100644 --- a/smart-hut/src/components/dashboard/devices/Light.js +++ b/smart-hut/src/components/dashboard/devices/Light.js @@ -9,7 +9,12 @@ */ import React, { Component } from "react"; -import { iconStyle, StyledDiv, BottomPanel, ThumbText } from "./styleComponents"; +import { + iconStyle, + StyledDiv, + BottomPanel, + ThumbText, +} from "./styleComponents"; import Settings from "./DeviceSettings"; import { Image } from "semantic-ui-react"; import { @@ -24,11 +29,9 @@ import { nameStyle, KnobProgress, CircularThumbStyle, - knobIcon + knobIcon, } from "./LightStyle"; -import { call } from '../../../client_server'; - - +import { call } from "../../../client_server"; export default class Light extends Component { constructor(props) { @@ -38,20 +41,29 @@ export default class Light extends Component { intensity: props.device.intensity, }; this.iconOn = "/img/lightOn.svg"; - this.iconOff = "/img/lightOff.svg" + this.iconOff = "/img/lightOff.svg"; + + this.stateCallback = (e) => { + this.setState( + Object.assign(this.state, { + intensity: e.intensity, + turnedOn: e.on, + }) + ); + }; + + call.socketSubscribe(this.props.device.id, this.stateCallback); } 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 })); + } + }); }; - getIcon = () => { if (this.state.turnedOn) { return this.iconOn; @@ -59,8 +71,6 @@ export default class Light extends Component { return this.iconOff; }; - - setIntensity = (newValue) => { this.props.device.intensity = Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100); @@ -74,22 +84,37 @@ export default class Light extends Component { }); }; - - render() { const intensityLightView = (
this.props.onChangeData(id, newSettings)} /> - + this.props.onChangeData(id, newSettings) + } + /> + - + onChange={this.setIntensity} + > + {this.props.device.name} - + @@ -102,9 +127,11 @@ export default class Light extends Component { this.props.onChangeData(id, newSettings)} /> -
{ - } : this.onClickDevice}> + onChangeData={(id, newSettings) => + this.props.onChangeData(id, newSettings) + } + /> +
{} : this.onClickDevice}>
{this.props.device.name}
@@ -115,11 +142,10 @@ export default class Light extends Component { return (
- { - this.props.device.intensity ? (intensityLightView) : (normalLightView) - } + {this.props.device.kind === "dimmableLight" + ? intensityLightView + : normalLightView}
- - ) + ); } } diff --git a/smart-hut/src/components/dashboard/devices/LightStyle.js b/smart-hut/src/components/dashboard/devices/LightStyle.js index 6273125..43e1922 100644 --- a/smart-hut/src/components/dashboard/devices/LightStyle.js +++ b/smart-hut/src/components/dashboard/devices/LightStyle.js @@ -1,4 +1,3 @@ - export const valueStyle = { fill: "#3e99ff", fontSize: "2.5rem", @@ -20,7 +19,6 @@ export const textStyle = { fontFamily: "Lato", }; - export const nameStyle = { fontSize: "1rem", position: "absolute", @@ -36,19 +34,19 @@ export const LightDimmerStyle = { width: "9rem", height: "9rem", fill: "#ffd31d", -} +}; export const LightDimmerContainer = { position: "relative", width: "9rem", height: "9rem", -} +}; export const CircularThumbStyle = { fill: "white", stroke: "#ffd31d", strokeWidth: ".2rem", - r: "1.4rem" + r: "1.4rem", }; export const KnobProgress = { diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js index 4df5900..eea9957 100644 --- a/smart-hut/src/components/dashboard/devices/NewDevice.js +++ b/smart-hut/src/components/dashboard/devices/NewDevice.js @@ -11,20 +11,20 @@ import { } from "semantic-ui-react"; const StyledDiv = styled.div` - background-color : #505bda; - padding : 3rem; + background-color: #505bda; + padding: 3rem; width: 10rem; height: 10rem; border-radius: 100%; border: none; position: relative; box-shadow: 3px 2px 10px 5px #ccc; - transition : all .3s ease-out; - :hover{ - background-color : #4345d9; + transition: all 0.3s ease-out; + :hover { + background-color: #4345d9; } - :active{ - transform : translate(0.3px, 0.8px); + :active { + transform: translate(0.3px, 0.8px); box-shadow: 0.5px 0.5px 7px 3.5px #ccc; } `; @@ -148,16 +148,16 @@ export default class NewDevice extends Component { image: { avatar: true, src: "/img/switchOn.svg" }, }, { - key: 'knobDimmer', - text: 'Knob Dimmer', - value: 'knobDimmer', - image: { avatar: true, src: '/img/knob.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: "buttonDimmer", + text: "Button Dimmer", + value: "buttonDimmer", + image: { avatar: true, src: "/img/plusMinus.svg" }, }, ]; const sensorOptions = [ @@ -278,7 +278,7 @@ export default class NewDevice extends Component { {this.state.typeOfDevice === "sensor" ? sensorForm : ""} {this.state.typeOfDevice === "switch" ? switchOptions : ""} {this.state.typeOfDevice === "buttonDimmer" || - this.state.typeOfDevice === "knobDimmer" + this.state.typeOfDevice === "knobDimmer" ? dimmerOptions : ""} @@ -311,8 +311,8 @@ export default class NewDevice extends Component { Back ) : ( - "" - )} + "" + )} {this.state.step < steps.length ? ( ) : ( - "" - )} + "" + )} {this.state.step === steps.length ? (