aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/main/DevicesList.js19
-rw-r--r--modern/src/settings/PreferencesPage.js35
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>