From d21eb6a6ada04ee71860b4cf31b2f8a939c16fe2 Mon Sep 17 00:00:00 2001
From: Iván Ávalos <avalos@disroot.org>
Date: Tue, 21 Dec 2021 00:40:46 -0600
Subject: Added support for l18n string interpolation and set custom
 renderValue property on EventReportPage select

---
 modern/src/LocalizationProvider.js    | 14 ++++++++++++-
 modern/src/reports/EventReportPage.js | 39 ++++++++++++++++++++++++++++-------
 web/l10n/en.json                      |  1 +
 web/l10n/es.json                      |  1 +
 4 files changed, 46 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>
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 27cdab7..91a3de7 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -85,6 +85,7 @@
     "sharedLocation": "Location",
     "sharedImport": "Import",
     "sharedNoRows": "No rows",
+    "sharedSelectedOptions": "{0} selected options",
     "attributeSpeedLimit": "Speed Limit",
     "attributePolylineDistance": "Polyline Distance",
     "attributeReportIgnoreOdometer": "Report: Ignore Odometer",
diff --git a/web/l10n/es.json b/web/l10n/es.json
index dacbb22..6497b9b 100644
--- a/web/l10n/es.json
+++ b/web/l10n/es.json
@@ -85,6 +85,7 @@
     "sharedLocation": "Ubicación",
     "sharedImport": "Import",
     "sharedNoRows": "No hay filas",
+    "sharedSelectedOptions": "{0} opciones seleccionadas",
     "attributeSpeedLimit": "Límite de velocidad",
     "attributePolylineDistance": "Distancia de polilínea",
     "attributeReportIgnoreOdometer": "Reporte: Ignorar el odómetro",
-- 
cgit v1.2.3