diff options
author | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-02-22 10:48:22 +0530 |
---|---|---|
committer | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-02-22 10:48:22 +0530 |
commit | 9d6458439e3a842ff33eefc61258441ff1296975 (patch) | |
tree | 0ec099b064a134d5fe58a979f6b7eedcb156b4cd | |
parent | 1c057b9ee6efb05e8092ecbdbe2e68bc02322a4a (diff) | |
download | etbsa-traccar-web-9d6458439e3a842ff33eefc61258441ff1296975.tar.gz etbsa-traccar-web-9d6458439e3a842ff33eefc61258441ff1296975.tar.bz2 etbsa-traccar-web-9d6458439e3a842ff33eefc61258441ff1296975.zip |
added missed file
-rw-r--r-- | modern/src/admin/StatisticsPage.js | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/modern/src/admin/StatisticsPage.js b/modern/src/admin/StatisticsPage.js new file mode 100644 index 0000000..4aaec3b --- /dev/null +++ b/modern/src/admin/StatisticsPage.js @@ -0,0 +1,65 @@ + +import React, { useState } from 'react'; +import { 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'; + +const Filter = ({ setItems }) => { + + const handleSubmit = async (deviceId, from, to, _, headers) => { + const query = new URLSearchParams({ from, to }); + const response = await fetch(`/api/statistics?${query.toString()}`, { headers }); + if (response.ok) { + setItems(await response.json()); + } + } + return <ReportFilter handleSubmit={handleSubmit} showOnly showDevices/>; +} + +const StatisticsPage = () => { + + const [items, setItems] = useState([]); + + return ( + <ReportLayoutPage filter={<Filter setItems={setItems} />}> + <TableContainer component={Paper}> + <Table> + <TableHead> + <TableRow> + <TableCell>{t('statisticsCaptureTime')}</TableCell> + <TableCell>{t('statisticsActiveUsers')}</TableCell> + <TableCell>{t('statisticsActiveDevices')}</TableCell> + <TableCell>{t('statisticsRequests')}</TableCell> + <TableCell>{t('statisticsMessagesReceived')}</TableCell> + <TableCell>{t('statisticsMessagesStored')}</TableCell> + <TableCell>{t('notificatorMail')}</TableCell> + <TableCell>{t('notificatorSms')}</TableCell> + <TableCell>{t('statisticsGeocoder')}</TableCell> + <TableCell>{t('statisticsGeolocation')}</TableCell> + </TableRow> + </TableHead> + <TableBody> + {items.map((item) => ( + <TableRow key={item.id}> + <TableCell>{formatDate(item.captureTime)}</TableCell> + <TableCell>{item.activeUsers}</TableCell> + <TableCell>{item.activeDevices}</TableCell> + <TableCell>{item.requests}</TableCell> + <TableCell>{item.messagesReceived}</TableCell> + <TableCell>{item.messagesStored}</TableCell> + <TableCell>{item.mailSent}</TableCell> + <TableCell>{item.smsSent}</TableCell> + <TableCell>{item.geocoderRequests}</TableCell> + <TableCell>{item.geolocationRequests}</TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </TableContainer> + </ReportLayoutPage> + ); +} + +export default StatisticsPage; |