Option to show current geofences

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 }}