import React from 'react'; import { useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { Accordion, AccordionSummary, AccordionDetails, Typography, Container, FormControl, InputLabel, Select, MenuItem, Checkbox, FormControlLabel, FormGroup, } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useLocalization, useTranslation, useTranslationKeys } from '../common/components/LocalizationProvider'; import usePersistedState from '../common/util/usePersistedState'; import PageLayout from '../common/components/PageLayout'; import SettingsMenu from './components/SettingsMenu'; import usePositionAttributes from '../common/attributes/usePositionAttributes'; import { prefixString, unprefixString } from '../common/util/stringUtils'; import SelectField from '../common/components/SelectField'; import useMapStyles from '../map/core/useMapStyles'; const useStyles = makeStyles((theme) => ({ container: { marginTop: theme.spacing(2), }, details: { display: 'flex', flexDirection: 'column', gap: theme.spacing(2), paddingBottom: theme.spacing(3), }, })); const PreferencesPage = () => { const classes = useStyles(); const navigate = useNavigate(); const t = useTranslation(); const userId = useSelector((state) => state.session.user.id); const { languages, language, setLanguage } = useLocalization(); const languageList = Object.entries(languages).map((values) => ({ code: values[0], name: values[1].name })); const mapStyles = useMapStyles(); const [activeMapStyles, setActiveMapStyles] = usePersistedState('activeMapStyles', ['locationIqStreets', 'osm', 'carto']); const positionAttributes = usePositionAttributes(t); const [positionItems, setPositionItems] = usePersistedState('positionItems', ['speed', 'address', 'totalDistance', 'course']); 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), name: t(it), })); const [soundEvents, setSoundEvents] = usePersistedState('soundEvents', []); const [soundAlarms, setSoundAlarms] = usePersistedState('soundAlarms', ['sos']); return ( } breadcrumbs={['settingsTitle', 'sharedPreferences']}> }> {t('sharedPreferences')} {t('loginLanguage')} }> {t('mapTitle')} {t('mapActive')} {t('sharedAttributes')} setMapLiveRoutes(e.target.checked)} />} label={t('mapLiveRoutes')} /> setMapFollow(e.target.checked)} />} label={t('deviceFollow')} /> setMapCluster(e.target.checked)} />} label={t('mapClustering')} /> setMapOnSelect(e.target.checked)} />} label={t('mapOnSelect')} /> }> {t('sharedSound')} setSoundEvents(e.target.value)} endpoint="/api/notifications/types" keyGetter={(it) => it.type} titleGetter={(it) => t(prefixString('event', it.type))} label={t('reportEventTypes')} /> setSoundAlarms(e.target.value)} data={alarms} keyGetter={(it) => it.key} label={t('sharedAlarms')} /> ); }; export default PreferencesPage;