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

Merge branch 'fixed-switch-and-warnings' into 'dev'

Browse source 
fixed switch and warnings

See merge request sa4-2020/the-sanmarinoes/frontend!70
This commit is contained in:
Claudio Maggioni 2020-03-25 17:27:18 +01:00
commit 9fa9a2f90f
15 changed files with 415 additions and 369 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
smart-hut/public/index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<script> <script>
window.BACKEND_URL = "__BACKEND_URL__"; window.BACKEND_URL = "__BACKEND_URL__";
</script> </script>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

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

@ -136,8 +136,8 @@ export default class DevicePanel extends Component {
openModal: this.openModal, openModal: this.openModal,
}; };
var backGroundImg = /*var backGroundImg =
this.props.activeItem === -1 ? "" : this.props.room.image; this.props.activeItem === -1 ? "" : this.props.room.image;*/
const ds = this.state.devices ? this.state.devices : this.props.devices; const ds = this.state.devices ? this.state.devices : this.props.devices;
return ( return (

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

@ -7,97 +7,110 @@
The user can change the state of a dimmer through an intuitive UI in SmartHut . 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 { import {
CircularInput, CircularInput,
CircularProgress, CircularProgress,
CircularThumb, CircularThumb,
useCircularInputContext
} from "react-circular-input"; } from "react-circular-input";
import { ButtonDimmerContainer, MinusPanel, PlusPanel, ThumbText } from "./styleComponents"; import {
ButtonDimmerContainer,
MinusPanel,
PlusPanel,
ThumbText,
} from "./styleComponents";
import Settings from "./DeviceSettings"; import Settings from "./DeviceSettings";
import { import {
CircularThumbStyle, CircularThumbStyle,
KnobDimmerStyle, KnobDimmerStyle,
KnobProgress, KnobProgress,
ValueStyle, textStyle,
textStyle, knobIcon,
knobIcon, knobContainer,
knobContainer
} from "./DimmerStyle"; } from "./DimmerStyle";
export class ButtonDimmer extends Component { export class ButtonDimmer extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {}; this.state = {};
}; }
increaseIntensity = () => { increaseIntensity = () => {
console.log("Increase!") console.log("Increase!");
}; };
decreaseIntensity = () => { decreaseIntensity = () => {
console.log("Decrease!") console.log("Decrease!");
}; };
componentDidMount() { componentDidMount() {}
};
render() { render() {
return ( return (
<ButtonDimmerContainer> <ButtonDimmerContainer>
<Settings <Settings
deviceId={this.props.device.id} deviceId={this.props.device.id}
edit={this.props.edit} edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} /> onChangeData={(id, newSettings) =>
<img alt="icon" src="/img/buttonDimmer.svg" /> this.props.onChangeData(id, newSettings)
<span className="knob"> }
{this.props.device.name} />
</span> <img alt="icon" src="/img/buttonDimmer.svg" />
<PlusPanel onClick={this.increaseIntensity}> <span className="knob">{this.props.device.name}</span>
<span>&#43;</span> <PlusPanel onClick={this.increaseIntensity}>
</PlusPanel> <span>&#43;</span>
<MinusPanel onClick={this.decreaseIntensity}> </PlusPanel>
<span>&minus;</span> <MinusPanel onClick={this.decreaseIntensity}>
</MinusPanel> <span>&minus;</span>
</MinusPanel>
</ButtonDimmerContainer> </ButtonDimmerContainer>
) );
} }
} }
export class KnobDimmer extends Component { export class KnobDimmer extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
pointingDevices: [], pointingDevices: [],
value: 1 value: 1,
} };
} }
componentDidMount() {}
componentDidMount() { render() {
} return (
<div style={knobContainer}>
<Settings
render() { deviceId={this.props.device.id}
return ( edit={this.props.edit}
<div style={knobContainer}> onChangeData={(id, newSettings) =>
<Settings this.props.onChangeData(id, newSettings)
deviceId={this.props.device.id} }
edit={this.props.edit} />
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} /> <CircularInput
<CircularInput style={KnobDimmerStyle} value={this.state.value} style={KnobDimmerStyle}
onChange={(value) => this.setState({ value: value })}> 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
</text> style={textStyle}
<CircularProgress style={{ ...KnobProgress, opacity: this.state.value + 0.1 }} /> x={100}
<CircularThumb style={CircularThumbStyle} /> y={120}
<ThumbText color={"#1a2849"} /> textAnchor="middle"
</CircularInput> dy="0.3em"
<img style={knobIcon} src="/img/knobDimmer.svg" /> fontWeight="bold"
</div> >
) {this.props.device.name}
} </text>
<CircularProgress
style={{ ...KnobProgress, opacity: this.state.value + 0.1 }}
/>
<CircularThumb style={CircularThumbStyle} />
<ThumbText color={"#1a2849"} />
</CircularInput>
<img alt="Knob Icon" style={knobIcon} src="/img/knobDimmer.svg" />
</div>
);
}
} }

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

