aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-28 08:16:24 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-28 08:16:24 -0700
commit2870790d4d1a53af27c41f1591720c38c7c95520 (patch)
treebb9de8a34434655539d4a6c50c07a9e96b0600dd
parentc615c9e2f0acf91684d4cb6d9555eccf403971d2 (diff)
downloadtrackermap-web-2870790d4d1a53af27c41f1591720c38c7c95520.tar.gz
trackermap-web-2870790d4d1a53af27c41f1591720c38c7c95520.tar.bz2
trackermap-web-2870790d4d1a53af27c41f1591720c38c7c95520.zip
Show map on selection (fix #948)
-rw-r--r--modern/src/main/MainPage.js8
-rw-r--r--modern/src/settings/PreferencesPage.js11
-rw-r--r--web/l10n/en.json1
3 files changed, 17 insertions, 3 deletions
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index f9341eb6..41e51609 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -129,6 +129,8 @@ const MainPage = () => {
const desktop = useMediaQuery(theme.breakpoints.up('md'));
const phone = useMediaQuery(theme.breakpoints.down('sm'));
+ const [mapMapOnSelect] = usePersistedState('mapOnSelect', false);
+
const [mapLiveRoutes] = usePersistedState('mapLiveRoutes', false);
const selectedDeviceId = useSelector((state) => state.devices.selectedId);
@@ -143,6 +145,12 @@ const MainPage = () => {
useEffect(() => setCollapsed(!desktop), [desktop]);
+ useEffect(() => {
+ if (!desktop && mapMapOnSelect && selectedDeviceId) {
+ setCollapsed(true);
+ }
+ }, [desktop, mapMapOnSelect, selectedDeviceId]);
+
const onClick = useCallback((_, deviceId) => {
dispatch(devicesActions.select(deviceId));
}, [dispatch]);
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index 64268e63..0db13aa2 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -48,6 +48,7 @@ const PreferencesPage = () => {
const [mapLiveRoutes, setMapLiveRoutes] = usePersistedState('mapLiveRoutes', false);
const [mapFollow, setMapFollow] = usePersistedState('mapFollow', false);
const [mapCluster, setMapCluster] = usePersistedState('mapCluster', true);
+ const [mapMapOnSelect, setMapOnSelect] = usePersistedState('mapOnSelect', false);
const alarms = useTranslationKeys((it) => it.startsWith('alarm')).map((it) => ({
key: unprefixString('alarm', it),
@@ -101,17 +102,21 @@ const PreferencesPage = () => {
</FormControl>
<FormGroup>
<FormControlLabel
- control={<Checkbox checked={mapLiveRoutes} onChange={(event) => setMapLiveRoutes(event.target.checked)} />}
+ control={<Checkbox checked={mapLiveRoutes} onChange={(e) => setMapLiveRoutes(e.target.checked)} />}
label={t('mapLiveRoutes')}
/>
<FormControlLabel
- control={<Checkbox checked={mapFollow} onChange={(event) => setMapFollow(event.target.checked)} />}
+ control={<Checkbox checked={mapFollow} onChange={(e) => setMapFollow(e.target.checked)} />}
label={t('deviceFollow')}
/>
<FormControlLabel
- control={<Checkbox checked={mapCluster} onChange={(event) => setMapCluster(event.target.checked)} />}
+ control={<Checkbox checked={mapCluster} onChange={(endpoint) => setMapCluster(e.target.checked)} />}
label={t('mapClustering')}
/>
+ <FormControlLabel
+ control={<Checkbox checked={mapMapOnSelect} onChange={(e) => setMapOnSelect(e.target.checked)} />}
+ label={t('mapOnSelect')}
+ />
</FormGroup>
</AccordionDetails>
</Accordion>
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 65ae7ce9..4e6ccabf 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -279,6 +279,7 @@
"mapCurrentLocation": "Current Location",
"mapPoiLayer": "POI Layer",
"mapClustering": "Markers Clustering",
+ "mapOnSelect": "Show Map on Selection",
"stateTitle": "State",
"stateName": "Attribute",
"stateValue": "Value",