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 Map from '../map/core/Map';
import MapReplayPath from '../map/MapReplayPath';
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: 'absolute',
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 (
navigate('/')}>
{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}>
setPlaying(!playing)}>
{playing ? : }
setIndex((index) => index + 1)} disabled={playing}>
{formatTime(positions[index].fixTime)}
>
) : (
)}
);
};
export default ReplayPage;