Improve map markers

6 files changed, 25 insertions, 13 deletions

diff --git a/modern/src/map/MapPositions.js b/modern/src/map/MapPositions.js
index 704c24bd..e4365fab 100644
--- a/modern/src/map/MapPositions.js
+++ b/modern/src/map/MapPositions.js
@@ -1,13 +1,13 @@
 import { useId, useCallback, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { map } from './core/MapView';
-import { getStatusColor } from '../common/util/formatter';
+import { formatTime, getStatusColor } from '../common/util/formatter';
 import usePersistedState from '../common/util/usePersistedState';
 import { mapIconKey } from './core/preloadImages';
 import { findFonts } from './core/mapUtil';
 import { useAttributePreference } from '../common/util/preferences';
 
-const MapPositions = ({ positions, onClick, showStatus, selectedPosition }) => {
+const MapPositions = ({ positions, onClick, showStatus, selectedPosition, titleField }) => {
   const id = useId();
   const clusters = `${id}-clusters`;
   const direction = `${id}-direction`;
@@ -24,6 +24,7 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition }) => {
       id: position.id,
       deviceId: position.deviceId,
       name: device.name,
+      fixTime: formatTime(position.fixTime),
       category: mapIconKey(device.category),
       color: showStatus ? position.attributes.color || getStatusColor(device.status) : 'neutral',
       rotation: position.course,
@@ -84,7 +85,7 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition }) => {
         'icon-image': '{category}-{color}',
         'icon-size': iconScale,
         'icon-allow-overlap': true,
-        'text-field': '{name}',
+        'text-field': `{${titleField || 'name'}}`,
         'text-allow-overlap': true,
         'text-anchor': 'bottom',
         'text-offset': [0, -2 * iconScale],
diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js
index 9da8be79..8adc142c 100644
--- a/modern/src/other/EventPage.js
+++ b/modern/src/other/EventPage.js
@@ -13,6 +13,7 @@ import MapCamera from '../map/MapCamera';
 import MapPositions from '../map/MapPositions';
 import MapGeofence from '../map/MapGeofence';
 import StatusCard from '../common/components/StatusCard';
+import { formatNotificationTitle } from '../common/util/formatter';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -39,6 +40,13 @@ const EventPage = () => {
   const [position, setPosition] = useState();
   const [showCard, setShowCard] = useState(false);
 
+  const formatType = (event) => formatNotificationTitle(t, {
+    type: event.type,
+    attributes: {
+      alarms: event.attributes.alarm,
+    },
+  });
+
   const onMarkerClick = useCallback((positionId) => {
     setShowCard(!!positionId);
   }, [setShowCard]);
@@ -75,13 +83,13 @@ const EventPage = () => {
           <IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => navigate('/')}>
             <ArrowBackIcon />
           </IconButton>
-          <Typography variant="h6">{t('positionEvent')}</Typography>
+          <Typography variant="h6">{formatType(event)}</Typography>
         </Toolbar>
       </AppBar>
       <div className={classes.mapContainer}>
         <MapView>
           <MapGeofence />
-          {position && <MapPositions positions={[position]} onClick={onMarkerClick} />}
+          {position && <MapPositions positions={[position]} onClick={onMarkerClick} titleField="fixTime" />}
         </MapView>
         {position && <MapCamera latitude={position.latitude} longitude={position.longitude} />}
         {position && showCard && (
diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js
index ab549eba..8839138f 100644
--- a/modern/src/other/ReplayPage.js
+++ b/modern/src/other/ReplayPage.js
@@ -161,7 +161,7 @@ const ReplayPage = () => {
         <MapRoutePath positions={positions} />
         <MapRoutePoints positions={positions} onClick={onPointClick} />
         {index < positions.length && (
-          <MapPositions positions={[positions[index]]} onClick={onMarkerClick} />
+          <MapPositions positions={[positions[index]]} onClick={onMarkerClick} titleField="fixTime" />
         )}
       </MapView>
       <MapCamera positions={positions} />
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 623f26bd..ce1772e4 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -143,7 +143,7 @@ const EventReportPage = () => {
           <div className={classes.containerMap}>
             <MapView>
               <MapGeofence />
-              {position && <MapPositions positions={[position]} />}
+              {position && <MapPositions positions={[position]} titleField="fixTime" />}
             </MapView>
             {position && <MapCamera latitude={position.latitude} longitude={position.longitude} />}
           </div>
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index a1212ecd..8d967b19 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -83,7 +83,7 @@ const RouteReportPage = () => {
                   </Fragment>
                 );
               })}
-              <MapPositions positions={[selectedItem]} />
+              <MapPositions positions={[selectedItem]} titleField="fixTime" />
             </MapView>
             <MapCamera positions={items} />
           </div>
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 36c4d124..a322304e 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -100,11 +100,14 @@ const StopReportPage = () => {
           <div className={classes.containerMap}>
             <MapView>
               <MapGeofence />
-              <MapPositions positions={[{
-                deviceId: selectedItem.deviceId,
-                latitude: selectedItem.latitude,
-                longitude: selectedItem.longitude,
-              }]}
+              <MapPositions
+                positions={[{
+                  deviceId: selectedItem.deviceId,
+                  fixTime: selectedItem.startTime,
+                  latitude: selectedItem.latitude,
+                  longitude: selectedItem.longitude,
+                }]}
+                titleField="fixTime"
               />
             </MapView>
             <MapCamera latitude={selectedItem.latitude} longitude={selectedItem.longitude} />