Persist user preferences

2 files changed, 47 insertions, 3 deletions

diff --git a/modern/src/common/attributes/useCommonUserAttributes.js b/modern/src/common/attributes/useCommonUserAttributes.js
index 7fe2fcdf..845ab799 100644
--- a/modern/src/common/attributes/useCommonUserAttributes.js
+++ b/modern/src/common/attributes/useCommonUserAttributes.js
@@ -5,6 +5,50 @@ export default (t) => useMemo(() => ({
     name: t('attributeShowGeofences'),
     type: 'boolean',
   },
+  mapLiveRoutes: {
+    name: t('mapLiveRoutes'),
+    type: 'boolean',
+  },
+  mapFollow: {
+    name: t('deviceFollow'),
+    type: 'boolean',
+  },
+  mapCluster: {
+    name: t('mapClustering'),
+    type: 'boolean',
+  },
+  mapOnSelect: {
+    name: t('mapOnSelect'),
+    type: 'boolean',
+  },
+  activeMapStyles: {
+    name: t('mapActive'),
+    type: 'string',
+  },
+  selectedMapStyle: {
+    name: t('mapDefault'),
+    type: 'string',
+  },
+  devicePrimary: {
+    name: t('devicePrimaryInfo'),
+    type: 'string',
+  },
+  deviceSecondary: {
+    name: t('deviceSecondaryInfo'),
+    type: 'string',
+  },
+  soundEvents: {
+    name: t('eventsSoundEvents'),
+    type: 'string',
+  },
+  soundAlarms: {
+    name: t('eventsSoundAlarms'),
+    type: 'string',
+  },
+  positionItems: {
+    name: t('attributePopupInfo'),
+    type: 'string',
+  },
   locationIqKey: {
     name: t('mapLocationIqKey'),
     type: 'string',
diff --git a/modern/src/common/components/StatusCard.js b/modern/src/common/components/StatusCard.js
index c6ab1f51..7ff5769d 100644
--- a/modern/src/common/components/StatusCard.js
+++ b/modern/src/common/components/StatusCard.js
@@ -28,10 +28,10 @@ import { useTranslation } from './LocalizationProvider';
 import RemoveDialog from './RemoveDialog';
 import PositionValue from './PositionValue';
 import { useDeviceReadonly, useRestriction } from '../util/permissions';
-import usePersistedState from '../util/usePersistedState';
 import usePositionAttributes from '../attributes/usePositionAttributes';
 import { devicesActions } from '../../store';
 import { useCatch, useCatchCallback } from '../../reactHelper';
+import { useAttributePreference } from '../util/preferences';
 
 const useStyles = makeStyles((theme) => ({
   card: {
@@ -122,7 +122,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
   const deviceImage = device?.attributes?.deviceImage;
 
   const positionAttributes = usePositionAttributes(t);
-  const [positionItems] = usePersistedState('positionItems', ['speed', 'address', 'totalDistance', 'course']);
+  const positionItems = useAttributePreference('positionItems', 'speed,address,totalDistance,course');
 
   const [anchorEl, setAnchorEl] = useState(null);
 
@@ -204,7 +204,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
               <CardContent className={classes.content}>
                 <Table size="small" classes={{ root: classes.table }}>
                   <TableBody>
-                    {positionItems.filter((key) => position.hasOwnProperty(key) || position.attributes.hasOwnProperty(key)).map((key) => (
+                    {positionItems.split(',').filter((key) => position.hasOwnProperty(key) || position.attributes.hasOwnProperty(key)).map((key) => (
                       <StatusRow
                         key={key}
                         name={positionAttributes[key].name}