diff options
Diffstat (limited to 'modern')
-rw-r--r-- | modern/src/reports/RouteReportPage.js | 16 | ||||
-rw-r--r-- | modern/src/reports/StatisticsPage.js | 17 | ||||
-rw-r--r-- | modern/src/reports/components/ColumnSelect.js | 27 |
3 files changed, 34 insertions, 26 deletions
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index aefd0c6e..67eb4962 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -1,8 +1,8 @@ import React, { useState } from 'react'; import { - FormControl, InputLabel, MenuItem, Select, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, + Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@material-ui/core'; -import ReportFilter, { useFilterStyles } from './components/ReportFilter'; +import ReportFilter from './components/ReportFilter'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; import ReportsMenu from './components/ReportsMenu'; @@ -21,7 +21,6 @@ const columnsArray = [ const columnsMap = new Map(columnsArray); const RouteReportPage = () => { - const classes = useFilterStyles(); const t = useTranslation(); const [columns, setColumns] = usePersistedState('routeColumns', ['fixTime', 'latitude', 'longitude', 'speed', 'address']); @@ -47,16 +46,7 @@ const RouteReportPage = () => { return ( <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportRoute']}> <ReportFilter handleSubmit={handleSubmit}> - <div className={classes.item}> - <FormControl variant="filled" fullWidth> - <InputLabel>{t('sharedColumns')}</InputLabel> - <Select value={columns} onChange={(e) => setColumns(e.target.value)} renderValue={(it) => it.length} multiple> - {columnsArray.map(([key, string]) => ( - <MenuItem value={key}>{t(string)}</MenuItem> - ))} - </Select> - </FormControl> - </div> + <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} /> </ReportFilter> <TableContainer> <Table> diff --git a/modern/src/reports/StatisticsPage.js b/modern/src/reports/StatisticsPage.js index 09128c8a..214773fe 100644 --- a/modern/src/reports/StatisticsPage.js +++ b/modern/src/reports/StatisticsPage.js @@ -1,13 +1,14 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, FormControl, InputLabel, Select, MenuItem, + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, } from '@material-ui/core'; import { formatDate } from '../common/util/formatter'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; import ReportsMenu from './components/ReportsMenu'; -import ReportFilter, { useFilterStyles } from './components/ReportFilter'; +import ReportFilter from './components/ReportFilter'; import usePersistedState from '../common/util/usePersistedState'; +import ColumnSelect from './components/ColumnSelect'; const columnsArray = [ ['captureTime', 'statisticsCaptureTime'], @@ -24,7 +25,6 @@ const columnsArray = [ const columnsMap = new Map(columnsArray); const StatisticsPage = () => { - const classes = useFilterStyles(); const t = useTranslation(); const [columns, setColumns] = usePersistedState('statisticsColumns', ['captureTime', 'activeUsers', 'activeDevices', 'messagesStored']); @@ -41,16 +41,7 @@ const StatisticsPage = () => { return ( <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'statisticsTitle']}> <ReportFilter handleSubmit={handleSubmit} showOnly ignoreDevice> - <div className={classes.item}> - <FormControl variant="filled" fullWidth> - <InputLabel>{t('sharedColumns')}</InputLabel> - <Select value={columns} onChange={(e) => setColumns(e.target.value)} renderValue={(it) => it.length} multiple> - {columnsArray.map(([key, string]) => ( - <MenuItem value={key}>{t(string)}</MenuItem> - ))} - </Select> - </FormControl> - </div> + <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} /> </ReportFilter> <TableContainer> <Table> diff --git a/modern/src/reports/components/ColumnSelect.js b/modern/src/reports/components/ColumnSelect.js new file mode 100644 index 00000000..98e97420 --- /dev/null +++ b/modern/src/reports/components/ColumnSelect.js @@ -0,0 +1,27 @@ +import { useTranslation } from "../../common/components/LocalizationProvider"; +import { useFilterStyles } from "./ReportFilter"; + +const ColumnSelect = ({ columns, setColumns, columnsArray }) => { + const classes = useFilterStyles(); + const t = useTranslation(); + + return ( + <div className={classes.item}> + <FormControl variant="filled" fullWidth> + <InputLabel>{t('sharedColumns')}</InputLabel> + <Select + value={columns} + onChange={(e) => setColumns(e.target.value)} + renderValue={(it) => it.length} + multiple + > + {columnsArray.map(([key, string]) => ( + <MenuItem value={key}>{t(string)}</MenuItem> + ))} + </Select> + </FormControl> + </div> + ); +}; + +export default ColumnSelect; |