@ -1,71 +1,67 @@
import {CircularThumb} from "react-circular-input";
import React from "react";
export const KnobDimmerStyle = { export const KnobDimmerStyle = {
cursor: "pointer", cursor: "pointer",
marginTop : "1rem", marginTop: "1rem",
width: "9rem", width: "9rem",
height: "9rem", height: "9rem",
fill: "#1a2849", fill: "#1a2849",
}; };
export const KnobHolder = { export const KnobHolder = {
marginTop : "1rem", marginTop: "1rem",
cursor : "pointer", cursor: "pointer",
padding : "3rem", padding: "3rem",
backgroundColor : "white", backgroundColor: "white",
width: "10rem", width: "10rem",
height: "10rem", height: "10rem",
} };
export const KnobCircularTrack = { export const KnobCircularTrack = {
fill : "white", fill: "white",
stroke :"#1a2849" stroke: "#1a2849",
} };
export const KnobIcon = { export const KnobIcon = {
fill: "#1a2849" fill: "#1a2849",
}; };
export const KnobProgress = { export const KnobProgress = {
stroke : "#1a2849", stroke: "#1a2849",
strokeWidth : "3rem", strokeWidth: "3rem",
}; };
export const ValueStyle = { export const ValueStyle = {
pointerEvents: 'none', pointerEvents: "none",
fill: "#1a2849", fill: "#1a2849",
fontSize: "1.3rem", fontSize: "1.3rem",
fontFamily : "Lato", fontFamily: "Lato",
textAnchor: "middle" textAnchor: "middle",
}; };
export const CircularThumbStyle = { export const CircularThumbStyle = {
fill: "white", fill: "white",
stroke: "#1a2849", stroke: "#1a2849",
strokeWidth : ".2rem", strokeWidth: ".2rem",
r: "1.4rem" r: "1.4rem",
}; };
export const textStyle = { export const textStyle = {
position: "absolute", position: "absolute",
fill: "#1a2849", fill: "#1a2849",
fontSize: "1.5rem", fontSize: "1.5rem",
fontFamily: "Lato", fontFamily: "Lato",
}; };
export const knobIcon = { export const knobIcon = {
position : "absolute", position: "absolute",
left: "50%", left: "50%",
top: "30%", top: "30%",
transform: "translateX(-50%)", transform: "translateX(-50%)",
width: "2rem", width: "2rem",
height: "2rem", height: "2rem",
}; };
export const knobContainer = { export const knobContainer = {
position: "relative", position: "relative",
width: "9rem", width: "9rem",
height: "9rem", height: "9rem",
} };

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

