From 2870790d4d1a53af27c41f1591720c38c7c95520 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sat, 28 May 2022 08:16:24 -0700
Subject: Show map on selection (fix #948)

---
 modern/src/main/MainPage.js            |  8 ++++++++
 modern/src/settings/PreferencesPage.js | 11 ++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

(limited to 'modern')

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>
-- 
cgit v1.2.3