diff options
Diffstat (limited to 'modern')
| -rw-r--r-- | modern/src/LocalizationProvider.js | 14 | ||||
| -rw-r--r-- | modern/src/reports/EventReportPage.js | 39 |
2 files changed, 44 insertions, 9 deletions
diff --git a/modern/src/LocalizationProvider.js b/modern/src/LocalizationProvider.js index 6d8605b..9b91509 100644 --- a/modern/src/LocalizationProvider.js +++ b/modern/src/LocalizationProvider.js @@ -48,10 +48,22 @@ export const LocalizationProvider = ({ children }) => { export const useLocalization = () => useContext(LocalizationContext); + export const useTranslation = () => { const context = useContext(LocalizationContext); const { data } = context.languages[context.language]; - return (key) => data[key]; + return (key, args = {}) => { + if (Object.keys(args).length) { + let str = data[key]; + Object.keys(args).forEach(k => { + console.log (`Replacement for ${k} in ${str} is: `, args[k]) + str = str.replace(new RegExp(`\\{${k}\\}`, 'gi'), args[k].toString()); + }); + return str; + } else { + return data[key]; + } + } }; export const useTranslationKeys = (predicate) => { diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 66372c9..3ed80e7 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { DataGrid } from '@material-ui/data-grid'; import { - Grid, FormControl, InputLabel, Select, MenuItem, + Grid, FormControl, InputLabel, Select, MenuItem, Typography } from '@material-ui/core'; import { useTheme } from '@material-ui/core/styles'; import { useSelector } from 'react-redux'; @@ -15,7 +15,30 @@ import { useTranslation } from '../LocalizationProvider'; const Filter = ({ setItems }) => { const t = useTranslation(); - const [eventTypes, setEventTypes] = useState(['allEvents']); + const [eventTypes, setEventTypes] = useState([ + 'deviceInactive', + 'deviceMoving', + 'deviceStopped', + 'deviceOverspeed', + 'deviceFuelDrop', + 'commandResult', + 'geofenceEnter', + 'geofenceExit', + 'alarm', + 'ignitionOn', + 'ignitionOff', + 'maintenance', + 'textMessage', + 'driverChanged', + ]); + + const renderSelectedEvents = (value) => { + return ( + <Typography> + {t('sharedSelectedOptions', {0: value.length})} + </Typography> + ); + } const handleSubmit = async (deviceId, from, to, mail, headers) => { const query = new URLSearchParams({ @@ -38,13 +61,13 @@ const Filter = ({ setItems }) => { return ( <ReportFilter handleSubmit={handleSubmit}> <Grid item xs={12} sm={6}> - <FormControl variant="filled" fullWidth> + <FormControl variant="filled" fullWidth> <InputLabel>{t('reportEventTypes')}</InputLabel> - <Select value={eventTypes} 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> + <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> |