From 3b93db726bd54c6d21f2fd5f6d8b1869a791210b Mon Sep 17 00:00:00 2001 From: Caozhenhui <823914102@qq.com> Date: Tue, 1 Mar 2022 14:42:06 +0800 Subject: [PATCH 1/2] added DateRangePicker to AdvancedReporting --- .../AdvancedReporting/AdvancedReporting.js | 91 +++++++++++-------- 1 file changed, 53 insertions(+), 38 deletions(-) diff --git a/web/src/components/MyEMS/AdvancedReporting/AdvancedReporting.js b/web/src/components/MyEMS/AdvancedReporting/AdvancedReporting.js index dc386ffa..65b18f8a 100644 --- a/web/src/components/MyEMS/AdvancedReporting/AdvancedReporting.js +++ b/web/src/components/MyEMS/AdvancedReporting/AdvancedReporting.js @@ -11,6 +11,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'; const AdvacnedReporting = ({ setRedirect, setRedirectUrl, t }) => { let current_moment = moment(); @@ -35,8 +37,24 @@ const AdvacnedReporting = ({ setRedirect, setRedirectUrl, t }) => { // State // Query Parameters - const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month')); - const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment); + 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}; // button const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false); @@ -47,28 +65,32 @@ const AdvacnedReporting = ({ setRedirect, setRedirectUrl, t }) => { const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0'; - let onReportingPeriodBeginsDatetimeChange = newDateTime => { - setReportingPeriodBeginsDatetime(newDateTime); + // Callback fired when value changed + 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(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); @@ -77,8 +99,8 @@ const AdvacnedReporting = ({ setRedirect, setRedirectUrl, t }) => { let isResponseOK = false; fetch(APIBaseURL + '/reports/advancedreports?' + - '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", @@ -137,26 +159,19 @@ const AdvacnedReporting = ({ setRedirect, setRedirectUrl, t }) => { - - - - - - - - + +
+ From bbacfdabe9681ef196d71e32170538e42de86e6a Mon Sep 17 00:00:00 2001 From: "13621160019@163.com" <13621160019@163.com> Date: Tue, 1 Mar 2022 23:02:46 +0800 Subject: [PATCH 2/2] replaced DateTime with DateRangePicker for Advanced reports in Web UI --- web/src/components/MyEMS/AdvancedReporting/AdvancedReporting.js | 1 - 1 file changed, 1 deletion(-) diff --git a/web/src/components/MyEMS/AdvancedReporting/AdvancedReporting.js b/web/src/components/MyEMS/AdvancedReporting/AdvancedReporting.js index 65b18f8a..29b14e81 100644 --- a/web/src/components/MyEMS/AdvancedReporting/AdvancedReporting.js +++ b/web/src/components/MyEMS/AdvancedReporting/AdvancedReporting.js @@ -2,7 +2,6 @@ import React, { Fragment, useEffect, useState } from 'react'; import { Alert, Row, Col, Card, CardBody, Button, ButtonGroup, Form, FormGroup, Label, Spinner } from 'reactstrap'; import Summary from './Summary'; import FalconCardHeader from '../../common/FalconCardHeader'; -import Datetime from 'react-datetime'; import moment from 'moment'; import createMarkup from '../../../helpers/createMarkup'; import { isIterableArray } from '../../../helpers/utils';