diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2020-11-03 13:58:37 -0800 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2020-11-03 13:58:37 -0800 |
commit | d53632348f684f35719b035ff39744a41c088f3e (patch) | |
tree | d693d971a58e96dd0aed072d5fbec45151c2c780 /modern/src/reports/ReplayPage.js | |
parent | 3c9f0117b2b3cdffc98f4ea19e5dbc7ed40e9b4f (diff) | |
download | etbsa-traccar-web-d53632348f684f35719b035ff39744a41c088f3e.tar.gz etbsa-traccar-web-d53632348f684f35719b035ff39744a41c088f3e.tar.bz2 etbsa-traccar-web-d53632348f684f35719b035ff39744a41c088f3e.zip |
Show replay path
Diffstat (limited to 'modern/src/reports/ReplayPage.js')
-rw-r--r-- | modern/src/reports/ReplayPage.js | 58 |
1 files changed, 56 insertions, 2 deletions
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js index 0988284..bdc9edb 100644 --- a/modern/src/reports/ReplayPage.js +++ b/modern/src/reports/ReplayPage.js @@ -1,7 +1,11 @@ -import React from 'react'; -import { Container, makeStyles, Paper, Slider } from '@material-ui/core'; +import React, { useState } from 'react'; +import { Accordion, AccordionDetails, AccordionSummary, Button, Container, FormControl, makeStyles, Paper, Slider, Typography } from '@material-ui/core'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import MainToolbar from '../MainToolbar'; import Map from '../map/Map'; +import t from '../common/localization'; +import FilterForm from './FilterForm'; +import ReplayPathMap from '../map/ReplayPathMap'; const useStyles = makeStyles(theme => ({ root: { @@ -17,21 +21,71 @@ const useStyles = makeStyles(theme => ({ }, controlContent: { padding: theme.spacing(2), + marginBottom: theme.spacing(2), + }, + configForm: { + display: 'flex', + flexDirection: 'column', }, })); const ReplayPage = () => { const classes = useStyles(); + const [expanded, setExpanded] = useState(true); + + const [deviceId, setDeviceId] = useState(); + const [from, setFrom] = useState(); + const [to, setTo] = useState(); + + const [positions, setPositions] = useState([]); + + const handleShow = async () => { + const query = new URLSearchParams({ + deviceId, + from: from.toISOString(), + to: to.toISOString(), + }); + const response = await fetch(`/api/positions?${query.toString()}`, { headers: { 'Accept': 'application/json' } }); + if (response.ok) { + setPositions(await response.json()); + setExpanded(false); + } + }; + return ( <div className={classes.root}> <MainToolbar /> <Map> + <ReplayPathMap positions={positions} /> </Map> <Container maxWidth="sm" className={classes.controlPanel}> <Paper className={classes.controlContent}> <Slider defaultValue={30} /> </Paper> + <div> + <Accordion expanded={expanded} onChange={() => setExpanded(!expanded)}> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography align='center'> + {t('reportConfigure')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.configForm}> + <FilterForm + deviceId={deviceId} + setDeviceId={setDeviceId} + from={from} + setFrom={setFrom} + to={to} + setTo={setTo} /> + <FormControl margin='normal' fullWidth> + <Button type='button' color='primary' variant='contained' disabled={!deviceId} onClick={handleShow}> + {t('reportShow')} + </Button> + </FormControl> + </AccordionDetails> + </Accordion> + </div> </Container> </div> ); |