diff --git a/smart-hut/package.json b/smart-hut/package.json
index a73a712..74f3aa1 100644
--- a/smart-hut/package.json
+++ b/smart-hut/package.json
@@ -19,6 +19,7 @@
"react-circular-slider-svg": "^0.1.5",
"react-device-detect": "^1.11.14",
"react-dom": "^16.12.0",
+ "react-modal": "2.2.2",
"react-redux": "^7.2.0",
"react-round-slider": "^1.0.1",
"react-router": "^5.1.2",
diff --git a/smart-hut/src/App.js b/smart-hut/src/App.js
index d847bd3..1365896 100644
--- a/smart-hut/src/App.js
+++ b/smart-hut/src/App.js
@@ -11,6 +11,7 @@ import ConfirmForgotPasswrod from "./views/ConfirmForgotPassword";
import ConfirmRegistration from "./views/ConfirmRegistration";
import ConfirmResetPassword from "./views/ConfirmResetPassword";
import Instruction from "./views/Instruction";
+import Videocam from "./views/Videocam";
import queryString from "query-string";
import { RemoteService } from "./remote";
import { connect } from "react-redux";
@@ -66,6 +67,9 @@ class App extends Component {
+
+
+
diff --git a/smart-hut/src/components/VideoTest.js b/smart-hut/src/components/VideoTest.js
new file mode 100644
index 0000000..7d90251
--- /dev/null
+++ b/smart-hut/src/components/VideoTest.js
@@ -0,0 +1,13 @@
+import React, { Component } from "react";
+import DevicePanel from "./dashboard/DevicePanel";
+
+
+export default class VideoTest extends React.Component {
+ render() {
+ return (
+
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js
index 9143ec3..f8797c6 100644
--- a/smart-hut/src/components/dashboard/devices/Light.js
+++ b/smart-hut/src/components/dashboard/devices/Light.js
@@ -10,29 +10,14 @@
import React, { Component } from "react";
import {
- 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";
+ StyledDiv,hAbRNe
+} from "./VideocmStyle";
+import { Checkbox, Embed } from "semantic-ui-react";
+
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";
+
class Light extends Component {
constructor(props) {
super(props);
@@ -40,18 +25,13 @@ class Light extends Component {
this.iconOn = "/img/lightOn.svg";
this.iconOff = "/img/lightOff.svg";
-
- this.setIntensity = this.setIntensity.bind(this);
}
get turnedOn() {
return this.props.device.on;
}
- get intensity() {
- return this.props.device.intensity || 0;
- }
-
+
onClickDevice = () => {
const on = !this.turnedOn;
this.props
@@ -63,79 +43,36 @@ class Light extends Component {
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"
- ? intensityLightView
+ ? console.log('err')
: normalLightView}
);
diff --git a/smart-hut/src/components/dashboard/devices/Videocm.js b/smart-hut/src/components/dashboard/devices/Videocm.js
new file mode 100644
index 0000000..8943098
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/Videocm.js
@@ -0,0 +1,149 @@
+// vim: set ts=2 sw=2 et tw=80:
+
+/**
+ * Users can add lights in their rooms.
+ * Lights are devices like bulbs, LED strip lights, lamps.
+ * Lights may support an intensity level (from 0% to 100%).
+ * Lights have an internal state that can be changed and it must
+ * be shown accordingly in the SmartHut views (house view and room views).
+ */
+
+import React, { Component } from "react";
+import {
+ 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";
+
+class Videocm extends Component {
+ constructor(props) {
+ super(props);
+ 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);
+ }
+
+ 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));
+ };
+
+ 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"
+ ? intensityLightView
+ : normalLightView}
+
+ );
+ }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+ device: state.devices[ownProps.id],
+});
+const LightContainer = connect(mapStateToProps, RemoteService)(Videocm);
+export default LightContainer;
diff --git a/smart-hut/src/components/dashboard/devices/VideocmModal.js b/smart-hut/src/components/dashboard/devices/VideocmModal.js
new file mode 100644
index 0000000..7889d43
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/VideocmModal.js
@@ -0,0 +1,89 @@
+// vim: set ts=2 sw=2 et tw=80:
+
+/**
+ * Users can add lights in their rooms.
+ * Lights are devices like bulbs, LED strip lights, lamps.
+ * Lights may support an intensity level (from 0% to 100%).
+ * Lights have an internal state that can be changed and it must
+ * be shown accordingly in the SmartHut views (house view and room views).
+ */
+
+import React, { Component } from "react";
+import {
+ StyledDiv,hAbRNe
+} from "./VideocmStyle";
+import Modal from "react-modal";
+import { Checkbox, Embed } from "semantic-ui-react";
+
+import { RemoteService } from "../../../remote";
+import { connect } from "react-redux";
+
+
+class Light extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { intensity: this.props.device.intensity, timeout: null };
+
+ this.iconOn = "/img/lightOn.svg";
+ this.iconOff = "/img/lightOff.svg";
+ }
+
+ get turnedOn() {
+ return this.props.device.on;
+ }
+
+
+ onClickDevice = () => {
+ const on = !this.turnedOn;
+ this.props
+ .saveDevice({ ...this.props.device, on })
+ .catch((err) => console.error("regular light update error", err));
+ };
+
+ getIcon = () => {
+ return this.turnedOn ? this.iconOn : this.iconOff;
+ };
+
+
+ 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/VideocmStyle.js b/smart-hut/src/components/dashboard/devices/VideocmStyle.js
new file mode 100644
index 0000000..1e06a63
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/VideocmStyle.js
@@ -0,0 +1,232 @@
+import styled from "styled-components";
+import { useCircularInputContext } from "react-circular-input";
+import { ValueStyle } from "./DimmerStyle";
+import React from "react";
+
+export const editButtonStyle = {
+ position: "absolute",
+ top: "0",
+ right: "0",
+ backgroundColor: "#505bda",
+ borderRadius: "0 0 0 20px",
+ border: "none",
+ padding: ".4rem 1.2rem",
+ outline: "none",
+ color: "white",
+ fontFamily: "Lato",
+ textTransform: "uppercase",
+};
+
+export const panelStyle = {
+ position: "relative",
+ backgroundColor: "#fafafa",
+ height: "100vh",
+ width: "auto",
+ padding: "0rem 3rem",
+};
+
+export const editModeStyle = {
+ position: "absolute",
+ top: "15%",
+ right: "0",
+ width: "1.5rem",
+ height: "1.5rem",
+ backgroundColor: "black",
+ borderRadius: "100%",
+ zIndex: "1000",
+ cursor: "pointer",
+};
+
+export const editModeStyleLeft = {
+ position: "absolute",
+ top: "15%",
+ left: "0",
+ width: "1.5rem",
+ height: "1.5rem",
+ backgroundColor: "white",
+ borderRadius: "100%",
+ zIndex: "1000",
+ cursor: "pointer",
+};
+
+export const editModeIconStyle = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)",
+ width: "0.75rem",
+ height: "0.75rem",
+ borderRadius: "20%",
+ zIndex: "101",
+};
+
+export const iconStyle = {
+ width: "3.5rem",
+ height: "auto",
+ position: "absolute",
+ top: "10%",
+ left: "50%",
+ transform: "translateX(-50%)",
+};
+export const nameStyle = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translateX(-50%)",
+};
+
+export const formStyle = {
+ position: "absolute",
+ zIndex: "1000",
+ width: "80rem",
+ height: "10rem",
+ padding: "1rem",
+ margin: "1rem",
+ borderRadius: "10%",
+ boxShadow: "1px 1px 5px 2px #5d5d5d",
+ backgroundColor: "#3e99ff",
+};
+
+export const addDeviceFormStyle = {
+ maxWidth: "400px",
+ background: "#3e99ff",
+ paddingRight: "5rem",
+};
+
+export const StyledDiv = styled.div`
+ cursor: pointer;
+ background-color: white;
+ padding: 0.5rem;
+ margin-bottom: 0.5rem;
+ border: none;
+ position: relative;
+ box-shadow: 3px 2px 10px 5px #ccc;
+ transition: all 0.3s ease-out;
+ text-align: center;
+ :hover {
+ background-color: #f2f2f2;
+ }
+ :active {
+ transform: translate(0.3px, 0.8px);
+ box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
+ }
+`;
+
+export const ButtonDimmerContainer = styled.div`
+ background-color: white;
+ padding: 3rem;
+ width: 10rem;
+ height: 10rem;
+ border-radius: 100%;
+ border: none;
+ position: relative;
+ box-shadow: 3px 2px 10px 5px #ccc;
+ transition: all 0.3s ease-out;
+ text-align: center;
+ display: inline-block;
+ .knob {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 10rem;
+ color: #1a2849;
+ }
+ img {
+ position: absolute;
+ top: 10%;
+ left: 50%;
+ transform: translateX(-50%);
+ 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%);
+ }
+`;
+
+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%);
+ }
+`;
+
+export const BottomPanel = styled.div`
+ position: absolute;
+ cursor: pointer;
+ bottom: 0;
+ left: 0rem;
+ width: 20rem;
+ height: 10rem;
+ span {
+ color: white;
+ position: absolute;
+ top: 40%;
+ left: 45%;
+ font-size: 3rem;
+ transform: translate(-50%, -50%);
+ }
+`;
+
+
+export const hAbRNe = styled.div`
+ cursor: pointer;
+ padding: 1rem;
+ border: none;
+ position: relative;
+ box-shadow: 3px 2px 10px 5px #ccc;
+ transition: all 0.3s ease-out;
+ text-align: center;
+ }
+`;
+
+export const ThumbText = (props) => {
+ const { getPointFromValue, value } = useCircularInputContext();
+ const { x, y } = getPointFromValue();
+
+ return (
+
+ {Math.round(value * 100)}
+
+ );
+};
diff --git a/smart-hut/src/views/Videocam.js b/smart-hut/src/views/Videocam.js
new file mode 100644
index 0000000..63fb009
--- /dev/null
+++ b/smart-hut/src/views/Videocam.js
@@ -0,0 +1,13 @@
+import _ from "lodash";
+import React from "react";
+import VideoTest from "../components/VideoTest";
+
+export default class TestHeaderController extends React.Component {
+ render() {
+ return (
+
+ ;
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/smart-hut/yarn.lock b/smart-hut/yarn.lock
index 4ade4c1..17e0c1b 100644
--- a/smart-hut/yarn.lock
+++ b/smart-hut/yarn.lock
@@ -4243,6 +4243,11 @@ execa@^1.0.0:
signal-exit "^3.0.0"
strip-eof "^1.0.0"
+exenv@1.2.0:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.0.tgz#3835f127abf075bfe082d0aed4484057c78e3c89"
+ integrity sha1-ODXxJ6vwdb/ggtCu1EhAV8eOPIk=
+
exenv@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
@@ -8518,7 +8523,7 @@ prop-types@15.6.2:
loose-envify "^1.3.1"
object-assign "^4.1.1"
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8736,6 +8741,11 @@ react-device-detect@^1.11.14:
dependencies:
ua-parser-js "^0.7.20"
+react-dom-factories@^1.0.0:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.2.tgz#eb7705c4db36fb501b3aa38ff759616aa0ff96e0"
+ integrity sha1-63cFxNs2+1AbOqOP91lhaqD/luA=
+
react-dom@^16.12.0:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
@@ -8766,6 +8776,15 @@ react-is@^16.9.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+react-modal@2.2.2:
+ version "2.2.2"
+ resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-2.2.2.tgz#4bbf98bc506e61c446c9f57329c7a488ea7d504b"
+ integrity sha512-tdgyEyfbyfzDUj40XtWldAQe7e+yhJDUtVSlsQ9AQCGifzWck6v1XTtIVGViVftOsEA3cBWCZCjF3rq6FPJzMg==
+ dependencies:
+ exenv "1.2.0"
+ prop-types "^15.5.10"
+ react-dom-factories "^1.0.0"
+
react-popper@^1.3.4:
version "1.3.7"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"