diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2020-12-13 10:13:57 -0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-12-13 10:13:57 -0800 |
commit | fca5aa3cdb5d335dca14115722cacae1b724fe4f (patch) | |
tree | 542416ca2e13ff811b818d2343e2b487fda97b86 /modern/src/reports/ChartReportPage.js | |
parent | a4c2f0477dcda2662a3fd268f77a7549dead6e67 (diff) | |
parent | f8bb2fb5dfd801b7c49a3a3b66042e94dc7640dc (diff) | |
download | trackermap-web-fca5aa3cdb5d335dca14115722cacae1b724fe4f.tar.gz trackermap-web-fca5aa3cdb5d335dca14115722cacae1b724fe4f.tar.bz2 trackermap-web-fca5aa3cdb5d335dca14115722cacae1b724fe4f.zip |
Merge pull request #797 from mail2bishnoi/chart-report
Implementing chart report initial structure
Diffstat (limited to 'modern/src/reports/ChartReportPage.js')
-rw-r--r-- | modern/src/reports/ChartReportPage.js | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js new file mode 100644 index 00000000..543c8a9e --- /dev/null +++ b/modern/src/reports/ChartReportPage.js @@ -0,0 +1,72 @@ +import React, { useState } from 'react'; +import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core'; +import ReportLayoutPage from './ReportLayoutPage'; +import ReportFilter from './ReportFilter'; +import Graph from './Graph'; +import { useAttributePreference } from '../common/preferences'; +import { formatDate } from '../common/formatter'; +import { speedConverter } from '../common/converter'; +import t from '../common/localization'; + +const Filter = ({ children, setItems }) => { + + const speedUnit = useAttributePreference('speedUnit'); + + const handleSubmit = async (deviceId, from, to, mail, headers) => { + const query = new URLSearchParams({ deviceId, from, to, mail }); + const response = await fetch(`/api/reports/route?${query.toString()}`, { headers }); + if (response.ok) { + const positions = await response.json(); + let formattedPositions = positions.map(position => { + return { + speed: Number(speedConverter(position.speed, speedUnit)), + altitude: position.altitude, + accuracy: position.accuracy, + fixTime: formatDate(position.fixTime) + } + }); + setItems(formattedPositions); + } + } + return ( + <> + <ReportFilter handleSubmit={handleSubmit} showOnly /> + {children} + </> + ) +} + +const ChartType = ({ type, setType }) => { + + return ( + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('reportChartType')}</InputLabel> + <Select value={type} onChange={e => setType(e.target.value)}> + <MenuItem value="speed">{t('positionSpeed')}</MenuItem> + <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem> + <MenuItem value="altitude">{t('positionAltitude')}</MenuItem> + </Select> + </FormControl> + ) +} + + +const ChartReportPage = () => { + + const [items, setItems] = useState([]); + const [type, setType] = useState('speed'); + + return ( + <> + <ReportLayoutPage filter={ + <Filter setItems={setItems}> + <ChartType type={type} setType={setType} /> + </Filter> + }> + <Graph items={items} type={type} /> + </ReportLayoutPage> + </> + ) +} + +export default ChartReportPage; |