From 840d5ab6a21a98e7c364ec45601edb5efc21b818 Mon Sep 17 00:00:00 2001 From: Fil Cesana Date: Wed, 22 Apr 2020 13:34:10 +0200 Subject: [PATCH] moved everyting in the right files, ready to work on the backend part. --- .../src/components/dashboard/devices/Light.js | 139 +++++++++++++----- .../dashboard/devices/VideoModalStyle.css..js | 33 ----- .../components/dashboard/devices/Videocam.js | 71 +++++++++ .../dashboard/devices/VideocamModal.js | 12 +- .../components/dashboard/devices/Videocm.js | 86 ----------- .../dashboard/devices/VideocmModal.js | 89 ----------- .../dashboard/devices/VideocmStyle.js | 1 + 7 files changed, 183 insertions(+), 248 deletions(-) delete mode 100644 smart-hut/src/components/dashboard/devices/VideoModalStyle.css..js create mode 100644 smart-hut/src/components/dashboard/devices/Videocam.js delete mode 100644 smart-hut/src/components/dashboard/devices/Videocm.js delete mode 100644 smart-hut/src/components/dashboard/devices/VideocmModal.js 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 = ( +
+ +
+ +
+ + + + + + + + +
+ ); + + return ( +
+ {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 &&