aboutsummaryrefslogtreecommitdiff
path: root/modern/src/settings/PreferencesPage.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-06-12 06:30:41 -0700
committerAnton Tananaev <anton@traccar.org>2022-06-12 06:30:41 -0700
commit127a8bfc5df8cbe66d5f60023fcf983e15ee13e8 (patch)
tree4df390424bd2671851fcb69121d4db36be757be9 /modern/src/settings/PreferencesPage.js
parente7995f3b7a6b0828b81bebaf556ef7afb59bef61 (diff)
downloadtrackermap-web-127a8bfc5df8cbe66d5f60023fcf983e15ee13e8.tar.gz
trackermap-web-127a8bfc5df8cbe66d5f60023fcf983e15ee13e8.tar.bz2
trackermap-web-127a8bfc5df8cbe66d5f60023fcf983e15ee13e8.zip
Support map overlays
Diffstat (limited to 'modern/src/settings/PreferencesPage.js')
-rw-r--r--modern/src/settings/PreferencesPage.js27
1 files changed, 27 insertions, 0 deletions
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index 2a2674f7..d6589231 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -14,6 +14,7 @@ import usePositionAttributes from '../common/attributes/usePositionAttributes';
import { prefixString, unprefixString } from '../common/util/stringUtils';
import SelectField from '../common/components/SelectField';
import useMapStyles from '../map/core/useMapStyles';
+import useMapOverlays from '../map/overlay/useMapOverlays';
const useStyles = makeStyles((theme) => ({
container: {
@@ -40,6 +41,9 @@ const PreferencesPage = () => {
const mapStyles = useMapStyles();
const [activeMapStyles, setActiveMapStyles] = usePersistedState('activeMapStyles', ['locationIqStreets', 'osm', 'carto']);
+ const mapOverlays = useMapOverlays();
+ const [selectedMapOverlay, setSelectedMapOverlay] = usePersistedState('selectedMapOverlay');
+
const positionAttributes = usePositionAttributes(t);
const [positionItems, setPositionItems] = usePersistedState('positionItems', ['speed', 'address', 'totalDistance', 'course']);
@@ -109,6 +113,29 @@ const PreferencesPage = () => {
</Select>
</FormControl>
<FormControl>
+ <InputLabel>{t('mapOverlay')}</InputLabel>
+ <Select
+ label={t('mapOverlay')}
+ value={selectedMapOverlay}
+ onChange={(e) => {
+ const clicked = mapOverlays.find((o) => o.id === e.target.value);
+ if (!clicked || clicked.available) {
+ setSelectedMapOverlay(e.target.value);
+ } else if (clicked.id !== 'custom') {
+ const query = new URLSearchParams({ attribute: clicked.attribute });
+ navigate(`/settings/user/${userId}?${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>
+ <FormControl>
<InputLabel>{t('sharedAttributes')}</InputLabel>
<Select
label={t('sharedAttributes')}