added Search Input for meters in Web UI

web/src/components/MyEMS/Meter/MeterCost.js

@@ -60,6 +60,7 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
   const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
   const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
   const [meterList, setMeterList] = useState([]);
+  const [filteredMeterList, setFilteredMeterList] = useState([]);
   const [selectedMeter, setSelectedMeter] = useState(undefined);
   const [comparisonType, setComparisonType] = useState('month-on-month');
   const [periodType, setPeriodType] = useState('daily');
@@ -139,6 +140,7 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
             json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
             console.log(json);
             setMeterList(json[0]);
+            setFilteredMeterList(json[0]);
             if (json[0].length > 0) {
               setSelectedMeter(json[0][0].value);
               // enable submit button
@@ -190,6 +192,7 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
         json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
         console.log(json)
         setMeterList(json[0]);
+        setFilteredMeterList(json[0]);
         if (json[0].length > 0) {
           setSelectedMeter(json[0][0].value);
           // enable submit button
@@ -205,7 +208,15 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
     }).catch(err => {
       console.log(err);
     });
-  }
+  };
+
+  const onSearchMeter = ({ target }) => {
+    const keyword = target.value.toLowerCase();
+    const filteredResult = meterList.filter(
+      meter => meter.label.toLowerCase().includes(keyword)
+    );
+    setFilteredMeterList(keyword.length ? filteredResult : meterList);
+  };
 
   let onComparisonTypeChange = ({ target }) => {
     console.log(target.value);
@@ -229,15 +240,15 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
       setBasePeriodBeginsDatetimeDisabled(true);
       setBasePeriodEndsDatetimeDisabled(true);
     }
-  }
+  };
 
   let onBasePeriodBeginsDatetimeChange = (newDateTime) => {
     setBasePeriodBeginsDatetime(newDateTime);
-  }
+  };
 
   let onBasePeriodEndsDatetimeChange = (newDateTime) => {
     setBasePeriodEndsDatetime(newDateTime);
-  }
+  };
 
   let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
     setReportingPeriodBeginsDatetime(newDateTime);
@@ -246,7 +257,7 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
     } else if (comparisonType === 'month-on-month') {
       setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months'));
     }
-  }
+  };
 
   let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
     setReportingPeriodEndsDatetime(newDateTime);
@@ -255,23 +266,24 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
     } else if (comparisonType === 'month-on-month') {
       setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months'));
     }
-  }
+  };
 
   var getValidBasePeriodBeginsDatetimes = function (currentDate) {
     return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
-  }
+  };
 
   var getValidBasePeriodEndsDatetimes = function (currentDate) {
     return currentDate.isAfter(moment(basePeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
-  }
+  };
 
   var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
     return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
-  }
+  };
 
   var getValidReportingPeriodEndsDatetimes = function (currentDate) {
     return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
-  }
+  };
+
   // Handler
   const handleSubmit = e => {
     e.preventDefault();
@@ -454,14 +466,17 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
                   <Label className={labelClasses} for="meterSelect">
                     {t('Meter')}
                   </Label>
-                  <CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
+                  <Form inline>
-                  >
+                      <Input placeholder={t('Search')} onChange={onSearchMeter} />
-                    {meterList.map((meter, index) => (
+                      <CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
-                      <option value={meter.value} key={meter.value}>
+                      >
-                        {meter.label}
+                        {filteredMeterList.map((meter, index) => (
-                      </option>
+                          <option value={meter.value} key={meter.value}>
-                    ))}
+                            {meter.label}
-                  </CustomInput>
+                          </option>
+                        ))}
+                      </CustomInput>
+                  </Form>
                 </FormGroup>
               </Col>
               <Col xs="auto">

web/src/components/MyEMS/Meter/MeterEnergy.js

@@ -61,6 +61,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
   const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
   const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
   const [meterList, setMeterList] = useState([]);
+  const [filteredMeterList, setFilteredMeterList] = useState([]);
   const [selectedMeter, setSelectedMeter] = useState(undefined);
   const [comparisonType, setComparisonType] = useState('month-on-month');
   const [periodType, setPeriodType] = useState('daily');
@@ -141,6 +142,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
             json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
             console.log(json);
             setMeterList(json[0]);
+            setFilteredMeterList(json[0]);
             if (json[0].length > 0) {
               setSelectedMeter(json[0][0].value);
               // enable submit button
@@ -193,6 +195,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
         json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
         console.log(json)
         setMeterList(json[0]);
+        setFilteredMeterList(json[0]);
         if (json[0].length > 0) {
           setSelectedMeter(json[0][0].value);
           // enable submit button
@@ -232,15 +235,23 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
       setBasePeriodBeginsDatetimeDisabled(true);
       setBasePeriodEndsDatetimeDisabled(true);
     }
-  }
+  };
+
+  const onSearchMeter = ({ target }) => {
+    const keyword = target.value.toLowerCase();
+    const filteredResult = meterList.filter(
+      meter => meter.label.toLowerCase().includes(keyword)
+    );
+    setFilteredMeterList(keyword.length ? filteredResult : meterList);
+  };
 
   let onBasePeriodBeginsDatetimeChange = (newDateTime) => {
     setBasePeriodBeginsDatetime(newDateTime);
-  }
+  };
 
   let onBasePeriodEndsDatetimeChange = (newDateTime) => {
     setBasePeriodEndsDatetime(newDateTime);
-  }
+  };
 
   let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
     setReportingPeriodBeginsDatetime(newDateTime);
