aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-01 17:03:36 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-01 17:03:36 -0700
commit05a7a75d6db6185bbea02df51a8506a9b1611bb3 (patch)
treec3629e5c3184f47832105169cdda64f0f56828b7 /modern
parent6ff61de15ffff504699e4b5a5426d5ac5a27edc8 (diff)
downloadtrackermap-web-05a7a75d6db6185bbea02df51a8506a9b1611bb3.tar.gz
trackermap-web-05a7a75d6db6185bbea02df51a8506a9b1611bb3.tar.bz2
trackermap-web-05a7a75d6db6185bbea02df51a8506a9b1611bb3.zip
Add preferences page
Diffstat (limited to 'modern')
-rw-r--r--modern/src/App.js2
-rw-r--r--modern/src/components/BottomMenu.js2
-rw-r--r--modern/src/settings/OptionsLayout.js2
-rw-r--r--modern/src/settings/PreferencesPage.js47
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;