diff options
Diffstat (limited to 'modern')
| -rw-r--r-- | modern/src/main/DevicesList.js | 19 | ||||
| -rw-r--r-- | modern/src/settings/PreferencesPage.js | 35 |
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> |