Fix readonly preferences

1 files changed, 199 insertions, 192 deletions

diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index 6aad1153..a7115bf8 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -19,6 +19,7 @@ import useMapStyles from '../map/core/useMapStyles';
 import useMapOverlays from '../map/overlay/useMapOverlays';
 import { useCatch } from '../reactHelper';
 import { sessionActions } from '../store';
+import { useRestriction } from '../common/util/permissions';
 
 const deviceFields = [
   { id: 'name', name: 'sharedName' },
@@ -60,6 +61,8 @@ const PreferencesPage = () => {
   const navigate = useNavigate();
   const t = useTranslation();
 
+  const readonly = useRestriction('readonly');
+
   const user = useSelector((state) => state.session.user);
   const [attributes, setAttributes] = useState(user.attributes);
 
@@ -147,203 +150,207 @@ const PreferencesPage = () => {
             </FormControl>
           </AccordionDetails>
         </Accordion>
-        <Accordion>
-          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-            <Typography variant="subtitle1">
-              {t('mapTitle')}
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails className={classes.details}>
-            <FormControl>
-              <InputLabel>{t('mapActive')}</InputLabel>
-              <Select
-                label={t('mapActive')}
-                value={attributes.activeMapStyles?.split(',') || ['locationIqStreets', 'osm', 'carto']}
-                onChange={(e, child) => {
-                  const clicked = mapStyles.find((s) => s.id === child.props.value);
-                  if (clicked.available) {
-                    setAttributes({ ...attributes, activeMapStyles: e.target.value.join(',') });
-                  } else if (clicked.id !== 'custom') {
-                    const query = new URLSearchParams({ attribute: clicked.attribute });
-                    navigate(`/settings/user/${user.id}?${query.toString()}`);
-                  }
-                }}
-                multiple
-              >
-                {mapStyles.map((style) => (
-                  <MenuItem key={style.id} value={style.id}>
-                    <Typography component="span" color={style.available ? 'textPrimary' : 'error'}>{style.title}</Typography>
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-            <FormControl>
-              <InputLabel>{t('mapOverlay')}</InputLabel>
-              <Select
-                label={t('mapOverlay')}
-                value={attributes.selectedMapOverlay || ''}
-                onChange={(e) => {
-                  const clicked = mapOverlays.find((o) => o.id === e.target.value);
-                  if (!clicked || clicked.available) {
-                    setAttributes({ ...attributes, selectedMapOverlay: e.target.value });
-                  } else if (clicked.id !== 'custom') {
-                    const query = new URLSearchParams({ attribute: clicked.attribute });
-                    navigate(`/settings/user/${user.id}?${query.toString()}`);
-                  }
-                }}
-              >
-                <MenuItem value="">{'\u00a0'}</MenuItem>
-                {mapOverlays.map((overlay) => (
-                  <MenuItem key={overlay.id} value={overlay.id}>
-                    <Typography component="span" color={overlay.available ? 'textPrimary' : 'error'}>{overlay.title}</Typography>
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-            <Autocomplete
-              multiple
-              freeSolo
-              options={Object.keys(positionAttributes)}
-              getOptionLabel={(option) => (positionAttributes.hasOwnProperty(option) ? positionAttributes[option].name : option)}
-              value={attributes.positionItems?.split(',') || ['speed', 'address', 'totalDistance', 'course']}
-              onChange={(_, option) => {
-                setAttributes({ ...attributes, positionItems: option.join(',') });
-              }}
-              filterOptions={(options, params) => {
-                const filtered = filter(options, params);
-                if (params.inputValue && !filtered.includes(params.inputValue)) {
-                  filtered.push(params.inputValue);
-                }
-                return filtered;
-              }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  label={t('attributePopupInfo')}
+        {!readonly && (
+          <>
+            <Accordion>
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <Typography variant="subtitle1">
+                  {t('mapTitle')}
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails className={classes.details}>
+                <FormControl>
+                  <InputLabel>{t('mapActive')}</InputLabel>
+                  <Select
+                    label={t('mapActive')}
+                    value={attributes.activeMapStyles?.split(',') || ['locationIqStreets', 'osm', 'carto']}
+                    onChange={(e, child) => {
+                      const clicked = mapStyles.find((s) => s.id === child.props.value);
+                      if (clicked.available) {
+                        setAttributes({ ...attributes, activeMapStyles: e.target.value.join(',') });
+                      } else if (clicked.id !== 'custom') {
+                        const query = new URLSearchParams({ attribute: clicked.attribute });
+                        navigate(`/settings/user/${user.id}?${query.toString()}`);
+                      }
+                    }}
+                    multiple
+                  >
+                    {mapStyles.map((style) => (
+                      <MenuItem key={style.id} value={style.id}>
+                        <Typography component="span" color={style.available ? 'textPrimary' : 'error'}>{style.title}</Typography>
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+                <FormControl>
+                  <InputLabel>{t('mapOverlay')}</InputLabel>
+                  <Select
+                    label={t('mapOverlay')}
+                    value={attributes.selectedMapOverlay || ''}
+                    onChange={(e) => {
+                      const clicked = mapOverlays.find((o) => o.id === e.target.value);
+                      if (!clicked || clicked.available) {
+                        setAttributes({ ...attributes, selectedMapOverlay: e.target.value });
+                      } else if (clicked.id !== 'custom') {
+                        const query = new URLSearchParams({ attribute: clicked.attribute });
+                        navigate(`/settings/user/${user.id}?${query.toString()}`);
+                      }
+                    }}
+                  >
+                    <MenuItem value="">{'\u00a0'}</MenuItem>
+                    {mapOverlays.map((overlay) => (
+                      <MenuItem key={overlay.id} value={overlay.id}>
+                        <Typography component="span" color={overlay.available ? 'textPrimary' : 'error'}>{overlay.title}</Typography>
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+                <Autocomplete
+                  multiple
+                  freeSolo
+                  options={Object.keys(positionAttributes)}
+                  getOptionLabel={(option) => (positionAttributes.hasOwnProperty(option) ? positionAttributes[option].name : option)}
+                  value={attributes.positionItems?.split(',') || ['speed', 'address', 'totalDistance', 'course']}
+                  onChange={(_, option) => {
+                    setAttributes({ ...attributes, positionItems: option.join(',') });
+                  }}
+                  filterOptions={(options, params) => {
+                    const filtered = filter(options, params);
+                    if (params.inputValue && !filtered.includes(params.inputValue)) {
+                      filtered.push(params.inputValue);
+                    }
+                    return filtered;
+                  }}
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      label={t('attributePopupInfo')}
+                    />
+                  )}
                 />
-              )}
-            />
-            <FormControl>
-              <InputLabel>{t('mapLiveRoutes')}</InputLabel>
-              <Select
-                label={t('mapLiveRoutes')}
-                value={attributes.mapLiveRoutes || 'none'}
-                onChange={(e) => setAttributes({ ...attributes, mapLiveRoutes: e.target.value })}
-              >
-                <MenuItem value="none">{t('sharedDisabled')}</MenuItem>
-                <MenuItem value="selected">{t('deviceSelected')}</MenuItem>
-                <MenuItem value="all">{t('notificationAlways')}</MenuItem>
-              </Select>
-            </FormControl>
-            <FormGroup>
-              <FormControlLabel
-                control={(
-                  <Checkbox
-                    checked={attributes.hasOwnProperty('mapGeofences') ? attributes.mapGeofences : true}
-                    onChange={(e) => setAttributes({ ...attributes, mapGeofences: e.target.checked })}
+                <FormControl>
+                  <InputLabel>{t('mapLiveRoutes')}</InputLabel>
+                  <Select
+                    label={t('mapLiveRoutes')}
+                    value={attributes.mapLiveRoutes || 'none'}
+                    onChange={(e) => setAttributes({ ...attributes, mapLiveRoutes: e.target.value })}
+                  >
+                    <MenuItem value="none">{t('sharedDisabled')}</MenuItem>
+                    <MenuItem value="selected">{t('deviceSelected')}</MenuItem>
+                    <MenuItem value="all">{t('notificationAlways')}</MenuItem>
+                  </Select>
+                </FormControl>
+                <FormGroup>
+                  <FormControlLabel
+                    control={(
+                      <Checkbox
+                        checked={attributes.hasOwnProperty('mapGeofences') ? attributes.mapGeofences : true}
+                        onChange={(e) => setAttributes({ ...attributes, mapGeofences: e.target.checked })}
+                      />
+                    )}
+                    label={t('attributeShowGeofences')}
                   />
-                )}
-                label={t('attributeShowGeofences')}
-              />
-              <FormControlLabel
-                control={(
-                  <Checkbox
-                    checked={attributes.hasOwnProperty('mapFollow') ? attributes.mapFollow : false}
-                    onChange={(e) => setAttributes({ ...attributes, mapFollow: e.target.checked })}
+                  <FormControlLabel
+                    control={(
+                      <Checkbox
+                        checked={attributes.hasOwnProperty('mapFollow') ? attributes.mapFollow : false}
+                        onChange={(e) => setAttributes({ ...attributes, mapFollow: e.target.checked })}
+                      />
+                    )}
+                    label={t('deviceFollow')}
                   />
-                )}
-                label={t('deviceFollow')}
-              />
-              <FormControlLabel
-                control={(
-                  <Checkbox
-                    checked={attributes.hasOwnProperty('mapCluster') ? attributes.mapCluster : true}
-                    onChange={(e) => setAttributes({ ...attributes, mapCluster: e.target.checked })}
+                  <FormControlLabel
+                    control={(
+                      <Checkbox
+                        checked={attributes.hasOwnProperty('mapCluster') ? attributes.mapCluster : true}
+                        onChange={(e) => setAttributes({ ...attributes, mapCluster: e.target.checked })}
+                      />
+                    )}
+                    label={t('mapClustering')}
                   />
-                )}
-                label={t('mapClustering')}
-              />
-              <FormControlLabel
-                control={(
-                  <Checkbox
-                    checked={attributes.hasOwnProperty('mapOnSelect') ? attributes.mapOnSelect : true}
-                    onChange={(e) => setAttributes({ ...attributes, mapOnSelect: e.target.checked })}
+                  <FormControlLabel
+                    control={(
+                      <Checkbox
+                        checked={attributes.hasOwnProperty('mapOnSelect') ? attributes.mapOnSelect : true}
+                        onChange={(e) => setAttributes({ ...attributes, mapOnSelect: e.target.checked })}
+                      />
+                    )}
+                    label={t('mapOnSelect')}
                   />
-                )}
-                label={t('mapOnSelect')}
-              />
-            </FormGroup>
-          </AccordionDetails>
-        </Accordion>
-        <Accordion>
-          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-            <Typography variant="subtitle1">
-              {t('deviceTitle')}
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails className={classes.details}>
-            <SelectField
-              emptyValue={null}
-              value={attributes.devicePrimary || 'name'}
-              onChange={(e) => setAttributes({ ...attributes, devicePrimary: e.target.value })}
-              data={deviceFields}
-              titleGetter={(it) => t(it.name)}
-              label={t('devicePrimaryInfo')}
-            />
-            <SelectField
-              emptyValue=""
-              value={attributes.deviceSecondary || ''}
-              onChange={(e) => setAttributes({ ...attributes, deviceSecondary: e.target.value })}
-              data={deviceFields}
-              titleGetter={(it) => t(it.name)}
-              label={t('deviceSecondaryInfo')}
-            />
-          </AccordionDetails>
-        </Accordion>
-        <Accordion>
-          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-            <Typography variant="subtitle1">
-              {t('sharedSound')}
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails className={classes.details}>
-            <SelectField
-              multiple
-              value={attributes.soundEvents?.split(',') || []}
-              onChange={(e) => setAttributes({ ...attributes, soundEvents: e.target.value.join(',') })}
-              endpoint="/api/notifications/types"
-              keyGetter={(it) => it.type}
-              titleGetter={(it) => t(prefixString('event', it.type))}
-              label={t('eventsSoundEvents')}
-            />
-            <SelectField
-              multiple
-              value={attributes.soundAlarms?.split(',') || ['sos']}
-              onChange={(e) => setAttributes({ ...attributes, soundAlarms: e.target.value.join(',') })}
-              data={alarms}
-              keyGetter={(it) => it.key}
-              label={t('eventsSoundAlarms')}
-            />
-          </AccordionDetails>
-        </Accordion>
-        <div className={classes.buttons}>
-          <Button
-            type="button"
-            color="primary"
-            variant="outlined"
-            onClick={() => navigate(-1)}
-          >
-            {t('sharedCancel')}
-          </Button>
-          <Button
-            type="button"
-            color="primary"
-            variant="contained"
-            onClick={handleSave}
-          >
-            {t('sharedSave')}
-          </Button>
-        </div>
+                </FormGroup>
+              </AccordionDetails>
+            </Accordion>
+            <Accordion>
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <Typography variant="subtitle1">
+                  {t('deviceTitle')}
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails className={classes.details}>
+                <SelectField
+                  emptyValue={null}
+                  value={attributes.devicePrimary || 'name'}
+                  onChange={(e) => setAttributes({ ...attributes, devicePrimary: e.target.value })}
+                  data={deviceFields}
+                  titleGetter={(it) => t(it.name)}
+                  label={t('devicePrimaryInfo')}
+                />
+                <SelectField
+                  emptyValue=""
+                  value={attributes.deviceSecondary || ''}
+                  onChange={(e) => setAttributes({ ...attributes, deviceSecondary: e.target.value })}
+                  data={deviceFields}
+                  titleGetter={(it) => t(it.name)}
+                  label={t('deviceSecondaryInfo')}
+                />
+              </AccordionDetails>
+            </Accordion>
+            <Accordion>
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <Typography variant="subtitle1">
+                  {t('sharedSound')}
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails className={classes.details}>
+                <SelectField
+                  multiple
+                  value={attributes.soundEvents?.split(',') || []}
+                  onChange={(e) => setAttributes({ ...attributes, soundEvents: e.target.value.join(',') })}
+                  endpoint="/api/notifications/types"
+                  keyGetter={(it) => it.type}
+                  titleGetter={(it) => t(prefixString('event', it.type))}
+                  label={t('eventsSoundEvents')}
+                />
+                <SelectField
+                  multiple
+                  value={attributes.soundAlarms?.split(',') || ['sos']}
+                  onChange={(e) => setAttributes({ ...attributes, soundAlarms: e.target.value.join(',') })}
+                  data={alarms}
+                  keyGetter={(it) => it.key}
+                  label={t('eventsSoundAlarms')}
+                />
+              </AccordionDetails>
+            </Accordion>
+            <div className={classes.buttons}>
+              <Button
+                type="button"
+                color="primary"
+                variant="outlined"
+                onClick={() => navigate(-1)}
+              >
+                {t('sharedCancel')}
+              </Button>
+              <Button
+                type="button"
+                color="primary"
+                variant="contained"
+                onClick={handleSave}
+              >
+                {t('sharedSave')}
+              </Button>
+            </div>
+          </>
+        )}
       </Container>
     </PageLayout>
   );