From 4d3aeb2bef29566950f3b82a8ad7fe7a8c8a7072 Mon Sep 17 00:00:00 2001
From: nengyuanzhang <13011132526@163.com>
Date: Sat, 8 Feb 2025 22:39:31 +0800
Subject: [PATCH] updated i18n in myems-web
---
.../MyEMS/Microgrid/CollectionDashboard.js | 528 +++++++++
.../components/MyEMS/Microgrid/Dashboard.js | 8 +-
.../MyEMS/Microgrid/ItemDashboard.js | 528 +++++++++
.../MyEMS/Microgrid/MicrogridDetails.js | 4 +-
.../MyEMS/Microgrid/MicrogridList.js | 10 +-
.../MyEMS/Microgrid/MicrogridListItem.js | 2 +-
...porting.js => MicrogridReportingEnergy.js} | 23 +-
.../Microgrid/MicrogridReportingParameters.js | 1024 +++++++++++++++++
.../Microgrid/MicrogridReportingRevenue.js | 1024 +++++++++++++++++
.../MyEMS/Microgrid/MicrogridTable.js | 2 +-
myems-web/src/i18n.js | 154 +++
11 files changed, 3290 insertions(+), 17 deletions(-)
create mode 100644 myems-web/src/components/MyEMS/Microgrid/CollectionDashboard.js
create mode 100644 myems-web/src/components/MyEMS/Microgrid/ItemDashboard.js
rename myems-web/src/components/MyEMS/Microgrid/{MicrogridReporting.js => MicrogridReportingEnergy.js} (97%)
create mode 100644 myems-web/src/components/MyEMS/Microgrid/MicrogridReportingParameters.js
create mode 100644 myems-web/src/components/MyEMS/Microgrid/MicrogridReportingRevenue.js
diff --git a/myems-web/src/components/MyEMS/Microgrid/CollectionDashboard.js b/myems-web/src/components/MyEMS/Microgrid/CollectionDashboard.js
new file mode 100644
index 0000000000..ca57a058a7
--- /dev/null
+++ b/myems-web/src/components/MyEMS/Microgrid/CollectionDashboard.js
@@ -0,0 +1,528 @@
+import React, { Fragment, useEffect, useState, useContext } from 'react';
+import CountUp from 'react-countup';
+import { Col, Row, Spinner, Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
+import MicrogridTableCard from './MicrogridTableCard';
+import CardSummary from '../common/CardSummary';
+import { toast } from 'react-toastify';
+import { getCookieValue, createCookie, checkEmpty } from '../../../helpers/utils';
+import withRedirect from '../../../hoc/withRedirect';
+import { withTranslation } from 'react-i18next';
+import moment from 'moment';
+import { APIBaseURL, settings } from '../../../config';
+import { getItemFromStore } from '../../../helpers/utils';
+import CustomizeMapBox from '../common/CustomizeMapBox';
+import classNames from 'classnames';
+import AppContext from '../../../context/Context';
+import StackBarChart from './StackBarChart';
+
+const CollectionDashboard = ({ setRedirect, setRedirectUrl, t }) => {
+ let current_moment = moment();
+ const [isDashboardFetched, setIsDashboardFetched] = useState(false);
+ const [isMicrogridsEnergyFetched, setIsMicrogridsEnergyFetched] = useState(false);
+ const [isMicrogridsBillingFetched, setIsMicrogridsBillingFetched] = useState(false);
+ const [isMicrogridsCarbonFetched, setIsMicrogridsCarbonFetched] = useState(false);
+ const [periodType, setPeriodType] = useState('monthly');
+ const [basePeriodBeginsDatetime, setBasePeriodBeginsDatetime] = useState(
+ current_moment
+ .clone()
+ .subtract(1, 'years')
+ .startOf('year')
+ );
+ const [basePeriodEndsDatetime, setBasePeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'years'));
+ const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(
+ current_moment.clone().startOf('year')
+ );
+ const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
+ const [spinnerHidden, setSpinnerHidden] = useState(false);
+ const [activeTabLeft, setActiveTabLeft] = useState('1');
+ const toggleTabLeft = tab => {
+ if (activeTabLeft !== tab) setActiveTabLeft(tab);
+ };
+ const [activeTabRight, setActiveTabRight] = useState('1');
+ const toggleTabRight = tab => {
+ if (activeTabRight !== tab) setActiveTabRight(tab);
+ };
+ const { currency } = useContext(AppContext);
+
+ //Results
+
+ const [microgridList, setMicrogridList] = useState([]);
+ const [totalRatedCapacity, setTotalRatedCapacity] = useState({});
+ const [totalRatedPower, setTotalRatedPower] = useState({});
+ const [totalCharge, setTotalCharge] = useState({});
+ const [totalDischarge, setTotalDischarge] = useState({});
+ const [totalRevenue, setTotalRevenue] = useState({});
+
+ const [chargeEnergyData, setChargeEnergyData] = useState({});
+ const [dischargeEnergyData, setDischargeEnergyData] = useState({});
+ const [chargeBillingData, setChargeBillingData] = useState({});
+ const [dischargeBillingData, setDischargeBillingData] = useState({});
+ const [chargeCarbonData, setChargeCarbonData] = useState({});
+ const [dischargeCarbonData, setDischargeCarbonData] = useState({});
+ const [energyLabels, setEnergyLabels] = useState([]);
+ const [billingLabels, setBillingLabels] = useState([]);
+ const [carbonLabels, setCarbonLabels] = useState([]);
+ const [periodTypes, setPeriodTypes] = useState([{ value: 'a0', label: t('7 Days') }, { value: 'a1', label: t('This Month') }, { value: 'a2', label: t('This Year') }]);
+ const [language, setLanguage] = useState(getItemFromStore('myems_web_ui_language', settings.language));
+ const [geojson, setGeojson] = useState({});
+ const [rootLatitude, setRootLatitude] = useState('');
+ const [rootLongitude, setRootLongitude] = useState('');
+
+ useEffect(() => {
+ let is_logged_in = getCookieValue('is_logged_in');
+ let user_name = getCookieValue('user_name');
+ let user_display_name = getCookieValue('user_display_name');
+ let user_uuid = getCookieValue('user_uuid');
+ let token = getCookieValue('token');
+ if (checkEmpty(is_logged_in) || checkEmpty(token) || checkEmpty(user_uuid) || !is_logged_in) {
+ setRedirectUrl(`/authentication/basic/login`);
+ setRedirect(true);
+ } else {
+ //update expires time of cookies
+ createCookie('is_logged_in', true, settings.cookieExpireTime);
+ createCookie('user_name', user_name, settings.cookieExpireTime);
+ createCookie('user_display_name', user_display_name, settings.cookieExpireTime);
+ createCookie('user_uuid', user_uuid, settings.cookieExpireTime);
+ createCookie('token', token, settings.cookieExpireTime);
+
+ let isResponseOK = false;
+ if (!isDashboardFetched) {
+ setIsDashboardFetched(true);
+ toast(
+
+ {t('Welcome to MyEMS')}
+
+ {t('An Industry Leading Open Source Energy Management System')}
+
+ );
+
+ fetch(
+ APIBaseURL +
+ '/reports/microgriddashboard?' +
+ 'useruuid=' +
+ user_uuid +
+ '&periodtype=' +
+ periodType +
+ '&baseperiodstartdatetime=' +
+ (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') +
+ '&baseperiodenddatetime=' +
+ (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') +
+ '&reportingperiodstartdatetime=' +
+ reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
+ '&reportingperiodenddatetime=' +
+ reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'),
+ {
+ method: 'GET',
+ headers: {
+ 'Content-type': 'application/json',
+ 'User-UUID': getCookieValue('user_uuid'),
+ Token: getCookieValue('token')
+ },
+ body: null
+ }
+ )
+ .then(response => {
+ if (response.ok) {
+ isResponseOK = true;
+ }
+ return response.json();
+ })
+ .then(json => {
+ if (isResponseOK) {
+ console.log(json);
+ // hide spinner
+ setSpinnerHidden(true);
+
+ let microgridList = [];
+ let totalRatedCapacity = 0;
+ let totalRatedPower = 0;
+
+ setRootLongitude(json['microgrids'][0]['longitude']);
+ setRootLatitude(json['microgrids'][0]['latitude']);
+ let geojson = {};
+ let geojsonData = [];
+ json['microgrids'].forEach((currentValue, index) => {
+ let microgridItem = json['microgrids'][index];
+ totalRatedCapacity += microgridItem['rated_capacity'];
+ totalRatedPower += microgridItem['rated_power'];
+ if (microgridItem['latitude'] && microgridItem['longitude']) {
+ geojsonData.push({
+ type: 'Feature',
+ geometry: {
+ type: 'Point',
+ coordinates: [microgridItem['longitude'], microgridItem['latitude']]
+ },
+ properties: {
+ title: microgridItem['name'],
+ description: microgridItem['description'],
+ uuid: microgridItem['uuid'],
+ url: '/microgrid/details'
+ }
+ });
+ }
+ microgridItem['nameuuid'] = microgridItem['name'] + microgridItem['uuid']
+ microgridList.push(microgridItem);
+
+ });
+ setMicrogridList(microgridList);
+ setTotalRatedCapacity(totalRatedCapacity);
+ setTotalRatedPower(totalRatedPower);
+ geojson['type'] = 'FeatureCollection';
+ geojson['features'] = geojsonData;
+ setGeojson(geojson);
+
+ setTotalCharge(json['total_charge_energy']);
+
+ setTotalDischarge(json['total_discharge_energy']);
+
+ setTotalRevenue(json['total_discharge_billing']);
+
+ }
+ });
+ }
+ }
+ });
+
+ useEffect(() => {
+ let is_logged_in = getCookieValue('is_logged_in');
+ let user_name = getCookieValue('user_name');
+ let user_display_name = getCookieValue('user_display_name');
+ let user_uuid = getCookieValue('user_uuid');
+ let token = getCookieValue('token');
+ if (checkEmpty(is_logged_in) || checkEmpty(token) || checkEmpty(user_uuid) || !is_logged_in) {
+ setRedirectUrl(`/authentication/basic/login`);
+ setRedirect(true);
+ } else {
+ //update expires time of cookies
+ createCookie('is_logged_in', true, settings.cookieExpireTime);
+ createCookie('user_name', user_name, settings.cookieExpireTime);
+ createCookie('user_display_name', user_display_name, settings.cookieExpireTime);
+ createCookie('user_uuid', user_uuid, settings.cookieExpireTime);
+ createCookie('token', token, settings.cookieExpireTime);
+
+ let isResponseOK = false;
+ if (!isMicrogridsEnergyFetched) {
+ setIsMicrogridsEnergyFetched(true);
+ fetch(
+ APIBaseURL + '/reports/microgridsenergy?useruuid=' + user_uuid ,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-type': 'application/json',
+ 'User-UUID': getCookieValue('user_uuid'),
+ Token: getCookieValue('token')
+ },
+ body: null
+ }
+ )
+ .then(response => {
+ if (response.ok) {
+ isResponseOK = true;
+ }
+ return response.json();
+ })
+ .then(json => {
+ if (isResponseOK) {
+ console.log(json);
+
+ setChargeEnergyData({
+ "unit": "kWh",
+ "station_names_array": json['microgrid_names'],
+ "subtotals_array": [
+ json['reporting']['charge_7_days']['values_array'],
+ json['reporting']['charge_this_month']['values_array'],
+ json['reporting']['charge_this_year']['values_array']
+ ],
+ });
+ setDischargeEnergyData({
+ "unit": "kWh",
+ "station_names_array": json['microgrid_names'],
+ "subtotals_array": [
+ json['reporting']['discharge_7_days']['values_array'],
+ json['reporting']['discharge_this_month']['values_array'],
+ json['reporting']['discharge_this_year']['values_array']
+ ]
+ });
+ setEnergyLabels([
+ json['reporting']['charge_7_days']['timestamps_array'][0],
+ json['reporting']['charge_this_month']['timestamps_array'][0],
+ json['reporting']['charge_this_year']['timestamps_array'][0]]);
+
+ }
+ });
+ }
+ }
+ });
+ useEffect(() => {
+ let is_logged_in = getCookieValue('is_logged_in');
+ let user_name = getCookieValue('user_name');
+ let user_display_name = getCookieValue('user_display_name');
+ let user_uuid = getCookieValue('user_uuid');
+ let token = getCookieValue('token');
+ if (checkEmpty(is_logged_in) || checkEmpty(token) || checkEmpty(user_uuid) || !is_logged_in) {
+ setRedirectUrl(`/authentication/basic/login`);
+ setRedirect(true);
+ } else {
+ //update expires time of cookies
+ createCookie('is_logged_in', true, settings.cookieExpireTime);
+ createCookie('user_name', user_name, settings.cookieExpireTime);
+ createCookie('user_display_name', user_display_name, settings.cookieExpireTime);
+ createCookie('user_uuid', user_uuid, settings.cookieExpireTime);
+ createCookie('token', token, settings.cookieExpireTime);
+
+ let isResponseOK = false;
+ if (!isMicrogridsBillingFetched) {
+ setIsMicrogridsBillingFetched(true);
+ fetch(
+ APIBaseURL + '/reports/microgridsbilling?useruuid=' + user_uuid ,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-type': 'application/json',
+ 'User-UUID': getCookieValue('user_uuid'),
+ Token: getCookieValue('token')
+ },
+ body: null
+ }
+ )
+ .then(response => {
+ if (response.ok) {
+ isResponseOK = true;
+ }
+ return response.json();
+ })
+ .then(json => {
+ if (isResponseOK) {
+ console.log(json);
+
+ setChargeBillingData({
+ "unit": currency,
+ "station_names_array": json['microgrid_names'],
+ "subtotals_array": [
+ json['reporting']['charge_7_days']['values_array'],
+ json['reporting']['charge_this_month']['values_array'],
+ json['reporting']['charge_this_year']['values_array']
+ ],
+ });
+ setDischargeBillingData({
+ "unit": currency,
+ "station_names_array": json['microgrid_names'],
+ "subtotals_array": [
+ json['reporting']['discharge_7_days']['values_array'],
+ json['reporting']['discharge_this_month']['values_array'],
+ json['reporting']['discharge_this_year']['values_array']
+ ]
+ });
+ setBillingLabels([
+ json['reporting']['charge_7_days']['timestamps_array'][0],
+ json['reporting']['charge_this_month']['timestamps_array'][0],
+ json['reporting']['charge_this_year']['timestamps_array'][0]]);
+
+ }
+ });
+ }
+ }
+ });
+
+ useEffect(() => {
+ let is_logged_in = getCookieValue('is_logged_in');
+ let user_name = getCookieValue('user_name');
+ let user_display_name = getCookieValue('user_display_name');
+ let user_uuid = getCookieValue('user_uuid');
+ let token = getCookieValue('token');
+ if (checkEmpty(is_logged_in) || checkEmpty(token) || checkEmpty(user_uuid) || !is_logged_in) {
+ setRedirectUrl(`/authentication/basic/login`);
+ setRedirect(true);
+ } else {
+ //update expires time of cookies
+ createCookie('is_logged_in', true, settings.cookieExpireTime);
+ createCookie('user_name', user_name, settings.cookieExpireTime);
+ createCookie('user_display_name', user_display_name, settings.cookieExpireTime);
+ createCookie('user_uuid', user_uuid, settings.cookieExpireTime);
+ createCookie('token', token, settings.cookieExpireTime);
+
+ let isResponseOK = false;
+ if (!isMicrogridsCarbonFetched) {
+ setIsMicrogridsCarbonFetched(true);
+ fetch(
+ APIBaseURL + '/reports/microgridscarbon?useruuid=' + user_uuid ,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-type': 'application/json',
+ 'User-UUID': getCookieValue('user_uuid'),
+ Token: getCookieValue('token')
+ },
+ body: null
+ }
+ )
+ .then(response => {
+ if (response.ok) {
+ isResponseOK = true;
+ }
+ return response.json();
+ })
+ .then(json => {
+ if (isResponseOK) {
+ console.log(json);
+
+ setChargeCarbonData({
+ "unit": "kgCO2",
+ "station_names_array": json['microgrid_names'],
+ "subtotals_array": [
+ json['reporting']['charge_7_days']['values_array'],
+ json['reporting']['charge_this_month']['values_array'],
+ json['reporting']['charge_this_year']['values_array']
+ ],
+ });
+ setDischargeCarbonData({
+ "unit": "kgCO2",
+ "station_names_array": json['microgrid_names'],
+ "subtotals_array": [
+ json['reporting']['discharge_7_days']['values_array'],
+ json['reporting']['discharge_this_month']['values_array'],
+ json['reporting']['discharge_this_year']['values_array']
+ ]
+ });
+ setCarbonLabels([
+ json['reporting']['charge_7_days']['timestamps_array'][0],
+ json['reporting']['charge_this_month']['timestamps_array'][0],
+ json['reporting']['charge_this_year']['timestamps_array'][0]]);
+
+ }
+ });
+ }
+ }
+ });
+
+ useEffect(() => {
+ let timer = setInterval(() => {
+ let is_logged_in = getCookieValue('is_logged_in');
+ if (is_logged_in === null || !is_logged_in) {
+ setRedirectUrl(`/authentication/basic/login`);
+ setRedirect(true);
+ }
+ }, 1000);
+ return () => clearInterval(timer);
+ }, [setRedirect, setRedirectUrl]);
+
+ useEffect(() => {
+ setLanguage(getItemFromStore('myems_web_ui_language'));
+ }, [getItemFromStore('myems_web_ui_language')]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {1 && }
+
+
+ {1 && }
+
+
+ {1 && }
+
+
+ {1 && }
+
+
+ {1 && }
+
+
+ {1 && }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {settings.showOnlineMap ? (
+
+
+
+ ) : (
+ <>
+ )}
+
+
+
+
+
+ );
+};
+
+export default withTranslation()(withRedirect(CollectionDashboard));
diff --git a/myems-web/src/components/MyEMS/Microgrid/Dashboard.js b/myems-web/src/components/MyEMS/Microgrid/Dashboard.js
index 8cfd66774c..5a3091ab88 100644
--- a/myems-web/src/components/MyEMS/Microgrid/Dashboard.js
+++ b/myems-web/src/components/MyEMS/Microgrid/Dashboard.js
@@ -129,7 +129,7 @@ const Dashboard = ({ setRedirect, setRedirectUrl, t }) => {
})
.then(json => {
if (isResponseOK) {
-
+ console.log(json);
// hide spinner
setSpinnerHidden(true);
@@ -223,7 +223,7 @@ const Dashboard = ({ setRedirect, setRedirectUrl, t }) => {
})
.then(json => {
if (isResponseOK) {
-
+ console.log(json);
setChargeEnergyData({
"unit": "kWh",
@@ -293,7 +293,7 @@ const Dashboard = ({ setRedirect, setRedirectUrl, t }) => {
})
.then(json => {
if (isResponseOK) {
-
+ console.log(json);
setChargeBillingData({
"unit": currency,
@@ -364,7 +364,7 @@ const Dashboard = ({ setRedirect, setRedirectUrl, t }) => {
})
.then(json => {
if (isResponseOK) {
-
+ console.log(json);
setChargeCarbonData({
"unit": "kgCO2",
diff --git a/myems-web/src/components/MyEMS/Microgrid/ItemDashboard.js b/myems-web/src/components/MyEMS/Microgrid/ItemDashboard.js
new file mode 100644
index 0000000000..4bae8e82ee
--- /dev/null
+++ b/myems-web/src/components/MyEMS/Microgrid/ItemDashboard.js
@@ -0,0 +1,528 @@
+import React, { Fragment, useEffect, useState, useContext } from 'react';
+import CountUp from 'react-countup';
+import { Col, Row, Spinner, Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
+import MicrogridTableCard from './MicrogridTableCard';
+import CardSummary from '../common/CardSummary';
+import { toast } from 'react-toastify';
+import { getCookieValue, createCookie, checkEmpty } from '../../../helpers/utils';
+import withRedirect from '../../../hoc/withRedirect';
+import { withTranslation } from 'react-i18next';
+import moment from 'moment';
+import { APIBaseURL, settings } from '../../../config';
+import { getItemFromStore } from '../../../helpers/utils';
+import CustomizeMapBox from '../common/CustomizeMapBox';
+import classNames from 'classnames';
+import AppContext from '../../../context/Context';
+import StackBarChart from './StackBarChart';
+
+const ItemDashboard = ({ setRedirect, setRedirectUrl, t }) => {
+ let current_moment = moment();
+ const [isDashboardFetched, setIsDashboardFetched] = useState(false);
+ const [isMicrogridsEnergyFetched, setIsMicrogridsEnergyFetched] = useState(false);
+ const [isMicrogridsBillingFetched, setIsMicrogridsBillingFetched] = useState(false);
+ const [isMicrogridsCarbonFetched, setIsMicrogridsCarbonFetched] = useState(false);
+ const [periodType, setPeriodType] = useState('monthly');
+ const [basePeriodBeginsDatetime, setBasePeriodBeginsDatetime] = useState(
+ current_moment
+ .clone()
+ .subtract(1, 'years')
+ .startOf('year')
+ );
+ const [basePeriodEndsDatetime, setBasePeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'years'));
+ const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(
+ current_moment.clone().startOf('year')
+ );
+ const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
+ const [spinnerHidden, setSpinnerHidden] = useState(false);
+ const [activeTabLeft, setActiveTabLeft] = useState('1');
+ const toggleTabLeft = tab => {
+ if (activeTabLeft !== tab) setActiveTabLeft(tab);
+ };
+ const [activeTabRight, setActiveTabRight] = useState('1');
+ const toggleTabRight = tab => {
+ if (activeTabRight !== tab) setActiveTabRight(tab);
+ };
+ const { currency } = useContext(AppContext);
+
+ //Results
+
+ const [microgridList, setMicrogridList] = useState([]);
+ const [totalRatedCapacity, setTotalRatedCapacity] = useState({});
+ const [totalRatedPower, setTotalRatedPower] = useState({});
+ const [totalCharge, setTotalCharge] = useState({});
+ const [totalDischarge, setTotalDischarge] = useState({});
+ const [totalRevenue, setTotalRevenue] = useState({});
+
+ const [chargeEnergyData, setChargeEnergyData] = useState({});
+ const [dischargeEnergyData, setDischargeEnergyData] = useState({});
+ const [chargeBillingData, setChargeBillingData] = useState({});
+ const [dischargeBillingData, setDischargeBillingData] = useState({});
+ const [chargeCarbonData, setChargeCarbonData] = useState({});
+ const [dischargeCarbonData, setDischargeCarbonData] = useState({});
+ const [energyLabels, setEnergyLabels] = useState([]);
+ const [billingLabels, setBillingLabels] = useState([]);
+ const [carbonLabels, setCarbonLabels] = useState([]);
+ const [periodTypes, setPeriodTypes] = useState([{ value: 'a0', label: t('7 Days') }, { value: 'a1', label: t('This Month') }, { value: 'a2', label: t('This Year') }]);
+ const [language, setLanguage] = useState(getItemFromStore('myems_web_ui_language', settings.language));
+ const [geojson, setGeojson] = useState({});
+ const [rootLatitude, setRootLatitude] = useState('');
+ const [rootLongitude, setRootLongitude] = useState('');
+
+ useEffect(() => {
+ let is_logged_in = getCookieValue('is_logged_in');
+ let user_name = getCookieValue('user_name');
+ let user_display_name = getCookieValue('user_display_name');
+ let user_uuid = getCookieValue('user_uuid');
+ let token = getCookieValue('token');
+ if (checkEmpty(is_logged_in) || checkEmpty(token) || checkEmpty(user_uuid) || !is_logged_in) {
+ setRedirectUrl(`/authentication/basic/login`);
+ setRedirect(true);
+ } else {
+ //update expires time of cookies
+ createCookie('is_logged_in', true, settings.cookieExpireTime);
+ createCookie('user_name', user_name, settings.cookieExpireTime);
+ createCookie('user_display_name', user_display_name, settings.cookieExpireTime);
+ createCookie('user_uuid', user_uuid, settings.cookieExpireTime);
+ createCookie('token', token, settings.cookieExpireTime);
+
+ let isResponseOK = false;
+ if (!isDashboardFetched) {
+ setIsDashboardFetched(true);
+ toast(
+
+ {t('Welcome to MyEMS')}
+
+ {t('An Industry Leading Open Source Energy Management System')}
+
+ );
+
+ fetch(
+ APIBaseURL +
+ '/reports/microgriddashboard?' +
+ 'useruuid=' +
+ user_uuid +
+ '&periodtype=' +
+ periodType +
+ '&baseperiodstartdatetime=' +
+ (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') +
+ '&baseperiodenddatetime=' +
+ (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') +
+ '&reportingperiodstartdatetime=' +
+ reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
+ '&reportingperiodenddatetime=' +
+ reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'),
+ {
+ method: 'GET',
+ headers: {
+ 'Content-type': 'application/json',
+ 'User-UUID': getCookieValue('user_uuid'),
+ Token: getCookieValue('token')
+ },
+ body: null
+ }
+ )
+ .then(response => {
+ if (response.ok) {
+ isResponseOK = true;
+ }
+ return response.json();
+ })
+ .then(json => {
+ if (isResponseOK) {
+ console.log(json);
+ // hide spinner
+ setSpinnerHidden(true);
+
+ let microgridList = [];
+ let totalRatedCapacity = 0;
+ let totalRatedPower = 0;
+
+ setRootLongitude(json['microgrids'][0]['longitude']);
+ setRootLatitude(json['microgrids'][0]['latitude']);
+ let geojson = {};
+ let geojsonData = [];
+ json['microgrids'].forEach((currentValue, index) => {
+ let microgridItem = json['microgrids'][index];
+ totalRatedCapacity += microgridItem['rated_capacity'];
+ totalRatedPower += microgridItem['rated_power'];
+ if (microgridItem['latitude'] && microgridItem['longitude']) {
+ geojsonData.push({
+ type: 'Feature',
+ geometry: {
+ type: 'Point',
+ coordinates: [microgridItem['longitude'], microgridItem['latitude']]
+ },
+ properties: {
+ title: microgridItem['name'],
+ description: microgridItem['description'],
+ uuid: microgridItem['uuid'],
+ url: '/microgrid/details'
+ }
+ });
+ }
+ microgridItem['nameuuid'] = microgridItem['name'] + microgridItem['uuid']
+ microgridList.push(microgridItem);
+
+ });
+ setMicrogridList(microgridList);
+ setTotalRatedCapacity(totalRatedCapacity);
+ setTotalRatedPower(totalRatedPower);
+ geojson['type'] = 'FeatureCollection';
+ geojson['features'] = geojsonData;
+ setGeojson(geojson);
+
+ setTotalCharge(json['total_charge_energy']);
+
+ setTotalDischarge(json['total_discharge_energy']);
+
+ setTotalRevenue(json['total_discharge_billing']);
+
+ }
+ });
+ }
+ }
+ });
+
+ useEffect(() => {
+ let is_logged_in = getCookieValue('is_logged_in');
+ let user_name = getCookieValue('user_name');
+ let user_display_name = getCookieValue('user_display_name');
+ let user_uuid = getCookieValue('user_uuid');
+ let token = getCookieValue('token');
+ if (checkEmpty(is_logged_in) || checkEmpty(token) || checkEmpty(user_uuid) || !is_logged_in) {
+ setRedirectUrl(`/authentication/basic/login`);
+ setRedirect(true);
+ } else {
+ //update expires time of cookies
+ createCookie('is_logged_in', true, settings.cookieExpireTime);
+ createCookie('user_name', user_name, settings.cookieExpireTime);
+ createCookie('user_display_name', user_display_name, settings.cookieExpireTime);
+ createCookie('user_uuid', user_uuid, settings.cookieExpireTime);
+ createCookie('token', token, settings.cookieExpireTime);
+
+ let isResponseOK = false;
+ if (!isMicrogridsEnergyFetched) {
+ setIsMicrogridsEnergyFetched(true);
+ fetch(
+ APIBaseURL + '/reports/microgridsenergy?useruuid=' + user_uuid ,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-type': 'application/json',
+ 'User-UUID': getCookieValue('user_uuid'),
+ Token: getCookieValue('token')
+ },
+ body: null
+ }
+ )
+ .then(response => {
+ if (response.ok) {
+ isResponseOK = true;
+ }
+ return response.json();
+ })
+ .then(json => {
+ if (isResponseOK) {
+ console.log(json);
+
+ setChargeEnergyData({
+ "unit": "kWh",
+ "station_names_array": json['microgrid_names'],
+ "subtotals_array": [
+ json['reporting']['charge_7_days']['values_array'],
+ json['reporting']['charge_this_month']['values_array'],
+ json['reporting']['charge_this_year']['values_array']
+ ],
+ });
+ setDischargeEnergyData({
+ "unit": "kWh",
+ "station_names_array": json['microgrid_names'],
+ "subtotals_array": [
+ json['reporting']['discharge_7_days']['values_array'],
+ json['reporting']['discharge_this_month']['values_array'],
+ json['reporting']['discharge_this_year']['values_array']
+ ]
+ });
+ setEnergyLabels([
+ json['reporting']['charge_7_days']['timestamps_array'][0],
+ json['reporting']['charge_this_month']['timestamps_array'][0],
+ json['reporting']['charge_this_year']['timestamps_array'][0]]);
+
+ }
+ });
+ }
+ }
+ });
+ useEffect(() => {
+ let is_logged_in = getCookieValue('is_logged_in');
+ let user_name = getCookieValue('user_name');
+ let user_display_name = getCookieValue('user_display_name');
+ let user_uuid = getCookieValue('user_uuid');
+ let token = getCookieValue('token');
+ if (checkEmpty(is_logged_in) || checkEmpty(token) || checkEmpty(user_uuid) || !is_logged_in) {
+ setRedirectUrl(`/authentication/basic/login`);
+ setRedirect(true);
+ } else {
+ //update expires time of cookies
+ createCookie('is_logged_in', true, settings.cookieExpireTime);
+ createCookie('user_name', user_name, settings.cookieExpireTime);
+ createCookie('user_display_name', user_display_name, settings.cookieExpireTime);
+ createCookie('user_uuid', user_uuid, settings.cookieExpireTime);
+ createCookie('token', token, settings.cookieExpireTime);
+
+ let isResponseOK = false;
+ if (!isMicrogridsBillingFetched) {
+ setIsMicrogridsBillingFetched(true);
+ fetch(
+ APIBaseURL + '/reports/microgridsbilling?useruuid=' + user_uuid ,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-type': 'application/json',
+ 'User-UUID': getCookieValue('user_uuid'),
+ Token: getCookieValue('token')
+ },
+ body: null
+ }
+ )
+ .then(response => {
+ if (response.ok) {
+ isResponseOK = true;
+ }
+ return response.json();
+ })
+ .then(json => {
+ if (isResponseOK) {
+ console.log(json);
+
+ setChargeBillingData({
+ "unit": currency,
+ "station_names_array": json['microgrid_names'],
+ "subtotals_array": [
+ json['reporting']['charge_7_days']['values_array'],
+ json['reporting']['charge_this_month']['values_array'],
+ json['reporting']['charge_this_year']['values_array']
+ ],
+ });
+ setDischargeBillingData({
+ "unit": currency,
+ "station_names_array": json['microgrid_names'],
+ "subtotals_array": [
+ json['reporting']['discharge_7_days']['values_array'],
+ json['reporting']['discharge_this_month']['values_array'],
+ json['reporting']['discharge_this_year']['values_array']
+ ]
+ });
+ setBillingLabels([
+ json['reporting']['charge_7_days']['timestamps_array'][0],
+ json['reporting']['charge_this_month']['timestamps_array'][0],
+ json['reporting']['charge_this_year']['timestamps_array'][0]]);
+
+ }
+ });
+ }
+ }
+ });
+
+ useEffect(() => {
+ let is_logged_in = getCookieValue('is_logged_in');
+ let user_name = getCookieValue('user_name');
+ let user_display_name = getCookieValue('user_display_name');
+ let user_uuid = getCookieValue('user_uuid');
+ let token = getCookieValue('token');
+ if (checkEmpty(is_logged_in) || checkEmpty(token) || checkEmpty(user_uuid) || !is_logged_in) {
+ setRedirectUrl(`/authentication/basic/login`);
+ setRedirect(true);
+ } else {
+ //update expires time of cookies
+ createCookie('is_logged_in', true, settings.cookieExpireTime);
+ createCookie('user_name', user_name, settings.cookieExpireTime);
+ createCookie('user_display_name', user_display_name, settings.cookieExpireTime);
+ createCookie('user_uuid', user_uuid, settings.cookieExpireTime);
+ createCookie('token', token, settings.cookieExpireTime);
+
+ let isResponseOK = false;
+ if (!isMicrogridsCarbonFetched) {
+ setIsMicrogridsCarbonFetched(true);
+ fetch(
+ APIBaseURL + '/reports/microgridscarbon?useruuid=' + user_uuid ,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-type': 'application/json',
+ 'User-UUID': getCookieValue('user_uuid'),
+ Token: getCookieValue('token')
+ },
+ body: null
+ }
+ )
+ .then(response => {
+ if (response.ok) {
+ isResponseOK = true;
+ }
+ return response.json();
+ })
+ .then(json => {
+ if (isResponseOK) {
+ console.log(json);
+
+ setChargeCarbonData({
+ "unit": "kgCO2",
+ "station_names_array": json['microgrid_names'],
+ "subtotals_array": [
+ json['reporting']['charge_7_days']['values_array'],
+ json['reporting']['charge_this_month']['values_array'],
+ json['reporting']['charge_this_year']['values_array']
+ ],
+ });
+ setDischargeCarbonData({
+ "unit": "kgCO2",
+ "station_names_array": json['microgrid_names'],
+ "subtotals_array": [
+ json['reporting']['discharge_7_days']['values_array'],
+ json['reporting']['discharge_this_month']['values_array'],
+ json['reporting']['discharge_this_year']['values_array']
+ ]
+ });
+ setCarbonLabels([
+ json['reporting']['charge_7_days']['timestamps_array'][0],
+ json['reporting']['charge_this_month']['timestamps_array'][0],
+ json['reporting']['charge_this_year']['timestamps_array'][0]]);
+
+ }
+ });
+ }
+ }
+ });
+
+ useEffect(() => {
+ let timer = setInterval(() => {
+ let is_logged_in = getCookieValue('is_logged_in');
+ if (is_logged_in === null || !is_logged_in) {
+ setRedirectUrl(`/authentication/basic/login`);
+ setRedirect(true);
+ }
+ }, 1000);
+ return () => clearInterval(timer);
+ }, [setRedirect, setRedirectUrl]);
+
+ useEffect(() => {
+ setLanguage(getItemFromStore('myems_web_ui_language'));
+ }, [getItemFromStore('myems_web_ui_language')]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {1 && }
+
+
+ {1 && }
+
+
+ {1 && }
+
+
+ {1 && }
+
+
+ {1 && }
+
+
+ {1 && }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {settings.showOnlineMap ? (
+
+
+
+ ) : (
+ <>
+ )}
+
+
+
+
+
+ );
+};
+
+export default withTranslation()(withRedirect(ItemDashboard));
diff --git a/myems-web/src/components/MyEMS/Microgrid/MicrogridDetails.js b/myems-web/src/components/MyEMS/Microgrid/MicrogridDetails.js
index d61061d11b..15025bfeb0 100644
--- a/myems-web/src/components/MyEMS/Microgrid/MicrogridDetails.js
+++ b/myems-web/src/components/MyEMS/Microgrid/MicrogridDetails.js
@@ -148,7 +148,7 @@ const MicrogridDetails = ({ setRedirect, setRedirectUrl, t }) => {
})
.then(json => {
if (isResponseOK) {
-
+ console.log(json);
setMicrogridName(json['microgrid']['name']);
setMicrogridSerialNumber(json['microgrid']['serial_number']);
setMicrogridAddress(json['microgrid']['address']);
@@ -276,7 +276,7 @@ const MicrogridDetails = ({ setRedirect, setRedirectUrl, t }) => {
})
.then(json => {
if (isResponseOK) {
-
+ console.log(json);
json.forEach(currentPoint => {
let textElement = document.getElementById('PT' + currentPoint['point_id']);
if (textElement) {
diff --git a/myems-web/src/components/MyEMS/Microgrid/MicrogridList.js b/myems-web/src/components/MyEMS/Microgrid/MicrogridList.js
index c844f19224..53103e45a2 100644
--- a/myems-web/src/components/MyEMS/Microgrid/MicrogridList.js
+++ b/myems-web/src/components/MyEMS/Microgrid/MicrogridList.js
@@ -80,16 +80,16 @@ const MicrogridList = ({ setRedirect, setRedirectUrl, t }) => {
body: null
})
.then(response => {
-
+ console.log(response);
if (response.ok) {
isResponseOK = true;
}
return response.json();
})
.then(json => {
-
+ console.log(json);
if (isResponseOK) {
-
+ console.log(json);
setMicrogridArray([]);
setMicrogridIds([]);
let microgridArray = [];
@@ -138,6 +138,10 @@ const MicrogridList = ({ setRedirect, setRedirectUrl, t }) => {
}
setMicrogridArray(microgridArray);
setMicrogridIds(microgridIds);
+ console.log('microgridArray:');
+ console.log(microgridArray);
+ console.log('microgridIds:');
+ console.log(microgridIds);
setIsLoading(false);
setGeojson(geojsonData);
} else {
diff --git a/myems-web/src/components/MyEMS/Microgrid/MicrogridListItem.js b/myems-web/src/components/MyEMS/Microgrid/MicrogridListItem.js
index 1ee605f849..5ab4eb3f64 100644
--- a/myems-web/src/components/MyEMS/Microgrid/MicrogridListItem.js
+++ b/myems-web/src/components/MyEMS/Microgrid/MicrogridListItem.js
@@ -76,7 +76,7 @@ const MicrogridListItem = ({
-
+
{name}
diff --git a/myems-web/src/components/MyEMS/Microgrid/MicrogridReporting.js b/myems-web/src/components/MyEMS/Microgrid/MicrogridReportingEnergy.js
similarity index 97%
rename from myems-web/src/components/MyEMS/Microgrid/MicrogridReporting.js
rename to myems-web/src/components/MyEMS/Microgrid/MicrogridReportingEnergy.js
index 6e44bca92a..193cb14380 100644
--- a/myems-web/src/components/MyEMS/Microgrid/MicrogridReporting.js
+++ b/myems-web/src/components/MyEMS/Microgrid/MicrogridReportingEnergy.js
@@ -163,14 +163,14 @@ const MicrogridReportingEnergy = ({ setRedirect, setRedirectUrl, t }) => {
body: null
})
.then(response => {
-
+ console.log(response);
if (response.ok) {
isResponseOK = true;
}
return response.json();
})
.then(json => {
-
+ console.log(json);
if (isResponseOK) {
// rename keys
json = JSON.parse(
@@ -209,7 +209,7 @@ const MicrogridReportingEnergy = ({ setRedirect, setRedirectUrl, t }) => {
.split('"name":')
.join('"label":')
);
-
+ console.log(json);
setMicrogridList(json[0]);
setFilteredMicrogridList(json[0]);
if (json[0].length > 0) {
@@ -269,7 +269,7 @@ const MicrogridReportingEnergy = ({ setRedirect, setRedirectUrl, t }) => {
})
.then(json => {
if (isResponseOK) {
-
+ console.log(json);
setMicrogridName(json['microgrid']['name']);
setMicrogridSerialNumber(json['microgrid']['serial_number']);
setMicrogridAddress(json['microgrid']['address']);
@@ -331,6 +331,7 @@ const MicrogridReportingEnergy = ({ setRedirect, setRedirectUrl, t }) => {
json['reporting_period']['values'].forEach((currentValue, index) => {
reporting_values['a' + index] = currentValue;
});
+ console.log(reporting_values);
setMicrogridReportingData(reporting_values);
let reporting_subtotals = {};
@@ -546,7 +547,7 @@ const MicrogridReportingEnergy = ({ setRedirect, setRedirectUrl, t }) => {
.split('"name":')
.join('"label":')
);
-
+ console.log(json);
setMicrogridList(json[0]);
setFilteredMicrogridList(json[0]);
if (json[0].length > 0) {
@@ -587,7 +588,7 @@ const MicrogridReportingEnergy = ({ setRedirect, setRedirectUrl, t }) => {
};
let onComparisonTypeChange = ({ target }) => {
-
+ console.log(target.value);
setComparisonType(target.value);
if (target.value === 'year-over-year') {
setBasePeriodDateRangePickerDisabled(true);
@@ -734,6 +735,16 @@ const MicrogridReportingEnergy = ({ setRedirect, setRedirectUrl, t }) => {
// Handler
const handleSubmit = e => {
e.preventDefault();
+ console.log('handleSubmit');
+ console.log(selectedSpaceID);
+ console.log(selectedMicrogrid);
+ console.log(comparisonType);
+ console.log(periodType);
+ console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null);
+ console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null);
+ console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'));
+ console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
+
let url =
APIBaseURL +
'/reports/microgridreportingenergy?' +
diff --git a/myems-web/src/components/MyEMS/Microgrid/MicrogridReportingParameters.js b/myems-web/src/components/MyEMS/Microgrid/MicrogridReportingParameters.js
new file mode 100644
index 0000000000..55f5857487
--- /dev/null
+++ b/myems-web/src/components/MyEMS/Microgrid/MicrogridReportingParameters.js
@@ -0,0 +1,1024 @@
+import React, { Fragment, useEffect, useState, useContext } from 'react';
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ Row,
+ Col,
+ Card,
+ CardBody,
+ Button,
+ ButtonGroup,
+ Form,
+ FormGroup,
+ Input,
+ Label,
+ CustomInput,
+ Spinner
+} from 'reactstrap';
+import CountUp from 'react-countup';
+import moment from 'moment';
+import loadable from '@loadable/component';
+import Cascader from 'rc-cascader';
+import CardSummary from '../common/CardSummary';
+import MultiTrendChart from '../common/MultiTrendChart';
+import MultipleLineChart from '../common/MultipleLineChart';
+import { getCookieValue, createCookie, checkEmpty } from '../../../helpers/utils';
+import withRedirect from '../../../hoc/withRedirect';
+import { withTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import ButtonIcon from '../../common/ButtonIcon';
+import { APIBaseURL, settings } from '../../../config';
+import { periodTypeOptions } from '../common/PeriodTypeOptions';
+import { comparisonTypeOptions } from '../common/ComparisonTypeOptions';
+import { endOfDay } from 'date-fns';
+import AppContext from '../../../context/Context';
+import { Link, useLocation } from 'react-router-dom';
+import DateRangePickerWrapper from '../common/DateRangePickerWrapper';
+import blankPage from '../../../assets/img/generic/blank-page.png';
+
+
+const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
+
+const MicrogridReportingParameters = ({ setRedirect, setRedirectUrl, t }) => {
+ let current_moment = moment();
+ const location = useLocation();
+ const uuid = location.search.split('=')[1];
+
+ useEffect(() => {
+ let is_logged_in = getCookieValue('is_logged_in');
+ let user_name = getCookieValue('user_name');
+ let user_display_name = getCookieValue('user_display_name');
+ let user_uuid = getCookieValue('user_uuid');
+ let token = getCookieValue('token');
+ if (checkEmpty(is_logged_in) || checkEmpty(token) || checkEmpty(user_uuid) || !is_logged_in) {
+ setRedirectUrl(`/authentication/basic/login`);
+ setRedirect(true);
+ } else {
+ //update expires time of cookies
+ createCookie('is_logged_in', true, settings.cookieExpireTime);
+ createCookie('user_name', user_name, settings.cookieExpireTime);
+ createCookie('user_display_name', user_display_name, settings.cookieExpireTime);
+ createCookie('user_uuid', user_uuid, settings.cookieExpireTime);
+ createCookie('token', token, settings.cookieExpireTime);
+ }
+ });
+
+ // State
+ //Query Form
+ const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
+ const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
+ const [microgridList, setMicrogridList] = useState([]);
+ const [filteredMicrogridList, setFilteredMicrogridList] = useState([]);
+ const [selectedMicrogrid, setSelectedMicrogrid] = useState(undefined);
+ const [comparisonType, setComparisonType] = useState('month-on-month');
+ const [periodType, setPeriodType] = useState('daily');
+ const [cascaderOptions, setCascaderOptions] = useState(undefined);
+ const [basePeriodDateRange, setBasePeriodDateRange] = useState([
+ current_moment
+ .clone()
+ .subtract(1, 'weeks')
+ .subtract(1, 'months')
+ .toDate(),
+ current_moment
+ .clone()
+ .subtract(1, 'months')
+ .toDate()
+ ]);
+ const [basePeriodDateRangePickerDisabled, setBasePeriodDateRangePickerDisabled] = useState(true);
+ const [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([
+ current_moment
+ .clone()
+ .subtract(1, 'weeks')
+ .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'),
+ formattedMonthPattern: 'yyyy-MM-dd'
+ };
+ const dateRangePickerStyle = { display: 'block', zIndex: 10 };
+ const { language } = useContext(AppContext);
+ // buttons
+ const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
+ const [spinnerHidden, setSpinnerHidden] = useState(true);
+ const [exportButtonHidden, setExportButtonHidden] = useState(true);
+ const [spaceCascaderHidden, setSpaceCascaderHidden] = useState(false);
+ const [resultDataHidden, setResultDataHidden] = useState(true);
+
+ //Results
+ const [microgridName, setMicrogridName] = useState();
+ const [microgridSerialNumber, setMicrogridSerialNumber] = useState();
+ const [microgridAddress, setMicrogridAddress] = useState();
+ const [microgridPostalCode, setMicrogridPostalCode] = useState();
+ const [microgridRatedCapacity, setMicrogridRatedCapacity] = useState();
+ const [microgridRatedPower, setMicrogridRatedPower] = useState();
+ const [microgridLatitude, setMicrogridLatitude] = useState();
+ const [microgridLongitude, setMicrogridLongitude] = useState();
+
+ const [cardSummaryList, setCardSummaryList] = useState([]);
+ const [microgridBaseLabels, setMicrogridBaseLabels] = useState({ a0: [] });
+ const [microgridBaseData, setMicrogridBaseData] = useState({ a0: [] });
+ const [microgridReportingNames, setMicrogridReportingNames] = useState({ a0: '' });
+ const [microgridReportingUnits, setMicrogridReportingUnits] = useState({ a0: '()' });
+ const [microgridReportingSubtotals, setMicrogridReportingSubtotals] = useState({
+ a0: (0).toFixed(2)
+ });
+ const [microgridReportingLabels, setMicrogridReportingLabels] = useState({ a0: [] });
+ const [microgridReportingData, setMicrogridReportingData] = useState({ a0: [] });
+ const [microgridReportingOptions, setMicrogridReportingOptions] = useState([]);
+ const [parameterLineChartLabels, setParameterLineChartLabels] = useState([]);
+ const [parameterLineChartData, setParameterLineChartData] = useState({});
+ const [parameterLineChartOptions, setParameterLineChartOptions] = useState([]);
+
+ const [detailedDataTableData, setDetailedDataTableData] = useState([]);
+ const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([
+ { dataField: 'startdatetime', text: t('Datetime'), sort: true }
+ ]);
+
+ const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
+
+ useEffect(() => {
+ let isResponseOK = false;
+ setSpaceCascaderHidden(false);
+ fetch(APIBaseURL + '/spaces/tree', {
+ method: 'GET',
+ headers: {
+ 'Content-type': 'application/json',
+ 'User-UUID': getCookieValue('user_uuid'),
+ Token: getCookieValue('token')
+ },
+ body: null
+ })
+ .then(response => {
+ console.log(response);
+ if (response.ok) {
+ isResponseOK = true;
+ }
+ return response.json();
+ })
+ .then(json => {
+ console.log(json);
+ if (isResponseOK) {
+ // rename keys
+ json = JSON.parse(
+ JSON.stringify([json])
+ .split('"id":')
+ .join('"value":')
+ .split('"name":')
+ .join('"label":')
+ );
+ setCascaderOptions(json);
+ setSelectedSpaceName([json[0]].map(o => o.label));
+ setSelectedSpaceID([json[0]].map(o => o.value));
+ // get Microgrids by root Space ID
+ let isResponseOK = false;
+ fetch(APIBaseURL + '/spaces/' + [json[0]].map(o => o.value) + '/microgrids', {
+ method: 'GET',
+ headers: {
+ 'Content-type': 'application/json',
+ 'User-UUID': getCookieValue('user_uuid'),
+ Token: getCookieValue('token')
+ },
+ body: null
+ })
+ .then(response => {
+ if (response.ok) {
+ isResponseOK = true;
+ }
+ return response.json();
+ })
+ .then(json => {
+ if (isResponseOK) {
+ json = JSON.parse(
+ JSON.stringify([json])
+ .split('"id":')
+ .join('"value":')
+ .split('"name":')
+ .join('"label":')
+ );
+ console.log(json);
+ setMicrogridList(json[0]);
+ setFilteredMicrogridList(json[0]);
+ if (json[0].length > 0) {
+ setSelectedMicrogrid(json[0][0].value);
+ // enable submit button
+ setSubmitButtonDisabled(false);
+ } else {
+ setSelectedMicrogrid(undefined);
+ // disable submit button
+ setSubmitButtonDisabled(true);
+ }
+ } else {
+ toast.error(t(json.description));
+ }
+ })
+ .catch(err => {
+ console.log(err);
+ });
+ // end of get Microgrids by root Space ID
+ } else {
+ toast.error(t(json.description));
+ }
+ })
+ .catch(err => {
+ console.log(err);
+ });
+ }, []);
+
+ const loadData = url => {
+ // disable submit button
+ setSubmitButtonDisabled(true);
+ // show spinner
+ setSpinnerHidden(false);
+ // hide export button
+ setExportButtonHidden(true);
+ // hide result data
+ setResultDataHidden(true);
+
+ // Reinitialize tables
+ setDetailedDataTableData([]);
+
+ let isResponseOK = false;
+ fetch(url, {
+ method: 'GET',
+ headers: {
+ 'Content-type': 'application/json',
+ 'User-UUID': getCookieValue('user_uuid'),
+ Token: getCookieValue('token')
+ },
+ body: null
+ })
+ .then(response => {
+ if (response.ok) {
+ isResponseOK = true;
+ }
+ return response.json();
+ })
+ .then(json => {
+ if (isResponseOK) {
+ console.log(json);
+ setMicrogridName(json['microgrid']['name']);
+ setMicrogridSerialNumber(json['microgrid']['serial_number']);
+ setMicrogridAddress(json['microgrid']['address']);
+ setMicrogridPostalCode(json['microgrid']['postal_code']);
+ setMicrogridRatedCapacity(json['microgrid']['rated_capacity']);
+ setMicrogridRatedPower(json['microgrid']['rated_power']);
+ setMicrogridLatitude(json['microgrid']['latitude']);
+ setMicrogridLongitude(json['microgrid']['longitude']);
+ let timestamps = {};
+ json['parameters']['timestamps'].forEach((currentValue, index) => {
+ timestamps['a' + index] = currentValue;
+ });
+ setParameterLineChartLabels(timestamps);
+
+ let values = {};
+ json['parameters']['values'].forEach((currentValue, index) => {
+ values['a' + index] = currentValue;
+ });
+ setParameterLineChartData(values);
+
+ let names = [];
+ json['parameters']['names'].forEach((currentValue, index) => {
+ names.push({ value: 'a' + index, label: currentValue });
+ });
+ setParameterLineChartOptions(names);
+
+ let cardSummaryArray = [];
+ json['reporting_period']['names'].forEach((currentValue, index) => {
+ let cardSummaryItem = {};
+ cardSummaryItem['name'] = json['reporting_period']['names'][index];
+ cardSummaryItem['unit'] = json['reporting_period']['units'][index];
+ cardSummaryItem['subtotal'] = json['reporting_period']['subtotals'][index];
+ cardSummaryItem['increment_rate'] =
+ parseFloat(json['reporting_period']['increment_rates'][index] * 100).toFixed(2) + '%';
+
+ cardSummaryArray.push(cardSummaryItem);
+ });
+ setCardSummaryList(cardSummaryArray);
+
+ let base_and_reporting_names = {};
+ json['reporting_period']['names'].forEach((currentValue, index) => {
+ base_and_reporting_names['a' + index] = currentValue;
+ });
+ setMicrogridReportingNames(base_and_reporting_names);
+
+ let base_and_reporting_units = {};
+ json['reporting_period']['units'].forEach((currentValue, index) => {
+ base_and_reporting_units['a' + index] = '(' + currentValue + ')';
+ });
+ setMicrogridReportingUnits(base_and_reporting_units);
+
+ let reporting_timestamps = {};
+ json['reporting_period']['timestamps'].forEach((currentValue, index) => {
+ reporting_timestamps['a' + index] = currentValue;
+ });
+ setMicrogridReportingLabels(reporting_timestamps);
+
+ let reporting_values = {};
+ json['reporting_period']['values'].forEach((currentValue, index) => {
+ reporting_values['a' + index] = currentValue;
+ });
+ console.log(reporting_values);
+ setMicrogridReportingData(reporting_values);
+
+ let reporting_subtotals = {};
+ json['reporting_period']['subtotals'].forEach((currentValue, index) => {
+ reporting_subtotals['a' + index] = currentValue.toFixed(2);
+ });
+ setMicrogridReportingSubtotals(reporting_subtotals);
+
+ let options = [];
+ json['reporting_period']['names'].forEach((currentValue, index) => {
+ let unit = json['reporting_period']['units'][index];
+ options.push({ value: 'a' + index, label: currentValue + ' (' + unit + ')' });
+ });
+ setMicrogridReportingOptions(options);
+ setExcelBytesBase64(json['excel_bytes_base64']);
+
+ if (!isBasePeriodTimestampExists(json['base_period'])) {
+ let detailed_value_list = [];
+ if (json['reporting_period']['timestamps'].length > 0) {
+ json['reporting_period']['timestamps'][0].forEach((currentTimestamp, timestampIndex) => {
+ let detailed_value = {};
+ detailed_value['id'] = timestampIndex;
+ detailed_value['startdatetime'] = currentTimestamp;
+ json['reporting_period']['values'].forEach((currentValue, energyCategoryIndex) => {
+ detailed_value['a' + energyCategoryIndex] =
+ json['reporting_period']['values'][energyCategoryIndex][timestampIndex];
+ });
+ detailed_value_list.push(detailed_value);
+ });
+ }
+
+ let detailed_value = {};
+ detailed_value['id'] = detailed_value_list.length;
+ detailed_value['startdatetime'] = t('Subtotal');
+ json['reporting_period']['subtotals'].forEach((currentValue, index) => {
+ detailed_value['a' + index] = currentValue;
+ });
+ detailed_value_list.push(detailed_value);
+ setTimeout(() => {
+ setDetailedDataTableData(detailed_value_list);
+ }, 0);
+
+ let detailed_column_list = [];
+ detailed_column_list.push({
+ dataField: 'startdatetime',
+ text: t('Datetime'),
+ sort: true
+ });
+ json['reporting_period']['names'].forEach((currentValue, index) => {
+ let unit = json['reporting_period']['units'][index];
+ detailed_column_list.push({
+ dataField: 'a' + index,
+ text: currentValue + ' (' + unit + ')',
+ sort: true,
+ formatter: function(decimalValue) {
+ if (typeof decimalValue === 'number') {
+ return decimalValue.toFixed(2);
+ } else {
+ return null;
+ }
+ }
+ });
+ });
+ setDetailedDataTableColumns(detailed_column_list);
+
+ } else {
+ /*
+ * Tip:
+ * json['base_period']['names'] === json['reporting_period']['names']
+ * json['base_period']['units'] === json['reporting_period']['units']
+ * */
+ let detailed_column_list = [];
+ detailed_column_list.push({
+ dataField: 'basePeriodDatetime',
+ text: t('Base Period') + ' - ' + t('Datetime'),
+ sort: true
+ });
+
+ json['base_period']['names'].forEach((currentValue, index) => {
+ let unit = json['base_period']['units'][index];
+ detailed_column_list.push({
+ dataField: 'a' + index,
+ text: t('Base Period') + ' - ' + currentValue + ' (' + unit + ')',
+ sort: true,
+ formatter: function(decimalValue) {
+ if (typeof decimalValue === 'number') {
+ return decimalValue.toFixed(2);
+ } else {
+ return null;
+ }
+ }
+ });
+ });
+
+ detailed_column_list.push({
+ dataField: 'reportingPeriodDatetime',
+ text: t('Reporting Period') + ' - ' + t('Datetime'),
+ sort: true
+ });
+
+ json['reporting_period']['names'].forEach((currentValue, index) => {
+ let unit = json['reporting_period']['units'][index];
+ detailed_column_list.push({
+ dataField: 'b' + index,
+ text: t('Reporting Period') + ' - ' + currentValue + ' (' + unit + ')',
+ sort: true,
+ formatter: function(decimalValue) {
+ if (typeof decimalValue === 'number') {
+ return decimalValue.toFixed(2);
+ } else {
+ return null;
+ }
+ }
+ });
+ });
+ setDetailedDataTableColumns(detailed_column_list);
+
+ let detailed_value_list = [];
+ if (json['base_period']['timestamps'].length > 0 || json['reporting_period']['timestamps'].length > 0) {
+ const max_timestamps_length =
+ json['base_period']['timestamps'][0].length >= json['reporting_period']['timestamps'][0].length
+ ? json['base_period']['timestamps'][0].length
+ : json['reporting_period']['timestamps'][0].length;
+ for (let index = 0; index < max_timestamps_length; index++) {
+ let detailed_value = {};
+ detailed_value['id'] = index;
+ detailed_value['basePeriodDatetime'] =
+ index < json['base_period']['timestamps'][0].length
+ ? json['base_period']['timestamps'][0][index]
+ : null;
+ json['base_period']['values'].forEach((currentValue, energyCategoryIndex) => {
+ detailed_value['a' + energyCategoryIndex] =
+ index < json['base_period']['values'][energyCategoryIndex].length
+ ? json['base_period']['values'][energyCategoryIndex][index]
+ : null;
+ });
+ detailed_value['reportingPeriodDatetime'] =
+ index < json['reporting_period']['timestamps'][0].length
+ ? json['reporting_period']['timestamps'][0][index]
+ : null;
+ json['reporting_period']['values'].forEach((currentValue, energyCategoryIndex) => {
+ detailed_value['b' + energyCategoryIndex] =
+ index < json['reporting_period']['values'][energyCategoryIndex].length
+ ? json['reporting_period']['values'][energyCategoryIndex][index]
+ : null;
+ });
+ detailed_value_list.push(detailed_value);
+ }
+
+ let detailed_value = {};
+ detailed_value['id'] = detailed_value_list.length;
+ detailed_value['basePeriodDatetime'] = t('Subtotal');
+ json['base_period']['subtotals'].forEach((currentValue, index) => {
+ detailed_value['a' + index] = currentValue;
+ });
+ detailed_value['reportingPeriodDatetime'] = t('Subtotal');
+ json['reporting_period']['subtotals'].forEach((currentValue, index) => {
+ detailed_value['b' + index] = currentValue;
+ });
+ detailed_value_list.push(detailed_value);
+ setTimeout(() => {
+ setDetailedDataTableData(detailed_value_list);
+ }, 0);
+ }
+ }
+
+ // enable submit button
+ setSubmitButtonDisabled(false);
+ // hide spinner
+ setSpinnerHidden(true);
+ // show export button
+ setExportButtonHidden(false);
+ // show result data
+ setResultDataHidden(false);
+ } else {
+ toast.error(t(json.description));
+ setSpinnerHidden(true);
+ setSubmitButtonDisabled(false);
+ }
+ })
+ .catch(err => {
+ console.log(err);
+ });
+ };
+ const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
+
+ let onSpaceCascaderChange = (value, selectedOptions) => {
+ setSelectedSpaceName(selectedOptions.map(o => o.label).join('/'));
+ setSelectedSpaceID(value[value.length - 1]);
+
+ let isResponseOK = false;
+ fetch(APIBaseURL + '/spaces/' + value[value.length - 1] + '/microgrids', {
+ method: 'GET',
+ headers: {
+ 'Content-type': 'application/json',
+ 'User-UUID': getCookieValue('user_uuid'),
+ Token: getCookieValue('token')
+ },
+ body: null
+ })
+ .then(response => {
+ if (response.ok) {
+ isResponseOK = true;
+ }
+ return response.json();
+ })
+ .then(json => {
+ if (isResponseOK) {
+ json = JSON.parse(
+ JSON.stringify([json])
+ .split('"id":')
+ .join('"value":')
+ .split('"name":')
+ .join('"label":')
+ );
+ console.log(json);
+ setMicrogridList(json[0]);
+ setFilteredMicrogridList(json[0]);
+ if (json[0].length > 0) {
+ setSelectedMicrogrid(json[0][0].value);
+ // enable submit button
+ setSubmitButtonDisabled(false);
+ } else {
+ setSelectedMicrogrid(undefined);
+ // disable submit button
+ setSubmitButtonDisabled(true);
+ }
+ } else {
+ toast.error(t(json.description));
+ }
+ })
+ .catch(err => {
+ console.log(err);
+ });
+ };
+
+ const onSearchMicrogrid = ({ target }) => {
+ const keyword = target.value.toLowerCase();
+ const filteredResult = microgridList.filter(microgrid =>
+ microgrid.label.toLowerCase().includes(keyword)
+ );
+ setFilteredMicrogridList(keyword.length ? filteredResult : microgridList);
+ if (filteredResult.length > 0) {
+ setSelectedMicrogrid(filteredResult[0].value);
+ // enable submit button
+ setSubmitButtonDisabled(false);
+ } else {
+ setSelectedMicrogrid(undefined);
+ // disable submit button
+ setSubmitButtonDisabled(true);
+ }
+ let customInputTarget = document.getElementById('microgridSelect');
+ customInputTarget.value = filteredResult[0].value;
+ };
+
+ let onComparisonTypeChange = ({ target }) => {
+ console.log(target.value);
+ setComparisonType(target.value);
+ if (target.value === 'year-over-year') {
+ setBasePeriodDateRangePickerDisabled(true);
+ setBasePeriodDateRange([
+ moment(reportingPeriodDateRange[0])
+ .subtract(1, 'years')
+ .toDate(),
+ moment(reportingPeriodDateRange[1])
+ .subtract(1, 'years')
+ .toDate()
+ ]);
+ } else if (target.value === 'month-on-month') {
+ setBasePeriodDateRangePickerDisabled(true);
+ setBasePeriodDateRange([
+ moment(reportingPeriodDateRange[0])
+ .subtract(1, 'months')
+ .toDate(),
+ moment(reportingPeriodDateRange[1])
+ .subtract(1, 'months')
+ .toDate()
+ ]);
+ } else if (target.value === 'free-comparison') {
+ setBasePeriodDateRangePickerDisabled(false);
+ setBasePeriodDateRange([
+ moment(reportingPeriodDateRange[0])
+ .subtract(1, 'days')
+ .toDate(),
+ moment(reportingPeriodDateRange[1])
+ .subtract(1, 'days')
+ .toDate()
+ ]);
+ } else if (target.value === 'none-comparison') {
+ setBasePeriodDateRange([null, null]);
+ setBasePeriodDateRangePickerDisabled(true);
+ }
+ };
+
+ // Callback fired when value changed
+ 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]]);
+ }
+ };
+
+ // Callback fired when value changed
+ 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]]);
+ const dateDifferenceInSeconds = moment(DateRange[1]).valueOf() / 1000 - moment(DateRange[0]).valueOf() / 1000;
+ if (periodType === 'hourly') {
+ if (dateDifferenceInSeconds > 3 * 365 * 24 * 60 * 60) {
+ // more than 3 years
+ setPeriodType('yearly');
+ document.getElementById('periodType').value = 'yearly';
+ } else if (dateDifferenceInSeconds > 6 * 30 * 24 * 60 * 60) {
+ // more than 6 months
+ setPeriodType('monthly');
+ document.getElementById('periodType').value = 'monthly';
+ } else if (dateDifferenceInSeconds > 30 * 24 * 60 * 60) {
+ // more than 30 days
+ setPeriodType('daily');
+ document.getElementById('periodType').value = 'daily';
+ }
+ } else if (periodType === 'daily') {
+ if (dateDifferenceInSeconds >= 3 * 365 * 24 * 60 * 60) {
+ // more than 3 years
+ setPeriodType('yearly');
+ document.getElementById('periodType').value = 'yearly';
+ } else if (dateDifferenceInSeconds >= 6 * 30 * 24 * 60 * 60) {
+ // more than 6 months
+ setPeriodType('monthly');
+ document.getElementById('periodType').value = 'monthly';
+ }
+ } else if (periodType === 'monthly') {
+ if (dateDifferenceInSeconds >= 3 * 365 * 24 * 60 * 60) {
+ // more than 3 years
+ setPeriodType('yearly');
+ document.getElementById('periodType').value = 'yearly';
+ }
+ }
+ if (comparisonType === 'year-over-year') {
+ setBasePeriodDateRange([
+ moment(DateRange[0])
+ .clone()
+ .subtract(1, 'years')
+ .toDate(),
+ moment(DateRange[1])
+ .clone()
+ .subtract(1, 'years')
+ .toDate()
+ ]);
+ } else if (comparisonType === 'month-on-month') {
+ setBasePeriodDateRange([
+ moment(DateRange[0])
+ .clone()
+ .subtract(1, 'months')
+ .toDate(),
+ moment(DateRange[1])
+ .clone()
+ .subtract(1, 'months')
+ .toDate()
+ ]);
+ }
+ }
+ };
+
+ // Callback fired when value clean
+ let onBasePeriodClean = event => {
+ setBasePeriodDateRange([null, null]);
+ };
+
+ // Callback fired when value clean
+ let onReportingPeriodClean = event => {
+ setReportingPeriodDateRange([null, null]);
+ };
+
+ const isBasePeriodTimestampExists = base_period_data => {
+ const timestamps = base_period_data['timestamps'];
+
+ if (timestamps.length === 0) {
+ return false;
+ }
+
+ for (let i = 0; i < timestamps.length; i++) {
+ if (timestamps[i].length > 0) {
+ return true;
+ }
+ }
+ return false;
+ };
+
+ // Handler
+ const handleSubmit = e => {
+ e.preventDefault();
+ console.log('handleSubmit');
+ console.log(selectedSpaceID);
+ console.log(selectedMicrogrid);
+ console.log(comparisonType);
+ console.log(periodType);
+ console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null);
+ console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null);
+ console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'));
+ console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
+
+ let url =
+ APIBaseURL +
+ '/reports/microgridreportingenergy?' +
+ 'id=' +
+ selectedMicrogrid +
+ '&periodtype=' +
+ periodType +
+ '&baseperiodstartdatetime=' +
+ (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') +
+ '&baseperiodenddatetime=' +
+ (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : '') +
+ '&reportingperiodstartdatetime=' +
+ moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
+ '&reportingperiodenddatetime=' +
+ moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') +
+ '&language=' +
+ language;
+ loadData(url);
+ };
+
+ const handleExport = e => {
+ e.preventDefault();
+ const mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+ const fileName = 'microgridreproting.xlsx';
+ var fileUrl = 'data:' + mimeType + ';base64,' + excelBytesBase64;
+ fetch(fileUrl)
+ .then(response => response.blob())
+ .then(blob => {
+ var link = window.document.createElement('a');
+ link.href = window.URL.createObjectURL(blob, { type: mimeType });
+ link.download = fileName;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ });
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ {/*
+ {cardSummaryList.map(cardSummaryItem => (
+
+ {cardSummaryItem['subtotal'] && (
+
+ )}
+
+ ))}
+
*/}
+
+
+ {/*
*/}
+
+
+
+
+ {/*
+ {cardSummaryList.map(cardSummaryItem => (
+
+ {cardSummaryItem['subtotal'] && (
+
+ )}
+
+ ))}
+
*/}
+
+
+ {/*
*/}
+
+