fixed switch and warnings
This commit is contained in:
parent
01dafc861c
commit
ff090ad317
15 changed files with 415 additions and 369 deletions
|
@ -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 (
|
||||||
|
|
|
@ -7,40 +7,42 @@
|
||||||
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 (
|
||||||
|
@ -48,20 +50,20 @@ export class ButtonDimmer 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) =>
|
||||||
|
this.props.onChangeData(id, newSettings)
|
||||||
|
}
|
||||||
|
/>
|
||||||
<img alt="icon" src="/img/buttonDimmer.svg" />
|
<img alt="icon" src="/img/buttonDimmer.svg" />
|
||||||
<span className="knob">
|
<span className="knob">{this.props.device.name}</span>
|
||||||
{this.props.device.name}
|
|
||||||
</span>
|
|
||||||
<PlusPanel onClick={this.increaseIntensity}>
|
<PlusPanel onClick={this.increaseIntensity}>
|
||||||
<span>+</span>
|
<span>+</span>
|
||||||
</PlusPanel>
|
</PlusPanel>
|
||||||
<MinusPanel onClick={this.decreaseIntensity}>
|
<MinusPanel onClick={this.decreaseIntensity}>
|
||||||
<span>−</span>
|
<span>−</span>
|
||||||
</MinusPanel>
|
</MinusPanel>
|
||||||
|
|
||||||
</ButtonDimmerContainer>
|
</ButtonDimmerContainer>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -70,14 +72,11 @@ export class KnobDimmer extends Component {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
pointingDevices: [],
|
pointingDevices: [],
|
||||||
value: 1
|
value: 1,
|
||||||
}
|
};
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentDidMount() {}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
|
@ -85,19 +84,33 @@ export class KnobDimmer 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) =>
|
||||||
<CircularInput style={KnobDimmerStyle} value={this.state.value}
|
this.props.onChangeData(id, newSettings)
|
||||||
onChange={(value) => this.setState({ value: value })}>
|
}
|
||||||
|
/>
|
||||||
<text style={textStyle} x={100} y={120} textAnchor="middle" dy="0.3em" fontWeight="bold">
|
<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}
|
{this.props.device.name}
|
||||||
</text>
|
</text>
|
||||||
<CircularProgress style={{ ...KnobProgress, opacity: this.state.value + 0.1 }} />
|
<CircularProgress
|
||||||
|
style={{ ...KnobProgress, opacity: this.state.value + 0.1 }}
|
||||||
|
/>
|
||||||
<CircularThumb style={CircularThumbStyle} />
|
<CircularThumb style={CircularThumbStyle} />
|
||||||
<ThumbText color={"#1a2849"} />
|
<ThumbText color={"#1a2849"} />
|
||||||
</CircularInput>
|
</CircularInput>
|
||||||
<img style={knobIcon} src="/img/knobDimmer.svg" />
|
<img alt="Knob Icon" style={knobIcon} src="/img/knobDimmer.svg" />
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,51 +1,47 @@
|
||||||
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 = {
|
||||||
|
@ -56,7 +52,7 @@ export const textStyle = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const knobIcon = {
|
export const knobIcon = {
|
||||||
position : "absolute",
|
position: "absolute",
|
||||||
left: "50%",
|
left: "50%",
|
||||||
top: "30%",
|
top: "30%",
|
||||||
transform: "translateX(-50%)",
|
transform: "translateX(-50%)",
|
||||||
|
@ -68,4 +64,4 @@ export const knobContainer = {
|
||||||
position: "relative",
|
position: "relative",
|
||||||
width: "9rem",
|
width: "9rem",
|
||||||
height: "9rem",
|
height: "9rem",
|
||||||
}
|
};
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 = {
|
||||||
|
|
|
@ -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 = [
|
||||||
|
|
|
@ -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
|
||||||
|
style={{
|
||||||
...motionSensorOuterCircle,
|
...motionSensorOuterCircle,
|
||||||
backgroundColor: this.state.detected ? "#505bda" : "#00bdaa"
|
backgroundColor: this.state.detected ? "#505bda" : "#00bdaa",
|
||||||
}}>
|
}}
|
||||||
<div style={{
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
...motionSensorInnerCircle,
|
...motionSensorInnerCircle,
|
||||||
backgroundColor: this.state.detected ? "#fe346e" : "#00bdaa"
|
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 (
|
||||||
|
@ -146,12 +142,19 @@ export default class Sensor extends Component {
|
||||||
<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} />
|
}
|
||||||
|
style={style}
|
||||||
|
>
|
||||||
|
<CircularProgress
|
||||||
|
strokeWidth="2rem"
|
||||||
|
stroke={this.colors.progress}
|
||||||
|
fill={this.colors.circle}
|
||||||
|
/>
|
||||||
<text
|
<text
|
||||||
style={{ ...valueStyle, fill: this.colors.text }}
|
style={{ ...valueStyle, fill: this.colors.text }}
|
||||||
x={100}
|
x={100}
|
||||||
|
|
|
@ -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",
|
||||||
|
};
|
||||||
}
|
|
||||||
|
|
|
@ -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>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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%)",
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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%)",
|
||||||
};
|
};
|
|
@ -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,16 +103,16 @@ 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;
|
||||||
|
@ -121,7 +121,7 @@ export const ButtonDimmerContainer = styled.div`
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
color: #1a2849;
|
color: #1a2849;
|
||||||
}
|
}
|
||||||
img{
|
img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10%;
|
top: 10%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
@ -129,11 +129,10 @@ 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;
|
||||||
|
@ -141,11 +140,11 @@ export const PlusPanel = styled.div`
|
||||||
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;
|
||||||
|
@ -159,18 +158,18 @@ export const PlusPanel = styled.div`
|
||||||
|
|
||||||
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;
|
||||||
|
@ -183,7 +182,7 @@ export const MinusPanel = styled.div`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
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;
|
||||||
|
@ -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>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
|
@ -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";
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue