From 4fc94d3712788059bd1407c79d6abb82e3a52509 Mon Sep 17 00:00:00 2001
From: "13621160019@163.com" <13621160019@163.com>
Date: Sat, 26 Feb 2022 15:07:12 +0800
Subject: [PATCH] updated DateRangePicker for MeterCost report in Web UI

---
 web/src/components/MyEMS/Meter/MeterCost.js | 180 +++++++++-----------
 web/src/i18n.js                             |  93 +++++-----
 2 files changed, 127 insertions(+), 146 deletions(-)

diff --git a/web/src/components/MyEMS/Meter/MeterCost.js b/web/src/components/MyEMS/Meter/MeterCost.js
index bb6c991d..1189812c 100644
--- a/web/src/components/MyEMS/Meter/MeterCost.js
+++ b/web/src/components/MyEMS/Meter/MeterCost.js
@@ -65,13 +65,27 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
   const [selectedMeter, setSelectedMeter] = useState(undefined);
   const [comparisonType, setComparisonType] = useState('month-on-month');
   const [periodType, setPeriodType] = useState('daily');
-  const [basePeriodBeginsDatetime, setBasePeriodBeginsDatetime] = useState(current_moment.clone().subtract(1, 'months').startOf('month'));
-  const [basePeriodEndsDatetime, setBasePeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'months'));
-  const [basePeriodBeginsDatetimeDisabled, setBasePeriodBeginsDatetimeDisabled] = useState(true);
-  const [basePeriodEndsDatetimeDisabled, setBasePeriodEndsDatetimeDisabled] = useState(true);
-  const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
-  const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
   const [cascaderOptions, setCascaderOptions] = useState(undefined);
+  const [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([current_moment.clone().startOf('month').toDate(), current_moment.toDate()]);
+  const [basePeriodDateRange, setBasePeriodDateRange] = useState([current_moment.clone().subtract(1, 'months').startOf('month').toDate(), current_moment.clone().subtract(1, 'months').toDate()]);
+  const [basePeriodDateRangePickerDisabled, setBasePeriodDateRangePickerDisabled] = useState(true);
+  const dateRangePickerLocale = {
+    sunday: t('sunday'),
+    monday: t('monday'),
+    tuesday: t('tuesday'),
+    wednesday: t('wednesday'),
+    thursday: t('thursday'),
+    friday: t('friday'),
+    saturday: t('saturday'),
+    ok: t('ok'),
+    today: t('today'),
+    yesterday: t('yesterday'),
+    hours: t('hours'),
+    minutes: t('minutes'),
+    seconds: t('seconds'),
+    last7Days: t('last7Days')
+  };
+  const dateRangePickerStyle = { display: 'block', zIndex: 10};
 
   // buttons
   const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
@@ -94,27 +108,6 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
   const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]);
   const [detailedDataTableData, setDetailedDataTableData] = useState([]);
   const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
