Add map to stops report

19 files changed, 107 insertions, 53 deletions

diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index b3b23aab..f9341eb6 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -15,7 +15,7 @@ import ListIcon from '@mui/icons-material/ViewList';
 
 import { useDispatch, useSelector } from 'react-redux';
 import DevicesList from './DevicesList';
-import Map from '../map/core/Map';
+import MapView from '../map/core/MapView';
 import MapSelectedDevice from '../map/main/MapSelectedDevice';
 import MapAccuracy from '../map/main/MapAccuracy';
 import MapGeofence from '../map/main/MapGeofence';
@@ -149,15 +149,15 @@ const MainPage = () => {
 
   return (
     <div className={classes.root}>
-      <Map>
+      <MapView>
         <MapGeofence />
         <MapAccuracy />
         {mapLiveRoutes && <MapLiveRoutes />}
-        <MapPositions positions={positions} onClick={onClick} />
+        <MapPositions positions={positions} onClick={onClick} showStatus />
         <MapDefaultCamera />
         <MapSelectedDevice />
         <PoiMap />
-      </Map>
+      </MapView>
       <MapCurrentLocation />
       {desktop && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />}
       <Button
diff --git a/modern/src/map/MapCamera.js b/modern/src/map/MapCamera.js
new file mode 100644
index 00000000..7ebf24fb
--- /dev/null
+++ b/modern/src/map/MapCamera.js
@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+import { map } from './core/MapView';
+
+const MapCamera = ({
+  latitude, longitude,
+}) => {
+  useEffect(() => {
+    map.jumpTo({
+      center: [longitude, latitude],
+      zoom: Math.max(map.getZoom(), 10),
+    });
+  }, [latitude, longitude]);
+
+  return null;
+};
+
+export default MapCamera;
diff --git a/modern/src/map/MapCurrentLocation.js b/modern/src/map/MapCurrentLocation.js
index 691c6be3..66fc46ec 100644
--- a/modern/src/map/MapCurrentLocation.js
+++ b/modern/src/map/MapCurrentLocation.js
@@ -1,6 +1,6 @@
 import maplibregl from 'maplibre-gl';
 import { useEffect } from 'react';
-import { map } from './core/Map';
+import { map } from './core/MapView';
 
 const MapCurrentLocation = () => {
   useEffect(() => {
diff --git a/modern/src/map/MapGeofenceEdit.js b/modern/src/map/MapGeofenceEdit.js
index 0b5062d8..42e51af7 100644
--- a/modern/src/map/MapGeofenceEdit.js
+++ b/modern/src/map/MapGeofenceEdit.js
@@ -6,7 +6,7 @@ import { useEffect } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
-import { map } from './core/Map';
+import { map } from './core/MapView';
 import { geofenceToFeature, geometryToArea } from './core/mapUtil';
 import { errorsActions, geofencesActions } from '../store';
 import { useCatchCallback } from '../reactHelper';
diff --git a/modern/src/map/MapPadding.js b/modern/src/map/MapPadding.js
index 1a4643a9..b1927a1f 100644
--- a/modern/src/map/MapPadding.js
+++ b/modern/src/map/MapPadding.js
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { map } from './core/Map';
+import { map } from './core/MapView';
 
 const MapPadding = ({
   top, right, bottom, left,
diff --git a/modern/src/map/MapPositions.js b/modern/src/map/MapPositions.js
index 170a6b11..4b53255a 100644
--- a/modern/src/map/MapPositions.js
+++ b/modern/src/map/MapPositions.js
@@ -1,11 +1,11 @@
 import { useCallback, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
-import { map } from './core/Map';
+import { map } from './core/MapView';
 import { getStatusColor } from '../common/util/formatter';
 import usePersistedState from '../common/util/usePersistedState';
 
-const MapPositions = ({ positions, onClick }) => {
+const MapPositions = ({ positions, onClick, showStatus }) => {
   const id = 'positions';
   const clusters = `${id}-clusters`;
 
@@ -20,7 +20,7 @@ const MapPositions = ({ positions, onClick }) => {
       deviceId: position.deviceId,
       name: device.name,
       category: device.category || 'default',
-      color: getStatusColor(device.status),
+      color: showStatus ? getStatusColor(device.status) : 'neutral',
     };
   };
 
diff --git a/modern/src/map/MapRoutePath.js b/modern/src/map/MapRoutePath.js
index d7cb484d..9703bf24 100644
--- a/modern/src/map/MapRoutePath.js
+++ b/modern/src/map/MapRoutePath.js
@@ -1,7 +1,7 @@
 import maplibregl from 'maplibre-gl';
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { map } from './core/Map';
+import { map } from './core/MapView';
 
 const MapRoutePath = ({ positions }) => {
   const id = 'replay';
diff --git a/modern/src/map/core/Map.js b/modern/src/map/core/MapView.js
index 1e7fa76b..ba5a67d6 100644
--- a/modern/src/map/core/Map.js
+++ b/modern/src/map/core/MapView.js
@@ -75,7 +75,7 @@ const switcher = new SwitcherControl(
 
 map.addControl(switcher);
 
-const Map = ({ children }) => {
+const MapView = ({ children }) => {
   const containerEl = useRef(null);
   const t = useTranslation();
 
@@ -131,4 +131,4 @@ const Map = ({ children }) => {
   );
 };
 
-export default Map;
+export default MapView;
diff --git a/modern/src/map/main/MapAccuracy.js b/modern/src/map/main/MapAccuracy.js
index 11ea64ed..089389bd 100644
--- a/modern/src/map/main/MapAccuracy.js
+++ b/modern/src/map/main/MapAccuracy.js
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import circle from '@turf/circle';
 
-import { map } from '../core/Map';
+import { map } from '../core/MapView';
 
 const MapAccuracy = () => {
   const id = 'accuracy';
diff --git a/modern/src/map/main/MapDefaultCamera.js b/modern/src/map/main/MapDefaultCamera.js
index 24296c2f..6ccf660e 100644
--- a/modern/src/map/main/MapDefaultCamera.js
+++ b/modern/src/map/main/MapDefaultCamera.js
@@ -2,7 +2,7 @@ import maplibregl from 'maplibre-gl';
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { usePreference } from '../../common/util/preferences';
-import { map } from '../core/Map';
+import { map } from '../core/MapView';
 
 const MapDefaultCamera = () => {
   const selectedDeviceId = useSelector((state) => state.devices.selectedId);
diff --git a/modern/src/map/main/MapGeofence.js b/modern/src/map/main/MapGeofence.js
index ee1bc884..71d5cb6e 100644
--- a/modern/src/map/main/MapGeofence.js
+++ b/modern/src/map/main/MapGeofence.js
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
-import { map } from '../core/Map';
+import { map } from '../core/MapView';
 import { geofenceToFeature } from '../core/mapUtil';
 
 const MapGeofence = () => {
diff --git a/modern/src/map/main/MapLiveRoutes.js b/modern/src/map/main/MapLiveRoutes.js
index 139f7d65..09319cff 100644
--- a/modern/src/map/main/MapLiveRoutes.js
+++ b/modern/src/map/main/MapLiveRoutes.js
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { useSelector } from 'react-redux';
-import { map } from '../core/Map';
+import { map } from '../core/MapView';
 import { usePrevious } from '../../reactHelper';
 
 const MapLiveRoutes = () => {
diff --git a/modern/src/map/main/MapSelectedDevice.js b/modern/src/map/main/MapSelectedDevice.js
index ba3bc784..9d97dd75 100644
--- a/modern/src/map/main/MapSelectedDevice.js
+++ b/modern/src/map/main/MapSelectedDevice.js
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 import { useSelector } from 'react-redux';
 import dimensions from '../../common/theme/dimensions';
-import { map } from '../core/Map';
+import { map } from '../core/MapView';
 import { usePrevious } from '../../reactHelper';
 import usePersistedState from '../../common/util/usePersistedState';
 
diff --git a/modern/src/map/main/PoiMap.js b/modern/src/map/main/PoiMap.js
index 5874f356..3ca344c5 100644
--- a/modern/src/map/main/PoiMap.js
+++ b/modern/src/map/main/PoiMap.js
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { kml } from '@tmcw/togeojson';
 
-import { map } from '../core/Map';
+import { map } from '../core/MapView';
 import { useEffectAsync } from '../../reactHelper';
 import { usePreference } from '../../common/util/preferences';
 
diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js
index cbe4a0fb..f84e1e5e 100644
--- a/modern/src/other/EventPage.js
+++ b/modern/src/other/EventPage.js
@@ -8,7 +8,7 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useEffectAsync } from '../reactHelper';
 import { useTranslation } from '../common/components/LocalizationProvider';
-import Map from '../map/core/Map';
+import MapView from '../map/core/MapView';
 import MapPositions from '../map/MapPositions';
 
 const useStyles = makeStyles(() => ({
@@ -68,9 +68,9 @@ const EventPage = () => {
         </Toolbar>
       </AppBar>
       <div className={classes.mapContainer}>
-        <Map>
+        <MapView>
           {position && <MapPositions positions={[position]} />}
-        </Map>
+        </MapView>
       </div>
     </div>
   );
diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js
index 6706ec98..fce15a39 100644
--- a/modern/src/other/GeofencesPage.js
+++ b/modern/src/other/GeofencesPage.js
@@ -7,7 +7,7 @@ import { useTheme } from '@mui/material/styles';
 import Drawer from '@mui/material/Drawer';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { useNavigate } from 'react-router-dom';
-import Map from '../map/core/Map';
+import MapView from '../map/core/MapView';
 import MapCurrentLocation from '../map/MapCurrentLocation';
 import MapGeofenceEdit from '../map/MapGeofenceEdit';
 import GeofencesList from './GeofencesList';
@@ -77,10 +77,10 @@ const GeofencesPage = () => {
           <GeofencesList />
         </Drawer>
         <div className={classes.mapContainer}>
-          <Map>
+          <MapView>
             <MapCurrentLocation />
             <MapGeofenceEdit />
-          </Map>
+          </MapView>
         </div>
       </div>
     </div>
diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js
index fcf01fc7..4893dda9 100644
--- a/modern/src/other/ReplayPage.js
+++ b/modern/src/other/ReplayPage.js
@@ -13,7 +13,7 @@ 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 MapView from '../map/core/MapView';
 import MapRoutePath from '../map/MapRoutePath';
 import MapPositions from '../map/MapPositions';
 import { formatTime } from '../common/util/formatter';
@@ -143,12 +143,12 @@ const ReplayPage = () => {
 
   return (
     <div className={classes.root}>
-      <Map>
+      <MapView>
         <MapRoutePath positions={positions} />
         {index < positions.length && (
           <MapPositions positions={[positions[index]]} onClick={onClick} />
         )}
-      </Map>
+      </MapView>
       <div className={classes.sidebar}>
         <Paper elevation={3} square>
           <Toolbar>
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index b29fb269..33bc9350 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -13,7 +13,7 @@ import PositionValue from '../common/components/PositionValue';
 import ColumnSelect from './components/ColumnSelect';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
 import { useCatch } from '../reactHelper';
-import Map from '../map/core/Map';
+import MapView from '../map/core/MapView';
 import MapRoutePath from '../map/MapRoutePath';
 import MapPositions from '../map/MapPositions';
 import useReportStyles from './common/useReportStyles';
@@ -52,10 +52,10 @@ const RouteReportPage = () => {
       <div className={classes.container}>
         {selectedItem && (
           <div className={classes.containerMap}>
-            <Map>
+            <MapView>
               <MapRoutePath positions={items} />
               <MapPositions positions={[selectedItem]} />
-            </Map>
+            </MapView>
           </div>
         )}
         <div className={classes.containerMain}>
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index d2823b06..d44e2046 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
 import {
+  IconButton,
   Table, TableBody, TableCell, TableHead, TableRow,
 } from '@mui/material';
+import GpsFixedIcon from '@mui/icons-material/GpsFixed';
+import LocationSearchingIcon from '@mui/icons-material/LocationSearching';
 import {
   formatDistance, formatHours, formatDate, formatVolume,
 } from '../common/util/formatter';
@@ -14,6 +17,9 @@ import ColumnSelect from './components/ColumnSelect';
 import usePersistedState from '../common/util/usePersistedState';
 import { useCatch } from '../reactHelper';
 import useReportStyles from './common/useReportStyles';
+import MapPositions from '../map/MapPositions';
+import MapView from '../map/core/MapView';
+import MapCamera from '../map/MapCamera';
 
 const columnsArray = [
   ['startTime', 'reportStartTime'],
@@ -35,6 +41,7 @@ const StopReportPage = () => {
 
   const [columns, setColumns] = usePersistedState('stopColumns', ['startTime', 'endTime', 'startOdometer', 'address']);
   const [items, setItems] = useState([]);
+  const [selectedItem, setSelectedItem] = useState(null);
 
   const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({
@@ -75,29 +82,58 @@ const StopReportPage = () => {
 
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportStops']}>
-      <div className={classes.header}>
-        <ReportFilter handleSubmit={handleSubmit}>
-          <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
-        </ReportFilter>
-      </div>
-      <Table>
-        <TableHead>
-          <TableRow>
-            {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {items.map((item) => (
-            <TableRow key={item.positionId}>
-              {columns.map((key) => (
-                <TableCell key={key}>
-                  {formatValue(item, key)}
-                </TableCell>
+      <div className={classes.container}>
+        {selectedItem && (
+          <div className={classes.containerMap}>
+            <MapView>
+              <MapPositions positions={[{
+                deviceId: selectedItem.deviceId,
+                latitude: selectedItem.latitude,
+                longitude: selectedItem.longitude,
+              }]}
+              />
+            </MapView>
+            <MapCamera latitude={selectedItem.latitude} longitude={selectedItem.longitude} />
+          </div>
+        )}
+        <div className={classes.containerMain}>
+          <div className={classes.header}>
+            <ReportFilter handleSubmit={handleSubmit}>
+              <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
+            </ReportFilter>
+          </div>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell className={classes.columnAction} />
+                {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {items.map((item) => (
+                <TableRow key={item.positionId}>
+                  <TableCell className={classes.columnAction} padding="none">
+                    {selectedItem === item ? (
+                      <IconButton size="small" onClick={() => setSelectedItem(null)}>
+                        <GpsFixedIcon fontSize="small" />
+                      </IconButton>
+                    ) : (
+                      <IconButton size="small" onClick={() => setSelectedItem(item)}>
+                        <LocationSearchingIcon fontSize="small" />
+                      </IconButton>
+                    )}
+                  </TableCell>
+                  {columns.map((key) => (
+                    <TableCell key={key}>
+                      {formatValue(item, key)}
+                    </TableCell>
+                  ))}
+                </TableRow>
               ))}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+            </TableBody>
+          </Table>
+        </div>
+      </div>
     </PageLayout>
   );
 };