aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--modern/src/reports/EventReportPage.js2
-rw-r--r--modern/src/reports/ReportFilter.js130
-rw-r--r--modern/src/reports/ReportHeader.js0
-rw-r--r--modern/src/reports/ReportLayoutPage.js139
4 files changed, 163 insertions, 108 deletions
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index a14fc930..daa4ab8b 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -30,7 +30,7 @@ const Filter = ({ setItems }) => {
return (
<ReportFilter handleSubmit={handleSubmit}>
- <FormControl variant="filled" margin="normal" fullWidth>
+ <FormControl variant="filled" fullWidth>
<InputLabel>{t('reportEventTypes')}</InputLabel>
<Select value={eventTypes} onChange={e => setEventTypes(e.target.value)} multiple>
<MenuItem value="allEvents">{t('eventAll')}</MenuItem>
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 164dbf9b..e6164e25 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, ButtonGroup } from '@material-ui/core';
+import { FormControl, InputLabel, Select, MenuItem, Button, TextField, ButtonGroup, Grid } from '@material-ui/core';
import t from '../common/localization';
import { useSelector } from 'react-redux';
import moment from 'moment';
@@ -57,54 +57,86 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
return (
<>
- <FormControl variant="filled" margin="normal" fullWidth>
- <InputLabel>{t('reportDevice')}</InputLabel>
- <Select value={deviceId} onChange={(e) => setDeviceId(e.target.value)}>
- {devices.map((device) => (
- <MenuItem value={device.id}>{device.name}</MenuItem>
- ))}
- </Select>
- </FormControl>
- <FormControl variant="filled" margin="normal" fullWidth>
- <InputLabel>{t('reportPeriod')}</InputLabel>
- <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
- <MenuItem value="today">{t('reportToday')}</MenuItem>
- <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
- <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
- <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
- <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
- <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
- <MenuItem value="custom">{t('reportCustom')}</MenuItem>
- </Select>
- </FormControl>
- {period === 'custom' && (
- <TextField
- margin="normal"
- variant="filled"
- label={t('reportFrom')}
- type="datetime-local"
- value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
- onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
- fullWidth />
- )}
- {period === 'custom' && (
- <TextField
- margin="normal"
- variant="filled"
- label={t('reportTo')}
- type="datetime-local"
- value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
- onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
- fullWidth />
- )}
- {children}
- <FormControl margin="normal" fullWidth>
- <ButtonGroup color="primary" orientation="vertical" disabled={!deviceId}>
- <Button onClick={() => handleClick(false, true)}>{t('reportShow')}</Button>
- {!showOnly && <Button onClick={() => handleClick(false, false)}>{t('reportExport')}</Button>}
- {!showOnly && <Button onClick={() => handleClick(true, false)}>{t('reportEmail')}</Button>}
- </ButtonGroup>
- </FormControl>
+ <Grid container spacing={3} direction='column'>
+ <Grid item container spacing={2}>
+ <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
+ <FormControl variant="filled" fullWidth>
+ <InputLabel>{t('reportDevice')}</InputLabel>
+ <Select value={deviceId} onChange={(e) => setDeviceId(e.target.value)}>
+ {devices.map((device) => (
+ <MenuItem value={device.id}>{device.name}</MenuItem>
+ ))}
+ </Select>
+ </FormControl>
+ </Grid>
+ <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
+ <FormControl variant="filled" fullWidth>
+ <InputLabel>{t('reportPeriod')}</InputLabel>
+ <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
+ <MenuItem value="today">{t('reportToday')}</MenuItem>
+ <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
+ <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
+ <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
+ <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
+ <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
+ <MenuItem value="custom">{t('reportCustom')}</MenuItem>
+ </Select>
+ </FormControl>
+ </Grid>
+ {period === 'custom' && <Grid item xs={12} sm={3}>
+ <TextField
+ variant="filled"
+ label={t('reportFrom')}
+ type="datetime-local"
+ value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
+ onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+ fullWidth />
+ </Grid>}
+ {period === 'custom' && <Grid item xs={12} sm={3}>
+ <TextField
+ variant="filled"
+ label={t('reportTo')}
+ type="datetime-local"
+ value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
+ onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+ fullWidth />
+ </Grid>}
+ </Grid>
+ <Grid item container spacing={2}>
+ {children && <Grid item xs={12} sm={6}>
+ {children}
+ </Grid>}
+ <Grid item xs={4} sm={!showOnly ? 2 : 4}>
+ <Button
+ onClick={() => handleClick(false, true)}
+ variant='outlined'
+ color='secondary'
+ fullWidth>
+ {t('reportShow')}
+ </Button>
+ </Grid>
+ <Grid item xs={4} sm={2}>
+ {!showOnly &&
+ <Button
+ onClick={() => handleClick(false, false)}
+ variant='outlined'
+ color='secondary'
+ fullWidth>
+ {t('reportExport')}
+ </Button>}
+ </Grid>
+ <Grid item xs={4} sm={2}>
+ {!showOnly &&
+ <Button
+ onClick={() => handleClick(true, false)}
+ variant='outlined'
+ color='secondary'
+ fullWidth>
+ {t('reportEmail')}
+ </Button>}
+ </Grid>
+ </Grid>
+ </Grid>
</>
);
}
diff --git a/modern/src/reports/ReportHeader.js b/modern/src/reports/ReportHeader.js
deleted file mode 100644
index e69de29b..00000000
--- a/modern/src/reports/ReportHeader.js
+++ /dev/null
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index cdce2b3c..ae7b3daf 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -19,12 +19,17 @@ const useStyles = makeStyles(theme => ({
height: '100%',
display: 'flex',
},
+ drawer: {
+ width: 360,
+ [theme.breakpoints.down("md")]: {
+ width: 0,
+ }
+ },
content: {
flex: 1,
- overflow: 'auto',
- padding: theme.spacing(2),
+ padding: theme.spacing(3),
},
- drawer: {
+ drawerPaper: {
width: 360,
[theme.breakpoints.down("md")]: {
width: 320,
@@ -36,6 +41,11 @@ const useStyles = makeStyles(theme => ({
alignItems: 'center',
padding: theme.spacing(0, 1),
},
+ toolbar: {
+ [theme.breakpoints.down("md")]: {
+ ...theme.mixins.toolbar,
+ }
+ },
form: {
padding: theme.spacing(1, 2, 2),
},
@@ -47,7 +57,6 @@ const ReportLayoutPage = ({ children, filter }) => {
const theme = useTheme();
const matchesMD = useMediaQuery(theme.breakpoints.down("md"));
const [openDrawer, setOpenDrawer] = useState(false);
- const [value, setValue] = useState(0);
const routes = [
{ name: t('reportRoute'), link: '/reports/route', icon: <TimelineIcon />, activeIndex: 0 },
@@ -58,64 +67,78 @@ const ReportLayoutPage = ({ children, filter }) => {
{ name: t('reportChart'), link: '/reports/chart', icon: <TrendingUpIcon />, activeIndex: 5 },
];
- const handleClick = (route) => {
+ const navigationList = (
+ <List disablePadding>
+ {routes.map(route => (
+ <ListItem
+ key={`${route}${route.activeIndex}`}
+ button
+ onClick={() => handleListItemClick(route)}
+ >
+ <ListItemIcon>
+ {route.icon}
+ </ListItemIcon>
+ <ListItemText primary={route.name} />
+ </ListItem>
+ ))}
+ </List>
+ );
+
+ const drawerHeader = (
+ <>
+ <div className={classes.drawerHeader}>
+ <IconButton>
+ <ArrowBackIcon />
+ </IconButton>
+ <Typography variant="h6" color='primary' noWrap>
+ Reports
+ </Typography>
+ </div>
+ <Divider />
+ </>
+ );
+
+ const appBar = (
+ <AppBar position="fixed">
+ <Toolbar>
+ <IconButton
+ color="inherit"
+ aria-label="open drawer"
+ edge="start"
+ onClick={() => setOpenDrawer(!openDrawer)}
+ className={classes.menuButton}
+ >
+ <MenuIcon />
+ </IconButton>
+ <Typography variant="h6" noWrap>
+ Reports
+ </Typography>
+ </Toolbar>
+ </AppBar>
+ );
+
+ const handleListItemClick = (route) => {
history.push(route.link);
}
- console.log('rendering Layout, ', value);
+
return (
<div className={classes.root}>
- {matchesMD && <AppBar position="fixed">
- <Toolbar>
- <IconButton
- color="inherit"
- aria-label="open drawer"
- edge="start"
- onClick={() => setOpenDrawer(!openDrawer)}
- className={classes.menuButton}
- >
- <MenuIcon />
- </IconButton>
- <Typography variant="h6" noWrap>
- Reports
- </Typography>
- </Toolbar>
- </AppBar>
- }
- <Drawer
- variant={matchesMD ? "temporary": "permanent"}
- open={openDrawer}
- onClose={() => setOpenDrawer(!openDrawer)}
- classes={{ paper: classes.drawer }}
- >
- { !matchesMD &&
- <>
- <div className={classes.drawerHeader}>
- <IconButton>
- <ArrowBackIcon />
- </IconButton>
- <Typography variant="h6" color='primary' noWrap>
- Reports
- </Typography>
- </div>
- <Divider />
- </>
- }
- <List disablePadding>
- {routes.map(route => (
- <ListItem
- key={`${route}${route.activeIndex}`}
- button
- selected={value === route.activeIndex}
- onClick={() => { setValue(route.activeIndex); handleClick(route)}}
- >
- <ListItemIcon>
- {route.icon}
- </ListItemIcon>
- <ListItemText primary={route.name} />
- </ListItem>
- ))}
- </List>
- </Drawer>
+ { matchesMD && appBar }
+ <nav className={classes.drawer}>
+ <Drawer
+ variant={matchesMD ? "temporary": "permanent"}
+ open={openDrawer}
+ onClose={() => setOpenDrawer(!openDrawer)}
+ classes={{ paper: classes.drawerPaper }}
+ >
+ { !matchesMD && drawerHeader }
+ { navigationList }
+ </Drawer>
+ </nav>
+ <div className={classes.content}>
+ <div className={classes.toolbar} />
+ {filter}
+ </div>
</div>
);
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 15:05:18 +0000