From 92a30c58b7ba882a9801779293043d10117ca08b Mon Sep 17 00:00:00 2001
From: Caozhenhui <823914102@qq.com>
Date: Wed, 2 Mar 2022 15:14:03 +0800
Subject: [PATCH 1/2] added DateRangePicker to EnergyFlowDiagram

---
 .../AuxiliarySystem/EnergyFlowDiagram.js      | 94 +++++++++++--------
 1 file changed, 54 insertions(+), 40 deletions(-)

diff --git a/web/src/components/MyEMS/AuxiliarySystem/EnergyFlowDiagram.js b/web/src/components/MyEMS/AuxiliarySystem/EnergyFlowDiagram.js
index ab83c872..0566ad44 100644
--- a/web/src/components/MyEMS/AuxiliarySystem/EnergyFlowDiagram.js
+++ b/web/src/components/MyEMS/AuxiliarySystem/EnergyFlowDiagram.js
@@ -25,6 +25,8 @@ import withRedirect from '../../../hoc/withRedirect';
 import { withTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import { APIBaseURL } from '../../../config';
+import { DateRangePicker } from 'rsuite';
+import { endOfDay} from 'date-fns';
 
 echarts.use([SankeyChart]);
 const EnergyFlowDiagram = ({ setRedirect, setRedirectUrl, t }) => {
@@ -51,8 +53,24 @@ const EnergyFlowDiagram = ({ setRedirect, setRedirectUrl, t }) => {
   // Query Parameters
   const [energyFlowDiagramList, setEnergyFlowDiagramList] = useState([]);
   const [selectedEnergyFlowDiagram, setSelectedEnergyFlowDiagram] = useState(undefined);
-  const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().subtract(1, 'months').startOf('month'));
-  const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'months').endOf('month'));
+  const [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([current_moment.clone().startOf('month').toDate(), current_moment.toDate()]);
+  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};
   const { isDark } = useContext(AppContext);
 
   // buttons
@@ -193,29 +211,32 @@ const EnergyFlowDiagram = ({ setRedirect, setRedirectUrl, t }) => {
     };
   };
 
-  let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
-    setReportingPeriodBeginsDatetime(newDateTime);
-  }
+  let onReportingPeriodChange = (DateRange) => {
+    if(DateRange == null) {
+      setReportingPeriodDateRange([null, null]);
+      setSubmitButtonDisabled(true);
+    } else {
+      if (moment(DateRange[1]).format('HH:mm:ss') == '00:00:00') {
+        // if the user did not change time value, set the default time to the end of day
+        DateRange[1] = endOfDay(DateRange[1]);
+      }
+      setReportingPeriodDateRange([DateRange[0], DateRange[1]]);
+      setSubmitButtonDisabled(false);
+    }
+  };
 
-  let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
-    setReportingPeriodEndsDatetime(newDateTime);
-  }
-
-  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'));
-  }
+  // Callback fired when value clean
+  let onReportingPeriodClean = event => {
+    setReportingPeriodDateRange([null, null]);
+  };
 
   // Handler
   const handleSubmit = e => {
     e.preventDefault();
     console.log('handleSubmit');
     console.log(selectedEnergyFlowDiagram);
-    console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
-    console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
+    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);
@@ -225,8 +246,8 @@ const EnergyFlowDiagram = ({ setRedirect, setRedirectUrl, t }) => {
     let isResponseOK = false;
     fetch(APIBaseURL + '/reports/energyflowdiagram?' +
       'energyflowdiagramid=' + selectedEnergyFlowDiagram +
-      '&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
-      '&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.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",
@@ -289,26 +310,19 @@ const EnergyFlowDiagram = ({ setRedirect, setRedirectUrl, t }) => {
               </Col>
               <Col xs="auto">
                 <FormGroup className="form-group">
-                  <Label className={labelClasses} for="reportingPeriodBeginsDatetime">
-                    {t('Reporting Period Begins')}
-                  </Label>
-                  <Datetime id='reportingPeriodBeginsDatetime'
-                    value={reportingPeriodBeginsDatetime}
-                    onChange={onReportingPeriodBeginsDatetimeChange}
-                    isValidDate={getValidReportingPeriodBeginsDatetimes}
-                    closeOnSelect={true} />
-                </FormGroup>
-              </Col>
-              <Col xs="auto">
-                <FormGroup className="form-group">
-                  <Label className={labelClasses} for="reportingPeriodEndsDatetime">
-                    {t('Reporting Period Ends')}
-                  </Label>
-                  <Datetime id='reportingPeriodEndsDatetime'
-                    value={reportingPeriodEndsDatetime}
-                    onChange={onReportingPeriodEndsDatetimeChange}
-                    isValidDate={getValidReportingPeriodEndsDatetimes}
-                    closeOnSelect={true} />
+                  <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
+                  <br/>
+                  <DateRangePicker
+                    id='reportingPeriodDateRangePicker'
+                    format="yyyy-MM-dd HH:mm:ss"
+                    value={reportingPeriodDateRange}
+                    onChange={onReportingPeriodChange}
+                    size="md"
+                    style={dateRangePickerStyle}
+                    onClean={onReportingPeriodClean}
+                    locale={dateRangePickerLocale}
+                    placeholder={t("Select Date Range")}
+                  />
                 </FormGroup>
               </Col>
               <Col xs="auto">

From e7ce1346900e4f62ff2023cd7f0770d8e0cd24c4 Mon Sep 17 00:00:00 2001
From: "13621160019@163.com" <13621160019@163.com>
Date: Wed, 2 Mar 2022 16:40:33 +0800
Subject: [PATCH 2/2] replaced DateTime with DateRangePicker for
 EnergyFlowDiagram in Web UI

---
 web/src/components/MyEMS/AuxiliarySystem/EnergyFlowDiagram.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/components/MyEMS/AuxiliarySystem/EnergyFlowDiagram.js b/web/src/components/MyEMS/AuxiliarySystem/EnergyFlowDiagram.js
index 0566ad44..08160552 100644
--- a/web/src/components/MyEMS/AuxiliarySystem/EnergyFlowDiagram.js
+++ b/web/src/components/MyEMS/AuxiliarySystem/EnergyFlowDiagram.js
@@ -14,7 +14,6 @@ import {
   CustomInput,
   Spinner,
 } from 'reactstrap';
-import Datetime from 'react-datetime';
 import moment from 'moment';
 import ReactEchartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/lib/echarts';