diff options
author | Iván Ávalos <avalos@disroot.org> | 2022-01-10 02:19:29 -0600 |
---|---|---|
committer | Iván Ávalos <avalos@disroot.org> | 2022-01-10 02:19:29 -0600 |
commit | 7f7c56cbb4ecf1d3f3657283cbe7de2637504fff (patch) | |
tree | 7676696d2efd49ac1d4c12fd5bbaaa8a81970845 /modern/src/reports/EventReportPage.js | |
parent | af914cebb36ecb1207681255bd1adbab0481e149 (diff) | |
download | etbsa-traccar-web-7f7c56cbb4ecf1d3f3657283cbe7de2637504fff.tar.gz etbsa-traccar-web-7f7c56cbb4ecf1d3f3657283cbe7de2637504fff.tar.bz2 etbsa-traccar-web-7f7c56cbb4ecf1d3f3657283cbe7de2637504fff.zip |
Copied code from old UI in order to fix downloads in mobile app
Diffstat (limited to 'modern/src/reports/EventReportPage.js')
-rw-r--r-- | modern/src/reports/EventReportPage.js | 85 |
1 files changed, 57 insertions, 28 deletions
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index ade1b45..8e81039 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; import { DataGrid } from '@material-ui/data-grid'; import { Grid, FormControl, InputLabel, Select, MenuItem, Typography @@ -14,6 +14,9 @@ import { useTranslation } from '../LocalizationProvider'; const Filter = ({ setItems }) => { const t = useTranslation(); + const inputElement = useRef(); + const [data, setData] = useState({url: '', filename: ''}); + const [eventTypes, setEventTypes] = useState([ 'deviceInactive', 'deviceMoving', @@ -53,7 +56,26 @@ const Filter = ({ setItems }) => { if (contentType === 'application/json') { items['events'] = await response.json(); } else { - window.location.assign(window.URL.createObjectURL(await response.blob())); + // Copied from /web/app/view/ReportController.js (but without Ext) + const disposition = response.headers.get('content-disposition'); + const filename = disposition.slice(disposition.indexOf('=') + 1, disposition.length); + const blob = new Blob([await response.blob()], { type: contentType }); + if (typeof window.navigator.msSaveBlob !== 'undefined') { + // IE workaround + window.navigator.msSaveBlob(blob, filename); + } else { + const url = window.URL || window.webkitURL; + const downloadUrl = url.createObjectURL(blob); + if (filename) { + setData({url: downloadUrl, filename: filename}); + setTimeout(() => { + inputElement.current.click(); + }, 100); + } + setTimeout(() => { + url.revokeObjectURL(downloadUrl); + }, 100); + } return; } } @@ -72,33 +94,40 @@ const Filter = ({ setItems }) => { }; return ( - <ReportFilter handleSubmit={handleSubmit}> - <Grid item xs={12} sm={6}> + <> + <a style={{display: 'none'}} + href={data.url} + download={data.filename} + ref={inputElement} + /> + <ReportFilter handleSubmit={handleSubmit}> + <Grid item xs={12} sm={6}> <FormControl variant="filled" fullWidth> - <InputLabel>{t('reportEventTypes')}</InputLabel> - <Select value={eventTypes} renderValue={renderSelectedEvents} onChange={(e) => setEventTypes(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> - </Grid> - </ReportFilter> + <InputLabel>{t('reportEventTypes')}</InputLabel> + <Select value={eventTypes} renderValue={renderSelectedEvents} onChange={(e) => setEventTypes(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> + </Grid> + </ReportFilter> + </> ); }; |