aboutsummaryrefslogtreecommitdiff
path: root/modern/src/settings/components/SettingsMenu.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-08 17:33:58 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-08 17:33:58 -0700
commitbf95e1bb48379bc1c3482d3f201017250991a832 (patch)
tree044446e36f395d3bcc0f48f8d95e25bc23ba2009 /modern/src/settings/components/SettingsMenu.js
parented99455abb6c73ded056ae3239cfce01a63ab76f (diff)
downloadtrackermap-web-bf95e1bb48379bc1c3482d3f201017250991a832.tar.gz
trackermap-web-bf95e1bb48379bc1c3482d3f201017250991a832.tar.bz2
trackermap-web-bf95e1bb48379bc1c3482d3f201017250991a832.zip
Implement new page layout
Diffstat (limited to 'modern/src/settings/components/SettingsMenu.js')
-rw-r--r--modern/src/settings/components/SettingsMenu.js128
1 files changed, 128 insertions, 0 deletions
diff --git a/modern/src/settings/components/SettingsMenu.js b/modern/src/settings/components/SettingsMenu.js
new file mode 100644
index 00000000..036f4101
--- /dev/null
+++ b/modern/src/settings/components/SettingsMenu.js
@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+ Divider, List, ListItem, ListItemIcon, ListItemText,
+} from '@material-ui/core';
+import SettingsIcon from '@material-ui/icons/Settings';
+import CreateIcon from '@material-ui/icons/Create';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import FolderIcon from '@material-ui/icons/Folder';
+import PersonIcon from '@material-ui/icons/Person';
+import StorageIcon from '@material-ui/icons/Storage';
+import BuildIcon from '@material-ui/icons/Build';
+import PeopleIcon from '@material-ui/icons/People';
+import TodayIcon from '@material-ui/icons/Today';
+import PublishIcon from '@material-ui/icons/Publish';
+import { Link, useLocation } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { useTranslation } from '../../common/components/LocalizationProvider';
+import { useAdministrator, useReadonly } from '../../common/util/permissions';
+
+const MenuItem = ({
+ title, link, icon, selected,
+}) => (
+ <ListItem button key={link} component={Link} to={link} selected={selected}>
+ <ListItemIcon>{icon}</ListItemIcon>
+ <ListItemText primary={title} />
+ </ListItem>
+);
+
+const SettingsMenu = () => {
+ const t = useTranslation();
+ const location = useLocation();
+
+ const readonly = useReadonly();
+ const admin = useAdministrator();
+ const userId = useSelector((state) => state.session.user?.id);
+
+ return (
+ <>
+ <List>
+ <MenuItem
+ title={t('sharedPreferences')}
+ link="/settings/preferences"
+ icon={<SettingsIcon />}
+ selected={location.pathname === '/settings/preferences'}
+ />
+ {!readonly && (
+ <>
+ <MenuItem
+ title={t('sharedNotifications')}
+ link="/settings/notifications"
+ icon={<NotificationsIcon />}
+ selected={location.pathname.startsWith('/settings/notification')}
+ />
+ <MenuItem
+ title={t('settingsUser')}
+ link={`/settings/user/${userId}`}
+ icon={<PersonIcon />}
+ selected={location.pathname === `/settings/user/${userId}`}
+ />
+ <MenuItem
+ title={t('sharedGeofences')}
+ link="/geofences"
+ icon={<CreateIcon />}
+ selected={location.pathname.startsWith('/settings/geofence')}
+ />
+ <MenuItem
+ title={t('settingsGroups')}
+ link="/settings/groups"
+ icon={<FolderIcon />}
+ selected={location.pathname.startsWith('/settings/group')}
+ />
+ <MenuItem
+ title={t('sharedDrivers')}
+ link="/settings/drivers"
+ icon={<PersonIcon />}
+ selected={location.pathname.startsWith('/settings/driver')}
+ />
+ <MenuItem
+ title={t('sharedCalendars')}
+ link="/settings/calendars"
+ icon={<TodayIcon />}
+ selected={location.pathname.startsWith('/settings/calendar')}
+ />
+ <MenuItem
+ title={t('sharedComputedAttributes')}
+ link="/settings/attributes"
+ icon={<StorageIcon />}
+ selected={location.pathname.startsWith('/settings/attribute')}
+ />
+ <MenuItem
+ title={t('sharedMaintenance')}
+ link="/settings/maintenances"
+ icon={<BuildIcon />}
+ selected={location.pathname.startsWith('/settings/maintenance')}
+ />
+ <MenuItem
+ title={t('sharedSavedCommands')}
+ link="/settings/commands"
+ icon={<PublishIcon />}
+ selected={location.pathname.startsWith('/settings/command')}
+ />
+ </>
+ )}
+ </List>
+ {admin && (
+ <>
+ <Divider />
+ <List>
+ <MenuItem
+ title={t('settingsServer')}
+ link="/settings/server"
+ icon={<StorageIcon />}
+ selected={location.pathname === '/settings/server'}
+ />
+ <MenuItem
+ title={t('settingsUsers')}
+ link="/settings/users"
+ icon={<PeopleIcon />}
+ selected={location.pathname.startsWith('/settings/user') && location.pathname !== `/settings/user/${userId}`}
+ />
+ </List>
+ </>
+ )}
+ </>
+ );
+};
+
+export default SettingsMenu;