diff options
| -rw-r--r-- | modern/src/admin/StatisticsPage.js | 85 | ||||
| -rw-r--r-- | modern/src/reports/ReportFilter.js | 22 |
2 files changed, 89 insertions, 18 deletions
diff --git a/modern/src/admin/StatisticsPage.js b/modern/src/admin/StatisticsPage.js index 4aaec3b0..b7fb4748 100644 --- a/modern/src/admin/StatisticsPage.js +++ b/modern/src/admin/StatisticsPage.js @@ -1,21 +1,94 @@ import React, { useState } from 'react'; -import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core'; +import { FormControl, InputLabel,Select, MenuItem, TextField, Button, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core'; import t from '../common/localization'; import { formatDate } from '../common/formatter'; -import ReportFilter from '../reports/ReportFilter'; import ReportLayoutPage from '../reports/ReportLayoutPage'; +import moment from 'moment'; const Filter = ({ setItems }) => { + const [period, setPeriod] = useState('today'); + const [from, setFrom] = useState(moment().subtract(1, 'hour')); + const [to, setTo] = useState(moment()); - const handleSubmit = async (deviceId, from, to, _, headers) => { - const query = new URLSearchParams({ from, to }); - const response = await fetch(`/api/statistics?${query.toString()}`, { headers }); + const handleClick = async () => { + let selectedFrom; + let selectedTo; + switch (period) { + case 'today': + selectedFrom = moment().startOf('day'); + selectedTo = moment().endOf('day'); + break; + case 'yesterday': + selectedFrom = moment().subtract(1, 'day').startOf('day'); + selectedTo = moment().subtract(1, 'day').endOf('day'); + break; + case 'thisWeek': + selectedFrom = moment().startOf('week'); + selectedTo = moment().endOf('week'); + break; + case 'previousWeek': + selectedFrom = moment().subtract(1, 'week').startOf('week'); + selectedTo = moment().subtract(1, 'week').endOf('week'); + break; + case 'thisMonth': + selectedFrom = moment().startOf('month'); + selectedTo = moment().endOf('month'); + break; + case 'previousMonth': + selectedFrom = moment().subtract(1, 'month').startOf('month'); + selectedTo = moment().subtract(1, 'month').endOf('month'); + break; + default: + selectedFrom = from; + selectedTo = to; + break; + } + + const query = new URLSearchParams({ from: selectedFrom.toISOString(), to: selectedTo.toISOString() }); + const response = await fetch(`/api/statistics?${query.toString()}`, { Accept: 'application/json' }); if (response.ok) { setItems(await response.json()); } } - return <ReportFilter handleSubmit={handleSubmit} showOnly showDevices/>; + + return ( + <> + <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 /> + )} + <Button variant="contained" color="primary" onClick={handleClick} fullWidth>{t('reportShow')}</Button> + </> + ) } const StatisticsPage = () => { diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index 48da114f..9af3f7dc 100644 --- a/modern/src/reports/ReportFilter.js +++ b/modern/src/reports/ReportFilter.js @@ -4,7 +4,7 @@ import t from '../common/localization'; import { useSelector } from 'react-redux'; import moment from 'moment'; -const ReportFilter = ({ children, handleSubmit, showOnly, showDevices }) => { +const ReportFilter = ({ children, handleSubmit, showOnly }) => { const devices = useSelector(state => Object.values(state.devices.items)); const [deviceId, setDeviceId] = useState(); const [period, setPeriod] = useState('today'); @@ -57,16 +57,14 @@ const ReportFilter = ({ children, handleSubmit, showOnly, showDevices }) => { return ( <> - {!showDevices && ( - <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('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)}> @@ -101,7 +99,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly, showDevices }) => { )} {children} <FormControl margin="normal" fullWidth> - <ButtonGroup color="primary" orientation="vertical" disabled={ showDevices ? !showDevices : !deviceId }> + <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>} |