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

added spinners to Dashboard of Web UI

pull/85/head
13621160019@163.com 2021-09-09 12:10:02 +08:00
parent e4142f7e20
commit 9cb3a29469
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/components/MyEMS/dashboard/Dashboard.js
View File

@ -1,6 +1,9 @@
import React, { Fragment, useEffect, useState } from 'react'; import React, { Fragment, useEffect, useState } from 'react';
import CountUp from 'react-countup'; import CountUp from 'react-countup';
import { Col, Row } from 'reactstrap'; import {
Col,
Row,
Spinner, } from 'reactstrap';
import CardSummary from '../common/CardSummary'; import CardSummary from '../common/CardSummary';
import LineChart from '../common/LineChart'; import LineChart from '../common/LineChart';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
@ -23,6 +26,9 @@ const Dashboard = ({ setRedirect, setRedirectUrl, t }) => {
const [basePeriodEndsDatetime, setBasePeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'years')); const [basePeriodEndsDatetime, setBasePeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'years'));
const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('year')); const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('year'));
const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment); const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
const [spinnerHidden, setSpinnerHidden] = useState(false);
//Results //Results
const [costShareData, setCostShareData] = useState([]); const [costShareData, setCostShareData] = useState([]);
const [timeOfUseShareData, setTimeOfUseShareData] = useState([]); const [timeOfUseShareData, setTimeOfUseShareData] = useState([]);
@ -101,6 +107,8 @@ const Dashboard = ({ setRedirect, setRedirectUrl, t }) => {
if (isResponseOK) { if (isResponseOK) {
console.log(json); console.log(json);
setFetchSuccess(true); setFetchSuccess(true);
// hide spinner
setSpinnerHidden(true);
let thisYearInputCardSummaryArray = [] let thisYearInputCardSummaryArray = []
json['reporting_period_input']['names'].forEach((currentValue, index) => { json['reporting_period_input']['names'].forEach((currentValue, index) => {
let cardSummaryItem = {} let cardSummaryItem = {}
@ -355,6 +363,13 @@ const Dashboard = ({ setRedirect, setRedirectUrl, t }) => {
return ( return (
<Fragment> <Fragment>
<div className="card-deck"> <div className="card-deck">
<Spinner color="primary" hidden={spinnerHidden} />
<Spinner color="secondary" hidden={spinnerHidden} />
<Spinner color="success" hidden={spinnerHidden} />
<Spinner color="danger" hidden={spinnerHidden} />
<Spinner color="warning" hidden={spinnerHidden} />
<Spinner color="info" hidden={spinnerHidden} />
<Spinner color="light" hidden={spinnerHidden} />
{thisYearInputCardSummaryList.map(cardSummaryItem => ( {thisYearInputCardSummaryList.map(cardSummaryItem => (
<CardSummary key={uuid()} <CardSummary key={uuid()}
rate={cardSummaryItem['increment_rate']} rate={cardSummaryItem['increment_rate']}