-  const [values, setValues] = useState([reportingPeriodBeginsDatetime.toDate(), reportingPeriodEndsDatetime.toDate()]);
-  const [baseValues, setBaseValues] = useState([current_moment.clone().subtract(1, 'months').startOf('month').toDate(),
-    current_moment.clone().subtract(1, 'months').toDate()]);
-  const [basePeriodDatetimeDisabled, setBasePeriodDatetimeDisabled] = useState(true);
-  const local = {
-    sunday: t('sunday'),
-    monday: t('monday'),
-    tuesday: t('tuesday'),
-    wednesday: t('wednesday'),
-    thursday: t('thursday'),
-    friday: t('friday'),
-    saturday: t('saturday'),
-    ok: t('ok'),
-    today: t('today'),
-    yesterday: t('yesterday'),
-    hours: t('hours'),
-    minutes: t('minutes'),
-    seconds: t('seconds'),
-    last7Days: t('last7Days')
-  };
-  const styles = { display: 'block', zIndex: 10};
 
   useEffect(() => {
     let isResponseOK = false;
@@ -253,66 +246,50 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
     console.log(target.value);
     setComparisonType(target.value);
     if (target.value === 'year-over-year') {
-      setBasePeriodDatetimeDisabled(true);
-      setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years'));
-      setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years'));
-      setBaseValues([moment(reportingPeriodBeginsDatetime).subtract(1, 'years').toDate(),
-        moment(reportingPeriodEndsDatetime).subtract(1, 'years').toDate()]);
+      setBasePeriodDateRangePickerDisabled(true);
+      setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'years').toDate(),
+        moment(reportingPeriodDateRange[1]).subtract(1, 'years').toDate()]);
     } else if (target.value === 'month-on-month') {
-      setBasePeriodDatetimeDisabled(true);
-      setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months'));
-      setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months'));
-      setBaseValues([moment(reportingPeriodBeginsDatetime).subtract(1, 'months').toDate(),
-        moment(reportingPeriodEndsDatetime).subtract(1, 'months').toDate()]);
+      setBasePeriodDateRangePickerDisabled(true);
+      setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'months').toDate(),
+        moment(reportingPeriodDateRange[1]).subtract(1, 'months').toDate()]);
     } else if (target.value === 'free-comparison') {
-      setBasePeriodDatetimeDisabled(false);
+      setBasePeriodDateRangePickerDisabled(false);
     } else if (target.value === 'none-comparison') {
-      setBaseValues([]);
-      setBasePeriodBeginsDatetime(undefined);
-      setBasePeriodEndsDatetime(undefined);
-      setBasePeriodDatetimeDisabled(true);
+      setBasePeriodDateRange([null, null]);
+      setBasePeriodDateRangePickerDisabled(true);
     }
   };
 
   let onBasePeriodChange = (DateRange) => {
-    if(DateRange == null){
-      setBaseValues([]);
-    }
-    let startDate = moment(DateRange[0]);
-    let endDate = moment(DateRange[1]);
-    setBaseValues([DateRange[0], DateRange[1]]);
-    setBasePeriodBeginsDatetime(startDate);
-    setBasePeriodEndsDatetime(endDate);
-  };
-
-  let onChange = (DateRange) => {
-    if(DateRange == null){
-      setValues([]);
-    }
-    let startDate = moment(DateRange[0]);
-    let endDate = moment(DateRange[1]);
-    setValues([DateRange[0], DateRange[1]]);
-    setReportingPeriodBeginsDatetime(startDate);
-    setReportingPeriodEndsDatetime(endDate);
-    if (comparisonType === 'year-over-year') {
-      setBasePeriodBeginsDatetime(startDate.clone().subtract(1, 'years'));
-      setBasePeriodEndsDatetime(endDate.clone().subtract(1, 'years'));
-      setBaseValues([startDate.clone().subtract(1, 'years').toDate(),
-        endDate.clone().subtract(1, 'years').toDate()]);
-    } else if (comparisonType === 'month-on-month') {
-      setBasePeriodBeginsDatetime(startDate.clone().subtract(1, 'months'));
-      setBasePeriodEndsDatetime(endDate.clone().subtract(1, 'months'));
-      setBaseValues([startDate.clone().subtract(1, 'months').toDate(),
-        endDate.clone().subtract(1, 'months').toDate()]);
+    console.log(DateRange);
+    
+    if(DateRange == null) {
+      setBasePeriodDateRange([null, null]);
+    } else {
+      setBasePeriodDateRange([DateRange[0], DateRange[1]]);
     }
   };
 
-  let onClean = event => {
-    setValues([]);
+  let onReportingPeriodChange = (DateRange) => {
+      if(DateRange == null) {
+      setReportingPeriodDateRange([null, null]);
+    } else {
+      setReportingPeriodDateRange([DateRange[0], DateRange[1]]);
+      if (comparisonType === 'year-over-year') {
+        setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'years').toDate(), moment(DateRange[1]).clone().subtract(1, 'years').toDate()]);
+      } else if (comparisonType === 'month-on-month') {
+        setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'months').toDate(), moment(DateRange[1]).clone().subtract(1, 'months').toDate()]);
+      }
+    }
   };
 
