diff options
Diffstat (limited to 'modern/src/main/DevicesList.js')
| -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 }} |