@@ -249,7 +260,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
     } else if (comparisonType === 'month-on-month') {
       setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months'));
     }
-  }
+  };
 
   let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
     setReportingPeriodEndsDatetime(newDateTime);
@@ -258,23 +269,24 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
     } else if (comparisonType === 'month-on-month') {
       setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months'));
     }
-  }
+  };
 
   var getValidBasePeriodBeginsDatetimes = function (currentDate) {
     return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
-  }
+  };
 
   var getValidBasePeriodEndsDatetimes = function (currentDate) {
     return currentDate.isAfter(moment(basePeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
-  }
+  };
 
   var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
     return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
-  }
+  };
 
   var getValidReportingPeriodEndsDatetimes = function (currentDate) {
     return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
-  }
+  };
+
   // Handler
   const handleSubmit = e => {
     e.preventDefault();
@@ -406,7 +418,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
       console.log(err);
     });
   };
-  
+
   const handleExport = e => {
     e.preventDefault();
     const mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
@@ -455,14 +467,19 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
                   <Label className={labelClasses} for="meterSelect">
                     {t('Meter')}
                   </Label>
-                  <CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
+                  
-                  >
+                  <Form inline>
-                    {meterList.map((meter, index) => (
+                      <Input placeholder={t('Search')} onChange={onSearchMeter} />
-                      <option value={meter.value} key={meter.value}>
+                      <CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
-                        {meter.label}
+                      >
-                      </option>
+                        {filteredMeterList.map((meter, index) => (
-                    ))}
+                          <option value={meter.value} key={meter.value}>
-                  </CustomInput>
+                            {meter.label}
+                          </option>
+                        ))}
+                      </CustomInput>
+                  </Form>
+                  
                 </FormGroup>
               </Col>
               <Col xs="auto">

web/src/components/MyEMS/Meter/MeterSubmetersBalance.js

@@ -60,6 +60,7 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
   const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
   const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
   const [meterList, setMeterList] = useState([]);
+  const [filteredMeterList, setFilteredMeterList] = useState([]);
   const [selectedMeter, setSelectedMeter] = useState(undefined);
   const [periodType, setPeriodType] = useState('daily');
   const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
@@ -134,6 +135,7 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
             json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
             console.log(json);
             setMeterList(json[0]);
+            setFilteredMeterList(json[0]);
             if (json[0].length > 0) {
               setSelectedMeter(json[0][0].value);
               // enable submit button
@@ -186,6 +188,7 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
         json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
         console.log(json)
         setMeterList(json[0]);
+        setFilteredMeterList(json[0]);
         if (json[0].length > 0) {
           setSelectedMeter(json[0][0].value);
           // enable submit button
@@ -201,15 +204,23 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
     }).catch(err => {
       console.log(err);
     });
-  }
+  };
+  
+  const onSearchMeter = ({ target }) => {
+    const keyword = target.value.toLowerCase();
+    const filteredResult = meterList.filter(
+      meter => meter.label.toLowerCase().includes(keyword)
+    );
+    setFilteredMeterList(keyword.length ? filteredResult : meterList);
+  };
 
   let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
     setReportingPeriodBeginsDatetime(newDateTime);
