aboutsummaryrefslogtreecommitdiff
path: root/modern/src/admin/StatisticsPage.js
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/admin/StatisticsPage.js')
-rw-r--r--modern/src/admin/StatisticsPage.js76
1 files changed, 53 insertions, 23 deletions
diff --git a/modern/src/admin/StatisticsPage.js b/modern/src/admin/StatisticsPage.js
index 0137a1f1..b1504c87 100644
--- a/modern/src/admin/StatisticsPage.js
+++ b/modern/src/admin/StatisticsPage.js
@@ -3,8 +3,8 @@ import React, { useState } from 'react';
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 ReportLayout from '../reports/ReportLayout';
import moment from 'moment';
+import OptionsLayout from '../settings/OptionsLayout';
const Filter = ({ setItems }) => {
const [period, setPeriod] = useState('today');
@@ -20,24 +20,36 @@ const Filter = ({ setItems }) => {
selectedTo = moment().endOf('day');
break;
case 'yesterday':
- selectedFrom = moment().subtract(1, 'day').startOf('day');
- selectedTo = moment().subtract(1, 'day').endOf('day');
+ 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');
+ 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');
+ selectedFrom = moment()
+ .subtract(1, 'month')
+ .startOf('month');
+ selectedTo = moment()
+ .subtract(1, 'month')
+ .endOf('month');
break;
default:
selectedFrom = from;
@@ -45,18 +57,23 @@ const Filter = ({ setItems }) => {
break;
}
- const query = new URLSearchParams({ from: selectedFrom.toISOString(), to: selectedTo.toISOString() });
- const response = await fetch(`/api/statistics?${query.toString()}`, { Accept: 'application/json' });
+ 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 (
<>
<FormControl variant="filled" margin="normal" fullWidth>
<InputLabel>{t('reportPeriod')}</InputLabel>
- <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
+ <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>
@@ -73,8 +90,11 @@ const Filter = ({ setItems }) => {
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 />
+ onChange={e =>
+ setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))
+ }
+ fullWidth
+ />
)}
{period === 'custom' && (
<TextField
@@ -83,20 +103,30 @@ const Filter = ({ setItems }) => {
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 />
+ onChange={e =>
+ setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))
+ }
+ fullWidth
+ />
)}
- <Button variant="contained" color="primary" onClick={handleClick} fullWidth>{t('reportShow')}</Button>
+ <Button
+ variant="contained"
+ color="primary"
+ onClick={handleClick}
+ fullWidth
+ >
+ {t('reportShow')}
+ </Button>
</>
- )
-}
+ );
+};
const StatisticsPage = () => {
-
const [items, setItems] = useState([]);
return (
- <ReportLayout filter={<Filter setItems={setItems} />}>
+ <OptionsLayout>
+ <Filter setItems={setItems} />
<TableContainer component={Paper}>
<Table>
<TableHead>
@@ -114,7 +144,7 @@ const StatisticsPage = () => {
</TableRow>
</TableHead>
<TableBody>
- {items.map((item) => (
+ {items.map(item => (
<TableRow key={item.id}>
<TableCell>{formatDate(item.captureTime)}</TableCell>
<TableCell>{item.activeUsers}</TableCell>
@@ -131,8 +161,8 @@ const StatisticsPage = () => {
</TableBody>
</Table>
</TableContainer>
- </ReportLayout>
+ </OptionsLayout>
);
-}
+};
export default StatisticsPage;