seg_yinzy
/
myems
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added rsuite/DateRangePicker to MeterEnergy

pull/125/head
Caozhenhui 2022-02-18 20:01:12 +08:00
parent 1488fcb646
commit 5ac1889af0
2 changed files with 23 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/App.js
View File

@ -2,10 +2,12 @@ import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom'; import { BrowserRouter as Router } from 'react-router-dom';
import Layout from './layouts/Layout'; import Layout from './layouts/Layout';
import 'rsuite/dist/rsuite.min.css';
import 'react-toastify/dist/ReactToastify.min.css'; import 'react-toastify/dist/ReactToastify.min.css';
import 'react-datetime/css/react-datetime.css'; import 'react-datetime/css/react-datetime.css';
import 'react-image-lightbox/style.css'; import 'react-image-lightbox/style.css';
const App = () => { const App = () => {
return ( return (
<Router basename={process.env.PUBLIC_URL}> <Router basename={process.env.PUBLIC_URL}>

56
web/src/components/MyEMS/Meter/MeterEnergy.js
View File

@ -31,8 +31,7 @@ import ButtonIcon from '../../common/ButtonIcon';
import { APIBaseURL } from '../../../config'; import { APIBaseURL } from '../../../config';
import { periodTypeOptions } from '../common/PeriodTypeOptions'; import { periodTypeOptions } from '../common/PeriodTypeOptions';
import { comparisonTypeOptions } from '../common/ComparisonTypeOptions'; import { comparisonTypeOptions } from '../common/ComparisonTypeOptions';
import DateTimeRangeContainer from 'react-advanced-datetimerange-picker'; import { DateRangePicker } from 'rsuite';
import { FormControl } from 'react-bootstrap';
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
@ -104,18 +103,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
]); ]);
const [detailedDataTableData, setDetailedDataTableData] = useState([]); const [detailedDataTableData, setDetailedDataTableData] = useState([]);
const [excelBytesBase64, setExcelBytesBase64] = useState(undefined); const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
const [local, setLocal] = useState({ const [values, setValues] = useState([reportingPeriodBeginsDatetime.toDate(), reportingPeriodEndsDatetime.toDate()]);
format: 'MM/DD/YYYY HH:mm:ss A',
sundayFirst: false
});
const [ranges, setRanges] = useState({
'Today Only': [moment(reportingPeriodEndsDatetime).subtract('1','days'), moment(reportingPeriodEndsDatetime)],
'Yesterday Only': [
moment().subtract(2, 'days'),
moment().subtract(1, 'days')
],
'Last 3 Days': [moment().subtract(3, 'days'), moment()],
});
useEffect(() => { useEffect(() => {
let isResponseOK = false; let isResponseOK = false;
@ -303,7 +291,10 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
setBasePeriodEndsDatetime(newDateTime); setBasePeriodEndsDatetime(newDateTime);
}; };
let applyCallback = (startDate, endDate) => { let onChange = (DateRange) => {
let startDate = moment(DateRange[0]);
let endDate = moment(DateRange[1]);
setValues([DateRange[0], DateRange[1]]);
setReportingPeriodBeginsDatetime(startDate); setReportingPeriodBeginsDatetime(startDate);
if (comparisonType === 'year-over-year') { if (comparisonType === 'year-over-year') {
setBasePeriodBeginsDatetime(startDate.clone().subtract(1, 'years')); setBasePeriodBeginsDatetime(startDate.clone().subtract(1, 'years'));
@ -318,6 +309,10 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
} }
}; };
let onClean = event => {
setValues([]);
};
var getValidBasePeriodBeginsDatetimes = function(currentDate) { var getValidBasePeriodBeginsDatetimes = function(currentDate) {
return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
}; };
@ -622,26 +617,17 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
</Col> </Col>
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses}> <Label className={labelClasses}>{t('Reporting Period')}</Label>
{t('Reporting Period')} <br/>
</Label> <DateRangePicker
<DateTimeRangeContainer format="MM/dd/yyyy hh:mm:ss aa"
start={reportingPeriodBeginsDatetime} value={values}
end={reportingPeriodEndsDatetime} size="sm"
local={local} onChange={onChange}
twelveHoursClock={true} showMeridian
applyCallback={applyCallback} placeholder="Select Date Range"
ranges={ranges} onClean={onClean}
> />
<FormControl
id="formControlsTextA"
type="text"
label="Text"
value={reportingPeriodBeginsDatetime.format('DD/MM/YYYY HH:mm:ss A') + " ~ " +
reportingPeriodEndsDatetime.format('DD/MM/YYYY HH:mm:ss A')
}
/>
</DateTimeRangeContainer>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">