-  }
+  };
 
   let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
     setReportingPeriodEndsDatetime(newDateTime);
-  }
+  };
 
   var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
     return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
@@ -393,14 +404,17 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
                   <Label className={labelClasses} for="meterSelect">
                     {t('Meter')}
                   </Label>
-                  <CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
+                  <Form inline>
-                  >
+                      <Input placeholder={t('Search')} onChange={onSearchMeter} />
-                    {meterList.map((meter, index) => (
+                      <CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
-                      <option value={meter.value} key={meter.value}>
+                      >
-                        {meter.label}
+                        {filteredMeterList.map((meter, index) => (
-                      </option>
+                          <option value={meter.value} key={meter.value}>
-                    ))}
+                            {meter.label}
-                  </CustomInput>
+                          </option>
+                        ))}
+                      </CustomInput>
+                  </Form>
                 </FormGroup>
               </Col>
               <Col xs="auto">

web/src/components/MyEMS/Meter/MeterTrend.js

@@ -56,6 +56,7 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
   const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
   const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
   const [meterList, setMeterList] = useState([]);
+  const [filteredMeterList, setFilteredMeterList] = useState([]);
   const [selectedMeter, setSelectedMeter] = useState(undefined);
   const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('day'));
   const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
@@ -123,6 +124,7 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
             json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
             console.log(json);
             setMeterList(json[0]);
+            setFilteredMeterList(json[0]);
             if (json[0].length > 0) {
               setSelectedMeter(json[0][0].value);
               // enable submit button
@@ -175,6 +177,7 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
         json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
         console.log(json)
         setMeterList(json[0]);
+        setFilteredMeterList(json[0]);
         if (json[0].length > 0) {
           setSelectedMeter(json[0][0].value);
           // enable submit button
@@ -190,18 +193,23 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
     }).catch(err => {
       console.log(err);
     });
-  }
+  };
-
+  
+  const onSearchMeter = ({ target }) => {
+    const keyword = target.value.toLowerCase();
+    const filteredResult = meterList.filter(
+      meter => meter.label.toLowerCase().includes(keyword)
+    );
+    setFilteredMeterList(keyword.length ? filteredResult : meterList);
+  };
 
   let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
     setReportingPeriodBeginsDatetime(newDateTime);
-    
+  };
-  }
 
   let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
     setReportingPeriodEndsDatetime(newDateTime);
-    
+  };
-  }
 
   var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
     return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
@@ -381,14 +389,17 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
                   <Label className={labelClasses} for="meterSelect">
                     {t('Meter')}
                   </Label>
-                  <CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
+                  <Form inline>
-                  >
+                      <Input placeholder={t('Search')} onChange={onSearchMeter} />
-                    {meterList.map((meter, index) => (
+                      <CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
-                      <option value={meter.value} key={meter.value}>
+                      >
-                        {meter.label}
+                        {filteredMeterList.map((meter, index) => (
-                      </option>
+                          <option value={meter.value} key={meter.value}>
-                    ))}
+                            {meter.label}
-                  </CustomInput>
+                          </option>
+                        ))}
+                      </CustomInput>
+                  </Form>
                 </FormGroup>
               </Col>
               <Col xs={6} sm={3}>

web/src/i18n.js

@@ -133,6 +133,7 @@ const resources = {
       "Input Energy Category": "Input Energy Category",
       "Output Energy Category": "Output Energy Category",
       "Fraction Parameter": "Fraction Parameter",
+      "Search": "Search",
       //Card Summaries and Line Charts
       "Base Period": "Base Period",
       "Reporting Period": "Reporting Period",
@@ -473,6 +474,7 @@ const resources = {
       "Input Energy Category": "Eingangsenergiekategorie",
       "Output Energy Category": "Ausgangsenergiekategorie",
       "Fraction Parameter": "Fraktion Parameter",
+      "Search": "Suche",
       //Card Summaries and Line Charts
       "Base Period": "Basiszeitraum",
       "Reporting Period": "Berichtszeitraum",
@@ -816,6 +818,7 @@ const resources = {
       "Input Energy Category": "消耗能源分类",
       "Output Energy Category": "产出能源分类",
       "Fraction Parameter": "分式参数",
+      "Search": "搜索",
       //Card Summaries and Line Charts
       "Base Period": "基准期",
       "Reporting Period": "报告期",