aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-07-15 18:45:44 -0700
committerAnton Tananaev <anton@traccar.org>2022-07-15 18:45:44 -0700
commit85a3576f3046f5bcf3bbac6ad952ef180762fd51 (patch)
tree2bf4f2ed43848ea5f1ec49fcfeb48a277bfe0436 /modern/src
parent09e1e536aea906ae62f2a361df07d4b4532e62c2 (diff)
downloadtrackermap-web-85a3576f3046f5bcf3bbac6ad952ef180762fd51.tar.gz
trackermap-web-85a3576f3046f5bcf3bbac6ad952ef180762fd51.tar.bz2
trackermap-web-85a3576f3046f5bcf3bbac6ad952ef180762fd51.zip
Option to hide attributes
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/common/attributes/useCommonUserAttributes.js4
-rw-r--r--modern/src/common/util/useFeatures.js2
-rw-r--r--modern/src/settings/CalendarPage.js21
-rw-r--r--modern/src/settings/DevicePage.js21
-rw-r--r--modern/src/settings/DriverPage.js21
-rw-r--r--modern/src/settings/GeofencePage.js21
-rw-r--r--modern/src/settings/GroupPage.js21
-rw-r--r--modern/src/settings/MaintenancePage.js21
-rw-r--r--modern/src/settings/ServerPage.js21
-rw-r--r--modern/src/settings/UserPage.js23
-rw-r--r--modern/src/settings/components/EditAttributesAccordion.js (renamed from modern/src/settings/components/EditAttributesView.js)131
11 files changed, 131 insertions, 176 deletions
diff --git a/modern/src/common/attributes/useCommonUserAttributes.js b/modern/src/common/attributes/useCommonUserAttributes.js
index 81ceaca7..791f46d4 100644
--- a/modern/src/common/attributes/useCommonUserAttributes.js
+++ b/modern/src/common/attributes/useCommonUserAttributes.js
@@ -37,6 +37,10 @@ export default (t) => useMemo(() => ({
name: t('attributeUiDisableGroups'),
type: 'boolean',
},
+ 'ui.disableAttributes': {
+ name: t('attributeUiDisableAttributes'),
+ type: 'boolean',
+ },
'ui.disableEvents': {
name: t('attributeUiDisableEvents'),
type: 'boolean',
diff --git a/modern/src/common/util/useFeatures.js b/modern/src/common/util/useFeatures.js
index 995fbf86..58c1bbf1 100644
--- a/modern/src/common/util/useFeatures.js
+++ b/modern/src/common/util/useFeatures.js
@@ -16,6 +16,7 @@ const get = (server, user, key) => {
export default () => useSelector((state) => {
const { server, user } = state.session;
+ const disableAttributes = get(server, user, 'ui.disableAttributes');
const disableVehicleFetures = get(server, user, 'ui.disableVehicleFetures');
const disableDrivers = disableVehicleFetures || get(server, user, 'ui.disableDrivers');
const disableMaintenance = disableVehicleFetures || get(server, user, 'ui.disableMaintenance');
@@ -25,6 +26,7 @@ export default () => useSelector((state) => {
const disableCalendars = get(server, user, 'ui.disableCalendars');
return {
+ disableAttributes,
disableDrivers,
disableMaintenance,
disableGroups,
diff --git a/modern/src/settings/CalendarPage.js b/modern/src/settings/CalendarPage.js
index 463b7d8c..896a77c4 100644
--- a/modern/src/settings/CalendarPage.js
+++ b/modern/src/settings/CalendarPage.js
@@ -7,7 +7,7 @@ import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { DropzoneArea } from 'react-mui-dropzone';
import EditItemView from './components/EditItemView';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
import { useTranslation } from '../common/components/LocalizationProvider';
import SettingsMenu from './components/SettingsMenu';
import components from '../common/theme/components';
@@ -72,20 +72,11 @@ const CalendarPage = () => {
/>
</AccordionDetails>
</Accordion>
- <Accordion>
- <AccordionSummary expandIcon={<ExpandMoreIcon />}>
- <Typography variant="subtitle1">
- {t('sharedAttributes')}
- </Typography>
- </AccordionSummary>
- <AccordionDetails className={classes.details}>
- <EditAttributesView
- attributes={item.attributes}
- setAttributes={(attributes) => setItem({ ...item, attributes })}
- definitions={{}}
- />
- </AccordionDetails>
- </Accordion>
+ <EditAttributesAccordion
+ attributes={item.attributes}
+ setAttributes={(attributes) => setItem({ ...item, attributes })}
+ definitions={{}}
+ />
</>
)}
</EditItemView>
diff --git a/modern/src/settings/DevicePage.js b/modern/src/settings/DevicePage.js
index cecd2066..d0d5dd5e 100644
--- a/modern/src/settings/DevicePage.js
+++ b/modern/src/settings/DevicePage.js
@@ -13,7 +13,7 @@ import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { DropzoneArea } from 'react-mui-dropzone';
import EditItemView from './components/EditItemView';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
import SelectField from '../common/components/SelectField';
import deviceCategories from '../common/util/deviceCategories';
import LinkField from '../common/components/LinkField';
@@ -158,20 +158,11 @@ const DevicePage = () => {
</AccordionDetails>
</Accordion>
)}
- <Accordion>
- <AccordionSummary expandIcon={<ExpandMoreIcon />}>
- <Typography variant="subtitle1">
- {t('sharedAttributes')}
- </Typography>
- </AccordionSummary>
- <AccordionDetails className={classes.details}>
- <EditAttributesView
- attributes={item.attributes}
- setAttributes={(attributes) => setItem({ ...item, attributes })}
- definitions={{ ...commonDeviceAttributes, ...deviceAttributes }}
- />
- </AccordionDetails>
- </Accordion>
+ <EditAttributesAccordion
+ attributes={item.attributes}
+ setAttributes={(attributes) => setItem({ ...item, attributes })}
+ definitions={{ ...commonDeviceAttributes, ...deviceAttributes }}
+ />
{item.id && (
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
diff --git a/modern/src/settings/DriverPage.js b/modern/src/settings/DriverPage.js
index 30f5106f..83d1f88f 100644
--- a/modern/src/settings/DriverPage.js
+++ b/modern/src/settings/DriverPage.js
@@ -6,7 +6,7 @@ import {
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import EditItemView from './components/EditItemView';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
import { useTranslation } from '../common/components/LocalizationProvider';
import SettingsMenu from './components/SettingsMenu';
@@ -57,20 +57,11 @@ const DriverPage = () => {
/>
</AccordionDetails>
</Accordion>
- <Accordion>
- <AccordionSummary expandIcon={<ExpandMoreIcon />}>
- <Typography variant="subtitle1">
- {t('sharedAttributes')}
- </Typography>
- </AccordionSummary>
- <AccordionDetails className={classes.details}>
- <EditAttributesView
- attributes={item.attributes}
- setAttributes={(attributes) => setItem({ ...item, attributes })}
- definitions={{}}
- />
- </AccordionDetails>
- </Accordion>
+ <EditAttributesAccordion
+ attributes={item.attributes}
+ setAttributes={(attributes) => setItem({ ...item, attributes })}
+ definitions={{}}
+ />
</>
)}
</EditItemView>
diff --git a/modern/src/settings/GeofencePage.js b/modern/src/settings/GeofencePage.js
index d7d1c50c..3bebea30 100644
--- a/modern/src/settings/GeofencePage.js
+++ b/modern/src/settings/GeofencePage.js
@@ -7,7 +7,7 @@ import {
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import EditItemView from './components/EditItemView';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
import { useTranslation } from '../common/components/LocalizationProvider';
import useGeofenceAttributes from '../common/attributes/useGeofenceAttributes';
import SettingsMenu from './components/SettingsMenu';
@@ -77,20 +77,11 @@ const GeofencePage = () => {
/>
</AccordionDetails>
</Accordion>
- <Accordion>
- <AccordionSummary expandIcon={<ExpandMoreIcon />}>
- <Typography variant="subtitle1">
- {t('sharedAttributes')}
- </Typography>
- </AccordionSummary>
- <AccordionDetails className={classes.details}>
- <EditAttributesView
- attributes={item.attributes}
- setAttributes={(attributes) => setItem({ ...item, attributes })}
- definitions={geofenceAttributes}
- />
- </AccordionDetails>
- </Accordion>
+ <EditAttributesAccordion
+ attributes={item.attributes}
+ setAttributes={(attributes) => setItem({ ...item, attributes })}
+ definitions={geofenceAttributes}
+ />
</>
)}
</EditItemView>
diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js
index c4c0fa5c..b4b0a92a 100644
--- a/modern/src/settings/GroupPage.js
+++ b/modern/src/settings/GroupPage.js
@@ -7,7 +7,7 @@ import {
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import EditItemView from './components/EditItemView';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
import SelectField from '../common/components/SelectField';
import LinkField from '../common/components/LinkField';
import { useTranslation } from '../common/components/LocalizationProvider';
@@ -79,20 +79,11 @@ const GroupPage = () => {
/>
</AccordionDetails>
</Accordion>
- <Accordion>
- <AccordionSummary expandIcon={<ExpandMoreIcon />}>
- <Typography variant="subtitle1">
- {t('sharedAttributes')}
- </Typography>
- </AccordionSummary>
- <AccordionDetails className={classes.details}>
- <EditAttributesView
- attributes={item.attributes}
- setAttributes={(attributes) => setItem({ ...item, attributes })}
- definitions={{ ...commonDeviceAttributes, ...groupAttributes }}
- />
- </AccordionDetails>
- </Accordion>
+ <EditAttributesAccordion
+ attributes={item.attributes}
+ setAttributes={(attributes) => setItem({ ...item, attributes })}
+ definitions={{ ...commonDeviceAttributes, ...groupAttributes }}
+ />
{item.id && (
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js
index d2cf02d9..c434f11e 100644
--- a/modern/src/settings/MaintenancePage.js
+++ b/modern/src/settings/MaintenancePage.js
@@ -15,7 +15,7 @@ import InputAdornment from '@mui/material/InputAdornment';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { prefixString } from '../common/util/stringUtils';
import EditItemView from './components/EditItemView';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
import { useAttributePreference } from '../common/util/preferences';
import {
speedFromKnots, speedToKnots, distanceFromMeters, distanceToMeters,
@@ -164,20 +164,11 @@ const MaintenancePage = () => {
/>
</AccordionDetails>
</Accordion>
- <Accordion>
- <AccordionSummary expandIcon={<ExpandMoreIcon />}>
- <Typography variant="subtitle1">
- {t('sharedAttributes')}
- </Typography>
- </AccordionSummary>
- <AccordionDetails className={classes.details}>
- <EditAttributesView
- attributes={item.attributes}
- setAttributes={(attributes) => setItem({ ...item, attributes })}
- definitions={{}}
- />
- </AccordionDetails>
- </Accordion>
+ <EditAttributesAccordion
+ attributes={item.attributes}
+ setAttributes={(attributes) => setItem({ ...item, attributes })}
+ definitions={{}}
+ />
</>
)}
</EditItemView>
diff --git a/modern/src/settings/ServerPage.js b/modern/src/settings/ServerPage.js
index ee2d5f31..22dd66af 100644
--- a/modern/src/settings/ServerPage.js
+++ b/modern/src/settings/ServerPage.js
@@ -21,7 +21,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { sessionActions } from '../store';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
import { useTranslation } from '../common/components/LocalizationProvider';
import SelectField from '../common/components/SelectField';
import PageLayout from '../common/components/PageLayout';
@@ -241,20 +241,11 @@ const ServerPage = () => {
</FormGroup>
</AccordionDetails>
</Accordion>
- <Accordion>
- <AccordionSummary expandIcon={<ExpandMoreIcon />}>
- <Typography variant="subtitle1">
- {t('sharedAttributes')}
- </Typography>
- </AccordionSummary>
- <AccordionDetails className={classes.details}>
- <EditAttributesView
- attributes={item.attributes}
- setAttributes={(attributes) => setItem({ ...item, attributes })}
- definitions={{ ...commonUserAttributes, ...commonDeviceAttributes, ...serverAttributes }}
- />
- </AccordionDetails>
- </Accordion>
+ <EditAttributesAccordion
+ attributes={item.attributes}
+ setAttributes={(attributes) => setItem({ ...item, attributes })}
+ definitions={{ ...commonUserAttributes, ...commonDeviceAttributes, ...serverAttributes }}
+ />
</>
)}
<div className={classes.buttons}>
diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js
index 6ca55187..5d29c0b4 100644
--- a/modern/src/settings/UserPage.js
+++ b/modern/src/settings/UserPage.js
@@ -23,7 +23,7 @@ import CachedIcon from '@mui/icons-material/Cached';
import { useDispatch, useSelector } from 'react-redux';
import moment from 'moment';
import EditItemView from './components/EditItemView';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
import LinkField from '../common/components/LinkField';
import { useTranslation } from '../common/components/LocalizationProvider';
import useUserAttributes from '../common/attributes/useUserAttributes';
@@ -314,21 +314,12 @@ const UserPage = () => {
</FormGroup>
</AccordionDetails>
</Accordion>
- <Accordion defaultExpanded={!!attribute}>
- <AccordionSummary expandIcon={<ExpandMoreIcon />}>
- <Typography variant="subtitle1">
- {t('sharedAttributes')}
- </Typography>
- </AccordionSummary>
- <AccordionDetails className={classes.details}>
- <EditAttributesView
- attributes={item.attributes}
- setAttributes={(attributes) => setItem({ ...item, attributes })}
- definitions={{ ...commonUserAttributes, ...userAttributes }}
- focusAttribute={attribute}
- />
- </AccordionDetails>
- </Accordion>
+ <EditAttributesAccordion
+ attributes={item.attributes}
+ setAttributes={(attributes) => setItem({ ...item, attributes })}
+ definitions={{ ...commonUserAttributes, ...userAttributes }}
+ focusAttribute={attribute}
+ />
{item.id && manager && (
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
diff --git a/modern/src/settings/components/EditAttributesView.js b/modern/src/settings/components/EditAttributesAccordion.js
index 3329d7bc..d159dafe 100644
--- a/modern/src/settings/components/EditAttributesView.js
+++ b/modern/src/settings/components/EditAttributesAccordion.js
@@ -10,27 +10,41 @@ import {
IconButton,
InputAdornment,
InputLabel,
+ Accordion,
+ AccordionSummary,
+ Typography,
+ AccordionDetails,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import CloseIcon from '@mui/icons-material/Close';
import AddIcon from '@mui/icons-material/Add';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import AddAttributeDialog from './AddAttributeDialog';
import { useTranslation } from '../../common/components/LocalizationProvider';
import { useAttributePreference } from '../../common/util/preferences';
import {
distanceFromMeters, distanceToMeters, distanceUnitString, speedFromKnots, speedToKnots, speedUnitString, volumeFromLiters, volumeToLiters, volumeUnitString,
} from '../../common/util/converter';
+import useFeatures from '../../common/util/useFeatures';
const useStyles = makeStyles((theme) => ({
removeButton: {
marginRight: theme.spacing(1.5),
},
+ details: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: theme.spacing(2),
+ paddingBottom: theme.spacing(3),
+ },
}));
-const EditAttributesView = ({ attributes, setAttributes, definitions, focusAttribute }) => {
+const EditAttributesAccordion = ({ attributes, setAttributes, definitions, focusAttribute }) => {
const classes = useStyles();
const t = useTranslation();
+ const features = useFeatures();
+
const speedUnit = useAttributePreference('speedUnit');
const distanceUnit = useAttributePreference('distanceUnit');
const volumeUnit = useAttributePreference('volumeUnit');
@@ -145,64 +159,71 @@ const EditAttributesView = ({ attributes, setAttributes, definitions, focusAttri
}
};
- return (
- <>
- {convertToList(attributes).map(({
- key, value, type, subtype,
- }) => {
- if (type === 'boolean') {
+ return features.disableAttributes ? '' : (
+ <Accordion>
+ <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+ <Typography variant="subtitle1">
+ {t('sharedAttributes')}
+ </Typography>
+ </AccordionSummary>
+ <AccordionDetails className={classes.details}>
+ {convertToList(attributes).map(({
+ key, value, type, subtype,
+ }) => {
+ if (type === 'boolean') {
+ return (
+ <Grid container direction="row" justifyContent="space-between" key={key}>
+ <FormControlLabel
+ control={(
+ <Checkbox
+ checked={value}
+ onChange={(e) => updateAttribute(key, e.target.checked)}
+ />
+ )}
+ label={getAttributeName(key, subtype)}
+ />
+ <IconButton size="small" className={classes.removeButton} onClick={() => deleteAttribute(key)}>
+ <CloseIcon fontSize="small" />
+ </IconButton>
+ </Grid>
+ );
+ }
return (
- <Grid container direction="row" justifyContent="space-between" key={key}>
- <FormControlLabel
- control={(
- <Checkbox
- checked={value}
- onChange={(e) => updateAttribute(key, e.target.checked)}
- />
- )}
+ <FormControl key={key}>
+ <InputLabel>{getAttributeName(key, subtype)}</InputLabel>
+ <OutlinedInput
label={getAttributeName(key, subtype)}
+ type={type === 'number' ? 'number' : 'text'}
+ value={getDisplayValue(value, subtype)}
+ onChange={(e) => updateAttribute(key, e.target.value, type, subtype)}
+ autoFocus={focusAttribute === key}
+ endAdornment={(
+ <InputAdornment position="end">
+ <IconButton size="small" onClick={() => deleteAttribute(key)}>
+ <CloseIcon fontSize="small" />
+ </IconButton>
+ </InputAdornment>
+ )}
/>
- <IconButton size="small" className={classes.removeButton} onClick={() => deleteAttribute(key)}>
- <CloseIcon fontSize="small" />
- </IconButton>
- </Grid>
+ </FormControl>
);
- }
- return (
- <FormControl key={key}>
- <InputLabel>{getAttributeName(key, subtype)}</InputLabel>
- <OutlinedInput
- label={getAttributeName(key, subtype)}
- type={type === 'number' ? 'number' : 'text'}
- value={getDisplayValue(value, subtype)}
- onChange={(e) => updateAttribute(key, e.target.value, type, subtype)}
- autoFocus={focusAttribute === key}
- endAdornment={(
- <InputAdornment position="end">
- <IconButton size="small" onClick={() => deleteAttribute(key)}>
- <CloseIcon fontSize="small" />
- </IconButton>
- </InputAdornment>
- )}
- />
- </FormControl>
- );
- })}
- <Button
- variant="outlined"
- color="primary"
- onClick={() => setAddDialogShown(true)}
- startIcon={<AddIcon />}
- >
- {t('sharedAdd')}
- </Button>
- <AddAttributeDialog
- open={addDialogShown}
- onResult={handleAddResult}
- definitions={definitions}
- />
- </>
+ })}
+ <Button
+ variant="outlined"
+ color="primary"
+ onClick={() => setAddDialogShown(true)}
+ startIcon={<AddIcon />}
+ >
+ {t('sharedAdd')}
+ </Button>
+ <AddAttributeDialog
+ open={addDialogShown}
+ onResult={handleAddResult}
+ definitions={definitions}
+ />
+ </AccordionDetails>
+ </Accordion>
);
};
-export default EditAttributesView;
+export default EditAttributesAccordion;