diff options
| -rw-r--r-- | modern/src/reports/EventReportPage.js | 100 | ||||
| -rw-r--r-- | modern/src/reports/ReportLayoutPage.js (renamed from modern/src/reports/ReportView.js) | 11 | ||||
| -rw-r--r-- | modern/src/reports/RouteReportPage.js | 41 |
3 files changed, 73 insertions, 79 deletions
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index cb3a06aa..e9bca4ef 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -4,57 +4,57 @@ import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core'; import t from '../common/localization'; import { formatPosition } from '../common/formatter'; import ReportFilter from './ReportFilter'; -import ReportView from './ReportView'; +import ReportLayoutPage from './ReportLayoutPage'; -const EventReportPage = () => { +const ReportFilterForm = ({ onResult }) => { + const [eventType, setEventType] = useState(['allEvents']); - const ReportFilterForm = ({ onResult }) => { - const [eventType, setEventType] = useState(['allEvents']); + const handleSubmit = async (deviceId, from, to) => { + const query = new URLSearchParams({ + deviceId, + from: from.toISOString(), + to: to.toISOString(), + }); + eventType.map(t=>query.append('type',t)); + const response = await fetch(`/api/reports/events?${query.toString()}`, { headers: { Accept: 'application/json' } }); + if(response.ok) { + onResult(await response.json()); + } + } + return ( + <ReportFilter handleSubmit={handleSubmit}> + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('reportEventTypes')}</InputLabel> + <Select value={eventType} onChange={(e) => setEventType(e.target.value)} multiple> + <MenuItem value="allEvents">{t('eventAll')}</MenuItem> + <MenuItem value="deviceOnline">{t('eventDeviceOnline')}</MenuItem> + <MenuItem value="deviceUnknown">{t('eventDeviceUnknown')}</MenuItem> + <MenuItem value="deviceOffline">{t('eventDeviceOffline')}</MenuItem> + <MenuItem value="deviceInactive">{t('eventDeviceInactive')}</MenuItem> + <MenuItem value="deviceMoving">{t('eventDeviceMoving')}</MenuItem> + <MenuItem value="deviceStopped">{t('eventDeviceStopped')}</MenuItem> + <MenuItem value="deviceOverspeed">{t('eventDeviceOverspeed')}</MenuItem> + <MenuItem value="deviceFuelDrop">{t('eventDeviceFuelDrop')}</MenuItem> + <MenuItem value="commandResult">{t('eventCommandResult')}</MenuItem> + <MenuItem value="geofenceEnter">{t('eventGeofenceEnter')}</MenuItem> + <MenuItem value="geofenceExit">{t('eventGeofenceExit')}</MenuItem> + <MenuItem value="alarm">{t('eventAlarm')}</MenuItem> + <MenuItem value="ignitionOn">{t('eventIgnitionOn')}</MenuItem> + <MenuItem value="ignitionOff">{t('eventIgnitionOff')}</MenuItem> + <MenuItem value="maintenance">{t('eventMaintenance')}</MenuItem> + <MenuItem value="textMessage">{t('eventTextMessage')}</MenuItem> + <MenuItem value="driverChanged">{t('eventDriverChanged')}</MenuItem> + </Select> + </FormControl> + </ReportFilter> + ); +} - const handleSubmit = async (deviceId, from, to) => { - const query = new URLSearchParams({ - deviceId, - from: from.toISOString(), - to: to.toISOString(), - }); - eventType.map(t=>query.append('type',t)); - const response = await fetch(`/api/reports/events?${query.toString()}`, { headers: { Accept: 'application/json' } }); - if(response.ok) { - onResult(await response.json()); - } - } - return ( - <ReportFilter handleSubmit={handleSubmit}> - <FormControl variant="filled" margin="normal" fullWidth> - <InputLabel>{t('reportEventTypes')}</InputLabel> - <Select value={eventType} onChange={(e) => setEventType(e.target.value)} multiple> - <MenuItem value="allEvents">{t('eventAll')}</MenuItem> - <MenuItem value="deviceOnline">{t('eventDeviceOnline')}</MenuItem> - <MenuItem value="deviceUnknown">{t('eventDeviceUnknown')}</MenuItem> - <MenuItem value="deviceOffline">{t('eventDeviceOffline')}</MenuItem> - <MenuItem value="deviceInactive">{t('eventDeviceInactive')}</MenuItem> - <MenuItem value="deviceMoving">{t('eventDeviceMoving')}</MenuItem> - <MenuItem value="deviceStopped">{t('eventDeviceStopped')}</MenuItem> - <MenuItem value="deviceOverspeed">{t('eventDeviceOverspeed')}</MenuItem> - <MenuItem value="deviceFuelDrop">{t('eventDeviceFuelDrop')}</MenuItem> - <MenuItem value="commandResult">{t('eventCommandResult')}</MenuItem> - <MenuItem value="geofenceEnter">{t('eventGeofenceEnter')}</MenuItem> - <MenuItem value="geofenceExit">{t('eventGeofenceExit')}</MenuItem> - <MenuItem value="alarm">{t('eventAlarm')}</MenuItem> - <MenuItem value="ignitionOn">{t('eventIgnitionOn')}</MenuItem> - <MenuItem value="ignitionOff">{t('eventIgnitionOff')}</MenuItem> - <MenuItem value="maintenance">{t('eventMaintenance')}</MenuItem> - <MenuItem value="textMessage">{t('eventTextMessage')}</MenuItem> - <MenuItem value="driverChanged">{t('eventDriverChanged')}</MenuItem> - </Select> - </FormControl> - </ReportFilter> - ); - } +const EventReportPage = () => { + const [items, setItems] = useState([]); - const ReportListView = ({items}) => { - - return ( + return ( + <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems}> <TableContainer component={Paper}> <Table> <TableHead> @@ -79,10 +79,8 @@ const EventReportPage = () => { </TableBody> </Table> </TableContainer> - ); - } - - return <ReportView reportFilterForm={ReportFilterForm} reportListView={ReportListView} />; + </ReportLayoutPage> + ); } export default EventReportPage; diff --git a/modern/src/reports/ReportView.js b/modern/src/reports/ReportLayoutPage.js index 249ef724..57a2cefd 100644 --- a/modern/src/reports/ReportView.js +++ b/modern/src/reports/ReportLayoutPage.js @@ -18,12 +18,11 @@ const useStyles = makeStyles(theme => ({ }, })); -const ReportView= ({ reportFilterForm:ReportFilterForm, reportListView:ReportListView }) => { +const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, ...rest }) => { const classes = useStyles(); - const [data, setData] = useState([]); - + const onResult = (data) => { - setData(data); + setItems(data); } return ( <div className={classes.root}> @@ -36,7 +35,7 @@ const ReportView= ({ reportFilterForm:ReportFilterForm, reportListView:ReportLis </Paper> </Grid> <Grid item xs={12} md={9} lg={10}> - <ReportListView items={ data } /> + {rest.children} </Grid> </Grid> </div> @@ -44,4 +43,4 @@ const ReportView= ({ reportFilterForm:ReportFilterForm, reportListView:ReportLis ); } -export default ReportView; +export default ReportLayoutPage; diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index 30272c49..0f8d98ab 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -3,29 +3,28 @@ import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper import t from '../common/localization'; import { formatPosition } from '../common/formatter'; import ReportFilter from './ReportFilter'; -import ReportView from './ReportView'; +import ReportLayoutPage from './ReportLayoutPage'; -const RouteReportPage = () => { - - const ReportFilterForm = ({ onResult }) => { +const ReportFilterForm = ({ onResult }) => { - const handleSubmit = async (deviceId, from, to) => { - const query = new URLSearchParams({ - deviceId, - from: from.toISOString(), - to: to.toISOString(), - }); - const response = await fetch(`/api/reports/route?${query.toString()}`, { headers: { Accept: 'application/json' } }); - if(response.ok) { - onResult(await response.json()); - } + const handleSubmit = async (deviceId, from, to) => { + const query = new URLSearchParams({ + deviceId, + from: from.toISOString(), + to: to.toISOString(), + }); + const response = await fetch(`/api/reports/route?${query.toString()}`, { headers: { Accept: 'application/json' } }); + if(response.ok) { + onResult(await response.json()); } - return <ReportFilter handleSubmit={handleSubmit} />; } + return <ReportFilter handleSubmit={handleSubmit} />; +} - const ReportListView = ({items}) => { - - return ( +const RouteReportPage = () => { + const [items, setItems] = useState([]); + return ( + <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems}> <TableContainer component={Paper}> <Table> <TableHead> @@ -50,10 +49,8 @@ const RouteReportPage = () => { </TableBody> </Table> </TableContainer> - ); - } - - return <ReportView reportFilterForm={ReportFilterForm} reportListView={ReportListView} />; + </ReportLayoutPage> + ); } export default RouteReportPage; |