Add preferences page

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;