-  let onBaseClean = event => {
-    setValues([]);
+  let onBasePeriodClean = event => {
+    setBasePeriodDateRange([null, null]);
+  };
+
+  let onReportingPeriodClean = event => {
+    setReportingPeriodDateRange([null, null]);
   };
 
   // Handler
@@ -323,10 +300,10 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
     console.log(selectedMeter);
     console.log(comparisonType);
     console.log(periodType);
-    console.log(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined);
-    console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined);
-    console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
-    console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
+    console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null)
+    console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null)
+    console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
+    console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
 
     // disable submit button
     setSubmitButtonDisabled(true);  
@@ -342,10 +319,10 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
     fetch(APIBaseURL + '/reports/metercost?' +
       'meterid=' + selectedMeter +
       '&periodtype=' + periodType +
-      '&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') +
-      '&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') +
-      '&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
-      '&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), {
+      '&baseperiodstartdatetime=' + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') +
+      '&baseperiodenddatetime=' + (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : '') +
+      '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
+      '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
       method: 'GET',
       headers: {
         "Content-type": "application/json",
@@ -551,37 +528,38 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
               </Col>
               <Col xs={6} sm={3}>
                 <FormGroup className="form-group">
-                  <Label className={labelClasses} for="basePeriodBeginsDatetime">
-                    {t('Base Period')}{t('(Optional)')}
+                  <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}
                   </Label>
-                  <DateRangePicker
-                    readOnly={basePeriodDatetimeDisabled}
-                    format="MM/dd/yyyy hh:mm aa"
-                    value={baseValues}
+                  <DateRangePicker 
+                    id='basePeriodDateRangePicker'
+                    readOnly={basePeriodDateRangePickerDisabled}
+                    format="yyyy-MM-dd hh:mm aa"
+                    value={basePeriodDateRange}
                     onChange={onBasePeriodChange}
                     size="md"
-                    style={styles}
-                    onClean={onBaseClean}
-                    locale={local}
+                    style={dateRangePickerStyle}
+                    onClean={onBasePeriodClean}
+                    locale={dateRangePickerLocale}
                     showMeridian
-                    placeholder={"~"}
+                    placeholder={t("Select Date Range")}
                    />
                 </FormGroup>
               </Col>
               <Col xs={6} sm={3}>
                 <FormGroup className="form-group">
-                  <Label className={labelClasses}>{t('Reporting Period')}</Label>
+                  <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
                   <br/>
                   <DateRangePicker
-                    format="MM/dd/yyyy hh:mm aa"
-                    value={values}
+                    id='reportingPeriodDateRangePicker'
+                    format="yyyy-MM-dd hh:mm aa"
+                    value={reportingPeriodDateRange}
+                    onChange={onReportingPeriodChange}
                     size="md"
-                    style={styles}
-                    onChange={onChange}
+                    style={dateRangePickerStyle}
+                    onClean={onReportingPeriodClean}
+                    locale={dateRangePickerLocale}
                     showMeridian
-                    placeholder="Select Date Range"
-                    onClean={onClean}
-                    locale={local}
+                    placeholder={t("Select Date Range")}
                   />
                 </FormGroup>
               </Col>
