diff options
Diffstat (limited to 'modern/src/reports/ReplayPage.js')
| -rw-r--r-- | modern/src/reports/ReplayPage.js | 60 |
1 files changed, 45 insertions, 15 deletions
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js index bb32daa..fa94a06 100644 --- a/modern/src/reports/ReplayPage.js +++ b/modern/src/reports/ReplayPage.js @@ -1,15 +1,21 @@ import React, { useState } from 'react'; +import { useParams } from 'react-router-dom'; import { - Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Paper, Slider, Tooltip, Typography, + Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Paper, Slider, Tooltip, Typography, IconButton, Box } from '@material-ui/core'; + import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import SkipNextIcon from '@material-ui/icons/SkipNext'; +import SkipPreviousIcon from '@material-ui/icons/SkipPrevious'; + import MainToolbar from '../MainToolbar'; import Map from '../map/Map'; import ReplayPathMap from '../map/ReplayPathMap'; import PositionsMap from '../map/PositionsMap'; -import { formatPosition } from '../common/formatter'; +import { formatPosition, formatSpeed } from '../common/formatter'; import ReportFilter from './ReportFilter'; import { useTranslation } from '../LocalizationProvider'; +import { useAttributePreference } from '../common/preferences'; const useStyles = makeStyles((theme) => ({ root: { @@ -41,8 +47,11 @@ const TimeLabel = ({ children, open, value }) => ( const ReplayPage = () => { const classes = useStyles(); + const { id } = useParams(); const t = useTranslation(); + const speedUnit = useAttributePreference('speedUnit'); + const [expanded, setExpanded] = useState(true); const [positions, setPositions] = useState([]); const [index, setIndex] = useState(0); @@ -68,18 +77,39 @@ const ReplayPage = () => { <Container maxWidth="sm" className={classes.controlPanel}> {!!positions.length && ( - <Paper className={classes.controlContent}> - <Slider - max={positions.length - 1} - step={null} - marks={positions.map((_, index) => ({ value: index }))} - value={index} - onChange={(_, index) => setIndex(index)} - valueLabelDisplay="auto" - valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime', t) : '')} - ValueLabelComponent={TimeLabel} - /> - </Paper> + <Paper className={classes.controlContent}> + <Box maxWidth="sm" display="flex"> + {/* Previous position button */} + <IconButton color="primary" disabled={index === 0} onClick={() => setIndex(index - 1)}> + <SkipPreviousIcon /> + </IconButton> + + <Box flexGrow={1} textAlign="center"> + {/* Date time */} + <Typography variant="button">{formatPosition(positions[index], 'fixTime', t)}</Typography> + {/* Speed */} + {positions[index].speed != undefined && + <> + <br/><Typography variant="secondary">{formatSpeed(positions[index].speed, speedUnit, t)}</Typography> + </>} + </Box> + {/* Speed */} + {/* Next position button*/} + <IconButton color="primary" disabled={index === positions.length - 1} onClick={() => setIndex(index + 1)}> + <SkipNextIcon /> + </IconButton> + </Box> + <Slider + max={positions.length - 1} + step={null} + marks={positions.map((_, index) => ({ value: index }))} + value={index} + onChange={(_, index) => setIndex(index)} + valueLabelDisplay="auto" + valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime', t) : '')} + ValueLabelComponent={TimeLabel} + /> + </Paper> )} <div> <Accordion expanded={expanded} onChange={() => setExpanded(!expanded)}> @@ -89,7 +119,7 @@ const ReplayPage = () => { </Typography> </AccordionSummary> <AccordionDetails className={classes.configForm}> - <ReportFilter handleSubmit={handleSubmit} showOnly /> + <ReportFilter handleSubmit={handleSubmit} showOnly defaultSelected={id} /> </AccordionDetails> </Accordion> </div> |