smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fixed switch and warnings

Browse source
This commit is contained in:
britea 2020-03-25 17:20:53 +01:00
parent 01dafc861c
commit ff090ad317
15 changed files with 415 additions and 369 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
smart-hut/src/components/dashboard/DevicePanel.js
View file

@ -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 (

73
smart-hut/src/components/dashboard/devices/Dimmer.js
View file

@ -7,40 +7,42 @@
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
} 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
knobContainer,
} from "./DimmerStyle";
export class ButtonDimmer extends Component {
constructor(props) {
super(props);
this.state = {};
};
}
increaseIntensity = () => {
console.log("Increase!")
console.log("Increase!");
};
decreaseIntensity = () => {
console.log("Decrease!")
console.log("Decrease!");
};
componentDidMount() {
};
componentDidMount() {}
render() {
return (
@ -48,20 +50,20 @@ export class ButtonDimmer extends Component {
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
<img alt="icon" src="/img/buttonDimmer.svg" />
<span className="knob">
{this.props.device.name}
</span>
<span className="knob">{this.props.device.name}</span>
<PlusPanel onClick={this.increaseIntensity}>
<span>&#43;</span>
</PlusPanel>
<MinusPanel onClick={this.decreaseIntensity}>
<span>&minus;</span>
</MinusPanel>
</ButtonDimmerContainer>
)
);
}
}
@ -70,14 +72,11 @@ export class KnobDimmer extends Component {
super(props);
this.state = {
pointingDevices: [],
value: 1
}
}
componentDidMount() {
value: 1,
};
}
componentDidMount() {}
render() {
return (
@ -85,19 +84,33 @@ export class KnobDimmer extends Component {
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
<CircularInput style={KnobDimmerStyle} value={this.state.value}
onChange={(value) => this.setState({ value: value })}>
<text style={textStyle} x={100} y={120} textAnchor="middle" dy="0.3em" fontWeight="bold">
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
<CircularInput
style={KnobDimmerStyle}
value={this.state.value}
onChange={(value) => this.setState({ value: value })}
>
<text
style={textStyle}
x={100}
y={120}
textAnchor="middle"
dy="0.3em"
fontWeight="bold"
>
{this.props.device.name}
</text>
<CircularProgress style={{ ...KnobProgress, opacity: this.state.value + 0.1 }} />
<CircularProgress
style={{ ...KnobProgress, opacity: this.state.value + 0.1 }}
/>
<CircularThumb style={CircularThumbStyle} />
<ThumbText color={"#1a2849"} />
</CircularInput>
<img style={knobIcon} src="/img/knobDimmer.svg" />
<img alt="Knob Icon" style={knobIcon} src="/img/knobDimmer.svg" />
</div>
)
);
}
}

20
smart-hut/src/components/dashboard/devices/DimmerStyle.js
View file

