aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-10-24 21:50:03 -0700
committerAnton Tananaev <anton@traccar.org>2022-10-24 21:50:03 -0700
commitc000fa00d3a4b71a814864b9c805885f85bdd8dc (patch)
treec32c23d4d11bb8f89d9ac5b9f8598cf43918a1ec /modern
parentd307f8f7e0556c0a7f4544618a081eb9a80c5845 (diff)
downloadtrackermap-web-c000fa00d3a4b71a814864b9c805885f85bdd8dc.tar.gz
trackermap-web-c000fa00d3a4b71a814864b9c805885f85bdd8dc.tar.bz2
trackermap-web-c000fa00d3a4b71a814864b9c805885f85bdd8dc.zip
Improve map markers
Diffstat (limited to 'modern')
-rw-r--r--modern/src/map/MapPositions.js7
-rw-r--r--modern/src/other/EventPage.js12
-rw-r--r--modern/src/other/ReplayPage.js2
-rw-r--r--modern/src/reports/EventReportPage.js2
-rw-r--r--modern/src/reports/RouteReportPage.js2
-rw-r--r--modern/src/reports/StopReportPage.js13
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} />