diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js
index 0db0596..9143ec3 100644
--- a/smart-hut/src/components/dashboard/devices/Light.js
+++ b/smart-hut/src/components/dashboard/devices/Light.js
@@ -10,61 +10,132 @@
import React, { Component } from "react";
import {
- StyledDiv
-} from "./VideocmStyle";
-import { Checkbox, Embed, Button, Grid, Responsive, Segment } from "semantic-ui-react";
+ iconStyle,
+ StyledDiv,
+ BottomPanel,
+ ThumbText,
+} from "./styleComponents";
+import { Image } from "semantic-ui-react";
+import {
+ CircularInput,
+ CircularProgress,
+ CircularThumb,
+} from "react-circular-input";
+import {
+ LightDimmerContainer,
+ LightDimmerStyle,
+ textStyle,
+ nameStyle,
+ KnobProgress,
+ CircularThumbStyle,
+ knobIcon,
+} from "./LightStyle";
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";
-import VideocamModal from "./VideocamModal";
-
class Light extends Component {
constructor(props) {
super(props);
- this.state = { selectedVideo: undefined};
+ this.state = { intensity: this.props.device.intensity, timeout: null };
+
+ this.iconOn = "/img/lightOn.svg";
+ this.iconOff = "/img/lightOff.svg";
+
+ this.setIntensity = this.setIntensity.bind(this);
}
- openModal = () => {
- this.setState((state) => {
- return {selectedVideo: true}
+ get turnedOn() {
+ return this.props.device.on;
+ }
- });
+ get intensity() {
+ return this.props.device.intensity || 0;
+ }
+
+ onClickDevice = () => {
+ const on = !this.turnedOn;
+ this.props
+ .saveDevice({ ...this.props.device, on })
+ .catch((err) => console.error("regular light update error", err));
};
- closeModal = () => {
- this.setState((state) => {
- return {selectedVideo:undefined}
- })
+ getIcon = () => {
+ return this.turnedOn ? this.iconOn : this.iconOff;
+ };
+
+ setIntensity(intensity) {
+ intensity *= 100;
+
+ if (this.state.timeout) {
+ clearTimeout(this.state.timeout);
+ }
+
+ this.setState({
+ intensity,
+ timeout: setTimeout(() => {
+ this.saveIntensity();
+ this.setState({
+ intensity: this.state.intensity,
+ timeout: null,
+ });
+ }, 100),
+ });
}
+ saveIntensity = () => {
+ const intensity = Math.round(this.state.intensity);
+ this.props
+ .saveDevice({ ...this.props.device, intensity })
+ .catch((err) => console.error("intensity light update error", err));
+ };
+
render() {
+ const intensityLightView = (
+
+
+
+ Intensity light
+
+
+
+
+
+
+
+ );
const normalLightView = (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ Light
+
+
+
);
return (
{this.props.device.kind === "dimmableLight"
- ? console.log('err')
+ ? intensityLightView
: normalLightView}
);
diff --git a/smart-hut/src/components/dashboard/devices/VideoModalStyle.css..js b/smart-hut/src/components/dashboard/devices/VideoModalStyle.css..js
deleted file mode 100644
index 3570958..0000000
--- a/smart-hut/src/components/dashboard/devices/VideoModalStyle.css..js
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
-
-.ReactModalPortal > div {
- opacity: 0;
-}
-
-.ReactModalPortal .ReactModal__Overlay {
- align-items: center;
- display: flex;
- justify-content: center;
- transition: opacity 200ms ease-in-out;
-}
-
-.ReactModalPortal .ReactModal__Overlay--after-open {
- opacity: 1;
-}
-
-
-.ReactModalPortal .ReactModal__Overlay--before-close {
- opacity: 0;
-}
-
-.modal {
- color: white;
- max-width: 30rem;
- outline: none;
- text-align: center;
-}
-
-.modal__body {
- margin: 0 0 0 0;
-}
\ No newline at end of file
diff --git a/smart-hut/src/components/dashboard/devices/Videocam.js b/smart-hut/src/components/dashboard/devices/Videocam.js
new file mode 100644
index 0000000..5f32dc1
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/Videocam.js
@@ -0,0 +1,71 @@
+// vim: set ts=2 sw=2 et tw=80:
+
+
+import React, { Component } from "react";
+import {
+ StyledDiv
+} from "./VideocmStyle";
+import { Checkbox, Embed, Button, Grid, Responsive, Segment } from "semantic-ui-react";
+import { RemoteService } from "../../../remote";
+import { connect } from "react-redux";
+import VideocamModal from "./VideocamModal";
+
+
+class Light extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { selectedVideo: undefined};
+ }
+
+ openModal = () => {
+ this.setState((state) => {
+ return {selectedVideo: true}
+
+ });
+ };
+
+ closeModal = () => {
+ this.setState((state) => {
+ return {selectedVideo:undefined}
+ })
+ }
+
+ render() {
+
+ const normalLightView = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {this.props.device.kind === "dimmableLight"
+ ? console.log('err')
+ : normalLightView}
+
+ );
+ }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+ device: state.devices[ownProps.id],
+});
+const LightContainer = connect(mapStateToProps, RemoteService)(Light);
+export default LightContainer;
diff --git a/smart-hut/src/components/dashboard/devices/VideocamModal.js b/smart-hut/src/components/dashboard/devices/VideocamModal.js
index 589a65d..ba54587 100644
--- a/smart-hut/src/components/dashboard/devices/VideocamModal.js
+++ b/smart-hut/src/components/dashboard/devices/VideocamModal.js
@@ -2,14 +2,14 @@ import React from 'react';
import Modal from 'react-modal';
import { Button } from "semantic-ui-react";
-const customStyles = {
+const ModalStyle = {
content: {
- top: '35%',
- left: '50%',
+ top: '20%',
+ left: '45%',
right: 'auto',
bottom: 'auto',
- marginRight: '-50%',
- width: '60%',
+ marginRight: '-40%',
+ width: '80%',
transform: 'translate(-40%, -10%)',
},
};
@@ -20,7 +20,7 @@ const VideocamModal = (props) => (
isOpen={!!props.selectedVideo}
contentLabel="Live Cam"
onRequestClose={props.closeModal}
- style={customStyles}
+ style={ModalStyle}
>
{props.selectedVideo &&