diff --git a/src/components/UtilityAccountSummary.js b/src/components/UtilityAccountSummary.js new file mode 100644 index 0000000000000000000000000000000000000000..35345068a7df92a78f0a6970a809364b3d098c8a --- /dev/null +++ b/src/components/UtilityAccountSummary.js @@ -0,0 +1,13 @@ +import React, { Component } from 'react'; + +class UtilityAccountSummary extends Component { + state = { } + + render() { + return ( +
Coming Soon
+ ); + } +} + +export default UtilityAccountSummary; diff --git a/src/components/UtilityLine/UtilityDisaggregation.js b/src/components/UtilityLine/UtilityDisaggregation.js index ce59f31cc95209190d772815f5b5b5339fc1adc0..3b324fbcd54ca99a96d0be78e6f0886694aa0077 100644 --- a/src/components/UtilityLine/UtilityDisaggregation.js +++ b/src/components/UtilityLine/UtilityDisaggregation.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Icon } from 'react-fa'; import { Table } from 'reactstrap'; +import ReactTooltip from 'react-tooltip'; import DisaggregationForm from './DisaggregationForm'; import Fade from '../Fade'; import request from '../../utils/request'; @@ -297,7 +298,7 @@ class UtilityDisaggregation extends Component { return ( + Disaggregate + + {/* eslint-disable no-use-before-define */} + {this.props.disaggregateData.length > 0 && + + + + + } + {/* eslint-enable */} + {this.renderDownloadBtn()} {this.props.renderUploadButton('Disaggregated Bill')} @@ -434,10 +456,16 @@ const styles = { alignRight: { textAlign: 'right', }, + faIconSelected: { + color: 'blue', + cursor: 'pointer', + }, }; UtilityDisaggregation.propTypes = { - street_address: PropTypes.string, + accountCreated: PropTypes.bool, + accountId: PropTypes.number, + disableDisaggregateBtn: PropTypes.func, disaggregateData: PropTypes.arrayOf( PropTypes.shape({ bill_from_date: PropTypes.string, @@ -447,15 +475,17 @@ UtilityDisaggregation.propTypes = { other: PropTypes.number, }) ), - utility_type: PropTypes.string, + displayDisaggregateChart: PropTypes.bool, + displayDisaggregateData: PropTypes.bool, handleBillGAEvent: PropTypes.func, - rSquared: PropTypes.number, - renderUploadButton: PropTypes.func, - accountCreated: PropTypes.bool, - disableDisaggregateBtn: PropTypes.func, handleDisaggregateUtilityBill: PropTypes.func, loadingDisaggregate: PropTypes.bool, - accountId: PropTypes.number, + renderUploadButton: PropTypes.func, + rSquared: PropTypes.number, + street_address: PropTypes.string, + toggleDisaggregateChartDisplay: PropTypes.func, + toggleDisaggregateDataDisplay: PropTypes.func, + utility_type: PropTypes.string, }; export default UtilityDisaggregation; diff --git a/src/components/UtilityLine/UtilityLine.js b/src/components/UtilityLine/UtilityLine.js index 01b3fa9b610debe069d0f5c82d680decc0c93b30..d7d794485b2af7d0382d5e8014da70dcdc43c8ed 100644 --- a/src/components/UtilityLine/UtilityLine.js +++ b/src/components/UtilityLine/UtilityLine.js @@ -10,6 +10,7 @@ import { uploadSVG } from '../bpl'; import './styles.css'; import { generateBillDownload, renderBillData, renderDisaggregateData } from './dataInteraction'; import userPropType from '../../containers/User/propTypes'; +import UtilityAccountSummary from '../UtilityAccountSummary'; class UtilityLine extends Component { @@ -495,57 +496,6 @@ class UtilityLine extends Component { return chartDownload; } - renderBillViewButtons = () => { - let billDataToggle = ( - ); - } - let disaggregateDataToggle = ( - ); - chartToggle = ( - - ); - } - - return ( -
-
- {billDataToggle} -
-
-
- {disaggregateDataToggle} -
-
-
- {chartToggle} -
-
- ); - } - - renderDisaggregateChart = () => { let unit = 'kWh'; if (this.state.form.utility.endsWith('gas')) { @@ -789,16 +739,28 @@ class UtilityLine extends Component { {this.renderNatGrid()} {this.renderDisaggregateDropdown()} {this.renderLabel()} +
{this.state.accountCreated && !this.state.editing && this.renderFetchBtn()} - {!this.state.accountCreated ? - this.renderAddAccountBtn() : null} - {this.state.editing && - this.renderSaveEditBtn()} - {this.state.editing && - this.renderCancelEditBtn()} + + {/* eslint-disable no-use-before-define */} + {this.state.billData.length > 0 && + } + {/* eslint-enable */} + + {!this.state.accountCreated ? this.renderAddAccountBtn() : null} + + {this.state.editing && this.renderSaveEditBtn()} + {this.state.editing && this.renderCancelEditBtn()} + {this.state.accountCreated && this.renderBillDownloadButton()}
+
{this.state.accountCreated && this.renderUploadButton('Bill')}
@@ -810,53 +772,68 @@ class UtilityLine extends Component {
{this.state.accountCreated && 'Disaggregation'}
-
{this.state.accountCreated ? 'View Data' : ''}
-
- {this.state.accountCreated && this.renderBillViewButtons()} -
+
{this.state.accountCreated && 'Account Summary'}
+
+ {renderBillData( this.state.billData, this.state.displayBillData, this.state.form.utility, this.state.account_id )} + {renderDisaggregateData( this.state.disaggregateData, this.state.displayDisaggregateData, this.state.account_id )} +
-
{this.state.displayDisaggregateChart ? 'Disaggregation Chart' : ''}
+
{this.state.displayDisaggregateChart && 'Disaggregation Chart'}
+ {this.renderChartDownloadButton()}
{this.renderDisaggregateChart()}
+
+
); } } +const styles = { + faIconSelected: { + color: 'blue', + cursor: 'pointer', + }, +}; + UtilityLine.propTypes = { form: PropTypes.shape({ utility: PropTypes.string,