diff options
Diffstat (limited to 'modern/src/reports/RouteReportPage.js')
| -rw-r--r-- | modern/src/reports/RouteReportPage.js | 19 |
1 files changed, 15 insertions, 4 deletions
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index a37ad7b1..a1212ecd 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { Fragment, useCallback, useState } from 'react'; import { useSelector } from 'react-redux'; import { IconButton, Table, TableBody, TableCell, TableHead, TableRow, @@ -16,6 +16,7 @@ import usePositionAttributes from '../common/attributes/usePositionAttributes'; import { useCatch } from '../reactHelper'; import MapView from '../map/core/MapView'; import MapRoutePath from '../map/MapRoutePath'; +import MapRoutePoints from '../map/MapRoutePoints'; import MapPositions from '../map/MapPositions'; import useReportStyles from './common/useReportStyles'; import TableShimmer from '../common/components/TableShimmer'; @@ -35,6 +36,10 @@ const RouteReportPage = () => { const [loading, setLoading] = useState(false); const [selectedItem, setSelectedItem] = useState(null); + const onMapPointClick = useCallback((positionId) => { + setSelectedItem(items.find((it) => it.id === positionId)); + }, [items, setSelectedItem]); + const handleSubmit = useCatch(async ({ deviceIds, from, to, type }) => { const query = new URLSearchParams({ from, to }); deviceIds.forEach((deviceId) => query.append('deviceId', deviceId)); @@ -69,9 +74,15 @@ const RouteReportPage = () => { <div className={classes.containerMap}> <MapView> <MapGeofence /> - {[...new Set(items.map((it) => it.deviceId))].map((deviceId) => ( - <MapRoutePath key={deviceId} positions={items.filter((position) => position.deviceId === deviceId)} /> - ))} + {[...new Set(items.map((it) => it.deviceId))].map((deviceId) => { + const positions = items.filter((position) => position.deviceId === deviceId); + return ( + <Fragment key={deviceId}> + <MapRoutePath positions={positions} /> + <MapRoutePoints positions={positions} onClick={onMapPointClick} /> + </Fragment> + ); + })} <MapPositions positions={[selectedItem]} /> </MapView> <MapCamera positions={items} /> |