diff options
author | Anton Tananaev <anton@traccar.org> | 2022-08-28 10:30:14 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-08-28 10:30:14 -0700 |
commit | cd7c15987c08a875386e860a11f6533423709bc2 (patch) | |
tree | e4559254f2c7c9dba82f90e8d0e206da79fb48cd /modern/src/main | |
parent | 8135f8a72d8fe4521e989356431f9a86c4139ed7 (diff) | |
download | trackermap-web-cd7c15987c08a875386e860a11f6533423709bc2.tar.gz trackermap-web-cd7c15987c08a875386e860a11f6533423709bc2.tar.bz2 trackermap-web-cd7c15987c08a875386e860a11f6533423709bc2.zip |
Option to show current geofences
Diffstat (limited to 'modern/src/main')
-rw-r--r-- | modern/src/main/DevicesList.js | 14 |
1 files changed, 12 insertions, 2 deletions
diff --git a/modern/src/main/DevicesList.js b/modern/src/main/DevicesList.js index e4873a3f..cea5b253 100644 --- a/modern/src/main/DevicesList.js +++ b/modern/src/main/DevicesList.js @@ -74,9 +74,19 @@ const DeviceRow = ({ data, index, style }) => { const item = items[index]; const position = useSelector((state) => state.positions.items[item.id]); + const geofences = useSelector((state) => state.geofences.items); + const [devicePrimary] = usePersistedState('devicePrimary', 'name'); const [deviceSecondary] = usePersistedState('deviceSecondary', ''); + const formatProperty = (key) => { + if (key === 'geofenceIds') { + const geofenceIds = item[key] || []; + return geofenceIds.map((id) => geofences[id].name).join(', '); + } + return item[key]; + }; + const secondaryText = () => { let status; if (item.status === 'online' || !item.lastUpdate) { @@ -86,7 +96,7 @@ const DeviceRow = ({ data, index, style }) => { } return ( <> - {deviceSecondary && item[deviceSecondary] && `${item[deviceSecondary]} • `} + {deviceSecondary && item[deviceSecondary] && `${formatProperty(deviceSecondary)} • `} <span className={classes[getStatusColor(item.status)]}>{status}</span> </> ); @@ -106,7 +116,7 @@ const DeviceRow = ({ data, index, style }) => { </Avatar> </ListItemAvatar> <ListItemText - primary={item[devicePrimary]} + primary={formatProperty(devicePrimary)} primaryTypographyProps={{ noWrap: true }} secondary={secondaryText()} secondaryTypographyProps={{ noWrap: true }} |