smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch 'dashboard-videocamera' into 'dev'

Browse source 
Dashboard videocamera

See merge request sa4-2020/the-sanmarinoes/frontend!86
This commit is contained in:
Matteo Omenetti 2020-04-22 16:37:29 +02:00
commit cdf0f88cd9
11 changed files with 407 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
smart-hut/package.json
View file

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

BIN
smart-hut/public/paranormal-activity.mp4 Normal file
View file

Binary file not shown.

4
smart-hut/src/App.js
View file

@ -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>

13
smart-hut/src/components/VideoTest.js Normal file
View file

@ -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>
);
}
}

8
smart-hut/src/components/dashboard/devices/Device.js
View file

@ -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");
}

7
smart-hut/src/components/dashboard/devices/NewDevice.js
View file

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

69
smart-hut/src/components/dashboard/devices/Videocam.js Normal file
View file

@ -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;

41
smart-hut/src/components/dashboard/devices/VideocamModal.js Normal file
View file

@ -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;

233
smart-hut/src/components/dashboard/devices/VideocmStyle.js Normal file
View file

@ -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>
);
};

13
smart-hut/src/views/Videocam.js Normal file
View file

@ -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>
)
}
}

21
smart-hut/yarn.lock
View file

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