Merge branch 'dashboard-videocamera' into 'dev'

Dashboard videocamera

See merge request sa4-2020/the-sanmarinoes/frontend!86

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",

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";
@@ -65,6 +66,9 @@ class App extends Component {
           </Route>
           <Route path="/conf-reset-pass">
             <ConfirmResetPassword />
+          </Route>
+          <Route path="/videocam">
+            <Videocam />
         </Route>
           <Route component={FourOhFour} />
         </Switch>

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 (
+      <div>
+        <DevicePanel />
+      </div>
+    );
+  }
+}

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 <Light tab={this.props.tab} id={this.props.id} />;
       case "sensor":
@@ -46,7 +48,9 @@ class Device extends React.Component {
       case "switch":
         return <Switcher tab={this.props.tab} id={this.props.id} />;
       case "dimmableLight":
-        return <Light tab={this.props.tab} id={this.props.id} />;
+        return <Light id={this.props.id} />;
+      case "securityCamera":
+        return <Videocam id={this.props.id} />;
       default:
         throw new Error("Device type unknown");
     }

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 = [
       {

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 = (
+      <div>
+          <StyledDiv>
+            <div onClick={this.openModal}>
+            <video autoPlay loop muted  width= "100%" height="auto">
+              <source src="paranormal-activity.mp4" type='video/mp4' />
+            </video>
+          </div>
+          </StyledDiv>
+          <Grid columns="equal" divide padded>
+            <Grid.Row  textAlign="center">
+              <Grid.Column>
+                <VideocamModal 
+                  selectedVideo = {this.state.selectedVideo}
+                  closeModal = {this.closeModal}
+                />
+              </Grid.Column>
+            </ Grid.Row>
+            </Grid>
+    </div>
+    );
+
+    return (
+      <div>
+        {VideocamView}
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  device: state.devices[ownProps.id],
+});
+const VideocamContainer = connect(mapStateToProps, RemoteService)(Videocam);
+export default VideocamContainer;

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) => (
+        <Modal
+            isOpen={!!props.selectedVideo}
+            contentLabel="Live Cam"
+            onRequestClose={props.closeModal}  
+            style={ModalStyle}
+        >
+            {props.selectedVideo && 
+            <video autoPlay loop muted  width= "100%" height="auto">
+                <source src="paranormal-activity.mp4" type='video/mp4' />
+             </video>
+            }
+            <Button 
+                fluid
+                primary
+                onClick={props.closeModal}
+            >
+                Close
+            </Button>
+        </Modal>
+    );
+
+
+export default VideocamModal;

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 (
+    <text style={{ ...ValueStyle, fill: props.color }} x={x} y={y + 5}>
+      {Math.round(value * 100)}
+    </text>
+  );
+};

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 (
+        <div>
+            <VideoTest />;
+        </div>
+    )
+  }
+}

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"