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

finally fixed the css problem with the videocamera modal, now styling the simulation panel. There is a very weird bug with the slider on the left side of the header controller which is somehow visible when the modal is open, I will keep it for the end

Browse source
This commit is contained in:
Fil Cesana 2020-05-09 09:57:04 +02:00
parent bf9919560a
commit c837a8156c
3 changed files with 112 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
smart-hut/src/components/HeaderController.js
View file

@ -69,6 +69,10 @@ export class MyHeader extends React.Component {
render() {
return (
<div>
<SimulationPanel
simulationPanel={this.state.simulationPanel}
closeSimulationPanel={this.closeSimulationPanel}
/>
<Responsive minWidth={768}>
<Grid columns="equal" divided inverted padded>
<Grid.Row color="black" textAlign="center">
@ -83,10 +87,6 @@ export class MyHeader extends React.Component {
<div onClick={this.openSimulationPanel}>
<Button > Similuation Panel </Button>
</div>
<SimulationPanel
simulationPanel={this.state.simulationPanel}
closeSimulationPanel={this.closeSimulationPanel}
/>
</Grid.Row>
</Grid.Column>
<Grid.Column>
@ -143,22 +143,15 @@ export class MyHeader extends React.Component {
<Divider />
<Grid.Row>
<Button onClick={this.logout}>Logout</Button>
<Segment
compact
style={{
margin: "auto",
marginTop: "1em",
textAlign: "center",
}}
>
</Grid.Row>
<Divider />
<Grid.Row>
<Checkbox
label={<label>Share cameras</label>}
checked={this.props.cameraEnabled}
toggle
onChange={(e, val) => this.setCameraEnabled(val.checked)}
/>
</Segment>
</Grid.Row>
</Grid.Column>
</Grid.Row>

106
smart-hut/src/components/SimulationPanel.js
View file

@ -1,41 +1,97 @@
import React from "react";
import Modal from "react-modal";
import { Button } from "semantic-ui-react";
import {
Grid,
Divider,
Button,
Label,
Responsive,
Checkbox,
Image,
} from "semantic-ui-react";
const ReactModalPortal = {
opacity: 0
};
// const ReactModalPortal = {
// opacity: 0
// };
const ReactModal__Overlay = {
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
transition: 'opacity 200ms ease-in-out'
};
// const ReactModal__Overlay = {
// background: 'black',
// alignItems: 'center',
// display: 'flex',
// justifyContent: 'center',
// transition: 'opacity 200ms ease-in-out'
// };
const modal = {
background: 'grey',
color: 'white',
maxWidth: '2rem',
outline: 'none',
padding: '2rem',
textAlign: 'center'
};
// const modal = {
// background: 'grey',
// color: 'white',
// maxWidth: '2rem',
// outline: 'none',
// padding: '2rem',
// textAlign: 'center'
// };
const SimulationPanel = (props) => (
<Modal
isOpen={!!props.simulationPanel}
contentLabel="Simulation Panel"
onRequestClose={props.closeSimulationPanel}
style={ReactModalPortal,ReactModal__Overlay, modal}
// style={ReactModalPortal,ReactModal__Overlay, modal}
style={{
overlay: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0,0,0,0.5)'
},
content: {
position: 'absolute',
top: '40px',
left: '40px',
right: '40px',
bottom: '40px',
border: '1px solid #ccc',
background: '#fff',
overflow: 'auto',
WebkitOverflowScrolling: 'touch',
borderRadius: '4px',
outline: 'none',
padding: '20px',
backgroundColor: 'black'
}
}}
>
{props.simulationPanel && (
<p> hey man </p>
)}
<Button fluid primary onClick={props.closeSimulationPanel}>
Exit
</Button>
{props.simulationPanel}
<Responsive minWidth={768}>
<Grid columns={3} divided inverted padded>
<Grid.Row>
<Grid.Column>
<Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
</Grid.Column>
<Grid.Column>
<Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
</Grid.Column>
<Grid.Column>
<Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
<Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
</Grid.Column>
<Grid.Column>
<Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
</Grid.Column>
<Grid.Column>
<Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
</Grid.Column>
</Grid.Row>
</Grid>
</Responsive>
</Modal>
);

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

@ -1,37 +1,42 @@
import React from "react";
import Modal from "react-modal";
import { Button } from "semantic-ui-react";
const modal = {
opacity: 0,
alignItems: "center",
display: "flex",
justifyContent: "center",
transition: "opacity 200ms ease-in-out",
background: "grey",
color: "white",
maxWidth: "2rem",
outline: "none",
padding: "2rem",
textAlign: "center",
maxHeight: "50vh",
};
const VideocamModal = (props) => (
<Modal
isOpen={!!props.selectedVideo}
contentLabel="Live Cam"
onRequestClose={props.closeModal}
style={modal}
style={{
overlay: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0,0,0,0.5)'
},
content: {
position: 'absolute',
top: '40px',
left: '40px',
right: '40px',
bottom: '40px',
border: '1px solid #ccc',
background: '#fff',
overflow: 'auto',
WebkitOverflowScrolling: 'touch',
borderRadius: '4px',
outline: 'none',
padding: '20px',
backgroundColor: 'black'
}
}}
>
{props.selectedVideo && (
<video autoPlay loop muted width="100%" height="90%">
<source src={props.url} type="video/mp4" />
</video>
)}
<Button fluid primary onClick={props.closeModal}>
Close
</Button>
</Modal>
);