diff options
| -rw-r--r-- | modern/src/common/components/StatusCard.js | 10 | ||||
| -rw-r--r-- | modern/src/other/ReplayPage.js | 37 |
2 files changed, 34 insertions, 13 deletions
diff --git a/modern/src/common/components/StatusCard.js b/modern/src/common/components/StatusCard.js index b8d7ffc4..6b8a9fd3 100644 --- a/modern/src/common/components/StatusCard.js +++ b/modern/src/common/components/StatusCard.js @@ -94,7 +94,7 @@ const StatusRow = ({ name, content }) => { ); }; -const StatusCard = ({ deviceId, position, onClose }) => { +const StatusCard = ({ deviceId, position, onClose, disableActions }) => { const classes = useStyles(); const navigate = useNavigate(); const dispatch = useDispatch(); @@ -217,25 +217,25 @@ const StatusCard = ({ deviceId, position, onClose }) => { </IconButton> <IconButton onClick={() => navigate('/replay')} - disabled={!position} + disabled={disableActions || !position} > <ReplayIcon /> </IconButton> <IconButton onClick={() => navigate(`/settings/command-send/${deviceId}`)} - disabled={readonly} + disabled={disableActions || readonly} > <PublishIcon /> </IconButton> <IconButton onClick={() => navigate(`/settings/device/${deviceId}`)} - disabled={deviceReadonly} + disabled={disableActions || deviceReadonly} > <EditIcon /> </IconButton> <IconButton onClick={() => setRemoving(true)} - disabled={deviceReadonly} + disabled={disableActions || deviceReadonly} className={classes.negative} > <DeleteIcon /> diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js index 46f7571c..fb83d5a9 100644 --- a/modern/src/other/ReplayPage.js +++ b/modern/src/other/ReplayPage.js @@ -1,5 +1,5 @@ import React, { - useState, useEffect, useRef, useCallback, + useState, useEffect, useRef, } from 'react'; import { IconButton, Paper, Slider, Toolbar, Typography, @@ -23,6 +23,7 @@ import { useTranslation } from '../common/components/LocalizationProvider'; import { useCatch } from '../reactHelper'; import MapCamera from '../map/MapCamera'; import MapGeofence from '../map/MapGeofence'; +import StatusCard from '../common/components/StatusCard'; const useStyles = makeStyles((theme) => ({ root: { @@ -71,6 +72,18 @@ const useStyles = makeStyles((theme) => ({ marginTop: theme.spacing(1), }, }, + statusCard: { + position: 'fixed', + zIndex: 5, + left: '50%', + [theme.breakpoints.up('md')]: { + bottom: theme.spacing(3), + }, + [theme.breakpoints.down('md')]: { + bottom: `calc(${theme.spacing(3)} + ${theme.dimensions.bottomBarHeight}px)`, + }, + transform: 'translateX(-50%)', + }, })); const ReplayPage = () => { @@ -84,6 +97,7 @@ const ReplayPage = () => { const [positions, setPositions] = useState([]); const [index, setIndex] = useState(0); const [selectedDeviceId, setSelectedDeviceId] = useState(defaultDeviceId); + const [showCard, setShowCard] = useState(false); const [from, setFrom] = useState(); const [to, setTo] = useState(); const [expanded, setExpanded] = useState(true); @@ -99,12 +113,6 @@ const ReplayPage = () => { return null; }); - const onClick = useCallback((positionId) => { - if (positionId) { - navigate(`/position/${positionId}`); - } - }, [navigate]); - useEffect(() => { if (playing && positions.length > 0) { timerRef.current = setInterval(() => { @@ -155,7 +163,10 @@ const ReplayPage = () => { <MapGeofence /> <MapRoutePath positions={positions} /> {index < positions.length && ( - <MapPositions positions={[positions[index]]} onClick={onClick} /> + <MapPositions + positions={[positions[index]]} + onClick={() => setShowCard(true)} + /> )} </MapView> <MapCamera positions={positions} /> @@ -209,6 +220,16 @@ const ReplayPage = () => { )} </Paper> </div> + {showCard && index < positions.length && ( + <div className={classes.statusCard}> + <StatusCard + deviceId={selectedDeviceId} + position={positions[index]} + onClose={() => setShowCard(false)} + disableActions + /> + </div> + )} </div> ); }; |