Create Accident plugin

This commit is contained in:
Ceda EI 2021-01-01 13:58:34 +05:30
parent 90a03dc17c
commit dd215a8acc
2 changed files with 69 additions and 1 deletions

66
src/plugins/Accident.js Normal file
View File

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

View File

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