Se añade distancia total a reproducción de recorrido

1 files changed, 16 insertions, 2 deletions

diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index b762e58..7a4bc96 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -14,7 +14,7 @@ import MainToolbar from '../MainToolbar';
 import Map from '../map/Map';
 import ReplayPathMap from '../map/ReplayPathMap';
 import PositionsMap from '../map/PositionsMap';
-import { formatPosition, formatSpeed } from '../common/formatter';
+import { formatPosition, formatSpeed, formatDistance } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import { useTranslation } from '../LocalizationProvider';
 import { useAttributePreference } from '../common/preferences';
@@ -58,6 +58,7 @@ const ReplayPage = () => {
   const [playback, setPlayback] = useState(false);
   const [expanded, setExpanded] = useState(true);
   const [positions, setPositions] = useState([]);
+  const [totalDistance, setTotalDistance] = useState(0.0);
   const [index, setIndex] = useState(0);
 
   const handleSubmit = async (deviceId, from, to, _, headers) => {
@@ -67,6 +68,14 @@ const ReplayPage = () => {
       setIndex(0);
       setPositions(await response.json());
       setExpanded(false);
+
+      const response2 = await fetch(`/api/reports/summary?${query.toString()}`, { headers });
+      if (response2.ok) {
+        let data = await response2.json();
+        if (data.length > 0) {
+          setTotalDistance (data[0].distance);
+        }
+      }
     }
   };
 
@@ -102,8 +111,13 @@ const ReplayPage = () => {
                         {positions[index].speed != undefined &&
                          <>
                              <br/>
+                             <Box flexGrow={1}>
+                                 <Typography variant="secondary">
+                                     {formatSpeed(positions[index].speed, speedUnit, t)}
+                                 </Typography>
+                             </Box>
                              <Typography variant="secondary">
-                                 {formatSpeed(positions[index].speed, speedUnit, t)}
+                                 <b>{t('deviceTotalDistance')}</b> {formatDistance(totalDistance, 'km', t)}
                              </Typography>
                          </>}
                     </Box>