51 lines
1.2 KiB
JavaScript
51 lines
1.2 KiB
JavaScript
import React, {useState, useEffect} from "react";
|
|
import PropTypes from "prop-types";
|
|
import { Box, Button } from "grommet";
|
|
import axios from "axios";
|
|
|
|
import { CAMERA_URL, LIGHTS_URL } from "../config";
|
|
|
|
function SmartHome(props) {
|
|
const [ idx, setIdx ] = useState(0);
|
|
useEffect(() => {
|
|
const id = setInterval(() => setIdx(i => i + 1), 20);
|
|
return () => clearInterval(id);
|
|
}, []);
|
|
function turnOn() {
|
|
axios.get(`${LIGHTS_URL}/on`);
|
|
}
|
|
function turnOff() {
|
|
axios.get(`${LIGHTS_URL}/off`);
|
|
}
|
|
return (
|
|
<Box
|
|
align="center"
|
|
background="light-1"
|
|
width="100vw"
|
|
justify="center"
|
|
direction="column"
|
|
alignContent="center"
|
|
height="95vh"
|
|
>
|
|
<img src={`${CAMERA_URL}?id=${idx}`} />
|
|
<Box direction="row" margin="1em 0">
|
|
<Button primary size="large" onClick={turnOn}
|
|
label="Turn On Lights" margin="0 0 0 0" />
|
|
<Button primary size="large" onClick={turnOff}
|
|
label="Turn Off Lights" margin="0 0 0 1em" />
|
|
</Box>
|
|
<Button primary size="large" onClick={props.close}
|
|
label="Dismiss" margin="0" />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
SmartHome.propTypes = {
|
|
data: PropTypes.object,
|
|
close: PropTypes.func
|
|
};
|
|
|
|
SmartHome.pluginName = "Smart Home";
|
|
|
|
export default SmartHome;
|