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

Merge branch 'develop'

pull/133/head
13621160019@163.com 2022-02-27 17:52:34 +08:00
parent a03059ba45 b9451abfec
commit 36ae5c3861
21 changed files with 973 additions and 1056 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/MyEMS/Meter/MeterBatch.js
View File

@ -297,7 +297,7 @@ const MeterBatch = ({ 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}>{t('Reporting Period')}</Label> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
<br/> <br/>
<DateRangePicker <DateRangePicker
id='reportingPeriodDateRangePicker' id='reportingPeriodDateRangePicker'

3
web/src/components/MyEMS/Meter/MeterCarbon.js
View File

@ -533,8 +533,7 @@ const MeterCarbon = ({ 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} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')} <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
</Label>
<DateRangePicker <DateRangePicker
id='basePeriodDateRangePicker' id='basePeriodDateRangePicker'
readOnly={basePeriodDateRangePickerDisabled} readOnly={basePeriodDateRangePickerDisabled}

3
web/src/components/MyEMS/Meter/MeterCost.js
View File

@ -533,8 +533,7 @@ const MeterCost = ({ 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} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')} <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
</Label>
<DateRangePicker <DateRangePicker
id='basePeriodDateRangePicker' id='basePeriodDateRangePicker'
readOnly={basePeriodDateRangePickerDisabled} readOnly={basePeriodDateRangePickerDisabled}

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

@ -30,7 +30,7 @@ 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 { DateRangePicker } from 'rsuite'; import { DateRangePicker } from 'rsuite';
import { startOfDay, endOfDay, addDays, subDays } from 'date-fns'; import { endOfDay} from 'date-fns';
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@ -542,9 +542,7 @@ 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} for="basePeriodBeginsDatetime"> <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
{t('Base Period')}{t('(Optional)')}
</Label>
<DateRangePicker <DateRangePicker
id='basePeriodDateRangePicker' id='basePeriodDateRangePicker'
readOnly={basePeriodDateRangePickerDisabled} readOnly={basePeriodDateRangePickerDisabled}
@ -561,7 +559,7 @@ 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}>{t('Reporting Period')}</Label> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
<br/> <br/>
<DateRangePicker <DateRangePicker
id='reportingPeriodDateRangePicker' id='reportingPeriodDateRangePicker'

2
web/src/components/MyEMS/Meter/MeterSubmetersBalance.js
View File

@ -466,7 +466,7 @@ const MeterSubmetersBalance = ({ 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}>{t('Reporting Period')}</Label> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
<br/> <br/>
<DateRangePicker <DateRangePicker
id='reportingPeriodDateRangePicker' id='reportingPeriodDateRangePicker'

2
web/src/components/MyEMS/Meter/MeterTracking.js
View File

@ -351,7 +351,7 @@ const MeterTracking = ({ 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}>{t('Reporting Period')}</Label> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
<br/> <br/>
<DateRangePicker <DateRangePicker
id='reportingPeriodDateRangePicker' id='reportingPeriodDateRangePicker'

2
web/src/components/MyEMS/Meter/MeterTrend.js
View File

@ -430,7 +430,7 @@ const MeterTrend = ({ 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}>{t('Reporting Period')}</Label> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
<br/> <br/>
<DateRangePicker <DateRangePicker
id='reportingPeriodDateRangePicker' id='reportingPeriodDateRangePicker'

3
web/src/components/MyEMS/Meter/OfflineMeterCost.js
View File

@ -509,8 +509,7 @@ const OfflineMeterCost = ({ 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} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')} <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
</Label>
<DateRangePicker <DateRangePicker
id='basePeriodDateRangePicker' id='basePeriodDateRangePicker'
readOnly={basePeriodDateRangePickerDisabled} readOnly={basePeriodDateRangePickerDisabled}

6
web/src/components/MyEMS/Meter/OfflineMeterEnergy.js
View File

@ -510,9 +510,7 @@ const OfflineMeterEnergy = ({ 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} for="basePeriodBeginsDatetime"> <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
{t('Base Period')}{t('(Optional)')}
</Label>
<DateRangePicker <DateRangePicker
id='basePeriodDateRangePicker' id='basePeriodDateRangePicker'
readOnly={basePeriodDateRangePickerDisabled} readOnly={basePeriodDateRangePickerDisabled}
@ -529,7 +527,7 @@ const OfflineMeterEnergy = ({ 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}>{t('Reporting Period')}</Label> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
<br/> <br/>
<DateRangePicker <DateRangePicker
id='reportingPeriodDateRangePicker' id='reportingPeriodDateRangePicker'

3
web/src/components/MyEMS/Meter/VirtualMeterCarbon.js
View File

@ -508,8 +508,7 @@ const VirtualMeterCarbon = ({ 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} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')} <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
</Label>
<DateRangePicker <DateRangePicker
id='basePeriodDateRangePicker' id='basePeriodDateRangePicker'
readOnly={basePeriodDateRangePickerDisabled} readOnly={basePeriodDateRangePickerDisabled}

3
web/src/components/MyEMS/Meter/VirtualMeterCost.js
View File

@ -509,8 +509,7 @@ const VirtualMeterCost = ({ 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} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')} <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
</Label>
<DateRangePicker <DateRangePicker
id='basePeriodDateRangePicker' id='basePeriodDateRangePicker'
readOnly={basePeriodDateRangePickerDisabled} readOnly={basePeriodDateRangePickerDisabled}

6
web/src/components/MyEMS/Meter/VirtualMeterEnergy.js
View File

@ -509,9 +509,7 @@ const VirtualMeterEnergy = ({ 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} for="basePeriodBeginsDatetime"> <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
{t('Base Period')}{t('(Optional)')}
</Label>
<DateRangePicker <DateRangePicker
id='basePeriodDateRangePicker' id='basePeriodDateRangePicker'
readOnly={basePeriodDateRangePickerDisabled} readOnly={basePeriodDateRangePickerDisabled}
@ -528,7 +526,7 @@ const VirtualMeterEnergy = ({ 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}>{t('Reporting Period')}</Label> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
<br/> <br/>
<DateRangePicker <DateRangePicker
id='reportingPeriodDateRangePicker' id='reportingPeriodDateRangePicker'

208
web/src/components/MyEMS/Space/SpaceCost.js
View File

@ -16,22 +16,23 @@ import {
Spinner Spinner
} from 'reactstrap'; } from 'reactstrap';
import CountUp from 'react-countup'; import CountUp from 'react-countup';
import Datetime from 'react-datetime';
import moment from 'moment'; import moment from 'moment';
import loadable from '@loadable/component';
import Cascader from 'rc-cascader'; import Cascader from 'rc-cascader';
import CardSummary from '../common/CardSummary'; import CardSummary from '../common/CardSummary';
import LineChart from '../common/LineChart'; import LineChart from '../common/LineChart';
import SharePie from '../common/SharePie'; import SharePie from '../common/SharePie';
import loadable from '@loadable/component';
import { getCookieValue, createCookie } from '../../../helpers/utils'; import { getCookieValue, createCookie } from '../../../helpers/utils';
import withRedirect from '../../../hoc/withRedirect'; import withRedirect from '../../../hoc/withRedirect';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import ButtonIcon from '../../common/ButtonIcon'; import ButtonIcon from '../../common/ButtonIcon';
import { APIBaseURL } from '../../../config'; import { APIBaseURL } from '../../../config';
import uuid from 'uuid/v1';
import { periodTypeOptions } from '../common/PeriodTypeOptions'; import { periodTypeOptions } from '../common/PeriodTypeOptions';
import { comparisonTypeOptions } from '../common/ComparisonTypeOptions'; import { comparisonTypeOptions } from '../common/ComparisonTypeOptions';
import uuid from 'uuid/v1'; import { DateRangePicker } from 'rsuite';
import { endOfDay} from 'date-fns';
const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable')); const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable'));
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@ -57,18 +58,32 @@ const SpaceCost = ({ setRedirect, setRedirectUrl, t }) => {
} }
}); });
// State // State
// Query Parameters
const [selectedSpaceName, setSelectedSpaceName] = useState(undefined); const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined); const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [comparisonType, setComparisonType] = useState('month-on-month'); const [comparisonType, setComparisonType] = useState('month-on-month');
const [periodType, setPeriodType] = useState('daily'); 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 [cascaderOptions, setCascaderOptions] = useState(undefined);
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 [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};
// buttons // buttons
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true); const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
@ -146,67 +161,61 @@ const SpaceCost = ({ setRedirect, setRedirectUrl, t }) => {
console.log(target.value); console.log(target.value);
setComparisonType(target.value); setComparisonType(target.value);
if (target.value === 'year-over-year') { if (target.value === 'year-over-year') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'years').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years')); moment(reportingPeriodDateRange[1]).subtract(1, 'years').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years'));
} else if (target.value === 'month-on-month') { } else if (target.value === 'month-on-month') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'months').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months')); moment(reportingPeriodDateRange[1]).subtract(1, 'months').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months'));
} else if (target.value === 'free-comparison') { } else if (target.value === 'free-comparison') {
setBasePeriodBeginsDatetimeDisabled(false); setBasePeriodDateRangePickerDisabled(false);
setBasePeriodEndsDatetimeDisabled(false);
} else if (target.value === 'none-comparison') { } else if (target.value === 'none-comparison') {
setBasePeriodBeginsDatetime(undefined); setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(undefined); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodBeginsDatetimeDisabled(true);
setBasePeriodEndsDatetimeDisabled(true);
}
} }
};
let onBasePeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setBasePeriodBeginsDatetime(newDateTime); let onBasePeriodChange = (DateRange) => {
if(DateRange == null) {
setBasePeriodDateRange([null, null]);
} 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]);
} }
setBasePeriodDateRange([DateRange[0], DateRange[1]]);
let onBasePeriodEndsDatetimeChange = (newDateTime) => {
setBasePeriodEndsDatetime(newDateTime);
} }
};
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setReportingPeriodBeginsDatetime(newDateTime); let onReportingPeriodChange = (DateRange) => {
if(DateRange == null) {
setReportingPeriodDateRange([null, null]);
} 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]]);
if (comparisonType === 'year-over-year') { if (comparisonType === 'year-over-year') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'years').toDate(), moment(DateRange[1]).clone().subtract(1, 'years').toDate()]);
} else if (comparisonType === 'month-on-month') { } else if (comparisonType === 'month-on-month') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'months').toDate(), moment(DateRange[1]).clone().subtract(1, 'months').toDate()]);
} }
} }
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { // Callback fired when value clean
setReportingPeriodEndsDatetime(newDateTime); let onBasePeriodClean = event => {
if (comparisonType === 'year-over-year') { setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'years')); };
} else if (comparisonType === 'month-on-month') {
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months'));
}
}
var getValidBasePeriodBeginsDatetimes = function (currentDate) { // Callback fired when value clean
return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); let onReportingPeriodClean = event => {
} setReportingPeriodDateRange([null, null]);
};
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 // Handler
const handleSubmit = e => { const handleSubmit = e => {
@ -215,10 +224,10 @@ const SpaceCost = ({ setRedirect, setRedirectUrl, t }) => {
console.log(selectedSpaceID); console.log(selectedSpaceID);
console.log(comparisonType); console.log(comparisonType);
console.log(periodType); console.log(periodType);
console.log(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button // disable submit button
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
@ -235,10 +244,10 @@ const SpaceCost = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/reports/spacecost?' + fetch(APIBaseURL + '/reports/spacecost?' +
'spaceid=' + selectedSpaceID + 'spaceid=' + selectedSpaceID +
'&periodtype=' + periodType + '&periodtype=' + periodType +
'&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodstartdatetime=' + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodenddatetime=' + (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), { '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
@ -611,52 +620,36 @@ const SpaceCost = ({ 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} for="basePeriodBeginsDatetime"> <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
{t('Base Period Begins')}{t('(Optional)')} <DateRangePicker
</Label> id='basePeriodDateRangePicker'
<Datetime id='basePeriodBeginsDatetime' readOnly={basePeriodDateRangePickerDisabled}
value={basePeriodBeginsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }} value={basePeriodDateRange}
onChange={onBasePeriodBeginsDatetimeChange} onChange={onBasePeriodChange}
isValidDate={getValidBasePeriodBeginsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
onClean={onBasePeriodClean}
locale={dateRangePickerLocale}
placeholder={t("Select Date Range")}
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="basePeriodEndsDatetime"> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
{t('Base Period Ends')}{t('(Optional)')} <br/>
</Label> <DateRangePicker
<Datetime id='basePeriodEndsDatetime' id='reportingPeriodDateRangePicker'
value={basePeriodEndsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodEndsDatetimeDisabled }} value={reportingPeriodDateRange}
onChange={onBasePeriodEndsDatetimeChange} onChange={onReportingPeriodChange}
isValidDate={getValidBasePeriodEndsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
</FormGroup> onClean={onReportingPeriodClean}
</Col> locale={dateRangePickerLocale}
<Col xs={6} sm={3}> placeholder={t("Select Date Range")}
<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={6} sm={3}>
<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} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
@ -737,6 +730,7 @@ const SpaceCost = ({ setRedirect, setRedirectUrl, t }) => {
data={parameterLineChartData} data={parameterLineChartData}
options={parameterLineChartOptions}> options={parameterLineChartOptions}>
</LineChart> </LineChart>
<DetailedDataTable data={detailedDataTableData} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} > <DetailedDataTable data={detailedDataTableData} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} >
</DetailedDataTable> </DetailedDataTable>
<br /> <br />

203
web/src/components/MyEMS/Space/SpaceEfficiency.js
View File

@ -16,7 +16,6 @@ import {
Spinner Spinner
} from 'reactstrap'; } from 'reactstrap';
import CountUp from 'react-countup'; import CountUp from 'react-countup';
import Datetime from 'react-datetime';
import moment from 'moment'; import moment from 'moment';
import loadable from '@loadable/component'; import loadable from '@loadable/component';
import Cascader from 'rc-cascader'; import Cascader from 'rc-cascader';
@ -30,7 +29,8 @@ 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 { DateRangePicker } from 'rsuite';
import { endOfDay} from 'date-fns';
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@ -60,13 +60,27 @@ const SpaceEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined); const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [comparisonType, setComparisonType] = useState('month-on-month'); const [comparisonType, setComparisonType] = useState('month-on-month');
const [periodType, setPeriodType] = useState('daily'); 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 [cascaderOptions, setCascaderOptions] = useState(undefined);
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 [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};
// buttons // buttons
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true); const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
@ -131,72 +145,65 @@ const SpaceEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
setSelectedSpaceID(value[value.length - 1]); setSelectedSpaceID(value[value.length - 1]);
} }
let onComparisonTypeChange = ({ target }) => { let onComparisonTypeChange = ({ target }) => {
console.log(target.value); console.log(target.value);
setComparisonType(target.value); setComparisonType(target.value);
if (target.value === 'year-over-year') { if (target.value === 'year-over-year') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'years').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years')); moment(reportingPeriodDateRange[1]).subtract(1, 'years').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years'));
} else if (target.value === 'month-on-month') { } else if (target.value === 'month-on-month') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'months').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months')); moment(reportingPeriodDateRange[1]).subtract(1, 'months').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months'));
} else if (target.value === 'free-comparison') { } else if (target.value === 'free-comparison') {
setBasePeriodBeginsDatetimeDisabled(false); setBasePeriodDateRangePickerDisabled(false);
setBasePeriodEndsDatetimeDisabled(false);
} else if (target.value === 'none-comparison') { } else if (target.value === 'none-comparison') {
setBasePeriodBeginsDatetime(undefined); setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(undefined); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodBeginsDatetimeDisabled(true);
setBasePeriodEndsDatetimeDisabled(true);
}
} }
};
let onBasePeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setBasePeriodBeginsDatetime(newDateTime); let onBasePeriodChange = (DateRange) => {
if(DateRange == null) {
setBasePeriodDateRange([null, null]);
} 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]);
} }
setBasePeriodDateRange([DateRange[0], DateRange[1]]);
let onBasePeriodEndsDatetimeChange = (newDateTime) => {
setBasePeriodEndsDatetime(newDateTime);
} }
};
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setReportingPeriodBeginsDatetime(newDateTime); let onReportingPeriodChange = (DateRange) => {
if(DateRange == null) {
setReportingPeriodDateRange([null, null]);
} 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]]);
if (comparisonType === 'year-over-year') { if (comparisonType === 'year-over-year') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'years').toDate(), moment(DateRange[1]).clone().subtract(1, 'years').toDate()]);
} else if (comparisonType === 'month-on-month') { } else if (comparisonType === 'month-on-month') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'months').toDate(), moment(DateRange[1]).clone().subtract(1, 'months').toDate()]);
} }
} }
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { // Callback fired when value clean
setReportingPeriodEndsDatetime(newDateTime); let onBasePeriodClean = event => {
if (comparisonType === 'year-over-year') { setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'years')); };
} else if (comparisonType === 'month-on-month') {
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months'));
}
}
var getValidBasePeriodBeginsDatetimes = function (currentDate) { // Callback fired when value clean
return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); let onReportingPeriodClean = event => {
} setReportingPeriodDateRange([null, null]);
};
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 // Handler
const handleSubmit = e => { const handleSubmit = e => {
@ -205,10 +212,10 @@ const SpaceEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
console.log(selectedSpaceID); console.log(selectedSpaceID);
console.log(comparisonType); console.log(comparisonType);
console.log(periodType); console.log(periodType);
console.log(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button // disable submit button
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
@ -224,10 +231,10 @@ const SpaceEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/reports/spaceefficiency?' + fetch(APIBaseURL + '/reports/spaceefficiency?' +
'spaceid=' + selectedSpaceID + 'spaceid=' + selectedSpaceID +
'&periodtype=' + periodType + '&periodtype=' + periodType +
'&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodstartdatetime=' + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodenddatetime=' + (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), { '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
@ -447,52 +454,36 @@ const SpaceEfficiency = ({ 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} for="basePeriodBeginsDatetime"> <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
{t('Base Period Begins')}{t('(Optional)')} <DateRangePicker
</Label> id='basePeriodDateRangePicker'
<Datetime id='basePeriodBeginsDatetime' readOnly={basePeriodDateRangePickerDisabled}
value={basePeriodBeginsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }} value={basePeriodDateRange}
onChange={onBasePeriodBeginsDatetimeChange} onChange={onBasePeriodChange}
isValidDate={getValidBasePeriodBeginsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
onClean={onBasePeriodClean}
locale={dateRangePickerLocale}
placeholder={t("Select Date Range")}
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="basePeriodEndsDatetime"> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
{t('Base Period Ends')}{t('(Optional)')} <br/>
</Label> <DateRangePicker
<Datetime id='basePeriodEndsDatetime' id='reportingPeriodDateRangePicker'
value={basePeriodEndsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodEndsDatetimeDisabled }} value={reportingPeriodDateRange}
onChange={onBasePeriodEndsDatetimeChange} onChange={onReportingPeriodChange}
isValidDate={getValidBasePeriodEndsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
</FormGroup> onClean={onReportingPeriodClean}
</Col> locale={dateRangePickerLocale}
<Col xs={6} sm={3}> placeholder={t("Select Date Range")}
<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={6} sm={3}>
<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} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">

218
web/src/components/MyEMS/Space/SpaceEnergyCategory.js
View File

@ -16,7 +16,6 @@ import {
Spinner Spinner
} from 'reactstrap'; } from 'reactstrap';
import CountUp from 'react-countup'; import CountUp from 'react-countup';
import Datetime from 'react-datetime';
import moment from 'moment'; import moment from 'moment';
import loadable from '@loadable/component'; import loadable from '@loadable/component';
import Cascader from 'rc-cascader'; import Cascader from 'rc-cascader';
@ -26,17 +25,18 @@ import SharePie from '../common/SharePie';
import { getCookieValue, createCookie } from '../../../helpers/utils'; import { getCookieValue, createCookie } from '../../../helpers/utils';
import withRedirect from '../../../hoc/withRedirect'; import withRedirect from '../../../hoc/withRedirect';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import { periodTypeOptions } from '../common/PeriodTypeOptions';
import { comparisonTypeOptions } from '../common/ComparisonTypeOptions';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import ButtonIcon from '../../common/ButtonIcon'; import ButtonIcon from '../../common/ButtonIcon';
import { APIBaseURL } from '../../../config'; import { APIBaseURL } from '../../../config';
import uuid from 'uuid/v1'; import uuid from 'uuid/v1';
import { periodTypeOptions } from '../common/PeriodTypeOptions';
import { comparisonTypeOptions } from '../common/ComparisonTypeOptions';
import { DateRangePicker } from 'rsuite';
import { endOfDay} from 'date-fns';
const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable')); const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable'));
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
const SpaceEnergyCategory = ({ setRedirect, setRedirectUrl, t }) => { const SpaceEnergyCategory = ({ setRedirect, setRedirectUrl, t }) => {
let current_moment = moment(); let current_moment = moment();
useEffect(() => { useEffect(() => {
@ -65,13 +65,27 @@ const SpaceEnergyCategory = ({ setRedirect, setRedirectUrl, t }) => {
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined); const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [comparisonType, setComparisonType] = useState('month-on-month'); const [comparisonType, setComparisonType] = useState('month-on-month');
const [periodType, setPeriodType] = useState('daily'); 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 [cascaderOptions, setCascaderOptions] = useState(undefined);
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 [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};
// buttons // buttons
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true); const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
@ -115,7 +129,7 @@ const SpaceEnergyCategory = ({ setRedirect, setRedirectUrl, t }) => {
body: null, body: null,
}).then(response => { }).then(response => {
console.log(response) console.log(response);
if (response.ok) { if (response.ok) {
isResponseOK = true; isResponseOK = true;
// enable submit button // enable submit button
@ -123,15 +137,15 @@ const SpaceEnergyCategory = ({ setRedirect, setRedirectUrl, t }) => {
} }
return response.json(); return response.json();
}).then(json => { }).then(json => {
console.log(json) console.log(json);
if (isResponseOK) { if (isResponseOK) {
// rename keys // rename keys
json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":')); json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
setCascaderOptions(json); setCascaderOptions(json);
setSelectedSpaceName([json[0]].map(o => o.label)) setSelectedSpaceName([json[0]].map(o => o.label));
setSelectedSpaceID([json[0]].map(o => o.value)); setSelectedSpaceID([json[0]].map(o => o.value));
} else { } else {
toast.error(json.description) toast.error(json.description);
} }
}).catch(err => { }).catch(err => {
console.log(err); console.log(err);
@ -143,7 +157,7 @@ const SpaceEnergyCategory = ({ setRedirect, setRedirectUrl, t }) => {
let onSpaceCascaderChange = (value, selectedOptions) => { let onSpaceCascaderChange = (value, selectedOptions) => {
console.log(value, selectedOptions); console.log(value, selectedOptions);
setSelectedSpaceName(selectedOptions.map(o => o.label).join('/')) setSelectedSpaceName(selectedOptions.map(o => o.label).join('/'));
setSelectedSpaceID(value[value.length - 1]); setSelectedSpaceID(value[value.length - 1]);
} }
@ -151,68 +165,61 @@ const SpaceEnergyCategory = ({ setRedirect, setRedirectUrl, t }) => {
console.log(target.value); console.log(target.value);
setComparisonType(target.value); setComparisonType(target.value);
if (target.value === 'year-over-year') { if (target.value === 'year-over-year') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'years').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years')); moment(reportingPeriodDateRange[1]).subtract(1, 'years').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years'));
} else if (target.value === 'month-on-month') { } else if (target.value === 'month-on-month') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'months').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months')); moment(reportingPeriodDateRange[1]).subtract(1, 'months').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months'));
} else if (target.value === 'free-comparison') { } else if (target.value === 'free-comparison') {
setBasePeriodBeginsDatetimeDisabled(false); setBasePeriodDateRangePickerDisabled(false);
setBasePeriodEndsDatetimeDisabled(false);
} else if (target.value === 'none-comparison') { } else if (target.value === 'none-comparison') {
setBasePeriodBeginsDatetime(undefined); setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(undefined); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodBeginsDatetimeDisabled(true);
setBasePeriodEndsDatetimeDisabled(true);
}
} }
};
let onBasePeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setBasePeriodBeginsDatetime(newDateTime); let onBasePeriodChange = (DateRange) => {
if(DateRange == null) {
setBasePeriodDateRange([null, null]);
} 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]);
} }
setBasePeriodDateRange([DateRange[0], DateRange[1]]);
let onBasePeriodEndsDatetimeChange = (newDateTime) => {
setBasePeriodEndsDatetime(newDateTime);
} }
};
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setReportingPeriodBeginsDatetime(newDateTime); let onReportingPeriodChange = (DateRange) => {
if(DateRange == null) {
setReportingPeriodDateRange([null, null]);
} 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]]);
if (comparisonType === 'year-over-year') { if (comparisonType === 'year-over-year') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'years').toDate(), moment(DateRange[1]).clone().subtract(1, 'years').toDate()]);
} else if (comparisonType === 'month-on-month') { } else if (comparisonType === 'month-on-month') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'months').toDate(), moment(DateRange[1]).clone().subtract(1, 'months').toDate()]);
} }
} }
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { // Callback fired when value clean
setReportingPeriodEndsDatetime(newDateTime); let onBasePeriodClean = event => {
if (comparisonType === 'year-over-year') { setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'years')); };
} 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'));
}
// Callback fired when value clean
let onReportingPeriodClean = event => {
setReportingPeriodDateRange([null, null]);
};
// Handler // Handler
const handleSubmit = e => { const handleSubmit = e => {
@ -221,10 +228,10 @@ const SpaceEnergyCategory = ({ setRedirect, setRedirectUrl, t }) => {
console.log(selectedSpaceID); console.log(selectedSpaceID);
console.log(comparisonType); console.log(comparisonType);
console.log(periodType); console.log(periodType);
console.log(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button // disable submit button
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
@ -241,10 +248,10 @@ const SpaceEnergyCategory = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/reports/spaceenergycategory?' + fetch(APIBaseURL + '/reports/spaceenergycategory?' +
'spaceid=' + selectedSpaceID + 'spaceid=' + selectedSpaceID +
'&periodtype=' + periodType + '&periodtype=' + periodType +
'&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodstartdatetime=' + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodenddatetime=' + (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), { '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
@ -500,7 +507,6 @@ const SpaceEnergyCategory = ({ setRedirect, setRedirectUrl, t }) => {
// show export button // show export button
setExportButtonHidden(false) setExportButtonHidden(false)
} else { } else {
toast.error(json.description) toast.error(json.description)
} }
@ -585,52 +591,36 @@ const SpaceEnergyCategory = ({ 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} for="basePeriodBeginsDatetime"> <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
{t('Base Period Begins')}{t('(Optional)')} <DateRangePicker
</Label> id='basePeriodDateRangePicker'
<Datetime id='basePeriodBeginsDatetime' readOnly={basePeriodDateRangePickerDisabled}
value={basePeriodBeginsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }} value={basePeriodDateRange}
onChange={onBasePeriodBeginsDatetimeChange} onChange={onBasePeriodChange}
isValidDate={getValidBasePeriodBeginsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
onClean={onBasePeriodClean}
locale={dateRangePickerLocale}
placeholder={t("Select Date Range")}
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="basePeriodEndsDatetime"> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
{t('Base Period Ends')}{t('(Optional)')} <br/>
</Label> <DateRangePicker
<Datetime id='basePeriodEndsDatetime' id='reportingPeriodDateRangePicker'
value={basePeriodEndsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodEndsDatetimeDisabled }} value={reportingPeriodDateRange}
onChange={onBasePeriodEndsDatetimeChange} onChange={onReportingPeriodChange}
isValidDate={getValidBasePeriodEndsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
</FormGroup> onClean={onReportingPeriodClean}
</Col> locale={dateRangePickerLocale}
<Col xs={6} sm={3}> placeholder={t("Select Date Range")}
<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={6} sm={3}>
<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} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">

207
web/src/components/MyEMS/Space/SpaceEnergyItem.js
View File

@ -16,13 +16,12 @@ import {
Spinner Spinner
} from 'reactstrap'; } from 'reactstrap';
import CountUp from 'react-countup'; import CountUp from 'react-countup';
import Datetime from 'react-datetime';
import moment from 'moment'; import moment from 'moment';
import loadable from '@loadable/component';
import Cascader from 'rc-cascader'; import Cascader from 'rc-cascader';
import CardSummary from '../common/CardSummary'; import CardSummary from '../common/CardSummary';
import SharePie from '../common/SharePie';
import LineChart from '../common/LineChart'; import LineChart from '../common/LineChart';
import loadable from '@loadable/component'; import SharePie from '../common/SharePie';
import { getCookieValue, createCookie } from '../../../helpers/utils'; import { getCookieValue, createCookie } from '../../../helpers/utils';
import withRedirect from '../../../hoc/withRedirect'; import withRedirect from '../../../hoc/withRedirect';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
@ -31,7 +30,8 @@ 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 { DateRangePicker } from 'rsuite';
import { endOfDay} from 'date-fns';
const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable')); const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable'));
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@ -62,13 +62,27 @@ const SpaceEnergyItem = ({ setRedirect, setRedirectUrl, t }) => {
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined); const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [comparisonType, setComparisonType] = useState('month-on-month'); const [comparisonType, setComparisonType] = useState('month-on-month');
const [periodType, setPeriodType] = useState('daily'); 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 [cascaderOptions, setCascaderOptions] = useState(undefined);
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 [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};
// buttons // buttons
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true); const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
@ -128,6 +142,7 @@ const SpaceEnergyItem = ({ setRedirect, setRedirectUrl, t }) => {
}); });
}, []); }, []);
const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0'; const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
let onSpaceCascaderChange = (value, selectedOptions) => { let onSpaceCascaderChange = (value, selectedOptions) => {
@ -141,67 +156,61 @@ const SpaceEnergyItem = ({ setRedirect, setRedirectUrl, t }) => {
console.log(target.value); console.log(target.value);
setComparisonType(target.value); setComparisonType(target.value);
if (target.value === 'year-over-year') { if (target.value === 'year-over-year') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'years').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years')); moment(reportingPeriodDateRange[1]).subtract(1, 'years').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years'));
} else if (target.value === 'month-on-month') { } else if (target.value === 'month-on-month') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'months').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months')); moment(reportingPeriodDateRange[1]).subtract(1, 'months').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months'));
} else if (target.value === 'free-comparison') { } else if (target.value === 'free-comparison') {
setBasePeriodBeginsDatetimeDisabled(false); setBasePeriodDateRangePickerDisabled(false);
setBasePeriodEndsDatetimeDisabled(false);
} else if (target.value === 'none-comparison') { } else if (target.value === 'none-comparison') {
setBasePeriodBeginsDatetime(undefined); setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(undefined); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodBeginsDatetimeDisabled(true);
setBasePeriodEndsDatetimeDisabled(true);
}
} }
};
let onBasePeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setBasePeriodBeginsDatetime(newDateTime); let onBasePeriodChange = (DateRange) => {
if(DateRange == null) {
setBasePeriodDateRange([null, null]);
} 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]);
} }
setBasePeriodDateRange([DateRange[0], DateRange[1]]);
let onBasePeriodEndsDatetimeChange = (newDateTime) => {
setBasePeriodEndsDatetime(newDateTime);
} }
};
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setReportingPeriodBeginsDatetime(newDateTime); let onReportingPeriodChange = (DateRange) => {
if(DateRange == null) {
setReportingPeriodDateRange([null, null]);
} 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]]);
if (comparisonType === 'year-over-year') { if (comparisonType === 'year-over-year') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'years').toDate(), moment(DateRange[1]).clone().subtract(1, 'years').toDate()]);
} else if (comparisonType === 'month-on-month') { } else if (comparisonType === 'month-on-month') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'months').toDate(), moment(DateRange[1]).clone().subtract(1, 'months').toDate()]);
} }
} }
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { // Callback fired when value clean
setReportingPeriodEndsDatetime(newDateTime); let onBasePeriodClean = event => {
if (comparisonType === 'year-over-year') { setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'years')); };
} else if (comparisonType === 'month-on-month') {
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months'));
}
}
var getValidBasePeriodBeginsDatetimes = function (currentDate) { // Callback fired when value clean
return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); let onReportingPeriodClean = event => {
} setReportingPeriodDateRange([null, null]);
};
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 // Handler
const handleSubmit = e => { const handleSubmit = e => {
@ -210,10 +219,10 @@ const SpaceEnergyItem = ({ setRedirect, setRedirectUrl, t }) => {
console.log(selectedSpaceID); console.log(selectedSpaceID);
console.log(comparisonType); console.log(comparisonType);
console.log(periodType); console.log(periodType);
console.log(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button // disable submit button
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
@ -230,10 +239,10 @@ const SpaceEnergyItem = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/reports/spaceenergyitem?' + fetch(APIBaseURL + '/reports/spaceenergyitem?' +
'spaceid=' + selectedSpaceID + 'spaceid=' + selectedSpaceID +
'&periodtype=' + periodType + '&periodtype=' + periodType +
'&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodstartdatetime=' + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodenddatetime=' + (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), { '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
@ -518,52 +527,36 @@ const SpaceEnergyItem = ({ 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} for="basePeriodBeginsDatetime"> <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
{t('Base Period Begins')}{t('(Optional)')} <DateRangePicker
</Label> id='basePeriodDateRangePicker'
<Datetime id='basePeriodBeginsDatetime' readOnly={basePeriodDateRangePickerDisabled}
value={basePeriodBeginsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }} value={basePeriodDateRange}
onChange={onBasePeriodBeginsDatetimeChange} onChange={onBasePeriodChange}
isValidDate={getValidBasePeriodBeginsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
onClean={onBasePeriodClean}
locale={dateRangePickerLocale}
placeholder={t("Select Date Range")}
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="basePeriodEndsDatetime"> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
{t('Base Period Ends')}{t('(Optional)')} <br/>
</Label> <DateRangePicker
<Datetime id='basePeriodEndsDatetime' id='reportingPeriodDateRangePicker'
value={basePeriodEndsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodEndsDatetimeDisabled }} value={reportingPeriodDateRange}
onChange={onBasePeriodEndsDatetimeChange} onChange={onReportingPeriodChange}
isValidDate={getValidBasePeriodEndsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
</FormGroup> onClean={onReportingPeriodClean}
</Col> locale={dateRangePickerLocale}
<Col xs={6} sm={3}> placeholder={t("Select Date Range")}
<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={6} sm={3}>
<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} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">

205
web/src/components/MyEMS/Space/SpaceIncome.js
View File

@ -16,7 +16,6 @@ import {
Spinner Spinner
} from 'reactstrap'; } from 'reactstrap';
import CountUp from 'react-countup'; import CountUp from 'react-countup';
import Datetime from 'react-datetime';
import moment from 'moment'; import moment from 'moment';
import loadable from '@loadable/component'; import loadable from '@loadable/component';
import Cascader from 'rc-cascader'; import Cascader from 'rc-cascader';
@ -31,7 +30,8 @@ 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 { DateRangePicker } from 'rsuite';
import { endOfDay} from 'date-fns';
const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable')); const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable'));
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@ -62,13 +62,27 @@ const SpaceIncome = ({ setRedirect, setRedirectUrl, t }) => {
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined); const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [comparisonType, setComparisonType] = useState('month-on-month'); const [comparisonType, setComparisonType] = useState('month-on-month');
const [periodType, setPeriodType] = useState('daily'); 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 [cascaderOptions, setCascaderOptions] = useState(undefined);
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 [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};
// buttons // buttons
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true); const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
@ -129,8 +143,8 @@ const SpaceIncome = ({ setRedirect, setRedirectUrl, t }) => {
}); });
}, []); }, []);
const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
let onSpaceCascaderChange = (value, selectedOptions) => { let onSpaceCascaderChange = (value, selectedOptions) => {
console.log(value, selectedOptions); console.log(value, selectedOptions);
@ -138,72 +152,65 @@ const SpaceIncome = ({ setRedirect, setRedirectUrl, t }) => {
setSelectedSpaceID(value[value.length - 1]); setSelectedSpaceID(value[value.length - 1]);
} }
let onComparisonTypeChange = ({ target }) => { let onComparisonTypeChange = ({ target }) => {
console.log(target.value); console.log(target.value);
setComparisonType(target.value); setComparisonType(target.value);
if (target.value === 'year-over-year') { if (target.value === 'year-over-year') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'years').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years')); moment(reportingPeriodDateRange[1]).subtract(1, 'years').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years'));
} else if (target.value === 'month-on-month') { } else if (target.value === 'month-on-month') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'months').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months')); moment(reportingPeriodDateRange[1]).subtract(1, 'months').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months'));
} else if (target.value === 'free-comparison') { } else if (target.value === 'free-comparison') {
setBasePeriodBeginsDatetimeDisabled(false); setBasePeriodDateRangePickerDisabled(false);
setBasePeriodEndsDatetimeDisabled(false);
} else if (target.value === 'none-comparison') { } else if (target.value === 'none-comparison') {
setBasePeriodBeginsDatetime(undefined); setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(undefined); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodBeginsDatetimeDisabled(true);
setBasePeriodEndsDatetimeDisabled(true);
}
} }
};
let onBasePeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setBasePeriodBeginsDatetime(newDateTime); let onBasePeriodChange = (DateRange) => {
if(DateRange == null) {
setBasePeriodDateRange([null, null]);
} 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]);
} }
setBasePeriodDateRange([DateRange[0], DateRange[1]]);
let onBasePeriodEndsDatetimeChange = (newDateTime) => {
setBasePeriodEndsDatetime(newDateTime);
} }
};
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setReportingPeriodBeginsDatetime(newDateTime); let onReportingPeriodChange = (DateRange) => {
if(DateRange == null) {
setReportingPeriodDateRange([null, null]);
} 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]]);
if (comparisonType === 'year-over-year') { if (comparisonType === 'year-over-year') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'years').toDate(), moment(DateRange[1]).clone().subtract(1, 'years').toDate()]);
} else if (comparisonType === 'month-on-month') { } else if (comparisonType === 'month-on-month') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'months').toDate(), moment(DateRange[1]).clone().subtract(1, 'months').toDate()]);
} }
} }
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { // Callback fired when value clean
setReportingPeriodEndsDatetime(newDateTime); let onBasePeriodClean = event => {
if (comparisonType === 'year-over-year') { setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'years')); };
} else if (comparisonType === 'month-on-month') {
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months'));
}
}
var getValidBasePeriodBeginsDatetimes = function (currentDate) { // Callback fired when value clean
return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); let onReportingPeriodClean = event => {
} setReportingPeriodDateRange([null, null]);
};
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 // Handler
const handleSubmit = e => { const handleSubmit = e => {
@ -212,10 +219,10 @@ const SpaceIncome = ({ setRedirect, setRedirectUrl, t }) => {
console.log(selectedSpaceID); console.log(selectedSpaceID);
console.log(comparisonType); console.log(comparisonType);
console.log(periodType); console.log(periodType);
console.log(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button // disable submit button
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
@ -232,10 +239,10 @@ const SpaceIncome = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/reports/spaceincome?' + fetch(APIBaseURL + '/reports/spaceincome?' +
'spaceid=' + selectedSpaceID + 'spaceid=' + selectedSpaceID +
'&periodtype=' + periodType + '&periodtype=' + periodType +
'&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodstartdatetime=' + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodenddatetime=' + (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), { '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
@ -535,52 +542,36 @@ const SpaceIncome = ({ 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} for="basePeriodBeginsDatetime"> <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
{t('Base Period Begins')}{t('(Optional)')} <DateRangePicker
</Label> id='basePeriodDateRangePicker'
<Datetime id='basePeriodBeginsDatetime' readOnly={basePeriodDateRangePickerDisabled}
value={basePeriodBeginsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }} value={basePeriodDateRange}
onChange={onBasePeriodBeginsDatetimeChange} onChange={onBasePeriodChange}
isValidDate={getValidBasePeriodBeginsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
onClean={onBasePeriodClean}
locale={dateRangePickerLocale}
placeholder={t("Select Date Range")}
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="basePeriodEndsDatetime"> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
{t('Base Period Ends')}{t('(Optional)')} <br/>
</Label> <DateRangePicker
<Datetime id='basePeriodEndsDatetime' id='reportingPeriodDateRangePicker'
value={basePeriodEndsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodEndsDatetimeDisabled }} value={reportingPeriodDateRange}
onChange={onBasePeriodEndsDatetimeChange} onChange={onReportingPeriodChange}
isValidDate={getValidBasePeriodEndsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
</FormGroup> onClean={onReportingPeriodClean}
</Col> locale={dateRangePickerLocale}
<Col xs={6} sm={3}> placeholder={t("Select Date Range")}
<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={6} sm={3}>
<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} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">

204
web/src/components/MyEMS/Space/SpaceLoad.js
View File

@ -16,7 +16,6 @@ import {
Spinner Spinner
} from 'reactstrap'; } from 'reactstrap';
import CountUp from 'react-countup'; import CountUp from 'react-countup';
import Datetime from 'react-datetime';
import moment from 'moment'; import moment from 'moment';
import loadable from '@loadable/component'; import loadable from '@loadable/component';
import Cascader from 'rc-cascader'; import Cascader from 'rc-cascader';
@ -30,6 +29,8 @@ 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 { DateRangePicker } from 'rsuite';
import { endOfDay} from 'date-fns';
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@ -60,13 +61,27 @@ const SpaceLoad = ({ setRedirect, setRedirectUrl, t }) => {
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined); const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [comparisonType, setComparisonType] = useState('month-on-month'); const [comparisonType, setComparisonType] = useState('month-on-month');
const [periodType, setPeriodType] = useState('daily'); 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 [cascaderOptions, setCascaderOptions] = useState(undefined);
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 [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};
// buttons // buttons
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true); const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
@ -122,8 +137,8 @@ const SpaceLoad = ({ setRedirect, setRedirectUrl, t }) => {
}); });
}, []); }, []);
const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
let onSpaceCascaderChange = (value, selectedOptions) => { let onSpaceCascaderChange = (value, selectedOptions) => {
console.log(value, selectedOptions); console.log(value, selectedOptions);
@ -131,72 +146,65 @@ const SpaceLoad = ({ setRedirect, setRedirectUrl, t }) => {
setSelectedSpaceID(value[value.length - 1]); setSelectedSpaceID(value[value.length - 1]);
} }
let onComparisonTypeChange = ({ target }) => { let onComparisonTypeChange = ({ target }) => {
console.log(target.value); console.log(target.value);
setComparisonType(target.value); setComparisonType(target.value);
if (target.value === 'year-over-year') { if (target.value === 'year-over-year') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'years').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years')); moment(reportingPeriodDateRange[1]).subtract(1, 'years').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years'));
} else if (target.value === 'month-on-month') { } else if (target.value === 'month-on-month') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'months').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months')); moment(reportingPeriodDateRange[1]).subtract(1, 'months').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months'));
} else if (target.value === 'free-comparison') { } else if (target.value === 'free-comparison') {
setBasePeriodBeginsDatetimeDisabled(false); setBasePeriodDateRangePickerDisabled(false);
setBasePeriodEndsDatetimeDisabled(false);
} else if (target.value === 'none-comparison') { } else if (target.value === 'none-comparison') {
setBasePeriodBeginsDatetime(undefined); setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(undefined); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodBeginsDatetimeDisabled(true);
setBasePeriodEndsDatetimeDisabled(true);
}
} }
};
let onBasePeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setBasePeriodBeginsDatetime(newDateTime); let onBasePeriodChange = (DateRange) => {
if(DateRange == null) {
setBasePeriodDateRange([null, null]);
} 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]);
} }
setBasePeriodDateRange([DateRange[0], DateRange[1]]);
let onBasePeriodEndsDatetimeChange = (newDateTime) => {
setBasePeriodEndsDatetime(newDateTime);
} }
};
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setReportingPeriodBeginsDatetime(newDateTime); let onReportingPeriodChange = (DateRange) => {
if(DateRange == null) {
setReportingPeriodDateRange([null, null]);
} 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]]);
if (comparisonType === 'year-over-year') { if (comparisonType === 'year-over-year') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'years').toDate(), moment(DateRange[1]).clone().subtract(1, 'years').toDate()]);
} else if (comparisonType === 'month-on-month') { } else if (comparisonType === 'month-on-month') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'months').toDate(), moment(DateRange[1]).clone().subtract(1, 'months').toDate()]);
} }
} }
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { // Callback fired when value clean
setReportingPeriodEndsDatetime(newDateTime); let onBasePeriodClean = event => {
if (comparisonType === 'year-over-year') { setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'years')); };
} else if (comparisonType === 'month-on-month') {
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months'));
}
}
var getValidBasePeriodBeginsDatetimes = function (currentDate) { // Callback fired when value clean
return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); let onReportingPeriodClean = event => {
} setReportingPeriodDateRange([null, null]);
};
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 // Handler
const handleSubmit = e => { const handleSubmit = e => {
@ -205,10 +213,10 @@ const SpaceLoad = ({ setRedirect, setRedirectUrl, t }) => {
console.log(selectedSpaceID); console.log(selectedSpaceID);
console.log(comparisonType); console.log(comparisonType);
console.log(periodType); console.log(periodType);
console.log(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button // disable submit button
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
@ -224,10 +232,10 @@ const SpaceLoad = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/reports/spaceload?' + fetch(APIBaseURL + '/reports/spaceload?' +
'spaceid=' + selectedSpaceID + 'spaceid=' + selectedSpaceID +
'&periodtype=' + periodType + '&periodtype=' + periodType +
'&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodstartdatetime=' + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodenddatetime=' + (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), { '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
@ -457,52 +465,36 @@ const SpaceLoad = ({ 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} for="basePeriodBeginsDatetime"> <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
{t('Base Period Begins')}{t('(Optional)')} <DateRangePicker
</Label> id='basePeriodDateRangePicker'
<Datetime id='basePeriodBeginsDatetime' readOnly={basePeriodDateRangePickerDisabled}
value={basePeriodBeginsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }} value={basePeriodDateRange}
onChange={onBasePeriodBeginsDatetimeChange} onChange={onBasePeriodChange}
isValidDate={getValidBasePeriodBeginsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
onClean={onBasePeriodClean}
locale={dateRangePickerLocale}
placeholder={t("Select Date Range")}
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="basePeriodEndsDatetime"> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
{t('Base Period Ends')}{t('(Optional)')} <br/>
</Label> <DateRangePicker
<Datetime id='basePeriodEndsDatetime' id='reportingPeriodDateRangePicker'
value={basePeriodEndsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodEndsDatetimeDisabled }} value={reportingPeriodDateRange}
onChange={onBasePeriodEndsDatetimeChange} onChange={onReportingPeriodChange}
isValidDate={getValidBasePeriodEndsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
</FormGroup> onClean={onReportingPeriodClean}
</Col> locale={dateRangePickerLocale}
<Col xs={6} sm={3}> placeholder={t("Select Date Range")}
<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={6} sm={3}>
<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} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">

208
web/src/components/MyEMS/Space/SpaceOutput.js
View File

@ -16,7 +16,6 @@ import {
Spinner Spinner
} from 'reactstrap'; } from 'reactstrap';
import CountUp from 'react-countup'; import CountUp from 'react-countup';
import Datetime from 'react-datetime';
import moment from 'moment'; import moment from 'moment';
import loadable from '@loadable/component'; import loadable from '@loadable/component';
import Cascader from 'rc-cascader'; import Cascader from 'rc-cascader';
@ -30,7 +29,8 @@ 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 { DateRangePicker } from 'rsuite';
import { endOfDay} from 'date-fns';
const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable')); const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable'));
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@ -55,18 +55,35 @@ const SpaceOutput = ({ setRedirect, setRedirectUrl, t }) => {
createCookie('token', token, 1000 * 60 * 60 * 8); createCookie('token', token, 1000 * 60 * 60 * 8);
} }
}); });
// State // State
// Query Parameters
const [selectedSpaceName, setSelectedSpaceName] = useState(undefined); const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined); const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [comparisonType, setComparisonType] = useState('month-on-month'); const [comparisonType, setComparisonType] = useState('month-on-month');
const [periodType, setPeriodType] = useState('daily'); 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 [cascaderOptions, setCascaderOptions] = useState(undefined);
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 [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};
// buttons // buttons
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true); const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
@ -90,7 +107,6 @@ const SpaceOutput = ({ setRedirect, setRedirectUrl, t }) => {
const [childSpacesTableColumns, setChildSpacesTableColumns] = useState([{dataField: 'name', text: t('Child Spaces'), sort: true }]); const [childSpacesTableColumns, setChildSpacesTableColumns] = useState([{dataField: 'name', text: t('Child Spaces'), sort: true }]);
const [excelBytesBase64, setExcelBytesBase64] = useState(undefined); const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
useEffect(() => { useEffect(() => {
let isResponseOK = false; let isResponseOK = false;
fetch(APIBaseURL + '/spaces/tree', { fetch(APIBaseURL + '/spaces/tree', {
@ -135,72 +151,65 @@ const SpaceOutput = ({ setRedirect, setRedirectUrl, t }) => {
setSelectedSpaceID(value[value.length - 1]); setSelectedSpaceID(value[value.length - 1]);
} }
let onComparisonTypeChange = ({ target }) => { let onComparisonTypeChange = ({ target }) => {
console.log(target.value); console.log(target.value);
setComparisonType(target.value); setComparisonType(target.value);
if (target.value === 'year-over-year') { if (target.value === 'year-over-year') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'years').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years')); moment(reportingPeriodDateRange[1]).subtract(1, 'years').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years'));
} else if (target.value === 'month-on-month') { } else if (target.value === 'month-on-month') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'months').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months')); moment(reportingPeriodDateRange[1]).subtract(1, 'months').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months'));
} else if (target.value === 'free-comparison') { } else if (target.value === 'free-comparison') {
setBasePeriodBeginsDatetimeDisabled(false); setBasePeriodDateRangePickerDisabled(false);
setBasePeriodEndsDatetimeDisabled(false);
} else if (target.value === 'none-comparison') { } else if (target.value === 'none-comparison') {
setBasePeriodBeginsDatetime(undefined); setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(undefined); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodBeginsDatetimeDisabled(true);
setBasePeriodEndsDatetimeDisabled(true);
}
} }
};
let onBasePeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setBasePeriodBeginsDatetime(newDateTime); let onBasePeriodChange = (DateRange) => {
if(DateRange == null) {
setBasePeriodDateRange([null, null]);
} 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]);
} }
setBasePeriodDateRange([DateRange[0], DateRange[1]]);
let onBasePeriodEndsDatetimeChange = (newDateTime) => {
setBasePeriodEndsDatetime(newDateTime);
} }
};
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setReportingPeriodBeginsDatetime(newDateTime); let onReportingPeriodChange = (DateRange) => {
if(DateRange == null) {
setReportingPeriodDateRange([null, null]);
} 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]]);
if (comparisonType === 'year-over-year') { if (comparisonType === 'year-over-year') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'years').toDate(), moment(DateRange[1]).clone().subtract(1, 'years').toDate()]);
} else if (comparisonType === 'month-on-month') { } else if (comparisonType === 'month-on-month') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'months').toDate(), moment(DateRange[1]).clone().subtract(1, 'months').toDate()]);
} }
} }
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { // Callback fired when value clean
setReportingPeriodEndsDatetime(newDateTime); let onBasePeriodClean = event => {
if (comparisonType === 'year-over-year') { setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'years')); };
} else if (comparisonType === 'month-on-month') {
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months'));
}
}
var getValidBasePeriodBeginsDatetimes = function (currentDate) { // Callback fired when value clean
return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); let onReportingPeriodClean = event => {
} setReportingPeriodDateRange([null, null]);
};
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 // Handler
const handleSubmit = e => { const handleSubmit = e => {
@ -209,10 +218,10 @@ const SpaceOutput = ({ setRedirect, setRedirectUrl, t }) => {
console.log(selectedSpaceID); console.log(selectedSpaceID);
console.log(comparisonType); console.log(comparisonType);
console.log(periodType); console.log(periodType);
console.log(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button // disable submit button
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
@ -229,10 +238,10 @@ const SpaceOutput = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/reports/spaceoutput?' + fetch(APIBaseURL + '/reports/spaceoutput?' +
'spaceid=' + selectedSpaceID + 'spaceid=' + selectedSpaceID +
'&periodtype=' + periodType + '&periodtype=' + periodType +
'&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodstartdatetime=' + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodenddatetime=' + (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), { '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
@ -420,7 +429,6 @@ const SpaceOutput = ({ setRedirect, setRedirectUrl, t }) => {
}); });
}; };
return ( return (
<Fragment> <Fragment>
<div> <div>
@ -480,52 +488,36 @@ const SpaceOutput = ({ 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} for="basePeriodBeginsDatetime"> <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
{t('Base Period Begins')}{t('(Optional)')} <DateRangePicker
</Label> id='basePeriodDateRangePicker'
<Datetime id='basePeriodBeginsDatetime' readOnly={basePeriodDateRangePickerDisabled}
value={basePeriodBeginsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }} value={basePeriodDateRange}
onChange={onBasePeriodBeginsDatetimeChange} onChange={onBasePeriodChange}
isValidDate={getValidBasePeriodBeginsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
onClean={onBasePeriodClean}
locale={dateRangePickerLocale}
placeholder={t("Select Date Range")}
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="basePeriodEndsDatetime"> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
{t('Base Period Ends')}{t('(Optional)')} <br/>
</Label> <DateRangePicker
<Datetime id='basePeriodEndsDatetime' id='reportingPeriodDateRangePicker'
value={basePeriodEndsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodEndsDatetimeDisabled }} value={reportingPeriodDateRange}
onChange={onBasePeriodEndsDatetimeChange} onChange={onReportingPeriodChange}
isValidDate={getValidBasePeriodEndsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
</FormGroup> onClean={onReportingPeriodClean}
</Col> locale={dateRangePickerLocale}
<Col xs={6} sm={3}> placeholder={t("Select Date Range")}
<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={6} sm={3}>
<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} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">

210
web/src/components/MyEMS/Space/SpaceSaving.js
View File

@ -16,7 +16,6 @@ import {
Spinner Spinner
} from 'reactstrap'; } from 'reactstrap';
import CountUp from 'react-countup'; import CountUp from 'react-countup';
import Datetime from 'react-datetime';
import moment from 'moment'; import moment from 'moment';
import loadable from '@loadable/component'; import loadable from '@loadable/component';
import Cascader from 'rc-cascader'; import Cascader from 'rc-cascader';
@ -31,12 +30,12 @@ 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 { DateRangePicker } from 'rsuite';
import { endOfDay} from 'date-fns';
const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable')); const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable'));
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
const SpaceSaving = ({ setRedirect, setRedirectUrl, t }) => { const SpaceSaving = ({ setRedirect, setRedirectUrl, t }) => {
let current_moment = moment(); let current_moment = moment();
useEffect(() => { useEffect(() => {
@ -63,13 +62,27 @@ const SpaceSaving = ({ setRedirect, setRedirectUrl, t }) => {
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined); const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [comparisonType, setComparisonType] = useState('month-on-month'); const [comparisonType, setComparisonType] = useState('month-on-month');
const [periodType, setPeriodType] = useState('daily'); 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 [cascaderOptions, setCascaderOptions] = useState(undefined);
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 [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};
// buttons // buttons
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true); const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
@ -142,72 +155,65 @@ const SpaceSaving = ({ setRedirect, setRedirectUrl, t }) => {
setSelectedSpaceID(value[value.length - 1]); setSelectedSpaceID(value[value.length - 1]);
} }
let onComparisonTypeChange = ({ target }) => { let onComparisonTypeChange = ({ target }) => {
console.log(target.value); console.log(target.value);
setComparisonType(target.value); setComparisonType(target.value);
if (target.value === 'year-over-year') { if (target.value === 'year-over-year') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'years').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years')); moment(reportingPeriodDateRange[1]).subtract(1, 'years').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years'));
} else if (target.value === 'month-on-month') { } else if (target.value === 'month-on-month') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'months').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months')); moment(reportingPeriodDateRange[1]).subtract(1, 'months').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months'));
} else if (target.value === 'free-comparison') { } else if (target.value === 'free-comparison') {
setBasePeriodBeginsDatetimeDisabled(false); setBasePeriodDateRangePickerDisabled(false);
setBasePeriodEndsDatetimeDisabled(false);
} else if (target.value === 'none-comparison') { } else if (target.value === 'none-comparison') {
setBasePeriodBeginsDatetime(undefined); setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(undefined); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodBeginsDatetimeDisabled(true);
setBasePeriodEndsDatetimeDisabled(true);
}
} }
};
let onBasePeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setBasePeriodBeginsDatetime(newDateTime); let onBasePeriodChange = (DateRange) => {
if(DateRange == null) {
setBasePeriodDateRange([null, null]);
} 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]);
} }
setBasePeriodDateRange([DateRange[0], DateRange[1]]);
let onBasePeriodEndsDatetimeChange = (newDateTime) => {
setBasePeriodEndsDatetime(newDateTime);
} }
};
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setReportingPeriodBeginsDatetime(newDateTime); let onReportingPeriodChange = (DateRange) => {
if(DateRange == null) {
setReportingPeriodDateRange([null, null]);
} 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]]);
if (comparisonType === 'year-over-year') { if (comparisonType === 'year-over-year') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'years').toDate(), moment(DateRange[1]).clone().subtract(1, 'years').toDate()]);
} else if (comparisonType === 'month-on-month') { } else if (comparisonType === 'month-on-month') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'months').toDate(), moment(DateRange[1]).clone().subtract(1, 'months').toDate()]);
} }
} }
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { // Callback fired when value clean
setReportingPeriodEndsDatetime(newDateTime); let onBasePeriodClean = event => {
if (comparisonType === 'year-over-year') { setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'years')); };
} else if (comparisonType === 'month-on-month') {
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months'));
}
}
var getValidBasePeriodBeginsDatetimes = function (currentDate) { // Callback fired when value clean
return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); let onReportingPeriodClean = event => {
} setReportingPeriodDateRange([null, null]);
};
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 // Handler
const handleSubmit = e => { const handleSubmit = e => {
@ -216,10 +222,10 @@ const SpaceSaving = ({ setRedirect, setRedirectUrl, t }) => {
console.log(selectedSpaceID); console.log(selectedSpaceID);
console.log(comparisonType); console.log(comparisonType);
console.log(periodType); console.log(periodType);
console.log(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button // disable submit button
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
@ -236,10 +242,10 @@ const SpaceSaving = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/reports/spacesaving?' + fetch(APIBaseURL + '/reports/spacesaving?' +
'spaceid=' + selectedSpaceID + 'spaceid=' + selectedSpaceID +
'&periodtype=' + periodType + '&periodtype=' + periodType +
'&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodstartdatetime=' + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodenddatetime=' + (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), { '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
@ -255,7 +261,8 @@ const SpaceSaving = ({ setRedirect, setRedirectUrl, t }) => {
return response.json(); return response.json();
}).then(json => { }).then(json => {
if (isResponseOK) { if (isResponseOK) {
console.log(json) console.log(json);
let cardSummaryArray = [] let cardSummaryArray = []
json['reporting_period']['names'].forEach((currentValue, index) => { json['reporting_period']['names'].forEach((currentValue, index) => {
let cardSummaryItem = {} let cardSummaryItem = {}
@ -461,8 +468,6 @@ const SpaceSaving = ({ setRedirect, setRedirectUrl, t }) => {
}); });
}; };
return ( return (
<Fragment> <Fragment>
<div> <div>
@ -522,52 +527,36 @@ const SpaceSaving = ({ 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} for="basePeriodBeginsDatetime"> <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
{t('Base Period Begins')}{t('(Optional)')} <DateRangePicker
</Label> id='basePeriodDateRangePicker'
<Datetime id='basePeriodBeginsDatetime' readOnly={basePeriodDateRangePickerDisabled}
value={basePeriodBeginsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }} value={basePeriodDateRange}
onChange={onBasePeriodBeginsDatetimeChange} onChange={onBasePeriodChange}
isValidDate={getValidBasePeriodBeginsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
onClean={onBasePeriodClean}
locale={dateRangePickerLocale}
placeholder={t("Select Date Range")}
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="basePeriodEndsDatetime"> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
{t('Base Period Ends')}{t('(Optional)')} <br/>
</Label> <DateRangePicker
<Datetime id='basePeriodEndsDatetime' id='reportingPeriodDateRangePicker'
value={basePeriodEndsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodEndsDatetimeDisabled }} value={reportingPeriodDateRange}
onChange={onBasePeriodEndsDatetimeChange} onChange={onReportingPeriodChange}
isValidDate={getValidBasePeriodEndsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
</FormGroup> onClean={onReportingPeriodClean}
</Col> locale={dateRangePickerLocale}
<Col xs={6} sm={3}> placeholder={t("Select Date Range")}
<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={6} sm={3}>
<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} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
@ -649,6 +638,7 @@ const SpaceSaving = ({ setRedirect, setRedirectUrl, t }) => {
data={parameterLineChartData} data={parameterLineChartData}
options={parameterLineChartOptions}> options={parameterLineChartOptions}>
</LineChart> </LineChart>
<DetailedDataTable data={detailedDataTableData} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} > <DetailedDataTable data={detailedDataTableData} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} >
</DetailedDataTable> </DetailedDataTable>
<br /> <br />

211
web/src/components/MyEMS/Space/SpaceStatistics.js
View File

@ -16,7 +16,6 @@ import {
Spinner Spinner
} from 'reactstrap'; } from 'reactstrap';
import CountUp from 'react-countup'; import CountUp from 'react-countup';
import Datetime from 'react-datetime';
import moment from 'moment'; import moment from 'moment';
import loadable from '@loadable/component'; import loadable from '@loadable/component';
import Cascader from 'rc-cascader'; import Cascader from 'rc-cascader';
@ -30,7 +29,8 @@ 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 { DateRangePicker } from 'rsuite';
import { endOfDay} from 'date-fns';
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@ -55,19 +55,35 @@ const SpaceStatistics = ({ setRedirect, setRedirectUrl, t }) => {
createCookie('token', token, 1000 * 60 * 60 * 8); createCookie('token', token, 1000 * 60 * 60 * 8);
} }
}); });
// State // State
// Query Parameters // Query Parameters
const [selectedSpaceName, setSelectedSpaceName] = useState(undefined); const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined); const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [comparisonType, setComparisonType] = useState('month-on-month'); const [comparisonType, setComparisonType] = useState('month-on-month');
const [periodType, setPeriodType] = useState('daily'); 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 [cascaderOptions, setCascaderOptions] = useState(undefined);
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 [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};
// buttons // buttons
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true); const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
@ -123,8 +139,8 @@ const SpaceStatistics = ({ setRedirect, setRedirectUrl, t }) => {
}); });
}, []); }, []);
const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
let onSpaceCascaderChange = (value, selectedOptions) => { let onSpaceCascaderChange = (value, selectedOptions) => {
console.log(value, selectedOptions); console.log(value, selectedOptions);
@ -132,72 +148,65 @@ const SpaceStatistics = ({ setRedirect, setRedirectUrl, t }) => {
setSelectedSpaceID(value[value.length - 1]); setSelectedSpaceID(value[value.length - 1]);
} }
let onComparisonTypeChange = ({ target }) => { let onComparisonTypeChange = ({ target }) => {
console.log(target.value); console.log(target.value);
setComparisonType(target.value); setComparisonType(target.value);
if (target.value === 'year-over-year') { if (target.value === 'year-over-year') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'years').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years')); moment(reportingPeriodDateRange[1]).subtract(1, 'years').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years'));
} else if (target.value === 'month-on-month') { } else if (target.value === 'month-on-month') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'months').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months')); moment(reportingPeriodDateRange[1]).subtract(1, 'months').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months'));
} else if (target.value === 'free-comparison') { } else if (target.value === 'free-comparison') {
setBasePeriodBeginsDatetimeDisabled(false); setBasePeriodDateRangePickerDisabled(false);
setBasePeriodEndsDatetimeDisabled(false);
} else if (target.value === 'none-comparison') { } else if (target.value === 'none-comparison') {
setBasePeriodBeginsDatetime(undefined); setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(undefined); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodBeginsDatetimeDisabled(true);
setBasePeriodEndsDatetimeDisabled(true);
}
} }
};
let onBasePeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setBasePeriodBeginsDatetime(newDateTime); let onBasePeriodChange = (DateRange) => {
if(DateRange == null) {
setBasePeriodDateRange([null, null]);
} 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]);
} }
setBasePeriodDateRange([DateRange[0], DateRange[1]]);
let onBasePeriodEndsDatetimeChange = (newDateTime) => {
setBasePeriodEndsDatetime(newDateTime);
} }
};
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { // Callback fired when value changed
setReportingPeriodBeginsDatetime(newDateTime); let onReportingPeriodChange = (DateRange) => {
if(DateRange == null) {
setReportingPeriodDateRange([null, null]);
} 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]]);
if (comparisonType === 'year-over-year') { if (comparisonType === 'year-over-year') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'years').toDate(), moment(DateRange[1]).clone().subtract(1, 'years').toDate()]);
} else if (comparisonType === 'month-on-month') { } else if (comparisonType === 'month-on-month') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'months').toDate(), moment(DateRange[1]).clone().subtract(1, 'months').toDate()]);
} }
} }
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { // Callback fired when value clean
setReportingPeriodEndsDatetime(newDateTime); let onBasePeriodClean = event => {
if (comparisonType === 'year-over-year') { setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'years')); };
} else if (comparisonType === 'month-on-month') {
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months'));
}
}
var getValidBasePeriodBeginsDatetimes = function (currentDate) { // Callback fired when value clean
return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); let onReportingPeriodClean = event => {
} setReportingPeriodDateRange([null, null]);
};
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 // Handler
const handleSubmit = e => { const handleSubmit = e => {
@ -206,10 +215,10 @@ const SpaceStatistics = ({ setRedirect, setRedirectUrl, t }) => {
console.log(selectedSpaceID); console.log(selectedSpaceID);
console.log(comparisonType); console.log(comparisonType);
console.log(periodType); console.log(periodType);
console.log(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button // disable submit button
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
@ -225,10 +234,10 @@ const SpaceStatistics = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/reports/spacestatistics?' + fetch(APIBaseURL + '/reports/spacestatistics?' +
'spaceid=' + selectedSpaceID + 'spaceid=' + selectedSpaceID +
'&periodtype=' + periodType + '&periodtype=' + periodType +
'&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodstartdatetime=' + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodenddatetime=' + (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), { '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
@ -244,7 +253,8 @@ const SpaceStatistics = ({ setRedirect, setRedirectUrl, t }) => {
return response.json(); return response.json();
}).then(json => { }).then(json => {
if (isResponseOK) { if (isResponseOK) {
console.log(json) console.log(json);
let cardSummaryArray = [] let cardSummaryArray = []
json['reporting_period']['names'].forEach((currentValue, index) => { json['reporting_period']['names'].forEach((currentValue, index) => {
let cardSummaryItem = {} let cardSummaryItem = {}
@ -453,52 +463,36 @@ const SpaceStatistics = ({ 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} for="basePeriodBeginsDatetime"> <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}</Label>
{t('Base Period Begins')}{t('(Optional)')} <DateRangePicker
</Label> id='basePeriodDateRangePicker'
<Datetime id='basePeriodBeginsDatetime' readOnly={basePeriodDateRangePickerDisabled}
value={basePeriodBeginsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }} value={basePeriodDateRange}
onChange={onBasePeriodBeginsDatetimeChange} onChange={onBasePeriodChange}
isValidDate={getValidBasePeriodBeginsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
onClean={onBasePeriodClean}
locale={dateRangePickerLocale}
placeholder={t("Select Date Range")}
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="basePeriodEndsDatetime"> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
{t('Base Period Ends')}{t('(Optional)')} <br/>
</Label> <DateRangePicker
<Datetime id='basePeriodEndsDatetime' id='reportingPeriodDateRangePicker'
value={basePeriodEndsDatetime} format="yyyy-MM-dd HH:mm:ss"
inputProps={{ disabled: basePeriodEndsDatetimeDisabled }} value={reportingPeriodDateRange}
onChange={onBasePeriodEndsDatetimeChange} onChange={onReportingPeriodChange}
isValidDate={getValidBasePeriodEndsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
</FormGroup> onClean={onReportingPeriodClean}
</Col> locale={dateRangePickerLocale}
<Col xs={6} sm={3}> placeholder={t("Select Date Range")}
<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={6} sm={3}>
<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} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
@ -598,6 +592,7 @@ const SpaceStatistics = ({ setRedirect, setRedirectUrl, t }) => {
data={parameterLineChartData} data={parameterLineChartData}
options={parameterLineChartOptions}> options={parameterLineChartOptions}>
</LineChart> </LineChart>
<DetailedDataTable data={detailedDataTableData} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} > <DetailedDataTable data={detailedDataTableData} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} >
</DetailedDataTable> </DetailedDataTable>
<br /> <br />