From 9e7ca99218cb7176d27a7a2271294e976d885ccd Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Tue, 19 Jul 2022 20:30:56 -0700
Subject: Option to hide geofences

---
 modern/src/main/MainPage.js            | 9 +++++----
 modern/src/settings/PreferencesPage.js | 9 +++++++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index fb748a68..afcfd5ae 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -146,8 +146,9 @@ const MainPage = () => {
 
   const features = useFeatures();
 
-  const [mapMapOnSelect] = usePersistedState('mapOnSelect', false);
+  const [mapOnSelect] = usePersistedState('mapOnSelect', false);
 
+  const [mapGeofences] = usePersistedState('mapGeofences', true);
   const [mapLiveRoutes] = usePersistedState('mapLiveRoutes', false);
 
   const selectedDeviceId = useSelector((state) => state.devices.selectedId);
@@ -181,10 +182,10 @@ const MainPage = () => {
   useEffect(() => setDevicesOpen(desktop), [desktop]);
 
   useEffect(() => {
-    if (!desktop && mapMapOnSelect && selectedDeviceId) {
+    if (!desktop && mapOnSelect && selectedDeviceId) {
       setDevicesOpen(false);
     }
-  }, [desktop, mapMapOnSelect, selectedDeviceId]);
+  }, [desktop, mapOnSelect, selectedDeviceId]);
 
   const onClick = useCallback((_, deviceId) => {
     dispatch(devicesActions.select(deviceId));
@@ -212,7 +213,7 @@ const MainPage = () => {
     <div className={classes.root}>
       <MapView>
         <MapOverlay />
-        <MapGeofence />
+        {mapGeofences && <MapGeofence />}
         <MapAccuracy />
         {mapLiveRoutes && <MapLiveRoutes />}
         <MapPositions positions={filteredPositions} onClick={onClick} showStatus />
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index d6589231..11cf860c 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -47,10 +47,11 @@ const PreferencesPage = () => {
   const positionAttributes = usePositionAttributes(t);
   const [positionItems, setPositionItems] = usePersistedState('positionItems', ['speed', 'address', 'totalDistance', 'course']);
 
+  const [mapGeofences, setMapGeofences] = usePersistedState('mapGeofences', true);
   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 [mapOnSelect, setMapOnSelect] = usePersistedState('mapOnSelect', false);
 
   const alarms = useTranslationKeys((it) => it.startsWith('alarm')).map((it) => ({
     key: unprefixString('alarm', it),
@@ -149,6 +150,10 @@ const PreferencesPage = () => {
               </Select>
             </FormControl>
             <FormGroup>
+              <FormControlLabel
+                control={<Checkbox checked={mapGeofences} onChange={(e) => setMapGeofences(e.target.checked)} />}
+                label={t('sharedGeofences')}
+              />
               <FormControlLabel
                 control={<Checkbox checked={mapLiveRoutes} onChange={(e) => setMapLiveRoutes(e.target.checked)} />}
                 label={t('mapLiveRoutes')}
@@ -162,7 +167,7 @@ const PreferencesPage = () => {
                 label={t('mapClustering')}
               />
               <FormControlLabel
-                control={<Checkbox checked={mapMapOnSelect} onChange={(e) => setMapOnSelect(e.target.checked)} />}
+                control={<Checkbox checked={mapOnSelect} onChange={(e) => setMapOnSelect(e.target.checked)} />}
                 label={t('mapOnSelect')}
               />
             </FormGroup>
-- 
cgit v1.2.3