diff options
| -rw-r--r-- | modern/src/App.js | 2 | ||||
| -rw-r--r-- | modern/src/components/BottomMenu.js | 2 | ||||
| -rw-r--r-- | modern/src/settings/OptionsLayout.js | 2 | ||||
| -rw-r--r-- | modern/src/settings/PreferencesPage.js | 47 |
4 files changed, 52 insertions, 1 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index e12a2e78..57e44621 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -47,6 +47,7 @@ import useQuery from './common/useQuery'; import { useEffectAsync } from './reactHelper'; import { devicesActions } from './store'; import EventPage from './EventPage'; +import PreferencesPage from './settings/PreferencesPage'; const App = () => { const history = useHistory(); @@ -101,6 +102,7 @@ const App = () => { <Route exact path="/device/:id?" component={DevicePage} /> <Route exact path="/geofence/:id?" component={GeofencePage} /> <Route exact path="/geofences" component={GeofencesPage} /> + <Route exact path="/settings/preferences" component={PreferencesPage} /> <Route exact path="/settings/notifications" component={NotificationsPage} /> <Route exact path="/settings/notification/:id?" component={NotificationPage} /> <Route exact path="/settings/groups" component={GroupsPage} /> diff --git a/modern/src/components/BottomMenu.js b/modern/src/components/BottomMenu.js index c6bf66e6..c43cfb96 100644 --- a/modern/src/components/BottomMenu.js +++ b/modern/src/components/BottomMenu.js @@ -43,7 +43,7 @@ const BottomMenu = () => { history.push('/reports/route'); break; case 2: - history.push('/settings/notifications'); + history.push('/settings/preferences'); break; case 3: setAnchorEl(event.currentTarget); diff --git a/modern/src/settings/OptionsLayout.js b/modern/src/settings/OptionsLayout.js index f2d8c5da..6ba636c2 100644 --- a/modern/src/settings/OptionsLayout.js +++ b/modern/src/settings/OptionsLayout.js @@ -10,6 +10,7 @@ import { } from '@material-ui/core'; import { useSelector } from 'react-redux'; +import SettingsIcon from '@material-ui/icons/Settings'; import CreateIcon from '@material-ui/icons/Create'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import NotificationsIcon from '@material-ui/icons/Notifications'; @@ -80,6 +81,7 @@ const OptionsLayout = ({ children }) => { ], [t]); const mainRoutes = useMemo(() => [ + { name: t('sharedPreferences'), href: '/settings/preferences', icon: <SettingsIcon /> }, { name: t('sharedNotifications'), href: '/settings/notifications', icon: <NotificationsIcon /> }, { name: t('settingsUser'), href: `/user/${userId}`, icon: <PersonIcon /> }, { name: t('sharedGeofences'), href: '/geofences', icon: <CreateIcon /> }, diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js new file mode 100644 index 00000000..39b76074 --- /dev/null +++ b/modern/src/settings/PreferencesPage.js @@ -0,0 +1,47 @@ +import React from 'react'; +import { + Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, FormControl, InputLabel, Select, MenuItem, +} from '@material-ui/core'; +import { useLocalization, useTranslation } from '../LocalizationProvider'; +import OptionsLayout from './OptionsLayout'; + +const useStyles = makeStyles((theme) => ({ + container: { + marginTop: theme.spacing(2), + }, + details: { + flexDirection: 'column', + }, +})); + +const PreferencesPage = () => { + const classes = useStyles(); + const t = useTranslation(); + + const { languages, language, setLanguage } = useLocalization(); + const languageList = Object.entries(languages).map((values) => ({ code: values[0], name: values[1].name })); + + return ( + <OptionsLayout> + <Container maxWidth="xs" className={classes.container}> + <Accordion defaultExpanded> + <AccordionSummary> + <Typography variant="subtitle1"> + {t('sharedPreferences')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <FormControl variant="filled" fullWidth> + <InputLabel>{t('loginLanguage')}</InputLabel> + <Select value={language} onChange={(e) => setLanguage(e.target.value)}> + {languageList.map((it) => <MenuItem key={it.code} value={it.code}>{it.name}</MenuItem>)} + </Select> + </FormControl> + </AccordionDetails> + </Accordion> + </Container> + </OptionsLayout> + ); +}; + +export default PreferencesPage; |