Minor reports cleanup

4 files changed, 12 insertions, 87 deletions

diff --git a/modern/src/reports/DailySummaryReportPage.js b/modern/src/reports/DailySummaryReportPage.js
deleted file mode 100644
index c628a9b..0000000
--- a/modern/src/reports/DailySummaryReportPage.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { useState } from 'react';
-import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core';
-import t from '../common/localization';
-import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter';
-import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
-import { useAttributePreference } from '../common/preferences';
-
-const ReportFilterForm = ({ onResult }) => {
-
-  const handleSubmit = async (deviceId, from, to) => {
-    const query = new URLSearchParams({
-      deviceId,
-      from: from.toISOString(),
-      to: to.toISOString(),
-      daily: true
-    });
-    const response = await fetch(`/api/reports/summary?${query.toString()}`, { headers: { Accept: 'application/json' } });
-    if (response.ok) {
-      onResult(await response.json());
-    }
-  }
-  return <ReportFilter handleSubmit={handleSubmit} />;
-}
-
-const DailySummaryReportPage = () => {
-
-  const distanceUnit = useAttributePreference('distanceUnit');
-  const speedUnit = useAttributePreference('speedUnit');
-  const [items, setItems] = useState([]);
-  
-  return (
-    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems}>
-      <TableContainer component={Paper}>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell>{t('reportStartDate')}</TableCell>
-              <TableCell>{t('sharedDistance')}</TableCell>
-              <TableCell>{t('reportStartOdometer')}</TableCell>
-              <TableCell>{t('reportEndOdometer')}</TableCell>
-              <TableCell>{t('reportAverageSpeed')}</TableCell>
-              <TableCell>{t('reportMaximumSpeed')}</TableCell>
-              <TableCell>{t('reportEngineHours')}</TableCell>              
-              <TableCell>{t('reportSpentFuel')}</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {items.map((item) => (
-              <TableRow key={item.id}>
-                <TableCell>{formatDate(item.startTime, 'YYYY-MM-DD')}</TableCell>
-                <TableCell>{formatDistance(item.distance, distanceUnit)}</TableCell>
-                <TableCell>{formatDistance(item.startOdometer, distanceUnit)}</TableCell>
-                <TableCell>{formatDistance(item.endOdometer, distanceUnit)}</TableCell>
-                <TableCell>{formatSpeed(item.averageSpeed, speedUnit)}</TableCell>
-                <TableCell>{formatSpeed(item.maxSpeed, speedUnit)}</TableCell>
-                <TableCell>{formatHours(item.engineHours)}</TableCell>
-                <TableCell>{formatVolume(item.spentFuel)}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </ReportLayoutPage>
-  );
-}
-
-export default DailySummaryReportPage;
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index e9bca4e..3e12af9 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -21,11 +21,12 @@ const ReportFilterForm = ({ onResult }) => {
       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>
+        <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>
@@ -66,11 +67,9 @@ const EventReportPage = () => {
             </TableRow>
           </TableHead>
           <TableBody>
-            {items.map((item) => (
+            {items.map(item => (
               <TableRow key={item.id}>
-                <TableCell>
-                  {formatPosition(item, 'serverTime')}
-                </TableCell>
+                <TableCell>{formatPosition(item, 'serverTime')}</TableCell>
                 <TableCell>{item.type}</TableCell>
                 <TableCell>{}</TableCell>
                 <TableCell>{}</TableCell>
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 0d3223f..8fc5ca7 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -4,7 +4,7 @@ import t from '../common/localization';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
 
-const ReportFilter = (props) => {
+const ReportFilter = ({ children, handleSubmit }) => {
   const devices = useSelector((state) => Object.values(state.devices.items));
   const [deviceId, setDeviceId] = useState();
   const [period, setPeriod] = useState('today');
@@ -45,7 +45,7 @@ const ReportFilter = (props) => {
         break;
     }
 
-    props.handleSubmit(deviceId, selectedFrom, selectedTo);
+    handleSubmit(deviceId, selectedFrom, selectedTo);
   }
 
   return (
@@ -58,9 +58,6 @@ const ReportFilter = (props) => {
           ))}
         </Select>
       </FormControl>
-
-      {props.children}
-
       <FormControl variant="filled" margin="normal" fullWidth>
         <InputLabel>{t('reportPeriod')}</InputLabel>
         <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
@@ -80,9 +77,7 @@ const ReportFilter = (props) => {
           label={t('reportFrom')}
           type="datetime-local"
           value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
-          onChange={(e) =>
-            setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))
-          }
+          onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
           fullWidth />
       )}
       {period === 'custom' && (
@@ -92,11 +87,10 @@ const ReportFilter = (props) => {
           label={t('reportTo')}
           type="datetime-local"
           value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
-          onChange={(e) =>
-            setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))
-          }
+          onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
           fullWidth />
       )}
+      {children}
       <FormControl margin="normal" fullWidth>
         <Button type="button" color="primary" variant="contained" disabled={!deviceId} onClick={handleShow}>
           {t('reportShow')}
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index 57a2cef..296b7c6 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Grid, Paper, makeStyles } from '@material-ui/core';
 import MainToolbar from '../MainToolbar';
 
@@ -18,7 +18,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, ...rest }) => {
+const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, children }) => {
   const classes = useStyles();
 
   const onResult = (data) => {
@@ -35,7 +35,7 @@ const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, ...rest
             </Paper>
           </Grid>
           <Grid item xs={12} md={9} lg={10}>
-            {rest.children}
+            {children}
           </Grid>
         </Grid>
       </div>