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

fixed switch and warnings

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

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

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<script>
window.BACKEND_URL = "__BACKEND_URL__";
window.BACKEND_URL = "__BACKEND_URL__";
</script>
<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,
};
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 (

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 .
**/
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 (
<ButtonDimmerContainer>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
<img alt="icon" src="/img/buttonDimmer.svg" />
<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>
)
}
render() {
return (
<ButtonDimmerContainer>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
<img alt="icon" src="/img/buttonDimmer.svg" />
<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>
);
}
}
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 (
<div style={knobContainer}>
<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">
{this.props.device.name}
</text>
<CircularProgress style={{ ...KnobProgress, opacity: this.state.value + 0.1 }} />
<CircularThumb style={CircularThumbStyle} />
<ThumbText color={"#1a2849"} />
</CircularInput>
<img style={knobIcon} src="/img/knobDimmer.svg" />
</div>
)
}
render() {
return (
<div style={knobContainer}>
<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"
>
{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 = {
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",
};

86
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 => {
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 = (
<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 = {

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

@ -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
: ""}
</Form>
@ -311,8 +311,8 @@ export default class NewDevice extends Component {
Back
</Button>
) : (
""
)}
""
)}
{this.state.step < steps.length ? (
<Button
color="blue"
@ -324,8 +324,8 @@ export default class NewDevice extends Component {
<Icon name="right arrow" />
</Button>
) : (
""
)}
""
)}
{this.state.step === steps.length ? (
<Button
onClick={this.createDevice}
@ -337,8 +337,8 @@ export default class NewDevice extends Component {
Finish
</Button>
) : (
""
)}
""
)}
</Modal.Actions>
</Modal>
);

115
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={{
...motionSensorOuterCircle,
backgroundColor: this.state.detected ? "#505bda" : "#00bdaa"
}}>
<div style={{
...motionSensorInnerCircle,
backgroundColor: this.state.detected ? "#fe346e" : "#00bdaa"
}}>
<div
style={{
...motionSensorOuterCircle,
backgroundColor: this.state.detected ? "#505bda" : "#00bdaa",
}}
>
<div
style={{
...motionSensorInnerCircle,
backgroundColor: this.state.detected ? "#fe346e" : "#00bdaa",
}}
>
<Image style={motionSensorIcon} src="/img/motionSensorIcon.svg" />
<span style={nameMotionStyle}>{this.props.device.name}</span>
</div >
</div>
</div>
)
);
};
return (
@ -145,39 +141,46 @@ export default class Sensor extends Component {
{this.state.motion ? (
<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} />
<text
style={{ ...valueStyle, fill: this.colors.text }}
x={100}
y={110}
textAnchor="middle"
dy="0.3em"
fontWeight="bold"
fill={this.colors.text}
>
{+(Math.round(this.state.value + "e+2") + "e-2")}
{this.units}
</text>
<text
style={{ ...sensorText, fill: this.colors.text }}
x={100}
y={150}
textAnchor="middle"
dy="0.4em"
fontWeight="bold"
>
{this.setName()}
</text>
</CircularInput>
<Image style={iconSensorStyle} src={`/img/${this.icon}`} />
</React.Fragment>
)}
<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}
/>
<text
style={{ ...valueStyle, fill: this.colors.text }}
x={100}
y={110}
textAnchor="middle"
dy="0.3em"
fontWeight="bold"
fill={this.colors.text}
>
{+(Math.round(this.state.value + "e+2") + "e-2")}
{this.units}
</text>
<text
style={{ ...sensorText, fill: this.colors.text }}
x={100}
y={150}
textAnchor="middle"
dy="0.4em"
fontWeight="bold"
>
{this.setName()}
</text>
</CircularInput>
<Image style={iconSensorStyle} src={`/img/${this.icon}`} />
</React.Fragment>
)}
</div>
);
}

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>
)
);
}
}

6
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%)",
};

161
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 = {
@ -83,8 +83,8 @@ export const addDeviceFormStyle = {
export const StyledDiv = styled.div`
cursor: pointer;
background-color : white;
padding : 3rem;
background-color: white;
padding: 3rem;
width: 10rem;
height: 10rem;
border-radius: 100%;
@ -103,25 +103,25 @@ export const StyledDiv = styled.div`
`;
export const ButtonDimmerContainer = styled.div`
background-color : white;
padding : 3rem;
background-color: white;
padding: 3rem;
width: 10rem;
height: 10rem;
border-radius : 100%;
border : none;
position : relative;
border-radius: 100%;
border: none;
position: relative;
box-shadow: 3px 2px 10px 5px #ccc;
transition : all .3s ease-out;
text-align : center;
transition: all 0.3s ease-out;
text-align: center;
display: inline-block;
.knob {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 10rem;
color: #1a2849;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 10rem;
color: #1a2849;
}
img{
img {
position: absolute;
top: 10%;
left: 50%;
@ -129,76 +129,75 @@ export const ButtonDimmerContainer = styled.div`
width: 1.5rem;
height: 1.5rem;
}
`;
export const PlusPanel = styled.div`
position : absolute;
cursor: pointer;
bottom: 0;
left: 5rem;
background-color: #1a2849;
width: 5rem;
height: 5rem;
border-radius: 0 0 5rem 0;
:hover{
background-color : #505bda;
}
:active{
transform : translate(0.3px, 0.8px);
}
span {
color: white;
position: absolute;
top: 40%;
left: 45%;
font-size: 3rem;
transform: translate(-50%, -50%);
}
position: absolute;
cursor: pointer;
bottom: 0;
left: 5rem;
background-color: #1a2849;
width: 5rem;
height: 5rem;
border-radius: 0 0 5rem 0;
:hover {
background-color: #505bda;
}
:active {
transform: translate(0.3px, 0.8px);
}
span {
color: white;
position: absolute;
top: 40%;
left: 45%;
font-size: 3rem;
transform: translate(-50%, -50%);
}
`;
export const MinusPanel = styled.div`
cursor: pointer;
position : absolute;
bottom: 0;
left: 0;
background-color: #1a2849;
width: 5rem;
height: 5rem;
border-radius: 0 0 0 5rem;
:hover{
background-color : #505bda;
}
:active{
transform : translate(0.3px, 0.8px);
}
span {
color: white;
position: absolute;
top: 40%;
left: 45%;
font-size: 3rem;
transform: translate(-50%, -50%);
}
cursor: pointer;
position: absolute;
bottom: 0;
left: 0;
background-color: #1a2849;
width: 5rem;
height: 5rem;
border-radius: 0 0 0 5rem;
:hover {
background-color: #505bda;
}
:active {
transform: translate(0.3px, 0.8px);
}
span {
color: white;
position: absolute;
top: 40%;
left: 45%;
font-size: 3rem;
transform: translate(-50%, -50%);
}
`;
export const BottomPanel = styled.div`
position : absolute;
cursor: pointer;
bottom: 0;
left: 0rem;
width: 10rem;
height: 5rem;
border-bottom-left-radius: 10rem;
border-bottom-right-radius: 10rem;
span {
color: white;
position: absolute;
top: 40%;
left: 45%;
font-size: 3rem;
transform: translate(-50%, -50%);
}
position: absolute;
cursor: pointer;
bottom: 0;
left: 0rem;
width: 10rem;
height: 5rem;
border-bottom-left-radius: 10rem;
border-bottom-right-radius: 10rem;
span {
color: white;
position: absolute;
top: 40%;
left: 45%;
font-size: 3rem;
transform: translate(-50%, -50%);
}
`;
export const ThumbText = (props) => {
@ -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";