Add map follow preference

2 files changed, 35 insertions, 14 deletions

diff --git a/modern/src/map/SelectedDeviceMap.js b/modern/src/map/SelectedDeviceMap.js
index c46ea40e..d09fdb9f 100644
--- a/modern/src/map/SelectedDeviceMap.js
+++ b/modern/src/map/SelectedDeviceMap.js
@@ -3,26 +3,25 @@ import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import dimensions from '../theme/dimensions';
 import { map } from './Map';
+import { usePrevious } from '../reactHelper';
+import usePersistedState from '../common/usePersistedState';
 
 const SelectedDeviceMap = () => {
-  const mapCenter = useSelector((state) => {
-    if (state.devices.selectedId) {
-      const position = state.positions.items[state.devices.selectedId] || null;
-      if (position) {
-        return { deviceId: state.devices.selectedId, position: [position.longitude, position.latitude] };
-      }
-    }
-    return null;
-  });
+  const selectedDeviceId = useSelector((state) => state.devices.selectedId);
+  const previousDeviceId = usePrevious(selectedDeviceId);
+
+  const position = useSelector((state) => state.positions.items[selectedDeviceId]);
+
+  const [mapFollow] = usePersistedState('mapFollow', false);
 
   useEffect(() => {
-    if (mapCenter) {
+    if ((selectedDeviceId != previousDeviceId || mapFollow) && position) {
       map.easeTo({
-        center: mapCenter.position,
+        center: [position.longitude, position.latitude],
         offset: [0, -dimensions.popupMapOffset / 2],
       });
     }
-  }, [mapCenter]);
+  });
 
   return null;
 };
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index 39b76074..d9d0c87e 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import {
-  Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, FormControl, InputLabel, Select, MenuItem,
+  Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, FormControl, InputLabel, Select, MenuItem, Checkbox, FormControlLabel,
 } from '@material-ui/core';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { useLocalization, useTranslation } from '../LocalizationProvider';
 import OptionsLayout from './OptionsLayout';
+import usePersistedState from '../common/usePersistedState';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -21,11 +23,14 @@ const PreferencesPage = () => {
   const { languages, language, setLanguage } = useLocalization();
   const languageList = Object.entries(languages).map((values) => ({ code: values[0], name: values[1].name }));
 
+  const [mapLiveRoutes, setMapLiveRoutes] = usePersistedState('mapLiveRoutes', false);
+  const [mapFollow, setMapFollow] = usePersistedState('mapFollow', false);
+
   return (
     <OptionsLayout>
       <Container maxWidth="xs" className={classes.container}>
         <Accordion defaultExpanded>
-          <AccordionSummary>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
             <Typography variant="subtitle1">
               {t('sharedPreferences')}
             </Typography>
@@ -39,6 +44,23 @@ const PreferencesPage = () => {
             </FormControl>
           </AccordionDetails>
         </Accordion>
+        <Accordion>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Typography variant="subtitle1">
+              {t('mapTitle')}
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails className={classes.details}>
+            <FormControlLabel
+              control={<Checkbox checked={mapLiveRoutes} onChange={(event) => setMapLiveRoutes(event.target.checked)} />}
+              label={t('mapLiveRoutes')}
+            />
+            <FormControlLabel
+              control={<Checkbox checked={mapFollow} onChange={(event) => setMapFollow(event.target.checked)} />}
+              label={t('deviceFollow')}
+            />
+          </AccordionDetails>
+        </Accordion>
       </Container>
     </OptionsLayout>
   );