@ -9,7 +9,12 @@
*/ */
import React, { Component } from "react"; import React, { Component } from "react";
import { iconStyle, StyledDiv, BottomPanel, ThumbText } from "./styleComponents"; import {
iconStyle,
StyledDiv,
BottomPanel,
ThumbText,
} from "./styleComponents";
import Settings from "./DeviceSettings"; import Settings from "./DeviceSettings";
import { Image } from "semantic-ui-react"; import { Image } from "semantic-ui-react";
import { import {
@ -24,11 +29,9 @@ import {
nameStyle, nameStyle,
KnobProgress, KnobProgress,
CircularThumbStyle, CircularThumbStyle,
knobIcon knobIcon,
} from "./LightStyle"; } from "./LightStyle";
import { call } from '../../../client_server'; import { call } from "../../../client_server";
export default class Light extends Component { export default class Light extends Component {
constructor(props) { constructor(props) {
@ -38,20 +41,29 @@ export default class Light extends Component {
intensity: props.device.intensity, intensity: props.device.intensity,
}; };
this.iconOn = "/img/lightOn.svg"; 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 = () => { onClickDevice = () => {
this.props.device.on = !this.state.turnedOn; this.props.device.on = !this.state.turnedOn;
call.deviceUpdate(this.props.device, 'regularLight') call.deviceUpdate(this.props.device, "regularLight").then((res) => {
.then(res => { if (res.status === 200) {
if (res.status === 200) { this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
this.setState((prevState) => ({ turnedOn: !prevState.turnedOn })); }
} });
})
}; };
getIcon = () => { getIcon = () => {
if (this.state.turnedOn) { if (this.state.turnedOn) {
return this.iconOn; return this.iconOn;
@ -59,8 +71,6 @@ export default class Light extends Component {
return this.iconOff; return this.iconOff;
}; };
setIntensity = (newValue) => { setIntensity = (newValue) => {
this.props.device.intensity = this.props.device.intensity =
Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100); Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100);
@ -74,22 +84,37 @@ export default class Light extends Component {
}); });
}; };
render() { render() {
const intensityLightView = ( const intensityLightView = (
<div style={LightDimmerContainer}> <div style={LightDimmerContainer}>
<Settings <Settings
deviceId={this.props.device.id} deviceId={this.props.device.id}
edit={this.props.edit} edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} /> onChangeData={(id, newSettings) =>
<CircularInput style={LightDimmerStyle} this.props.onChangeData(id, newSettings)
}
/>
<CircularInput
style={LightDimmerStyle}
value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")} value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
onChange={this.setIntensity}> onChange={this.setIntensity}
<text style={textStyle} x={100} y={120} textAnchor="middle" dy="0.3em" fontWeight="bold"> >
<text
style={textStyle}
x={100}
y={120}
textAnchor="middle"
dy="0.3em"
fontWeight="bold"
>
{this.props.device.name} {this.props.device.name}
</text> </text>
<CircularProgress style={{ ...KnobProgress, opacity: this.state.intensity / 100 + 0.3 }} /> <CircularProgress
style={{
...KnobProgress,
opacity: this.state.intensity / 100 + 0.3,
}}
/>
<CircularThumb style={CircularThumbStyle} /> <CircularThumb style={CircularThumbStyle} />
<ThumbText color={"#ffd31d"} /> <ThumbText color={"#ffd31d"} />
</CircularInput> </CircularInput>
@ -102,9 +127,11 @@ export default class Light extends Component {
<Settings <Settings
deviceId={this.props.device.id} deviceId={this.props.device.id}
edit={this.props.edit} edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} /> onChangeData={(id, newSettings) =>
<div onClick={this.props.edit.mode ? () => { this.props.onChangeData(id, newSettings)
} : this.onClickDevice}> }
/>
<div onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
<Image src={this.getIcon()} style={iconStyle} /> <Image src={this.getIcon()} style={iconStyle} />
<BottomPanel style={{ backgroundColor: "#ffa41b" }}> <BottomPanel style={{ backgroundColor: "#ffa41b" }}>
<h5 style={nameStyle}>{this.props.device.name}</h5> <h5 style={nameStyle}>{this.props.device.name}</h5>
@ -115,11 +142,10 @@ export default class Light extends Component {
return ( return (
<div> <div>
{ {this.props.device.kind === "dimmableLight"
this.props.device.intensity ? (intensityLightView) : (normalLightView) ? intensityLightView
} : normalLightView}
</div> </div>
);
)
} }
} }

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

@ -1,4 +1,3 @@
export const valueStyle = { export const valueStyle = {
fill: "#3e99ff", fill: "#3e99ff",
fontSize: "2.5rem", fontSize: "2.5rem",
@ -20,7 +19,6 @@ export const textStyle = {
fontFamily: "Lato", fontFamily: "Lato",
}; };
export const nameStyle = { export const nameStyle = {
fontSize: "1rem", fontSize: "1rem",
position: "absolute", position: "absolute",
@ -36,19 +34,19 @@ export const LightDimmerStyle = {
width: "9rem", width: "9rem",
height: "9rem", height: "9rem",
fill: "#ffd31d", fill: "#ffd31d",
} };
export const LightDimmerContainer = { export const LightDimmerContainer = {
position: "relative", position: "relative",
width: "9rem", width: "9rem",
height: "9rem", height: "9rem",
} };
export const CircularThumbStyle = { export const CircularThumbStyle = {
fill: "white", fill: "white",
stroke: "#ffd31d", stroke: "#ffd31d",
strokeWidth: ".2rem", strokeWidth: ".2rem",
r: "1.4rem" r: "1.4rem",
}; };
export const KnobProgress = { export const KnobProgress = {

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

@ -11,20 +11,20 @@ import {
} from "semantic-ui-react"; } from "semantic-ui-react";
const StyledDiv = styled.div` const StyledDiv = styled.div`
background-color : #505bda; background-color: #505bda;
padding : 3rem; padding: 3rem;
width: 10rem; width: 10rem;
height: 10rem; height: 10rem;
border-radius: 100%; border-radius: 100%;
border: none; border: none;
position: relative; position: relative;
box-shadow: 3px 2px 10px 5px #ccc; box-shadow: 3px 2px 10px 5px #ccc;
transition : all .3s ease-out; transition: all 0.3s ease-out;
:hover{ :hover {
background-color : #4345d9; background-color: #4345d9;
} }
:active{ :active {
transform : translate(0.3px, 0.8px); transform: translate(0.3px, 0.8px);
box-shadow: 0.5px 0.5px 7px 3.5px #ccc; 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" }, image: { avatar: true, src: "/img/switchOn.svg" },
}, },
{ {
key: 'knobDimmer', key: "knobDimmer",
text: 'Knob Dimmer', text: "Knob Dimmer",
value: 'knobDimmer', value: "knobDimmer",
image: { avatar: true, src: '/img/knob.svg' }, image: { avatar: true, src: "/img/knob.svg" },
}, },
{ {
key: 'buttonDimmer', key: "buttonDimmer",
text: 'Button Dimmer', text: "Button Dimmer",
value: 'buttonDimmer', value: "buttonDimmer",
image: { avatar: true, src: '/img/plusMinus.svg' }, image: { avatar: true, src: "/img/plusMinus.svg" },
}, },
]; ];
const sensorOptions = [ const sensorOptions = [
@ -278,7 +278,7 @@ export default class NewDevice extends Component {
{this.state.typeOfDevice === "sensor" ? sensorForm : ""} {this.state.typeOfDevice === "sensor" ? sensorForm : ""}
{this.state.typeOfDevice === "switch" ? switchOptions : ""} {this.state.typeOfDevice === "switch" ? switchOptions : ""}
{this.state.typeOfDevice === "buttonDimmer" || {this.state.typeOfDevice === "buttonDimmer" ||
this.state.typeOfDevice === "knobDimmer" this.state.typeOfDevice === "knobDimmer"
? dimmerOptions ? dimmerOptions
: ""} : ""}
</Form> </Form>
@ -311,8 +311,8 @@ export default class NewDevice extends Component {
Back Back
</Button> </Button>
) : ( ) : (
"" ""
)} )}
{this.state.step < steps.length ? ( {this.state.step < steps.length ? (
<Button <Button
color="blue" color="blue"
@ -324,8 +324,8 @@ export default class NewDevice extends Component {
<Icon name="right arrow" /> <Icon name="right arrow" />
</Button> </Button>
) : ( ) : (
"" ""
)} )}
{this.state.step === steps.length ? ( {this.state.step === steps.length ? (
<Button <Button
onClick={this.createDevice} onClick={this.createDevice}
@ -337,8 +337,8 @@ export default class NewDevice extends Component {
Finish Finish
</Button> </Button>
) : ( ) : (
"" ""
)} )}
</Modal.Actions> </Modal.Actions>
</Modal> </Modal>
); );

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

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

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

@ -12,7 +12,7 @@ export const container = {
borderRadius: "100%", borderRadius: "100%",
border: "none", border: "none",
position: "relative", position: "relative",
} };
export const sensorText = { export const sensorText = {
fill: "#3e99ff", fill: "#3e99ff",
@ -42,7 +42,7 @@ export const motionSensorInnerCircle = {
height: "8rem", height: "8rem",
borderRadius: "100%", borderRadius: "100%",
border: "none", border: "none",
} };
export const motionSensorOuterCircle = { export const motionSensorOuterCircle = {
textAlign: "center", textAlign: "center",
@ -53,7 +53,7 @@ export const motionSensorOuterCircle = {
borderRadius: "100%", borderRadius: "100%",
border: "none", border: "none",
/*boxShadow: "3px 2px 10px 5px #ccc",*/ /*boxShadow: "3px 2px 10px 5px #ccc",*/
} };
export const nameMotionStyle = { export const nameMotionStyle = {
position: "absolute", position: "absolute",
@ -61,7 +61,7 @@ export const nameMotionStyle = {
left: "50%", left: "50%",
transform: "translateX(-50%)", transform: "translateX(-50%)",
fontSize: "1.2rem", fontSize: "1.2rem",
} };
export const motionSensorIcon = { export const motionSensorIcon = {
width: "2rem", width: "2rem",
@ -70,24 +70,24 @@ export const motionSensorIcon = {
top: "15%", top: "15%",
left: "50%", left: "50%",
transform: "translateX(-50%)", transform: "translateX(-50%)",
} };
export const temperatureSensorColors = { export const temperatureSensorColors = {
circle: "#323232", circle: "#323232",
progress: "#ff1e56", progress: "#ff1e56",
text: "white" text: "white",
} };
export const lightSensorColors = { export const lightSensorColors = {
circle: "#000839", circle: "#000839",
progress: "#ffa41b", progress: "#ffa41b",
text: "white" text: "white",
} };
export const humiditySensorColors = { export const humiditySensorColors = {
circle: "#005082", circle: "#005082",
progress: "#00a8cc", progress: "#00a8cc",
text: "white" text: "white",
} };
export const iconSensorStyle = { export const iconSensorStyle = {
position: "absolute", position: "absolute",
@ -96,5 +96,4 @@ export const iconSensorStyle = {
transform: "translateX(-50%)", transform: "translateX(-50%)",
width: "2rem", width: "2rem",
height: "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 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 user can reset this value.
**/ **/
import React, { Component } from 'react'; import React, { Component } from "react";
import { BottomPanel, StyledDiv } from "./styleComponents"; import { BottomPanel, StyledDiv } from "./styleComponents";
import Settings from "./DeviceSettings"; import Settings from "./DeviceSettings";
import { Image } from "semantic-ui-react"; 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"; import { call } from "../../../client_server";
export default class SmartPlug extends Component { export default class SmartPlug extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -62,19 +66,28 @@ export default class SmartPlug extends Component {
render() { render() {
return ( return (
<StyledDiv onClick={this.props.edit.mode ? () => { <StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
} : this.onClickDevice}>
<Settings <Settings
deviceId={this.props.device.id} deviceId={this.props.device.id}
edit={this.props.edit} 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} /> <Image src={this.getIcon()} style={imageStyle} />
<span style={nameStyle}>{this.props.device.name}</span> <span style={nameStyle}>{this.props.device.name}</span>
<BottomPanel style={this.state.turnedOn ? { backgroundColor: "#505bda" } : { backgroundColor: "#1a2849" }}> <BottomPanel
<span style={energyConsumedStyle}>{this.state.energyConsumed}</span><span style={kwhStyle}>KWh</span> style={
this.state.turnedOn
? { backgroundColor: "#505bda" }
: { backgroundColor: "#1a2849" }
}
>
<span style={energyConsumedStyle}>{this.state.energyConsumed}</span>
<span style={kwhStyle}>KWh</span>
</BottomPanel> </BottomPanel>
</StyledDiv> </StyledDiv>
) );
} }
} }

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

@ -4,7 +4,7 @@ export const energyConsumedStyle = {
position: "absolute", position: "absolute",
top: "20%", top: "20%",
left: "50%", left: "50%",
transform: "translateX(-50%)" transform: "translateX(-50%)",
}; };
export const kwhStyle = { export const kwhStyle = {
@ -13,8 +13,8 @@ export const kwhStyle = {
position: "absolute", position: "absolute",
top: "50%", top: "50%",
left: "50%", left: "50%",
transform: "translateX(-50%)" transform: "translateX(-50%)",
} };
export const imageStyle = { export const imageStyle = {
width: "2rem", width: "2rem",
@ -23,7 +23,7 @@ export const imageStyle = {
top: "5%", top: "5%",
left: "50%", left: "50%",
transform: "translateX(-35%)", 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 = { export const nameStyle = {
@ -31,5 +31,5 @@ export const nameStyle = {
position: "absolute", position: "absolute",
top: "30%", top: "30%",
left: "50%", 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. * 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 { BottomPanel, StyledDiv } from "./styleComponents";
import Settings from "./DeviceSettings"; import Settings from "./DeviceSettings";
import { Image } from "semantic-ui-react"; import { Image } from "semantic-ui-react";
@ -17,7 +17,7 @@ export default class Switch extends Component {
super(props); super(props);
this.state = { this.state = {
turnedOn: false, turnedOn: false,
pointingLights: [] pointingLights: [],
}; };
this.iconOn = "/img/switchOn.svg"; this.iconOn = "/img/switchOn.svg";
this.iconOff = "/img/switchOff.svg"; this.iconOff = "/img/switchOff.svg";
@ -57,22 +57,30 @@ export default class Switch extends Component {
render() { render() {
return ( return (
<StyledDiv <StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
onClick={this.props.edit.mode ? () => {
} : this.onClickDevice}>
<Settings <Settings
deviceId={this.props.device.id} deviceId={this.props.device.id}
edit={this.props.edit} 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} /> <Image src={this.getIcon()} style={imageStyle} />
<span style={nameStyle}>{this.props.device.name}</span> <span style={nameStyle}>{this.props.device.name}</span>
<BottomPanel style={this.state.turnedOn ? { backgroundColor: "#505bda" } : { backgroundColor: "#1a2849" }}> <BottomPanel
<span style={turnedOnStyle}>{this.state.turnedOn ? "ON" : "OFF"}</span> style={
this.state.turnedOn
? { backgroundColor: "#505bda" }
: { backgroundColor: "#1a2849" }
}
>
<span style={turnedOnStyle}>
{this.state.turnedOn ? "ON" : "OFF"}
</span>
</BottomPanel> </BottomPanel>
</StyledDiv> </StyledDiv>
) );
} }
} }

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

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

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

@ -14,7 +14,7 @@ export const editButtonStyle = {
outline: "none", outline: "none",
color: "white", color: "white",
fontFamily: "Lato", fontFamily: "Lato",
textTransform: "uppercase" textTransform: "uppercase",
}; };
export const panelStyle = { export const panelStyle = {
@ -45,7 +45,7 @@ export const editModeIconStyle = {
width: "0.75rem", width: "0.75rem",
height: "0.75rem", height: "0.75rem",
borderRadius: "20%", borderRadius: "20%",
zIndex: "101" zIndex: "101",
}; };
export const iconStyle = { export const iconStyle = {
@ -60,7 +60,7 @@ export const nameStyle = {
position: "absolute", position: "absolute",
top: "50%", top: "50%",
left: "50%", left: "50%",
transform: "translateX(-50%)" transform: "translateX(-50%)",
}; };
export const formStyle = { export const formStyle = {
@ -83,8 +83,8 @@ export const addDeviceFormStyle = {
export const StyledDiv = styled.div` export const StyledDiv = styled.div`
cursor: pointer; cursor: pointer;
background-color : white; background-color: white;
padding : 3rem; padding: 3rem;
width: 10rem; width: 10rem;
height: 10rem; height: 10rem;
border-radius: 100%; border-radius: 100%;
@ -103,25 +103,25 @@ export const StyledDiv = styled.div`
`; `;
export const ButtonDimmerContainer = styled.div` export const ButtonDimmerContainer = styled.div`
background-color : white; background-color: white;
padding : 3rem; padding: 3rem;
width: 10rem; width: 10rem;
height: 10rem; height: 10rem;
border-radius : 100%; border-radius: 100%;
border : none; border: none;
position : relative; position: relative;
box-shadow: 3px 2px 10px 5px #ccc; box-shadow: 3px 2px 10px 5px #ccc;
transition : all .3s ease-out; transition: all 0.3s ease-out;
text-align : center; text-align: center;
display: inline-block; display: inline-block;
.knob { .knob {
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 10rem; width: 10rem;
color: #1a2849; color: #1a2849;
} }
img{ img {
position: absolute; position: absolute;
top: 10%; top: 10%;
left: 50%; left: 50%;
@ -129,76 +129,75 @@ export const ButtonDimmerContainer = styled.div`
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
} }
`; `;
export const PlusPanel = styled.div` export const PlusPanel = styled.div`
position : absolute; position: absolute;
cursor: pointer; cursor: pointer;
bottom: 0; bottom: 0;
left: 5rem; left: 5rem;
background-color: #1a2849; background-color: #1a2849;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
border-radius: 0 0 5rem 0; border-radius: 0 0 5rem 0;
:hover{ :hover {
background-color : #505bda; background-color: #505bda;
} }
:active{ :active {
transform : translate(0.3px, 0.8px); transform: translate(0.3px, 0.8px);
} }
span { span {
color: white; color: white;
position: absolute; position: absolute;
top: 40%; top: 40%;
left: 45%; left: 45%;
font-size: 3rem; font-size: 3rem;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
`; `;
export const MinusPanel = styled.div` export const MinusPanel = styled.div`
cursor: pointer; cursor: pointer;
position : absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: #1a2849; background-color: #1a2849;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
border-radius: 0 0 0 5rem; border-radius: 0 0 0 5rem;
:hover{ :hover {
background-color : #505bda; background-color: #505bda;
} }
:active{ :active {
transform : translate(0.3px, 0.8px); transform: translate(0.3px, 0.8px);
} }
span { span {
color: white; color: white;
position: absolute; position: absolute;
top: 40%; top: 40%;
left: 45%; left: 45%;
font-size: 3rem; font-size: 3rem;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
`; `;
export const BottomPanel = styled.div` export const BottomPanel = styled.div`
position : absolute; position: absolute;
cursor: pointer; cursor: pointer;
bottom: 0; bottom: 0;
left: 0rem; left: 0rem;
width: 10rem; width: 10rem;
height: 5rem; height: 5rem;
border-bottom-left-radius: 10rem; border-bottom-left-radius: 10rem;
border-bottom-right-radius: 10rem; border-bottom-right-radius: 10rem;
span { span {
color: white; color: white;
position: absolute; position: absolute;
top: 40%; top: 40%;
left: 45%; left: 45%;
font-size: 3rem; font-size: 3rem;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
`; `;
export const ThumbText = (props) => { export const ThumbText = (props) => {
@ -209,5 +208,5 @@ export const ThumbText = (props) => {
<text style={{ ...ValueStyle, fill: props.color }} x={x} y={y + 5}> <text style={{ ...ValueStyle, fill: props.color }} x={x} y={y + 5}>
{Math.round(value * 100)} {Math.round(value * 100)}
</text> </text>
) );
} };

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

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