Create Accident plugin
This commit is contained in:
parent
90a03dc17c
commit
dd215a8acc
|
@ -0,0 +1,66 @@
|
||||||
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
import { Box, Button, Heading, Text } from "grommet";
|
||||||
|
import { Aid, Impact } from "grommet-icons";
|
||||||
|
|
||||||
|
function sendNotification(close) {
|
||||||
|
setTimeout(close, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Accident(props) {
|
||||||
|
const threshold = 20;
|
||||||
|
const [ time, setTime ] = useState(threshold);
|
||||||
|
const countRef = useRef(null);
|
||||||
|
|
||||||
|
function decrementTime(time) {
|
||||||
|
if (time === 0) {
|
||||||
|
clearInterval(countRef.current);
|
||||||
|
sendNotification(props.close);
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return time - 1;
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
countRef.current = setInterval(() => setTime(decrementTime), 1000);
|
||||||
|
return () => clearInterval(countRef.current);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
function dismiss() {
|
||||||
|
clearTimeout(countRef.current);
|
||||||
|
props.close();
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
align="center"
|
||||||
|
background="light-1"
|
||||||
|
width="100vw"
|
||||||
|
justify="center"
|
||||||
|
direction="column"
|
||||||
|
alignContent="center"
|
||||||
|
height="100vh"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
time === 0 ?
|
||||||
|
<Aid color="plain" size="xlarge" />
|
||||||
|
:<Impact color="#D0C100" size="xlarge" />
|
||||||
|
}
|
||||||
|
<Heading>{
|
||||||
|
time === 0 ?
|
||||||
|
"Calling Ambulance!"
|
||||||
|
:"Accident Detected!"
|
||||||
|
}</Heading>
|
||||||
|
<Text>{
|
||||||
|
time === 0 ? "Calling Ambulance":
|
||||||
|
`To cancel calling the ambulance, press the button below. (${time})`
|
||||||
|
}</Text>
|
||||||
|
<Button primary size="large" onClick={dismiss}
|
||||||
|
label="Dismiss" margin="1.5em" />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Accident.propTypes = {
|
||||||
|
close: PropTypes.func
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Accident;
|
|
@ -1,9 +1,11 @@
|
||||||
import Warning from "./warning";
|
import Warning from "./warning";
|
||||||
import Manual from "./manual";
|
import Manual from "./manual";
|
||||||
import Temperature from "./temperature";
|
import Temperature from "./temperature";
|
||||||
|
import Accident from "./Accident";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
warning: Warning,
|
warning: Warning,
|
||||||
manual: Manual,
|
manual: Manual,
|
||||||
temperature: Temperature
|
temperature: Temperature,
|
||||||
|
accident: Accident,
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue