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/public/paranormal-activity.mp4 b/smart-hut/public/paranormal-activity.mp4 new file mode 100644 index 0000000..f3bc61a Binary files /dev/null and b/smart-hut/public/paranormal-activity.mp4 differ 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/Device.js b/smart-hut/src/components/dashboard/devices/Device.js index 6842d0c..d71c79e 100644 --- a/smart-hut/src/components/dashboard/devices/Device.js +++ b/smart-hut/src/components/dashboard/devices/Device.js @@ -4,6 +4,7 @@ import SmartPlug from "./SmartPlug"; import Sensor from "./Sensor"; import { ButtonDimmer, KnobDimmer } from "./Dimmer"; import Switcher from "./Switch"; +import Videocam from "./Videocam"; import { Segment, Grid, Header, Button, Icon } from "semantic-ui-react"; import { RemoteService } from "../../../remote"; import { connect } from "react-redux"; @@ -30,7 +31,8 @@ class Device extends React.Component { } renderDeviceComponent() { - switch (this.props.stateOrDevice.kind) { + console.log(this.props.device) + switch (this.props.device.kind) { case "regularLight": return ; case "sensor": @@ -46,7 +48,9 @@ class Device extends React.Component { case "switch": return ; case "dimmableLight": - return ; + return ; + case "securityCamera": + return ; default: throw new Error("Device type unknown"); } diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js index fc12782..ff0ef72 100644 --- a/smart-hut/src/components/dashboard/devices/NewDevice.js +++ b/smart-hut/src/components/dashboard/devices/NewDevice.js @@ -106,6 +106,7 @@ class NewDevice extends Component { switch: "New switch", buttonDimmer: "New button dimmer", knobDimmer: "New knob dimmer", + securityCamera: "New security camera" }; if (this.state.deviceName === "") { @@ -186,6 +187,12 @@ class NewDevice extends Component { value: "buttonDimmer", image: { avatar: true, src: "/img/plusMinus.svg" }, }, + { + key: "securityCamera", + text: "Security Camera", + value: "securityCamera", + image: { avatar: true, src: "/img/plusMinus.svg" }, + } ]; const sensorOptions = [ { 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..f15bd4d --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/Videocam.js @@ -0,0 +1,69 @@ +// vim: set ts=2 sw=2 et tw=80: + + +import React, { Component } from "react"; +import { + StyledDiv +} from "./VideocmStyle"; +import {Grid } from "semantic-ui-react"; +import { RemoteService } from "../../../remote"; +import { connect } from "react-redux"; +import VideocamModal from "./VideocamModal"; + + +class Videocam 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 VideocamView = ( +
+ +
+ +
+ + + + + + + + +
+ ); + + return ( +
+ {VideocamView} +
+ ); + } +} + +const mapStateToProps = (state, ownProps) => ({ + device: state.devices[ownProps.id], +}); +const VideocamContainer = connect(mapStateToProps, RemoteService)(Videocam); +export default VideocamContainer; diff --git a/smart-hut/src/components/dashboard/devices/VideocamModal.js b/smart-hut/src/components/dashboard/devices/VideocamModal.js new file mode 100644 index 0000000..ba54587 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/VideocamModal.js @@ -0,0 +1,41 @@ +import React from 'react'; +import Modal from 'react-modal'; +import { Button } from "semantic-ui-react"; + +const ModalStyle = { + content: { + top: '20%', + left: '45%', + right: 'auto', + bottom: 'auto', + marginRight: '-40%', + width: '80%', + transform: 'translate(-40%, -10%)', + }, + }; + + +const VideocamModal = (props) => ( + + {props.selectedVideo && + + } + + + ); + + +export default VideocamModal; \ No newline at end of file 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..2e69755 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/VideocmStyle.js @@ -0,0 +1,233 @@ +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"