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

fix security camera

Browse source
This commit is contained in:
britea 2020-04-22 20:14:18 +02:00
parent cdf0f88cd9
commit 3fdd89e238
6 changed files with 52 additions and 279 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
smart-hut/src/components/VideoTest.js
View file

@ -1,7 +1,6 @@
import React, { Component } from "react"; import React from "react";
import DevicePanel from "./dashboard/DevicePanel"; import DevicePanel from "./dashboard/DevicePanel";
export default class VideoTest extends React.Component { export default class VideoTest extends React.Component {
render() { render() {
return ( return (

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

@ -31,8 +31,7 @@ class Device extends React.Component {
} }
renderDeviceComponent() { renderDeviceComponent() {
console.log(this.props.device) switch (this.props.stateOrDevice.kind) {
switch (this.props.device.kind) {
case "regularLight": case "regularLight":
return <Light tab={this.props.tab} id={this.props.id} />; return <Light tab={this.props.tab} id={this.props.id} />;
case "sensor": case "sensor":

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

@ -1,64 +1,54 @@
// vim: set ts=2 sw=2 et tw=80: // vim: set ts=2 sw=2 et tw=80:
import React, { Component } from "react"; import React, { Component } from "react";
import { import { StyledDivCamera } from "./styleComponents";
StyledDiv import { Grid } from "semantic-ui-react";
} from "./VideocmStyle";
import {Grid } from "semantic-ui-react";
import { RemoteService } from "../../../remote"; import { RemoteService } from "../../../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
import VideocamModal from "./VideocamModal"; import VideocamModal from "./VideocamModal";
class Videocam extends Component { class Videocam extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { selectedVideo: undefined}; this.state = { selectedVideo: undefined };
} }
openModal = () => { openModal = () => {
this.setState((state) => { this.setState((state) => {
return {selectedVideo: true} return { selectedVideo: true };
}); });
}; };
closeModal = () => { closeModal = () => {
this.setState((state) => { this.setState((state) => {
return {selectedVideo:undefined} return { selectedVideo: undefined };
}) });
} };
render() { render() {
const VideocamView = ( const VideocamView = (
<div> <div>
<StyledDiv> <StyledDivCamera>
<div onClick={this.openModal}> <div onClick={this.openModal}>
<video autoPlay loop muted width= "100%" height="auto"> <video autoPlay loop muted width="100%" height="auto">
<source src="paranormal-activity.mp4" type='video/mp4' /> <source src="paranormal-activity.mp4" type="video/mp4" />
</video> </video>
</div> </div>
</StyledDiv> </StyledDivCamera>
<Grid columns="equal" divide padded> <Grid columns="equal" divide padded>
<Grid.Row textAlign="center"> <Grid.Row textAlign="center">
<Grid.Column> <Grid.Column>
<VideocamModal <VideocamModal
selectedVideo = {this.state.selectedVideo} selectedVideo={this.state.selectedVideo}
closeModal = {this.closeModal} closeModal={this.closeModal}
/> />
</Grid.Column> </Grid.Column>
</ Grid.Row> </Grid.Row>
</Grid> </Grid>
</div>
);
return (
<div>
{VideocamView}
</div> </div>
); );
return <div>{VideocamView}</div>;
} }
} }

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

@ -1,233 +0,0 @@
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>
);
};

19
smart-hut/src/components/dashboard/devices/styleComponents.js
View file

@ -122,6 +122,25 @@ export const StyledDiv = styled.div`
} }
`; `;
export const StyledDivCamera = 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` export const ButtonDimmerContainer = styled.div`
background-color: white; background-color: white;
padding: 3rem; padding: 3rem;

9
smart-hut/src/views/Videocam.js
View file

@ -1,13 +1,12 @@
import _ from "lodash";
import React from "react"; import React from "react";
import VideoTest from "../components/VideoTest"; import VideoTest from "../components/VideoTest";
export default class TestHeaderController extends React.Component { export default class TestHeaderController extends React.Component {
render() { render() {
return ( return (
<div> <div>
<VideoTest />; <VideoTest />;
</div> </div>
) );
} }
} }