diff options
Diffstat (limited to 'modern')
-rw-r--r-- | modern/src/App.js | 38 | ||||
-rw-r--r-- | modern/src/MainToolbar.js | 70 | ||||
-rw-r--r-- | modern/src/reports/EventReportPage.js | 28 | ||||
-rw-r--r-- | modern/src/reports/ReportFilter.js | 19 |
4 files changed, 65 insertions, 90 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index edfaa55b..6ea74297 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Switch, Route } from 'react-router-dom'; +import { Switch, Route } from 'react-router-dom' import CssBaseline from '@material-ui/core/CssBaseline'; import MainPage from './MainPage'; import LoginPage from './LoginPage'; @@ -22,30 +22,22 @@ const App = () => { <CssBaseline /> <SocketController /> <Switch> - <Route exact path="/" component={MainPage} /> - <Route exact path="/login" component={LoginPage} /> - <Route exact path="/position/:id?" component={PositionPage} /> - <Route exact path="/user/:id?" component={UserPage} /> - <Route exact path="/device/:id?" component={DevicePage} /> - <Route exact path="/reports/route" component={RouteReportPage} /> - <Route exact path="/reports/event" component={EventReportPage} /> - <Route - exact - path="/settings/notifications" - component={NotificationsPage} - /> - <Route - exact - path="/settings/notification/:id?" - component={NotificationPage} - /> - <Route exact path="/settings/groups" component={GroupsPage} /> - <Route exact path="/settings/group/:id?" component={GroupPage} /> - <Route exact path="/admin/server" component={ServerPage} /> - <Route exact path="/admin/users" component={UsersPage} /> + <Route exact path='/' component={MainPage} /> + <Route exact path='/login' component={LoginPage} /> + <Route exact path='/position/:id?' component={PositionPage} /> + <Route exact path='/user/:id?' component={UserPage} /> + <Route exact path='/device/:id?' component={DevicePage} /> + <Route exact path='/reports/route' component={RouteReportPage} /> + <Route exact path='/settings/notifications' component={NotificationsPage} /> + <Route exact path='/settings/notification/:id?' component={NotificationPage} /> + <Route exact path='/settings/groups' component={GroupsPage} /> + <Route exact path='/settings/group/:id?' component={GroupPage} /> + <Route exact path='/admin/server' component={ServerPage} /> + <Route exact path='/admin/users' component={UsersPage} /> + <Route exact path='/reports/event' component={EventReportPage} /> </Switch> </> ); -}; +} export default App; diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 7cca74ff..897fd37e 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -31,15 +31,15 @@ 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,11 @@ 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' }); @@ -72,7 +64,7 @@ const MainToolbar = () => { dispatch(sessionActions.updateUser(null)); history.push('/login'); } - }; + } return ( <> @@ -81,16 +73,13 @@ 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}> @@ -99,8 +88,7 @@ const MainToolbar = () => { className={classes.list} role="button" onClick={closeDrawer} - onKeyDown={closeDrawer} - > + onKeyDown={closeDrawer}> <List> <ListItem button onClick={() => history.push('/')}> <ListItemIcon> @@ -110,7 +98,12 @@ const MainToolbar = () => { </ListItem> </List> <Divider /> - <List subheader={<ListSubheader>{t('reportTitle')}</ListSubheader>}> + <List + subheader={ + <ListSubheader> + {t('reportTitle')} + </ListSubheader> + }> <ListItem button onClick={() => history.push('/reports/route')}> <ListItemIcon> <TimelineIcon /> @@ -149,21 +142,19 @@ const MainToolbar = () => { </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')} /> </ListItem> - <ListItem - button - onClick={() => history.push('/settings/notifications')} - > + <ListItem button onClick={() => history.push('/settings/notifications')}> <ListItemIcon> <NotificationsIcon /> </ListItemIcon> @@ -179,7 +170,12 @@ const MainToolbar = () => { {adminEnabled && ( <> <Divider /> - <List subheader={<ListSubheader>{t('userAdmin')}</ListSubheader>}> + <List + subheader={ + <ListSubheader> + {t('userAdmin')} + </ListSubheader> + }> <ListItem button onClick={() => history.push('/admin/server')}> <ListItemIcon> <StorageIcon /> @@ -205,6 +201,6 @@ const MainToolbar = () => { </Drawer> </> ); -}; +} export default MainToolbar; diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 0a451c13..4134de3d 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -1,21 +1,11 @@ import React, { useState } from 'react'; import MainToolbar from '../MainToolbar'; -import { - Grid, - TableContainer, - Table, - TableRow, - TableCell, - TableHead, - TableBody, - Paper, - makeStyles, -} from '@material-ui/core'; +import { Grid, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper, makeStyles } from '@material-ui/core'; import t from '../common/localization'; import { formatPosition } from '../common/formatter'; import ReportFilter from './ReportFilter'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ root: { height: '100%', display: 'flex', @@ -41,14 +31,14 @@ const EventReportPage = () => { from: from.toISOString(), to: to.toISOString(), }); - fetch(`/api/reports/events?${query.toString()}`, { - headers: { Accept: 'application/json' }, - }).then((response) => { - if (response.ok) { - response.json().then(setData); + + fetch(`/api/reports/events?${query.toString()}`, { headers: { Accept: 'application/json' } }) + .then((response) => { + if (response.ok) { + response.json().then(setData); } }); - }; + } return ( <div className={classes.root}> @@ -90,6 +80,6 @@ const EventReportPage = () => { </div> </div> ); -}; +} export default EventReportPage; diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index 55f73e36..6f248048 100644 --- a/modern/src/reports/ReportFilter.js +++ b/modern/src/reports/ReportFilter.js @@ -1,12 +1,5 @@ import React, { useState } from 'react'; -import { - FormControl, - InputLabel, - Select, - MenuItem, - Button, - TextField, -} from '@material-ui/core'; +import { FormControl, InputLabel, Select, MenuItem, Button, TextField } from '@material-ui/core'; import t from '../common/localization'; import { useSelector } from 'react-redux'; import moment from 'moment'; @@ -17,6 +10,7 @@ const ReportFilter = (props) => { const [period, setPeriod] = useState('today'); const [from, setFrom] = useState(moment().subtract(1, 'hour')); const [to, setTo] = useState(moment()); + const handleShow = () => { let selectedFrom; let selectedTo; @@ -52,7 +46,9 @@ const ReportFilter = (props) => { } props.handleSubmit(deviceId, selectedFrom, selectedTo); - }; + + } + return ( <> <FormControl variant="filled" margin="normal" fullWidth> @@ -114,6 +110,7 @@ const ReportFilter = (props) => { </FormControl> </> ); -}; + +} -export default ReportFilter; +export default ReportFilter;
\ No newline at end of file |