diff options
Diffstat (limited to 'modern/src/settings/components')
| -rw-r--r-- | modern/src/settings/components/EditItemView.js | 8 | ||||
| -rw-r--r-- | modern/src/settings/components/SettingsMenu.js | 128 |
2 files changed, 132 insertions, 4 deletions
diff --git a/modern/src/settings/components/EditItemView.js b/modern/src/settings/components/EditItemView.js index 90e5294a..2283ebda 100644 --- a/modern/src/settings/components/EditItemView.js +++ b/modern/src/settings/components/EditItemView.js @@ -6,8 +6,8 @@ import Button from '@material-ui/core/Button'; import FormControl from '@material-ui/core/FormControl'; import { useEffectAsync } from '../../reactHelper'; -import OptionsLayout from './OptionsLayout'; import { useTranslation } from '../../common/components/LocalizationProvider'; +import PageLayout from '../../common/components/PageLayout'; const useStyles = makeStyles((theme) => ({ container: { @@ -23,7 +23,7 @@ const useStyles = makeStyles((theme) => ({ })); const EditItemView = ({ - children, endpoint, item, setItem, validate, onItemSaved, + children, endpoint, item, setItem, validate, onItemSaved, menu, breadcrumbs, }) => { const history = useHistory(); const classes = useStyles(); @@ -63,7 +63,7 @@ const EditItemView = ({ }; return ( - <OptionsLayout> + <PageLayout menu={menu} breadcrumbs={breadcrumbs}> <Container maxWidth="xs" className={classes.container}> {children} <FormControl fullWidth margin="normal"> @@ -88,7 +88,7 @@ const EditItemView = ({ </div> </FormControl> </Container> - </OptionsLayout> + </PageLayout> ); }; 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; |