@ -1,6 +1,3 @@
import {CircularThumb} from "react-circular-input";
import React from "react";
export const KnobDimmerStyle = {
cursor: "pointer",
marginTop: "1rem",
@ -16,16 +13,15 @@ export const KnobHolder = {
backgroundColor: "white",
width: "10rem",
height: "10rem",
}
};
export const KnobCircularTrack = {
fill: "white",
stroke :"#1a2849"
}
stroke: "#1a2849",
};
export const KnobIcon = {
fill: "#1a2849"
fill: "#1a2849",
};
export const KnobProgress = {
@ -34,18 +30,18 @@ export const KnobProgress = {
};
export const ValueStyle = {
pointerEvents: 'none',
pointerEvents: "none",
fill: "#1a2849",
fontSize: "1.3rem",
fontFamily: "Lato",
textAnchor: "middle"
textAnchor: "middle",
};
export const CircularThumbStyle = {
fill: "white",
stroke: "#1a2849",
strokeWidth: ".2rem",
r: "1.4rem"
r: "1.4rem",
};
export const textStyle = {
@ -68,4 +64,4 @@ export const knobContainer = {
position: "relative",
width: "9rem",
height: "9rem",
}
};

80
smart-hut/src/components/dashboard/devices/Light.js
View file

@ -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 => {
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 = (
<div style={LightDimmerContainer}>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
<CircularInput style={LightDimmerStyle}
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
<CircularInput
style={LightDimmerStyle}
value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
onChange={this.setIntensity}>
<text style={textStyle} x={100} y={120} textAnchor="middle" dy="0.3em" fontWeight="bold">
onChange={this.setIntensity}
>
<text
style={textStyle}
x={100}
y={120}
textAnchor="middle"
dy="0.3em"
fontWeight="bold"
>
{this.props.device.name}
</text>
<CircularProgress style={{ ...KnobProgress, opacity: this.state.intensity / 100 + 0.3 }} />
<CircularProgress
style={{
...KnobProgress,
opacity: this.state.intensity / 100 + 0.3,
}}
/>
<CircularThumb style={CircularThumbStyle} />
<ThumbText color={"#ffd31d"} />
</CircularInput>
@ -102,9 +127,11 @@ export default class Light extends Component {
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
<div onClick={this.props.edit.mode ? () => {
} : this.onClickDevice}>
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
<div onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
<Image src={this.getIcon()} style={iconStyle} />
<BottomPanel style={{ backgroundColor: "#ffa41b" }}>
<h5 style={nameStyle}>{this.props.device.name}</h5>
@ -115,11 +142,10 @@ export default class Light extends Component {
return (
<div>
{
this.props.device.intensity ? (intensityLightView) : (normalLightView)
}
{this.props.device.kind === "dimmableLight"
? intensityLightView
: normalLightView}
</div>
)
);
}
}

8
smart-hut/src/components/dashboard/devices/LightStyle.js
View file

@ -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 = {

18
smart-hut/src/components/dashboard/devices/NewDevice.js
View file

@ -19,7 +19,7 @@ const StyledDiv = styled.div`
border: none;
position: relative;
box-shadow: 3px 2px 10px 5px #ccc;
transition : all .3s ease-out;
transition: all 0.3s ease-out;
:hover {
background-color: #4345d9;
}
@ -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 = [

55
smart-hut/src/components/dashboard/devices/Sensor.js
View file

@ -20,11 +20,7 @@
*/
import React, { Component } from "react";
import {
CircularInput,
CircularProgress,
CircularTrack,
} from "react-circular-input";
import { CircularInput, CircularProgress } from "react-circular-input";
import {
container,
sensorText,
@ -37,13 +33,10 @@ import {
temperatureSensorColors,
lightSensorColors,
humiditySensorColors,
iconSensorStyle
iconSensorStyle,
} from "./SensorStyle";
import Settings from "./DeviceSettings";
import { StyledDiv } from "./styleComponents";
import { call } from "../../../client_server";
import { nameStyle } from "./LightStyle";
import { iconStyle } from "./styleComponents";
import { Image } from "semantic-ui-react";
export default class Sensor extends Component {
@ -81,17 +74,17 @@ export default class Sensor extends Component {
case "TEMPERATURE":
this.units = "ºC";
this.colors = temperatureSensorColors;
this.icon = "temperatureIcon.svg"
this.icon = "temperatureIcon.svg";
break;
case "HUMIDITY":
this.units = "%";
this.colors = humiditySensorColors;
this.icon = "humidityIcon.svg"
this.icon = "humidityIcon.svg";
break;
case "LIGHT":
this.units = "lm";
this.colors = lightSensorColors;
this.icon = "lightSensorIcon.svg"
this.icon = "lightSensorIcon.svg";
break;
default:
this.units = "";
@ -115,22 +108,25 @@ export default class Sensor extends Component {
};
render() {
const MotionSensor = (props) => {
return (
<div style={{
<div
style={{
...motionSensorOuterCircle,
backgroundColor: this.state.detected ? "#505bda" : "#00bdaa"
}}>
<div style={{
backgroundColor: this.state.detected ? "#505bda" : "#00bdaa",
}}
>
<div
style={{
...motionSensorInnerCircle,
backgroundColor: this.state.detected ? "#fe346e" : "#00bdaa"
}}>
backgroundColor: this.state.detected ? "#fe346e" : "#00bdaa",
}}
>
<Image style={motionSensorIcon} src="/img/motionSensorIcon.svg" />
<span style={nameMotionStyle}>{this.props.device.name}</span>
</div>
</div>
)
);
};
return (
@ -146,12 +142,19 @@ export default class Sensor extends Component {
<MotionSensor />
) : (
<React.Fragment>
<CircularInput value={
this.props.device.sensor === "LIGHT" ?
this.state.value / 2000
:
this.state.value / 100} style={style}>
<CircularProgress strokeWidth="2rem" stroke={this.colors.progress} fill={this.colors.circle} />
<CircularInput
value={
this.props.device.sensor === "LIGHT"
? this.state.value / 2000
: this.state.value / 100
}
style={style}
>
<CircularProgress
strokeWidth="2rem"
stroke={this.colors.progress}
fill={this.colors.circle}
/>
<text
style={{ ...valueStyle, fill: this.colors.text }}
x={100}

25
smart-hut/src/components/dashboard/devices/SensorStyle.js
View file

@ -12,7 +12,7 @@ export const container = {
borderRadius: "100%",
border: "none",
position: "relative",
}
};
export const sensorText = {
fill: "#3e99ff",
@ -42,7 +42,7 @@ export const motionSensorInnerCircle = {
height: "8rem",
borderRadius: "100%",
border: "none",
}
};
export const motionSensorOuterCircle = {
textAlign: "center",
@ -53,7 +53,7 @@ export const motionSensorOuterCircle = {
borderRadius: "100%",
border: "none",
/*boxShadow: "3px 2px 10px 5px #ccc",*/
}
};
export const nameMotionStyle = {
position: "absolute",
@ -61,7 +61,7 @@ export const nameMotionStyle = {
left: "50%",
transform: "translateX(-50%)",
fontSize: "1.2rem",
}
};
export const motionSensorIcon = {
width: "2rem",
@ -70,24 +70,24 @@ export const motionSensorIcon = {
top: "15%",
left: "50%",
transform: "translateX(-50%)",
}
};
export const temperatureSensorColors = {
circle: "#323232",
progress: "#ff1e56",
text: "white"
}
text: "white",
};
export const lightSensorColors = {
circle: "#000839",
progress: "#ffa41b",
text: "white"
}
text: "white",
};
export const humiditySensorColors = {
circle: "#005082",
progress: "#00a8cc",
text: "white"
}
text: "white",
};
export const iconSensorStyle = {
position: "absolute",
@ -96,5 +96,4 @@ export const iconSensorStyle = {
transform: "translateX(-50%)",
width: "2rem",
height: "2rem",
}
};

31
smart-hut/src/components/dashboard/devices/SmartPlug.js
View file

@ -4,14 +4,18 @@
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 React, { Component } from "react";
import { BottomPanel, StyledDiv } from "./styleComponents";
import Settings from "./DeviceSettings";
import { Image } from "semantic-ui-react";
import { energyConsumedStyle, imageStyle, kwhStyle, nameStyle } from "./SmartPlugStyle";
import {
energyConsumedStyle,
imageStyle,
kwhStyle,
nameStyle,
} from "./SmartPlugStyle";
import { call } from "../../../client_server";
export default class SmartPlug extends Component {
constructor(props) {
super(props);
@ -62,19 +66,28 @@ export default class SmartPlug extends Component {
render() {
return (
<StyledDiv onClick={this.props.edit.mode ? () => {
} : this.onClickDevice}>
<StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
<Image src={this.getIcon()} style={imageStyle} />
<span style={nameStyle}>{this.props.device.name}</span>
<BottomPanel style={this.state.turnedOn ? { backgroundColor: "#505bda" } : { backgroundColor: "#1a2849" }}>
<span style={energyConsumedStyle}>{this.state.energyConsumed}</span><span style={kwhStyle}>KWh</span>
<BottomPanel
style={
this.state.turnedOn
? { backgroundColor: "#505bda" }
: { backgroundColor: "#1a2849" }
}
>
<span style={energyConsumedStyle}>{this.state.energyConsumed}</span>
<span style={kwhStyle}>KWh</span>
</BottomPanel>
</StyledDiv>
)
);
}
}

10
smart-hut/src/components/dashboard/devices/SmartPlugStyle.js
View file

@ -4,7 +4,7 @@ export const energyConsumedStyle = {
position: "absolute",
top: "20%",
left: "50%",
transform: "translateX(-50%)"
transform: "translateX(-50%)",
};
export const kwhStyle = {
@ -13,8 +13,8 @@ export const kwhStyle = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translateX(-50%)"
}
transform: "translateX(-50%)",
};
export const imageStyle = {
width: "2rem",
@ -23,7 +23,7 @@ export const imageStyle = {
top: "5%",
left: "50%",
transform: "translateX(-35%)",
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))"
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))",
};
export const nameStyle = {
@ -31,5 +31,5 @@ export const nameStyle = {
position: "absolute",
top: "30%",
left: "50%",
transform: "translateX(-50%)"
transform: "translateX(-50%)",
};

28
smart-hut/src/components/dashboard/devices/Switch.js
View file

@ -5,7 +5,7 @@
* The user can change the state of a switch through the SmartHut interface.
*/
import React, { Component } from 'react';
import React, { Component } from "react";
import { BottomPanel, StyledDiv } from "./styleComponents";
import Settings from "./DeviceSettings";
import { Image } from "semantic-ui-react";
@ -17,7 +17,7 @@ export default class Switch extends Component {
super(props);
this.state = {
turnedOn: false,
pointingLights: []
pointingLights: [],
};
this.iconOn = "/img/switchOn.svg";
this.iconOff = "/img/switchOff.svg";
@ -57,22 +57,30 @@ export default class Switch extends Component {
render() {
return (
<StyledDiv
onClick={this.props.edit.mode ? () => {
} : this.onClickDevice}>
<StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
<Image src={this.getIcon()} style={imageStyle} />
<span style={nameStyle}>{this.props.device.name}</span>
<BottomPanel style={this.state.turnedOn ? { backgroundColor: "#505bda" } : { backgroundColor: "#1a2849" }}>
<span style={turnedOnStyle}>{this.state.turnedOn ? "ON" : "OFF"}</span>
<BottomPanel
style={
this.state.turnedOn
? { backgroundColor: "#505bda" }
: { backgroundColor: "#1a2849" }
}
>
<span style={turnedOnStyle}>
{this.state.turnedOn ? "ON" : "OFF"}
</span>
</BottomPanel>
</StyledDiv>
)
);
}
}

4
smart-hut/src/components/dashboard/devices/SwitchStyle.js
View file

@ -15,13 +15,11 @@ export const nameStyle = {
transform: "translateX(-50%)",
};
export const turnedOnStyle = {
color: "white",
fontSize: "1.3rem",
position: "absolute",
top: "20%",
left: "50%",
transform: "translateX(-50%)"
transform: "translateX(-50%)",
};

13
smart-hut/src/components/dashboard/devices/styleComponents.js
View file

@ -14,7 +14,7 @@ export const editButtonStyle = {
outline: "none",
color: "white",
fontFamily: "Lato",
textTransform: "uppercase"
textTransform: "uppercase",
};
export const panelStyle = {
@ -45,7 +45,7 @@ export const editModeIconStyle = {
width: "0.75rem",
height: "0.75rem",
borderRadius: "20%",
zIndex: "101"
zIndex: "101",
};
export const iconStyle = {
@ -60,7 +60,7 @@ export const nameStyle = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translateX(-50%)"
transform: "translateX(-50%)",
};
export const formStyle = {
@ -111,7 +111,7 @@ export const ButtonDimmerContainer = styled.div`
border: none;
position: relative;
box-shadow: 3px 2px 10px 5px #ccc;
transition : all .3s ease-out;
transition: all 0.3s ease-out;
text-align: center;
display: inline-block;
.knob {
@ -129,7 +129,6 @@ export const ButtonDimmerContainer = styled.div`
width: 1.5rem;
height: 1.5rem;
}
`;
export const PlusPanel = styled.div`
@ -209,5 +208,5 @@ export const ThumbText = (props) => {
<text style={{ ...ValueStyle, fill: props.color }} x={x} y={y + 5}>
{Math.round(value * 100)}
</text>
)
}
);
};

9
smart-hut/src/views/Navbar.js
View file

@ -1,12 +1,5 @@
import React, { Component } from "react";
import {
Menu,
Grid,
Icon,
Responsive,
Segment,
Dropdown,
} from "semantic-ui-react";
import { Menu, Grid, Icon, Responsive, Dropdown } from "semantic-ui-react";
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
import ModalWindow from "../components/modalform";