aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAshutosh Bishnoi <mail2bishnoi@gmail.com>2020-11-09 12:30:41 +0530
committerAshutosh Bishnoi <mail2bishnoi@gmail.com>2020-11-09 12:30:41 +0530
commitb0e3a32b65d7485b43befb1feec173f2a575fcd0 (patch)
treea7c9644c726517d803bfb5476b02f4f110c5721a /modern
parent449e5e3190d22704a2cb4d7c5ce3e90eaaf16153 (diff)
downloadtrackermap-web-b0e3a32b65d7485b43befb1feec173f2a575fcd0.tar.gz
trackermap-web-b0e3a32b65d7485b43befb1feec173f2a575fcd0.tar.bz2
trackermap-web-b0e3a32b65d7485b43befb1feec173f2a575fcd0.zip
Minor Report Layout Modifications
Diffstat (limited to 'modern')
-rw-r--r--modern/src/reports/EventReportPage.js100
-rw-r--r--modern/src/reports/ReportLayoutPage.js (renamed from modern/src/reports/ReportView.js)11
-rw-r--r--modern/src/reports/RouteReportPage.js41
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;