diff options
| author | Anton Tananaev <anton@traccar.org> | 2022-05-28 08:16:24 -0700 |
|---|---|---|
| committer | Anton Tananaev <anton@traccar.org> | 2022-05-28 08:16:24 -0700 |
| commit | 2870790d4d1a53af27c41f1591720c38c7c95520 (patch) | |
| tree | bb9de8a34434655539d4a6c50c07a9e96b0600dd | |
| parent | c615c9e2f0acf91684d4cb6d9555eccf403971d2 (diff) | |
| download | trackermap-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.js | 8 | ||||
| -rw-r--r-- | modern/src/settings/PreferencesPage.js | 11 | ||||
| -rw-r--r-- | web/l10n/en.json | 1 |
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", |