Configurable device list (fix #1011)

2 files changed, 50 insertions, 4 deletions

diff --git a/modern/src/main/DevicesList.js b/modern/src/main/DevicesList.js
index 5bbc8c4f..449b4fee 100644
--- a/modern/src/main/DevicesList.js
+++ b/modern/src/main/DevicesList.js
@@ -24,6 +24,7 @@ import {
 import { useTranslation } from '../common/components/LocalizationProvider';
 import { mapIconKey, mapIcons } from '../map/core/preloadImages';
 import { useAdministrator } from '../common/util/permissions';
+import usePersistedState from '../common/util/usePersistedState';
 
 const useStyles = makeStyles((theme) => ({
   list: {
@@ -74,11 +75,22 @@ const DeviceRow = ({ data, index, style }) => {
   const item = items[index];
   const position = useSelector((state) => state.positions.items[item.id]);
 
+  const [devicePrimary] = usePersistedState('devicePrimary', 'name');
+  const [deviceSecondary] = usePersistedState('deviceSecondary', '');
+
   const secondaryText = () => {
+    let status;
     if (item.status === 'online' || !item.lastUpdate) {
-      return formatStatus(item.status, t);
+      status = formatStatus(item.status, t);
+    } else {
+      status = moment(item.lastUpdate).fromNow();
     }
-    return moment(item.lastUpdate).fromNow();
+    return (
+      <>
+        {deviceSecondary && item[deviceSecondary] && `${item[deviceSecondary]} • `}
+        <span className={classes[getStatusColor(item.status)]}>{status}</span>
+      </>
+    );
   };
 
   return (
@@ -95,11 +107,10 @@ const DeviceRow = ({ data, index, style }) => {
           </Avatar>
         </ListItemAvatar>
         <ListItemText
-          primary={item.name}
+          primary={item[devicePrimary]}
           primaryTypographyProps={{ noWrap: true }}
           secondary={secondaryText()}
           secondaryTypographyProps={{ noWrap: true }}
-          classes={{ secondary: classes[getStatusColor(item.status)] }}
         />
         {position && (
           <>
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index 54c529f6..55c77cb4 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -19,6 +19,14 @@ import useMapStyles from '../map/core/useMapStyles';
 import useMapOverlays from '../map/overlay/useMapOverlays';
 import { useCatch } from '../reactHelper';
 
+const deviceFields = [
+  { id: 'name', name: 'sharedName' },
+  { id: 'uniqueId', name: 'deviceIdentifier' },
+  { id: 'phone', name: 'sharedPhone' },
+  { id: 'model', name: 'deviceModel' },
+  { id: 'contact', name: 'deviceContact' },
+];
+
 const useStyles = makeStyles((theme) => ({
   container: {
     marginTop: theme.spacing(2),
@@ -81,6 +89,9 @@ const PreferencesPage = () => {
     name: t(it),
   }));
 
+  const [devicePrimary, setDevicePrimary] = usePersistedState('devicePrimary', 'name');
+  const [deviceSecondary, setDeviceSecondary] = usePersistedState('deviceSecondary', '');
+
   const [soundEvents, setSoundEvents] = usePersistedState('soundEvents', []);
   const [soundAlarms, setSoundAlarms] = usePersistedState('soundAlarms', ['sos']);
 
@@ -232,6 +243,30 @@ const PreferencesPage = () => {
         <Accordion>
           <AccordionSummary expandIcon={<ExpandMoreIcon />}>
             <Typography variant="subtitle1">
+              {t('deviceTitle')}
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails className={classes.details}>
+            <SelectField
+              emptyValue={null}
+              value={devicePrimary}
+              onChange={(e) => setDevicePrimary(e.target.value)}
+              data={deviceFields}
+              titleGetter={(it) => t(it.name)}
+              label={t('sharedPrimary')}
+            />
+            <SelectField
+              value={deviceSecondary}
+              onChange={(e) => setDeviceSecondary(e.target.value)}
+              data={deviceFields}
+              titleGetter={(it) => t(it.name)}
+              label={t('sharedSecondary')}
+            />
+          </AccordionDetails>
+        </Accordion>
+        <Accordion>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Typography variant="subtitle1">
               {t('sharedSound')}
             </Typography>
           </AccordionSummary>