From f1288af6c703c6e5c99bc37cac03ae4b48c1a38f Mon Sep 17 00:00:00 2001
From: Iván Ávalos <avalos@disroot.org>
Date: Tue, 21 Jun 2022 00:09:10 -0500
Subject: Se añade distancia total a reproducción de recorrido
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modern/src/reports/ReplayPage.js | 18 ++++++++++++++++--
 1 file 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>
-- 
cgit v1.2.3