diff options
| -rw-r--r-- | modern/src/reports/EventReportPage.js | 158 |
1 files changed, 81 insertions, 77 deletions
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 6dd287d9..7baf2205 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -1,16 +1,16 @@ import React, { useState } from 'react'; -import { DataGrid } from '@material-ui/data-grid'; import { - FormControl, InputLabel, Select, MenuItem, + FormControl, InputLabel, Select, MenuItem, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, } from '@material-ui/core'; -import { useTheme } from '@material-ui/core/styles'; import { useSelector } from 'react-redux'; -import { formatDate } from '../common/util/formatter'; +import { formatTime } from '../common/util/formatter'; import ReportFilter, { useFilterStyles } from './components/ReportFilter'; import { prefixString } from '../common/util/stringUtils'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; import ReportsMenu from './components/ReportsMenu'; +import usePersistedState from '../common/util/usePersistedState'; +import ColumnSelect from './components/ColumnSelect'; const typesArray = [ ['allEvents', 'eventAll'], @@ -34,11 +34,24 @@ const typesArray = [ ]; const typesMap = new Map(typesArray); -const Filter = ({ setItems }) => { +const columnsArray = [ + ['eventTime', 'positionFixTime'], + ['type', 'sharedType'], + ['geofenceId', 'sharedGeofence'], + ['maintenanceId', 'sharedMaintenance'], + ['alarm', 'positionAlarm'], +]; +const columnsMap = new Map(columnsArray); + +const EventReportPage = () => { const classes = useFilterStyles(); const t = useTranslation(); + const geofences = useSelector((state) => state.geofences.items); + + const [columns, setColumns] = usePersistedState('eventColumns', ['eventTime', 'type', 'alarm']); const [eventTypes, setEventTypes] = useState(['allEvents']); + const [items, setItems] = useState([]); const handleSubmit = async (deviceId, from, to, mail, headers) => { const query = new URLSearchParams({ @@ -58,83 +71,74 @@ const Filter = ({ setItems }) => { } }; - return ( - <ReportFilter handleSubmit={handleSubmit}> - <div className={classes.item}> - <FormControl variant="filled" fullWidth> - <InputLabel>{t('reportEventTypes')}</InputLabel> - <Select - value={eventTypes} - onChange={(event, child) => { - let values = event.target.value; - const clicked = child.props.value; - if (values.includes('allEvents') && values.length > 1) { - values = [clicked]; - } - setEventTypes(values); - }} - renderValue={(it) => (it.length > 1 ? it.length : it.length > 0 ? t(typesMap.get(it[0])) : it)} - multiple - > - {typesArray.map(([key, string]) => ( - <MenuItem value={key}>{t(string)}</MenuItem> - ))} - </Select> - </FormControl> - </div> - </ReportFilter> - ); -}; - -const EventReportPage = () => { - const theme = useTheme(); - const t = useTranslation(); - - const geofences = useSelector((state) => state.geofences.items); - - const [items, setItems] = useState([]); - - const formatGeofence = (value) => { - if (value > 0) { - const geofence = geofences[value]; - return geofence ? geofence.name : ''; + const formatValue = (item, key) => { + switch (key) { + case 'eventTime': + return formatTime(item[key]); + case 'type': + return t(prefixString('event', item[key])); + case 'geofenceId': + if (item[key] > 0) { + const geofence = geofences[item[key]]; + return geofence && geofence.name; + } + return null; + case 'maintenanceId': + return item[key] > 0 ? item[key] > 0 : null; + case 'alarm': + return item.attributes[key] ? t(prefixString('alarm', item.attributes[key])) : null; + default: + return item[key]; } - return null; }; - const columns = [{ - headerName: t('positionFixTime'), - field: 'serverTime', - type: 'dateTime', - width: theme.dimensions.columnWidthDate, - valueFormatter: ({ value }) => formatDate(value), - }, { - headerName: t('sharedType'), - field: 'type', - type: 'string', - width: theme.dimensions.columnWidthString, - valueFormatter: ({ value }) => t(prefixString('event', value)), - }, { - headerName: t('sharedGeofence'), - field: 'geofenceId', - width: theme.dimensions.columnWidthString, - valueFormatter: ({ value }) => formatGeofence(value), - }, { - headerName: t('sharedMaintenance'), - field: 'maintenanceId', - type: 'number', - width: theme.dimensions.columnWidthString, - }]; - return ( <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportEvents']}> - <Filter setItems={setItems} /> - <DataGrid - rows={items} - columns={columns} - hideFooter - autoHeight - /> + <ReportFilter handleSubmit={handleSubmit}> + <div className={classes.item}> + <FormControl variant="filled" fullWidth> + <InputLabel>{t('reportEventTypes')}</InputLabel> + <Select + value={eventTypes} + onChange={(event, child) => { + let values = event.target.value; + const clicked = child.props.value; + if (values.includes('allEvents') && values.length > 1) { + values = [clicked]; + } + setEventTypes(values); + }} + renderValue={(it) => (it.length > 1 ? it.length : it.length > 0 ? t(typesMap.get(it[0])) : it)} + multiple + > + {typesArray.map(([key, string]) => ( + <MenuItem value={key}>{t(string)}</MenuItem> + ))} + </Select> + </FormControl> + </div> + <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} /> + </ReportFilter> + <TableContainer> + <Table> + <TableHead> + <TableRow> + {columns.map((key) => (<TableCell>{t(columnsMap.get(key))}</TableCell>))} + </TableRow> + </TableHead> + <TableBody> + {items.map((item) => ( + <TableRow key={item.id}> + {columns.map((key) => ( + <TableCell> + {formatValue(item, key)} + </TableCell> + ))} + </TableRow> + ))} + </TableBody> + </Table> + </TableContainer> </PageLayout> ); }; |