diff --git a/web/src/i18n.js b/web/src/i18n.js
index aa774c7d..80d633ed 100644
--- a/web/src/i18n.js
+++ b/web/src/i18n.js
@@ -134,6 +134,22 @@ const resources = {
       'Output Energy Category': 'Output Energy Category',
       'Fraction Parameter': 'Fraction Parameter',
       'Search': 'Search',
+      //DateRangePicker
+      'sunday': 'Su',
+      'monday': 'Mo',
+      'tuesday': 'Tu',
+      'wednesday': 'We',
+      'thursday': 'Th',
+      'friday': 'Fr',
+      'saturday': 'Sa',
+      'ok': 'OK',
+      'today': 'Today',
+      'yesterday': 'Yesterday',
+      'hours': 'Hours',
+      'minutes': 'Minutes',
+      'seconds': 'Seconds',
+      'last7Days': 'Last 7 Days',
+      'Select Date Range': 'Select Date Range',
       //Card Summaries and Line Charts
       'Base Period': 'Base Period',
       'Reporting Period': 'Reporting Period',
@@ -786,21 +802,6 @@ const resources = {
       'API.VIRTUAL_POINT_SHOULD_BE_ANALOG_VALUE': 'Virtual point should be analog value',
       'API.WEB_MESSAGE_NOT_FOUND': 'Web message not found',
       'API.WECHAT_MESSAGE_NOT_FOUND': 'Wechat message not found',
-      //DateRangePicker
-      'sunday': 'Su',
-      'monday': 'Mo',
-      'tuesday': 'Tu',
-      'wednesday': 'We',
-      'thursday': 'Th',
-      'friday': 'Fr',
-      'saturday': 'Sa',
-      'ok': 'OK',
-      'today': 'Today',
-      'yesterday': 'Yesterday',
-      'hours': 'Hours',
-      'minutes': 'Minutes',
-      'seconds': 'Seconds',
-      'last7Days': 'Last 7 Days'
     }
   },
   de: {
@@ -933,6 +934,22 @@ const resources = {
       'Output Energy Category': 'Ausgangsenergiekategorie',
       'Fraction Parameter': 'Fraktion Parameter',
       'Search': 'Suche',
+      //DateRangePicker
+      'sunday': 'So',
+      'monday': 'Mo',
+      'tuesday': 'Di',
+      'wednesday': 'Mi',
+      'thursday': 'Do',
+      'friday': 'Fr',
+      'saturday': 'Sa',
+      'ok': 'OKAY',
+      'today': 'Heute',
+      'yesterday': 'Gestern',
+      'hours': 'Stunden',
+      'minutes': 'Protokoll',
+      'seconds': 'Nachschlag',
+      'last7Days': 'Letzte 7 Tage',
+      'Select Date Range': 'Datumsbereich auswählen',
       //Card Summaries and Line Charts
       'Base Period': 'Basiszeitraum',
       'Reporting Period': 'Berichtszeitraum',
@@ -1596,21 +1613,6 @@ const resources = {
       'API.VIRTUAL_POINT_SHOULD_BE_ANALOG_VALUE': 'Virtual point should be analog value',
       'API.WEB_MESSAGE_NOT_FOUND': 'Web message not found',
       'API.WECHAT_MESSAGE_NOT_FOUND': 'Wechat message not found',
-      //DateRangePicker
-      'sunday': 'So',
-      'monday': 'Mo',
-      'tuesday': 'Di',
-      'wednesday': 'Mi',
-      'thursday': 'Do',
-      'friday': 'Fr',
-      'saturday': 'Sa',
-      'ok': 'OKAY',
-      'today': 'Heute',
-      'yesterday': 'Gestern',
-      'hours': 'Stunden',
-      'minutes': 'Protokoll',
-      'seconds': 'Nachschlag',
-      'last7Days': 'Letzte 7 Tage'
     }
   },
   zh_CN: {
@@ -1741,6 +1743,22 @@ const resources = {
       'Output Energy Category': '产出能源分类',
       'Fraction Parameter': '分式参数',
       'Search': '搜索',
+      //DateRangePicker
+      'sunday': '日',
+      'monday': '一',
+      'tuesday': '二',
+      'wednesday': '三',
+      'thursday': '四',
+      'friday': '五',
+      'saturday': '六',
+      'ok': '确定',
+      'today': '今天',
+      'yesterday': '昨天',
+      'hours': '时',
+      'minutes': '分',
+      'seconds': '秒',
+      'last7Days': '最近七天',
+      'Select Date Range': '选择日期范围',
       //Card Summaries and Line Charts
       'Base Period': '基准期',
       'Reporting Period': '报告期',
@@ -2379,21 +2397,6 @@ const resources = {
       'API.VIRTUAL_POINT_SHOULD_BE_ANALOG_VALUE': 'Virtual point should be analog value',
       'API.WEB_MESSAGE_NOT_FOUND': 'Web message not found',
       'API.WECHAT_MESSAGE_NOT_FOUND': 'Wechat message not found',
-      //DateRangePicker
-      'sunday': '日',
-      'monday': '一',
-      'tuesday': '二',
-      'wednesday': '三',
-      'thursday': '四',
-      'friday': '五',
-      'saturday': '六',
-      'ok': '确定',
-      'today': '今天',
-      'yesterday': '昨天',
-      'hours': '时',
-      'minutes': '分',
-      'seconds': '秒',
-      'last7Days': '最近七天',
     }
   }
 };