Add replay card

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>
   );
 };