import React, { useState, useEffect, useRef, useCallback, } from 'react'; import { Grid, IconButton, Paper, Slider, Toolbar, Tooltip, Typography, } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import SettingsIcon from '@mui/icons-material/Settings'; import PlayArrowIcon from '@mui/icons-material/PlayArrow'; import PauseIcon from '@mui/icons-material/Pause'; import FastForwardIcon from '@mui/icons-material/FastForward'; import FastRewindIcon from '@mui/icons-material/FastRewind'; import { useNavigate } from 'react-router-dom'; import { useSelector } from 'react-redux'; import MapView from '../map/core/MapView'; import MapRoutePath from '../map/MapRoutePath'; import MapPositions from '../map/MapPositions'; import { formatTime } from '../common/util/formatter'; import ReportFilter from '../reports/components/ReportFilter'; import { useTranslation } from '../common/components/LocalizationProvider'; import { useCatch } from '../reactHelper'; const useStyles = makeStyles((theme) => ({ root: { height: '100%', }, sidebar: { display: 'flex', flexDirection: 'column', position: 'fixed', zIndex: 3, left: 0, top: 0, margin: theme.spacing(1.5), width: theme.dimensions.drawerWidthDesktop, [theme.breakpoints.down('md')]: { width: '100%', margin: 0, }, }, title: { flexGrow: 1, }, slider: { width: '100%', }, controls: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', }, formControlLabel: { height: '100%', width: '100%', paddingRight: theme.spacing(1), justifyContent: 'space-between', alignItems: 'center', }, content: { display: 'flex', flexDirection: 'column', padding: theme.spacing(2), [theme.breakpoints.down('md')]: { margin: theme.spacing(1), }, [theme.breakpoints.up('md')]: { marginTop: theme.spacing(1), }, }, })); const TimeLabel = ({ children, open, value }) => ( {children} ); const ReplayPage = () => { const t = useTranslation(); const classes = useStyles(); const navigate = useNavigate(); const timerRef = useRef(); const defaultDeviceId = useSelector((state) => state.devices.selectedId); const [positions, setPositions] = useState([]); const [index, setIndex] = useState(0); const [selectedDeviceId, setSelectedDeviceId] = useState(defaultDeviceId); const [expanded, setExpanded] = useState(true); const [playing, setPlaying] = useState(false); const deviceName = useSelector((state) => { if (selectedDeviceId) { const device = state.devices.items[selectedDeviceId]; if (device) { return device.name; } } return null; }); const onClick = useCallback((positionId) => { navigate(`/position/${positionId}`); }, [navigate]); useEffect(() => { if (playing && positions.length > 0) { timerRef.current = setInterval(() => { setIndex((index) => index + 1); }, 500); } else { clearInterval(timerRef.current); } return () => clearInterval(timerRef.current); }, [playing, positions]); useEffect(() => { if (index >= positions.length - 1) { clearInterval(timerRef.current); setPlaying(false); } }, [index, positions]); const handleSubmit = useCatch(async ({ deviceId, from, to, headers }) => { setSelectedDeviceId(deviceId); const query = new URLSearchParams({ deviceId, from, to }); const response = await fetch(`/api/positions?${query.toString()}`, { headers }); if (response.ok) { setIndex(0); const positions = await response.json(); setPositions(positions); if (positions.length) { setExpanded(false); } else { throw Error(t('sharedNoData')); } } else { throw Error(await response.text()); } }); return (
{index < positions.length && ( )}
navigate(-1)}> {t('reportReplay')} {!expanded && ( setExpanded(true)}> )} {!expanded ? ( <> {deviceName} ({ value: index }))} value={index} onChange={(_, index) => setIndex(index)} valueLabelDisplay="auto" valueLabelFormat={(i) => (i < positions.length ? formatTime(positions[i]) : '')} ValueLabelComponent={TimeLabel} />
{`${index + 1}/${positions.length}`} setIndex((index) => index - 1)} disabled={playing || index <= 0}> setPlaying(!playing)} disabled={index >= positions.length - 1}> {playing ? : } setIndex((index) => index + 1)} disabled={playing || index >= positions.length - 1}> {formatTime(positions[index].fixTime)}
) : ( )}
); }; export default ReplayPage;