diff options
| -rw-r--r-- | modern/src/main/DevicesList.js | 14 | ||||
| -rw-r--r-- | modern/src/settings/PreferencesPage.js | 1 |
2 files changed, 13 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 }} diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js index 8c690bd3..c86d696a 100644 --- a/modern/src/settings/PreferencesPage.js +++ b/modern/src/settings/PreferencesPage.js @@ -25,6 +25,7 @@ const deviceFields = [ { id: 'phone', name: 'sharedPhone' }, { id: 'model', name: 'deviceModel' }, { id: 'contact', name: 'deviceContact' }, + { id: 'geofenceIds', name: 'sharedGeofences' }, ]; const useStyles = makeStyles((theme) => ({ |