diff options
| -rw-r--r-- | modern/src/map/MapPositions.js | 7 | ||||
| -rw-r--r-- | modern/src/other/EventPage.js | 12 | ||||
| -rw-r--r-- | modern/src/other/ReplayPage.js | 2 | ||||
| -rw-r--r-- | modern/src/reports/EventReportPage.js | 2 | ||||
| -rw-r--r-- | modern/src/reports/RouteReportPage.js | 2 | ||||
| -rw-r--r-- | modern/src/reports/StopReportPage.js | 13 |
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} /> |