aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/reports/EventReportPage.js171
-rw-r--r--modern/src/reports/ReportFilter.js3
-rw-r--r--modern/src/reports/ReportView.js47
-rw-r--r--modern/src/reports/RouteReportPage.js116
4 files changed, 167 insertions, 170 deletions
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index fb037597..cb3a06aa 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -1,111 +1,88 @@
import React, { useState } from 'react';
-import MainToolbar from '../MainToolbar';
-import { Grid, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper, makeStyles } from '@material-ui/core';
+import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core';
import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
import t from '../common/localization';
import { formatPosition } from '../common/formatter';
import ReportFilter from './ReportFilter';
-
-const useStyles = makeStyles(theme => ({
- root: {
- height: '100%',
- display: 'flex',
- flexDirection: 'column',
- },
- content: {
- flex: 1,
- overflow: 'auto',
- padding: theme.spacing(2),
- },
- form: {
- padding: theme.spacing(1, 2, 2),
- },
-}));
+import ReportView from './ReportView';
const EventReportPage = () => {
- const classes = useStyles();
- const [data, setData] = useState([]);
- 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' } })
+ 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 ReportListView = ({items}) => {
- if(response.ok) {
- const data = await response.json();
- setData(data);
- }
+ return (
+ <TableContainer component={Paper}>
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>{t('positionFixTime')}</TableCell>
+ <TableCell>{t('sharedType')}</TableCell>
+ <TableCell>{t('sharedGeofence')}</TableCell>
+ <TableCell>{t('sharedMaintenance')}</TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>
+ {formatPosition(item, 'serverTime')}
+ </TableCell>
+ <TableCell>{item.type}</TableCell>
+ <TableCell>{}</TableCell>
+ <TableCell>{}</TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </TableContainer>
+ );
}
- return (
- <div className={classes.root}>
- <MainToolbar />
- <div className={classes.content}>
- <Grid container spacing={2}>
- <Grid item xs={12} md={3} lg={2}>
- <Paper className={classes.form}>
- <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>
- </Paper>
- </Grid>
- <Grid item xs={12} md={9} lg={10}>
- <TableContainer component={Paper}>
- <Table>
- <TableHead>
- <TableRow>
- <TableCell>{t('positionFixTime')}</TableCell>
- <TableCell>{t('sharedType')}</TableCell>
- <TableCell>{t('sharedGeofence')}</TableCell>
- <TableCell>{t('sharedMaintenance')}</TableCell>
- </TableRow>
- </TableHead>
- <TableBody>
- {data.map((item) => (
- <TableRow key={item.id}>
- <TableCell>
- {formatPosition(item, 'serverTime')}
- </TableCell>
- <TableCell>{item.type}</TableCell>
- <TableCell>{}</TableCell>
- <TableCell>{}</TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
- </Grid>
- </Grid>
- </div>
- </div>
- );
+ return <ReportView reportFilterForm={ReportFilterForm} reportListView={ReportListView} />;
}
export default EventReportPage;
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 6fe6a529..0d3223ff 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -5,7 +5,6 @@ import { useSelector } from 'react-redux';
import moment from 'moment';
const ReportFilter = (props) => {
- const { reportType } = props;
const devices = useSelector((state) => Object.values(state.devices.items));
const [deviceId, setDeviceId] = useState();
const [period, setPeriod] = useState('today');
@@ -61,7 +60,7 @@ const ReportFilter = (props) => {
</FormControl>
{props.children}
-
+
<FormControl variant="filled" margin="normal" fullWidth>
<InputLabel>{t('reportPeriod')}</InputLabel>
<Select value={period} onChange={(e) => setPeriod(e.target.value)}>
diff --git a/modern/src/reports/ReportView.js b/modern/src/reports/ReportView.js
new file mode 100644
index 00000000..249ef724
--- /dev/null
+++ b/modern/src/reports/ReportView.js
@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { Grid, Paper, makeStyles } from '@material-ui/core';
+import MainToolbar from '../MainToolbar';
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ content: {
+ flex: 1,
+ overflow: 'auto',
+ padding: theme.spacing(2),
+ },
+ form: {
+ padding: theme.spacing(1, 2, 2),
+ },
+}));
+
+const ReportView= ({ reportFilterForm:ReportFilterForm, reportListView:ReportListView }) => {
+ const classes = useStyles();
+ const [data, setData] = useState([]);
+
+ const onResult = (data) => {
+ setData(data);
+ }
+ return (
+ <div className={classes.root}>
+ <MainToolbar />
+ <div className={classes.content}>
+ <Grid container spacing={2}>
+ <Grid item xs={12} md={3} lg={2}>
+ <Paper className={classes.form}>
+ <ReportFilterForm onResult={ onResult } />
+ </Paper>
+ </Grid>
+ <Grid item xs={12} md={9} lg={10}>
+ <ReportListView items={ data } />
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ );
+}
+
+export default ReportView;
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 7d34c177..30272c49 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -1,85 +1,59 @@
import React, { useState } from 'react';
-import MainToolbar from '../MainToolbar';
-import { Grid, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper, makeStyles, FormControl, InputLabel, Select, MenuItem, Button, TextField } from '@material-ui/core';
+import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core';
import t from '../common/localization';
import { formatPosition } from '../common/formatter';
import ReportFilter from './ReportFilter';
-
-const useStyles = makeStyles(theme => ({
- root: {
- height: '100%',
- display: 'flex',
- flexDirection: 'column',
- },
- content: {
- flex: 1,
- overflow: 'auto',
- padding: theme.spacing(2),
- },
- form: {
- padding: theme.spacing(1, 2, 2),
- },
-}));
+import ReportView from './ReportView';
const RouteReportPage = () => {
- const classes = useStyles();
- const [data, setData] = useState([]);
- const handleSubmit = async (deviceId, from, to) => {
- const query = new URLSearchParams({
- deviceId,
- from: from.toISOString(),
- to: to.toISOString(),
- });
+ const ReportFilterForm = ({ onResult }) => {
- const response = await fetch(`/api/reports/route?${query.toString()}`, { headers: { Accept: 'application/json' } })
-
- if(response.ok) {
- const data = await response.json();
- setData(data);
+ 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} />;
+ }
+
+ const ReportListView = ({items}) => {
+
+ return (
+ <TableContainer component={Paper}>
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>{t('positionFixTime')}</TableCell>
+ <TableCell>{t('positionLatitude')}</TableCell>
+ <TableCell>{t('positionLongitude')}</TableCell>
+ <TableCell>{t('positionSpeed')}</TableCell>
+ <TableCell>{t('positionAddress')}</TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>{formatPosition(item, 'fixTime')}</TableCell>
+ <TableCell>{formatPosition(item, 'latitude')}</TableCell>
+ <TableCell>{formatPosition(item, 'longitude')}</TableCell>
+ <TableCell>{formatPosition(item, 'speed')}</TableCell>
+ <TableCell>{formatPosition(item, 'address')}</TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </TableContainer>
+ );
}
- return (
- <div className={classes.root}>
- <MainToolbar />
- <div className={classes.content}>
- <Grid container spacing={2}>
- <Grid item xs={12} md={3} lg={2}>
- <Paper className={classes.form}>
- <ReportFilter handleSubmit={handleSubmit} />
- </Paper>
- </Grid>
- <Grid item xs={12} md={9} lg={10}>
- <TableContainer component={Paper}>
- <Table>
- <TableHead>
- <TableRow>
- <TableCell>{t('positionFixTime')}</TableCell>
- <TableCell>{t('positionLatitude')}</TableCell>
- <TableCell>{t('positionLongitude')}</TableCell>
- <TableCell>{t('positionSpeed')}</TableCell>
- <TableCell>{t('positionAddress')}</TableCell>
- </TableRow>
- </TableHead>
- <TableBody>
- {data.map((item) => (
- <TableRow key={item.id}>
- <TableCell>{formatPosition(item, 'fixTime')}</TableCell>
- <TableCell>{formatPosition(item, 'latitude')}</TableCell>
- <TableCell>{formatPosition(item, 'longitude')}</TableCell>
- <TableCell>{formatPosition(item, 'speed')}</TableCell>
- <TableCell>{formatPosition(item, 'address')}</TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
- </Grid>
- </Grid>
- </div>
- </div>
- );
+ return <ReportView reportFilterForm={ReportFilterForm} reportListView={ReportListView} />;
}
export default RouteReportPage;
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 15:26:20 +0000