1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
import React, { useState, useEffect, useMemo } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import {
Typography,
Divider,
Drawer,
makeStyles,
IconButton,
Hidden,
} 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';
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 BarChartIcon from '@material-ui/icons/BarChart';
import TodayIcon from '@material-ui/icons/Today';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import SideNav from '../components/SideNav';
import NavBar from '../components/NavBar';
import { useTranslation } from '../LocalizationProvider';
import { useAdministrator, useReadonly } from '../common/permissions';
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
height: '100%',
},
drawerContainer: {
width: theme.dimensions.drawerWidthDesktop,
},
drawer: {
width: theme.dimensions.drawerWidthDesktop,
[theme.breakpoints.down('md')]: {
width: theme.dimensions.drawerWidthTablet,
},
},
content: {
flex: 1,
padding: theme.spacing(5, 3, 3, 3),
[theme.breakpoints.down('md')]: {
paddingTop: theme.spacing(10),
},
},
drawerHeader: {
...theme.mixins.toolbar,
display: 'flex',
alignItems: 'center',
padding: theme.spacing(0, 1),
},
toolbar: {
[theme.breakpoints.down('md')]: {
...theme.mixins.toolbar,
},
},
}));
const OptionsLayout = ({ children }) => {
const t = useTranslation();
const classes = useStyles();
const location = useLocation();
const history = useHistory();
const [openDrawer, setOpenDrawer] = useState(false);
const [optionTitle, setOptionTitle] = useState();
const readonly = useReadonly();
const admin = useAdministrator();
const userId = useSelector((state) => state.session.user?.id);
const readonlyRoutes = useMemo(() => [
{ name: t('sharedPreferences'), href: '/settings/preferences', icon: <SettingsIcon /> },
], [t]);
const mainRoutes = useMemo(() => [
{ name: t('sharedNotifications'), href: '/settings/notifications', icon: <NotificationsIcon /> },
{ name: t('settingsUser'), href: `/user/${userId}`, icon: <PersonIcon /> },
{ name: t('sharedGeofences'), href: '/geofences', icon: <CreateIcon /> },
{ name: t('settingsGroups'), href: '/settings/groups', icon: <FolderIcon /> },
{ name: t('sharedDrivers'), href: '/settings/drivers', icon: <PersonIcon /> },
{ name: t('sharedCalendars'), href: '/settings/calendars', icon: <TodayIcon /> },
{ name: t('sharedComputedAttributes'), href: '/settings/attributes', icon: <StorageIcon /> },
{ name: t('sharedMaintenance'), href: '/settings/maintenances', icon: <BuildIcon /> },
{ name: t('sharedSavedCommands'), href: '/settings/commands', icon: <ExitToAppIcon /> },
], [t, userId]);
const adminRoutes = useMemo(() => [
{ subheader: t('userAdmin') },
{ name: t('settingsServer'), href: '/admin/server', icon: <StorageIcon /> },
{ name: t('settingsUsers'), href: '/admin/users', icon: <PeopleIcon /> },
{ name: t('statisticsTitle'), href: '/admin/statistics', icon: <BarChartIcon /> },
], [t]);
const routes = useMemo(() => (
[...readonlyRoutes, ...(!readonly ? mainRoutes : []), ...(admin ? adminRoutes : [])]
), [readonlyRoutes, readonly, mainRoutes, admin, adminRoutes]);
useEffect(() => {
const activeRoute = routes.find((route) => route.href && location.pathname.includes(route.href));
setOptionTitle(activeRoute?.name);
}, [location, routes]);
const title = `${t('settingsTitle')} / ${optionTitle}`;
return (
<div className={classes.root}>
<Hidden lgUp>
<NavBar setOpenDrawer={setOpenDrawer} title={title} />
<Drawer
variant="temporary"
open={openDrawer}
onClose={() => setOpenDrawer(!openDrawer)}
classes={{ paper: classes.drawer }}
>
<SideNav routes={routes} />
</Drawer>
</Hidden>
<Hidden mdDown>
<Drawer
variant="permanent"
classes={{ root: classes.drawerContainer, paper: classes.drawer }}
>
<div className={classes.drawerHeader}>
<IconButton onClick={() => history.push('/')}>
<ArrowBackIcon />
</IconButton>
<Typography variant="h6" color="inherit" noWrap>
{t('settingsTitle')}
</Typography>
</div>
<Divider />
<SideNav routes={routes} />
</Drawer>
</Hidden>
<div className={classes.content}>{children}</div>
</div>
);
};
export default OptionsLayout;
|
