Added support for l18n string interpolation and set custom renderValue property on EventReportPage select

1 files changed, 31 insertions, 8 deletions

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>