aboutsummaryrefslogtreecommitdiff
path: root/modern/src/MainToolbar.js
diff options
context:
space:
mode:
authorAshutosh Bishnoi <mail2bishnoi@gmail.com>2020-10-30 14:02:16 +0530
committerAshutosh Bishnoi <mail2bishnoi@gmail.com>2020-10-30 14:02:16 +0530
commitf75cf89d3b4bdb160b4cc7f0a938fe074aed7192 (patch)
tree3bddaca13e0f3aa132a22b8ad755b1b116ea72cc /modern/src/MainToolbar.js
parentdac214c3ac6066a6f23cf92807da89cc1a86c105 (diff)
downloadtrackermap-web-f75cf89d3b4bdb160b4cc7f0a938fe074aed7192.tar.gz
trackermap-web-f75cf89d3b4bdb160b4cc7f0a938fe074aed7192.tar.bz2
trackermap-web-f75cf89d3b4bdb160b4cc7f0a938fe074aed7192.zip
Added Event report with Report Filter as a seperate component
Diffstat (limited to 'modern/src/MainToolbar.js')
-rw-r--r--modern/src/MainToolbar.js176
1 files changed, 90 insertions, 86 deletions
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 374c694c..46d46496 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -1,45 +1,45 @@
-import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { makeStyles } from '@material-ui/core/styles';
-import { useDispatch, useSelector } from 'react-redux';
-import { sessionActions } from './store';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
-import Drawer from '@material-ui/core/Drawer';
-import List from '@material-ui/core/List';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import Divider from '@material-ui/core/Divider';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import MapIcon from '@material-ui/icons/Map';
-import BarChartIcon from '@material-ui/icons/BarChart';
-import PeopleIcon from '@material-ui/icons/People';
-import StorageIcon from '@material-ui/icons/Storage';
-import PersonIcon from '@material-ui/icons/Person';
-import NotificationsIcon from '@material-ui/icons/Notifications';
-import TimelineIcon from '@material-ui/icons/Timeline';
-import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
-import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
-import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
-import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
-import TrendingUpIcon from '@material-ui/icons/TrendingUp';
-import FolderIcon from '@material-ui/icons/Folder';
-import t from './common/localization';
+import React, { useState } from "react";
+import { useHistory } from "react-router-dom";
+import { makeStyles } from "@material-ui/core/styles";
+import { useDispatch, useSelector } from "react-redux";
+import { sessionActions } from "./store";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import Button from "@material-ui/core/Button";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+import Drawer from "@material-ui/core/Drawer";
+import List from "@material-ui/core/List";
+import ListSubheader from "@material-ui/core/ListSubheader";
+import Divider from "@material-ui/core/Divider";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import MapIcon from "@material-ui/icons/Map";
+import BarChartIcon from "@material-ui/icons/BarChart";
+import PeopleIcon from "@material-ui/icons/People";
+import StorageIcon from "@material-ui/icons/Storage";
+import PersonIcon from "@material-ui/icons/Person";
+import NotificationsIcon from "@material-ui/icons/Notifications";
+import TimelineIcon from "@material-ui/icons/Timeline";
+import PauseCircleFilledIcon from "@material-ui/icons/PauseCircleFilled";
+import PlayCircleFilledIcon from "@material-ui/icons/PlayCircleFilled";
+import NotificationsActiveIcon from "@material-ui/icons/NotificationsActive";
+import FormatListBulletedIcon from "@material-ui/icons/FormatListBulleted";
+import TrendingUpIcon from "@material-ui/icons/TrendingUp";
+import FolderIcon from "@material-ui/icons/Folder";
+import t from "./common/localization";
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
flex: {
- flexGrow: 1
+ flexGrow: 1,
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
list: {
- width: 250
+ width: 250,
},
menuButton: {
marginLeft: -12,
@@ -52,19 +52,27 @@ const MainToolbar = () => {
const [drawer, setDrawer] = useState(false);
const classes = useStyles();
const history = useHistory();
- const adminEnabled = useSelector(state => state.session.user && state.session.user.administrator);
- const userId = useSelector(state => state.session.user && state.session.user.id);
+ const adminEnabled = useSelector(
+ (state) => state.session.user && state.session.user.administrator
+ );
+ const userId = useSelector(
+ (state) => state.session.user && state.session.user.id
+ );
- const openDrawer = () => { setDrawer(true) }
- const closeDrawer = () => { setDrawer(false) }
+ const openDrawer = () => {
+ setDrawer(true);
+ };
+ const closeDrawer = () => {
+ setDrawer(false);
+ };
const handleLogout = async () => {
- const response = await fetch('/api/session', { method: 'DELETE' });
+ const response = await fetch("/api/session", { method: "DELETE" });
if (response.ok) {
dispatch(sessionActions.updateUser(null));
- history.push('/login');
+ history.push("/login");
}
- }
+ };
return (
<>
@@ -73,13 +81,16 @@ const MainToolbar = () => {
<IconButton
className={classes.menuButton}
color="inherit"
- onClick={openDrawer}>
+ onClick={openDrawer}
+ >
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" className={classes.flex}>
Traccar
- </Typography>
- <Button color="inherit" onClick={handleLogout}>{t('loginLogout')}</Button>
+ </Typography>
+ <Button color="inherit" onClick={handleLogout}>
+ {t("loginLogout")}
+ </Button>
</Toolbar>
</AppBar>
<Drawer open={drawer} onClose={closeDrawer}>
@@ -88,111 +99,104 @@ const MainToolbar = () => {
className={classes.list}
role="button"
onClick={closeDrawer}
- onKeyDown={closeDrawer}>
+ onKeyDown={closeDrawer}
+ >
<List>
- <ListItem button onClick={() => history.push('/')}>
+ <ListItem button onClick={() => history.push("/")}>
<ListItemIcon>
<MapIcon />
</ListItemIcon>
- <ListItemText primary={t('mapTitle')} />
+ <ListItemText primary={t("mapTitle")} />
</ListItem>
</List>
<Divider />
- <List
- subheader={
- <ListSubheader>
- {t('reportTitle')}
- </ListSubheader>
- }>
- <ListItem button onClick={() => history.push('/reports/route')}>
+ <List subheader={<ListSubheader>{t("reportTitle")}</ListSubheader>}>
+ <ListItem button onClick={() => history.push("/reports/route")}>
<ListItemIcon>
<TimelineIcon />
</ListItemIcon>
- <ListItemText primary={t('reportRoute')} />
+ <ListItemText primary={t("reportRoute")} />
</ListItem>
- <ListItem button disabled>
+ <ListItem button onClick={() => history.push("/reports/event")}>
<ListItemIcon>
<NotificationsActiveIcon />
</ListItemIcon>
- <ListItemText primary={t('reportEvents')} />
+ <ListItemText primary={t("reportEvents")} />
</ListItem>
<ListItem button disabled>
<ListItemIcon>
<PlayCircleFilledIcon />
</ListItemIcon>
- <ListItemText primary={t('reportTrips')} />
+ <ListItemText primary={t("reportTrips")} />
</ListItem>
<ListItem button disabled>
<ListItemIcon>
<PauseCircleFilledIcon />
</ListItemIcon>
- <ListItemText primary={t('reportStops')} />
+ <ListItemText primary={t("reportStops")} />
</ListItem>
<ListItem button disabled>
<ListItemIcon>
<FormatListBulletedIcon />
</ListItemIcon>
- <ListItemText primary={t('reportSummary')} />
+ <ListItemText primary={t("reportSummary")} />
</ListItem>
<ListItem button disabled>
<ListItemIcon>
<TrendingUpIcon />
</ListItemIcon>
- <ListItemText primary={t('reportChart')} />
+ <ListItemText primary={t("reportChart")} />
</ListItem>
</List>
<Divider />
- <List
- subheader={
- <ListSubheader>
- {t('settingsTitle')}
- </ListSubheader>
- }>
- <ListItem button disabled={!userId} onClick={() => history.push(`/user/${userId}`)}>
+ <List subheader={<ListSubheader>{t("settingsTitle")}</ListSubheader>}>
+ <ListItem
+ button
+ disabled={!userId}
+ onClick={() => history.push(`/user/${userId}`)}
+ >
<ListItemIcon>
<PersonIcon />
</ListItemIcon>
- <ListItemText primary={t('settingsUser')} />
+ <ListItemText primary={t("settingsUser")} />
</ListItem>
- <ListItem button onClick={() => history.push('/settings/notifications')}>
+ <ListItem
+ button
+ onClick={() => history.push("/settings/notifications")}
+ >
<ListItemIcon>
<NotificationsIcon />
</ListItemIcon>
- <ListItemText primary={t('sharedNotifications')} />
+ <ListItemText primary={t("sharedNotifications")} />
</ListItem>
- <ListItem button onClick={() => history.push('/settings/groups')}>
+ <ListItem button onClick={() => history.push("/settings/groups")}>
<ListItemIcon>
<FolderIcon />
</ListItemIcon>
- <ListItemText primary={t('settingsGroups')} />
+ <ListItemText primary={t("settingsGroups")} />
</ListItem>
</List>
{adminEnabled && (
<>
<Divider />
- <List
- subheader={
- <ListSubheader>
- {t('userAdmin')}
- </ListSubheader>
- }>
- <ListItem button onClick={() => history.push('/admin/server')}>
+ <List subheader={<ListSubheader>{t("userAdmin")}</ListSubheader>}>
+ <ListItem button onClick={() => history.push("/admin/server")}>
<ListItemIcon>
<StorageIcon />
</ListItemIcon>
- <ListItemText primary={t('settingsServer')} />
+ <ListItemText primary={t("settingsServer")} />
</ListItem>
- <ListItem button onClick={() => history.push('/admin/users')}>
+ <ListItem button onClick={() => history.push("/admin/users")}>
<ListItemIcon>
<PeopleIcon />
</ListItemIcon>
- <ListItemText primary={t('settingsUsers')} />
+ <ListItemText primary={t("settingsUsers")} />
</ListItem>
<ListItem button disabled>
<ListItemIcon>
<BarChartIcon />
</ListItemIcon>
- <ListItemText primary={t('statisticsTitle')} />
+ <ListItemText primary={t("statisticsTitle")} />
</ListItem>
</List>
</>
@@ -201,6 +205,6 @@ const MainToolbar = () => {
</Drawer>
</>
);
-}
+};
export default MainToolbar;