aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-15 16:13:05 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-15 16:13:05 -0700
commitdbf6e8127733414b1f25b6c033bfc5437801414d (patch)
treead669e6712754e0d850523d727ed524571e71e64
parent6a5ee785ed83c34b3f6ec4cd4ba20f1192553922 (diff)
downloadtrackermap-web-dbf6e8127733414b1f25b6c033bfc5437801414d.tar.gz
trackermap-web-dbf6e8127733414b1f25b6c033bfc5437801414d.tar.bz2
trackermap-web-dbf6e8127733414b1f25b6c033bfc5437801414d.zip
Configurable card attributes
-rw-r--r--modern/src/main/StatusCard.js23
-rw-r--r--modern/src/settings/PreferencesPage.js20
2 files changed, 37 insertions, 6 deletions
diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js
index f49799b5..92de7bba 100644
--- a/modern/src/main/StatusCard.js
+++ b/modern/src/main/StatusCard.js
@@ -16,6 +16,9 @@ import RemoveDialog from '../common/components/RemoveDialog';
import PositionValue from '../common/components/PositionValue';
import dimensions from '../common/theme/dimensions';
import { useDeviceReadonly, useReadonly } from '../common/util/permissions';
+import usePersistedState from '../common/util/usePersistedState';
+import usePositionProperties from '../common/attributes/usePositionProperties';
+import usePositionAttributes from '../common/attributes/usePositionAttributes';
const useStyles = makeStyles((theme) => ({
card: {
@@ -66,6 +69,11 @@ const StatusCard = ({ deviceId, onClose }) => {
const device = useSelector((state) => state.devices.items[deviceId]);
const position = useSelector((state) => state.positions.items[deviceId]);
+ const positionProperties = usePositionProperties(t);
+ const positionAttributes = usePositionAttributes(t);
+ const positionObject = { ...positionProperties, ...positionAttributes };
+ const [positionItems] = usePersistedState('positionItems', ['speed', 'address', 'totalDistance', 'course']);
+
const [removeDialogShown, setRemoveDialogShown] = useState(false);
return (
@@ -91,12 +99,15 @@ const StatusCard = ({ deviceId, onClose }) => {
<TableContainer>
<Table size="small" classes={{ root: classes.table }}>
<TableBody>
- <StatusRow name={t('positionSpeed')} content={<PositionValue position={position} property="speed" />} />
- <StatusRow name={t('positionAddress')} content={<PositionValue position={position} property="address" />} />
- {position.attributes.odometer
- ? <StatusRow name={t('positionOdometer')} content={<PositionValue position={position} attribute="odometer" />} />
- : <StatusRow name={t('deviceTotalDistance')} content={<PositionValue position={position} attribute="totalDistance" />} />}
- <StatusRow name={t('positionCourse')} content={<PositionValue position={position} property="course" />} />
+ {positionItems.map((key) => (
+ <StatusRow name={positionObject[key].name} content={
+ <PositionValue
+ position={position}
+ property={position.hasOwnProperty(key) ? key : null}
+ attribute={position.hasOwnProperty(key) ? null : key}
+ />
+ } />
+ ))}
</TableBody>
</Table>
</TableContainer>
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index 1256a53a..a7ce6903 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -7,6 +7,8 @@ import { useLocalization, useTranslation } from '../common/components/Localizati
import usePersistedState from '../common/util/usePersistedState';
import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
+import usePositionProperties from '../common/attributes/usePositionProperties';
+import usePositionAttributes from '../common/attributes/usePositionAttributes';
const useStyles = makeStyles((theme) => ({
container: {
@@ -24,6 +26,11 @@ const PreferencesPage = () => {
const { languages, language, setLanguage } = useLocalization();
const languageList = Object.entries(languages).map((values) => ({ code: values[0], name: values[1].name }));
+ const positionProperties = usePositionProperties(t);
+ const positionAttributes = usePositionAttributes(t);
+ const positionObject = { ...positionProperties, ...positionAttributes };
+ const [positionItems, setPositionItems] = usePersistedState('positionItems', ['speed', 'address', 'totalDistance', 'course']);
+
const [mapLiveRoutes, setMapLiveRoutes] = usePersistedState('mapLiveRoutes', false);
const [mapFollow, setMapFollow] = usePersistedState('mapFollow', false);
const [mapCluster, setMapCluster] = usePersistedState('mapCluster', true);
@@ -53,6 +60,19 @@ const PreferencesPage = () => {
</Typography>
</AccordionSummary>
<AccordionDetails className={classes.details}>
+ <FormControl variant="filled" fullWidth>
+ <InputLabel>{t('sharedAttributes')}</InputLabel>
+ <Select
+ value={positionItems}
+ onChange={(e) => setPositionItems(e.target.value)}
+ renderValue={(it) => it.length}
+ multiple
+ >
+ {Object.keys(positionObject).map((key) => (
+ <MenuItem key={key} value={key}>{positionObject[key].name}</MenuItem>
+ ))}
+ </Select>
+ </FormControl>
<FormControlLabel
control={<Checkbox checked={mapLiveRoutes} onChange={(event) => setMapLiveRoutes(event.target.checked)} />}
label={t('mapLiveRoutes')}