diff options
| -rw-r--r-- | modern/src/map/SelectedDeviceMap.js | 23 | ||||
| -rw-r--r-- | modern/src/settings/PreferencesPage.js | 26 |
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> ); |