From 05bdbdc34d0419adc17e5d9c5aedf31d24f7fb85 Mon Sep 17 00:00:00 2001 From: akkking Date: Thu, 21 Mar 2019 14:27:59 -0400 Subject: [PATCH 01/79] add Blocnote components, container, add routes --- src/components/Blocnote/FinancialInputs.js | 100 ++++++ src/components/Blocnote/PreliminaryFinance.js | 124 ++++++++ .../PreliminaryFinance/BudgetGraph.js | 29 ++ .../PreliminaryFinance/CostEstimation.js | 53 ++++ .../EnergyExpenseSavingsProjection.js | 61 ++++ .../PreliminaryFinance/LoanSummary.js | 61 ++++ .../PostRetrofitBalanceSheet.js | 61 ++++ .../PostRetrofitIncomeStatement.js | 61 ++++ .../PriorRetrofitBalanceSheet.js | 61 ++++ .../PriorRetrofitIncomeStatement.js | 61 ++++ .../PreliminaryFinance/ProjectEconomics.js | 61 ++++ .../PreliminaryFinance/SavingEstimation.js | 54 ++++ src/components/Blocnote/styles.css | 14 + src/components/SideBarDetail/index.js | 9 +- src/containers/BGroup/BGroupBuildingTable.js | 12 +- src/containers/Blocnote/Blocnote.js | 118 +++++++ src/containers/Blocnote/actions.js | 8 + src/containers/Blocnote/constants.js | 3 + src/containers/Blocnote/propTypes.js | 43 +++ src/containers/Blocnote/reducer.js | 295 ++++++++++++++++++ src/containers/Blocnote/sagas.js | 128 ++++++++ src/containers/Blocnote/styles.css | 10 + src/routes.js | 12 + src/utils/restServices.js | 3 + 24 files changed, 1430 insertions(+), 12 deletions(-) create mode 100644 src/components/Blocnote/FinancialInputs.js create mode 100644 src/components/Blocnote/PreliminaryFinance.js create mode 100644 src/components/Blocnote/PreliminaryFinance/BudgetGraph.js create mode 100644 src/components/Blocnote/PreliminaryFinance/CostEstimation.js create mode 100644 src/components/Blocnote/PreliminaryFinance/EnergyExpenseSavingsProjection.js create mode 100644 src/components/Blocnote/PreliminaryFinance/LoanSummary.js create mode 100644 src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js create mode 100644 src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js create mode 100644 src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js create mode 100644 src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js create mode 100644 src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js create mode 100644 src/components/Blocnote/PreliminaryFinance/SavingEstimation.js create mode 100644 src/components/Blocnote/styles.css create mode 100644 src/containers/Blocnote/Blocnote.js create mode 100644 src/containers/Blocnote/actions.js create mode 100644 src/containers/Blocnote/constants.js create mode 100644 src/containers/Blocnote/propTypes.js create mode 100644 src/containers/Blocnote/reducer.js create mode 100644 src/containers/Blocnote/sagas.js create mode 100644 src/containers/Blocnote/styles.css diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js new file mode 100644 index 00000000..d46e96b2 --- /dev/null +++ b/src/components/Blocnote/FinancialInputs.js @@ -0,0 +1,100 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { Icon } from 'react-fa'; +import LinkBarDetail from '../../components/LinkBarDetail'; +import ErrorAlert from '../../components/ErrorAlert'; +import './styles.css'; +import Loading from '../../components/Loading'; +/* eslint-disable react/sort-comp */ + +class FinancialInputs extends Component { + mounted = false; + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + componentDidMount() { + this.mounted = true; + window.addEventListener('offline', this.handleConnection); + window.addEventListener('online', this.handleConnection); + } + + componentWillUnmount() { + this.mounted = false; + clearInterval(this.offlineTimer); + window.removeEventListener('offline', this.handleConnection); + window.removeEventListener('online', this.handleConnection); + } + + setOfflineDuration = () => { + // A function called every second + this.setState({ offlineDuration: this.state.offlineDuration + 1 }); + } + + resetErrorMessage = () => { + this.setState({ error: false }); + } + + render() { + let mainContent = null; + + if (this.state.loading) { + mainContent = ; + } else { + mainContent = ( +
+ +
+
+

+ Offline. Changes have not been saved for {this.state.offlineDuration} second{this.state.offlineDuration !== 1 ? 's' : ''} + { this.setState({ hideOffline: true }); }} + className="float-right" + style={{ + cursor: 'pointer', + }} + /> +

+
+ {this.state.successMessages} +
+
+ ); + } + + return ( +
+ + {mainContent} +
+ ); + } +} + +FinancialInputs.propTypes = { + buildingId: PropTypes.string, +}; + +export default FinancialInputs; diff --git a/src/components/Blocnote/PreliminaryFinance.js b/src/components/Blocnote/PreliminaryFinance.js new file mode 100644 index 00000000..05b8b598 --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance.js @@ -0,0 +1,124 @@ +import React, { Component } from 'react'; +import LinkBarDetail from '../LinkBarDetail'; +import ErrorAlert from '../ErrorAlert'; +import Loading from '../Loading'; +import './styles.css'; +import CostEstimation from './PreliminaryFinance/CostEstimation'; +import SavingEstimation from './PreliminaryFinance/SavingEstimation'; +import LoanSummary from './PreliminaryFinance/LoanSummary'; +import ProjectEconomics from './PreliminaryFinance/ProjectEconomics'; +import EnergyExpenseSavingsProjection from './PreliminaryFinance/EnergyExpenseSavingsProjection'; +import PriorRetrofitIncomeStatement from './PreliminaryFinance/PriorRetrofitIncomeStatement'; +import PostRetrofitIncomeStatement from './PreliminaryFinance/PostRetrofitIncomeStatement'; +import PriorRetrofitBalanceSheet from './PreliminaryFinance/PriorRetrofitBalanceSheet'; +import PostRetrofitBalanceSheet from './PreliminaryFinance/PostRetrofitBalanceSheet'; +import request from '../../utils/request'; +import { getHeaders, blocnoteURL } from '../../utils/restServices'; +/* eslint-disable react/sort-comp */ + +class PreliminaryFinance extends Component { + mounted = false; + + constructor(props) { + super(props); + + this.state = { + scenario: [], + successMessages: [], + error: false, + loading: false, + }; + } + + componentDidMount() { + this.loadScenario(); + } + + loadScenario = () => { + console.log('hello'); // eslint-disable-line + this.setState({ loading: true }); + request(`${blocnoteURL}scenario`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + if (this.mounted) { + const data = res.data; + if (!res.err && data) { + this.setState({ + scenario: data, + }); + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + } + }); + } + + render() { + let mainContent = null; + // const { blocnote, eng } = this.props; + // const disableBTN = ( + // blocnote.scenarioStatus.loading || blocnote.scenarioStatus.error || + // blocnote.scenarioStatus.is_finished !== null || + // envelblocnoteope.scenarioStatus.is_started !== null || + // !this.props.user.permissions['create::energyPlusSimulation'] + // ); + + if (this.state.loading) { + mainContent = ; + } else { + mainContent = ( +
+ +
+
+ Scenario :   +
+
+
+ +
+
+
+ + + + + + + + + + +
+ ); + } + + return ( +
+ + {mainContent} +
+ ); + } +} + +export default PreliminaryFinance; diff --git a/src/components/Blocnote/PreliminaryFinance/BudgetGraph.js b/src/components/Blocnote/PreliminaryFinance/BudgetGraph.js new file mode 100644 index 00000000..03c0d02f --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/BudgetGraph.js @@ -0,0 +1,29 @@ +import React, { Component } from 'react'; + + +class BudgetGraph extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + return ( +
+
+

 

+ +
Not Feasible
+
Feasible
+
+
+ ); + } +} + +export default BudgetGraph; diff --git a/src/components/Blocnote/PreliminaryFinance/CostEstimation.js b/src/components/Blocnote/PreliminaryFinance/CostEstimation.js new file mode 100644 index 00000000..bf97a33f --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/CostEstimation.js @@ -0,0 +1,53 @@ +import React, { Component } from 'react'; + + +class CostEstimation extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const style = { textAlign: 'center' }; + return ( +
+

+ Cost Estimation +

+ + + + + + + + + + + + + + + +
ItemEstimated CostOption
+ + +
+
$
+ +
+
+ +
+ +
+ ); + } +} + +export default CostEstimation; diff --git a/src/components/Blocnote/PreliminaryFinance/EnergyExpenseSavingsProjection.js b/src/components/Blocnote/PreliminaryFinance/EnergyExpenseSavingsProjection.js new file mode 100644 index 00000000..ed6eafd7 --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/EnergyExpenseSavingsProjection.js @@ -0,0 +1,61 @@ +import React, { Component } from 'react'; + + +class EnergyExpenseSavingsProjection extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const style = { textAlign: 'center' }; + return ( +
+

+ Energy Expense Savings Projection +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Building ConstructionU-Value [Btu/hr-ft2-F]
External wall0.21
Ground floor0.60
Roof0.09
Internal ceiling0.20
Internal floor0.20
Window0.95
+
+ ); + } +} + +export default EnergyExpenseSavingsProjection; diff --git a/src/components/Blocnote/PreliminaryFinance/LoanSummary.js b/src/components/Blocnote/PreliminaryFinance/LoanSummary.js new file mode 100644 index 00000000..9b00e962 --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/LoanSummary.js @@ -0,0 +1,61 @@ +import React, { Component } from 'react'; + + +class LoanSummary extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const style = { textAlign: 'center' }; + return ( +
+

+ Loan Summary +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Building ConstructionU-Value [Btu/hr-ft2-F]
External wall0.21
Ground floor0.60
Roof0.09
Internal ceiling0.20
Internal floor0.20
Window0.95
+
+ ); + } +} + +export default LoanSummary; diff --git a/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js b/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js new file mode 100644 index 00000000..1d87aeb7 --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js @@ -0,0 +1,61 @@ +import React, { Component } from 'react'; + + +class PostRetrofitBalanceSheet extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const style = { textAlign: 'center' }; + return ( +
+

+ Post Retrofit Balance Sheet +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Building ConstructionU-Value [Btu/hr-ft2-F]
External wall0.21
Ground floor0.60
Roof0.09
Internal ceiling0.20
Internal floor0.20
Window0.95
+
+ ); + } +} + +export default PostRetrofitBalanceSheet; diff --git a/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js b/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js new file mode 100644 index 00000000..8b194a94 --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js @@ -0,0 +1,61 @@ +import React, { Component } from 'react'; + + +class PostRetrofitIncomeStatement extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const style = { textAlign: 'center' }; + return ( +
+

+ Post Retrofit Income Statement +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Building ConstructionU-Value [Btu/hr-ft2-F]
External wall0.21
Ground floor0.60
Roof0.09
Internal ceiling0.20
Internal floor0.20
Window0.95
+
+ ); + } +} + +export default PostRetrofitIncomeStatement; diff --git a/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js new file mode 100644 index 00000000..83b912ed --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js @@ -0,0 +1,61 @@ +import React, { Component } from 'react'; + + +class PriorRetrofitBalanceSheet extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const style = { textAlign: 'center' }; + return ( +
+

+ Prior Retrofit Balance Sheet +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Building ConstructionU-Value [Btu/hr-ft2-F]
External wall0.21
Ground floor0.60
Roof0.09
Internal ceiling0.20
Internal floor0.20
Window0.95
+
+ ); + } +} + +export default PriorRetrofitBalanceSheet; diff --git a/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js new file mode 100644 index 00000000..6c0cde75 --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js @@ -0,0 +1,61 @@ +import React, { Component } from 'react'; + + +class PriorRetrofitIncomeStatement extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const style = { textAlign: 'center' }; + return ( +
+

+ Prior Retrofit Income Statement +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Building ConstructionU-Value [Btu/hr-ft2-F]
External wall0.21
Ground floor0.60
Roof0.09
Internal ceiling0.20
Internal floor0.20
Window0.95
+
+ ); + } +} + +export default PriorRetrofitIncomeStatement; diff --git a/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js b/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js new file mode 100644 index 00000000..5f68876c --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js @@ -0,0 +1,61 @@ +import React, { Component } from 'react'; + + +class ProjectEconomics extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const style = { textAlign: 'center' }; + return ( +
+

+ Project Economics +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Building ConstructionU-Value [Btu/hr-ft2-F]
External wall0.21
Ground floor0.60
Roof0.09
Internal ceiling0.20
Internal floor0.20
Window0.95
+
+ ); + } +} + +export default ProjectEconomics; diff --git a/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js b/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js new file mode 100644 index 00000000..dd831842 --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js @@ -0,0 +1,54 @@ +import React, { Component } from 'react'; + + +class SavingEstimation extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const style = { textAlign: 'center' }; + return ( +
+

+ Saving Estimation +

+ + + + + + + + + + + + + + + + + +
UtilityEstimated SavingsUsed Before RetrofitUsed After Retrofit
Eletric +
+ +
%
+
+
+ + + +
+
+ ); + } +} + +export default SavingEstimation; diff --git a/src/components/Blocnote/styles.css b/src/components/Blocnote/styles.css new file mode 100644 index 00000000..e6249044 --- /dev/null +++ b/src/components/Blocnote/styles.css @@ -0,0 +1,14 @@ +.top-notification { + position: fixed; + z-index: 1060; + top: 0; + left: 0; + right: 0; + text-align: center; + overflow: hidden; +} + +.top-notification-item { + border-radius: 0px !important; + line-height: 2; +} diff --git a/src/components/SideBarDetail/index.js b/src/components/SideBarDetail/index.js index bf06ec46..d648702f 100644 --- a/src/components/SideBarDetail/index.js +++ b/src/components/SideBarDetail/index.js @@ -210,14 +210,11 @@ export default function SideBarDetail({ building, children, contacts, user }) { Reports -
  • - +
  • + {blocnoteSVG} Blocnote - +
  • diff --git a/src/containers/BGroup/BGroupBuildingTable.js b/src/containers/BGroup/BGroupBuildingTable.js index fe932f64..866e6fa3 100644 --- a/src/containers/BGroup/BGroupBuildingTable.js +++ b/src/containers/BGroup/BGroupBuildingTable.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { CSVLink } from 'react-csv'; +// import { CSVLink } from 'react-csv'; import ReactTable from 'react-table'; import ReactTooltip from 'react-tooltip'; import { Link } from 'react-router'; @@ -766,9 +766,9 @@ export default class BGroupBuildingTable extends Component { return val; }); - const csvlinkStyle = { - lineHeight: 1.15, - }; + // const csvlinkStyle = { + // lineHeight: 1.15, + // }; return (
    @@ -786,7 +786,7 @@ export default class BGroupBuildingTable extends Component {
    {this.state.numRows} buildings
    - Export ⬇ -   +   */} Toggle Columns diff --git a/src/containers/Blocnote/Blocnote.js b/src/containers/Blocnote/Blocnote.js new file mode 100644 index 00000000..18df6599 --- /dev/null +++ b/src/containers/Blocnote/Blocnote.js @@ -0,0 +1,118 @@ +import React, { Component } from 'react'; +// import PropTypes from 'prop-types'; +// import { connect } from 'react-redux'; +// import { bindActionCreators } from 'redux'; +import { Link } from 'react-router'; +// import { +// Tooltip, ResponsiveContainer, +// PieChart, Pie, Cell, +// } from 'recharts'; + +import LinkBarDetail from '../../components/LinkBarDetail'; +import buildingDetailPropTypes from '../../containers/Building/propTypes'; +// import { +// loadScenario, +// } from './actions'; +// import envelopeProps from './propTypes'; +import './styles.css'; + +// const COLORS = ['#40B1F0', '#FF4906', '#06FFC6', '#FFC606', '#C606FF']; + +class Blocnote extends Component { + + static isDataLoaded(obj, inKey) { + let dataKey = 'data'; + if (inKey !== undefined) { + dataKey = inKey; + } + return !obj.loading && !obj.error && + obj[dataKey] !== undefined && obj[dataKey] !== null && + obj[dataKey].length > 0; + } + + constructor(props) { + super(props); + this.state = { + }; + } + + render() { + const rootURL = `/buildings/${this.props.building.building_id}`; + + return ( +
    + + +
    + {/* Map, Construction table & run-sim btn */} +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + +
    OPTIONSSTATUS
    + + Financial Inputs + + Complete
    + + Preliminary Finance + + OK
    Budget SimulatorOK
    +
    {/* table */} +
    +
    +   +
    +
    + +
    {/* Container */} +
    + ); + } +} + +Blocnote.propTypes = { + building: buildingDetailPropTypes, + // envelope: envelopeProps, + // loadScenario: PropTypes.func, +}; + +// const mapDispatchToProps = dispatch => ( +// bindActionCreators({ +// // loadScenario, +// }, dispatch) +// ); + +// const mapStateToProps = state => ({ +// // envelope: state.envelope, +// eng: state.eng, +// }); + +export default Blocnote; diff --git a/src/containers/Blocnote/actions.js b/src/containers/Blocnote/actions.js new file mode 100644 index 00000000..2486db12 --- /dev/null +++ b/src/containers/Blocnote/actions.js @@ -0,0 +1,8 @@ +import { + LOAD_SCENARIO, +} from './constants'; +import { makeActionCreator } from '../../utils/reduxHelpers'; + +export const loadScenario = makeActionCreator(LOAD_SCENARIO, 'buildingId'); +export const scenarioLoaded = makeActionCreator(SCENARIO_SUCCESS, 'payload'); +export const scenarioLoadingError = makeActionCreator(SCENARIO_ERROR, 'error'); diff --git a/src/containers/Blocnote/constants.js b/src/containers/Blocnote/constants.js new file mode 100644 index 00000000..e8ff4deb --- /dev/null +++ b/src/containers/Blocnote/constants.js @@ -0,0 +1,3 @@ +export const LOAD_SCENARIO = 'LOAD_SCENARIO'; +export const SCENARIO_SUCCESS = 'SCENARIO_SUCCESS'; +export const SCENARIO_ERROR = 'SCENARIO_ERROR'; diff --git a/src/containers/Blocnote/propTypes.js b/src/containers/Blocnote/propTypes.js new file mode 100644 index 00000000..518f151c --- /dev/null +++ b/src/containers/Blocnote/propTypes.js @@ -0,0 +1,43 @@ +import PropTypes from 'prop-types'; + +const { shape, arrayOf, number, string, bool, oneOfType, instanceOf } = PropTypes; + +export const loadErrorPropTypes = { + loading: bool, + error: oneOfType([ + bool, + instanceOf(Error), + ]), +}; + +export const simStatusProps = shape({ + sim_started: string, + sim_finished: string, +}); + +export const monthlyHeatingConsum = shape({ + month: string, + value: number, +}); + +export const heatLossComponentBreakdown = shape({ + component: string, + mmbtu: number, + percentage: number, +}); + +export default shape({ + simStatus: shape({ + ...loadErrorPropTypes, + measures: arrayOf(simStatusProps), + }), + monthlyHeatingConsumption: shape({ + ...loadErrorPropTypes, + data: arrayOf(monthlyHeatingConsum), + }), + heatLossComponentBreakdown: shape({ + ...loadErrorPropTypes, + data: arrayOf(heatLossComponentBreakdown), + }), +}); + diff --git a/src/containers/Blocnote/reducer.js b/src/containers/Blocnote/reducer.js new file mode 100644 index 00000000..ce0ab8fc --- /dev/null +++ b/src/containers/Blocnote/reducer.js @@ -0,0 +1,295 @@ +import { + LOAD_SIM_STATUS, + SIM_STATUS_SUCCESS, + SIM_STATUS_ERROR, + RUN_SIMULATION_REQUESTED, + RUN_SIMULATION_SUCCEEDED, + RUN_SIMULATION_FAILED, + MONTHLY_HEATING_CONSUMPTION_REQUESTED, + MONTHLY_HEATING_CONSUMPTION_SUCCEEDED, + MONTHLY_HEATING_CONSUMPTION_FAILED, + HEAT_LOSS_COMPONENT_BREAKDOWN_REQUESTED, + HEAT_LOSS_COMPONENT_BREAKDOWN_SUCCEEDED, + HEAT_LOSS_COMPONENT_BREAKDOWN_FAILED, + DESIGN_LOAD_REQUESTED, + DESIGN_LOAD_SUCCEEDED, + DESIGN_LOAD_FAILED, + UTILITY_BILL_BREAKDOWN_REQUESTED, + UTILITY_BILL_BREAKDOWN_SUCCEEDED, + UTILITY_BILL_BREAKDOWN_FAILED, + BUILDING_FOOTPRINTS_REQUESTED, + BUILDING_FOOTPRINTS_SUCCEEDED, + BUILDING_FOOTPRINTS_FAILED, +} from './constants'; + +const J_TO_MMBTU = 9.4708 * (10 ** -10); +const WATTS_TO_MBH = 0.00341214163312794; + +const blocnoteInitialState = { + simStatus: { + loading: false, + error: false, + sim_started: null, + sim_finished: null, + }, + runSimulation: { + loading: false, + error: false, + payload: [], + }, + monthlyHeatingConsumption: { + loading: false, + error: false, + data: [], + }, + heatLossComponentBreakdown: { + loading: false, + error: false, + data: [], + }, + designLoad: { + loading: false, + error: false, + data: [], + }, + utilityBillBreakdown: { + loading: false, + error: false, + data: {}, + }, + buildingFootprintsLoading: false, + buildingFootprintsError: false, + buildingFootprints: [], +}; + +export default function (state = blocnoteInitialState, action) { + switch (action.type) { + case LOAD_SIM_STATUS: + return { + ...state, + simStatus: { + ...state.simStatus, + loading: true, + error: false, + }, + }; + + case SIM_STATUS_SUCCESS: { + /* eslint-disable no-unused-vars, camelcase */ + const { sim_started, sim_finished } = action.payload; + + return { + ...state, + simStatus: { + sim_started: sim_started ? sim_started[0] : null, + sim_finished: sim_finished ? sim_finished[0] : null, + loading: false, + error: false, + }, + }; + } + + case SIM_STATUS_ERROR: + return { + ...state, + simStatus: { + ...state.simStatus, + loading: false, + error: action.error, + }, + }; + + case RUN_SIMULATION_REQUESTED: + return { + ...state, + runSimulation: { + loading: true, + error: false, + payload: [], + }, + }; + + case RUN_SIMULATION_SUCCEEDED: + return { + ...state, + runSimulation: { + loading: false, + error: false, + payload: action.payload, + }, + }; + + case RUN_SIMULATION_FAILED: + return { + ...state, + runSimulation: { + loading: false, + error: action.error, + payload: [], + }, + }; + + case MONTHLY_HEATING_CONSUMPTION_REQUESTED: + return { + ...state, + monthlyHeatingConsumption: { + ...blocnoteInitialState.monthlyHeatingConsumption, + loading: true, + error: false, + }, + }; + + case MONTHLY_HEATING_CONSUMPTION_SUCCEEDED: + return { + ...state, + monthlyHeatingConsumption: { + loading: false, + error: false, + data: action.payload.map(item => ({ + // Convert month num to month name + month: new Date(`${item[0]}/1/17`).toLocaleString('en-us', { month: 'short' }), + value: +(J_TO_MMBTU * item[1]).toFixed(2), + })), + }, + }; + + case MONTHLY_HEATING_CONSUMPTION_FAILED: + return { + ...state, + monthlyHeatingConsumption: { + ...blocnoteInitialState.monthlyHeatingConsumption, + loading: false, + error: action.error, + }, + }; + + case HEAT_LOSS_COMPONENT_BREAKDOWN_REQUESTED: + return { + ...state, + heatLossComponentBreakdown: { + ...blocnoteInitialState.heatLossComponentBreakdown, + loading: true, + }, + }; + + case HEAT_LOSS_COMPONENT_BREAKDOWN_SUCCEEDED: + return { + ...state, + heatLossComponentBreakdown: { + ...blocnoteInitialState.heatLossComponentBreakdown, + data: action.payload.map(item => ({ + component: item[0], + mmbtu: +item[1].toFixed(2), + percentage: +item[2].toFixed(2), + })), + }, + }; + + case HEAT_LOSS_COMPONENT_BREAKDOWN_FAILED: + return { + ...state, + heatLossComponentBreakdown: { + ...blocnoteInitialState.heatLossComponentBreakdown, + error: action.error, + }, + }; + + case DESIGN_LOAD_REQUESTED: + return { + ...state, + designLoad: { + ...blocnoteInitialState.designLoad, + loading: true, + }, + }; + + case DESIGN_LOAD_SUCCEEDED: + return { + ...state, + designLoad: { + ...blocnoteInitialState.designLoad, + data: action.payload.map(i => [i[0], +(i[1] * WATTS_TO_MBH).toFixed(2)]), + }, + }; + + case DESIGN_LOAD_FAILED: + return { + ...state, + designLoad: { + ...blocnoteInitialState.designLoad, + error: action.error, + }, + }; + + case UTILITY_BILL_BREAKDOWN_REQUESTED: + return { + ...state, + utilityBillBreakdown: { + loading: true, + error: false, + data: {}, + }, + }; + + case UTILITY_BILL_BREAKDOWN_SUCCEEDED: { + if (Object.keys(action.payload).length === 0) { + return { + ...state, + utilityBillBreakdown: { + ...blocnoteInitialState.utilityBillBreakdown, + }, + }; + } + + const { fuel_type, end_use, monthly_heating } = action.payload; + const ft = Object.keys(fuel_type).map(key => ( + { name: key, mmBTU: +(fuel_type[key].toFixed(2)) } + )); + + // TODO: Remove slice method on key, chart doesn't display more than 15 chars + const eu = Object.keys(end_use).map(key => ( + { name: key.replace(/_/g, ' ').slice(0, 15), mmBTU: +(end_use[key].toFixed(2)) } + )); + + return { + ...state, + utilityBillBreakdown: { + loading: false, + error: false, + data: { + fuel_type: ft, + end_use: eu, + monthly_heating: monthly_heating.map(i => +(i.toFixed(2))), + }, + }, + }; + } + + case UTILITY_BILL_BREAKDOWN_FAILED: + return { + ...state, + utilityBillBreakdown: { + loading: false, + error: action.error, + data: {}, + }, + }; + + case BUILDING_FOOTPRINTS_REQUESTED: + return { ...state, buildingFootprintsLoading: true, buildingFootprintsError: false }; + + case BUILDING_FOOTPRINTS_SUCCEEDED: + return { + ...state, + buildingFootprintsLoading: false, + buildingFootprintsError: false, + buildingFootprints: action.payload.footprint, + }; + + case BUILDING_FOOTPRINTS_FAILED: + return { ...state, buildingFootprintsLoading: false, buildingFootprintsError: action.error }; + + default: + return state; + } +} diff --git a/src/containers/Blocnote/sagas.js b/src/containers/Blocnote/sagas.js new file mode 100644 index 00000000..dd1ee7ee --- /dev/null +++ b/src/containers/Blocnote/sagas.js @@ -0,0 +1,128 @@ +import { call, put, takeEvery } from 'redux-saga/effects'; +import request from '../../utils/request'; + +import { + LOAD_SIM_STATUS, + RUN_SIMULATION_REQUESTED, + MONTHLY_HEATING_CONSUMPTION_REQUESTED, + HEAT_LOSS_COMPONENT_BREAKDOWN_REQUESTED, + DESIGN_LOAD_REQUESTED, + UTILITY_BILL_BREAKDOWN_REQUESTED, + BUILDING_FOOTPRINTS_REQUESTED, +} from './constants'; + +import { + simStatusLoaded, + simStatusLoadingError, + runSimulationSucceeded, + runSimulationFailed, + monthlyHeatingConsumptionLoaded, + monthlyHeatingConsumptionFailed, + heatLossComponentBreakdownLoaded, + heatLossComponentBreakdownFailed, + designLoadLoaded, + designLoadFailed, + utilityBillBreakdownLoaded, + utilityBillBreakdownFailed, + buildingFootprintsLoaded, + buildingFootprintsFailed, +} from './actions'; + + +function* loadSimStatus(action) { + const url = `${process.env.REACT_APP_BLOCLINK_URL}/buildings/${action.buildingId}/api/v1/simulation-status/`; + const res = yield call(request, url, { method: 'GET' }); + + if (!res.err) { + yield put(simStatusLoaded(res)); + } else { + yield put(simStatusLoadingError(res.err)); + } +} + +function* runSimulation(action) { + const url = `${process.env.REACT_APP_BLOCLINK_URL}/buildings/${action.buildingId}/api/v1/run-simulation/`; + const res = yield call(request, url, { method: 'POST', body: JSON.stringify({ weather: action.weather }) }); + + if (!res.err) { + yield put(runSimulationSucceeded(res)); + } else { + yield put(runSimulationFailed(res.err)); + } +} + +function* loadMonthlyHeatingConsum(action) { + const buildingId = action.payload; + + const res = yield call(request, `${process.env.REACT_APP_BLOCLINK_URL}/buildings/${buildingId}/api/v1/monthly-heating-energy/`, { + method: 'GET', + }); + + if (!res.err) { + yield put(monthlyHeatingConsumptionLoaded(res)); + } else { + yield put(monthlyHeatingConsumptionFailed(res.err)); + } +} + +function* loadHeatLossComponentBreakdown(action) { + const buildingId = action.payload; + + const res = yield call(request, `${process.env.REACT_APP_BLOCLINK_URL}/buildings/${buildingId}/api/v1/component-breakdown/`, { + method: 'GET', + }); + + if (!res.err) { + yield put(heatLossComponentBreakdownLoaded(res)); + } else { + yield put(heatLossComponentBreakdownFailed(res.err)); + } +} + +function* loadDesignLoad(action) { + const buildingId = action.payload; + + const res = yield call(request, `${process.env.REACT_APP_BLOCLINK_URL}/buildings/${buildingId}/api/v1/design-load/`, { + method: 'GET', + }); + + if (!res.err) { + yield put(designLoadLoaded(res)); + } else { + yield put(designLoadFailed(res.err)); + } +} + +function* loadUtilBreakdown(action) { + const url = `${process.env.REACT_APP_BLOCLINK_URL}/buildings/${action.buildingId}/api/v1/utility-bill-end-use/`; + const res = yield call(request, url, { method: 'GET' }); + + if (!res.err) { + yield put(utilityBillBreakdownLoaded(res)); + } else { + yield put(utilityBillBreakdownFailed(res.err)); + } +} + +function* loadBuildingFootprints(action) { + const url = `${process.env.REACT_APP_BLOCLINK_URL}/buildings/${action.buildingId}/api/v1/building-footprint/`; + const res = yield call(request, url, { method: 'GET' }); + + if (!res.err) { + yield put(buildingFootprintsLoaded(res)); + } else { + yield put(buildingFootprintsFailed(res.err)); + } +} + +function* blocnoteWatcher() { + yield takeEvery(LOAD_SIM_STATUS, loadSimStatus); + yield takeEvery(RUN_SIMULATION_REQUESTED, runSimulation); + yield takeEvery(MONTHLY_HEATING_CONSUMPTION_REQUESTED, loadMonthlyHeatingConsum); + yield takeEvery(HEAT_LOSS_COMPONENT_BREAKDOWN_REQUESTED, loadHeatLossComponentBreakdown); + yield takeEvery(DESIGN_LOAD_REQUESTED, loadDesignLoad); + yield takeEvery(UTILITY_BILL_BREAKDOWN_REQUESTED, loadUtilBreakdown); + yield takeEvery(BUILDING_FOOTPRINTS_REQUESTED, loadBuildingFootprints); +} + +export default blocnoteWatcher; diff --git a/src/containers/Blocnote/styles.css b/src/containers/Blocnote/styles.css new file mode 100644 index 00000000..b849a45a --- /dev/null +++ b/src/containers/Blocnote/styles.css @@ -0,0 +1,10 @@ +.leaflet-container { + height: 475px; +} + +#run-sim-btn { + position: absolute; + right: 0; + bottom: 0; + margin-bottom: 17px; +} diff --git a/src/routes.js b/src/routes.js index 381b8699..38b6f6f4 100644 --- a/src/routes.js +++ b/src/routes.js @@ -23,6 +23,9 @@ import Sensors from './containers/Sensors/Sensors'; import SensorInstall from './containers/Sensors/SensorInstall'; import GatewayList from './components/SensorInstall/GatewayList'; import BuildingReports from './containers/BuildingReports'; +import Blocnote from './containers/Blocnote/Blocnote'; +import FinancialInputs from './components/Blocnote/FinancialInputs'; +import PreliminaryFinance from './components/Blocnote/PreliminaryFinance'; import Wrapper from './containers/Wrapper'; import { BGroupOverview, BGroup } from './containers/BGroup'; import NavOnly from './screens/NavOnly/NavOnly'; @@ -57,6 +60,15 @@ export default ( + + + + + + + + + diff --git a/src/utils/restServices.js b/src/utils/restServices.js index 5bc0b010..cc696f29 100644 --- a/src/utils/restServices.js +++ b/src/utils/restServices.js @@ -13,6 +13,7 @@ const reportService = process.env.REACT_APP_REPORT_SERVICE; const iotService = process.env.REACT_APP_IOT_SERVICE; const userService = process.env.REACT_APP_USER_SERVICE; const weatherService = process.env.REACT_APP_WEATHER_SERVICE; +const blocnoteService = process.env.REACT_APP_BLOCNOTE_URL; export const buildingsURL = `${buildingService}/building/`; export const apartmentsURL = `${buildingService}/apartment/`; @@ -56,3 +57,5 @@ export const userURL = `${userService}/user/`; export const userGroupsURL = `${userService}/usergroup/`; export const weatherURL = `${weatherService}/weather/`; + +export const blocnoteURL = `${blocnoteService}/`; -- GitLab From d30cd3dfa4b08721714bf1b2bdc41f5275fd554f Mon Sep 17 00:00:00 2001 From: akkking Date: Thu, 21 Mar 2019 15:50:55 -0400 Subject: [PATCH 02/79] Update preliminary finance get URL --- src/components/Blocnote/PreliminaryFinance.js | 22 +++++++++---------- .../PreliminaryFinance/CostEstimation.js | 2 +- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/Blocnote/PreliminaryFinance.js b/src/components/Blocnote/PreliminaryFinance.js index 05b8b598..6297f466 100644 --- a/src/components/Blocnote/PreliminaryFinance.js +++ b/src/components/Blocnote/PreliminaryFinance.js @@ -4,14 +4,14 @@ import ErrorAlert from '../ErrorAlert'; import Loading from '../Loading'; import './styles.css'; import CostEstimation from './PreliminaryFinance/CostEstimation'; -import SavingEstimation from './PreliminaryFinance/SavingEstimation'; -import LoanSummary from './PreliminaryFinance/LoanSummary'; -import ProjectEconomics from './PreliminaryFinance/ProjectEconomics'; -import EnergyExpenseSavingsProjection from './PreliminaryFinance/EnergyExpenseSavingsProjection'; -import PriorRetrofitIncomeStatement from './PreliminaryFinance/PriorRetrofitIncomeStatement'; -import PostRetrofitIncomeStatement from './PreliminaryFinance/PostRetrofitIncomeStatement'; -import PriorRetrofitBalanceSheet from './PreliminaryFinance/PriorRetrofitBalanceSheet'; -import PostRetrofitBalanceSheet from './PreliminaryFinance/PostRetrofitBalanceSheet'; +// import SavingEstimation from './PreliminaryFinance/SavingEstimation'; +// import LoanSummary from './PreliminaryFinance/LoanSummary'; +// import ProjectEconomics from './PreliminaryFinance/ProjectEconomics'; +// import EnergyExpenseSavingsProjection from './PreliminaryFinance/EnergyExpenseSavingsProjection'; +// import PriorRetrofitIncomeStatement from './PreliminaryFinance/PriorRetrofitIncomeStatement'; +// import PostRetrofitIncomeStatement from './PreliminaryFinance/PostRetrofitIncomeStatement'; +// import PriorRetrofitBalanceSheet from './PreliminaryFinance/PriorRetrofitBalanceSheet'; +// import PostRetrofitBalanceSheet from './PreliminaryFinance/PostRetrofitBalanceSheet'; import request from '../../utils/request'; import { getHeaders, blocnoteURL } from '../../utils/restServices'; /* eslint-disable react/sort-comp */ @@ -37,7 +37,7 @@ class PreliminaryFinance extends Component { loadScenario = () => { console.log('hello'); // eslint-disable-line this.setState({ loading: true }); - request(`${blocnoteURL}scenario`, { + request(`${blocnoteURL}buildings/25313/preliminary-finance/scenario`, { method: 'GET', headers: getHeaders(), }).then((res) => { @@ -90,7 +90,7 @@ class PreliminaryFinance extends Component {
    - + {/* @@ -100,7 +100,7 @@ class PreliminaryFinance extends Component { - + */} ); } diff --git a/src/components/Blocnote/PreliminaryFinance/CostEstimation.js b/src/components/Blocnote/PreliminaryFinance/CostEstimation.js index bf97a33f..8a6cebee 100644 --- a/src/components/Blocnote/PreliminaryFinance/CostEstimation.js +++ b/src/components/Blocnote/PreliminaryFinance/CostEstimation.js @@ -39,7 +39,7 @@ class CostEstimation extends Component { - + -- GitLab From 2cbbe36da698571929051e92d5771aa6e0e6cc6d Mon Sep 17 00:00:00 2001 From: akkking Date: Thu, 21 Mar 2019 23:25:57 -0400 Subject: [PATCH 03/79] Add trailing slash to requested URi, enable CSV download button --- package-lock.json | 1270 +++++++++-------- src/components/Blocnote/PreliminaryFinance.js | 3 +- src/containers/BGroup/BGroupBuildingTable.js | 70 +- 3 files changed, 701 insertions(+), 642 deletions(-) diff --git a/package-lock.json b/package-lock.json index 92741e75..c8b87755 100644 --- a/package-lock.json +++ b/package-lock.json @@ -343,10 +343,13 @@ "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" }, "asn1": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz", - "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=", - "dev": true + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz", + "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==", + "dev": true, + "requires": { + "safer-buffer": "~2.1.0" + } }, "asn1.js": { "version": "4.9.2", @@ -1732,11 +1735,10 @@ "dev": true }, "bcrypt-pbkdf": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz", - "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", + "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=", "dev": true, - "optional": true, "requires": { "tweetnacl": "^0.14.3" } @@ -2379,9 +2381,9 @@ "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0=" }, "clean-css": { - "version": "4.1.9", - "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.9.tgz", - "integrity": "sha1-Nc7ornaHpJuYA09w3gDE7dOCYwE=", + "version": "4.1.11", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.11.tgz", + "integrity": "sha1-Ls3xRaujj1R0DybO/Q/z4D4SXWo=", "dev": true, "requires": { "source-map": "0.5.x" @@ -3714,13 +3716,13 @@ "dev": true }, "ecc-jsbn": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz", - "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=", + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", + "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=", "dev": true, - "optional": true, "requires": { - "jsbn": "~0.1.0" + "jsbn": "~0.1.0", + "safer-buffer": "^2.1.0" } }, "ee-first": { @@ -4139,9 +4141,9 @@ } }, "esprima": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz", - "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", "dev": true }, "globals": { @@ -4151,9 +4153,9 @@ "dev": true }, "js-yaml": { - "version": "3.10.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.10.0.tgz", - "integrity": "sha512-O2v52ffjLa9VeM43J4XocZE//WT9N0IiwDa3KSHH7Tu8CtH+1qM8SIZvnsTh6v+4yFy5KUY3BHUVwjpfAWsjIA==", + "version": "3.13.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.0.tgz", + "integrity": "sha512-pZZoSxcCYco+DIKBTimr67J6Hy+EYGZDY/HCWC+iAEA9h1ByhMXAIVUXMcMFpOCxQ/xjXmPI2MkDL5HRm5eFrQ==", "dev": true, "requires": { "argparse": "^1.0.7", @@ -4422,9 +4424,9 @@ } }, "esprima": { - "version": "2.7.3", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz", - "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", "dev": true }, "esquery": { @@ -4803,14 +4805,14 @@ "dev": true }, "fill-range": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz", - "integrity": "sha1-ULd9/X5Gm8dJJHCWNpn+eoSFpyM=", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.4.tgz", + "integrity": "sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==", "dev": true, "requires": { "is-number": "^2.1.0", "isobject": "^2.0.0", - "randomatic": "^1.1.3", + "randomatic": "^3.0.0", "repeat-element": "^1.1.2", "repeat-string": "^1.5.2" } @@ -5007,45 +5009,35 @@ "dev": true }, "fsevents": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.3.tgz", - "integrity": "sha512-WIr7iDkdmdbxu/Gh6eKEZJL6KPE74/5MEsf2whTOFNxbIoIixogroLdKYqB6FDav4Wavh/lZdzzd3b2KxIXC5Q==", + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.7.tgz", + "integrity": "sha512-Pxm6sI2MeBD7RdD12RYsqaP0nMiwx8eZBXCa6z2L+mRHm2DYrOYwihmhjpkdjUHwQhslWQjRpEgNq4XvBmaAuw==", "dev": true, "optional": true, "requires": { - "nan": "^2.3.0", - "node-pre-gyp": "^0.6.39" + "nan": "^2.9.2", + "node-pre-gyp": "^0.10.0" }, "dependencies": { "abbrev": { - "version": "1.1.0", + "version": "1.1.1", "bundled": true, "dev": true, "optional": true }, - "ajv": { - "version": "4.11.8", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "co": "^4.6.0", - "json-stable-stringify": "^1.0.1" - } - }, "ansi-regex": { "version": "2.1.1", "bundled": true, "dev": true }, "aproba": { - "version": "1.1.1", + "version": "1.2.0", "bundled": true, "dev": true, "optional": true }, "are-we-there-yet": { - "version": "1.1.4", + "version": "1.1.5", "bundled": true, "dev": true, "optional": true, @@ -5054,88 +5046,24 @@ "readable-stream": "^2.0.6" } }, - "asn1": { - "version": "0.2.3", - "bundled": true, - "dev": true, - "optional": true - }, - "assert-plus": { - "version": "0.2.0", - "bundled": true, - "dev": true, - "optional": true - }, - "asynckit": { - "version": "0.4.0", - "bundled": true, - "dev": true, - "optional": true - }, - "aws-sign2": { - "version": "0.6.0", - "bundled": true, - "dev": true, - "optional": true - }, - "aws4": { - "version": "1.6.0", - "bundled": true, - "dev": true, - "optional": true - }, "balanced-match": { - "version": "0.4.2", - "bundled": true, - "dev": true - }, - "bcrypt-pbkdf": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "tweetnacl": "^0.14.3" - } - }, - "block-stream": { - "version": "0.0.9", - "bundled": true, - "dev": true, - "requires": { - "inherits": "~2.0.0" - } - }, - "boom": { - "version": "2.10.1", + "version": "1.0.0", "bundled": true, "dev": true, - "requires": { - "hoek": "2.x.x" - } + "optional": true }, "brace-expansion": { - "version": "1.1.7", + "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { - "balanced-match": "^0.4.1", + "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, - "buffer-shims": { - "version": "1.0.0", - "bundled": true, - "dev": true - }, - "caseless": { - "version": "0.12.0", - "bundled": true, - "dev": true, - "optional": true - }, - "co": { - "version": "4.6.0", + "chownr": { + "version": "1.1.1", "bundled": true, "dev": true, "optional": true @@ -5143,59 +5071,29 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true - }, - "combined-stream": { - "version": "1.0.5", - "bundled": true, "dev": true, - "optional": true, - "requires": { - "delayed-stream": "~1.0.0" - } + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", "bundled": true, - "dev": true - }, - "cryptiles": { - "version": "2.0.5", - "bundled": true, - "dev": true, - "requires": { - "boom": "2.x.x" - } - }, - "dashdash": { - "version": "1.14.1", - "bundled": true, "dev": true, - "optional": true, - "requires": { - "assert-plus": "^1.0.0" - }, - "dependencies": { - "assert-plus": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - } - } + "optional": true }, "debug": { - "version": "2.6.8", + "version": "2.6.9", "bundled": true, "dev": true, "optional": true, @@ -5204,13 +5102,7 @@ } }, "deep-extend": { - "version": "0.4.2", - "bundled": true, - "dev": true, - "optional": true - }, - "delayed-stream": { - "version": "1.0.0", + "version": "0.6.0", "bundled": true, "dev": true, "optional": true @@ -5222,74 +5114,25 @@ "optional": true }, "detect-libc": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "ecc-jsbn": { - "version": "0.1.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "jsbn": "~0.1.0" - } - }, - "extend": { - "version": "3.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "extsprintf": { - "version": "1.0.2", - "bundled": true, - "dev": true - }, - "forever-agent": { - "version": "0.6.1", + "version": "1.0.3", "bundled": true, "dev": true, "optional": true }, - "form-data": { - "version": "2.1.4", + "fs-minipass": { + "version": "1.2.5", "bundled": true, "dev": true, "optional": true, "requires": { - "asynckit": "^0.4.0", - "combined-stream": "^1.0.5", - "mime-types": "^2.1.12" + "minipass": "^2.2.1" } }, "fs.realpath": { "version": "1.0.0", "bundled": true, - "dev": true - }, - "fstream": { - "version": "1.0.11", - "bundled": true, - "dev": true, - "requires": { - "graceful-fs": "^4.1.2", - "inherits": "~2.0.0", - "mkdirp": ">=0.5 0", - "rimraf": "2" - } - }, - "fstream-ignore": { - "version": "1.0.5", - "bundled": true, "dev": true, - "optional": true, - "requires": { - "fstream": "^1.0.0", - "inherits": "2", - "minimatch": "^3.0.0" - } + "optional": true }, "gauge": { "version": "2.7.4", @@ -5307,27 +5150,11 @@ "wide-align": "^1.1.0" } }, - "getpass": { - "version": "0.1.7", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "assert-plus": "^1.0.0" - }, - "dependencies": { - "assert-plus": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - } - } - }, "glob": { - "version": "7.1.2", + "version": "7.1.3", "bundled": true, "dev": true, + "optional": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -5337,64 +5164,35 @@ "path-is-absolute": "^1.0.0" } }, - "graceful-fs": { - "version": "4.1.11", - "bundled": true, - "dev": true - }, - "har-schema": { - "version": "1.0.5", - "bundled": true, - "dev": true, - "optional": true - }, - "har-validator": { - "version": "4.2.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ajv": "^4.9.1", - "har-schema": "^1.0.5" - } - }, "has-unicode": { "version": "2.0.1", "bundled": true, "dev": true, "optional": true }, - "hawk": { - "version": "3.1.3", + "iconv-lite": { + "version": "0.4.24", "bundled": true, "dev": true, + "optional": true, "requires": { - "boom": "2.x.x", - "cryptiles": "2.x.x", - "hoek": "2.x.x", - "sntp": "1.x.x" + "safer-buffer": ">= 2.1.2 < 3" } }, - "hoek": { - "version": "2.16.3", - "bundled": true, - "dev": true - }, - "http-signature": { - "version": "1.1.1", + "ignore-walk": { + "version": "3.0.1", "bundled": true, "dev": true, "optional": true, "requires": { - "assert-plus": "^0.2.0", - "jsprim": "^1.2.2", - "sshpk": "^1.7.0" + "minimatch": "^3.0.4" } }, "inflight": { "version": "1.0.6", "bundled": true, "dev": true, + "optional": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -5403,10 +5201,11 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { - "version": "1.3.4", + "version": "1.3.5", "bundled": true, "dev": true, "optional": true @@ -5415,148 +5214,93 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } }, - "is-typedarray": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, "isarray": { "version": "1.0.0", "bundled": true, - "dev": true - }, - "isstream": { - "version": "0.1.2", - "bundled": true, "dev": true, "optional": true }, - "jodid25519": { - "version": "1.0.2", + "minimatch": { + "version": "3.0.4", "bundled": true, "dev": true, "optional": true, "requires": { - "jsbn": "~0.1.0" + "brace-expansion": "^1.1.7" } }, - "jsbn": { - "version": "0.1.1", + "minimist": { + "version": "0.0.8", "bundled": true, "dev": true, "optional": true }, - "json-schema": { - "version": "0.2.3", + "minipass": { + "version": "2.3.5", "bundled": true, "dev": true, - "optional": true + "optional": true, + "requires": { + "safe-buffer": "^5.1.2", + "yallist": "^3.0.0" + } }, - "json-stable-stringify": { - "version": "1.0.1", + "minizlib": { + "version": "1.2.1", "bundled": true, "dev": true, "optional": true, "requires": { - "jsonify": "~0.0.0" + "minipass": "^2.2.1" } }, - "json-stringify-safe": { - "version": "5.0.1", + "mkdirp": { + "version": "0.5.1", "bundled": true, "dev": true, - "optional": true + "optional": true, + "requires": { + "minimist": "0.0.8" + } }, - "jsonify": { - "version": "0.0.0", + "ms": { + "version": "2.0.0", "bundled": true, "dev": true, "optional": true }, - "jsprim": { - "version": "1.4.0", + "needle": { + "version": "2.2.4", "bundled": true, "dev": true, "optional": true, "requires": { - "assert-plus": "1.0.0", - "extsprintf": "1.0.2", - "json-schema": "0.2.3", - "verror": "1.3.6" - }, - "dependencies": { - "assert-plus": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - } + "debug": "^2.1.2", + "iconv-lite": "^0.4.4", + "sax": "^1.2.4" } }, - "mime-db": { - "version": "1.27.0", - "bundled": true, - "dev": true, - "optional": true - }, - "mime-types": { - "version": "2.1.15", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "mime-db": "~1.27.0" - } - }, - "minimatch": { - "version": "3.0.4", - "bundled": true, - "dev": true, - "requires": { - "brace-expansion": "^1.1.7" - } - }, - "minimist": { - "version": "0.0.8", - "bundled": true, - "dev": true - }, - "mkdirp": { - "version": "0.5.1", - "bundled": true, - "dev": true, - "requires": { - "minimist": "0.0.8" - } - }, - "ms": { - "version": "2.0.0", - "bundled": true, - "dev": true, - "optional": true - }, "node-pre-gyp": { - "version": "0.6.39", + "version": "0.10.3", "bundled": true, "dev": true, "optional": true, "requires": { "detect-libc": "^1.0.2", - "hawk": "3.1.3", "mkdirp": "^0.5.1", + "needle": "^2.2.1", "nopt": "^4.0.1", + "npm-packlist": "^1.1.6", "npmlog": "^4.0.2", - "rc": "^1.1.7", - "request": "2.81.0", + "rc": "^1.2.7", "rimraf": "^2.6.1", "semver": "^5.3.0", - "tar": "^2.2.1", - "tar-pack": "^3.4.0" + "tar": "^4" } }, "nopt": { @@ -5569,8 +5313,24 @@ "osenv": "^0.1.4" } }, + "npm-bundled": { + "version": "1.0.5", + "bundled": true, + "dev": true, + "optional": true + }, + "npm-packlist": { + "version": "1.2.0", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "ignore-walk": "^3.0.1", + "npm-bundled": "^1.0.1" + } + }, "npmlog": { - "version": "4.1.0", + "version": "4.1.2", "bundled": true, "dev": true, "optional": true, @@ -5587,12 +5347,6 @@ "dev": true, "optional": true }, - "oauth-sign": { - "version": "0.8.2", - "bundled": true, - "dev": true, - "optional": true - }, "object-assign": { "version": "4.1.1", "bundled": true, @@ -5603,6 +5357,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5620,7 +5375,7 @@ "optional": true }, "osenv": { - "version": "0.1.4", + "version": "0.1.5", "bundled": true, "dev": true, "optional": true, @@ -5632,38 +5387,22 @@ "path-is-absolute": { "version": "1.0.1", "bundled": true, - "dev": true - }, - "performance-now": { - "version": "0.2.0", - "bundled": true, "dev": true, "optional": true }, "process-nextick-args": { - "version": "1.0.7", - "bundled": true, - "dev": true - }, - "punycode": { - "version": "1.4.1", - "bundled": true, - "dev": true, - "optional": true - }, - "qs": { - "version": "6.4.0", + "version": "2.0.0", "bundled": true, "dev": true, "optional": true }, "rc": { - "version": "1.2.1", + "version": "1.2.8", "bundled": true, "dev": true, "optional": true, "requires": { - "deep-extend": "~0.4.0", + "deep-extend": "^0.6.0", "ini": "~1.3.0", "minimist": "^1.2.0", "strip-json-comments": "~2.0.1" @@ -5678,117 +5417,69 @@ } }, "readable-stream": { - "version": "2.2.9", + "version": "2.3.6", "bundled": true, "dev": true, + "optional": true, "requires": { - "buffer-shims": "~1.0.0", "core-util-is": "~1.0.0", - "inherits": "~2.0.1", + "inherits": "~2.0.3", "isarray": "~1.0.0", - "process-nextick-args": "~1.0.6", - "string_decoder": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", "util-deprecate": "~1.0.1" } }, - "request": { - "version": "2.81.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "aws-sign2": "~0.6.0", - "aws4": "^1.2.1", - "caseless": "~0.12.0", - "combined-stream": "~1.0.5", - "extend": "~3.0.0", - "forever-agent": "~0.6.1", - "form-data": "~2.1.1", - "har-validator": "~4.2.1", - "hawk": "~3.1.3", - "http-signature": "~1.1.0", - "is-typedarray": "~1.0.0", - "isstream": "~0.1.2", - "json-stringify-safe": "~5.0.1", - "mime-types": "~2.1.7", - "oauth-sign": "~0.8.1", - "performance-now": "^0.2.0", - "qs": "~6.4.0", - "safe-buffer": "^5.0.1", - "stringstream": "~0.0.4", - "tough-cookie": "~2.3.0", - "tunnel-agent": "^0.6.0", - "uuid": "^3.0.0" - } - }, "rimraf": { - "version": "2.6.1", + "version": "2.6.3", "bundled": true, "dev": true, + "optional": true, "requires": { - "glob": "^7.0.5" + "glob": "^7.1.3" } }, "safe-buffer": { - "version": "5.0.1", + "version": "5.1.2", "bundled": true, "dev": true }, - "semver": { - "version": "5.3.0", + "safer-buffer": { + "version": "2.1.2", "bundled": true, "dev": true, "optional": true }, - "set-blocking": { - "version": "2.0.0", + "sax": { + "version": "1.2.4", "bundled": true, "dev": true, "optional": true }, - "signal-exit": { - "version": "3.0.2", + "semver": { + "version": "5.6.0", "bundled": true, "dev": true, "optional": true }, - "sntp": { - "version": "1.0.9", + "set-blocking": { + "version": "2.0.0", "bundled": true, "dev": true, - "requires": { - "hoek": "2.x.x" - } + "optional": true }, - "sshpk": { - "version": "1.13.0", + "signal-exit": { + "version": "3.0.2", "bundled": true, "dev": true, - "optional": true, - "requires": { - "asn1": "~0.2.3", - "assert-plus": "^1.0.0", - "bcrypt-pbkdf": "^1.0.0", - "dashdash": "^1.12.0", - "ecc-jsbn": "~0.1.1", - "getpass": "^0.1.1", - "jodid25519": "^1.0.0", - "jsbn": "~0.1.0", - "tweetnacl": "~0.14.0" - }, - "dependencies": { - "assert-plus": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - } - } + "optional": true }, "string-width": { "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5796,19 +5487,14 @@ } }, "string_decoder": { - "version": "1.0.1", + "version": "1.1.1", "bundled": true, "dev": true, + "optional": true, "requires": { - "safe-buffer": "^5.0.1" + "safe-buffer": "~5.1.0" } }, - "stringstream": { - "version": "0.0.5", - "bundled": true, - "dev": true, - "optional": true - }, "strip-ansi": { "version": "3.0.1", "bundled": true, @@ -5824,94 +5510,44 @@ "optional": true }, "tar": { - "version": "2.2.1", - "bundled": true, - "dev": true, - "requires": { - "block-stream": "*", - "fstream": "^1.0.2", - "inherits": "2" - } - }, - "tar-pack": { - "version": "3.4.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "debug": "^2.2.0", - "fstream": "^1.0.10", - "fstream-ignore": "^1.0.5", - "once": "^1.3.3", - "readable-stream": "^2.1.4", - "rimraf": "^2.5.1", - "tar": "^2.2.1", - "uid-number": "^0.0.6" - } - }, - "tough-cookie": { - "version": "2.3.2", + "version": "4.4.8", "bundled": true, "dev": true, "optional": true, "requires": { - "punycode": "^1.4.1" - } - }, - "tunnel-agent": { - "version": "0.6.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safe-buffer": "^5.0.1" + "chownr": "^1.1.1", + "fs-minipass": "^1.2.5", + "minipass": "^2.3.4", + "minizlib": "^1.1.1", + "mkdirp": "^0.5.0", + "safe-buffer": "^5.1.2", + "yallist": "^3.0.2" } }, - "tweetnacl": { - "version": "0.14.5", - "bundled": true, - "dev": true, - "optional": true - }, - "uid-number": { - "version": "0.0.6", - "bundled": true, - "dev": true, - "optional": true - }, "util-deprecate": { "version": "1.0.2", "bundled": true, - "dev": true - }, - "uuid": { - "version": "3.0.1", - "bundled": true, "dev": true, "optional": true }, - "verror": { - "version": "1.3.6", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "extsprintf": "1.0.2" - } - }, "wide-align": { - "version": "1.1.2", + "version": "1.1.3", "bundled": true, "dev": true, "optional": true, "requires": { - "string-width": "^1.0.2" + "string-width": "^1.0.2 || 2" } }, "wrappy": { "version": "1.0.2", "bundled": true, "dev": true + }, + "yallist": { + "version": "3.0.3", + "bundled": true, + "dev": true } } }, @@ -8031,13 +7667,13 @@ "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" }, "js-yaml": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz", - "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=", + "version": "3.13.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.0.tgz", + "integrity": "sha512-pZZoSxcCYco+DIKBTimr67J6Hy+EYGZDY/HCWC+iAEA9h1ByhMXAIVUXMcMFpOCxQ/xjXmPI2MkDL5HRm5eFrQ==", "dev": true, "requires": { "argparse": "^1.0.7", - "esprima": "^2.6.0" + "esprima": "^4.0.0" } }, "jsbn": { @@ -8709,6 +8345,12 @@ "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", "integrity": "sha1-3oGf282E3M2PrlnGrreWFbnSZqw=" }, + "math-random": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz", + "integrity": "sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==", + "dev": true + }, "md5.js": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz", @@ -8927,9 +8569,9 @@ "dev": true }, "nan": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.7.0.tgz", - "integrity": "sha1-2Vv3IeyHfgjbJ27T/G63j5CDrUY=", + "version": "2.13.1", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.13.1.tgz", + "integrity": "sha512-I6YB/YEuDeUZMmhscXKxGgZlFnhsn5y0hgOZBadkzfTRrZBtJDZeg6eQf7PYMIEclwmorTKK8GztsyOUSVBREA==", "dev": true, "optional": true }, @@ -8999,6 +8641,12 @@ "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=", "dev": true }, + "neo-async": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.0.tgz", + "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==", + "dev": true + }, "no-case": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", @@ -9762,8 +9410,7 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", @@ -9774,8 +9421,7 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -9892,8 +9538,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -9905,7 +9550,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -9920,7 +9564,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -9928,14 +9571,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -9954,7 +9595,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -10035,8 +9675,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -10048,7 +9687,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -10170,7 +9808,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10786,24 +10423,12 @@ } }, "original": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/original/-/original-1.0.0.tgz", - "integrity": "sha1-kUf5P6FpbQS+YeAb1QuurKZWvTs=", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz", + "integrity": "sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==", "dev": true, "requires": { - "url-parse": "1.0.x" - }, - "dependencies": { - "url-parse": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.0.5.tgz", - "integrity": "sha1-CFSGBCKv3P7+tsllxmLUgAFpkns=", - "dev": true, - "requires": { - "querystringify": "0.0.x", - "requires-port": "1.0.x" - } - } + "url-parse": "^1.4.3" } }, "os-browserify": { @@ -12633,9 +12258,9 @@ "dev": true }, "querystringify": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-0.0.4.tgz", - "integrity": "sha1-DPf4T5Rj/wrlHExLFC2VvjdyTZw=", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.1.tgz", + "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==", "dev": true }, "raf": { @@ -12647,43 +12272,27 @@ } }, "randomatic": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz", - "integrity": "sha512-D5JUjPyJbaJDkuAazpVnSfVkLlpeO3wDlPROTMLGKG1zMFNFRgrciKo1ltz/AzNTkqE0HzDx655QOL51N06how==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz", + "integrity": "sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==", "dev": true, "requires": { - "is-number": "^3.0.0", - "kind-of": "^4.0.0" + "is-number": "^4.0.0", + "kind-of": "^6.0.0", + "math-random": "^1.0.1" }, "dependencies": { "is-number": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", - "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", - "dev": true, - "requires": { - "kind-of": "^3.0.2" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "requires": { - "is-buffer": "^1.1.5" - } - } - } + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz", + "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==", + "dev": true }, "kind-of": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz", - "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=", - "dev": true, - "requires": { - "is-buffer": "^1.1.5" - } + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", + "dev": true } } }, @@ -14103,7 +13712,13 @@ "ret": "~0.1.10" } }, - "sane": { + "safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "dev": true + }, + "sane": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/sane/-/sane-1.6.0.tgz", "integrity": "sha1-lhDEUjB6E10pwf3+JUcDQYDEZ3U=", @@ -14805,9 +14420,9 @@ "dev": true }, "sshpk": { - "version": "1.13.1", - "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz", - "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=", + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz", + "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==", "dev": true, "requires": { "asn1": "~0.2.3", @@ -14817,6 +14432,7 @@ "ecc-jsbn": "~0.1.1", "getpass": "^0.1.1", "jsbn": "~0.1.0", + "safer-buffer": "^2.0.2", "tweetnacl": "~0.14.0" } }, @@ -15064,6 +14680,24 @@ "mkdirp": "~0.5.1", "sax": "~1.2.1", "whet.extend": "~0.9.9" + }, + "dependencies": { + "esprima": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz", + "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=", + "dev": true + }, + "js-yaml": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz", + "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=", + "dev": true, + "requires": { + "argparse": "^1.0.7", + "esprima": "^2.6.0" + } + } } }, "sw-precache": { @@ -15353,9 +14987,9 @@ } }, "test-exclude": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-4.1.1.tgz", - "integrity": "sha512-35+Asrsk3XHJDBgf/VRFexPgh3UyETv8IAn/LRTiZjVy6rjPVqdEk8dJcJYBzl1w0XCJM48lvTy8SfEsCWS4nA==", + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-4.2.3.tgz", + "integrity": "sha512-SYbXgY64PT+4GAL2ocI3HwPa4Q4TBKm0cwAVeKOt/Aoc0gSpNRjJX8w0pA1LMKZ3LBmd8pYBqApFNQLII9kavA==", "dev": true, "requires": { "arrify": "^1.0.1", @@ -15574,8 +15208,7 @@ "version": "0.14.5", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=", - "dev": true, - "optional": true + "dev": true }, "type-check": { "version": "0.3.2", @@ -16000,21 +15633,13 @@ } }, "url-parse": { - "version": "1.1.9", - "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.1.9.tgz", - "integrity": "sha1-xn8dd11R8KGJEd17P/rSe7nlvRk=", + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.4.tgz", + "integrity": "sha512-/92DTTorg4JjktLNLe6GPS2/RvAd/RGr6LuktmWSMLEOa6rjnlrFXNgSbSmkNvCoL2T028A0a1JaJLzRMlFoHg==", "dev": true, "requires": { - "querystringify": "~1.0.0", - "requires-port": "1.0.x" - }, - "dependencies": { - "querystringify": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-1.0.0.tgz", - "integrity": "sha1-YoYkIRLFtxL6ZU5SZlK/ahP/Bcs=", - "dev": true - } + "querystringify": "^2.0.0", + "requires-port": "^1.0.0" } }, "url-parse-lax": { @@ -16138,14 +15763,393 @@ "dev": true }, "watchpack": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.4.0.tgz", - "integrity": "sha1-ShRyvLuVK9Cpu0A2gB+VTfs5+qw=", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", + "integrity": "sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA==", "dev": true, "requires": { - "async": "^2.1.2", - "chokidar": "^1.7.0", - "graceful-fs": "^4.1.2" + "chokidar": "^2.0.2", + "graceful-fs": "^4.1.2", + "neo-async": "^2.5.0" + }, + "dependencies": { + "anymatch": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz", + "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==", + "dev": true, + "requires": { + "micromatch": "^3.1.4", + "normalize-path": "^2.1.1" + }, + "dependencies": { + "normalize-path": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", + "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", + "dev": true, + "requires": { + "remove-trailing-separator": "^1.0.1" + } + } + } + }, + "arr-diff": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", + "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=", + "dev": true + }, + "array-unique": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", + "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", + "dev": true + }, + "braces": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", + "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", + "dev": true, + "requires": { + "arr-flatten": "^1.1.0", + "array-unique": "^0.3.2", + "extend-shallow": "^2.0.1", + "fill-range": "^4.0.0", + "isobject": "^3.0.1", + "repeat-element": "^1.1.2", + "snapdragon": "^0.8.1", + "snapdragon-node": "^2.0.1", + "split-string": "^3.0.2", + "to-regex": "^3.0.1" + }, + "dependencies": { + "extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", + "dev": true, + "requires": { + "is-extendable": "^0.1.0" + } + } + } + }, + "chokidar": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.2.tgz", + "integrity": "sha512-IwXUx0FXc5ibYmPC2XeEj5mpXoV66sR+t3jqu2NS2GYwCktt3KF1/Qqjws/NkegajBA4RbZ5+DDwlOiJsxDHEg==", + "dev": true, + "requires": { + "anymatch": "^2.0.0", + "async-each": "^1.0.1", + "braces": "^2.3.2", + "fsevents": "^1.2.7", + "glob-parent": "^3.1.0", + "inherits": "^2.0.3", + "is-binary-path": "^1.0.0", + "is-glob": "^4.0.0", + "normalize-path": "^3.0.0", + "path-is-absolute": "^1.0.0", + "readdirp": "^2.2.1", + "upath": "^1.1.0" + } + }, + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "expand-brackets": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz", + "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=", + "dev": true, + "requires": { + "debug": "^2.3.3", + "define-property": "^0.2.5", + "extend-shallow": "^2.0.1", + "posix-character-classes": "^0.1.0", + "regex-not": "^1.0.0", + "snapdragon": "^0.8.1", + "to-regex": "^3.0.1" + }, + "dependencies": { + "define-property": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", + "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", + "dev": true, + "requires": { + "is-descriptor": "^0.1.0" + } + }, + "extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", + "dev": true, + "requires": { + "is-extendable": "^0.1.0" + } + }, + "is-accessor-descriptor": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", + "dev": true, + "requires": { + "kind-of": "^3.0.2" + }, + "dependencies": { + "kind-of": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", + "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", + "dev": true, + "requires": { + "is-buffer": "^1.1.5" + } + } + } + }, + "is-data-descriptor": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", + "dev": true, + "requires": { + "kind-of": "^3.0.2" + }, + "dependencies": { + "kind-of": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", + "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", + "dev": true, + "requires": { + "is-buffer": "^1.1.5" + } + } + } + }, + "is-descriptor": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz", + "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==", + "dev": true, + "requires": { + "is-accessor-descriptor": "^0.1.6", + "is-data-descriptor": "^0.1.4", + "kind-of": "^5.0.0" + } + }, + "kind-of": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz", + "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==", + "dev": true + } + } + }, + "extglob": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz", + "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==", + "dev": true, + "requires": { + "array-unique": "^0.3.2", + "define-property": "^1.0.0", + "expand-brackets": "^2.1.4", + "extend-shallow": "^2.0.1", + "fragment-cache": "^0.2.1", + "regex-not": "^1.0.0", + "snapdragon": "^0.8.1", + "to-regex": "^3.0.1" + }, + "dependencies": { + "define-property": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz", + "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", + "dev": true, + "requires": { + "is-descriptor": "^1.0.0" + } + }, + "extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", + "dev": true, + "requires": { + "is-extendable": "^0.1.0" + } + } + } + }, + "fill-range": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", + "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=", + "dev": true, + "requires": { + "extend-shallow": "^2.0.1", + "is-number": "^3.0.0", + "repeat-string": "^1.6.1", + "to-regex-range": "^2.1.0" + }, + "dependencies": { + "extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", + "dev": true, + "requires": { + "is-extendable": "^0.1.0" + } + } + } + }, + "glob-parent": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", + "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=", + "dev": true, + "requires": { + "is-glob": "^3.1.0", + "path-dirname": "^1.0.0" + }, + "dependencies": { + "is-glob": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz", + "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=", + "dev": true, + "requires": { + "is-extglob": "^2.1.0" + } + } + } + }, + "is-accessor-descriptor": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", + "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", + "dev": true, + "requires": { + "kind-of": "^6.0.0" + } + }, + "is-data-descriptor": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", + "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", + "dev": true, + "requires": { + "kind-of": "^6.0.0" + } + }, + "is-descriptor": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", + "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", + "dev": true, + "requires": { + "is-accessor-descriptor": "^1.0.0", + "is-data-descriptor": "^1.0.0", + "kind-of": "^6.0.2" + } + }, + "is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", + "dev": true + }, + "is-glob": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz", + "integrity": "sha1-lSHHaEXMJhCoUgPd8ICpWML/q8A=", + "dev": true, + "requires": { + "is-extglob": "^2.1.1" + } + }, + "is-number": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", + "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", + "dev": true, + "requires": { + "kind-of": "^3.0.2" + }, + "dependencies": { + "kind-of": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", + "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", + "dev": true, + "requires": { + "is-buffer": "^1.1.5" + } + } + } + }, + "isobject": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", + "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", + "dev": true + }, + "kind-of": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", + "dev": true + }, + "micromatch": { + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", + "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", + "dev": true, + "requires": { + "arr-diff": "^4.0.0", + "array-unique": "^0.3.2", + "braces": "^2.3.1", + "define-property": "^2.0.2", + "extend-shallow": "^3.0.2", + "extglob": "^2.0.4", + "fragment-cache": "^0.2.1", + "kind-of": "^6.0.2", + "nanomatch": "^1.2.9", + "object.pick": "^1.3.0", + "regex-not": "^1.0.0", + "snapdragon": "^0.8.1", + "to-regex": "^3.0.2" + } + }, + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true + }, + "readdirp": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz", + "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.11", + "micromatch": "^3.1.10", + "readable-stream": "^2.0.2" + } + } } }, "wbuf": { diff --git a/src/components/Blocnote/PreliminaryFinance.js b/src/components/Blocnote/PreliminaryFinance.js index 6297f466..fef0296b 100644 --- a/src/components/Blocnote/PreliminaryFinance.js +++ b/src/components/Blocnote/PreliminaryFinance.js @@ -35,9 +35,8 @@ class PreliminaryFinance extends Component { } loadScenario = () => { - console.log('hello'); // eslint-disable-line this.setState({ loading: true }); - request(`${blocnoteURL}buildings/25313/preliminary-finance/scenario`, { + request(`${blocnoteURL}buildings/25313/preliminary-finance/scenario/`, { method: 'GET', headers: getHeaders(), }).then((res) => { diff --git a/src/containers/BGroup/BGroupBuildingTable.js b/src/containers/BGroup/BGroupBuildingTable.js index 866e6fa3..a26a7dbc 100644 --- a/src/containers/BGroup/BGroupBuildingTable.js +++ b/src/containers/BGroup/BGroupBuildingTable.js @@ -1,11 +1,11 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -// import { CSVLink } from 'react-csv'; import ReactTable from 'react-table'; import ReactTooltip from 'react-tooltip'; import { Link } from 'react-router'; import { Icon } from 'react-fa'; import ReactGA from 'react-ga'; +import { CSVLink } from 'react-csv'; import { Input, Collapse, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, @@ -366,6 +366,46 @@ export default class BGroupBuildingTable extends Component { {row.value} ), + }, { + Header: 'Building Proximities', + filterable: true, + style: { textAlign: 'center' }, + accessor: 'building_proximities', + Cell: row => ( +
    + {row.value} +
    + ), + }, { + Header: 'Fuel Type', + filterable: true, + style: { textAlign: 'center' }, + accessor: 'fuel_type', + Cell: row => ( +
    + {row.value} +
    + ), + }, { + Header: 'Owner Occupied', + filterable: true, + style: { textAlign: 'center' }, + accessor: 'owner_occupied', + Cell: row => ( +
    + {row.value} +
    + ), + }, { + Header: 'Stable Ownership', + filterable: true, + style: { textAlign: 'center' }, + accessor: 'stable_ownership', + Cell: row => ( +
    + {row.value} +
    + ), }, ], }], ...(!this.state.displayContact) ? [] : [{ @@ -731,9 +771,25 @@ export default class BGroupBuildingTable extends Component { val.gateway_install = gatewayDates[val.building_id]; val.building_simulation = simulationDates[val.building_id]; val.bbl = bbls[val.building_id]; - val.heat_pump_score = heatPumpScores[val.building_id]; + console.log("heatPumpScores rendering"); // eslint-disable-line + console.log(heatPumpScores); // eslint-disable-line + if (heatPumpScores[val.building_id]) { + val.heat_pump_score = heatPumpScores[val.building_id].score; + val.building_proximities = heatPumpScores[val.building_id].building_proximities_cost; + val.fuel_type = heatPumpScores[val.building_id].type_of_fuel; + val.owner_occupied = heatPumpScores[val.building_id].owner_occupied; + val.stable_ownership = heatPumpScores[val.building_id].stable_tenure_of_ownership; + } else { + val.heat_pump_score = -1; + val.building_proximities = -1; + val.fuel_type = -1; + val.owner_occupied = -1; + val.stable_ownership = -1; + } + // Contact val.contact_account = contactAccounts[val.building_id]; val.contact_parent_account = contactParentAccounts[val.building_id]; + // Project Impact if (impact[val.building_id]) { const impactObjects = impact[val.building_id]; if (impactObjects.diagnostic_recommendations.length > 0) { @@ -766,9 +822,9 @@ export default class BGroupBuildingTable extends Component { return val; }); - // const csvlinkStyle = { - // lineHeight: 1.15, - // }; + const csvlinkStyle = { + lineHeight: 1.15, + }; return (
    @@ -786,7 +842,7 @@ export default class BGroupBuildingTable extends Component {
    {this.state.numRows} buildings
    - {/* Export ⬇ -   */} +   Toggle Columns -- GitLab From 0248a7bf557febfcf080bd836b9842afaa9091e3 Mon Sep 17 00:00:00 2001 From: akkking Date: Thu, 21 Mar 2019 23:50:31 -0400 Subject: [PATCH 04/79] remove comments, update response object --- src/components/Blocnote/PreliminaryFinance.js | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/src/components/Blocnote/PreliminaryFinance.js b/src/components/Blocnote/PreliminaryFinance.js index fef0296b..2d7d6854 100644 --- a/src/components/Blocnote/PreliminaryFinance.js +++ b/src/components/Blocnote/PreliminaryFinance.js @@ -4,14 +4,14 @@ import ErrorAlert from '../ErrorAlert'; import Loading from '../Loading'; import './styles.css'; import CostEstimation from './PreliminaryFinance/CostEstimation'; -// import SavingEstimation from './PreliminaryFinance/SavingEstimation'; -// import LoanSummary from './PreliminaryFinance/LoanSummary'; -// import ProjectEconomics from './PreliminaryFinance/ProjectEconomics'; -// import EnergyExpenseSavingsProjection from './PreliminaryFinance/EnergyExpenseSavingsProjection'; -// import PriorRetrofitIncomeStatement from './PreliminaryFinance/PriorRetrofitIncomeStatement'; -// import PostRetrofitIncomeStatement from './PreliminaryFinance/PostRetrofitIncomeStatement'; -// import PriorRetrofitBalanceSheet from './PreliminaryFinance/PriorRetrofitBalanceSheet'; -// import PostRetrofitBalanceSheet from './PreliminaryFinance/PostRetrofitBalanceSheet'; +import SavingEstimation from './PreliminaryFinance/SavingEstimation'; +import LoanSummary from './PreliminaryFinance/LoanSummary'; +import ProjectEconomics from './PreliminaryFinance/ProjectEconomics'; +import EnergyExpenseSavingsProjection from './PreliminaryFinance/EnergyExpenseSavingsProjection'; +import PriorRetrofitIncomeStatement from './PreliminaryFinance/PriorRetrofitIncomeStatement'; +import PostRetrofitIncomeStatement from './PreliminaryFinance/PostRetrofitIncomeStatement'; +import PriorRetrofitBalanceSheet from './PreliminaryFinance/PriorRetrofitBalanceSheet'; +import PostRetrofitBalanceSheet from './PreliminaryFinance/PostRetrofitBalanceSheet'; import request from '../../utils/request'; import { getHeaders, blocnoteURL } from '../../utils/restServices'; /* eslint-disable react/sort-comp */ @@ -31,6 +31,7 @@ class PreliminaryFinance extends Component { } componentDidMount() { + this.mounted = true; this.loadScenario(); } @@ -41,7 +42,8 @@ class PreliminaryFinance extends Component { headers: getHeaders(), }).then((res) => { if (this.mounted) { - const data = res.data; + // console.log(res); // eslint-disable-line + const data = res; if (!res.err && data) { this.setState({ scenario: data, @@ -55,6 +57,10 @@ class PreliminaryFinance extends Component { }); } + resetErrorMessage = () => { + this.setState({ error: false }); + } + render() { let mainContent = null; // const { blocnote, eng } = this.props; @@ -89,7 +95,7 @@ class PreliminaryFinance extends Component {
    - {/* + @@ -99,7 +105,7 @@ class PreliminaryFinance extends Component { - */} + ); } -- GitLab From 99c97651c6defe385a8114bd90e91aeccd0e0468 Mon Sep 17 00:00:00 2001 From: akkking Date: Mon, 25 Mar 2019 16:46:10 -0400 Subject: [PATCH 05/79] Added components for most of preliminary finance --- src/components/Blocnote/PreliminaryFinance.js | 130 ++++++++++++++---- .../PreliminaryFinance/CostEstimation.js | 43 +++--- .../PreliminaryFinance/CostEstimationRow.js | 56 ++++++++ .../EnergyExpenseSavingsProjection.js | 41 +----- .../PreliminaryFinance/LoanSummary.js | 74 +++++----- .../PreliminaryFinance/LoanSummaryRow.js | 51 +++++++ .../PostRetrofitBalanceSheet.js | 55 +++----- .../PostRetrofitIncomeStatement.js | 51 +++---- .../PriorRetrofitBalanceSheet.js | 53 +++---- .../PriorRetrofitIncomeStatement.js | 51 +++---- .../PreliminaryFinance/ProjectEconomics.js | 64 ++++----- .../PreliminaryFinance/ProjectEconomicsRow.js | 35 +++++ .../PreliminaryFinance/SavingEstimation.js | 41 +++--- .../PreliminaryFinance/SavingEstimationRow.js | 57 ++++++++ .../PreliminaryFinance/TableContent.js | 58 ++++++++ .../Blocnote/PreliminaryFinance/propTypes.js | 22 +++ src/utils/loadTable.js | 42 ++++++ 17 files changed, 630 insertions(+), 294 deletions(-) create mode 100644 src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js create mode 100644 src/components/Blocnote/PreliminaryFinance/LoanSummaryRow.js create mode 100644 src/components/Blocnote/PreliminaryFinance/ProjectEconomicsRow.js create mode 100644 src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js create mode 100644 src/components/Blocnote/PreliminaryFinance/TableContent.js create mode 100644 src/components/Blocnote/PreliminaryFinance/propTypes.js create mode 100644 src/utils/loadTable.js diff --git a/src/components/Blocnote/PreliminaryFinance.js b/src/components/Blocnote/PreliminaryFinance.js index 2d7d6854..4057ed66 100644 --- a/src/components/Blocnote/PreliminaryFinance.js +++ b/src/components/Blocnote/PreliminaryFinance.js @@ -7,7 +7,7 @@ import CostEstimation from './PreliminaryFinance/CostEstimation'; import SavingEstimation from './PreliminaryFinance/SavingEstimation'; import LoanSummary from './PreliminaryFinance/LoanSummary'; import ProjectEconomics from './PreliminaryFinance/ProjectEconomics'; -import EnergyExpenseSavingsProjection from './PreliminaryFinance/EnergyExpenseSavingsProjection'; +// import EnergyExpenseSavingsProjection from './PreliminaryFinance/EnergyExpenseSavingsProjection'; import PriorRetrofitIncomeStatement from './PreliminaryFinance/PriorRetrofitIncomeStatement'; import PostRetrofitIncomeStatement from './PreliminaryFinance/PostRetrofitIncomeStatement'; import PriorRetrofitBalanceSheet from './PreliminaryFinance/PriorRetrofitBalanceSheet'; @@ -23,10 +23,19 @@ class PreliminaryFinance extends Component { super(props); this.state = { - scenario: [], + projectEconomics: null, + costs: null, + savings: null, + loanSummary: null, + priorIncomeStatement: null, + postIncomeStatement: null, + priorBalanceSheet: null, + postBalanceSheet: null, + downpayment: null, successMessages: [], error: false, loading: false, + allComponentData: [], }; } @@ -42,12 +51,78 @@ class PreliminaryFinance extends Component { headers: getHeaders(), }).then((res) => { if (this.mounted) { - // console.log(res); // eslint-disable-line - const data = res; - if (!res.err && data) { - this.setState({ - scenario: data, - }); + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.economics_overview).length > 0) { + const projectEconomicsContent = [[]]; + Object.keys(res.economics_overview).forEach((key) => { + const temp = []; + temp.push(key); + temp.push(res.economics_overview[key]); + projectEconomicsContent.push(temp); + }); + this.setState({ scenarioName: res.name }); + this.setState({ projectEconomics: projectEconomicsContent }); + this.setState({ costs: res.costs }); + this.setState({ savings: res.savings }); + this.setState({ loanSummary: res.loan_summary }); + this.setState({ priorIncomeStatement: res.prior_income_statement }); + this.setState({ postIncomeStatement: res.post_income_statement }); + this.setState({ priorBalanceSheet: res.prior_balance_sheet }); + this.setState({ postBalanceSheet: res.post_balance_sheet }); + this.setState({ downpayment: res.downpayment }); + } + console.log(this.state); // eslint-disable-line + + // const tables = res.payload.instance.tables; + // const savingsPotentialList = res.payload.instance.saving_potential_list; + // const budgets = Object.keys(tables).map(tableName => tables[tableName][0].slice(1)); + // budgetGraph = generateGraph(budgets, savingsPotentialList); + // if (res.payload.name) { + // addBudgetPlot(res.payload.name, res.payload.budget_plot); + // } + + // this.costEstimationTableHead(); + // if (Object.keys(res.costs).length > 0) { + // res.costs.forEach((costItem) => { + // this.costEstimationTableBody(costItem.cost_item, costItem.cost); + // }); + // } else { + // this.costEstimationTableBody('', ''); + // } + // this.savingEstimationTableHead(); + // let savings = {}; + // if (Object.keys(res.savings).length > 0) { + // savings = res.savings; + // } else { + // savings = { + // electric: { + // estimated_savings: '', + // used_before_retrofit: '', + // used_after_retrofit: '', + // }, + // gas: { + // estimated_savings: '', + // used_before_retrofit: '', + // used_after_retrofit: '', + // }, + // oil: { + // estimated_savings: '', + // used_before_retrofit: '', + // used_after_retrofit: '', + // }, + // water: { + // estimated_savings: '', + // used_before_retrofit: '', + // used_after_retrofit: '', + // }, + // }; + // } + // this.savingEstimationTableBody(savings); + // if (res.name) { + // this.setScenarioName(res.name); + // } + this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); @@ -63,13 +138,6 @@ class PreliminaryFinance extends Component { render() { let mainContent = null; - // const { blocnote, eng } = this.props; - // const disableBTN = ( - // blocnote.scenarioStatus.loading || blocnote.scenarioStatus.error || - // blocnote.scenarioStatus.is_finished !== null || - // envelblocnoteope.scenarioStatus.is_started !== null || - // !this.props.user.permissions['create::energyPlusSimulation'] - // ); if (this.state.loading) { mainContent = ; @@ -82,7 +150,7 @@ class PreliminaryFinance extends Component { />
    - Scenario :   + Scenario :  
    @@ -94,18 +162,24 @@ class PreliminaryFinance extends Component {
    - - - - - - - - - - + + +
    + +   +
    +
    + + +
    + Downpayment: {this.state.downpayment} +
    + {/* */} + + + + +
    ); } diff --git a/src/components/Blocnote/PreliminaryFinance/CostEstimation.js b/src/components/Blocnote/PreliminaryFinance/CostEstimation.js index 8a6cebee..5d2be05e 100644 --- a/src/components/Blocnote/PreliminaryFinance/CostEstimation.js +++ b/src/components/Blocnote/PreliminaryFinance/CostEstimation.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import CostEstimationRow from './CostEstimationRow'; class CostEstimation extends Component { @@ -14,6 +16,20 @@ class CostEstimation extends Component { render() { const style = { textAlign: 'center' }; + let rows = []; + + if (this.props.data !== null) { + rows = this.props.data.map((costItem) => { + return ( + + ); + }); + } + return (

    @@ -22,27 +38,12 @@ class CostEstimation extends Component { - - - + + + - - - - - - - + {rows}
    ItemEstimated CostOptionItemEstimated CostOption
    - - -
    -
    $
    - -
    -
    - -

    @@ -50,4 +51,8 @@ class CostEstimation extends Component { } } +CostEstimation.propTypes = { + data: PropTypes.arrayOf, +}; + export default CostEstimation; diff --git a/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js b/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js new file mode 100644 index 00000000..7bc75d48 --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js @@ -0,0 +1,56 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +class CostEstimationRow extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + return ( + + + + + +
    +
    $
    + +
    + + + + + + ); + } +} + +CostEstimationRow.propTypes = { + item: PropTypes.string, + cost: PropTypes.number, +}; + +export default CostEstimationRow; diff --git a/src/components/Blocnote/PreliminaryFinance/EnergyExpenseSavingsProjection.js b/src/components/Blocnote/PreliminaryFinance/EnergyExpenseSavingsProjection.js index ed6eafd7..0492679a 100644 --- a/src/components/Blocnote/PreliminaryFinance/EnergyExpenseSavingsProjection.js +++ b/src/components/Blocnote/PreliminaryFinance/EnergyExpenseSavingsProjection.js @@ -15,44 +15,9 @@ class EnergyExpenseSavingsProjection extends Component { render() { const style = { textAlign: 'center' }; return ( -
    -

    - Energy Expense Savings Projection -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Building ConstructionU-Value [Btu/hr-ft2-F]
    External wall0.21
    Ground floor0.60
    Roof0.09
    Internal ceiling0.20
    Internal floor0.20
    Window0.95
    +
    +

     

    +
    ); } diff --git a/src/components/Blocnote/PreliminaryFinance/LoanSummary.js b/src/components/Blocnote/PreliminaryFinance/LoanSummary.js index 9b00e962..78679d32 100644 --- a/src/components/Blocnote/PreliminaryFinance/LoanSummary.js +++ b/src/components/Blocnote/PreliminaryFinance/LoanSummary.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import LoanSummaryRow from './LoanSummaryRow'; class LoanSummary extends Component { @@ -14,43 +16,49 @@ class LoanSummary extends Component { render() { const style = { textAlign: 'center' }; + let header = []; + let rows = []; + + if (this.props.data !== null) { + header = this.props.data[0].map((item) => { + return ( + {item} + ); + }); + this.props.data.shift(); + rows = this.props.data.map((item) => { + let amountBorrowed = Math.round(item[1] * 100) / 100; + amountBorrowed = amountBorrowed.toLocaleString(); + let amountUpperLimit = Math.round(item[2] * 100) / 100; + amountUpperLimit = amountUpperLimit.toLocaleString(); + const annualInterestRate = item[3][1] + item[3][0]; + const duration = `${item[4][1]} ${item[4][0]}`; + const monthlyDebtService = item[5].toLocaleString(); + return ( + + ); + }); + } + return ( -
    -

    - Loan Summary -

    - +
    +

    Loan Summary

    +
    - - + {header} - - - - - - - - - - - - - - - - - - - - - - - - + {rows}
    Building ConstructionU-Value [Btu/hr-ft2-F]
    External wall0.21
    Ground floor0.60
    Roof0.09
    Internal ceiling0.20
    Internal floor0.20
    Window0.95
    @@ -58,4 +66,8 @@ class LoanSummary extends Component { } } +LoanSummary.propTypes = { + data: PropTypes.arrayOf, +}; + export default LoanSummary; diff --git a/src/components/Blocnote/PreliminaryFinance/LoanSummaryRow.js b/src/components/Blocnote/PreliminaryFinance/LoanSummaryRow.js new file mode 100644 index 00000000..b674b963 --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/LoanSummaryRow.js @@ -0,0 +1,51 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +class LoanSummaryRow extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + return ( + + + {this.props.lender} + + + ${this.props.amountBorrowed} + + + ${this.props.amountUpperLimit} + + + {this.props.annualInterestRate} + + + {this.props.duration} + + + ${this.props.monthlyDebtService} + + + ); + } +} + +LoanSummaryRow.propTypes = { + lender: PropTypes.string, + amountBorrowed: PropTypes.number, + amountUpperLimit: PropTypes.number, + annualInterestRate: PropTypes.number, + duration: PropTypes.number, + monthlyDebtService: PropTypes.number, +}; + +export default LoanSummaryRow; diff --git a/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js b/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js index 1d87aeb7..ef3de18f 100644 --- a/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js +++ b/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import TableContent from './TableContent'; class PostRetrofitBalanceSheet extends Component { @@ -14,48 +16,35 @@ class PostRetrofitBalanceSheet extends Component { render() { const style = { textAlign: 'center' }; + let header = []; + + if (this.props.data !== null) { + header = this.props.data[0].map((item) => { + return ( + {item} + ); + }); + this.props.data.shift(); + } + return ( -
    +

    - Post Retrofit Balance Sheet + Post Retrofit Balance Sheet

    - +
    - - - - + {header} - - - - - - - - - - - - - - - - - - - - - - - - - - +
    Building ConstructionU-Value [Btu/hr-ft2-F]
    External wall0.21
    Ground floor0.60
    Roof0.09
    Internal ceiling0.20
    Internal floor0.20
    Window0.95
    ); } } +PostRetrofitBalanceSheet.propTypes = { + data: PropTypes.arrayOf, +}; + export default PostRetrofitBalanceSheet; diff --git a/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js b/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js index 8b194a94..5d7ef807 100644 --- a/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js +++ b/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import TableContent from './TableContent'; class PostRetrofitIncomeStatement extends Component { @@ -14,48 +16,37 @@ class PostRetrofitIncomeStatement extends Component { render() { const style = { textAlign: 'center' }; + let header = []; + + if (this.props.data !== null) { + header = this.props.data[0].map((item) => { + return ( + {item} + ); + }); + this.props.data.shift(); + } + return ( -
    +

    Post Retrofit Income Statement

    - +
    - - + {header} - - - - - - - - - - - - - - - - - - - - - - - - - - +
    Building ConstructionU-Value [Btu/hr-ft2-F]
    External wall0.21
    Ground floor0.60
    Roof0.09
    Internal ceiling0.20
    Internal floor0.20
    Window0.95
    ); } } +PostRetrofitIncomeStatement.propTypes = { + data: PropTypes.arrayOf, +}; + export default PostRetrofitIncomeStatement; diff --git a/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js index 83b912ed..57980350 100644 --- a/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js +++ b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import TableContent from './TableContent'; class PriorRetrofitBalanceSheet extends Component { @@ -14,48 +16,35 @@ class PriorRetrofitBalanceSheet extends Component { render() { const style = { textAlign: 'center' }; + let header = []; + + if (this.props.data !== null) { + header = this.props.data[0].map((item) => { + return ( + {item} + ); + }); + this.props.data.shift(); + } + return ( -
    +

    Prior Retrofit Balance Sheet

    - +
    - - - - + {header} - - - - - - - - - - - - - - - - - - - - - - - - - - +
    Building ConstructionU-Value [Btu/hr-ft2-F]
    External wall0.21
    Ground floor0.60
    Roof0.09
    Internal ceiling0.20
    Internal floor0.20
    Window0.95
    ); } } +PriorRetrofitBalanceSheet.propTypes = { + data: PropTypes.arrayOf, +}; + export default PriorRetrofitBalanceSheet; diff --git a/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js index 6c0cde75..513758d0 100644 --- a/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js +++ b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import TableContent from './TableContent'; class PriorRetrofitIncomeStatement extends Component { @@ -14,48 +16,37 @@ class PriorRetrofitIncomeStatement extends Component { render() { const style = { textAlign: 'center' }; + let header = []; + + if (this.props.data !== null) { + header = this.props.data[0].map((item) => { + return ( + {item} + ); + }); + this.props.data.shift(); + } + return ( -
    +

    Prior Retrofit Income Statement

    - +
    - - + {header} - - - - - - - - - - - - - - - - - - - - - - - - - - +
    Building ConstructionU-Value [Btu/hr-ft2-F]
    External wall0.21
    Ground floor0.60
    Roof0.09
    Internal ceiling0.20
    Internal floor0.20
    Window0.95
    ); } } +PriorRetrofitIncomeStatement.propTypes = { + data: PropTypes.arrayOf, +}; + export default PriorRetrofitIncomeStatement; diff --git a/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js b/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js index 5f68876c..59416290 100644 --- a/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js +++ b/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; - +import PropTypes from 'prop-types'; +import ProjectEconomicsRow from './ProjectEconomicsRow'; class ProjectEconomics extends Component { constructor(props) { @@ -14,48 +15,39 @@ class ProjectEconomics extends Component { render() { const style = { textAlign: 'center' }; + let rows = []; + + if (this.props.data !== null) { + rows = this.props.data.filter((item) => { + if (item.length === 0) { + return false; // skip + } + return true; + }).map((item) => { + return ( + + ); + }); + } + return ( -
    -

    +
    +

    Project Economics

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
    Building ConstructionU-Value [Btu/hr-ft2-F]
    External wall0.21
    Ground floor0.60
    Roof0.09
    Internal ceiling0.20
    Internal floor0.20
    Window0.95
    + {rows}
    ); } } +ProjectEconomics.propTypes = { + data: PropTypes.arrayOf, +}; + export default ProjectEconomics; diff --git a/src/components/Blocnote/PreliminaryFinance/ProjectEconomicsRow.js b/src/components/Blocnote/PreliminaryFinance/ProjectEconomicsRow.js new file mode 100644 index 00000000..6b4ae174 --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/ProjectEconomicsRow.js @@ -0,0 +1,35 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +class ProjectEconomicsRow extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + return ( + + + {this.props.row_name} + + + {this.props.amount} + + + ); + } +} + +ProjectEconomicsRow.propTypes = { + row_name: PropTypes.string, + amount: PropTypes.number, +}; + +export default ProjectEconomicsRow; diff --git a/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js b/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js index dd831842..87402993 100644 --- a/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js +++ b/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import SavingEstimationRow from './SavingEstimationRow'; class SavingEstimation extends Component { @@ -14,6 +16,23 @@ class SavingEstimation extends Component { render() { const style = { textAlign: 'center' }; + const rows = []; + console.log(this.props.data); // eslint-disable-line + + if (this.props.data !== null) { + Object.entries(this.props.data).forEach(([utilityName, utilityData]) => { + rows.push( + + ); + }); + } + return (

    @@ -28,27 +47,15 @@ class SavingEstimation extends Component { Used After Retrofit - - - Eletric - -
    - -
    %
    -
    - - - - - - - - - + {rows}

    ); } } +SavingEstimation.propTypes = { + data: PropTypes.objectOf, +}; + export default SavingEstimation; diff --git a/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js b/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js new file mode 100644 index 00000000..b71fb8fe --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js @@ -0,0 +1,57 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +class SavingEstimationRow extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + return ( + + + {this.props.utility_name} + + +
    + +
    %
    +
    + + + + + + + + + ); + } +} + +SavingEstimationRow.propTypes = { + utility_name: PropTypes.string, + estimated_savings: PropTypes.number, +}; + +export default SavingEstimationRow; diff --git a/src/components/Blocnote/PreliminaryFinance/TableContent.js b/src/components/Blocnote/PreliminaryFinance/TableContent.js new file mode 100644 index 00000000..a230185f --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/TableContent.js @@ -0,0 +1,58 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +class TableContent extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + console.log(this.props.rows); // eslint-disable-line + let rows = []; + + if (this.props.rows !== null) { + rows = this.props.rows.map((items) => { + const cells = items.map((item) => { + let cellValue = item; + if (typeof (item) !== 'string') { + cellValue = Math.round(item * 100) / 100; + cellValue = cellValue.toLocaleString(); + cellValue = `$${cellValue}`; + } + + return ( + + + {cellValue} + + + ); + }); + + return ( + + {cells} + ); + }); + } + + return ( + + {rows} + + ); + } +} + +TableContent.propTypes = { + rows: PropTypes.arrayOf, +}; + +export default TableContent; diff --git a/src/components/Blocnote/PreliminaryFinance/propTypes.js b/src/components/Blocnote/PreliminaryFinance/propTypes.js new file mode 100644 index 00000000..54c76cdd --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/propTypes.js @@ -0,0 +1,22 @@ +import PropTypes from 'prop-types'; + +const { string, number, shape, arrayOf } = PropTypes; + +const disaggregatedBill = { + bill_from_date: string, + bill_to_date: string, + heating: number, + cooling: number, + other: number, + cooking: number, + dhw: number, + lighting: number, + miscellaneous: number, + plug_load: number, +}; + +export const disaggregateDataPropTypes = arrayOf( + shape({ + ...disaggregatedBill, + }) +); diff --git a/src/utils/loadTable.js b/src/utils/loadTable.js new file mode 100644 index 00000000..49f9ee8a --- /dev/null +++ b/src/utils/loadTable.js @@ -0,0 +1,42 @@ +function insertGenericRow(rowParent, rowContent, rowCount, style = false) { + const row = rowParent.insertRow(rowCount); + let cell; + if (!style) { + rowContent.forEach((heading, index) => { + cell = row.insertCell(index); + cell.innerHTML = heading; + }); + } else if (style === 'currency/dollar') { + rowContent.forEach((heading, index) => { + cell = row.insertCell(index); + if (Array.isArray(heading)) { + if (heading[0] !== '%') { + cell.innerHTML = ` ${heading[1]} ${heading[0]} `; + } else { + cell.innerHTML = ` ${heading[1]}${heading[0]} `; + } + } else if (typeof (heading) !== 'string') { + const amount = Math.round(heading * 100) / 100; + cell.innerHTML = ` $${amount.toLocaleString()} `; + } else { + cell.innerHTML = ` ${heading} `; + } + }); + } +} + +export function loadTable(componentId, heading, contents, style = false) { + const component = document.querySelector(`#${componentId}`); + component.querySelector('.card-title').innerHTML = heading; + const headings = contents[0]; + const tableHead = component.querySelector(`#${componentId}-table thead`); + tableHead.innerHTML = ''; + insertGenericRow(tableHead, headings); + const tableBody = component.querySelector(`#${componentId}-table tbody`); + tableBody.innerHTML = ''; + const bodyContent = contents.splice(1); + bodyContent.forEach((row, rowIndex) => { + insertGenericRow(tableBody, row, rowIndex, style); + }); +} + -- GitLab From 6e5a5da26e1f1a93e314ea256b9b01219b04940e Mon Sep 17 00:00:00 2001 From: akkking Date: Mon, 25 Mar 2019 23:36:51 -0400 Subject: [PATCH 06/79] add financial inputs code --- src/components/Blocnote/FinancialInputs.js | 237 +++++++++++++++--- .../Blocnote/FinancialInputs/BillsSummary.js | 0 .../Blocnote/FinancialInputs/CashBalance.js | 0 .../FinancialInputs/CustomerPreference.js | 0 .../Blocnote/FinancialInputs/EnergyBills.js | 0 .../FinancialInputs/EnergyBillsOverview.js | 0 .../Blocnote/FinancialInputs/GeneralInputs.js | 42 ++++ .../FinancialInputs/IncomeStatements.js | 0 .../Blocnote/FinancialInputs/LoanOptions.js | 0 .../FinancialInputs/MortgageLiabilities.js | 0 src/components/Blocnote/PreliminaryFinance.js | 52 +--- 11 files changed, 254 insertions(+), 77 deletions(-) create mode 100644 src/components/Blocnote/FinancialInputs/BillsSummary.js create mode 100644 src/components/Blocnote/FinancialInputs/CashBalance.js create mode 100644 src/components/Blocnote/FinancialInputs/CustomerPreference.js create mode 100644 src/components/Blocnote/FinancialInputs/EnergyBills.js create mode 100644 src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js create mode 100644 src/components/Blocnote/FinancialInputs/GeneralInputs.js create mode 100644 src/components/Blocnote/FinancialInputs/IncomeStatements.js create mode 100644 src/components/Blocnote/FinancialInputs/LoanOptions.js create mode 100644 src/components/Blocnote/FinancialInputs/MortgageLiabilities.js diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js index d46e96b2..06750275 100644 --- a/src/components/Blocnote/FinancialInputs.js +++ b/src/components/Blocnote/FinancialInputs.js @@ -1,18 +1,35 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Icon } from 'react-fa'; import LinkBarDetail from '../../components/LinkBarDetail'; import ErrorAlert from '../../components/ErrorAlert'; import './styles.css'; +import request from '../../utils/request'; import Loading from '../../components/Loading'; -/* eslint-disable react/sort-comp */ +import GeneralInputs from './FinancialInputs/GeneralInputs'; +import EnergyBills from './FinancialInputs/EnergyBills'; +import BillsSummary from './FinancialInputs/BillsSummary'; +import EnergyBillsOverview from './FinancialInputs/EnergyBillsOverview'; +import IncomeStatements from './FinancialInputs/IncomeStatements'; +import CashBalance from './FinancialInputs/CashBalance'; +import MortgageLiabilities from './FinancialInputs/MortgageLiabilities'; +import LoanOptions from './FinancialInputs/LoanOptions'; +import CustomerPreference from './FinancialInputs/CustomerPreference'; +import { getHeaders, blocnoteURL } from '../../utils/restServices'; + class FinancialInputs extends Component { - mounted = false; constructor(props) { super(props); this.state = { + bills: null, + billsSummary: null, + billsOverview: null, + incomeStatements: null, + cashBalance: null, + liabilities: null, + loanOptions: null, + customerPreference: null, successMessages: [], error: false, loading: false, @@ -20,21 +37,183 @@ class FinancialInputs extends Component { } componentDidMount() { - this.mounted = true; - window.addEventListener('offline', this.handleConnection); - window.addEventListener('online', this.handleConnection); + this.loadBills(); + this.loadBillsSummary(); + this.loadBillsOverview(); + this.loadIncomeStatement(); + this.loadCashBalance(); + this.loadLiabilities(); + this.loadLoanOptions(); + this.loadCustomerPreference(); + } + + loadBills = () => { + this.setState({ loading: true }); + request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/bills/`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + if (this.mounted) { + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.bills).length > 0) { + this.setState({ bills: res.bills }); + } + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + } + }); + } + + loadBillsSummary = () => { + request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/bills-summary/`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + if (this.mounted) { + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.billsSummary).length > 0) { + this.setState({ billsSummary: res.billsSummary }); + } + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + } + }); + } + + loadBillsOverview = () => { + request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/bills-overview/`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + if (this.mounted) { + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.billsOverview).length > 0) { + this.setState({ billsOverview: res.billsOverview }); + } + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + } + }); + } + + loadIncomeStatement = () => { + request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/income-statement/`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + if (this.mounted) { + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.incomeStatement).length > 0) { + this.setState({ incomeStatement: res.incomeStatement }); + } + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + } + }); + } + + loadCashBalance = () => { + request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/cash-balance/`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + if (this.mounted) { + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.cashBalance).length > 0) { + this.setState({ cashBalance: res.cashBalance }); + } + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + } + }); + } + + loadLiabilities = () => { + request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/liabilities/`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + if (this.mounted) { + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.liabilities).length > 0) { + this.setState({ liabilities: res.liabilities }); + } + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + } + }); } - componentWillUnmount() { - this.mounted = false; - clearInterval(this.offlineTimer); - window.removeEventListener('offline', this.handleConnection); - window.removeEventListener('online', this.handleConnection); + loadLoanOptions = () => { + request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/loan-options/?loans=all-loans`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + if (this.mounted) { + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.liabilities).length > 0) { + this.setState({ loanOptions: res.loanOptions }); + } + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + } + }); } - setOfflineDuration = () => { - // A function called every second - this.setState({ offlineDuration: this.state.offlineDuration + 1 }); + loadCustomerPreference = () => { + request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/customer-preference/`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + if (this.mounted) { + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.customerPreference).length > 0) { + this.setState({ customerPreference: res.customerPreference }); + } + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + } + }); } resetErrorMessage = () => { @@ -53,25 +232,15 @@ class FinancialInputs extends Component { error={this.state.error} genericMessage="There was an error" /> -
    -
    -

    - Offline. Changes have not been saved for {this.state.offlineDuration} second{this.state.offlineDuration !== 1 ? 's' : ''} - { this.setState({ hideOffline: true }); }} - className="float-right" - style={{ - cursor: 'pointer', - }} - /> -

    -
    - {this.state.successMessages} -
    + + + + + + + + +

    ); } @@ -79,7 +248,7 @@ class FinancialInputs extends Component { return (
    + + + + + + +
    + Pro Forma Start date + +
    + {this.props.data} +
    +
    + +
    + ); + } +} + +GeneralInputs.propTypes = { + data: PropTypes.arrayOf, +}; + +export default GeneralInputs; diff --git a/src/components/Blocnote/FinancialInputs/IncomeStatements.js b/src/components/Blocnote/FinancialInputs/IncomeStatements.js new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Blocnote/FinancialInputs/LoanOptions.js b/src/components/Blocnote/FinancialInputs/LoanOptions.js new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Blocnote/PreliminaryFinance.js b/src/components/Blocnote/PreliminaryFinance.js index 4057ed66..84acf802 100644 --- a/src/components/Blocnote/PreliminaryFinance.js +++ b/src/components/Blocnote/PreliminaryFinance.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import LinkBarDetail from '../LinkBarDetail'; import ErrorAlert from '../ErrorAlert'; import Loading from '../Loading'; @@ -16,6 +17,7 @@ import request from '../../utils/request'; import { getHeaders, blocnoteURL } from '../../utils/restServices'; /* eslint-disable react/sort-comp */ + class PreliminaryFinance extends Component { mounted = false; @@ -35,7 +37,6 @@ class PreliminaryFinance extends Component { successMessages: [], error: false, loading: false, - allComponentData: [], }; } @@ -46,7 +47,8 @@ class PreliminaryFinance extends Component { loadScenario = () => { this.setState({ loading: true }); - request(`${blocnoteURL}buildings/25313/preliminary-finance/scenario/`, { + console.log(this.props); // eslint-disable-line + request(`${blocnoteURL}buildings/${this.props.buildingId}/preliminary-finance/scenario/`, { method: 'GET', headers: getHeaders(), }).then((res) => { @@ -82,47 +84,6 @@ class PreliminaryFinance extends Component { // addBudgetPlot(res.payload.name, res.payload.budget_plot); // } - // this.costEstimationTableHead(); - // if (Object.keys(res.costs).length > 0) { - // res.costs.forEach((costItem) => { - // this.costEstimationTableBody(costItem.cost_item, costItem.cost); - // }); - // } else { - // this.costEstimationTableBody('', ''); - // } - // this.savingEstimationTableHead(); - // let savings = {}; - // if (Object.keys(res.savings).length > 0) { - // savings = res.savings; - // } else { - // savings = { - // electric: { - // estimated_savings: '', - // used_before_retrofit: '', - // used_after_retrofit: '', - // }, - // gas: { - // estimated_savings: '', - // used_before_retrofit: '', - // used_after_retrofit: '', - // }, - // oil: { - // estimated_savings: '', - // used_before_retrofit: '', - // used_after_retrofit: '', - // }, - // water: { - // estimated_savings: '', - // used_before_retrofit: '', - // used_after_retrofit: '', - // }, - // }; - // } - // this.savingEstimationTableBody(savings); - // if (res.name) { - // this.setScenarioName(res.name); - // } - this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); @@ -187,6 +148,7 @@ class PreliminaryFinance extends Component { return (
    Date: Mon, 25 Mar 2019 23:48:52 -0400 Subject: [PATCH 07/79] Remove preliminary finance proptypes file --- .../Blocnote/PreliminaryFinance/propTypes.js | 22 ------------------- 1 file changed, 22 deletions(-) delete mode 100644 src/components/Blocnote/PreliminaryFinance/propTypes.js diff --git a/src/components/Blocnote/PreliminaryFinance/propTypes.js b/src/components/Blocnote/PreliminaryFinance/propTypes.js deleted file mode 100644 index 54c76cdd..00000000 --- a/src/components/Blocnote/PreliminaryFinance/propTypes.js +++ /dev/null @@ -1,22 +0,0 @@ -import PropTypes from 'prop-types'; - -const { string, number, shape, arrayOf } = PropTypes; - -const disaggregatedBill = { - bill_from_date: string, - bill_to_date: string, - heating: number, - cooling: number, - other: number, - cooking: number, - dhw: number, - lighting: number, - miscellaneous: number, - plug_load: number, -}; - -export const disaggregateDataPropTypes = arrayOf( - shape({ - ...disaggregatedBill, - }) -); -- GitLab From 1f5ed587db4bf5d5d99e9cd39344762423a494c2 Mon Sep 17 00:00:00 2001 From: akkking Date: Tue, 26 Mar 2019 17:26:26 -0400 Subject: [PATCH 08/79] add general inputs, bills summary, energy bills, bills overview components --- src/components/Blocnote/FinancialInputs.js | 104 +++++++-------- .../Blocnote/FinancialInputs/BillsSummary.js | 51 ++++++++ .../Blocnote/FinancialInputs/EnergyBills.js | 56 ++++++++ .../FinancialInputs/EnergyBillsOverview.js | 122 +++++++++++++++++ .../Blocnote/FinancialInputs/GeneralInputs.js | 72 ++++++++-- .../FinancialInputs/IncomeStatements.js | 123 ++++++++++++++++++ 6 files changed, 463 insertions(+), 65 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js index 06750275..cddfcf4a 100644 --- a/src/components/Blocnote/FinancialInputs.js +++ b/src/components/Blocnote/FinancialInputs.js @@ -9,11 +9,11 @@ import GeneralInputs from './FinancialInputs/GeneralInputs'; import EnergyBills from './FinancialInputs/EnergyBills'; import BillsSummary from './FinancialInputs/BillsSummary'; import EnergyBillsOverview from './FinancialInputs/EnergyBillsOverview'; -import IncomeStatements from './FinancialInputs/IncomeStatements'; -import CashBalance from './FinancialInputs/CashBalance'; -import MortgageLiabilities from './FinancialInputs/MortgageLiabilities'; -import LoanOptions from './FinancialInputs/LoanOptions'; -import CustomerPreference from './FinancialInputs/CustomerPreference'; +// import IncomeStatements from './FinancialInputs/IncomeStatements'; +// import CashBalance from './FinancialInputs/CashBalance'; +// import MortgageLiabilities from './FinancialInputs/MortgageLiabilities'; +// import LoanOptions from './FinancialInputs/LoanOptions'; +// import CustomerPreference from './FinancialInputs/CustomerPreference'; import { getHeaders, blocnoteURL } from '../../utils/restServices'; @@ -45,27 +45,27 @@ class FinancialInputs extends Component { this.loadLiabilities(); this.loadLoanOptions(); this.loadCustomerPreference(); + console.log(this.state); // eslint-disable-line } loadBills = () => { this.setState({ loading: true }); + console.log(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/bills/`); // eslint-disable-line request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/bills/`, { method: 'GET', headers: getHeaders(), }).then((res) => { - if (this.mounted) { - console.log(res); // eslint-disable-line - if (!res.err) { - if (Object.keys(res.bills).length > 0) { - this.setState({ bills: res.bills }); - } - console.log(this.state); // eslint-disable-line - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.result).length > 0) { + this.setState({ bills: res.result }); } - this.setState({ loading: false }); + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); } + this.setState({ loading: false }); }); } @@ -74,40 +74,38 @@ class FinancialInputs extends Component { method: 'GET', headers: getHeaders(), }).then((res) => { - if (this.mounted) { - console.log(res); // eslint-disable-line - if (!res.err) { - if (Object.keys(res.billsSummary).length > 0) { - this.setState({ billsSummary: res.billsSummary }); - } - console.log(this.state); // eslint-disable-line - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.result).length > 0) { + console.log(res.result); // eslint-disable-line + this.setState({ billsSummary: res.result.user_bill }); } - this.setState({ loading: false }); + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); } + this.setState({ loading: false }); }); } loadBillsOverview = () => { + console.log(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/bills-overview/`); // eslint-disable-line request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/bills-overview/`, { method: 'GET', headers: getHeaders(), }).then((res) => { - if (this.mounted) { - console.log(res); // eslint-disable-line - if (!res.err) { - if (Object.keys(res.billsOverview).length > 0) { - this.setState({ billsOverview: res.billsOverview }); - } - console.log(this.state); // eslint-disable-line - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.instance).length > 0) { + this.setState({ billsOverview: res.instance }); } - this.setState({ loading: false }); + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); } + this.setState({ loading: false }); }); } @@ -116,19 +114,17 @@ class FinancialInputs extends Component { method: 'GET', headers: getHeaders(), }).then((res) => { - if (this.mounted) { - console.log(res); // eslint-disable-line - if (!res.err) { - if (Object.keys(res.incomeStatement).length > 0) { - this.setState({ incomeStatement: res.incomeStatement }); - } - console.log(this.state); // eslint-disable-line - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.instance).length > 0) { + this.setState({ incomeStatements: res.instance }); } - this.setState({ loading: false }); + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); } + this.setState({ loading: false }); }); } @@ -233,14 +229,14 @@ class FinancialInputs extends Component { genericMessage="There was an error" /> - + - + - + {/* - + */}
    ); } @@ -248,7 +244,7 @@ class FinancialInputs extends Component { return (
    { + BillsSummaryTables.push( +
    + +
    + ); + }); + } + + return ( +
    +

    + Bills Summary +

    +
    + {BillsSummaryTables} +
    +
    + ); + } +} + +BillsSummary.propTypes = { + data: PropTypes.objectOf, +}; + +export default BillsSummary; diff --git a/src/components/Blocnote/FinancialInputs/EnergyBills.js b/src/components/Blocnote/FinancialInputs/EnergyBills.js index e69de29b..d1b0fcd1 100644 --- a/src/components/Blocnote/FinancialInputs/EnergyBills.js +++ b/src/components/Blocnote/FinancialInputs/EnergyBills.js @@ -0,0 +1,56 @@ +import React, { Component } from 'react'; +// import PropTypes from 'prop-types'; + + +class EnergyBills extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const headerStyle = { textAlign: 'center' }; + const activeBillTab = { + backgroundColor: '#DDDDDD', + color: '#000000', + padding: '10px 15px 10px 15px', + }; + const inactiveBillTab = { + backgroundColor: '#FFFFFF', + color: '#000000', + padding: '10px 15px 10px 15px', + }; + + return ( +
    +

    + Energy Bills +

    +
    +
    +
    ➤ Electricity
    +
    ➤ Gas
    +
    ➤ Oil
    +
    ➤ Water
    +
    +
    +
    + No Bills available +
    +
    +
    +
    + ); + } +} + +// EnergyBills.propTypes = { +// data: PropTypes.objectOf, +// }; + +export default EnergyBills; diff --git a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js index e69de29b..cdf2478e 100644 --- a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js +++ b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js @@ -0,0 +1,122 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +class EnergyBillsOverview extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + buildHeader = (headerNames) => { + return [...headerNames, ...Object.keys(this.props.data.electric)].map((name) => { + return ( + {name} + ); + }); + } + + buildFooter = (footerNames) => { + return [...footerNames, ...Object.values(this.props.data.total_annual_charge)].map((name) => { + return ( + {name} + ); + }); + } + + render() { + const headerStyle = { textAlign: 'center' }; + const validBillNames = ['electric', 'water', 'gas', 'oil']; + let header = []; + let footer = []; + let rows = []; + + if (this.props.data !== null) { + const headerNames = ['Data Source', 'Utility']; + const footerNames = ['', 'Total Annual Charge']; + header = this.buildHeader(headerNames); + footer = this.buildFooter(footerNames); + + rows = Object.keys(this.props.data) + .filter(billName => validBillNames.includes(billName)) + .map((billName) => { + const cells = [...['Annual Estimate ($)', billName], ...Object.values(this.props.data[billName])]; + const cellsData = Object.values(cells).map((amount) => { + let cellValue = amount; + + if (typeof (cellValue) !== 'string') { + cellValue = Math.round(cellValue * 100) / 100; + cellValue = cellValue.toLocaleString(); + cellValue = `$${cellValue}`; + } + + return ( + + + {cellValue} + + + ); + }); + + return ( + + {cellsData} + + ); + }); + } + + return ( +
    +

    + Energy Bills Overview +

    +
    +
    + +
    +
    + +
    +
    +
    + + + + {header} + + + + {rows} + {footer} + +
    +
    +
    +
    + +
    +
    +
    + ); + } +} + +EnergyBillsOverview.propTypes = { + data: PropTypes.objectOf, +}; + +export default EnergyBillsOverview; diff --git a/src/components/Blocnote/FinancialInputs/GeneralInputs.js b/src/components/Blocnote/FinancialInputs/GeneralInputs.js index abb954bc..9779d842 100644 --- a/src/components/Blocnote/FinancialInputs/GeneralInputs.js +++ b/src/components/Blocnote/FinancialInputs/GeneralInputs.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; class GeneralInputs extends Component { @@ -15,16 +14,71 @@ class GeneralInputs extends Component { render() { return ( -
    - +
    +
    + + + + + + + + + + + + + +
    Pro Forma Start datePro Forma Duration (years)Analysis DateFund
    - Pro Forma Start date - -
    - {this.props.data} + +
    +
    + +
    +
    + +
    +
    + {/* */} +
    +
    +
    +
    + + + + + + + + + + + + + + + + @@ -35,8 +89,4 @@ class GeneralInputs extends Component { } } -GeneralInputs.propTypes = { - data: PropTypes.arrayOf, -}; - export default GeneralInputs; diff --git a/src/components/Blocnote/FinancialInputs/IncomeStatements.js b/src/components/Blocnote/FinancialInputs/IncomeStatements.js index e69de29b..379bf771 100644 --- a/src/components/Blocnote/FinancialInputs/IncomeStatements.js +++ b/src/components/Blocnote/FinancialInputs/IncomeStatements.js @@ -0,0 +1,123 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +class IncomeStatements extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + buildHeader = (headerNames) => { + return [...headerNames, ...Object.keys(this.props.data.electric)].map((name) => { + return ( + + ); + }); + } + + buildFooter = (footerNames) => { + return [...footerNames, ...Object.values(this.props.data.total_annual_charge)].map((name) => { + return ( + + ); + }); + } + + render() { + const headerStyle = { textAlign: 'center' }; + const validBillNames = ['electric', 'water', 'gas', 'oil']; + let header = []; + let footer = []; + let rows = []; + + if (this.props.data !== null) { + const headerNames = ['Data Source', 'Utility']; + const footerNames = ['', 'Total Annual Charge']; + header = this.buildHeader(headerNames); + footer = this.buildFooter(footerNames); + + rows = Object.keys(this.props.data) + .filter(billName => validBillNames.includes(billName)) + .map((billName) => { + const cells = [...['Annual Estimate ($)', billName], ...Object.values(this.props.data[billName])]; + const cellsData = Object.values(cells).map((amount) => { + let cellValue = amount; + + if (typeof (cellValue) !== 'string') { + cellValue = Math.round(cellValue * 100) / 100; + cellValue = cellValue.toLocaleString(); + cellValue = `$${cellValue}`; + } + + return ( + + ); + }); + + return ( + + {cellsData} + + ); + }); + } + + return ( +
    +

    + Income Statements (in $, End of Year) +

    +
    +
    + Selected Growth Rate + +
    +
    + +
    +
    +
    +
    Anticipated Construction Start DateAnticipated Commissioning DateAnticipated Construction Period (weeks) 
    + +
    +
    + +
    +
    + +
    +
    +  
    {name}{name} + + {cellValue} + +
    + + + {header} + + + + {rows} + {footer} + +
    +
    +
    +
    + +
    +
    +
    + ); + } +} + +IncomeStatements.propTypes = { + data: PropTypes.objectOf, +}; + +export default IncomeStatements; -- GitLab From cda30836f0dae9ad2224e8a1b2ccd4950c1b4b91 Mon Sep 17 00:00:00 2001 From: akkking Date: Wed, 27 Mar 2019 00:05:29 -0400 Subject: [PATCH 09/79] Add Cash Balance and Income Statements components --- src/components/Blocnote/FinancialInputs.js | 28 ++-- .../FinancialInputs/BillsSummaryTable.js | 68 +++++++++ .../Blocnote/FinancialInputs/CashBalance.js | 74 +++++++++ .../FinancialInputs/CashBalanceRow.js | 47 ++++++ .../FinancialInputs/EnergyBillsOverview.js | 26 ++-- .../FinancialInputs/IncomeStatements.js | 143 +++++++++++------- 6 files changed, 303 insertions(+), 83 deletions(-) create mode 100644 src/components/Blocnote/FinancialInputs/BillsSummaryTable.js create mode 100644 src/components/Blocnote/FinancialInputs/CashBalanceRow.js diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js index cddfcf4a..6531d62f 100644 --- a/src/components/Blocnote/FinancialInputs.js +++ b/src/components/Blocnote/FinancialInputs.js @@ -9,8 +9,8 @@ import GeneralInputs from './FinancialInputs/GeneralInputs'; import EnergyBills from './FinancialInputs/EnergyBills'; import BillsSummary from './FinancialInputs/BillsSummary'; import EnergyBillsOverview from './FinancialInputs/EnergyBillsOverview'; -// import IncomeStatements from './FinancialInputs/IncomeStatements'; -// import CashBalance from './FinancialInputs/CashBalance'; +import IncomeStatements from './FinancialInputs/IncomeStatements'; +import CashBalance from './FinancialInputs/CashBalance'; // import MortgageLiabilities from './FinancialInputs/MortgageLiabilities'; // import LoanOptions from './FinancialInputs/LoanOptions'; // import CustomerPreference from './FinancialInputs/CustomerPreference'; @@ -133,19 +133,17 @@ class FinancialInputs extends Component { method: 'GET', headers: getHeaders(), }).then((res) => { - if (this.mounted) { - console.log(res); // eslint-disable-line - if (!res.err) { - if (Object.keys(res.cashBalance).length > 0) { - this.setState({ cashBalance: res.cashBalance }); - } - console.log(this.state); // eslint-disable-line - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.instance).length > 0) { + this.setState({ cashBalance: res.instance.result }); } - this.setState({ loading: false }); + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); } + this.setState({ loading: false }); }); } @@ -233,8 +231,8 @@ class FinancialInputs extends Component { - {/* - + + {/* */}
    diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js new file mode 100644 index 00000000..2bc9fe37 --- /dev/null +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -0,0 +1,68 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +class BillsSummaryTable extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const tableHeaderStyle = { + textAlign: 'center', + backgroundColor: '#EEEEEE', + color: '#000000', + }; + let rows = []; + + if (this.props.billData !== null) { + rows = this.props.billData.map((item) => { + let charge = Math.round(item.charge * 100) / 100; + charge = charge.toLocaleString(); + charge = `$${charge}`; + return ( + + {item.year} + {charge} + + + ); + }); + } + + return ( +
    + + + + + + + + + + + + + {rows} + +
    + {this.props.billName} Annual Charge +
    YearCharge ($) 
    +
    + ); + } +} + +BillsSummaryTable.propTypes = { + billName: PropTypes.string, + billData: PropTypes.arrayOf, +}; + +export default BillsSummaryTable; diff --git a/src/components/Blocnote/FinancialInputs/CashBalance.js b/src/components/Blocnote/FinancialInputs/CashBalance.js index e69de29b..cc818873 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalance.js +++ b/src/components/Blocnote/FinancialInputs/CashBalance.js @@ -0,0 +1,74 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import CashBalanceRow from './CashBalanceRow'; + + +class CashBalance extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const headerStyle = { textAlign: 'center' }; + const header = [ + '#Statement', + 'Balance Amount', + 'Statement Date', + 'Balance Sheet', + 'Option'].map((title) => { + return ( + + {title} + + ); + }); + let rows = []; + + if (this.props.data !== null) { + rows = this.props.data.map((item, index) => { + return ( + + ); + }); + } + + return ( +
    +

    + Cash Balance +

    +
    +
    + + + + {header} + + + + {rows} + +
    +
    +
    +
    + ); + } +} + +CashBalance.propTypes = { + data: PropTypes.objectOf, +}; + +export default CashBalance; diff --git a/src/components/Blocnote/FinancialInputs/CashBalanceRow.js b/src/components/Blocnote/FinancialInputs/CashBalanceRow.js new file mode 100644 index 00000000..07f9d7ee --- /dev/null +++ b/src/components/Blocnote/FinancialInputs/CashBalanceRow.js @@ -0,0 +1,47 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +class CashBalanceRow extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + return ( + + + {this.props.statementNum} + + +
    $
    + + + + + + + + + + + + + ); + } +} + +CashBalanceRow.propTypes = { + statementNum: PropTypes.number, + balanceAmount: PropTypes.number, + statementDate: PropTypes.string, + isFromBalanceSheet: PropTypes.bool, +}; + +export default CashBalanceRow; diff --git a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js index cdf2478e..ca830de9 100644 --- a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js +++ b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js @@ -22,7 +22,7 @@ class EnergyBillsOverview extends Component { } buildFooter = (footerNames) => { - return [...footerNames, ...Object.values(this.props.data.total_annual_charge)].map((name) => { + return [...footerNames, ...Object.values(this.props.data.electric)].map((name) => { return ( {name} ); @@ -91,17 +91,19 @@ class EnergyBillsOverview extends Component {
    - - - - {header} - - - - {rows} - {footer} - -
    +
    + + + + {header} + + + + {rows} + {footer} + +
    +
    diff --git a/src/components/Blocnote/FinancialInputs/IncomeStatements.js b/src/components/Blocnote/FinancialInputs/IncomeStatements.js index 379bf771..c5fa5c72 100644 --- a/src/components/Blocnote/FinancialInputs/IncomeStatements.js +++ b/src/components/Blocnote/FinancialInputs/IncomeStatements.js @@ -14,62 +14,99 @@ class IncomeStatements extends Component { } buildHeader = (headerNames) => { - return [...headerNames, ...Object.keys(this.props.data.electric)].map((name) => { + return [ + ...headerNames, + ...Object.keys(this.props.data.hist), + ...[this.props.data.future.year], + ...['Average'], + ].map((name) => { return ( {name} ); }); } - buildFooter = (footerNames) => { - return [...footerNames, ...Object.values(this.props.data.total_annual_charge)].map((name) => { - return ( - {name} - ); - }); - } - render() { const headerStyle = { textAlign: 'center' }; - const validBillNames = ['electric', 'water', 'gas', 'oil']; let header = []; - let footer = []; let rows = []; - if (this.props.data !== null) { - const headerNames = ['Data Source', 'Utility']; - const footerNames = ['', 'Total Annual Charge']; - header = this.buildHeader(headerNames); - footer = this.buildFooter(footerNames); + const columnKeys = [ + 'revenue', + 'utility_expense', + 'energy_opex', + 'electric_opex', + 'gas_opex', + 'oil_opex', + 'water_opex', + 'other_utility', + 'non_utility_expense', + 'net_non_energy_opex', + 'total_opex', + 'noi', + ]; - rows = Object.keys(this.props.data) - .filter(billName => validBillNames.includes(billName)) - .map((billName) => { - const cells = [...['Annual Estimate ($)', billName], ...Object.values(this.props.data[billName])]; - const cellsData = Object.values(cells).map((amount) => { - let cellValue = amount; + const columnNames = { + revenue: 'Revenue', + utility_expense: 'Utility Expense', + energy_opex: 'Energy Expense', + electric_opex: 'Electric Bill', + gas_opex: 'Gas Bill', + oil_opex: 'Oil Bill', + water_opex: 'Water Bill', + other_utility: 'Other Utility Expense', + non_utility_expense: 'Non-Utility Operating Expense', + net_non_energy_opex: 'Net Non-Energy Expense', + total_opex: 'Total Expense', + noi: 'Net Operating Income', + }; - if (typeof (cellValue) !== 'string') { - cellValue = Math.round(cellValue * 100) / 100; - cellValue = cellValue.toLocaleString(); - cellValue = `$${cellValue}`; - } + if (this.props.data !== null) { + header = this.buildHeader(['Year']); + const histYears = Object.keys(this.props.data.hist).sort(); - return ( - - - {cellValue} - - - ); - }); + rows = columnKeys.map((columnKey) => { + const cells = [ + ...[columnNames[columnKey]], + ...histYears.map((histYear) => { + let cellValue = this.props.data.hist[histYear][columnKey]; + cellValue = Math.round(cellValue * 100) / 100; + cellValue = cellValue.toLocaleString(); + cellValue = `$${cellValue}`; + return cellValue; + }), + ...[this.props.data.future[columnKey]].map((amount) => { + let cellValue = amount; + cellValue = Math.round(cellValue * 100) / 100; + cellValue = cellValue.toLocaleString(); + cellValue = `$${cellValue}`; + return cellValue; + }), + ...Object.values([this.props.data.average[columnKey]]).map((amount) => { + let cellValue = amount; + cellValue = Math.round(cellValue * 100) / 100; + cellValue = cellValue.toLocaleString(); + cellValue = `$${cellValue}`; + return cellValue; + }), + ]; + const cellsData = Object.values(cells).map((celldata) => { return ( - - {cellsData} - + + + {celldata} + + ); }); + + return ( + + {cellsData} + + ); + }); } return ( @@ -79,7 +116,7 @@ class IncomeStatements extends Component {
    - Selected Growth Rate + Selected Growth Rate   + + + + + + + ); }); + rows.push( + + + + + + + + + + + + ); } return ( diff --git a/src/components/Blocnote/FinancialInputs/CashBalance.js b/src/components/Blocnote/FinancialInputs/CashBalance.js index cc818873..87563f94 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalance.js +++ b/src/components/Blocnote/FinancialInputs/CashBalance.js @@ -23,7 +23,7 @@ class CashBalance extends Component { 'Balance Sheet', 'Option'].map((title) => { return ( - + {title} ); @@ -62,6 +62,16 @@ class CashBalance extends Component {
    +
    +
    +   + +
    +
    ); } diff --git a/src/components/Blocnote/FinancialInputs/CashBalanceRow.js b/src/components/Blocnote/FinancialInputs/CashBalanceRow.js index 07f9d7ee..7b41f174 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalanceRow.js +++ b/src/components/Blocnote/FinancialInputs/CashBalanceRow.js @@ -19,9 +19,11 @@ class CashBalanceRow extends Component { {this.props.statementNum} - -
    $
    - + +
    +
    $
    + +
    diff --git a/src/components/Blocnote/FinancialInputs/CustomerPreference.js b/src/components/Blocnote/FinancialInputs/CustomerPreference.js index e69de29b..9d8ad39e 100644 --- a/src/components/Blocnote/FinancialInputs/CustomerPreference.js +++ b/src/components/Blocnote/FinancialInputs/CustomerPreference.js @@ -0,0 +1,132 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +class CustomerPreference extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const headerStyle = { textAlign: 'center' }; + const header = [ + 'Preference', + 'Value (if values is not known, please leave it blank)', + ].map((title) => { + return ( + + {title} + + ); + }); + + const rows = []; + const style = { fontWeight: 'bold' }; + if (this.props.data !== null) { + rows.push( + + + Affordable Downpayment (?) + + +
    +
    $
    + +
    + + + ); + rows.push( + + + Expected Payback (?) + + +
    + +
    + Months +
    +
    + + + ); + rows.push( + + + Expected Saving DSCR (?) + + +
    + +
    + X +
    +
    + + + ); + } + + return ( +
    +

    + Customer Preference +

    +
    +
    + + + + {header} + + + + {rows} + +
    +
    +
    +
    +
    + +
    +
    +
    + ); + } +} + +CustomerPreference.propTypes = { + data: PropTypes.objectOf, +}; + +export default CustomerPreference; diff --git a/src/components/Blocnote/FinancialInputs/LoanOptions.js b/src/components/Blocnote/FinancialInputs/LoanOptions.js index e69de29b..f2dc01a5 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptions.js @@ -0,0 +1,125 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import LoanOptionsRow from './LoanOptionsRow'; + + +class LoanOptions extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const headerStyle = { textAlign: 'center' }; + const header = [ + 'Loan Options', + 'Lender', + 'Interet Rate', + 'Duration', + 'Maximum Loan Amount', + 'Option', + ].map((title) => { + return ( + + {title} + + ); + }); + + let loans = []; + if (this.props.loans !== null) { + loans = this.props.loans.map((loan, index) => { + return ( + + ); + }); + } + + return ( +
    +

    + Loan Options +

    +
    +
    + + + + + + + + {header} + + + + {loans} + +
    +
    + + +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +   + +
    +
    +
    + ); + } +} + +LoanOptions.propTypes = { + cash: PropTypes.number, + noi: PropTypes.number, + loans: PropTypes.objectOf, +}; + +export default LoanOptions; diff --git a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js new file mode 100644 index 00000000..1cec1efd --- /dev/null +++ b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js @@ -0,0 +1,59 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +class LoanOptionsRow extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + return ( + + + Loan {this.props.LoanNum} + + + + + +
    + +
    %
    +
    + + +
    + +
    Months
    +
    + + +
    +
    $
    + +
    + + + + + + ); + } +} + +LoanOptionsRow.propTypes = { + LoanNum: PropTypes.number, + lender: PropTypes.string, + interestRate: PropTypes.number, + duration: PropTypes.number, + maxLoanAmount: PropTypes.number, +}; + +export default LoanOptionsRow; diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js index e69de29b..819d0059 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -0,0 +1,87 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import MortgageLiabilitiesRow from './MortgageLiabilitiesRow'; + + +class MortgageLiabilities extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const headerStyle = { textAlign: 'center' }; + const header = [ + '#Debt', + 'Lender Name', + 'Monthly Service', + 'Remaining Terms', + 'Input Date', + 'Option', + ].map((title) => { + return ( + + {title} + + ); + }); + let rows = []; + + if (this.props.data !== null) { + rows = this.props.data.map((item, index) => { + return ( + + ); + }); + } + + return ( +
    +

    + Mortgage and Liabilities +

    +
    +
    + + + + {header} + + + + {rows} + +
    +
    +
    +
    +
    +   + +
    +
    +
    + ); + } +} + +MortgageLiabilities.propTypes = { + data: PropTypes.objectOf, +}; + +export default MortgageLiabilities; diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js new file mode 100644 index 00000000..1fa465ae --- /dev/null +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js @@ -0,0 +1,56 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +class MortgageLiabilitiesRow extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + return ( + + + {this.props.liabilityNum} + + + + + +
    +
    $
    + +
    + + +
    + +
    Months
    +
    + + + + + + + + + ); + } +} + +MortgageLiabilitiesRow.propTypes = { + liabilityNum: PropTypes.number, + lender: PropTypes.string, + inputDate: PropTypes.string, + monthlyService: PropTypes.number, + remainingTerm: PropTypes.number, +}; + +export default MortgageLiabilitiesRow; -- GitLab From c52f4381caf897872125e7ea9f87436f1fa997df Mon Sep 17 00:00:00 2001 From: akkking Date: Wed, 27 Mar 2019 17:39:15 -0400 Subject: [PATCH 11/79] Add Budget simulator section, debugging data rendering issue --- src/components/Blocnote/BudgetSimulator.js | 134 ++++++++++++++++++ .../Blocnote/BudgetSimulator/BugetChart.js | 0 .../Blocnote/BudgetSimulator/BugetTable.js | 89 ++++++++++++ src/containers/Blocnote/Blocnote.js | 6 +- src/routes.js | 4 + 5 files changed, 232 insertions(+), 1 deletion(-) create mode 100644 src/components/Blocnote/BudgetSimulator.js create mode 100644 src/components/Blocnote/BudgetSimulator/BugetChart.js create mode 100644 src/components/Blocnote/BudgetSimulator/BugetTable.js diff --git a/src/components/Blocnote/BudgetSimulator.js b/src/components/Blocnote/BudgetSimulator.js new file mode 100644 index 00000000..b6b66857 --- /dev/null +++ b/src/components/Blocnote/BudgetSimulator.js @@ -0,0 +1,134 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import LinkBarDetail from '../LinkBarDetail'; +import Loading from '../Loading'; +import './styles.css'; +import BugetTable from './BudgetSimulator/BugetTable'; +// import BugetChart from './BudgetSimulator/BugetChart'; +import request from '../../utils/request'; +import { getHeaders, blocnoteURL } from '../../utils/restServices'; +/* eslint-disable react/sort-comp */ + + +class BudgetSimulator extends Component { + mounted = false; + + constructor(props) { + super(props); + + this.state = { + savingPotentialList: null, + budgetLoanFirst: null, + budgetLoanOnly: null, + budgetSfFirst: null, + budgetSfMax: null, + error: false, + loading: false, + }; + } + + componentDidMount() { + this.mounted = true; + this.loadBudgetData(); + } + + loadBudgetData = () => { + this.setState({ loading: true }); + console.log(this.props); // eslint-disable-line + request(`${blocnoteURL}buildings/${this.props.buildingId}/budget/budget-data/`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + if (this.mounted) { + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.instance).length > 0) { + this.setState({ savingPotentialList: res.instance.saving_potential_list }); + this.setState({ budgetLoanFirst: res.instance.tables.budget_loan_first }); + this.setState({ budgetLoanOnly: res.instance.tables.budget_loan_only }); + this.setState({ budgetSfFirst: res.instance.tables.budget_sf_first }); + this.setState({ budgetSfMax: res.instance.tables.budget_sf_max }); + } + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + } + }); + } + + resetErrorMessage = () => { + this.setState({ error: false }); + } + + render() { + let mainContent = null; + let bugetTables = []; + const tableKeys = [ + 'budgetLoanFirst', + 'budgetLoanOnly', + 'budgetSfFirst', + 'budgetSfMax', + ]; + const tableNames = { + budgetLoanFirst: 'Budget with Loan only', + budgetLoanOnly: 'Budget with Loan first', + budgetSfFirst: 'Budget with SF first', + budgetSfMax: 'Budget with SF maximum', + }; + + if (this.props.data !== null) { + console.log(this.props.data); // eslint-disable-line + console.log(tableNames['budgetLoanFirst']); // eslint-disable-line + console.log(this.state); // eslint-disable-line + console.log(this.state['budgetLoanFirst']); // eslint-disable-line + bugetTables = tableKeys.map((tableKey) => { + return ( +
    + +
    + ); + }); + } + + if (this.state.loading) { + mainContent = ; + } else { + mainContent = ( +
    +
    + {bugetTables} +
    +
    + ); + } + + return ( +
    + + {mainContent} +
    + ); + } +} + +BudgetSimulator.propTypes = { + data: PropTypes.objectOf, + buildingId: PropTypes.string, +}; + +export default BudgetSimulator; diff --git a/src/components/Blocnote/BudgetSimulator/BugetChart.js b/src/components/Blocnote/BudgetSimulator/BugetChart.js new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Blocnote/BudgetSimulator/BugetTable.js b/src/components/Blocnote/BudgetSimulator/BugetTable.js new file mode 100644 index 00000000..6715689d --- /dev/null +++ b/src/components/Blocnote/BudgetSimulator/BugetTable.js @@ -0,0 +1,89 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +class BudgetTable extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const tableHeaderStyle = { + textAlign: 'center', + backgroundColor: '#EEEEEE', + color: '#000000', + }; + const header = [...['Savings'], ...this.props.savingPotentialList] + .map((columnName) => { + let cellValue = columnName; + if (typeof columnName !== 'string') { + cellValue *= 100; + cellValue = `${cellValue}%`; + } + return ( + + {cellValue} + + ); + }); + + let rows = []; + if (this.props.data !== null) { + rows = this.props.data.map((row) => { + const cells = row.map((cell) => { + let cellValue = cell; + if (typeof cellValue !== 'string') { + cellValue = Math.round(cellValue * 100) / 100; + cellValue = cellValue.toLocaleString(); + cellValue = `$${cellValue}`; + } + + return ( + + {cellValue} + + ); + }); + return ( + + {cells} + + ); + }); + } + + return ( +
    + + + + + + + {header} + + + + {rows} + +
    + {this.props.tableName} +
    +
    + ); + } +} + +BudgetTable.propTypes = { + tableName: PropTypes.string, + savingPotentialList: PropTypes.arrayOf, + data: PropTypes.arrayOf, +}; + +export default BudgetTable; diff --git a/src/containers/Blocnote/Blocnote.js b/src/containers/Blocnote/Blocnote.js index 18df6599..0743654b 100644 --- a/src/containers/Blocnote/Blocnote.js +++ b/src/containers/Blocnote/Blocnote.js @@ -80,7 +80,11 @@ class Blocnote extends Component { OK - Budget Simulator + + + Budget Simulator + + OK diff --git a/src/routes.js b/src/routes.js index 38b6f6f4..939876df 100644 --- a/src/routes.js +++ b/src/routes.js @@ -26,6 +26,7 @@ import BuildingReports from './containers/BuildingReports'; import Blocnote from './containers/Blocnote/Blocnote'; import FinancialInputs from './components/Blocnote/FinancialInputs'; import PreliminaryFinance from './components/Blocnote/PreliminaryFinance'; +import BudgetSimulator from './components/Blocnote/BudgetSimulator'; import Wrapper from './containers/Wrapper'; import { BGroupOverview, BGroup } from './containers/BGroup'; import NavOnly from './screens/NavOnly/NavOnly'; @@ -68,6 +69,9 @@ export default ( + + + -- GitLab From 6fbbd67118e6a70ae6fdfcfabd5f82a0521d2d8e Mon Sep 17 00:00:00 2001 From: akkking Date: Fri, 29 Mar 2019 17:57:05 -0400 Subject: [PATCH 12/79] add charts for budget simulator and preliminary finance pages --- src/components/Blocnote/BudgetSimulator.js | 31 +++++++++---------- .../Blocnote/BudgetSimulator/BugetChart.js | 0 src/components/Blocnote/PreliminaryFinance.js | 23 ++++++++++++-- .../PreliminaryFinance/BudgetGraph.js | 29 ----------------- .../EnergyExpenseSavingsProjection.js | 26 ---------------- 5 files changed, 35 insertions(+), 74 deletions(-) delete mode 100644 src/components/Blocnote/BudgetSimulator/BugetChart.js delete mode 100644 src/components/Blocnote/PreliminaryFinance/BudgetGraph.js delete mode 100644 src/components/Blocnote/PreliminaryFinance/EnergyExpenseSavingsProjection.js diff --git a/src/components/Blocnote/BudgetSimulator.js b/src/components/Blocnote/BudgetSimulator.js index b6b66857..1d505e91 100644 --- a/src/components/Blocnote/BudgetSimulator.js +++ b/src/components/Blocnote/BudgetSimulator.js @@ -4,7 +4,7 @@ import LinkBarDetail from '../LinkBarDetail'; import Loading from '../Loading'; import './styles.css'; import BugetTable from './BudgetSimulator/BugetTable'; -// import BugetChart from './BudgetSimulator/BugetChart'; +import BudgetChart from './BudgetSimulator/BudgetChart'; import request from '../../utils/request'; import { getHeaders, blocnoteURL } from '../../utils/restServices'; /* eslint-disable react/sort-comp */ @@ -22,8 +22,9 @@ class BudgetSimulator extends Component { budgetLoanOnly: null, budgetSfFirst: null, budgetSfMax: null, + budgets: null, error: false, - loading: false, + loading: true, }; } @@ -34,13 +35,11 @@ class BudgetSimulator extends Component { loadBudgetData = () => { this.setState({ loading: true }); - console.log(this.props); // eslint-disable-line request(`${blocnoteURL}buildings/${this.props.buildingId}/budget/budget-data/`, { method: 'GET', headers: getHeaders(), }).then((res) => { if (this.mounted) { - console.log(res); // eslint-disable-line if (!res.err) { if (Object.keys(res.instance).length > 0) { this.setState({ savingPotentialList: res.instance.saving_potential_list }); @@ -48,8 +47,11 @@ class BudgetSimulator extends Component { this.setState({ budgetLoanOnly: res.instance.tables.budget_loan_only }); this.setState({ budgetSfFirst: res.instance.tables.budget_sf_first }); this.setState({ budgetSfMax: res.instance.tables.budget_sf_max }); + const tables = res.instance.tables; + this.setState({ budgets: + Object.keys(tables).map(tableName => tables[tableName][0].slice(1)), + }); } - console.log(this.state); // eslint-disable-line this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); @@ -79,11 +81,9 @@ class BudgetSimulator extends Component { budgetSfMax: 'Budget with SF maximum', }; - if (this.props.data !== null) { - console.log(this.props.data); // eslint-disable-line - console.log(tableNames['budgetLoanFirst']); // eslint-disable-line - console.log(this.state); // eslint-disable-line - console.log(this.state['budgetLoanFirst']); // eslint-disable-line + if (this.state.loading) { + mainContent = ; + } else { bugetTables = tableKeys.map((tableKey) => { return (
    @@ -95,13 +95,13 @@ class BudgetSimulator extends Component {
    ); }); - } - if (this.state.loading) { - mainContent = ; - } else { mainContent = (
    +
    {bugetTables}
    @@ -116,7 +116,7 @@ class BudgetSimulator extends Component { breadcrumbs={[ { name: 'Building Overview', url: '' }, { name: 'Blocnote', url: 'blocnote' }, - { name: 'Buget Simulator', url: 'null' }, + { name: 'Budget Simulator', url: 'null' }, ]} links={[]} /> @@ -127,7 +127,6 @@ class BudgetSimulator extends Component { } BudgetSimulator.propTypes = { - data: PropTypes.objectOf, buildingId: PropTypes.string, }; diff --git a/src/components/Blocnote/BudgetSimulator/BugetChart.js b/src/components/Blocnote/BudgetSimulator/BugetChart.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/Blocnote/PreliminaryFinance.js b/src/components/Blocnote/PreliminaryFinance.js index 84acf802..8309cf3c 100644 --- a/src/components/Blocnote/PreliminaryFinance.js +++ b/src/components/Blocnote/PreliminaryFinance.js @@ -8,11 +8,12 @@ import CostEstimation from './PreliminaryFinance/CostEstimation'; import SavingEstimation from './PreliminaryFinance/SavingEstimation'; import LoanSummary from './PreliminaryFinance/LoanSummary'; import ProjectEconomics from './PreliminaryFinance/ProjectEconomics'; -// import EnergyExpenseSavingsProjection from './PreliminaryFinance/EnergyExpenseSavingsProjection'; +import SavingsScheduleChart from './PreliminaryFinance/SavingsScheduleChart'; import PriorRetrofitIncomeStatement from './PreliminaryFinance/PriorRetrofitIncomeStatement'; import PostRetrofitIncomeStatement from './PreliminaryFinance/PostRetrofitIncomeStatement'; import PriorRetrofitBalanceSheet from './PreliminaryFinance/PriorRetrofitBalanceSheet'; import PostRetrofitBalanceSheet from './PreliminaryFinance/PostRetrofitBalanceSheet'; +import BudgetChart from './PreliminaryFinance/BudgetChart'; import request from '../../utils/request'; import { getHeaders, blocnoteURL } from '../../utils/restServices'; /* eslint-disable react/sort-comp */ @@ -34,9 +35,12 @@ class PreliminaryFinance extends Component { priorBalanceSheet: null, postBalanceSheet: null, downpayment: null, + savingPotentialList: null, + budgets: null, + savingsScheduleChartData: null, successMessages: [], error: false, - loading: false, + loading: true, }; } @@ -73,6 +77,13 @@ class PreliminaryFinance extends Component { this.setState({ priorBalanceSheet: res.prior_balance_sheet }); this.setState({ postBalanceSheet: res.post_balance_sheet }); this.setState({ downpayment: res.downpayment }); + this.setState({ savingPotentialList: res.instance.saving_potential_list }); + this.setState({ savingsScheduleChartData: res }); + console.log(this.state.savingPotentialList); // eslint-disable-line + const tables = res.instance.tables; + this.setState({ budgets: + Object.keys(tables).map(tableName => tables[tableName][0].slice(1)), + }); } console.log(this.state); // eslint-disable-line @@ -109,6 +120,10 @@ class PreliminaryFinance extends Component { error={this.state.error} genericMessage="There was an error" /> +
    Scenario :   @@ -135,7 +150,9 @@ class PreliminaryFinance extends Component {
    Downpayment: {this.state.downpayment}
    - {/* */} + diff --git a/src/components/Blocnote/PreliminaryFinance/BudgetGraph.js b/src/components/Blocnote/PreliminaryFinance/BudgetGraph.js deleted file mode 100644 index 03c0d02f..00000000 --- a/src/components/Blocnote/PreliminaryFinance/BudgetGraph.js +++ /dev/null @@ -1,29 +0,0 @@ -import React, { Component } from 'react'; - - -class BudgetGraph extends Component { - constructor(props) { - super(props); - - this.state = { - successMessages: [], - error: false, - loading: false, - }; - } - - render() { - return ( -
    -
    -

     

    - -
    Not Feasible
    -
    Feasible
    -
    -
    - ); - } -} - -export default BudgetGraph; diff --git a/src/components/Blocnote/PreliminaryFinance/EnergyExpenseSavingsProjection.js b/src/components/Blocnote/PreliminaryFinance/EnergyExpenseSavingsProjection.js deleted file mode 100644 index 0492679a..00000000 --- a/src/components/Blocnote/PreliminaryFinance/EnergyExpenseSavingsProjection.js +++ /dev/null @@ -1,26 +0,0 @@ -import React, { Component } from 'react'; - - -class EnergyExpenseSavingsProjection extends Component { - constructor(props) { - super(props); - - this.state = { - successMessages: [], - error: false, - loading: false, - }; - } - - render() { - const style = { textAlign: 'center' }; - return ( -
    -

     

    - -
    - ); - } -} - -export default EnergyExpenseSavingsProjection; -- GitLab From be35acbc283723f2c4a730f5acaa2082318143dd Mon Sep 17 00:00:00 2001 From: akkking Date: Fri, 29 Mar 2019 17:57:58 -0400 Subject: [PATCH 13/79] add savings schedule chart --- .../SavingsScheduleChart.js | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 src/components/Blocnote/PreliminaryFinance/SavingsScheduleChart.js diff --git a/src/components/Blocnote/PreliminaryFinance/SavingsScheduleChart.js b/src/components/Blocnote/PreliminaryFinance/SavingsScheduleChart.js new file mode 100644 index 00000000..6cc84ecf --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/SavingsScheduleChart.js @@ -0,0 +1,77 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + BarChart, + Bar, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + Legend, + ResponsiveContainer, +} from 'recharts'; + + +class SavingsScheduleChart extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const data = []; + const chartData = this.props.chartData; + chartData.year_list.forEach((year, index) => { + data.push({ + year_label: year, + energy_expense_list: chartData.energy_expense_list[index], + total_loan_list: chartData.total_loan_list[index], + net_savings_list: chartData.net_savings_list[index], + }); + }); + + const renderBarChart = ( +
    +
    +

    + Energy Expense Savings Projection +

    + + + + + + + + + + + + +
    +
    + ); + + return renderBarChart; + } +} + +SavingsScheduleChart.propTypes = { + chartData: PropTypes.objectOf, +}; + +export default SavingsScheduleChart; -- GitLab From 14967aa6b3aa762996fce02f431af27251a3d202 Mon Sep 17 00:00:00 2001 From: akkking Date: Fri, 29 Mar 2019 17:58:21 -0400 Subject: [PATCH 14/79] add missing files --- .../Blocnote/BudgetSimulator/BudgetChart.js | 92 +++++++++++++++++++ .../PreliminaryFinance/BudgetChart.js | 92 +++++++++++++++++++ .../Blocnote/PreliminaryFinance/test.js | 53 +++++++++++ 3 files changed, 237 insertions(+) create mode 100644 src/components/Blocnote/BudgetSimulator/BudgetChart.js create mode 100644 src/components/Blocnote/PreliminaryFinance/BudgetChart.js create mode 100644 src/components/Blocnote/PreliminaryFinance/test.js diff --git a/src/components/Blocnote/BudgetSimulator/BudgetChart.js b/src/components/Blocnote/BudgetSimulator/BudgetChart.js new file mode 100644 index 00000000..5f5708d3 --- /dev/null +++ b/src/components/Blocnote/BudgetSimulator/BudgetChart.js @@ -0,0 +1,92 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + LineChart, + Line, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + Legend, + ResponsiveContainer, +} from 'recharts'; + + +class BudgetChart extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const data = []; + this.props.savingPotentialList.forEach((saving, index) => { + data.push({ + x_name: `${saving * 100}%`, + loan_only: this.props.budgets[0][index], + loan_first: this.props.budgets[1][index], + sf_first: this.props.budgets[2][index], + sf_max: this.props.budgets[3][index], + }); + }); + + const CustomizedLabel = React.createClass({ + render() { + const { x, y, stroke, value } = this.props; + + return ( + + {value} + + ); + }, + }); + + const renderLineChart = ( +
    +
    + + + + + + + } /> + + + + + + +
    +
    + ); + + return renderLineChart; + } +} + +BudgetChart.propTypes = { + x: PropTypes.number, + y: PropTypes.number, + stroke: PropTypes.number, + value: PropTypes.number, + savingPotentialList: PropTypes.arrayOf, + budgets: PropTypes.arrayOf, +}; + +export default BudgetChart; diff --git a/src/components/Blocnote/PreliminaryFinance/BudgetChart.js b/src/components/Blocnote/PreliminaryFinance/BudgetChart.js new file mode 100644 index 00000000..5f5708d3 --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/BudgetChart.js @@ -0,0 +1,92 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + LineChart, + Line, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + Legend, + ResponsiveContainer, +} from 'recharts'; + + +class BudgetChart extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const data = []; + this.props.savingPotentialList.forEach((saving, index) => { + data.push({ + x_name: `${saving * 100}%`, + loan_only: this.props.budgets[0][index], + loan_first: this.props.budgets[1][index], + sf_first: this.props.budgets[2][index], + sf_max: this.props.budgets[3][index], + }); + }); + + const CustomizedLabel = React.createClass({ + render() { + const { x, y, stroke, value } = this.props; + + return ( + + {value} + + ); + }, + }); + + const renderLineChart = ( +
    +
    + + + + + + + } /> + + + + + + +
    +
    + ); + + return renderLineChart; + } +} + +BudgetChart.propTypes = { + x: PropTypes.number, + y: PropTypes.number, + stroke: PropTypes.number, + value: PropTypes.number, + savingPotentialList: PropTypes.arrayOf, + budgets: PropTypes.arrayOf, +}; + +export default BudgetChart; diff --git a/src/components/Blocnote/PreliminaryFinance/test.js b/src/components/Blocnote/PreliminaryFinance/test.js new file mode 100644 index 00000000..ba2a8baf --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/test.js @@ -0,0 +1,53 @@ +import React, { PureComponent } from 'react'; +import { + BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, +} from 'recharts'; + +const data = [ + { + name: 'Page A', uv: 4000, pv: 2400, amt: 2400, + }, + { + name: 'Page B', uv: 3000, pv: 1398, amt: 2210, + }, + { + name: 'Page C', uv: 2000, pv: 9800, amt: 2290, + }, + { + name: 'Page D', uv: 2780, pv: 3908, amt: 2000, + }, + { + name: 'Page E', uv: 1890, pv: 4800, amt: 2181, + }, + { + name: 'Page F', uv: 2390, pv: 3800, amt: 2500, + }, + { + name: 'Page G', uv: 3490, pv: 4300, amt: 2100, + }, +]; + +export default class Example extends PureComponent { + static jsfiddleUrl = 'https://jsfiddle.net/alidingling/30763kr7/'; + + render() { + return ( + + + + + + + + + + ); + } +} -- GitLab From c84a178083096deefef5b4c98299de2e183708b4 Mon Sep 17 00:00:00 2001 From: akkking Date: Mon, 1 Apr 2019 16:20:52 -0400 Subject: [PATCH 15/79] Update chart label format, fix landing page status column --- .../Blocnote/BudgetSimulator/BudgetChart.js | 8 +- src/components/Blocnote/PreliminaryFinance.js | 26 ++- .../PreliminaryFinance/BudgetChart.js | 8 +- .../SavingsScheduleChart.js | 6 +- src/containers/Blocnote/Blocnote.js | 158 ++++++++++++------ 5 files changed, 140 insertions(+), 66 deletions(-) diff --git a/src/components/Blocnote/BudgetSimulator/BudgetChart.js b/src/components/Blocnote/BudgetSimulator/BudgetChart.js index 5f5708d3..02a86f80 100644 --- a/src/components/Blocnote/BudgetSimulator/BudgetChart.js +++ b/src/components/Blocnote/BudgetSimulator/BudgetChart.js @@ -62,10 +62,10 @@ class BudgetChart extends Component { paddingTop: '25px', }} /> - - - - } /> + + + + } /> diff --git a/src/components/Blocnote/PreliminaryFinance.js b/src/components/Blocnote/PreliminaryFinance.js index 8309cf3c..a754fcb9 100644 --- a/src/components/Blocnote/PreliminaryFinance.js +++ b/src/components/Blocnote/PreliminaryFinance.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; import LinkBarDetail from '../LinkBarDetail'; import ErrorAlert from '../ErrorAlert'; import Loading from '../Loading'; @@ -38,6 +39,7 @@ class PreliminaryFinance extends Component { savingPotentialList: null, budgets: null, savingsScheduleChartData: null, + dropdownOpen: false, successMessages: [], error: false, loading: true, @@ -108,6 +110,12 @@ class PreliminaryFinance extends Component { this.setState({ error: false }); } + toggle = () => { + this.setState(prevState => ({ + dropdownOpen: !prevState.dropdownOpen, + })); + } + render() { let mainContent = null; @@ -129,13 +137,27 @@ class PreliminaryFinance extends Component { Scenario :  
    -
    + + + Dropdown + + + Header + Some Action + Action (disabled) + + Foo Action + Bar Action + Quo Action + + + {/*
    -
    +
    */}
    diff --git a/src/components/Blocnote/PreliminaryFinance/BudgetChart.js b/src/components/Blocnote/PreliminaryFinance/BudgetChart.js index 5f5708d3..51129391 100644 --- a/src/components/Blocnote/PreliminaryFinance/BudgetChart.js +++ b/src/components/Blocnote/PreliminaryFinance/BudgetChart.js @@ -62,10 +62,10 @@ class BudgetChart extends Component { paddingTop: '25px', }} /> - - - - } /> + + + + } /> diff --git a/src/components/Blocnote/PreliminaryFinance/SavingsScheduleChart.js b/src/components/Blocnote/PreliminaryFinance/SavingsScheduleChart.js index 6cc84ecf..97167c60 100644 --- a/src/components/Blocnote/PreliminaryFinance/SavingsScheduleChart.js +++ b/src/components/Blocnote/PreliminaryFinance/SavingsScheduleChart.js @@ -53,9 +53,9 @@ class SavingsScheduleChart extends Component { paddingTop: '25px', }} /> - - - + + + diff --git a/src/containers/Blocnote/Blocnote.js b/src/containers/Blocnote/Blocnote.js index 0743654b..261b6690 100644 --- a/src/containers/Blocnote/Blocnote.js +++ b/src/containers/Blocnote/Blocnote.js @@ -1,57 +1,99 @@ import React, { Component } from 'react'; -// import PropTypes from 'prop-types'; -// import { connect } from 'react-redux'; -// import { bindActionCreators } from 'redux'; import { Link } from 'react-router'; -// import { -// Tooltip, ResponsiveContainer, -// PieChart, Pie, Cell, -// } from 'recharts'; - import LinkBarDetail from '../../components/LinkBarDetail'; import buildingDetailPropTypes from '../../containers/Building/propTypes'; -// import { -// loadScenario, -// } from './actions'; -// import envelopeProps from './propTypes'; import './styles.css'; +import { + blocnoteURL, + getHeaders, +} from '../../utils/restServices'; +import request from '../../utils/request'; +import Loading from '../../components/Loading'; -// const COLORS = ['#40B1F0', '#FF4906', '#06FFC6', '#FFC606', '#C606FF']; class Blocnote extends Component { - static isDataLoaded(obj, inKey) { - let dataKey = 'data'; - if (inKey !== undefined) { - dataKey = inKey; - } - return !obj.loading && !obj.error && - obj[dataKey] !== undefined && obj[dataKey] !== null && - obj[dataKey].length > 0; - } - constructor(props) { super(props); this.state = { + financialInputsData: { name: null, status: null }, + preliminaryFinanceData: { name: null, status: null }, + budgetSimilatorData: { name: null, status: null }, + loading: true, }; } - render() { - const rootURL = `/buildings/${this.props.building.building_id}`; + componentDidMount() { + this.loadData(this.props.building.building_id); + } - return ( -
    - + loadData = (buildingId) => { + request(`${blocnoteURL}buildings/${buildingId}/data/`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.instance).length > 0) { + const rootURL = `/buildings/${this.props.building.building_id}`; + + if (res.instance.if_completed) { + this.state.financialInputsData.name = ( + Financial Inputs + ); + this.state.financialInputsData.status = (Complete); + this.state.preliminaryFinanceData.name = ( + Preliminary Finance + ); + this.state.preliminaryFinanceData.status = (OK); + this.state.budgetSimilatorData.name = ( + Budget Simulator + ); + this.state.budgetSimilatorData.status = (OK); + } else { + this.state.financialInputsData.name = ( + Financial Inputs + ); + if (res.instance.if_started) { + this.state.financialInputsData.status = (Started but not complete.); + } else { + this.state.financialInputsData.status = (Not Started.); + } + this.state.preliminaryFinanceData.name = (Preliminary Finance); + const prelimItems = res.instance.not_saved_list_for_prelim.map((item) => { + return (
  • Please fill {{ item }}
  • ); + }); + this.state.preliminaryFinanceData.status = (
      {prelimItems}
    ); + + if (res.instance.if_completed_for_budget) { + this.state.budgetSimilatorData.name = ( + Budget Simulator + ); + this.state.budgetSimilatorData.status = (OK); + } else { + this.state.budgetSimilatorData.name = (Budget Simulator); + const budgetItems = res.instance.not_saved_list_for_budget.map((item) => { + return (
  • Please fill {{ item }}
  • ); + }); + this.state.budgetSimilatorData.status = (
      {budgetItems}
    ); + } + } + } + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + }); + } + + render() { + let mainContent = null; + if (this.state.loading) { + mainContent = ; + } else { + mainContent = (
    - {/* Map, Construction table & run-sim btn */}
    @@ -65,38 +107,48 @@ class Blocnote extends Component { - - Financial Inputs - + {this.state.financialInputsData.name} + + + {this.state.financialInputsData.status} - Complete - - Preliminary Finance - + {this.state.preliminaryFinanceData.name} + + + {this.state.preliminaryFinanceData.status} - OK - - Budget Simulator - + {this.state.budgetSimilatorData.name} + + + {this.state.budgetSimilatorData.status} - OK -
    {/* table */} -
    -
    -   +
    + + ); + } - {/* Container */} + return ( +
    + + {mainContent}
    ); } -- GitLab From b489daf59923acbd3b9fff9ad5173926acc541f3 Mon Sep 17 00:00:00 2001 From: akkking Date: Mon, 1 Apr 2019 18:30:11 -0400 Subject: [PATCH 16/79] Update financial inputs page --- .../FinancialInputs/BillsSummaryTable.js | 33 ++-- .../Blocnote/FinancialInputs/CashBalance.js | 2 +- .../FinancialInputs/CashBalanceRow.js | 10 +- .../FinancialInputs/EnergyBillsOverview.js | 23 ++- .../Blocnote/FinancialInputs/GeneralInputs.js | 178 +++++++++++------- .../Blocnote/FinancialInputs/LoanOptions.js | 2 +- .../FinancialInputs/MortgageLiabilities.js | 2 +- 7 files changed, 159 insertions(+), 91 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js index c6c15b5e..d7b429ee 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -15,9 +15,9 @@ class BillsSummaryTable extends Component { render() { const tableHeaderStyle = { - textAlign: 'center', - backgroundColor: '#EEEEEE', - color: '#000000', + textAlign: 'left', + // backgroundColor: '#DDDDDD', + // color: '#FFFFFF', }; let rows = []; @@ -25,14 +25,30 @@ class BillsSummaryTable extends Component { rows = this.props.billData.map((item) => { let charge = Math.round(item.charge * 100) / 100; charge = charge.toLocaleString(); - charge = `$${charge}`; return ( - +
    +
    Year
    + +
    - +
    +
    $
    + +
    @@ -66,11 +82,6 @@ class BillsSummaryTable extends Component { {this.props.billName} Annual Charge - - Year - Charge ($) -   - {rows} diff --git a/src/components/Blocnote/FinancialInputs/CashBalance.js b/src/components/Blocnote/FinancialInputs/CashBalance.js index 87563f94..98165fe4 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalance.js +++ b/src/components/Blocnote/FinancialInputs/CashBalance.js @@ -23,7 +23,7 @@ class CashBalance extends Component { 'Balance Sheet', 'Option'].map((title) => { return ( - + {title} ); diff --git a/src/components/Blocnote/FinancialInputs/CashBalanceRow.js b/src/components/Blocnote/FinancialInputs/CashBalanceRow.js index 7b41f174..20737904 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalanceRow.js +++ b/src/components/Blocnote/FinancialInputs/CashBalanceRow.js @@ -16,22 +16,22 @@ class CashBalanceRow extends Component { render() { return ( - + {this.props.statementNum} - +
    $
    - + - + - + diff --git a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js index ca830de9..0481d460 100644 --- a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js +++ b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js @@ -1,18 +1,26 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; class EnergyBillsOverview extends Component { constructor(props) { super(props); - + this.toggle = this.toggle.bind(this); this.state = { successMessages: [], error: false, loading: false, + dropdownOpen: false, }; } + toggle() { + this.setState(prevState => ({ + dropdownOpen: !prevState.dropdownOpen, + })); + } + buildHeader = (headerNames) => { return [...headerNames, ...Object.keys(this.props.data.electric)].map((name) => { return ( @@ -79,10 +87,15 @@ class EnergyBillsOverview extends Component {
    - + + + Select Estimation + + + Fancy Estimation + Rough Estimation + +
    +
    +
    +
    +
    +
    + +
    +
    +
    + ); } diff --git a/src/components/Blocnote/FinancialInputs/LoanOptions.js b/src/components/Blocnote/FinancialInputs/LoanOptions.js index f2dc01a5..d22d8254 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptions.js @@ -25,7 +25,7 @@ class LoanOptions extends Component { 'Option', ].map((title) => { return ( - + {title} ); diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js index 819d0059..0c25119a 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -25,7 +25,7 @@ class MortgageLiabilities extends Component { 'Option', ].map((title) => { return ( - + {title} ); -- GitLab From 18913af7abf17ac21defae4f9fee8a194447f47d Mon Sep 17 00:00:00 2001 From: akkking Date: Tue, 2 Apr 2019 01:05:15 -0400 Subject: [PATCH 17/79] UI refactoring for financial Inputs page --- .../Blocnote/FinancialInputs/BillsSummary.js | 8 +- .../FinancialInputs/BillsSummaryTable.js | 14 ++- .../Blocnote/FinancialInputs/CashBalance.js | 19 ++-- .../FinancialInputs/CustomerPreference.js | 13 ++- .../Blocnote/FinancialInputs/EnergyBills.js | 103 ++++++++++++++---- .../FinancialInputs/EnergyBillsOverview.js | 37 +++++-- .../Blocnote/FinancialInputs/GeneralInputs.js | 13 ++- .../FinancialInputs/IncomeStatements.js | 60 +++++++--- .../Blocnote/FinancialInputs/LoanOptions.js | 95 +++++++++------- .../FinancialInputs/MortgageLiabilities.js | 19 ++-- 10 files changed, 259 insertions(+), 122 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/BillsSummary.js b/src/components/Blocnote/FinancialInputs/BillsSummary.js index 7785b908..078215fb 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummary.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummary.js @@ -15,7 +15,7 @@ class BillsSummary extends Component { } render() { - const headerStyle = { textAlign: 'center' }; + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const BillsSummaryTables = []; if (this.props.data !== null) { @@ -32,10 +32,10 @@ class BillsSummary extends Component { } return ( -
    -

    +
    +

    Bills Summary -

    +

    {BillsSummaryTables}
    diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js index d7b429ee..88cfcd87 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Button, +} from 'reactstrap'; class BillsSummaryTable extends Component { @@ -50,8 +53,9 @@ class BillsSummaryTable extends Component { />
    - - + + {' '} + ); @@ -64,10 +68,8 @@ class BillsSummaryTable extends Component { - - + + {' '} ); diff --git a/src/components/Blocnote/FinancialInputs/CashBalance.js b/src/components/Blocnote/FinancialInputs/CashBalance.js index 98165fe4..993fe3e9 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalance.js +++ b/src/components/Blocnote/FinancialInputs/CashBalance.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Button, +} from 'reactstrap'; import CashBalanceRow from './CashBalanceRow'; @@ -15,7 +18,7 @@ class CashBalance extends Component { } render() { - const headerStyle = { textAlign: 'center' }; + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const header = [ '#Statement', 'Balance Amount', @@ -44,10 +47,10 @@ class CashBalance extends Component { } return ( -
    -

    +
    +

    Cash Balance -

    +

    @@ -64,12 +67,12 @@ class CashBalance extends Component {
    -   -   + +
    diff --git a/src/components/Blocnote/FinancialInputs/CustomerPreference.js b/src/components/Blocnote/FinancialInputs/CustomerPreference.js index 9d8ad39e..b5b78ea6 100644 --- a/src/components/Blocnote/FinancialInputs/CustomerPreference.js +++ b/src/components/Blocnote/FinancialInputs/CustomerPreference.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Button, +} from 'reactstrap'; class CustomerPreference extends Component { @@ -14,7 +17,7 @@ class CustomerPreference extends Component { } render() { - const headerStyle = { textAlign: 'center' }; + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const header = [ 'Preference', 'Value (if values is not known, please leave it blank)', @@ -96,9 +99,9 @@ class CustomerPreference extends Component { return (
    -

    +

    Customer Preference -

    +
    @@ -115,9 +118,9 @@ class CustomerPreference extends Component {
    - +
    diff --git a/src/components/Blocnote/FinancialInputs/EnergyBills.js b/src/components/Blocnote/FinancialInputs/EnergyBills.js index d1b0fcd1..1020b8fb 100644 --- a/src/components/Blocnote/FinancialInputs/EnergyBills.js +++ b/src/components/Blocnote/FinancialInputs/EnergyBills.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; // import PropTypes from 'prop-types'; - +import { + Table, +} from 'reactstrap'; class EnergyBills extends Component { constructor(props) { @@ -14,34 +16,87 @@ class EnergyBills extends Component { } render() { - const headerStyle = { textAlign: 'center' }; - const activeBillTab = { - backgroundColor: '#DDDDDD', - color: '#000000', - padding: '10px 15px 10px 15px', - }; - const inactiveBillTab = { - backgroundColor: '#FFFFFF', - color: '#000000', - padding: '10px 15px 10px 15px', - }; + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; + // const activeBillTab = { + // backgroundColor: '#DDDDDD', + // color: '#000000', + // padding: '10px 15px 10px 15px', + // }; + // const inactiveBillTab = { + // backgroundColor: '#FFFFFF', + // color: '#000000', + // padding: '10px 15px 10px 15px', + // }; return ( -
    -

    +
    +

    Energy Bills -

    +

    -
    -
    ➤ Electricity
    -
    ➤ Gas
    -
    ➤ Oil
    -
    ➤ Water
    +
    +
    + + + + + + + + + + +
    Electricity
    + No Bills available +
    +
    +
    + + + + + + + + + + + +
    Gas
    + No Bills available +
    +
    +
    + + + + + + + + + + + +
    Oil
    + No Bills available +
    -
    -
    - No Bills available -
    +
    + + + + + + + + + + + +
    Water
    + No Bills available +
    diff --git a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js index 0481d460..eec7f455 100644 --- a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js +++ b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js @@ -1,6 +1,12 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; +import { + Dropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + Button, +} from 'reactstrap'; class EnergyBillsOverview extends Component { @@ -30,7 +36,13 @@ class EnergyBillsOverview extends Component { } buildFooter = (footerNames) => { - return [...footerNames, ...Object.values(this.props.data.electric)].map((name) => { + const cellValues = Object.values(this.props.data.total_annual_charge).map((amount) => { + let cellValue = amount; + cellValue = Math.round(cellValue * 100) / 100; + cellValue = cellValue.toLocaleString(); + return `$${cellValue}`; + }); + return [...footerNames, ...cellValues].map((name) => { return ( {name} ); @@ -38,7 +50,7 @@ class EnergyBillsOverview extends Component { } render() { - const headerStyle = { textAlign: 'center' }; + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const validBillNames = ['electric', 'water', 'gas', 'oil']; let header = []; let footer = []; @@ -53,11 +65,14 @@ class EnergyBillsOverview extends Component { rows = Object.keys(this.props.data) .filter(billName => validBillNames.includes(billName)) .map((billName) => { - const cells = [...['Annual Estimate ($)', billName], ...Object.values(this.props.data[billName])]; + const cells = [ + ...['Annual Estimate', billName.charAt(0).toUpperCase() + billName.slice(1)], + ...Object.values(this.props.data[billName]), + ]; const cellsData = Object.values(cells).map((amount) => { let cellValue = amount; - if (typeof (cellValue) !== 'string') { + if (!isNaN(cellValue)) { cellValue = Math.round(cellValue * 100) / 100; cellValue = cellValue.toLocaleString(); cellValue = `$${cellValue}`; @@ -81,12 +96,12 @@ class EnergyBillsOverview extends Component { } return ( -
    -

    +
    +

    Energy Bills Overview -

    +

    -
    +
    Select Estimation @@ -98,9 +113,9 @@ class EnergyBillsOverview extends Component {
    - +
    diff --git a/src/components/Blocnote/FinancialInputs/GeneralInputs.js b/src/components/Blocnote/FinancialInputs/GeneralInputs.js index 43c646f4..9f07fde7 100644 --- a/src/components/Blocnote/FinancialInputs/GeneralInputs.js +++ b/src/components/Blocnote/FinancialInputs/GeneralInputs.js @@ -1,5 +1,10 @@ import React, { Component } from 'react'; -import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; +import { Dropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + Button, +} from 'reactstrap'; class GeneralInputs extends Component { @@ -66,7 +71,7 @@ class GeneralInputs extends Component {
    -
    +
    Select a Fund @@ -121,9 +126,9 @@ class GeneralInputs extends Component {
    - +
    diff --git a/src/components/Blocnote/FinancialInputs/IncomeStatements.js b/src/components/Blocnote/FinancialInputs/IncomeStatements.js index c5fa5c72..ae478a9d 100644 --- a/src/components/Blocnote/FinancialInputs/IncomeStatements.js +++ b/src/components/Blocnote/FinancialInputs/IncomeStatements.js @@ -1,11 +1,18 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Dropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + Button, +} from 'reactstrap'; class IncomeStatements extends Component { constructor(props) { super(props); - + this.toggle = this.toggle.bind(this); this.state = { successMessages: [], error: false, @@ -13,6 +20,13 @@ class IncomeStatements extends Component { }; } + toggle() { + this.setState(prevState => ({ + dropdownOpen: !prevState.dropdownOpen, + })); + } + + buildHeader = (headerNames) => { return [ ...headerNames, @@ -27,7 +41,7 @@ class IncomeStatements extends Component { } render() { - const headerStyle = { textAlign: 'center' }; + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; let header = []; let rows = []; @@ -110,22 +124,42 @@ class IncomeStatements extends Component { } return ( -
    -

    +
    +

    Income Statements (in $, End of Year) -

    +

    -
    - Selected Growth Rate   - +
    + + + Selected Growth Rate + + + 0% + % + 1% + 3% + 4% + 5% + 6% + 7% + 8% + 9% + 10% + 11% + 12% + 13% + 14% + 15% + Average + CAGR=1.58% + +
    - +
    diff --git a/src/components/Blocnote/FinancialInputs/LoanOptions.js b/src/components/Blocnote/FinancialInputs/LoanOptions.js index d22d8254..54f592af 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptions.js @@ -1,5 +1,12 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Button, + FormGroup, + Label, + Col, + Input, +} from 'reactstrap'; import LoanOptionsRow from './LoanOptionsRow'; @@ -15,7 +22,7 @@ class LoanOptions extends Component { } render() { - const headerStyle = { textAlign: 'center' }; + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const header = [ 'Loan Options', 'Lender', @@ -47,47 +54,57 @@ class LoanOptions extends Component { } return ( -
    -

    +
    +

    Loan Options -

    +

    - + + + + - - + + + + @@ -103,12 +120,12 @@ class LoanOptions extends Component {
    -   -   + +
    diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js index 0c25119a..c0c524bf 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Button, +} from 'reactstrap'; import MortgageLiabilitiesRow from './MortgageLiabilitiesRow'; @@ -15,7 +18,7 @@ class MortgageLiabilities extends Component { } render() { - const headerStyle = { textAlign: 'center' }; + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const header = [ '#Debt', 'Lender Name', @@ -47,10 +50,10 @@ class MortgageLiabilities extends Component { } return ( -
    -

    +
    +

    Mortgage and Liabilities -

    +

    -
    - - +
    +
    +
    + + +
    -
    - - +
    +
    + + +
    @@ -67,12 +70,12 @@ class MortgageLiabilities extends Component {
    -   -   + +
    -- GitLab From 71f19138c9d03ece582679702bc620917c2098a1 Mon Sep 17 00:00:00 2001 From: akkking Date: Tue, 2 Apr 2019 01:06:46 -0400 Subject: [PATCH 18/79] Update loan sequence --- src/components/Blocnote/FinancialInputs/LoanOptions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Blocnote/FinancialInputs/LoanOptions.js b/src/components/Blocnote/FinancialInputs/LoanOptions.js index 54f592af..ccac5f09 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptions.js @@ -43,7 +43,7 @@ class LoanOptions extends Component { loans = this.props.loans.map((loan, index) => { return ( Date: Tue, 2 Apr 2019 12:52:05 -0400 Subject: [PATCH 19/79] Update FinancialInputs, PreliminaryFinance, BudgetSimulator components --- src/components/Blocnote/BudgetSimulator.js | 2 + .../Blocnote/BudgetSimulator/BudgetChart.js | 47 ++++--- .../Blocnote/BudgetSimulator/BugetTable.js | 8 +- src/components/Blocnote/FinancialInputs.js | 42 +++++- .../FinancialInputs/BillsSummaryTable.js | 5 +- .../Blocnote/FinancialInputs/CashBalance.js | 12 +- .../FinancialInputs/CustomerPreference.js | 12 +- .../Blocnote/FinancialInputs/EnergyBills.js | 34 ++--- .../FinancialInputs/EnergyBillsOverview.js | 5 +- .../Blocnote/FinancialInputs/GeneralInputs.js | 36 ++--- .../FinancialInputs/IncomeStatements.js | 12 +- .../Blocnote/FinancialInputs/LoanOptions.js | 12 +- .../FinancialInputs/LoanOptionsRow.js | 20 ++- .../FinancialInputs/MortgageLiabilities.js | 12 +- .../FinancialInputs/MortgageLiabilitiesRow.js | 21 +-- src/components/Blocnote/PreliminaryFinance.js | 123 ++++++++---------- .../PreliminaryFinance/BudgetChart.js | 50 ++++--- .../PreliminaryFinance/CostEstimation.js | 32 +++-- .../PreliminaryFinance/CostEstimationRow.js | 14 +- .../PreliminaryFinance/DownPayment.js | 36 +++++ .../PreliminaryFinance/LoanSummary.js | 16 ++- .../PostRetrofitBalanceSheet.js | 20 ++- .../PostRetrofitIncomeStatement.js | 16 ++- .../PriorRetrofitBalanceSheet.js | 20 ++- .../PriorRetrofitIncomeStatement.js | 16 ++- .../PreliminaryFinance/ProjectEconomics.js | 9 +- .../PreliminaryFinance/SaveScenario.js | 49 +++++++ .../PreliminaryFinance/SavingEstimation.js | 38 ++++-- .../PreliminaryFinance/SavingEstimationRow.js | 35 +++-- .../SavingsScheduleChart.js | 52 ++++---- .../PreliminaryFinance/SelectScenario.js | 45 +++++++ 31 files changed, 547 insertions(+), 304 deletions(-) create mode 100644 src/components/Blocnote/PreliminaryFinance/DownPayment.js create mode 100644 src/components/Blocnote/PreliminaryFinance/SaveScenario.js create mode 100644 src/components/Blocnote/PreliminaryFinance/SelectScenario.js diff --git a/src/components/Blocnote/BudgetSimulator.js b/src/components/Blocnote/BudgetSimulator.js index 1d505e91..7fdd05ef 100644 --- a/src/components/Blocnote/BudgetSimulator.js +++ b/src/components/Blocnote/BudgetSimulator.js @@ -68,6 +68,7 @@ class BudgetSimulator extends Component { render() { let mainContent = null; let bugetTables = []; + const blockStyle = { marginBottom: '40px' }; const tableKeys = [ 'budgetLoanFirst', 'budgetLoanOnly', @@ -101,6 +102,7 @@ class BudgetSimulator extends Component {
    {bugetTables} diff --git a/src/components/Blocnote/BudgetSimulator/BudgetChart.js b/src/components/Blocnote/BudgetSimulator/BudgetChart.js index 02a86f80..516b8e71 100644 --- a/src/components/Blocnote/BudgetSimulator/BudgetChart.js +++ b/src/components/Blocnote/BudgetSimulator/BudgetChart.js @@ -48,31 +48,29 @@ class BudgetChart extends Component { }); const renderLineChart = ( -
    -
    - - + + + - - - - - } /> - - - - - - -
    + /> + + + + } /> + + + + + +
    ); @@ -87,6 +85,7 @@ BudgetChart.propTypes = { value: PropTypes.number, savingPotentialList: PropTypes.arrayOf, budgets: PropTypes.arrayOf, + blockStyle: PropTypes.string, }; export default BudgetChart; diff --git a/src/components/Blocnote/BudgetSimulator/BugetTable.js b/src/components/Blocnote/BudgetSimulator/BugetTable.js index 6715689d..85f575ee 100644 --- a/src/components/Blocnote/BudgetSimulator/BugetTable.js +++ b/src/components/Blocnote/BudgetSimulator/BugetTable.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Table, +} from 'reactstrap'; class BudgetTable extends Component { @@ -18,6 +21,7 @@ class BudgetTable extends Component { textAlign: 'center', backgroundColor: '#EEEEEE', color: '#000000', + fontWeight: 'bold', }; const header = [...['Savings'], ...this.props.savingPotentialList] .map((columnName) => { @@ -60,7 +64,7 @@ class BudgetTable extends Component { return (
    -
    +
    {rows} -
    @@ -74,7 +78,7 @@ class BudgetTable extends Component {
    +
    ); } diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js index c81d3bec..b599778e 100644 --- a/src/components/Blocnote/FinancialInputs.js +++ b/src/components/Blocnote/FinancialInputs.js @@ -215,6 +215,8 @@ class FinancialInputs extends Component { render() { let mainContent = null; + const blockStyle = { marginBottom: '40px' }; + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; if (this.state.loading) { mainContent = ; @@ -226,18 +228,46 @@ class FinancialInputs extends Component { genericMessage="There was an error" /> - - - - - - + + + + + +
    diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js index 88cfcd87..d8178768 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Button, + Table, } from 'reactstrap'; @@ -77,7 +78,7 @@ class BillsSummaryTable extends Component { return (
    - +
    {rows} -
    @@ -88,7 +89,7 @@ class BillsSummaryTable extends Component {
    +
    ); } diff --git a/src/components/Blocnote/FinancialInputs/CashBalance.js b/src/components/Blocnote/FinancialInputs/CashBalance.js index 993fe3e9..c8f0005d 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalance.js +++ b/src/components/Blocnote/FinancialInputs/CashBalance.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Button, + Table, } from 'reactstrap'; import CashBalanceRow from './CashBalanceRow'; @@ -18,7 +19,6 @@ class CashBalance extends Component { } render() { - const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const header = [ '#Statement', 'Balance Amount', @@ -47,13 +47,13 @@ class CashBalance extends Component { } return ( -
    -

    +
    +

    Cash Balance

    - +
    {header} @@ -62,7 +62,7 @@ class CashBalance extends Component { {rows} -
    +
    @@ -81,6 +81,8 @@ class CashBalance extends Component { } CashBalance.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, data: PropTypes.objectOf, }; diff --git a/src/components/Blocnote/FinancialInputs/CustomerPreference.js b/src/components/Blocnote/FinancialInputs/CustomerPreference.js index b5b78ea6..9f6bad27 100644 --- a/src/components/Blocnote/FinancialInputs/CustomerPreference.js +++ b/src/components/Blocnote/FinancialInputs/CustomerPreference.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Button, + Table, } from 'reactstrap'; @@ -17,7 +18,6 @@ class CustomerPreference extends Component { } render() { - const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const header = [ 'Preference', 'Value (if values is not known, please leave it blank)', @@ -98,13 +98,13 @@ class CustomerPreference extends Component { } return ( -
    -

    +
    +

    Customer Preference

    - +
    {header} @@ -113,7 +113,7 @@ class CustomerPreference extends Component { {rows} -
    +
    @@ -129,6 +129,8 @@ class CustomerPreference extends Component { } CustomerPreference.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, data: PropTypes.objectOf, }; diff --git a/src/components/Blocnote/FinancialInputs/EnergyBills.js b/src/components/Blocnote/FinancialInputs/EnergyBills.js index 1020b8fb..f8ee4bcf 100644 --- a/src/components/Blocnote/FinancialInputs/EnergyBills.js +++ b/src/components/Blocnote/FinancialInputs/EnergyBills.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -// import PropTypes from 'prop-types'; +import PropTypes from 'prop-types'; import { Table, } from 'reactstrap'; @@ -16,26 +16,14 @@ class EnergyBills extends Component { } render() { - const headerStyle = { textAlign: 'left', marginBottom: '25px' }; - // const activeBillTab = { - // backgroundColor: '#DDDDDD', - // color: '#000000', - // padding: '10px 15px 10px 15px', - // }; - // const inactiveBillTab = { - // backgroundColor: '#FFFFFF', - // color: '#000000', - // padding: '10px 15px 10px 15px', - // }; - return ( -
    -

    +
    +

    Energy Bills

    - +
    @@ -51,7 +39,7 @@ class EnergyBills extends Component {
    Electricity
    - +
    @@ -67,7 +55,7 @@ class EnergyBills extends Component {
    Gas
    - +
    @@ -83,7 +71,7 @@ class EnergyBills extends Component {
    Oil
    - +
    @@ -104,8 +92,10 @@ class EnergyBills extends Component { } } -// EnergyBills.propTypes = { -// data: PropTypes.objectOf, -// }; +EnergyBills.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, + // data: PropTypes.objectOf, +}; export default EnergyBills; diff --git a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js index eec7f455..af783261 100644 --- a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js +++ b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js @@ -6,6 +6,7 @@ import { DropdownMenu, DropdownItem, Button, + Table, } from 'reactstrap'; @@ -120,7 +121,7 @@ class EnergyBillsOverview extends Component {
    -
    Water
    +
    {header} @@ -130,7 +131,7 @@ class EnergyBillsOverview extends Component { {rows} {footer} -
    +
    diff --git a/src/components/Blocnote/FinancialInputs/GeneralInputs.js b/src/components/Blocnote/FinancialInputs/GeneralInputs.js index 9f07fde7..a3ed4feb 100644 --- a/src/components/Blocnote/FinancialInputs/GeneralInputs.js +++ b/src/components/Blocnote/FinancialInputs/GeneralInputs.js @@ -26,26 +26,26 @@ class GeneralInputs extends Component { } render() { - const lineSpaceStyle = { marginBottom: '10px' }; + const lineSpaceStyle = { marginBottom: '10px', textAlign: 'left' }; return (
    -
    +
    Pro Forma Start date
    -
    +
    -
    +
    Pro Forma Duration (years)
    -
    +
    -
    +
    Analysis Date
    -
    +
    -
    -
    +
    +
    Select a Fund - + No Fund Small Commercial Fund Bronx Healthy Buildings Fund @@ -87,28 +87,28 @@ class GeneralInputs extends Component {
    -
    +
    Anticipated Construction Start Date
    -
    +
    -
    +
    Anticipated Commissioning Date
    -
    +
    -
    +
    Anticipated Construction Period
    -
    +
    -
    -
    +
    +
    diff --git a/src/components/Blocnote/FinancialInputs/IncomeStatements.js b/src/components/Blocnote/FinancialInputs/IncomeStatements.js index ae478a9d..241fde80 100644 --- a/src/components/Blocnote/FinancialInputs/IncomeStatements.js +++ b/src/components/Blocnote/FinancialInputs/IncomeStatements.js @@ -6,6 +6,7 @@ import { DropdownMenu, DropdownItem, Button, + Table, } from 'reactstrap'; @@ -41,7 +42,6 @@ class IncomeStatements extends Component { } render() { - const headerStyle = { textAlign: 'left', marginBottom: '25px' }; let header = []; let rows = []; @@ -124,8 +124,8 @@ class IncomeStatements extends Component { } return ( -
    -

    +
    +

    Income Statements (in $, End of Year)

    @@ -164,7 +164,7 @@ class IncomeStatements extends Component {
    - +
    {header} @@ -173,7 +173,7 @@ class IncomeStatements extends Component { {rows} -
    +
    @@ -182,6 +182,8 @@ class IncomeStatements extends Component { } IncomeStatements.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, data: PropTypes.objectOf, }; diff --git a/src/components/Blocnote/FinancialInputs/LoanOptions.js b/src/components/Blocnote/FinancialInputs/LoanOptions.js index ccac5f09..49243348 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptions.js @@ -6,6 +6,7 @@ import { Label, Col, Input, + Table, } from 'reactstrap'; import LoanOptionsRow from './LoanOptionsRow'; @@ -22,7 +23,6 @@ class LoanOptions extends Component { } render() { - const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const header = [ 'Loan Options', 'Lender', @@ -54,13 +54,13 @@ class LoanOptions extends Component { } return ( -
    -

    +
    +

    Loan Options

    - +
    {loans} -
    @@ -115,7 +115,7 @@ class LoanOptions extends Component {
    +
    @@ -134,6 +134,8 @@ class LoanOptions extends Component { } LoanOptions.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, cash: PropTypes.number, noi: PropTypes.number, loans: PropTypes.objectOf, diff --git a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js index 1cec1efd..45c40100 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Button, +} from 'reactstrap'; class LoanOptionsRow extends Component { @@ -14,34 +17,37 @@ class LoanOptionsRow extends Component { } render() { + const style = { textAlign: 'left' }; return ( - + Loan {this.props.LoanNum} - + - +
    %
    - +
    Months
    - +
    $
    - - + + ); diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js index c0c524bf..4490907e 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Button, + Table, } from 'reactstrap'; import MortgageLiabilitiesRow from './MortgageLiabilitiesRow'; @@ -18,7 +19,6 @@ class MortgageLiabilities extends Component { } render() { - const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const header = [ '#Debt', 'Lender Name', @@ -50,13 +50,13 @@ class MortgageLiabilities extends Component { } return ( -
    -

    +
    +

    Mortgage and Liabilities

    - +
    {header} @@ -65,7 +65,7 @@ class MortgageLiabilities extends Component { {rows} -
    +
    @@ -84,6 +84,8 @@ class MortgageLiabilities extends Component { } MortgageLiabilities.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, data: PropTypes.objectOf, }; diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js index 1fa465ae..9572929f 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; - +import { + Button, +} from 'reactstrap'; class MortgageLiabilitiesRow extends Component { constructor(props) { @@ -14,31 +16,34 @@ class MortgageLiabilitiesRow extends Component { } render() { + const style = { textAlign: 'left' }; return ( - + {this.props.liabilityNum} - + - +
    $
    - +
    Months
    - + - - + + ); diff --git a/src/components/Blocnote/PreliminaryFinance.js b/src/components/Blocnote/PreliminaryFinance.js index a754fcb9..cd41a43d 100644 --- a/src/components/Blocnote/PreliminaryFinance.js +++ b/src/components/Blocnote/PreliminaryFinance.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; import LinkBarDetail from '../LinkBarDetail'; import ErrorAlert from '../ErrorAlert'; import Loading from '../Loading'; @@ -17,6 +16,9 @@ import PostRetrofitBalanceSheet from './PreliminaryFinance/PostRetrofitBalanceSh import BudgetChart from './PreliminaryFinance/BudgetChart'; import request from '../../utils/request'; import { getHeaders, blocnoteURL } from '../../utils/restServices'; +import DownPayment from './PreliminaryFinance/DownPayment'; +import SelectScenario from './PreliminaryFinance/SelectScenario'; +import SaveScenario from './PreliminaryFinance/SaveScenario'; /* eslint-disable react/sort-comp */ @@ -25,7 +27,6 @@ class PreliminaryFinance extends Component { constructor(props) { super(props); - this.state = { projectEconomics: null, costs: null, @@ -87,16 +88,6 @@ class PreliminaryFinance extends Component { Object.keys(tables).map(tableName => tables[tableName][0].slice(1)), }); } - console.log(this.state); // eslint-disable-line - - // const tables = res.payload.instance.tables; - // const savingsPotentialList = res.payload.instance.saving_potential_list; - // const budgets = Object.keys(tables).map(tableName => tables[tableName][0].slice(1)); - // budgetGraph = generateGraph(budgets, savingsPotentialList); - // if (res.payload.name) { - // addBudgetPlot(res.payload.name, res.payload.budget_plot); - // } - this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); @@ -110,14 +101,10 @@ class PreliminaryFinance extends Component { this.setState({ error: false }); } - toggle = () => { - this.setState(prevState => ({ - dropdownOpen: !prevState.dropdownOpen, - })); - } - render() { let mainContent = null; + const blockStyle = { marginBottom: '40px' }; + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; if (this.state.loading) { mainContent = ; @@ -132,54 +119,58 @@ class PreliminaryFinance extends Component { savingPotentialList={this.state.savingPotentialList} budgets={this.state.budgets} /> -
    -
    - Scenario :   -
    -
    - - - Dropdown - - - Header - Some Action - Action (disabled) - - Foo Action - Bar Action - Quo Action - - - {/*
    - -
    */} -
    -
    - - -
    - -   -
    -
    - - -
    - Downpayment: {this.state.downpayment} -
    - - - - - -
    + + + + + + + + + + + +
    ); } diff --git a/src/components/Blocnote/PreliminaryFinance/BudgetChart.js b/src/components/Blocnote/PreliminaryFinance/BudgetChart.js index 51129391..53c0d600 100644 --- a/src/components/Blocnote/PreliminaryFinance/BudgetChart.js +++ b/src/components/Blocnote/PreliminaryFinance/BudgetChart.js @@ -48,32 +48,28 @@ class BudgetChart extends Component { }); const renderLineChart = ( -
    -
    - - - - - - - } /> - - - - - - -
    -
    + + + + + + + } /> + + + + + + ); return renderLineChart; @@ -81,6 +77,8 @@ class BudgetChart extends Component { } BudgetChart.propTypes = { + // blockStyle: PropTypes.string, + // headerStyle: PropTypes.string, x: PropTypes.number, y: PropTypes.number, stroke: PropTypes.number, diff --git a/src/components/Blocnote/PreliminaryFinance/CostEstimation.js b/src/components/Blocnote/PreliminaryFinance/CostEstimation.js index 5d2be05e..f8052e42 100644 --- a/src/components/Blocnote/PreliminaryFinance/CostEstimation.js +++ b/src/components/Blocnote/PreliminaryFinance/CostEstimation.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Table, +} from 'reactstrap'; import CostEstimationRow from './CostEstimationRow'; @@ -15,7 +18,6 @@ class CostEstimation extends Component { } render() { - const style = { textAlign: 'center' }; let rows = []; if (this.props.data !== null) { @@ -25,17 +27,28 @@ class CostEstimation extends Component { key={costItem.uniqueId} item={costItem.cost_item} cost={costItem.cost} + buttonColor={'warning'} + buttonValue={'Delete Row'} /> ); }); + rows.push( + + ); } return ( -
    -

    +
    +

    Cost Estimation -

    - + +
    @@ -43,15 +56,18 @@ class CostEstimation extends Component { - {rows} -
    ItemOption
    - + + {rows} + +
    ); } } CostEstimation.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, data: PropTypes.arrayOf, }; diff --git a/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js b/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js index 7bc75d48..534b10b7 100644 --- a/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js +++ b/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js @@ -1,5 +1,9 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Input, + Button, +} from 'reactstrap'; class CostEstimationRow extends Component { constructor(props) { @@ -16,7 +20,7 @@ class CostEstimationRow extends Component { return ( -
    $
    - - + ); @@ -51,6 +57,8 @@ class CostEstimationRow extends Component { CostEstimationRow.propTypes = { item: PropTypes.string, cost: PropTypes.number, + buttonColor: PropTypes.string, + buttonValue: PropTypes.string, }; export default CostEstimationRow; diff --git a/src/components/Blocnote/PreliminaryFinance/DownPayment.js b/src/components/Blocnote/PreliminaryFinance/DownPayment.js new file mode 100644 index 00000000..5443c29f --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/DownPayment.js @@ -0,0 +1,36 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +class DownPayment extends Component { + constructor(props) { + super(props); + + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + return ( +
    +

    + Downpayment +

    +
    + {this.props.paymentAmount} +
    +
    + ); + } +} + +DownPayment.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, + paymentAmount: PropTypes.string, +}; + +export default DownPayment; diff --git a/src/components/Blocnote/PreliminaryFinance/LoanSummary.js b/src/components/Blocnote/PreliminaryFinance/LoanSummary.js index 78679d32..cd4ceb92 100644 --- a/src/components/Blocnote/PreliminaryFinance/LoanSummary.js +++ b/src/components/Blocnote/PreliminaryFinance/LoanSummary.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Table, +} from 'reactstrap'; import LoanSummaryRow from './LoanSummaryRow'; @@ -15,7 +18,6 @@ class LoanSummary extends Component { } render() { - const style = { textAlign: 'center' }; let header = []; let rows = []; @@ -49,9 +51,11 @@ class LoanSummary extends Component { } return ( -
    -

    Loan Summary

    - +
    +

    + Loan Summary +

    +
    {header} @@ -60,13 +64,15 @@ class LoanSummary extends Component { {rows} -
    +
    ); } } LoanSummary.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, data: PropTypes.arrayOf, }; diff --git a/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js b/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js index ef3de18f..efed0767 100644 --- a/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js +++ b/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Table, +} from 'reactstrap'; import TableContent from './TableContent'; @@ -15,7 +18,6 @@ class PostRetrofitBalanceSheet extends Component { } render() { - const style = { textAlign: 'center' }; let header = []; if (this.props.data !== null) { @@ -28,22 +30,26 @@ class PostRetrofitBalanceSheet extends Component { } return ( -
    -

    +
    +

    Post Retrofit Balance Sheet -

    - + +
    - {header} + + {header} + -
    +
    ); } } PostRetrofitBalanceSheet.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, data: PropTypes.arrayOf, }; diff --git a/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js b/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js index 5d7ef807..4d6f59ca 100644 --- a/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js +++ b/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Table, +} from 'reactstrap'; import TableContent from './TableContent'; @@ -15,7 +18,6 @@ class PostRetrofitIncomeStatement extends Component { } render() { - const style = { textAlign: 'center' }; let header = []; if (this.props.data !== null) { @@ -28,24 +30,26 @@ class PostRetrofitIncomeStatement extends Component { } return ( -
    -

    +
    +

    Post Retrofit Income Statement -

    - + +
    {header} -
    +
    ); } } PostRetrofitIncomeStatement.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, data: PropTypes.arrayOf, }; diff --git a/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js index 57980350..59d50dc4 100644 --- a/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js +++ b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Table, +} from 'reactstrap'; import TableContent from './TableContent'; @@ -15,7 +18,6 @@ class PriorRetrofitBalanceSheet extends Component { } render() { - const style = { textAlign: 'center' }; let header = []; if (this.props.data !== null) { @@ -28,22 +30,26 @@ class PriorRetrofitBalanceSheet extends Component { } return ( -
    -

    +
    +

    Prior Retrofit Balance Sheet -

    - + +
    - {header} + + {header} + -
    +
    ); } } PriorRetrofitBalanceSheet.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, data: PropTypes.arrayOf, }; diff --git a/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js index 513758d0..ccf497a2 100644 --- a/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js +++ b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Table, +} from 'reactstrap'; import TableContent from './TableContent'; @@ -15,7 +18,6 @@ class PriorRetrofitIncomeStatement extends Component { } render() { - const style = { textAlign: 'center' }; let header = []; if (this.props.data !== null) { @@ -28,24 +30,26 @@ class PriorRetrofitIncomeStatement extends Component { } return ( -
    -

    +
    +

    Prior Retrofit Income Statement -

    - + +
    {header} -
    +
    ); } } PriorRetrofitIncomeStatement.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, data: PropTypes.arrayOf, }; diff --git a/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js b/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js index 59416290..7980a7ea 100644 --- a/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js +++ b/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js @@ -14,7 +14,6 @@ class ProjectEconomics extends Component { } render() { - const style = { textAlign: 'center' }; let rows = []; if (this.props.data !== null) { @@ -34,10 +33,10 @@ class ProjectEconomics extends Component { } return ( -
    -

    +
    +

    Project Economics -

    +

    {rows}
    @@ -47,6 +46,8 @@ class ProjectEconomics extends Component { } ProjectEconomics.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, data: PropTypes.arrayOf, }; diff --git a/src/components/Blocnote/PreliminaryFinance/SaveScenario.js b/src/components/Blocnote/PreliminaryFinance/SaveScenario.js new file mode 100644 index 00000000..33634e2a --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/SaveScenario.js @@ -0,0 +1,49 @@ +import React, { Component } from 'react'; +import { + Input, + Button, +} from 'reactstrap'; + + +class SaveScenario extends Component { + constructor(props) { + super(props); + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + return ( +
    +
    +
    +
    +
    Scenario :
    + +
    +
    +
    + + +   + +
    +
    +
    +
    + ); + } +} + +export default SaveScenario; diff --git a/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js b/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js index 87402993..2408c76d 100644 --- a/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js +++ b/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Table, +} from 'reactstrap'; import SavingEstimationRow from './SavingEstimationRow'; @@ -15,7 +18,7 @@ class SavingEstimation extends Component { } render() { - const style = { textAlign: 'center' }; + const tdStyle = { textAlign: 'center' }; const rows = []; console.log(this.props.data); // eslint-disable-line @@ -23,6 +26,7 @@ class SavingEstimation extends Component { Object.entries(this.props.data).forEach(([utilityName, utilityData]) => { rows.push( -

    +
    +

    Saving Estimation -

    - + +
    - - - - + + + + - {rows} -
    UtilityEstimated SavingsUsed Before RetrofitUsed After Retrofit + Utility + + Estimated Savings + + Used Before Retrofit + + Used After Retrofit +
    + + {rows} + +
    ); } } SavingEstimation.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, data: PropTypes.objectOf, }; diff --git a/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js b/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js index b71fb8fe..44ac6797 100644 --- a/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js +++ b/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js @@ -1,5 +1,11 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + FormGroup, + Label, + Input, +} from 'reactstrap'; + class SavingEstimationRow extends Component { constructor(props) { @@ -15,12 +21,12 @@ class SavingEstimationRow extends Component { render() { return ( - + {this.props.utility_name} - +
    - %

    - - + + + + - - + + + + ); @@ -50,6 +58,7 @@ class SavingEstimationRow extends Component { } SavingEstimationRow.propTypes = { + tdStyle: PropTypes.string, utility_name: PropTypes.string, estimated_savings: PropTypes.number, }; diff --git a/src/components/Blocnote/PreliminaryFinance/SavingsScheduleChart.js b/src/components/Blocnote/PreliminaryFinance/SavingsScheduleChart.js index 97167c60..3860a1c3 100644 --- a/src/components/Blocnote/PreliminaryFinance/SavingsScheduleChart.js +++ b/src/components/Blocnote/PreliminaryFinance/SavingsScheduleChart.js @@ -36,33 +36,31 @@ class SavingsScheduleChart extends Component { }); const renderBarChart = ( -
    -
    -

    - Energy Expense Savings Projection -

    - - +

    + Energy Expense Savings Projection +

    + + + - - - - - - - - - - -
    + /> + + + + + + + + +
    ); @@ -71,6 +69,8 @@ class SavingsScheduleChart extends Component { } SavingsScheduleChart.propTypes = { + blockStyle: PropTypes.string, + headerStyle: PropTypes.string, chartData: PropTypes.objectOf, }; diff --git a/src/components/Blocnote/PreliminaryFinance/SelectScenario.js b/src/components/Blocnote/PreliminaryFinance/SelectScenario.js new file mode 100644 index 00000000..572714e5 --- /dev/null +++ b/src/components/Blocnote/PreliminaryFinance/SelectScenario.js @@ -0,0 +1,45 @@ +import React, { Component } from 'react'; +import { + Dropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, +} from 'reactstrap'; + + +class SelectScenario extends Component { + constructor(props) { + super(props); + this.toggle = this.toggle.bind(this); + this.state = { + successMessages: [], + error: false, + loading: false, + }; + } + + toggle() { + this.setState(prevState => ({ + dropdownOpen: !prevState.dropdownOpen, + })); + } + + render() { + return ( +
    + + + Select scenario + + + Scenario 1 + Scenario 2 + + +
    +
    + ); + } +} + +export default SelectScenario; -- GitLab From 206f2e4b5452d93fb79c421c3c8f503156a8f05d Mon Sep 17 00:00:00 2001 From: akkking Date: Tue, 2 Apr 2019 13:04:22 -0400 Subject: [PATCH 20/79] Refactor FinancialInputs components --- .../FinancialInputs/CustomerPreference.js | 10 +++++----- .../Blocnote/FinancialInputs/GeneralInputs.js | 4 ++-- .../Blocnote/FinancialInputs/LoanOptionsRow.js | 17 +++++++++++++++-- .../FinancialInputs/MortgageLiabilitiesRow.js | 8 +++++++- 4 files changed, 29 insertions(+), 10 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/CustomerPreference.js b/src/components/Blocnote/FinancialInputs/CustomerPreference.js index 9f6bad27..feab5a6b 100644 --- a/src/components/Blocnote/FinancialInputs/CustomerPreference.js +++ b/src/components/Blocnote/FinancialInputs/CustomerPreference.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { Button, Table, + Input, } from 'reactstrap'; @@ -40,7 +41,7 @@ class CustomerPreference extends Component {
    $
    -
    -
    @@ -85,7 +85,7 @@ class CustomerPreference extends Component { step="any" className="form-control" name="expected-net-noi-dscr" - style={{ width: '50%' }} + style={{ width: '50%', textAlign: 'right' }} value={this.props.data.expected_net_noi_dscr} />
    diff --git a/src/components/Blocnote/FinancialInputs/GeneralInputs.js b/src/components/Blocnote/FinancialInputs/GeneralInputs.js index a3ed4feb..bf8e0732 100644 --- a/src/components/Blocnote/FinancialInputs/GeneralInputs.js +++ b/src/components/Blocnote/FinancialInputs/GeneralInputs.js @@ -34,7 +34,7 @@ class GeneralInputs extends Component {
    - Pro Forma Start date + Pro Forma Start Date
    @@ -43,7 +43,7 @@ class GeneralInputs extends Component {
    - Pro Forma Duration (years) + Pro Forma Duration
    diff --git a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js index 45c40100..149735ac 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js @@ -28,13 +28,26 @@ class LoanOptionsRow extends Component {
    - +
    %
    - +
    Months
    diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js index 9572929f..8da9da96 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js @@ -33,7 +33,13 @@ class MortgageLiabilitiesRow extends Component {
    - +
    Months
    -- GitLab From 44d948efd603fc75f1d4ab60320c8321946f0045 Mon Sep 17 00:00:00 2001 From: akkking Date: Tue, 2 Apr 2019 13:10:31 -0400 Subject: [PATCH 21/79] Align input box with right format --- .../Blocnote/FinancialInputs/BillsSummaryTable.js | 4 ++-- .../Blocnote/FinancialInputs/GeneralInputs.js | 12 +++++++++--- .../Blocnote/PreliminaryFinance/CostEstimationRow.js | 4 ++-- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js index d8178768..5c448c4d 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -27,8 +27,8 @@ class BillsSummaryTable extends Component { if (this.props.billData !== null) { rows = this.props.billData.map((item) => { - let charge = Math.round(item.charge * 100) / 100; - charge = charge.toLocaleString(); + const charge = Math.round(item.charge * 100) / 100; + // charge = charge.toLocaleString(); return ( diff --git a/src/components/Blocnote/FinancialInputs/GeneralInputs.js b/src/components/Blocnote/FinancialInputs/GeneralInputs.js index bf8e0732..f3798485 100644 --- a/src/components/Blocnote/FinancialInputs/GeneralInputs.js +++ b/src/components/Blocnote/FinancialInputs/GeneralInputs.js @@ -37,7 +37,13 @@ class GeneralInputs extends Component { Pro Forma Start Date
    - +
    @@ -52,7 +58,7 @@ class GeneralInputs extends Component { step="any" className="form-control" name="expected-payback" - style={{ width: '50%' }} + style={{ width: '50%', textAlign: 'right' }} />
    Years @@ -115,7 +121,7 @@ class GeneralInputs extends Component { step="any" className="form-control" name="expected-payback" - style={{ width: '50%' }} + style={{ width: '50%', textAlign: 'right' }} />
    Weeks diff --git a/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js b/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js index 534b10b7..d3bfc3e7 100644 --- a/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js +++ b/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js @@ -26,7 +26,7 @@ class CostEstimationRow extends Component { name="item" value={this.props.item} required - style={{ textAlign: 'right' }} + style={{ textAlign: 'left' }} /> @@ -40,7 +40,7 @@ class CostEstimationRow extends Component { name="Estimated cost" value={this.props.cost} required - style={{ textAlign: 'right' }} + style={{ textAlign: 'left' }} />
    -- GitLab From d278ece71c7a44e33a893b302eff0881d06c78bc Mon Sep 17 00:00:00 2001 From: akkking Date: Tue, 2 Apr 2019 15:23:46 -0400 Subject: [PATCH 22/79] Add dropdown options with action --- .../FinancialInputs/EnergyBillsOverview.js | 40 +++++++--- .../Blocnote/FinancialInputs/GeneralInputs.js | 42 ++++++++--- .../FinancialInputs/IncomeStatements.js | 75 ++++++++++++------- 3 files changed, 111 insertions(+), 46 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js index af783261..797b9865 100644 --- a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js +++ b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js @@ -13,19 +13,29 @@ import { class EnergyBillsOverview extends Component { constructor(props) { super(props); - this.toggle = this.toggle.bind(this); + this.toggleEstimation = this.toggleEstimation.bind(this); + this.changeEstimation = this.changeEstimation.bind(this); this.state = { successMessages: [], error: false, loading: false, - dropdownOpen: false, + estimationDropdownOpen: false, + estimationDropDownValue: 'Select Estimation', + estimationOptions: [ + { id: 'RoughEstimation', key: 'RoughEstimation', name: 'Rough Estimation' }, + { id: 'Fancy Estimation', key: 'FancyEstimation', name: 'Fancy Estimation' }, + ], }; } - toggle() { - this.setState(prevState => ({ - dropdownOpen: !prevState.dropdownOpen, - })); + toggleEstimation() { + this.setState({ + estimationDropdownOpen: !this.state.estimationDropdownOpen, + }); + } + + changeEstimation(e) { + this.setState({ estimationDropDownValue: e.currentTarget.textContent }); } buildHeader = (headerNames) => { @@ -53,6 +63,17 @@ class EnergyBillsOverview extends Component { render() { const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const validBillNames = ['electric', 'water', 'gas', 'oil']; + const estimationOptions = this.state.estimationOptions.map(e => { + return ( + + {e.name} + + ); + }); let header = []; let footer = []; let rows = []; @@ -103,13 +124,12 @@ class EnergyBillsOverview extends Component {

    - + - Select Estimation + {this.state.estimationDropDownValue} - Fancy Estimation - Rough Estimation + {estimationOptions}
    diff --git a/src/components/Blocnote/FinancialInputs/GeneralInputs.js b/src/components/Blocnote/FinancialInputs/GeneralInputs.js index f3798485..e0fd481d 100644 --- a/src/components/Blocnote/FinancialInputs/GeneralInputs.js +++ b/src/components/Blocnote/FinancialInputs/GeneralInputs.js @@ -10,23 +10,45 @@ import { Dropdown, class GeneralInputs extends Component { constructor(props) { super(props); - this.toggle = this.toggle.bind(this); + this.toggleFund = this.toggleFund.bind(this); + this.changeFund = this.changeFund.bind(this); this.state = { successMessages: [], error: false, loading: false, - dropdownOpen: false, + fundDropdownOpen: false, + fundDropDownValue: 'Select Fund', + fundOptions: [ + { id: 'NoFund', key: 'NoFund', name: 'No Fund' }, + { id: 'SmallCommercialFund', key: 'SmallCommercialFund', name: 'Small Commercial Fund' }, + { id: 'BronxHealthyBuildingsFund', key: 'BronxHealthyBuildingsFund', name: 'Bronx Healthy Buildings Fund' }, + ], }; } - toggle() { - this.setState(prevState => ({ - dropdownOpen: !prevState.dropdownOpen, - })); + toggleFund() { + this.setState({ + fundDropdownOpen: !this.state.fundDropdownOpen, + }); + } + + changeFund(e) { + this.setState({ fundDropDownValue: e.currentTarget.textContent }); } render() { const lineSpaceStyle = { marginBottom: '10px', textAlign: 'left' }; + const fundOptions = this.state.fundOptions.map(e => { + return ( + + {e.name} + + ); + }); return (
    @@ -78,14 +100,12 @@ class GeneralInputs extends Component {
    - + - Select a Fund + {this.state.fundDropDownValue} - No Fund - Small Commercial Fund - Bronx Healthy Buildings Fund + {fundOptions}
    diff --git a/src/components/Blocnote/FinancialInputs/IncomeStatements.js b/src/components/Blocnote/FinancialInputs/IncomeStatements.js index 241fde80..e084a636 100644 --- a/src/components/Blocnote/FinancialInputs/IncomeStatements.js +++ b/src/components/Blocnote/FinancialInputs/IncomeStatements.js @@ -13,20 +13,46 @@ import { class IncomeStatements extends Component { constructor(props) { super(props); - this.toggle = this.toggle.bind(this); + this.toggleGrowthRate = this.toggleGrowthRate.bind(this); + this.changeGrowthRate = this.changeGrowthRate.bind(this); this.state = { successMessages: [], error: false, loading: false, + growthRateDropdownOpen: false, + growthRateDropdownValue: 'Growth Rate', + growthRateOptions: [ + { id: 'xx', key: 'xx', name: 'CAGR=1.58%' }, + { id: 'yy', key: 'yy', name: 'Average' }, + { id: '0.00', key: '0.00', name: '0%' }, + { id: '0.01', key: '0.01', name: '1%' }, + { id: '0.02', key: '0.02', name: '2%' }, + { id: '0.03', key: '0.03', name: '3%' }, + { id: '0.04', key: '0.04', name: '4%' }, + { id: '0.05', key: '0.05', name: '5%' }, + { id: '0.06', key: '0.06', name: '6%' }, + { id: '0.07', key: '0.07', name: '7%' }, + { id: '0.08', key: '0.08', name: '8%' }, + { id: '0.09', key: '0.09', name: '9%' }, + { id: '0.10', key: '0.10', name: '10%' }, + { id: '0.11', key: '0.11', name: '11%' }, + { id: '0.12', key: '0.12', name: '12%' }, + { id: '0.13', key: '0.13', name: '13%' }, + { id: '0.14', key: '0.14', name: '14%' }, + { id: '0.15', key: '0.15', name: '15%' }, + ], }; } - toggle() { - this.setState(prevState => ({ - dropdownOpen: !prevState.dropdownOpen, - })); + toggleGrowthRate() { + this.setState({ + growthRateDropdownOpen: !this.state.growthRateDropdownOpen, + }); } + changeGrowthRate(e) { + this.setState({ growthRateDropDownValue: e.currentTarget.textContent }); + } buildHeader = (headerNames) => { return [ @@ -75,6 +101,18 @@ class IncomeStatements extends Component { noi: 'Net Operating Income', }; + const growthRateOptions = this.state.growthRateOptions.map(e => { + return ( + + {e.name} + + ); + }); + if (this.props.data !== null) { header = this.buildHeader(['Year']); const histYears = Object.keys(this.props.data.hist).sort(); @@ -130,29 +168,16 @@ class IncomeStatements extends Component {

    - + - Selected Growth Rate + {this.state.growthRateDropdownValue} - 0% - % - 1% - 3% - 4% - 5% - 6% - 7% - 8% - 9% - 10% - 11% - 12% - 13% - 14% - 15% - Average - CAGR=1.58% + {growthRateOptions}
    -- GitLab From 850645a10ab06ac045c2cbe50ef23dcef9779c52 Mon Sep 17 00:00:00 2001 From: akkking Date: Tue, 2 Apr 2019 16:26:15 -0400 Subject: [PATCH 23/79] Update financial inputs components by using React inputgroup components --- .../FinancialInputs/BillsSummaryTable.js | 59 +++-- .../FinancialInputs/CashBalanceRow.js | 22 +- .../FinancialInputs/CustomerPreference.js | 45 ++-- .../Blocnote/FinancialInputs/GeneralInputs.js | 217 ++++++++++-------- .../FinancialInputs/LoanOptionsRow.js | 58 +++-- .../FinancialInputs/MortgageLiabilitiesRow.js | 36 ++- .../SavingsScheduleChart.js | 9 +- 7 files changed, 269 insertions(+), 177 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js index 5c448c4d..61b1dc8d 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -3,13 +3,15 @@ import PropTypes from 'prop-types'; import { Button, Table, + InputGroup, + InputGroupAddon, + Input, } from 'reactstrap'; class BillsSummaryTable extends Component { constructor(props) { super(props); - this.state = { successMessages: [], error: false, @@ -32,27 +34,32 @@ class BillsSummaryTable extends Component { return ( -
    -
    Year
    - + + Year + + -
    + -
    -
    $
    - + + $ + + -
    + {' '} @@ -64,10 +71,28 @@ class BillsSummaryTable extends Component { rows.push( - + + + Year + + + - + + + $ + + + {' '} diff --git a/src/components/Blocnote/FinancialInputs/CashBalanceRow.js b/src/components/Blocnote/FinancialInputs/CashBalanceRow.js index 20737904..422c5e67 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalanceRow.js +++ b/src/components/Blocnote/FinancialInputs/CashBalanceRow.js @@ -1,11 +1,15 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + InputGroup, + InputGroupAddon, + Input, +} from 'reactstrap'; class CashBalanceRow extends Component { constructor(props) { super(props); - this.state = { successMessages: [], error: false, @@ -20,10 +24,18 @@ class CashBalanceRow extends Component { {this.props.statementNum} -
    -
    $
    - -
    + + + $ + + + diff --git a/src/components/Blocnote/FinancialInputs/CustomerPreference.js b/src/components/Blocnote/FinancialInputs/CustomerPreference.js index feab5a6b..e6af2cae 100644 --- a/src/components/Blocnote/FinancialInputs/CustomerPreference.js +++ b/src/components/Blocnote/FinancialInputs/CustomerPreference.js @@ -4,13 +4,14 @@ import { Button, Table, Input, + InputGroup, + InputGroupAddon, } from 'reactstrap'; class CustomerPreference extends Component { constructor(props) { super(props); - this.state = { successMessages: [], error: false, @@ -39,16 +40,17 @@ class CustomerPreference extends Component { Affordable Downpayment (?) -
    -
    $
    + + + $ + -
    + ); @@ -58,18 +60,17 @@ class CustomerPreference extends Component { Expected Payback (?) -
    + -
    + Months -
    -
    + + ); @@ -79,19 +80,17 @@ class CustomerPreference extends Component { Expected Saving DSCR (?) -
    - + -
    + X -
    -
    + + ); diff --git a/src/components/Blocnote/FinancialInputs/GeneralInputs.js b/src/components/Blocnote/FinancialInputs/GeneralInputs.js index e0fd481d..aa4b25b4 100644 --- a/src/components/Blocnote/FinancialInputs/GeneralInputs.js +++ b/src/components/Blocnote/FinancialInputs/GeneralInputs.js @@ -4,6 +4,11 @@ import { Dropdown, DropdownMenu, DropdownItem, Button, + Form, + FormGroup, + Input, + InputGroup, + InputGroupAddon, } from 'reactstrap'; @@ -37,7 +42,7 @@ class GeneralInputs extends Component { } render() { - const lineSpaceStyle = { marginBottom: '10px', textAlign: 'left' }; + const lineSpaceStyle = { textAlign: 'left' }; const fundOptions = this.state.fundOptions.map(e => { return ( -
    -
    -
    -
    - Pro Forma Start Date -
    -
    - -
    -
    -
    -
    -
    - Pro Forma Duration -
    -
    -
    - -
    - Years -
    +
    +
    +
    +
    +
    + Pro Forma Start Date +
    +
    + + +
    -
    -
    -
    - Analysis Date -
    -
    - -
    -
    -
    -
    -
    -
    - - - {this.state.fundDropDownValue} - - - {fundOptions} - - +
    +
    + Pro Forma Duration +
    +
    + + + + + Years + + + +
    -
    -
    -
    -
    -
    - Anticipated Construction Start Date +
    +
    + Analysis Date +
    +
    + + + +
    -
    - -
    +
    +
    +
    + + + {this.state.fundDropDownValue} + + + {fundOptions} + + +
    -
    -
    - Anticipated Commissioning Date -
    -
    - -
    +
    +
    +
    + Anticipated Construction Start Date +
    +
    + + + +
    -
    -
    -
    - Anticipated Construction Period +
    +
    + Anticipated Commissioning Date +
    +
    + + + +
    -
    -
    - -
    - Weeks -
    +
    +
    + Anticipated Construction Period +
    +
    + + + + + Weeks + + +
    -
    -
    -
    -
    - +
    +
    +
    + +
    -
    +
    ); } diff --git a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js index 149735ac..3247c29a 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js @@ -2,13 +2,15 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Button, + InputGroup, + InputGroupAddon, + Input, } from 'reactstrap'; class LoanOptionsRow extends Component { constructor(props) { super(props); - this.state = { successMessages: [], error: false, @@ -24,38 +26,54 @@ class LoanOptionsRow extends Component { Loan {this.props.LoanNum} - + -
    - + -
    %
    -
    + + % + + -
    - + -
    Months
    -
    + + Months + + -
    -
    $
    - -
    + + + $ + + + +
    +
    + Anticipated Construction Period +
    +
    + + + + + Weeks + + + +
    +
    +
    +
    +
    + + +
    -
    - -
    - ); + +
    + ); + } + + return ''; } } +GeneralInputs.propTypes = { + buildingId: PropTypes.string, + successMessageStyle: PropTypes.objectOf, + errorMessageStyle: PropTypes.objectOf, +}; + export default GeneralInputs; diff --git a/src/components/Blocnote/FinancialInputs/ResultMessage.js b/src/components/Blocnote/FinancialInputs/ResultMessage.js new file mode 100644 index 00000000..dcf62125 --- /dev/null +++ b/src/components/Blocnote/FinancialInputs/ResultMessage.js @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + + +const ResultMessage = (props) => { + // let message = { + // style: {}, + // content: '', + // }; + // if (props.messageContent !== null) { + // message = props.messageContent; + // } + return ( + + {props.messageContent} + + ); +}; + +ResultMessage.propTypes = { + messageStyle: PropTypes.string, + messageContent: PropTypes.string, +}; + +export default ResultMessage; diff --git a/src/components/Blocnote/FinancialInputs/csrftoken.js b/src/components/Blocnote/FinancialInputs/csrftoken.js new file mode 100644 index 00000000..0db22295 --- /dev/null +++ b/src/components/Blocnote/FinancialInputs/csrftoken.js @@ -0,0 +1,25 @@ +import React from 'react'; + +const getCookie = (name) => { + let cookieValue = null; + if (document.cookie && document.cookie !== '') { + const cookies = document.cookie.split(';'); + for (let i = 0; i < cookies.length; i += 1) { + let cookie = cookies[i]; + cookie = cookie.trim(); + console.log(cookie); // eslint-disable-line + if (cookie.substring(0, name.length + 1) === `${name}=`) { + cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); + break; + } + } + } + return cookieValue; +}; +const csrftoken = getCookie('csrftoken'); +const CSRFToken = () => { + return ( + + ); +}; +export default CSRFToken; diff --git a/src/components/Blocnote/PreliminaryFinance/SelectScenario.js b/src/components/Blocnote/PreliminaryFinance/SelectScenario.js index 572714e5..44ac0af7 100644 --- a/src/components/Blocnote/PreliminaryFinance/SelectScenario.js +++ b/src/components/Blocnote/PreliminaryFinance/SelectScenario.js @@ -10,30 +10,51 @@ import { class SelectScenario extends Component { constructor(props) { super(props); - this.toggle = this.toggle.bind(this); + this.toggleScenario = this.toggleScenario.bind(this); + this.changeScenario = this.changeScenario.bind(this); this.state = { successMessages: [], error: false, loading: false, + scenarioDropdownOpen: false, + scenarioDropDownValue: 'Select Scenario', + scenarioOptions: [ + { id: 'Scenario1', key: 'Scenario1', name: 'Scenario 1' }, + { id: 'Scenario2', key: 'Scenario2', name: 'Scenario 2' }, + ], }; } - toggle() { - this.setState(prevState => ({ - dropdownOpen: !prevState.dropdownOpen, - })); + toggleScenario() { + this.setState({ + scenarioDropdownOpen: !this.state.scenarioDropdownOpen, + }); + } + + changeScenario(e) { + this.setState({ scenarioDropDownValue: e.currentTarget.textContent }); } render() { + const scenarioOptions = this.state.scenarioOptions.map(e => { + return ( + + {e.name} + + ); + }); return (
    - + - Select scenario + {this.state.scenarioDropDownValue} - Scenario 1 - Scenario 2 + {scenarioOptions}
    -- GitLab From e9db6a09463aabcd21ce9d74c14d1f9c50920d13 Mon Sep 17 00:00:00 2001 From: akkking Date: Wed, 3 Apr 2019 18:16:39 -0400 Subject: [PATCH 25/79] Add baseURL property --- src/components/Blocnote/FinancialInputs.js | 36 +++++++------------ .../Blocnote/FinancialInputs/GeneralInputs.js | 26 +++++--------- 2 files changed, 20 insertions(+), 42 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js index d2fbd493..db5d4d5a 100644 --- a/src/components/Blocnote/FinancialInputs.js +++ b/src/components/Blocnote/FinancialInputs.js @@ -35,6 +35,7 @@ class FinancialInputs extends Component { successMessages: [], error: false, loading: false, + baseURL: `${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs`, }; } @@ -52,8 +53,8 @@ class FinancialInputs extends Component { loadBills = () => { this.setState({ loading: true }); - console.log(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/bills/`); // eslint-disable-line - request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/bills/`, { + console.log(`${this.state.baseURL}/bills/`); // eslint-disable-line + request(`${this.state.baseURL}/bills/`, { method: 'GET', headers: getHeaders(), }).then((res) => { @@ -72,17 +73,15 @@ class FinancialInputs extends Component { } loadBillsSummary = () => { - request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/bills-summary/`, { + request(`${this.state.baseURL}/bills-summary/`, { method: 'GET', headers: getHeaders(), }).then((res) => { - console.log(res); // eslint-disable-line if (!res.err) { if (Object.keys(res.result).length > 0) { console.log(res.result); // eslint-disable-line this.setState({ billsSummary: res.result.user_bill }); } - console.log(this.state); // eslint-disable-line this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); @@ -92,17 +91,15 @@ class FinancialInputs extends Component { } loadBillsOverview = () => { - console.log(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/bills-overview/`); // eslint-disable-line - request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/bills-overview/`, { + console.log(`${this.state.baseURL}/bills-overview/`); // eslint-disable-line + request(`${this.state.baseURL}/bills-overview/`, { method: 'GET', headers: getHeaders(), }).then((res) => { - console.log(res); // eslint-disable-line if (!res.err) { if (Object.keys(res.instance).length > 0) { this.setState({ billsOverview: res.instance }); } - console.log(this.state); // eslint-disable-line this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); @@ -112,16 +109,14 @@ class FinancialInputs extends Component { } loadIncomeStatement = () => { - request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/income-statement/`, { + request(`${this.state.baseURL}/income-statement/`, { method: 'GET', headers: getHeaders(), }).then((res) => { - console.log(res); // eslint-disable-line if (!res.err) { if (Object.keys(res.instance).length > 0) { this.setState({ incomeStatements: res.instance }); } - console.log(this.state); // eslint-disable-line this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); @@ -131,16 +126,14 @@ class FinancialInputs extends Component { } loadCashBalance = () => { - request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/cash-balance/`, { + request(`${this.state.baseURL}/cash-balance/`, { method: 'GET', headers: getHeaders(), }).then((res) => { - console.log(res); // eslint-disable-line if (!res.err) { if (Object.keys(res.instance).length > 0) { this.setState({ cashBalance: res.instance.result }); } - console.log(this.state); // eslint-disable-line this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); @@ -150,16 +143,14 @@ class FinancialInputs extends Component { } loadLiabilities = () => { - request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/liabilities/`, { + request(`${this.state.baseURL}/liabilities/`, { method: 'GET', headers: getHeaders(), }).then((res) => { - console.log(res); // eslint-disable-line if (!res.err) { if (Object.keys(res.instance).length > 0) { this.setState({ liabilities: res.instance }); } - console.log(this.state); // eslint-disable-line this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); @@ -169,7 +160,7 @@ class FinancialInputs extends Component { } loadLoanOptions = () => { - request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/loan-options/?loans=all-loans`, { + request(`${this.state.baseURL}/loan-options/?loans=all-loans`, { method: 'GET', headers: getHeaders(), }).then((res) => { @@ -181,7 +172,6 @@ class FinancialInputs extends Component { this.setState({ cash: res.cash }); this.setState({ noi: res.noi }); } - console.log(this.state); // eslint-disable-line this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); @@ -191,16 +181,14 @@ class FinancialInputs extends Component { } loadCustomerPreference = () => { - request(`${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs/customer-preference/`, { + request(`${this.state.baseURL}/customer-preference/`, { method: 'GET', headers: getHeaders(), }).then((res) => { - console.log(res); // eslint-disable-line if (!res.err) { if (Object.keys(res.instance).length > 0) { this.setState({ customerPreference: res.instance }); } - console.log(this.state); // eslint-disable-line this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); @@ -238,7 +226,7 @@ class FinancialInputs extends Component { genericMessage="There was an error" /> diff --git a/src/components/Blocnote/FinancialInputs/GeneralInputs.js b/src/components/Blocnote/FinancialInputs/GeneralInputs.js index cac6b109..03a6208e 100644 --- a/src/components/Blocnote/FinancialInputs/GeneralInputs.js +++ b/src/components/Blocnote/FinancialInputs/GeneralInputs.js @@ -12,7 +12,6 @@ import { InputGroup, InputGroupAddon, } from 'reactstrap'; -import { blocnoteURL } from '../../../utils/restServices'; import CSRFToken from './csrftoken'; import ResultMessage from './ResultMessage'; @@ -24,7 +23,6 @@ class GeneralInputs extends Component { this.changeFund = this.changeFund.bind(this); this.submitForm = this.submitForm.bind(this); this.state = { - saveError: '', error: false, loading: false, fundDropdownOpen: false, @@ -64,19 +62,13 @@ class GeneralInputs extends Component { csrftoken: formData.get('csrfmiddlewaretoken'), }); - console.log(formData.get('fund_id')); // eslint-disable-line - if (formData.get('fund_id') === '0') { this.setState({ messageContent: 'Please select a fund type', messageStyle: this.props.errorMessageStyle, }); } else { - this.setState({ - saveError: '', - }); - const baseUrl = `${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs`; - fetch(`${baseUrl}/loan-options/?loans=all-loans`) + fetch(`${this.props.baseURL}/loan-options/?loans=all-loans`) .then((res) => { console.log(res); // eslint-disable-line this.setState({ @@ -86,7 +78,6 @@ class GeneralInputs extends Component { formData.forEach((value, field) => { result[field] = value; }); - console.log(result); // eslint-disable-line const constructionStartDate = new Date(result.anticipated_construction_start_date); const constructionCommissioningDate = new Date(result.anticipated_commissioning_date); if (constructionStartDate > constructionCommissioningDate) { @@ -95,15 +86,14 @@ class GeneralInputs extends Component { messageStyle: this.props.errorMessageStyle, }); } else { - console.log(res); // eslint-disable-line - this.loadFinancialOverview(result, baseUrl); + this.loadFinancialOverview(result); } }); } } - loadFinancialOverview = (result, baseUrl) => { - fetch(`${baseUrl}/finance-overview/`, { + loadFinancialOverview = (result) => { + fetch(`${this.props.baseURL}/finance-overview/`, { method: 'PUT', credentials: 'same-origin', body: JSON.stringify(result), @@ -130,7 +120,7 @@ class GeneralInputs extends Component { this.setState({ didFundChange: false, }); - this.deleteLoanOptions(baseUrl); + this.deleteLoanOptions(); } } else { const errors = []; @@ -146,8 +136,8 @@ class GeneralInputs extends Component { }); } - deleteLoanOptions = (baseUrl) => { - fetch(`${baseUrl}/loan-options/?loans=delete-loan-options`, { + deleteLoanOptions = () => { + fetch(`${this.props.baseURL}/loan-options/?loans=delete-loan-options`, { method: 'GET', credentials: 'same-origin', headers: { @@ -332,7 +322,7 @@ class GeneralInputs extends Component { } GeneralInputs.propTypes = { - buildingId: PropTypes.string, + baseURL: PropTypes.string, successMessageStyle: PropTypes.objectOf, errorMessageStyle: PropTypes.objectOf, }; -- GitLab From 9b2196656247ac1ecdd110902eed0557c43007c1 Mon Sep 17 00:00:00 2001 From: akkking Date: Thu, 4 Apr 2019 00:16:16 -0400 Subject: [PATCH 26/79] Add BillsSummaryRow component, fix loan options issue, worked on Bills summary tables --- .../Blocnote/FinancialInputs/BillsSummary.js | 10 + .../FinancialInputs/BillsSummaryRow.js | 74 +++++++ .../FinancialInputs/BillsSummaryTable.js | 43 +--- .../FinancialInputs/CustomerPreference.js | 3 + .../Blocnote/FinancialInputs/LoanOptions.js | 6 +- .../Blocnote/FinancialInputs/test.js | 191 ++++++++++++++++++ 6 files changed, 287 insertions(+), 40 deletions(-) create mode 100644 src/components/Blocnote/FinancialInputs/BillsSummaryRow.js create mode 100644 src/components/Blocnote/FinancialInputs/test.js diff --git a/src/components/Blocnote/FinancialInputs/BillsSummary.js b/src/components/Blocnote/FinancialInputs/BillsSummary.js index 078215fb..c99f8e0d 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummary.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummary.js @@ -11,9 +11,16 @@ class BillsSummary extends Component { successMessages: [], error: false, loading: false, + // rows: [], }; } + // handleRowDel = row => { + // const index = this.state.rows.indexOf(row); + // this.state.rows.splice(index, 1); + // this.setState(this.state.rows); + // }; + render() { const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const BillsSummaryTables = []; @@ -23,6 +30,7 @@ class BillsSummary extends Component { BillsSummaryTables.push(
    @@ -31,6 +39,8 @@ class BillsSummary extends Component { }); } + console.log(this.state.bills); // eslint-disable-line + return (

    diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js new file mode 100644 index 00000000..b9fcfcc9 --- /dev/null +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js @@ -0,0 +1,74 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Button, + InputGroup, + InputGroupAddon, + Input, +} from 'reactstrap'; + + +class BillsSummaryRow extends Component { + constructor(props) { + super(props); + this.state = { + bills: [], + }; + } + // onDelEvent() { + // this.props.onDelEvent(this.props.item); + // } + + render() { + const charge = Math.round(this.props.item.charge * 100) / 100; + + return ( + + + + + Year + + + + + + + + $ + + + + + + {' '} + + + + ); + } +} + +BillsSummaryRow.propTypes = { + item: PropTypes.objectOf, + // onDelEvent: PropTypes.func, +}; + +export default BillsSummaryRow; diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js index 61b1dc8d..061b448e 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -7,6 +7,7 @@ import { InputGroupAddon, Input, } from 'reactstrap'; +import BillsSummaryRow from './BillsSummaryRow'; class BillsSummaryTable extends Component { @@ -25,47 +26,16 @@ class BillsSummaryTable extends Component { // backgroundColor: '#DDDDDD', // color: '#FFFFFF', }; + const rowDel = this.props.onRowDel; let rows = []; - if (this.props.billData !== null) { rows = this.props.billData.map((item) => { - const charge = Math.round(item.charge * 100) / 100; // charge = charge.toLocaleString(); return ( - - - - - Year - - - - - - - - $ - - - - - - {' '} - - - + ); }); rows.push( @@ -121,6 +91,7 @@ class BillsSummaryTable extends Component { } BillsSummaryTable.propTypes = { + onRowDel: PropTypes.func, billName: PropTypes.string, billData: PropTypes.arrayOf, }; diff --git a/src/components/Blocnote/FinancialInputs/CustomerPreference.js b/src/components/Blocnote/FinancialInputs/CustomerPreference.js index e6af2cae..30bd250d 100644 --- a/src/components/Blocnote/FinancialInputs/CustomerPreference.js +++ b/src/components/Blocnote/FinancialInputs/CustomerPreference.js @@ -48,6 +48,7 @@ class CustomerPreference extends Component { type="number" step="any" name="AffordableDownpayment" + value={this.props.data.downpayment} style={{ width: '50%', textAlign: 'left' }} /> @@ -66,6 +67,7 @@ class CustomerPreference extends Component { step="any" name="ExpectedPayback" style={{ width: '50%', textAlign: 'right' }} + value={this.props.data.expected_payback} /> Months @@ -86,6 +88,7 @@ class CustomerPreference extends Component { step="any" name="ExpectedSavingDSCR" style={{ width: '50%', textAlign: 'right' }} + value={this.props.data.expected_net_noi_dscr} /> X diff --git a/src/components/Blocnote/FinancialInputs/LoanOptions.js b/src/components/Blocnote/FinancialInputs/LoanOptions.js index 49243348..7464c77b 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptions.js @@ -73,12 +73,11 @@ class LoanOptions extends Component { @@ -94,12 +93,11 @@ class LoanOptions extends Component { diff --git a/src/components/Blocnote/FinancialInputs/test.js b/src/components/Blocnote/FinancialInputs/test.js new file mode 100644 index 00000000..36525078 --- /dev/null +++ b/src/components/Blocnote/FinancialInputs/test.js @@ -0,0 +1,191 @@ +class Products extends React.Component { + constructor(props) { + super(props); + this.state = {}; + this.state.filterText = ""; + this.state.products = [ + { + id: 1, + category: 'Sporting Goods', + price: '49.99', + qty: 12, + name: 'football' + }, { + id: 2, + category: 'Sporting Goods', + price: '9.99', + qty: 15, + name: 'baseball' + }, + ]; + } + handleUserInput(filterText) { + this.setState({filterText: filterText}); + }; + handleRowDel(product) { + var index = this.state.products.indexOf(product); + this.state.products.splice(index, 1); + this.setState(this.state.products); + }; + handleAddEvent(evt) { + var id = (+ new Date() + Math.floor(Math.random() * 999999)).toString(36); + var product = { + id: id, + name: "", + price: "", + category: "", + qty: 0 + } + this.state.products.push(product); + this.setState(this.state.products); + } + handleProductTable(evt) { + var item = { + id: evt.target.id, + name: evt.target.name, + value: evt.target.value + }; + var products = this.state.products.slice(); + var newProducts = products.map(function(product) { + for (var key in product) { + if (key == item.name && product.id == item.id) { + product[key] = item.value; + } + } + return product; + }); + this.setState({products:newProducts}); + // console.log(this.state.products); + }; + render() { + return ( +
    + + +
    + ); + } +} + +class SearchBar extends React.Component { + handleChange() { + this.props.onUserInput(this.refs.filterTextInput.value); + } + render() { + return ( +
    + +
    + ); + } +} + +class ProductTable extends React.Component { + render() { + var onProductTableUpdate = this.props.onProductTableUpdate; + var rowDel = this.props.onRowDel; + var filterText = this.props.filterText; + var product = this.props.products.map(function(product) { + if (product.name.indexOf(filterText) === -1) { + return; + } + return ( + + ); + }); + return ( +
    + + + + + + + + + + + + {product} + +
    Namepricequantitycategory
    +
    + ); + } +} + +class ProductRow extends React.Component { + onDelEvent() { + this.props.onDelEvent(this.props.product); + } + render() { + return ( + + + + + + + + + + ); + } + +} +class EditableCell extends React.Component { + render() { + return ( + + + + ); + } +} + +ReactDOM.render( < Products / > , document.getElementById('container')); + -- GitLab From d2d288235a4d60f945c3319975445b937c33dec8 Mon Sep 17 00:00:00 2001 From: akkking Date: Sat, 6 Apr 2019 00:32:19 -0400 Subject: [PATCH 27/79] Fixed financial overview data populating issue --- src/components/Blocnote/FinancialInputs.js | 72 +++- .../Blocnote/FinancialInputs/BillsSummary.js | 11 +- .../FinancialInputs/BillsSummaryRow.js | 6 +- .../FinancialInputs/BillsSummaryTable.js | 16 +- .../Blocnote/FinancialInputs/CashBalance.js | 24 +- .../FinancialInputs/CustomerPreference.js | 25 +- .../Blocnote/FinancialInputs/EnergyBills.js | 17 +- .../FinancialInputs/EnergyBillsOverview.js | 34 +- .../FinancialInputs/FinanceOverview.js | 378 ++++++++++++++++++ .../FinancialInputs/IncomeStatements.js | 65 ++- .../Blocnote/FinancialInputs/LoanOptions.js | 27 +- .../FinancialInputs/LoanOptionsRow.js | 4 +- .../FinancialInputs/MortgageLiabilities.js | 23 +- .../FinancialInputs/MortgageLiabilitiesRow.js | 4 +- .../Blocnote/FinancialInputs/ResultMessage.js | 6 +- .../Blocnote/FinancialInputs/csrftoken.js | 2 +- 16 files changed, 627 insertions(+), 87 deletions(-) create mode 100644 src/components/Blocnote/FinancialInputs/FinanceOverview.js diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js index db5d4d5a..132197e0 100644 --- a/src/components/Blocnote/FinancialInputs.js +++ b/src/components/Blocnote/FinancialInputs.js @@ -5,9 +5,9 @@ import ErrorAlert from '../../components/ErrorAlert'; import './styles.css'; import request from '../../utils/request'; import Loading from '../../components/Loading'; -import GeneralInputs from './FinancialInputs/GeneralInputs'; +import FinanceOverview from './FinancialInputs/FinanceOverview'; import EnergyBills from './FinancialInputs/EnergyBills'; -import BillsSummary from './FinancialInputs/BillsSummary'; +// import BillsSummary from './FinancialInputs/BillsSummary'; import EnergyBillsOverview from './FinancialInputs/EnergyBillsOverview'; import IncomeStatements from './FinancialInputs/IncomeStatements'; import CashBalance from './FinancialInputs/CashBalance'; @@ -23,7 +23,7 @@ class FinancialInputs extends Component { this.state = { bills: null, - billsSummary: null, + // billsSummary: null, billsOverview: null, incomeStatements: null, cashBalance: null, @@ -40,30 +40,65 @@ class FinancialInputs extends Component { } componentDidMount() { + this.loadFinanceOverview(); this.loadBills(); - this.loadBillsSummary(); + // this.loadBillsSummary(); this.loadBillsOverview(); this.loadIncomeStatement(); this.loadCashBalance(); this.loadLiabilities(); this.loadLoanOptions(); this.loadCustomerPreference(); - console.log(this.state); // eslint-disable-line } - loadBills = () => { + loadFinanceOverview = () => { this.setState({ loading: true }); - console.log(`${this.state.baseURL}/bills/`); // eslint-disable-line + request(`${this.state.baseURL}/finance-overview/`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + if (!res.err) { + if (Object.keys(res.instance).length > 0) { + const funds = []; + res.instance.funds.forEach(fund => { + funds.push({ + fund_id: fund[0], + fund_name: fund[1], + }); + }); + + let fundDropDownSelectedValue = 'No Fund'; + res.instance.funds.forEach(fund => { + if (fund[0] === res.instance.financing_overview_data.fund_id) { + fundDropDownSelectedValue = fund[1]; + } + }); + this.setState({ + financeData: res.instance.financing_overview_data, + fundOptions: funds, + fundDropDownId: res.instance.financing_overview_data.fund_id, + fundDropDownValue: fundDropDownSelectedValue, + }); + } + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + }); + } + + loadBills = () => { request(`${this.state.baseURL}/bills/`, { method: 'GET', headers: getHeaders(), }).then((res) => { - console.log(res); // eslint-disable-line + // console.log(res); // eslint-disable-line if (!res.err) { if (Object.keys(res.result).length > 0) { this.setState({ bills: res.result }); } - console.log(this.state); // eslint-disable-line + // console.log(this.state); // eslint-disable-line this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); @@ -79,7 +114,7 @@ class FinancialInputs extends Component { }).then((res) => { if (!res.err) { if (Object.keys(res.result).length > 0) { - console.log(res.result); // eslint-disable-line + // console.log(res.result); // eslint-disable-line this.setState({ billsSummary: res.result.user_bill }); } this.resetErrorMessage(); @@ -91,7 +126,6 @@ class FinancialInputs extends Component { } loadBillsOverview = () => { - console.log(`${this.state.baseURL}/bills-overview/`); // eslint-disable-line request(`${this.state.baseURL}/bills-overview/`, { method: 'GET', headers: getHeaders(), @@ -164,10 +198,8 @@ class FinancialInputs extends Component { method: 'GET', headers: getHeaders(), }).then((res) => { - console.log(res); // eslint-disable-line if (!res.err) { if (Object.keys(res).length > 0) { - console.log(res); // eslint-disable-line this.setState({ loans: res.status }); this.setState({ cash: res.cash }); this.setState({ noi: res.noi }); @@ -225,21 +257,25 @@ class FinancialInputs extends Component { error={this.state.error} genericMessage="There was an error" /> - - + /> */} { + // console.log(billData); // eslint-disable-line BillsSummaryTables.push(

    @@ -55,7 +53,12 @@ class BillsSummary extends Component { } BillsSummary.propTypes = { - data: PropTypes.objectOf, + data: PropTypes.shape({ + electric: PropTypes.objectOf, + gas: PropTypes.objectOf, + oil: PropTypes.objectOf, + water: PropTypes.objectOf, + }), }; export default BillsSummary; diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js index b9fcfcc9..c8f9706d 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js @@ -20,6 +20,8 @@ class BillsSummaryRow extends Component { // } render() { + // console.log(this.props.item); // eslint-disable-line + const onDelEvent = this.props.onDelEvent; const charge = Math.round(this.props.item.charge * 100) / 100; return ( @@ -56,7 +58,7 @@ class BillsSummaryRow extends Component { {' '} @@ -68,7 +70,7 @@ class BillsSummaryRow extends Component { BillsSummaryRow.propTypes = { item: PropTypes.objectOf, - // onDelEvent: PropTypes.func, + onDelEvent: PropTypes.func, }; export default BillsSummaryRow; diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js index 061b448e..53265f89 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -17,23 +17,30 @@ class BillsSummaryTable extends Component { successMessages: [], error: false, loading: false, + rows: this.props.billData, }; } + deleteRow = index => { + const rows = [...this.state.rows]; + rows.splice(index, 1); + this.setState({ rows }); + } + render() { const tableHeaderStyle = { textAlign: 'left', // backgroundColor: '#DDDDDD', // color: '#FFFFFF', }; - const rowDel = this.props.onRowDel; + let rows = []; - if (this.props.billData !== null) { - rows = this.props.billData.map((item) => { + if (this.state.rows !== []) { + rows = this.state.rows.map((item) => { // charge = charge.toLocaleString(); return ( ); @@ -91,7 +98,6 @@ class BillsSummaryTable extends Component { } BillsSummaryTable.propTypes = { - onRowDel: PropTypes.func, billName: PropTypes.string, billData: PropTypes.arrayOf, }; diff --git a/src/components/Blocnote/FinancialInputs/CashBalance.js b/src/components/Blocnote/FinancialInputs/CashBalance.js index c8f0005d..d018b238 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalance.js +++ b/src/components/Blocnote/FinancialInputs/CashBalance.js @@ -24,9 +24,9 @@ class CashBalance extends Component { 'Balance Amount', 'Statement Date', 'Balance Sheet', - 'Option'].map((title) => { + 'Option'].map((title, key) => { return ( - + {title} ); @@ -37,8 +37,9 @@ class CashBalance extends Component { rows = this.props.data.map((item, index) => { return ( @@ -81,9 +82,20 @@ class CashBalance extends Component { } CashBalance.propTypes = { - blockStyle: PropTypes.string, - headerStyle: PropTypes.string, - data: PropTypes.objectOf, + blockStyle: PropTypes.shape({ + marginBottom: PropTypes.string, + }), + headerStyle: PropTypes.shape({ + textAlign: PropTypes.string, + marginBottom: PropTypes.string, + }), + data: PropTypes.arrayOf( + PropTypes.shape({ + balance_amount: PropTypes.string, + is_from_balance_sheet: PropTypes.boolean, + statement_date: PropTypes.string, + }), + ), }; export default CashBalance; diff --git a/src/components/Blocnote/FinancialInputs/CustomerPreference.js b/src/components/Blocnote/FinancialInputs/CustomerPreference.js index 30bd250d..97ed9176 100644 --- a/src/components/Blocnote/FinancialInputs/CustomerPreference.js +++ b/src/components/Blocnote/FinancialInputs/CustomerPreference.js @@ -23,9 +23,9 @@ class CustomerPreference extends Component { const header = [ 'Preference', 'Value (if values is not known, please leave it blank)', - ].map((title) => { + ].map((title, key) => { return ( - + {title} ); @@ -35,7 +35,7 @@ class CustomerPreference extends Component { const style = { fontWeight: 'bold' }; if (this.props.data !== null) { rows.push( - + Affordable Downpayment (?) @@ -56,7 +56,7 @@ class CustomerPreference extends Component { ); rows.push( - + Expected Payback (?) @@ -77,7 +77,7 @@ class CustomerPreference extends Component { ); rows.push( - + Expected Saving DSCR (?) @@ -131,9 +131,18 @@ class CustomerPreference extends Component { } CustomerPreference.propTypes = { - blockStyle: PropTypes.string, - headerStyle: PropTypes.string, - data: PropTypes.objectOf, + blockStyle: PropTypes.shape({ + marginBottom: PropTypes.string, + }), + headerStyle: PropTypes.shape({ + textAlign: PropTypes.string, + marginBottom: PropTypes.string, + }), + data: PropTypes.shape({ + downpayment: PropTypes.string, + expected_net_noi_dscr: PropTypes.string, + expected_payback: PropTypes.string, + }), }; export default CustomerPreference; diff --git a/src/components/Blocnote/FinancialInputs/EnergyBills.js b/src/components/Blocnote/FinancialInputs/EnergyBills.js index f8ee4bcf..ac46b0e5 100644 --- a/src/components/Blocnote/FinancialInputs/EnergyBills.js +++ b/src/components/Blocnote/FinancialInputs/EnergyBills.js @@ -23,7 +23,7 @@ class EnergyBills extends Component {

    - +
    @@ -39,7 +39,7 @@ class EnergyBills extends Component {
    Electricity
    - +
    @@ -55,7 +55,7 @@ class EnergyBills extends Component {
    Gas
    - +
    @@ -71,7 +71,7 @@ class EnergyBills extends Component {
    Oil
    - +
    @@ -93,8 +93,13 @@ class EnergyBills extends Component { } EnergyBills.propTypes = { - blockStyle: PropTypes.string, - headerStyle: PropTypes.string, + blockStyle: PropTypes.shape({ + marginBottom: PropTypes.string, + }), + headerStyle: PropTypes.shape({ + textAlign: PropTypes.string, + marginBottom: PropTypes.string, + }), // data: PropTypes.objectOf, }; diff --git a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js index 797b9865..76a390ba 100644 --- a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js +++ b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js @@ -39,9 +39,11 @@ class EnergyBillsOverview extends Component { } buildHeader = (headerNames) => { - return [...headerNames, ...Object.keys(this.props.data.electric)].map((name) => { + return [...headerNames, ...Object.keys(this.props.data.electric)].map((name, key) => { return ( - + ); }); } @@ -53,9 +55,11 @@ class EnergyBillsOverview extends Component { cellValue = cellValue.toLocaleString(); return `$${cellValue}`; }); - return [...footerNames, ...cellValues].map((name) => { + return [...footerNames, ...cellValues].map((name, key) => { return ( - + ); }); } @@ -86,12 +90,12 @@ class EnergyBillsOverview extends Component { rows = Object.keys(this.props.data) .filter(billName => validBillNames.includes(billName)) - .map((billName) => { + .map((billName, trKey) => { const cells = [ ...['Annual Estimate', billName.charAt(0).toUpperCase() + billName.slice(1)], ...Object.values(this.props.data[billName]), ]; - const cellsData = Object.values(cells).map((amount) => { + const cellsData = Object.values(cells).map((amount, tdKey) => { let cellValue = amount; if (!isNaN(cellValue)) { @@ -101,7 +105,7 @@ class EnergyBillsOverview extends Component { } return ( - + {cellsData} ); @@ -128,7 +132,7 @@ class EnergyBillsOverview extends Component { {this.state.estimationDropDownValue} - + {estimationOptions} @@ -167,7 +171,17 @@ class EnergyBillsOverview extends Component { } EnergyBillsOverview.propTypes = { - data: PropTypes.objectOf, + data: PropTypes.shape({ + electric: PropTypes.objectOf, + electric_user: PropTypes.string, + gas: PropTypes.objectOf, + gas_user: PropTypes.string, + oil: PropTypes.objectOf, + oil_user: PropTypes.string, + water: PropTypes.objectOf, + water_user: PropTypes.string, + total_annual_charge: PropTypes.objectOf, + }), }; export default EnergyBillsOverview; diff --git a/src/components/Blocnote/FinancialInputs/FinanceOverview.js b/src/components/Blocnote/FinancialInputs/FinanceOverview.js new file mode 100644 index 00000000..fcdf1e88 --- /dev/null +++ b/src/components/Blocnote/FinancialInputs/FinanceOverview.js @@ -0,0 +1,378 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Dropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + Button, + Form, + FormGroup, + Input, + InputGroup, + InputGroupAddon, +} from 'reactstrap'; +import CSRFToken from './csrftoken'; +import ResultMessage from './ResultMessage'; + + +class FinanceOverview extends Component { + constructor(props) { + super(props); + this.toggleFund = this.toggleFund.bind(this); + this.changeFund = this.changeFund.bind(this); + this.submitForm = this.submitForm.bind(this); + this.state = { + error: false, + loading: false, + financeData: props.financeData, + fundOptions: props.fundOptions, + fundDropDownId: props.fundDropDownId, + fundDropDownValue: props.fundDropDownValue, + fundDropdownOpen: false, + didFundChange: false, + isFirstTime: false, + csrftoken: null, + showLoanOptionsTable: false, + messageStyle: {}, + messageContent: null, + }; + } + + toggleFund = () => { + this.setState({ + fundDropdownOpen: !this.state.fundDropdownOpen, + }); + } + + changeFund = (event) => { + this.setState({ fundDropDownValue: event.currentTarget.textContent }); + this.setState({ fundDropDownId: event.currentTarget.id }); + } + + submitForm = (event) => { + event.preventDefault(); + const formData = new FormData(event.target); + formData.set('fund_id', this.state.fundDropDownId); + + this.setState({ + csrftoken: formData.get('csrfmiddlewaretoken'), + }); + + if (formData.get('fund_id') === '0') { + this.setState({ + messageContent: 'Please select a fund type', + messageStyle: this.props.errorMessageStyle, + }); + } else { + fetch(`${this.props.baseURL}/loan-options/?loans=all-loans`) + .then((res) => { + console.log(res); // eslint-disable-line + this.setState({ + isFirstTime: !res.load, + }); + const result = {}; + formData.forEach((value, field) => { + result[field] = value; + }); + const constructionStartDate = new Date(result.anticipated_construction_start_date); + const constructionCommissioningDate = new Date(result.anticipated_commissioning_date); + if (constructionStartDate > constructionCommissioningDate) { + this.setState({ + messageContent: 'Anticipated Commissioning date has to be after Anticipated Construction start date', + messageStyle: this.props.errorMessageStyle, + }); + } else { + this.loadFinancialOverview(result); + } + }); + } + } + + loadFinancialOverview = (result) => { + fetch(`${this.props.baseURL}/finance-overview/`, { + method: 'PUT', + credentials: 'same-origin', + body: JSON.stringify(result), + headers: new Headers({ + 'Content-Type': 'application/json', + 'X-CSRFToken': this.state.csrftoken, + }), + }).then((res) => { + console.log(res); // eslint-disable-line + if (!res.err) { + this.setState({ + messageContent: 'Saved.', + messageStyle: this.props.successMessageStyle, + }); + + if (this.state.didFundChange) { + this.setState({ + messageContent: `${this.state.responseMessage} Loan Options table is reloaded.`, + messageStyle: this.props.errorMessageStyle, + }); + } + + if (this.state.didFundChange || this.state.isFirstTime) { + this.setState({ + didFundChange: false, + }); + this.deleteLoanOptions(); + } + } else { + const errors = []; + res.err.responseBody.then((error) => { + Object.keys(error).forEach((key) => { + errors.push(`${error[key][0]}`); + }); + }); + this.setState({ + errorMessage: errors, + }); + } + }); + } + + deleteLoanOptions = () => { + fetch(`${this.props.baseURL}/loan-options/?loans=delete-loan-options`, { + method: 'GET', + credentials: 'same-origin', + headers: { + 'Content-Type': 'application/json', + }, + }).then(() => { + this.setState({ + showLoanOptionsTable: false, + }); + }); + } + + render() { + const lineSpaceStyle = { textAlign: 'left' }; + let mainContent = ''; + + if (this.props.financeData !== null && this.props.fundOptions !== null) { + const fundOptions = []; + this.props.fundOptions.forEach((fund) => { + fundOptions.push( + + {fund.fund_name} + + ); + }); + + mainContent = ( +
    + +
    +
    +
    +
    + Pro Forma Start Date +
    +
    + + + +
    +
    +
    +
    + Pro Forma Duration +
    +
    + + + + + Years + + + +
    +
    +
    +
    + Analysis Date +
    +
    + + + +
    +
    +
    +
    +
    + + + + {this.state.fundDropDownValue} + + + {fundOptions} + + + +
    +
    +
    +
    +
    +
    + Anticipated Construction Start Date +
    +
    + + + +
    +
    +
    +
    + Anticipated Commissioning Date +
    +
    + + + +
    +
    +
    +
    + Anticipated Construction Period +
    +
    + + + + + Weeks + + + +
    +
    +
    +
    +
    + + +
    +
    +
    +
    + + ); + } + + return ( +
    + {mainContent} +
    + ); + } +} + +FinanceOverview.propTypes = { + fundDropDownId: PropTypes.number, + fundDropDownValue: PropTypes.string, + fundOptions: PropTypes.arrayOf( + PropTypes.shape({ + fund_id: PropTypes.number, + fund_name: PropTypes.string, + }) + ), + financeData: PropTypes.shape({ + analysis_date: PropTypes.string, + anticipated_commissioning_date: PropTypes.string, + anticipated_construction_period: PropTypes.string, + anticipated_construction_start_date: PropTypes.string, + fund_id: PropTypes.number, + pro_forma_duration: PropTypes.string, + pro_forma_start_date: PropTypes.string, + }), + baseURL: PropTypes.string, + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), +}; + +FinanceOverview.defaultProps = { + financeData: PropTypes.shape({ + analysis_date: '', + anticipated_commissioning_date: '', + anticipated_construction_period: '', + anticipated_construction_start_date: '', + fund_id: 0, + pro_forma_duration: '', + pro_forma_start_date: '', + }), + fundDropDownId: 0, + fundDropDownValue: 'Select Fund', + fundOptions: null, +}; + +export default FinanceOverview; diff --git a/src/components/Blocnote/FinancialInputs/IncomeStatements.js b/src/components/Blocnote/FinancialInputs/IncomeStatements.js index e084a636..df1d77b3 100644 --- a/src/components/Blocnote/FinancialInputs/IncomeStatements.js +++ b/src/components/Blocnote/FinancialInputs/IncomeStatements.js @@ -60,9 +60,9 @@ class IncomeStatements extends Component { ...Object.keys(this.props.data.hist), ...[this.props.data.future.year], ...['Average'], - ].map((name) => { + ].map((name, key) => { return ( -
    + ); }); } @@ -117,7 +117,7 @@ class IncomeStatements extends Component { header = this.buildHeader(['Year']); const histYears = Object.keys(this.props.data.hist).sort(); - rows = columnKeys.map((columnKey) => { + rows = columnKeys.map((columnKey, id) => { const cells = [ ...[columnNames[columnKey]], ...histYears.map((histYear) => { @@ -143,9 +143,9 @@ class IncomeStatements extends Component { }), ]; - const cellsData = Object.values(cells).map((celldata) => { + const cellsData = Object.values(cells).map((celldata, key) => { return ( - + {cellsData} ); @@ -176,7 +176,7 @@ class IncomeStatements extends Component { {this.state.growthRateDropdownValue} - + {growthRateOptions} @@ -207,9 +207,54 @@ class IncomeStatements extends Component { } IncomeStatements.propTypes = { - blockStyle: PropTypes.string, - headerStyle: PropTypes.string, - data: PropTypes.objectOf, + blockStyle: PropTypes.shape({ + marginBottom: PropTypes.string, + }), + headerStyle: PropTypes.shape({ + textAlign: PropTypes.string, + marginBottom: PropTypes.string, + }), + data: PropTypes.shape({ + average: PropTypes.shape({ + electric_opex: PropTypes.number, + energy_opex: PropTypes.number, + gas_opex: PropTypes.number, + net_non_energy_opex: PropTypes.number, + noi: PropTypes.number, + non_utility_expense: PropTypes.number, + oil_opex: PropTypes.number, + other_utility: PropTypes.number, + revenue: PropTypes.number, + total_opex: PropTypes.number, + utility_expense: PropTypes.number, + water_opex: PropTypes.number, + year: null, + }), + cagr: PropTypes.number, + future: PropTypes.shape({ + electric_opex: PropTypes.number, + energy_opex: PropTypes.number, + gas_opex: PropTypes.number, + net_non_energy_opex: PropTypes.number, + noi: PropTypes.number, + non_utility_expense: PropTypes.number, + oil_opex: PropTypes.number, + other_utility: PropTypes.number, + revenue: PropTypes.number, + total_opex: PropTypes.number, + utility_expense: PropTypes.number, + water_opex: PropTypes.number, + year: null, + }), + growth_rate: PropTypes.number, + hist: PropTypes.objectOf, + result: PropTypes.arrayOf(PropTypes.shape({ + year: PropTypes.string, + revenue: PropTypes.string, + utility_expense: PropTypes.string, + non_utility_operating_expense: PropTypes.string, + })), + }), }; export default IncomeStatements; diff --git a/src/components/Blocnote/FinancialInputs/LoanOptions.js b/src/components/Blocnote/FinancialInputs/LoanOptions.js index 7464c77b..533daf72 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptions.js @@ -30,9 +30,9 @@ class LoanOptions extends Component { 'Duration', 'Maximum Loan Amount', 'Option', - ].map((title) => { + ].map((title, key) => { return ( - ); @@ -43,11 +43,12 @@ class LoanOptions extends Component { loans = this.props.loans.map((loan, index) => { return ( ); }); @@ -132,11 +133,23 @@ class LoanOptions extends Component { } LoanOptions.propTypes = { - blockStyle: PropTypes.string, - headerStyle: PropTypes.string, + blockStyle: PropTypes.shape({ + marginBottom: PropTypes.string, + }), + headerStyle: PropTypes.shape({ + textAlign: PropTypes.string, + marginBottom: PropTypes.string, + }), cash: PropTypes.number, noi: PropTypes.number, - loans: PropTypes.objectOf, + loans: PropTypes.arrayOf( + PropTypes.shape({ + duration: PropTypes.string, + interest_rate: PropTypes.string, + lender: PropTypes.string, + max_loan_amount: PropTypes.string, + }), + ), }; export default LoanOptions; diff --git a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js index 3247c29a..123456a6 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js @@ -39,7 +39,7 @@ class LoanOptionsRow extends Component { type="number" step="any" name="remainingTerm" - value={this.props.interestRate} + value={parseFloat(this.props.interestRate)} style={{ width: '50%', textAlign: 'right' }} /> @@ -89,7 +89,7 @@ LoanOptionsRow.propTypes = { LoanNum: PropTypes.number, lender: PropTypes.string, interestRate: PropTypes.number, - duration: PropTypes.number, + duration: PropTypes.string, maxLoanAmount: PropTypes.number, }; diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js index 4490907e..a30eff5e 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -26,9 +26,9 @@ class MortgageLiabilities extends Component { 'Remaining Terms', 'Input Date', 'Option', - ].map((title) => { + ].map((title, key) => { return ( - ); @@ -39,6 +39,7 @@ class MortgageLiabilities extends Component { rows = this.props.data.map((item, index) => { return ( { }; ResultMessage.propTypes = { - messageStyle: PropTypes.string, + messageStyle: PropTypes.shape({ + downpayment: PropTypes.string, + expected_net_noi_dscr: PropTypes.string, + expected_payback: PropTypes.string, + }), messageContent: PropTypes.string, }; diff --git a/src/components/Blocnote/FinancialInputs/csrftoken.js b/src/components/Blocnote/FinancialInputs/csrftoken.js index 0db22295..7c7bc44c 100644 --- a/src/components/Blocnote/FinancialInputs/csrftoken.js +++ b/src/components/Blocnote/FinancialInputs/csrftoken.js @@ -7,7 +7,7 @@ const getCookie = (name) => { for (let i = 0; i < cookies.length; i += 1) { let cookie = cookies[i]; cookie = cookie.trim(); - console.log(cookie); // eslint-disable-line + // console.log(cookie); // eslint-disable-line if (cookie.substring(0, name.length + 1) === `${name}=`) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; -- GitLab From 7ce300a69b0530100a60e5667fc9080dc2234a21 Mon Sep 17 00:00:00 2001 From: akkking Date: Sat, 6 Apr 2019 21:40:07 -0400 Subject: [PATCH 28/79] Fix React tate issue for finance overview --- src/components/Blocnote/FinancialInputs.js | 97 ++++++----- .../Blocnote/FinancialInputs/BillsSummary.js | 3 - .../FinancialInputs/BillsSummaryTable.js | 3 - .../Blocnote/FinancialInputs/CashBalance.js | 3 - .../FinancialInputs/CashBalanceRow.js | 2 - .../Blocnote/FinancialInputs/EnergyBills.js | 160 ++++++++---------- .../FinancialInputs/EnergyBillsOverview.js | 3 - .../FinancialInputs/FinanceOverview.js | 57 +++++-- .../FinancialInputs/IncomeStatements.js | 3 - .../Blocnote/FinancialInputs/LoanOptions.js | 3 - .../FinancialInputs/LoanOptionsRow.js | 2 - .../FinancialInputs/MortgageLiabilities.js | 3 - .../FinancialInputs/MortgageLiabilitiesRow.js | 2 - .../Blocnote/FinancialInputs/ResultMessage.js | 7 - 14 files changed, 170 insertions(+), 178 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js index 132197e0..3f8f1005 100644 --- a/src/components/Blocnote/FinancialInputs.js +++ b/src/components/Blocnote/FinancialInputs.js @@ -20,7 +20,7 @@ import { getHeaders, blocnoteURL } from '../../utils/restServices'; class FinancialInputs extends Component { constructor(props) { super(props); - + this.mounted = false; this.state = { bills: null, // billsSummary: null, @@ -34,12 +34,14 @@ class FinancialInputs extends Component { customerPreference: null, successMessages: [], error: false, - loading: false, + loading: true, baseURL: `${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs`, }; } componentDidMount() { + this.mounted = true; + this.loading(); this.loadFinanceOverview(); this.loadBills(); // this.loadBillsSummary(); @@ -49,42 +51,61 @@ class FinancialInputs extends Component { this.loadLiabilities(); this.loadLoanOptions(); this.loadCustomerPreference(); + this.unloading(); } - loadFinanceOverview = () => { + loading = () => { this.setState({ loading: true }); + } + + unloading = () => { + this.setState({ loading: false }); + } + + loadFinanceOverview = () => { request(`${this.state.baseURL}/finance-overview/`, { method: 'GET', headers: getHeaders(), }).then((res) => { - if (!res.err) { - if (Object.keys(res.instance).length > 0) { - const funds = []; - res.instance.funds.forEach(fund => { - funds.push({ - fund_id: fund[0], - fund_name: fund[1], + if (this.mounted) { + if (!res.err) { + if (Object.keys(res.instance).length > 0) { + const funds = []; + res.instance.funds.forEach(fund => { + funds.push({ + fund_id: fund[0], + fund_name: fund[1], + }); + }); + + const financeData = res.instance.financing_overview_data; + let fundDropDownSelectedValue = 'No Fund'; + res.instance.funds.forEach(fund => { + if (fund[0] === financeData.fund_id) { + fundDropDownSelectedValue = fund[1]; + } }); - }); - let fundDropDownSelectedValue = 'No Fund'; - res.instance.funds.forEach(fund => { - if (fund[0] === res.instance.financing_overview_data.fund_id) { - fundDropDownSelectedValue = fund[1]; - } - }); - this.setState({ - financeData: res.instance.financing_overview_data, - fundOptions: funds, - fundDropDownId: res.instance.financing_overview_data.fund_id, - fundDropDownValue: fundDropDownSelectedValue, - }); + const acp = parseInt(financeData.anticipated_construction_period, 10); + this.setState({ + financeData: res.instance.financing_overview_data, + fundOptions: funds, + fundDropDownId: financeData.fund_id, + fundDropDownValue: fundDropDownSelectedValue, + proFormaStartDate: financeData.pro_forma_start_date, + proFormaDuration: financeData.pro_forma_duration, + analysisDate: financeData.analysis_date, + anticipatedConstructionStartDate: financeData.anticipated_construction_start_date, + anticipatedCommissioningDate: financeData.anticipated_commissioning_date, + anticipatedConstructionPeriod: acp, + }); + console.log(this.state); // eslint-disable-line + } + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); } - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); } - this.setState({ loading: false }); }); } @@ -93,17 +114,14 @@ class FinancialInputs extends Component { method: 'GET', headers: getHeaders(), }).then((res) => { - // console.log(res); // eslint-disable-line if (!res.err) { if (Object.keys(res.result).length > 0) { this.setState({ bills: res.result }); } - // console.log(this.state); // eslint-disable-line this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); } - this.setState({ loading: false }); }); } @@ -114,14 +132,12 @@ class FinancialInputs extends Component { }).then((res) => { if (!res.err) { if (Object.keys(res.result).length > 0) { - // console.log(res.result); // eslint-disable-line this.setState({ billsSummary: res.result.user_bill }); } this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); } - this.setState({ loading: false }); }); } @@ -138,7 +154,6 @@ class FinancialInputs extends Component { } else if (res.err) { this.setState({ error: res.err }); } - this.setState({ loading: false }); }); } @@ -155,7 +170,6 @@ class FinancialInputs extends Component { } else if (res.err) { this.setState({ error: res.err }); } - this.setState({ loading: false }); }); } @@ -172,7 +186,6 @@ class FinancialInputs extends Component { } else if (res.err) { this.setState({ error: res.err }); } - this.setState({ loading: false }); }); } @@ -189,7 +202,6 @@ class FinancialInputs extends Component { } else if (res.err) { this.setState({ error: res.err }); } - this.setState({ loading: false }); }); } @@ -208,7 +220,6 @@ class FinancialInputs extends Component { } else if (res.err) { this.setState({ error: res.err }); } - this.setState({ loading: false }); }); } @@ -225,7 +236,6 @@ class FinancialInputs extends Component { } else if (res.err) { this.setState({ error: res.err }); } - this.setState({ loading: false }); }); } @@ -248,9 +258,8 @@ class FinancialInputs extends Component { fontWeight: 'bold', }; - if (this.state.loading) { - mainContent = ; - } else { + mainContent = ; + if (this.state.financeData !== undefined) { mainContent = (
    -

    - Energy Bills -

    -
    -
    -
    Water{name} + {name} + {name} + {name} + + {cellValue} @@ -110,7 +114,7 @@ class EnergyBillsOverview extends Component { }); return ( -
    {name}{name} + {celldata} @@ -154,7 +154,7 @@ class IncomeStatements extends Component { }); return ( -
    + {title} + {title}
    - - - - - - - - - - -
    Electricity
    - No Bills available -
    -
    -
    - - - - - - - - - - - -
    Gas
    - No Bills available -
    -
    -
    - - - - - - - - - - - -
    Oil
    - No Bills available -
    -
    -
    - - - - - - - - - - - -
    Water
    - No Bills available -
    -
    +const EnergyBills = (props) => { + return ( +
    +

    + Energy Bills +

    +
    +
    + + + + + + + + + + + +
    Electricity
    + No Bills available +
    +
    +
    + + + + + + + + + + + +
    Gas
    + No Bills available +
    +
    +
    + + + + + + + + + + + +
    Oil
    + No Bills available +
    +
    +
    + + + + + + + + + + + +
    Water
    + No Bills available +
    - ); - } -} +
    + ); +}; EnergyBills.propTypes = { blockStyle: PropTypes.shape({ diff --git a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js index 76a390ba..7e1a8487 100644 --- a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js +++ b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js @@ -16,9 +16,6 @@ class EnergyBillsOverview extends Component { this.toggleEstimation = this.toggleEstimation.bind(this); this.changeEstimation = this.changeEstimation.bind(this); this.state = { - successMessages: [], - error: false, - loading: false, estimationDropdownOpen: false, estimationDropDownValue: 'Select Estimation', estimationOptions: [ diff --git a/src/components/Blocnote/FinancialInputs/FinanceOverview.js b/src/components/Blocnote/FinancialInputs/FinanceOverview.js index fcdf1e88..59eec5b0 100644 --- a/src/components/Blocnote/FinancialInputs/FinanceOverview.js +++ b/src/components/Blocnote/FinancialInputs/FinanceOverview.js @@ -19,12 +19,11 @@ import ResultMessage from './ResultMessage'; class FinanceOverview extends Component { constructor(props) { super(props); + this.handleOnChange = this.handleOnChange.bind(this); this.toggleFund = this.toggleFund.bind(this); this.changeFund = this.changeFund.bind(this); this.submitForm = this.submitForm.bind(this); this.state = { - error: false, - loading: false, financeData: props.financeData, fundOptions: props.fundOptions, fundDropDownId: props.fundDropDownId, @@ -36,7 +35,14 @@ class FinanceOverview extends Component { showLoanOptionsTable: false, messageStyle: {}, messageContent: null, + proFormaStartDate: props.proFormaStartDate, + proFormaDuration: props.proFormaDuration, + analysisDate: props.analysisDate, + anticipatedConstructionStartDate: props.anticipatedConstructionStartDate, + anticipatedCommissioningDate: props.anticipatedCommissioningDate, + anticipatedConstructionPeriod: props.anticipatedConstructionPeriod, }; + console.log(this.state); // eslint-disable-line } toggleFund = () => { @@ -67,13 +73,13 @@ class FinanceOverview extends Component { } else { fetch(`${this.props.baseURL}/loan-options/?loans=all-loans`) .then((res) => { - console.log(res); // eslint-disable-line this.setState({ isFirstTime: !res.load, }); const result = {}; formData.forEach((value, field) => { - result[field] = value; + const key = field.split(/(?=[A-Z])/).join('_').toLowerCase(); + result[key] = value; }); const constructionStartDate = new Date(result.anticipated_construction_start_date); const constructionCommissioningDate = new Date(result.anticipated_commissioning_date); @@ -99,7 +105,6 @@ class FinanceOverview extends Component { 'X-CSRFToken': this.state.csrftoken, }), }).then((res) => { - console.log(res); // eslint-disable-line if (!res.err) { this.setState({ messageContent: 'Saved.', @@ -147,6 +152,10 @@ class FinanceOverview extends Component { }); } + handleOnChange = (event) => { + this.setState({ [event.target.name]: event.target.value }); + } + render() { const lineSpaceStyle = { textAlign: 'left' }; let mainContent = ''; @@ -178,9 +187,10 @@ class FinanceOverview extends Component { @@ -197,9 +207,10 @@ class FinanceOverview extends Component { type="number" step="any" id="pro_forma_duration" - name="pro_forma_duration" + name="proFormaDuration" required - value={this.props.financeData.pro_forma_duration} + onChange={this.handleOnChange} + value={this.state.proFormaDuration} style={{ width: '50%', textAlign: 'right' }} /> @@ -217,9 +228,10 @@ class FinanceOverview extends Component { @@ -256,9 +268,10 @@ class FinanceOverview extends Component { @@ -272,9 +285,10 @@ class FinanceOverview extends Component { @@ -291,9 +305,10 @@ class FinanceOverview extends Component { type="number" step="any" id="anticipated_construction_period" - name="anticipated_construction_period" + name="anticipatedConstructionPeriod" required - value={this.props.financeData.anticipated_construction_period} + onChange={this.handleOnChange} + value={this.state.anticipatedConstructionPeriod} style={{ width: '50%', textAlign: 'right' }} /> @@ -338,6 +353,14 @@ FinanceOverview.propTypes = { fund_name: PropTypes.string, }) ), + + proFormaStartDate: PropTypes.string, + proFormaDuration: PropTypes.string, + analysisDate: PropTypes.string, + anticipatedConstructionStartDate: PropTypes.string, + anticipatedCommissioningDate: PropTypes.string, + anticipatedConstructionPeriod: PropTypes.number, + financeData: PropTypes.shape({ analysis_date: PropTypes.string, anticipated_commissioning_date: PropTypes.string, diff --git a/src/components/Blocnote/FinancialInputs/IncomeStatements.js b/src/components/Blocnote/FinancialInputs/IncomeStatements.js index df1d77b3..096523ef 100644 --- a/src/components/Blocnote/FinancialInputs/IncomeStatements.js +++ b/src/components/Blocnote/FinancialInputs/IncomeStatements.js @@ -16,9 +16,6 @@ class IncomeStatements extends Component { this.toggleGrowthRate = this.toggleGrowthRate.bind(this); this.changeGrowthRate = this.changeGrowthRate.bind(this); this.state = { - successMessages: [], - error: false, - loading: false, growthRateDropdownOpen: false, growthRateDropdownValue: 'Growth Rate', growthRateOptions: [ diff --git a/src/components/Blocnote/FinancialInputs/LoanOptions.js b/src/components/Blocnote/FinancialInputs/LoanOptions.js index 533daf72..49c02fbd 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptions.js @@ -14,11 +14,8 @@ import LoanOptionsRow from './LoanOptionsRow'; class LoanOptions extends Component { constructor(props) { super(props); - this.state = { successMessages: [], - error: false, - loading: false, }; } diff --git a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js index 123456a6..a3ea81c6 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js @@ -13,8 +13,6 @@ class LoanOptionsRow extends Component { super(props); this.state = { successMessages: [], - error: false, - loading: false, }; } diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js index a30eff5e..5ceb85a7 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -10,11 +10,8 @@ import MortgageLiabilitiesRow from './MortgageLiabilitiesRow'; class MortgageLiabilities extends Component { constructor(props) { super(props); - this.state = { successMessages: [], - error: false, - loading: false, }; } diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js index 8aea1b4c..8123756d 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js @@ -12,8 +12,6 @@ class MortgageLiabilitiesRow extends Component { super(props); this.state = { successMessages: [], - error: false, - loading: false, }; } diff --git a/src/components/Blocnote/FinancialInputs/ResultMessage.js b/src/components/Blocnote/FinancialInputs/ResultMessage.js index 59adf29c..22e20eea 100644 --- a/src/components/Blocnote/FinancialInputs/ResultMessage.js +++ b/src/components/Blocnote/FinancialInputs/ResultMessage.js @@ -3,13 +3,6 @@ import PropTypes from 'prop-types'; const ResultMessage = (props) => { - // let message = { - // style: {}, - // content: '', - // }; - // if (props.messageContent !== null) { - // message = props.messageContent; - // } return ( {props.messageContent} -- GitLab From 044639513ac0c2f09878c61e2236e5ef4d1af74d Mon Sep 17 00:00:00 2001 From: akkking Date: Sun, 7 Apr 2019 01:20:57 -0400 Subject: [PATCH 29/79] Fix bills summary rows not showing issue --- src/components/Blocnote/FinancialInputs.js | 43 +++++++------ .../Blocnote/FinancialInputs/BillsSummary.js | 64 ++++++++++++++++--- .../FinancialInputs/BillsSummaryRow.js | 34 ++++++---- .../FinancialInputs/BillsSummaryTable.js | 33 ++++++---- 4 files changed, 126 insertions(+), 48 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js index 3f8f1005..df1a08f9 100644 --- a/src/components/Blocnote/FinancialInputs.js +++ b/src/components/Blocnote/FinancialInputs.js @@ -7,7 +7,7 @@ import request from '../../utils/request'; import Loading from '../../components/Loading'; import FinanceOverview from './FinancialInputs/FinanceOverview'; import EnergyBills from './FinancialInputs/EnergyBills'; -// import BillsSummary from './FinancialInputs/BillsSummary'; +import BillsSummary from './FinancialInputs/BillsSummary'; import EnergyBillsOverview from './FinancialInputs/EnergyBillsOverview'; import IncomeStatements from './FinancialInputs/IncomeStatements'; import CashBalance from './FinancialInputs/CashBalance'; @@ -22,8 +22,9 @@ class FinancialInputs extends Component { super(props); this.mounted = false; this.state = { + financeData: null, bills: null, - // billsSummary: null, + billsSummary: null, billsOverview: null, incomeStatements: null, cashBalance: null, @@ -44,7 +45,7 @@ class FinancialInputs extends Component { this.loading(); this.loadFinanceOverview(); this.loadBills(); - // this.loadBillsSummary(); + this.loadBillsSummary(); this.loadBillsOverview(); this.loadIncomeStatement(); this.loadCashBalance(); @@ -114,13 +115,15 @@ class FinancialInputs extends Component { method: 'GET', headers: getHeaders(), }).then((res) => { - if (!res.err) { - if (Object.keys(res.result).length > 0) { - this.setState({ bills: res.result }); + if (this.mounted) { + if (!res.err) { + if (Object.keys(res.result).length > 0) { + this.setState({ bills: res.result }); + } + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); } - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); } }); } @@ -130,13 +133,16 @@ class FinancialInputs extends Component { method: 'GET', headers: getHeaders(), }).then((res) => { - if (!res.err) { - if (Object.keys(res.result).length > 0) { - this.setState({ billsSummary: res.result.user_bill }); + if (this.mounted) { + if (!res.err) { + if (Object.keys(res.result).length > 0) { + this.setState({ billsSummary: res.result.user_bill }); + } + console.log(this.state); // eslint-disable-line + this.resetErrorMessage(); + } else if (res.err) { + this.setState({ error: res.err }); } - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); } }); } @@ -259,7 +265,8 @@ class FinancialInputs extends Component { }; mainContent = ; - if (this.state.financeData !== undefined) { + if (this.state.financeData !== null && + this.state.billsSummary !== null) { mainContent = (
    - {/* */} + /> { + // this.props.onDelEvent(year, index); + console.log(billName); // eslint-disable-line + console.log(year); // eslint-disable-line + + // const billSummary = this.state.billSummary; + // Object.keys(billSummary).forEach(loopBillName => { + // if (loopBillName === billName) { + // billSummary[loopBillName].forEach((bill, index) => { + // if (bill.year === year) { + // billSummary[billName].splice(index, 1); + // } + // }); + // } + // }); + // this.setState({ billSummary }); + } + render() { const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const BillsSummaryTables = []; - if (this.props.data !== null) { - Object.entries(this.props.data).forEach(([billName, billData]) => { - // console.log(billData); // eslint-disable-line + if (this.state.billSummary !== null) { + console.log(this.state.billSummary); // eslint-disable-line + Object.keys(this.state.billSummary).forEach(billName => { BillsSummaryTables.push(
    ); @@ -51,11 +71,39 @@ class BillsSummary extends Component { BillsSummary.propTypes = { data: PropTypes.shape({ - electric: PropTypes.objectOf, - gas: PropTypes.objectOf, - oil: PropTypes.objectOf, - water: PropTypes.objectOf, + electric: PropTypes.arrayOf( + PropTypes.shape({ + year: PropTypes.string, + charge: PropTypes.string, + id: PropTypes.number, + }) + ), + gas: PropTypes.arrayOf( + PropTypes.shape({ + year: PropTypes.string, + charge: PropTypes.string, + id: PropTypes.number, + }) + ), + oil: PropTypes.arrayOf( + PropTypes.shape({ + year: PropTypes.string, + charge: PropTypes.string, + id: PropTypes.number, + }) + ), + water: PropTypes.arrayOf( + PropTypes.shape({ + year: PropTypes.string, + charge: PropTypes.string, + id: PropTypes.number, + }) + ), }), }; +BillsSummary.defaultProps = { + data: null, +}; + export default BillsSummary; diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js index c8f9706d..7a2d5026 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js @@ -11,18 +11,26 @@ import { class BillsSummaryRow extends Component { constructor(props) { super(props); + this.handleOnChange = this.handleOnChange.bind(this); + this.onDelEvent = this.onDelEvent.bind(this); this.state = { - bills: [], + year: props.year, + charge: props.charge, }; } - // onDelEvent() { - // this.props.onDelEvent(this.props.item); - // } + + onDelEvent() { + this.props.onDelEvent(this.props.id); + } + + handleOnChange = (event) => { + this.setState({ [event.target.name]: event.target.value }); + } render() { // console.log(this.props.item); // eslint-disable-line const onDelEvent = this.props.onDelEvent; - const charge = Math.round(this.props.item.charge * 100) / 100; + // const charge = Math.round(this.state.charge * 100) / 100; return ( @@ -32,10 +40,11 @@ class BillsSummaryRow extends Component { Year @@ -48,8 +57,9 @@ class BillsSummaryRow extends Component { @@ -58,7 +68,7 @@ class BillsSummaryRow extends Component { {' '} @@ -69,7 +79,9 @@ class BillsSummaryRow extends Component { } BillsSummaryRow.propTypes = { - item: PropTypes.objectOf, + id: PropTypes.number, + year: PropTypes.number, + charge: PropTypes.number, onDelEvent: PropTypes.func, }; diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js index 16c39203..b4ddec0c 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -13,32 +13,32 @@ import BillsSummaryRow from './BillsSummaryRow'; class BillsSummaryTable extends Component { constructor(props) { super(props); + this.deleteRow = this.deleteRow.bind(this); this.state = { - rows: this.props.billData, + billName: props.billName, }; } - deleteRow = index => { - const rows = [...this.state.rows]; - rows.splice(index, 1); - this.setState({ rows }); + deleteRow = year => { + this.props.deleteRow(this.props.billName, year); } render() { + console.log(this.state); // eslint-disable-line const tableHeaderStyle = { textAlign: 'left', - // backgroundColor: '#DDDDDD', - // color: '#FFFFFF', }; let rows = []; - if (this.state.rows !== []) { - rows = this.state.rows.map((item) => { + if (this.props.billData !== []) { + rows = this.props.billData.map((item) => { // charge = charge.toLocaleString(); return ( ); }); @@ -96,7 +96,18 @@ class BillsSummaryTable extends Component { BillsSummaryTable.propTypes = { billName: PropTypes.string, - billData: PropTypes.arrayOf, + billData: PropTypes.arrayOf( + PropTypes.shape({ + year: PropTypes.string, + charge: PropTypes.string, + id: PropTypes.number, + }) + ), + deleteRow: PropTypes.func, +}; + +BillsSummaryTable.defaultProps = { + billData: [], }; export default BillsSummaryTable; -- GitLab From ddfb1f149ff480389aa21b489ca8e9ce053317ab Mon Sep 17 00:00:00 2001 From: akkking Date: Sun, 7 Apr 2019 20:59:58 -0400 Subject: [PATCH 30/79] Added Bills table deletion event --- .../Blocnote/FinancialInputs/BillsSummary.js | 39 +++++++++++-------- .../FinancialInputs/BillsSummaryRow.js | 11 ++---- .../FinancialInputs/BillsSummaryTable.js | 13 ++++--- 3 files changed, 34 insertions(+), 29 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/BillsSummary.js b/src/components/Blocnote/FinancialInputs/BillsSummary.js index fcd59189..45b8fa13 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummary.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummary.js @@ -6,6 +6,7 @@ import BillsSummaryTable from './BillsSummaryTable'; class BillsSummary extends Component { constructor(props) { super(props); + // this.handleRowDel = this.handleRowDel.bind(); this.state = { billSummary: props.data, successMessages: [], @@ -18,30 +19,34 @@ class BillsSummary extends Component { // this.setState(this.state.rows); // }; - handleRowDel = (billName, year) => { - // this.props.onDelEvent(year, index); - console.log(billName); // eslint-disable-line - console.log(year); // eslint-disable-line + // handleRowDel = (billName, year) => { + // // this.props.onDelEvent(year, index); + // console.log(this.props.data); // eslint-disable-line + // console.log(this.state.billSummary); // eslint-disable-line + // console.log(billName); // eslint-disable-line + // console.log(year); // eslint-disable-line - // const billSummary = this.state.billSummary; - // Object.keys(billSummary).forEach(loopBillName => { - // if (loopBillName === billName) { - // billSummary[loopBillName].forEach((bill, index) => { - // if (bill.year === year) { - // billSummary[billName].splice(index, 1); - // } - // }); - // } - // }); - // this.setState({ billSummary }); - } + // const billSummary = this.state.billSummary; + // console.log(billSummary); // eslint-disable-line + // Object.keys(billSummary).forEach(loopBillName => { + // if (loopBillName === billName) { + // console.log(billSummary[loopBillName]); // eslint-disable-line + // billSummary[loopBillName].forEach((bill, index) => { + // if (bill.year === year) { + // billSummary[billName].splice(index, 1); + // } + // }); + // } + // }); + // this.setState({ billSummary }); + // } render() { const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const BillsSummaryTables = []; if (this.state.billSummary !== null) { - console.log(this.state.billSummary); // eslint-disable-line + // console.log(this.state.billSummary); // eslint-disable-line Object.keys(this.state.billSummary).forEach(billName => { BillsSummaryTables.push(
    diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js index 7a2d5026..ceb7429e 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js @@ -20,7 +20,7 @@ class BillsSummaryRow extends Component { } onDelEvent() { - this.props.onDelEvent(this.props.id); + this.props.onDelEvent(this.props.year); } handleOnChange = (event) => { @@ -28,10 +28,6 @@ class BillsSummaryRow extends Component { } render() { - // console.log(this.props.item); // eslint-disable-line - const onDelEvent = this.props.onDelEvent; - // const charge = Math.round(this.state.charge * 100) / 100; - return ( @@ -67,8 +63,9 @@ class BillsSummaryRow extends Component { {' '} @@ -79,7 +76,7 @@ class BillsSummaryRow extends Component { } BillsSummaryRow.propTypes = { - id: PropTypes.number, + // id: PropTypes.number, year: PropTypes.number, charge: PropTypes.number, onDelEvent: PropTypes.func, diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js index b4ddec0c..289518d3 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -16,22 +16,25 @@ class BillsSummaryTable extends Component { this.deleteRow = this.deleteRow.bind(this); this.state = { billName: props.billName, + billData: props.billData, }; } deleteRow = year => { - this.props.deleteRow(this.props.billName, year); + const billDataCopy = this.state.billData.filter(bill => parseInt(bill.year, 10) !== year); + this.setState({ billData: billDataCopy }, () => { + console.log(this.state.billData, 'billData state set!'); // eslint-disable-line + }); } render() { - console.log(this.state); // eslint-disable-line const tableHeaderStyle = { textAlign: 'left', }; let rows = []; - if (this.props.billData !== []) { - rows = this.props.billData.map((item) => { + if (this.state.billData !== []) { + rows = this.state.billData.map((item) => { // charge = charge.toLocaleString(); return ( Date: Sun, 7 Apr 2019 22:03:26 -0400 Subject: [PATCH 31/79] Add addBill action in Bills Table --- .../Blocnote/FinancialInputs/BillsSummary.js | 31 ----------- .../FinancialInputs/BillsSummaryRow.js | 15 ++++-- .../FinancialInputs/BillsSummaryTable.js | 52 +++++++++++++++++-- 3 files changed, 59 insertions(+), 39 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/BillsSummary.js b/src/components/Blocnote/FinancialInputs/BillsSummary.js index 45b8fa13..306b4eb3 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummary.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummary.js @@ -6,41 +6,12 @@ import BillsSummaryTable from './BillsSummaryTable'; class BillsSummary extends Component { constructor(props) { super(props); - // this.handleRowDel = this.handleRowDel.bind(); this.state = { billSummary: props.data, successMessages: [], }; } - // handleRowDel = row => { - // const index = this.state.rows.indexOf(row); - // this.state.rows.splice(index, 1); - // this.setState(this.state.rows); - // }; - - // handleRowDel = (billName, year) => { - // // this.props.onDelEvent(year, index); - // console.log(this.props.data); // eslint-disable-line - // console.log(this.state.billSummary); // eslint-disable-line - // console.log(billName); // eslint-disable-line - // console.log(year); // eslint-disable-line - - // const billSummary = this.state.billSummary; - // console.log(billSummary); // eslint-disable-line - // Object.keys(billSummary).forEach(loopBillName => { - // if (loopBillName === billName) { - // console.log(billSummary[loopBillName]); // eslint-disable-line - // billSummary[loopBillName].forEach((bill, index) => { - // if (bill.year === year) { - // billSummary[billName].splice(index, 1); - // } - // }); - // } - // }); - // this.setState({ billSummary }); - // } - render() { const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const BillsSummaryTables = []; @@ -51,10 +22,8 @@ class BillsSummary extends Component { BillsSummaryTables.push(
    ); diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js index ceb7429e..7a67ad96 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js @@ -12,6 +12,7 @@ class BillsSummaryRow extends Component { constructor(props) { super(props); this.handleOnChange = this.handleOnChange.bind(this); + this.onUpdEvent = this.onUpdEvent.bind(this); this.onDelEvent = this.onDelEvent.bind(this); this.state = { year: props.year, @@ -19,8 +20,12 @@ class BillsSummaryRow extends Component { }; } + onUpdEvent() { + this.props.onUpdEvent(this.state, this.props.id); + } + onDelEvent() { - this.props.onDelEvent(this.props.year); + this.props.onDelEvent(this.props.id); } handleOnChange = (event) => { @@ -61,7 +66,10 @@ class BillsSummaryRow extends Component { - {' '} + {' '} {' '} + {' '} ); -- GitLab From df84577ac399fae602e1b77f253799c7454437bc Mon Sep 17 00:00:00 2001 From: akkking Date: Sun, 7 Apr 2019 23:41:15 -0400 Subject: [PATCH 32/79] Fix landing page unnecessary curly bracket, remove logs --- .../Blocnote/FinancialInputs/BillsSummaryTable.js | 1 + src/containers/Blocnote/Blocnote.js | 10 +++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js index 3cc2858b..7b8ca7db 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -52,6 +52,7 @@ class BillsSummaryTable extends Component { billDataCopy.push(newBill); this.setState({ billData: billDataCopy }, () => { console.log(this.state.billData, 'bill added!'); // eslint-disable-line + this.setState({ year: '', charge: '' }); alert('Bill added!'); }); } diff --git a/src/containers/Blocnote/Blocnote.js b/src/containers/Blocnote/Blocnote.js index 261b6690..e90022ab 100644 --- a/src/containers/Blocnote/Blocnote.js +++ b/src/containers/Blocnote/Blocnote.js @@ -61,9 +61,13 @@ class Blocnote extends Component { } this.state.preliminaryFinanceData.name = (Preliminary Finance); const prelimItems = res.instance.not_saved_list_for_prelim.map((item) => { - return (
  • Please fill {{ item }}
  • ); + return (
  • Please fill {item}
  • ); }); - this.state.preliminaryFinanceData.status = (
      {prelimItems}
    ); + this.state.preliminaryFinanceData.status = ( +
      + {prelimItems} +
    + ); if (res.instance.if_completed_for_budget) { this.state.budgetSimilatorData.name = ( @@ -73,7 +77,7 @@ class Blocnote extends Component { } else { this.state.budgetSimilatorData.name = (Budget Simulator); const budgetItems = res.instance.not_saved_list_for_budget.map((item) => { - return (
  • Please fill {{ item }}
  • ); + return (
  • Please fill {item}
  • ); }); this.state.budgetSimilatorData.status = (
      {budgetItems}
    ); } -- GitLab From 2cc7c7ec496fde67400aa96cc28e9695ed54e5c6 Mon Sep 17 00:00:00 2001 From: akkking Date: Mon, 8 Apr 2019 14:13:00 -0400 Subject: [PATCH 33/79] Add cash balance and mortgage liabilities updates --- src/components/Blocnote/FinancialInputs.js | 3 +- .../FinancialInputs/BillsSummaryRow.js | 2 +- .../Blocnote/FinancialInputs/CashBalance.js | 57 ++++++++++++++++--- .../FinancialInputs/CashBalanceRow.js | 46 ++++++++++++--- .../FinancialInputs/FinanceOverview.js | 4 +- .../FinancialInputs/MortgageLiabilities.js | 57 +++++++++++++++++-- .../FinancialInputs/MortgageLiabilitiesRow.js | 49 +++++++++++++--- 7 files changed, 185 insertions(+), 33 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js index df1a08f9..ac784c90 100644 --- a/src/components/Blocnote/FinancialInputs.js +++ b/src/components/Blocnote/FinancialInputs.js @@ -266,7 +266,8 @@ class FinancialInputs extends Component { mainContent = ; if (this.state.financeData !== null && - this.state.billsSummary !== null) { + this.state.billsSummary !== null && + this.state.cashBalance !== null) { mainContent = (
    ✓{' '}
    -   + ); @@ -50,10 +81,11 @@ class CashBalanceRow extends Component { } CashBalanceRow.propTypes = { - statementNum: PropTypes.number, + id: PropTypes.number, balanceAmount: PropTypes.number, statementDate: PropTypes.string, isFromBalanceSheet: PropTypes.bool, + onDelEvent: PropTypes.func, }; export default CashBalanceRow; diff --git a/src/components/Blocnote/FinancialInputs/FinanceOverview.js b/src/components/Blocnote/FinancialInputs/FinanceOverview.js index 59eec5b0..0a336985 100644 --- a/src/components/Blocnote/FinancialInputs/FinanceOverview.js +++ b/src/components/Blocnote/FinancialInputs/FinanceOverview.js @@ -213,7 +213,7 @@ class FinanceOverview extends Component { value={this.state.proFormaDuration} style={{ width: '50%', textAlign: 'right' }} /> - + Years @@ -311,7 +311,7 @@ class FinanceOverview extends Component { value={this.state.anticipatedConstructionPeriod} style={{ width: '50%', textAlign: 'right' }} /> - + Weeks diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js index 5ceb85a7..9913f0f7 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -10,11 +10,53 @@ import MortgageLiabilitiesRow from './MortgageLiabilitiesRow'; class MortgageLiabilities extends Component { constructor(props) { super(props); + this.deleteRow = this.deleteRow.bind(this); + this.addRow = this.addRow.bind(this); + console.log(this.props.data); // eslint-disable-line this.state = { - successMessages: [], + liabilities: this.props.data, + id: this.props.data.length, + lender: '', + inputDate: '', + monthlyService: '', + remainingTerm: '', }; } + deleteRow = id => { + const liabilitiesCopy = this.state.liabilities.filter((liability, index) => { + console.log(liability); // eslint-disable-line + return index !== id; + }); + console.log(liabilitiesCopy); // eslint-disable-line + this.setState({ liabilities: liabilitiesCopy }, () => { + alert('Liability deleted!'); + }); + } + + addRow = () => { + const newLiability = { + id: this.state.id, + lender: this.state.lender, + inputDate: this.state.inputDate, + monthlyService: this.state.monthlyService, + remainingTerm: this.state.remainingTerm, + }; + const liabilitiesCopy = this.state.liabilities; + liabilitiesCopy.push(newLiability); + this.setState({ liabilities: liabilitiesCopy }, () => { + console.log(this.state.liabilities, 'New statement added!'); // eslint-disable-line + this.setState({ + id: this.state.id + 1, + lender: '', + inputDate: '', + monthlyService: '', + remainingTerm: '', + }); + alert('New statement added!'); + }); + } + render() { const header = [ '#Debt', @@ -32,16 +74,16 @@ class MortgageLiabilities extends Component { }); let rows = []; - if (this.props.data !== null) { - rows = this.props.data.map((item, index) => { + if (this.state.liabilities !== null) { + rows = this.state.liabilities.map((item, index) => { return ( ); }); @@ -68,7 +110,10 @@ class MortgageLiabilities extends Component {
    -   @@ -67,11 +99,12 @@ class MortgageLiabilitiesRow extends Component { } MortgageLiabilitiesRow.propTypes = { - liabilityNum: PropTypes.number, + id: PropTypes.number, lender: PropTypes.string, inputDate: PropTypes.string, monthlyService: PropTypes.string, remainingTerm: PropTypes.string, + onDelEvent: PropTypes.func, }; export default MortgageLiabilitiesRow; -- GitLab From 80abb337e2dcbb80c6e2a081a7db8322bc649ace Mon Sep 17 00:00:00 2001 From: akkking Date: Mon, 8 Apr 2019 15:40:02 -0400 Subject: [PATCH 34/79] Add generalInputs file, add loan Options component actions --- src/components/Blocnote/FinancialInputs.js | 11 +- .../FinancialInputs/BillsSummaryRow.js | 4 +- .../FinancialInputs/BillsSummaryTable.js | 6 +- .../Blocnote/FinancialInputs/CashBalance.js | 1 - .../FinancialInputs/CashBalanceRow.js | 2 +- .../FinancialInputs/EnergyBillsOverview.js | 6 +- .../FinancialInputs/FinanceOverview.js | 1 - .../Blocnote/FinancialInputs/GeneralInputs.js | 330 ------------------ .../Blocnote/FinancialInputs/LoanOptions.js | 71 +++- .../FinancialInputs/LoanOptionsRow.js | 45 ++- .../FinancialInputs/MortgageLiabilities.js | 2 +- .../FinancialInputs/MortgageLiabilitiesRow.js | 4 +- 12 files changed, 112 insertions(+), 371 deletions(-) delete mode 100644 src/components/Blocnote/FinancialInputs/GeneralInputs.js diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js index ac784c90..2ee9f86b 100644 --- a/src/components/Blocnote/FinancialInputs.js +++ b/src/components/Blocnote/FinancialInputs.js @@ -29,7 +29,7 @@ class FinancialInputs extends Component { incomeStatements: null, cashBalance: null, liabilities: null, - loans: null, + loanOptions: null, noi: null, cash: null, customerPreference: null, @@ -138,7 +138,6 @@ class FinancialInputs extends Component { if (Object.keys(res.result).length > 0) { this.setState({ billsSummary: res.result.user_bill }); } - console.log(this.state); // eslint-disable-line this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err }); @@ -218,7 +217,7 @@ class FinancialInputs extends Component { }).then((res) => { if (!res.err) { if (Object.keys(res).length > 0) { - this.setState({ loans: res.status }); + this.setState({ loanOptions: res.status }); this.setState({ cash: res.cash }); this.setState({ noi: res.noi }); } @@ -267,7 +266,9 @@ class FinancialInputs extends Component { mainContent = ; if (this.state.financeData !== null && this.state.billsSummary !== null && - this.state.cashBalance !== null) { + this.state.cashBalance !== null && + this.state.liabilities !== null && + this.state.loanOptions !== null) { mainContent = (
    diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js index 7ec78b77..48dc87b2 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js @@ -37,7 +37,7 @@ class BillsSummaryRow extends Component { - + Year - + $ { // charge = charge.toLocaleString(); return ( @@ -78,6 +77,7 @@ class BillsSummaryTable extends Component { year={parseInt(item.year, 10)} charge={parseFloat(item.charge)} id={item.id} + key={item.id} /> ); }); @@ -85,7 +85,7 @@ class BillsSummaryTable extends Component { - + Year - + $ - + $
    - +
    diff --git a/src/components/Blocnote/FinancialInputs/FinanceOverview.js b/src/components/Blocnote/FinancialInputs/FinanceOverview.js index 0a336985..4dbebe15 100644 --- a/src/components/Blocnote/FinancialInputs/FinanceOverview.js +++ b/src/components/Blocnote/FinancialInputs/FinanceOverview.js @@ -42,7 +42,6 @@ class FinanceOverview extends Component { anticipatedCommissioningDate: props.anticipatedCommissioningDate, anticipatedConstructionPeriod: props.anticipatedConstructionPeriod, }; - console.log(this.state); // eslint-disable-line } toggleFund = () => { diff --git a/src/components/Blocnote/FinancialInputs/GeneralInputs.js b/src/components/Blocnote/FinancialInputs/GeneralInputs.js deleted file mode 100644 index 03a6208e..00000000 --- a/src/components/Blocnote/FinancialInputs/GeneralInputs.js +++ /dev/null @@ -1,330 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - Dropdown, - DropdownToggle, - DropdownMenu, - DropdownItem, - Button, - Form, - FormGroup, - Input, - InputGroup, - InputGroupAddon, -} from 'reactstrap'; -import CSRFToken from './csrftoken'; -import ResultMessage from './ResultMessage'; - - -class GeneralInputs extends Component { - constructor(props) { - super(props); - this.toggleFund = this.toggleFund.bind(this); - this.changeFund = this.changeFund.bind(this); - this.submitForm = this.submitForm.bind(this); - this.state = { - error: false, - loading: false, - fundDropdownOpen: false, - fundDropDownValue: 'Select Fund', - fundDropDownId: 0, - fundOptions: [ - { id: '1', key: 'SmallCommercialFund', name: 'Small Commercial Fund' }, - { id: '2', key: 'BronxHealthyBuildingsFund', name: 'Bronx Healthy Buildings Fund' }, - { id: '3', key: 'NoFund', name: 'No Fund' }, - ], - didFundChange: false, - isFirstTime: false, - csrftoken: null, - showLoanOptionsTable: false, - messageStyle: {}, - messageContent: null, - }; - } - - toggleFund = () => { - this.setState({ - fundDropdownOpen: !this.state.fundDropdownOpen, - }); - } - - changeFund = (event) => { - this.setState({ fundDropDownValue: event.currentTarget.textContent }); - this.setState({ fundDropDownId: event.currentTarget.id }); - } - - submitForm = (event) => { - event.preventDefault(); - const formData = new FormData(event.target); - formData.set('fund_id', this.state.fundDropDownId); - - this.setState({ - csrftoken: formData.get('csrfmiddlewaretoken'), - }); - - if (formData.get('fund_id') === '0') { - this.setState({ - messageContent: 'Please select a fund type', - messageStyle: this.props.errorMessageStyle, - }); - } else { - fetch(`${this.props.baseURL}/loan-options/?loans=all-loans`) - .then((res) => { - console.log(res); // eslint-disable-line - this.setState({ - isFirstTime: !res.load, - }); - const result = {}; - formData.forEach((value, field) => { - result[field] = value; - }); - const constructionStartDate = new Date(result.anticipated_construction_start_date); - const constructionCommissioningDate = new Date(result.anticipated_commissioning_date); - if (constructionStartDate > constructionCommissioningDate) { - this.setState({ - messageContent: 'Anticipated Commissioning date has to be after Anticipated Construction start date', - messageStyle: this.props.errorMessageStyle, - }); - } else { - this.loadFinancialOverview(result); - } - }); - } - } - - loadFinancialOverview = (result) => { - fetch(`${this.props.baseURL}/finance-overview/`, { - method: 'PUT', - credentials: 'same-origin', - body: JSON.stringify(result), - headers: new Headers({ - 'Content-Type': 'application/json', - 'X-CSRFToken': this.state.csrftoken, - }), - }).then((res) => { - console.log(res); // eslint-disable-line - if (!res.err) { - this.setState({ - messageContent: 'Saved.', - messageStyle: this.props.successMessageStyle, - }); - - if (this.state.didFundChange) { - this.setState({ - messageContent: `${this.state.responseMessage} Loan Options table is reloaded.`, - messageStyle: this.props.errorMessageStyle, - }); - } - - if (this.state.didFundChange || this.state.isFirstTime) { - this.setState({ - didFundChange: false, - }); - this.deleteLoanOptions(); - } - } else { - const errors = []; - res.err.responseBody.then((error) => { - Object.keys(error).forEach((key) => { - errors.push(`${error[key][0]}`); - }); - }); - this.setState({ - errorMessage: errors, - }); - } - }); - } - - deleteLoanOptions = () => { - fetch(`${this.props.baseURL}/loan-options/?loans=delete-loan-options`, { - method: 'GET', - credentials: 'same-origin', - headers: { - 'Content-Type': 'application/json', - }, - }).then(() => { - this.setState({ - showLoanOptionsTable: false, - }); - }); - } - - render() { - const lineSpaceStyle = { textAlign: 'left' }; - const fundOptions = this.state.fundOptions.map(e => { - return ( - - {e.name} - - ); - }); - - if (!this.state.message) { - return ( -
    -
    - -
    -
    -
    -
    - Pro Forma Start Date -
    -
    - - - -
    -
    -
    -
    - Pro Forma Duration -
    -
    - - - - - Years - - - -
    -
    -
    -
    - Analysis Date -
    -
    - - - -
    -
    -
    -
    -
    - - - - {this.state.fundDropDownValue} - - - {fundOptions} - - - -
    -
    -
    -
    -
    -
    - Anticipated Construction Start Date -
    -
    - - - -
    -
    -
    -
    - Anticipated Commissioning Date -
    -
    - - - -
    -
    -
    -
    - Anticipated Construction Period -
    -
    - - - - - Weeks - - - -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - -
    - ); - } - - return ''; - } -} - -GeneralInputs.propTypes = { - baseURL: PropTypes.string, - successMessageStyle: PropTypes.objectOf, - errorMessageStyle: PropTypes.objectOf, -}; - -export default GeneralInputs; diff --git a/src/components/Blocnote/FinancialInputs/LoanOptions.js b/src/components/Blocnote/FinancialInputs/LoanOptions.js index 49c02fbd..2811c314 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptions.js @@ -14,11 +14,53 @@ import LoanOptionsRow from './LoanOptionsRow'; class LoanOptions extends Component { constructor(props) { super(props); + this.deleteRow = this.deleteRow.bind(this); + this.addRow = this.addRow.bind(this); + console.log(this.props.data); // eslint-disable-line this.state = { - successMessages: [], + loanOptions: this.props.data, + noi: this.props.noi, + cash: this.props.cash, + id: 99, + lender: '', + interestRate: '', + duration: '', + maxLoanAmount: '', }; } + deleteRow = id => { + const loanOptionsCopy = this.state.loanOptions.filter((loanOption, index) => { + console.log(loanOption); // eslint-disable-line + return index !== id; + }); + this.setState({ loanOptions: loanOptionsCopy }, () => { + alert('Statement deleted!'); + }); + } + + addRow = () => { + const newLoanOption = { + id: this.state.id, + lender: this.state.lender, + interestRate: this.state.interestRate, + duration: this.state.duration, + maxLoanAmount: this.state.maxLoanAmount, + }; + const loanOptionsCopy = this.state.loanOptions; + loanOptionsCopy.push(newLoanOption); + this.setState({ loanOptions: loanOptionsCopy }, () => { + console.log(this.state.loanOptions, 'New loan option added!'); // eslint-disable-line + this.setState({ + id: this.state.id + 1, + lender: '', + interestRate: '', + duration: '', + maxLoanAmount: '', + }); + }); + } + render() { const header = [ 'Loan Options', @@ -36,16 +78,18 @@ class LoanOptions extends Component { }); let loans = []; - if (this.props.loans !== null) { - loans = this.props.loans.map((loan, index) => { + console.log(this.state.loanOptions); // eslint-disable-line + if (this.state.loanOptions !== null) { + loans = this.state.loanOptions.map((loanOptions, index) => { return ( ); }); @@ -74,7 +118,7 @@ class LoanOptions extends Component { placeholder="1.15" step="0.01" name="required-noi-dscr-input" - value={this.props.noi} + value={this.state.noi} id="requiredNoiDscrInput" style={{ width: '30%' }} /> @@ -94,7 +138,7 @@ class LoanOptions extends Component { placeholder="1.15" step="0.01" name="required-cash-dscr-input" - value={this.props.cash} + value={this.state.cash} id="requiredNoiDscrInput" style={{ width: '30%' }} /> @@ -116,7 +160,10 @@ class LoanOptions extends Component {
    -   @@ -84,11 +106,12 @@ class LoanOptionsRow extends Component { } LoanOptionsRow.propTypes = { - LoanNum: PropTypes.number, + id: PropTypes.number, lender: PropTypes.string, interestRate: PropTypes.number, duration: PropTypes.string, maxLoanAmount: PropTypes.number, + onDelEvent: PropTypes.func, }; export default LoanOptionsRow; diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js index 9913f0f7..4732e7a6 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -53,7 +53,6 @@ class MortgageLiabilities extends Component { monthlyService: '', remainingTerm: '', }); - alert('New statement added!'); }); } @@ -79,6 +78,7 @@ class MortgageLiabilities extends Component { return ( - + $ - + Months -- GitLab From a320830a1622db8fd033cc1cab1803249e7d9283 Mon Sep 17 00:00:00 2001 From: akkking Date: Mon, 8 Apr 2019 16:48:40 -0400 Subject: [PATCH 35/79] Add customer preference save button action --- src/components/Blocnote/FinancialInputs.js | 9 ++- .../FinancialInputs/CustomerPreference.js | 55 +++++++++++++------ .../Blocnote/FinancialInputs/LoanOptions.js | 2 - .../FinancialInputs/LoanOptionsRow.js | 1 - .../FinancialInputs/MortgageLiabilities.js | 1 - 5 files changed, 46 insertions(+), 22 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js index 2ee9f86b..b327d9b8 100644 --- a/src/components/Blocnote/FinancialInputs.js +++ b/src/components/Blocnote/FinancialInputs.js @@ -33,7 +33,7 @@ class FinancialInputs extends Component { noi: null, cash: null, customerPreference: null, - successMessages: [], + // successMessages: [], error: false, loading: true, baseURL: `${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs`, @@ -264,11 +264,13 @@ class FinancialInputs extends Component { }; mainContent = ; + console.log(this.state); // eslint-disable-line if (this.state.financeData !== null && this.state.billsSummary !== null && this.state.cashBalance !== null && this.state.liabilities !== null && - this.state.loanOptions !== null) { + this.state.loanOptions !== null && + this.state.customerPreference !== null) { mainContent = (
    ); diff --git a/src/components/Blocnote/FinancialInputs/CustomerPreference.js b/src/components/Blocnote/FinancialInputs/CustomerPreference.js index 97ed9176..148c4da6 100644 --- a/src/components/Blocnote/FinancialInputs/CustomerPreference.js +++ b/src/components/Blocnote/FinancialInputs/CustomerPreference.js @@ -12,13 +12,30 @@ import { class CustomerPreference extends Component { constructor(props) { super(props); + this.handleOnChange = this.handleOnChange.bind(this); + this.saveData = this.saveData.bind(this); this.state = { - successMessages: [], - error: false, - loading: false, + customerPreference: this.props.data, + downpayment: this.props.downpayment, + expectedNetNoiDscr: this.props.expectedNetNoiDscr, + expectedPayback: this.props.expectedPayback, }; } + handleOnChange = (event) => { + this.setState({ [event.target.name]: event.target.value }); + } + + saveData = () => { + this.setState({ + downpayment: this.state.downpayment, + expectedNetNoiDscr: this.state.expectedNetNoiDscr, + expectedPayback: this.state.expectedPayback, + }, () => { + alert('Saved!'); + }); + } + render() { const header = [ 'Preference', @@ -41,14 +58,14 @@ class CustomerPreference extends Component { - + $ @@ -64,12 +81,12 @@ class CustomerPreference extends Component { - + Months @@ -85,12 +102,12 @@ class CustomerPreference extends Component { - + X @@ -120,7 +137,10 @@ class CustomerPreference extends Component {
    -
    @@ -143,6 +163,9 @@ CustomerPreference.propTypes = { expected_net_noi_dscr: PropTypes.string, expected_payback: PropTypes.string, }), + downpayment: PropTypes.number, + expectedNetNoiDscr: PropTypes.number, + expectedPayback: PropTypes.number, }; export default CustomerPreference; diff --git a/src/components/Blocnote/FinancialInputs/LoanOptions.js b/src/components/Blocnote/FinancialInputs/LoanOptions.js index 2811c314..fe9fa74c 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptions.js @@ -16,7 +16,6 @@ class LoanOptions extends Component { super(props); this.deleteRow = this.deleteRow.bind(this); this.addRow = this.addRow.bind(this); - console.log(this.props.data); // eslint-disable-line this.state = { loanOptions: this.props.data, noi: this.props.noi, @@ -78,7 +77,6 @@ class LoanOptions extends Component { }); let loans = []; - console.log(this.state.loanOptions); // eslint-disable-line if (this.state.loanOptions !== null) { loans = this.state.loanOptions.map((loanOptions, index) => { return ( diff --git a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js index 5a410018..55637dc0 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js @@ -30,7 +30,6 @@ class LoanOptionsRow extends Component { this.setState({ [event.target.name]: event.target.value }); } - render() { const style = { textAlign: 'left' }; return ( diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js index 4732e7a6..f9fc739e 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -12,7 +12,6 @@ class MortgageLiabilities extends Component { super(props); this.deleteRow = this.deleteRow.bind(this); this.addRow = this.addRow.bind(this); - console.log(this.props.data); // eslint-disable-line this.state = { liabilities: this.props.data, id: this.props.data.length, -- GitLab From d005bf4af4cfb66f6a01ac0d5eee87fe83ac91f1 Mon Sep 17 00:00:00 2001 From: akkking Date: Mon, 8 Apr 2019 17:50:11 -0400 Subject: [PATCH 36/79] Add customer preference data interaction to db --- src/components/Blocnote/FinancialInputs.js | 3 + .../Blocnote/FinancialInputs/CashBalance.js | 2 +- .../FinancialInputs/CustomerPreference.js | 74 +++++++++++++++++-- .../Blocnote/FinancialInputs/LoanOptions.js | 73 +++++++++--------- .../FinancialInputs/MortgageLiabilities.js | 2 +- 5 files changed, 107 insertions(+), 47 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js index b327d9b8..624956cc 100644 --- a/src/components/Blocnote/FinancialInputs.js +++ b/src/components/Blocnote/FinancialInputs.js @@ -330,6 +330,9 @@ class FinancialInputs extends Component { cash={parseFloat(this.state.cash)} />
    +   
    +      -
    @@ -141,6 +199,17 @@ MortgageLiabilities.propTypes = { remaining_term: PropTypes.string, }), ), + baseURL: PropTypes.string, + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), }; export default MortgageLiabilities; diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js index 3623aea3..bd15f5e6 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js @@ -11,13 +11,13 @@ import { class MortgageLiabilitiesRow extends Component { constructor(props) { super(props); - this.handleOnChange = this.handleOnChange.bind(this); this.onDelEvent = this.onDelEvent.bind(this); this.state = { lender: props.lender, inputDate: props.inputDate, monthlyService: props.monthlyService, remainingTerm: props.remainingTerm, + liability: props.liability, }; } @@ -25,10 +25,6 @@ class MortgageLiabilitiesRow extends Component { this.props.onDelEvent(this.props.id); } - handleOnChange = (event) => { - this.setState({ [event.target.name]: event.target.value }); - } - render() { const style = { textAlign: 'left' }; return ( @@ -43,7 +39,7 @@ class MortgageLiabilitiesRow extends Component { className="form-control" name="lender" value={this.state.lender} - onChange={this.handleOnChange} + onChange={this.props.handleOnChange} /> @@ -56,7 +52,7 @@ class MortgageLiabilitiesRow extends Component { step="any" name="monthlyService" value={this.state.monthlyService} - onChange={this.handleOnChange} + onChange={this.props.handleOnChange} style={{ width: '50%', textAlign: 'left' }} /> @@ -68,7 +64,7 @@ class MortgageLiabilitiesRow extends Component { step="any" name="remainingTerm" value={this.state.remainingTerm} - onChange={this.handleOnChange} + onChange={this.props.handleOnChange} style={{ width: '50%', textAlign: 'right' }} /> @@ -80,9 +76,9 @@ class MortgageLiabilitiesRow extends Component { @@ -105,6 +101,13 @@ MortgageLiabilitiesRow.propTypes = { monthlyService: PropTypes.string, remainingTerm: PropTypes.string, onDelEvent: PropTypes.func, + handleOnChange: PropTypes.func, + liability: PropTypes.shape({ + lender: PropTypes.string, + inputDate: PropTypes.string, + monthlyService: PropTypes.string, + remainingTerm: PropTypes.number, + }), }; export default MortgageLiabilitiesRow; diff --git a/src/containers/Blocnote/Blocnote.js b/src/containers/Blocnote/BudgetSimulator.js similarity index 97% rename from src/containers/Blocnote/Blocnote.js rename to src/containers/Blocnote/BudgetSimulator.js index e90022ab..c56df082 100644 --- a/src/containers/Blocnote/Blocnote.js +++ b/src/containers/Blocnote/BudgetSimulator.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { Link } from 'react-router'; import LinkBarDetail from '../../components/LinkBarDetail'; -import buildingDetailPropTypes from '../../containers/Building/propTypes'; +import buildingDetailPropTypes from '../Building/propTypes'; import './styles.css'; import { blocnoteURL, @@ -11,7 +11,7 @@ import request from '../../utils/request'; import Loading from '../../components/Loading'; -class Blocnote extends Component { +class BudgetSimulator extends Component { constructor(props) { super(props); @@ -158,7 +158,7 @@ class Blocnote extends Component { } } -Blocnote.propTypes = { +BudgetSimulator.propTypes = { building: buildingDetailPropTypes, // envelope: envelopeProps, // loadScenario: PropTypes.func, @@ -175,4 +175,4 @@ Blocnote.propTypes = { // eng: state.eng, // }); -export default Blocnote; +export default BudgetSimulator; diff --git a/src/containers/Blocnote/FinancialInputs.js b/src/containers/Blocnote/FinancialInputs.js new file mode 100644 index 00000000..7dca1f9c --- /dev/null +++ b/src/containers/Blocnote/FinancialInputs.js @@ -0,0 +1,180 @@ +import React, { Component } from 'react'; +import { Link } from 'react-router'; +import LinkBarDetail from '../../components/LinkBarDetail'; +import buildingDetailPropTypes from '../Building/propTypes'; +import './styles.css'; +import { + blocnoteURL, + getHeaders, +} from '../../utils/restServices'; +import request from '../../utils/request'; +import Loading from '../../components/Loading'; + + +class FinancialInputs extends Component { + + constructor(props) { + super(props); + this.state = { + financialInputsData: { name: null, status: null }, + preliminaryFinanceData: { name: null, status: null }, + budgetSimilatorData: { name: null, status: null }, + loading: true, + }; + } + + componentDidMount() { + this.loadData(this.props.building.building_id); + this.props.loadBuildingDetail(this.props.buildingId); + this.props.loadProjects({ building_id: this.props.buildingId }); + } + + loadData = (buildingId) => { + request(`${blocnoteURL}buildings/${buildingId}/data/`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.instance).length > 0) { + const rootURL = `/buildings/${this.props.building.building_id}`; + + if (res.instance.if_completed) { + this.state.financialInputsData.name = ( + Financial Inputs + ); + this.state.financialInputsData.status = (Complete); + this.state.preliminaryFinanceData.name = ( + Preliminary Finance + ); + this.state.preliminaryFinanceData.status = (OK); + this.state.budgetSimilatorData.name = ( + Budget Simulator + ); + this.state.budgetSimilatorData.status = (OK); + } else { + this.state.financialInputsData.name = ( + Financial Inputs + ); + if (res.instance.if_started) { + this.state.financialInputsData.status = (Started but not complete.); + } else { + this.state.financialInputsData.status = (Not Started.); + } + this.state.preliminaryFinanceData.name = (Preliminary Finance); + const prelimItems = res.instance.not_saved_list_for_prelim.map((item) => { + return (
  • Please fill {item}
  • ); + }); + this.state.preliminaryFinanceData.status = ( +
      + {prelimItems} +
    + ); + + if (res.instance.if_completed_for_budget) { + this.state.budgetSimilatorData.name = ( + Budget Simulator + ); + this.state.budgetSimilatorData.status = (OK); + } else { + this.state.budgetSimilatorData.name = (Budget Simulator); + const budgetItems = res.instance.not_saved_list_for_budget.map((item) => { + return (
  • Please fill {item}
  • ); + }); + this.state.budgetSimilatorData.status = (
      {budgetItems}
    ); + } + } + } + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + }); + } + + render() { + let mainContent = null; + + if (this.state.loading) { + mainContent = ; + } else { + mainContent = ( +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + +
    OPTIONSSTATUS
    + {this.state.financialInputsData.name} + + {this.state.financialInputsData.status} +
    + {this.state.preliminaryFinanceData.name} + + {this.state.preliminaryFinanceData.status} +
    + {this.state.budgetSimilatorData.name} + + {this.state.budgetSimilatorData.status} +
    +
    +
    +
    +
    + ); + } + + return ( +
    + + {mainContent} +
    + ); + } +} + +FinancialInputs.propTypes = { + building: buildingDetailPropTypes, + // envelope: envelopeProps, + // loadScenario: PropTypes.func, +}; + +// const mapDispatchToProps = dispatch => ( +// bindActionCreators({ +// // loadScenario, +// }, dispatch) +// ); + +// const mapStateToProps = state => ({ +// // envelope: state.envelope, +// eng: state.eng, +// }); + +export default FinancialInputs; diff --git a/src/containers/Blocnote/PreliminaryFinance.js b/src/containers/Blocnote/PreliminaryFinance.js new file mode 100644 index 00000000..1065c5ea --- /dev/null +++ b/src/containers/Blocnote/PreliminaryFinance.js @@ -0,0 +1,178 @@ +import React, { Component } from 'react'; +import { Link } from 'react-router'; +import LinkBarDetail from '../../components/LinkBarDetail'; +import buildingDetailPropTypes from '../Building/propTypes'; +import './styles.css'; +import { + blocnoteURL, + getHeaders, +} from '../../utils/restServices'; +import request from '../../utils/request'; +import Loading from '../../components/Loading'; + + +class PreliminaryFinance extends Component { + + constructor(props) { + super(props); + this.state = { + financialInputsData: { name: null, status: null }, + preliminaryFinanceData: { name: null, status: null }, + budgetSimilatorData: { name: null, status: null }, + loading: true, + }; + } + + componentDidMount() { + this.loadData(this.props.building.building_id); + } + + loadData = (buildingId) => { + request(`${blocnoteURL}buildings/${buildingId}/data/`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.instance).length > 0) { + const rootURL = `/buildings/${this.props.building.building_id}`; + + if (res.instance.if_completed) { + this.state.financialInputsData.name = ( + Financial Inputs + ); + this.state.financialInputsData.status = (Complete); + this.state.preliminaryFinanceData.name = ( + Preliminary Finance + ); + this.state.preliminaryFinanceData.status = (OK); + this.state.budgetSimilatorData.name = ( + Budget Simulator + ); + this.state.budgetSimilatorData.status = (OK); + } else { + this.state.financialInputsData.name = ( + Financial Inputs + ); + if (res.instance.if_started) { + this.state.financialInputsData.status = (Started but not complete.); + } else { + this.state.financialInputsData.status = (Not Started.); + } + this.state.preliminaryFinanceData.name = (Preliminary Finance); + const prelimItems = res.instance.not_saved_list_for_prelim.map((item) => { + return (
  • Please fill {item}
  • ); + }); + this.state.preliminaryFinanceData.status = ( +
      + {prelimItems} +
    + ); + + if (res.instance.if_completed_for_budget) { + this.state.budgetSimilatorData.name = ( + Budget Simulator + ); + this.state.budgetSimilatorData.status = (OK); + } else { + this.state.budgetSimilatorData.name = (Budget Simulator); + const budgetItems = res.instance.not_saved_list_for_budget.map((item) => { + return (
  • Please fill {item}
  • ); + }); + this.state.budgetSimilatorData.status = (
      {budgetItems}
    ); + } + } + } + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + }); + } + + render() { + let mainContent = null; + + if (this.state.loading) { + mainContent = ; + } else { + mainContent = ( +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + +
    OPTIONSSTATUS
    + {this.state.financialInputsData.name} + + {this.state.financialInputsData.status} +
    + {this.state.preliminaryFinanceData.name} + + {this.state.preliminaryFinanceData.status} +
    + {this.state.budgetSimilatorData.name} + + {this.state.budgetSimilatorData.status} +
    +
    +
    +
    +
    + ); + } + + return ( +
    + + {mainContent} +
    + ); + } +} + +PreliminaryFinance.propTypes = { + building: buildingDetailPropTypes, + // envelope: envelopeProps, + // loadScenario: PropTypes.func, +}; + +// const mapDispatchToProps = dispatch => ( +// bindActionCreators({ +// // loadScenario, +// }, dispatch) +// ); + +// const mapStateToProps = state => ({ +// // envelope: state.envelope, +// eng: state.eng, +// }); + +export default PreliminaryFinance; diff --git a/src/containers/Blocnote/actions.js b/src/containers/Blocnote/actions.js index 2486db12..4126732e 100644 --- a/src/containers/Blocnote/actions.js +++ b/src/containers/Blocnote/actions.js @@ -1,8 +1,36 @@ import { - LOAD_SCENARIO, + LANDING_DATA_REQUESTED, + LANDING_DATA_SUCCEEDED, + LANDING_DATA_FAILED, } from './constants'; -import { makeActionCreator } from '../../utils/reduxHelpers'; +// import { makeActionCreator } from '../../utils/reduxHelpers'; -export const loadScenario = makeActionCreator(LOAD_SCENARIO, 'buildingId'); -export const scenarioLoaded = makeActionCreator(SCENARIO_SUCCESS, 'payload'); -export const scenarioLoadingError = makeActionCreator(SCENARIO_ERROR, 'error'); +export function loadLandingData(buildingId) { + return { + type: LANDING_DATA_REQUESTED, + buildingId, + }; +} + + +export function landingDataLoaded(landingData) { + console.log(landingData); // eslint-disable-line + return { + type: LANDING_DATA_SUCCEEDED, + instance: landingData.instance, + }; +} + + +export function landingDataFailed(error) { + return { + type: LANDING_DATA_FAILED, + error, + }; +} + +// console.log('hellx'); + +// export const loadLandingData = makeActionCreator(LANDING_DATA_REQUESTED, 'buildingId'); +// export const landingDataLoaded = makeActionCreator(LANDING_DATA_SUCCEEDED, 'instance'); +// export const landingDataFailed = makeActionCreator(LANDING_DATA_FAILED, 'error'); diff --git a/src/containers/Blocnote/constants.js b/src/containers/Blocnote/constants.js index e8ff4deb..ae65e1bd 100644 --- a/src/containers/Blocnote/constants.js +++ b/src/containers/Blocnote/constants.js @@ -1,3 +1,3 @@ -export const LOAD_SCENARIO = 'LOAD_SCENARIO'; -export const SCENARIO_SUCCESS = 'SCENARIO_SUCCESS'; -export const SCENARIO_ERROR = 'SCENARIO_ERROR'; +export const LANDING_DATA_REQUESTED = 'LANDING_DATA_REQUESTED'; +export const LANDING_DATA_SUCCEEDED = 'LANDING_DATA_SUCCEEDED'; +export const LANDING_DATA_FAILED = 'LANDING_DATA_FAILED'; diff --git a/src/containers/Blocnote/index.js b/src/containers/Blocnote/index.js new file mode 100644 index 00000000..a6dde0ae --- /dev/null +++ b/src/containers/Blocnote/index.js @@ -0,0 +1,253 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import { Link } from 'react-router'; +import LinkBarDetail from '../../components/LinkBarDetail'; +import buildingDetailPropTypes from '../Building/propTypes'; +import { loadLandingData } from './actions'; +import './styles.css'; +import { + blocnoteURL, + getHeaders, +} from '../../utils/restServices'; +import request from '../../utils/request'; +import Loading from '../../components/Loading'; +import landingDataProps from './propTypes'; + + +class Blocnote extends Component { + + constructor(props) { + super(props); + this.state = { + financialInputsData: { name: null, status: null }, + preliminaryFinanceData: { name: null, status: null }, + budgetSimilatorData: { name: null, status: null }, + loading: true, + }; + } + + componentDidMount() { + console.log(this.state); // eslint-disable-line + this.props.loadLandingData(this.props.building.building_id); + console.log(this.props); // eslint-disable-line + } + + componentWillReceiveProps(nextProps) { + console.log(nextProps); // eslint-disable-line + console.log(this.props); // eslint-disable-line + } + + loadData = (buildingId) => { + request(`${blocnoteURL}buildings/${buildingId}/data/`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.instance).length > 0) { + const rootURL = `/buildings/${this.props.building.building_id}`; + + if (res.instance.if_completed) { + this.state.financialInputsData.name = ( + Financial Inputs + ); + this.state.financialInputsData.status = (Complete); + this.state.preliminaryFinanceData.name = ( + Preliminary Finance + ); + this.state.preliminaryFinanceData.status = (OK); + this.state.budgetSimilatorData.name = ( + Budget Simulator + ); + this.state.budgetSimilatorData.status = (OK); + } else { + this.state.financialInputsData.name = ( + Financial Inputs + ); + if (res.instance.if_started) { + this.state.financialInputsData.status = (Started but not complete.); + } else { + this.state.financialInputsData.status = (Not Started.); + } + this.state.preliminaryFinanceData.name = (Preliminary Finance); + const prelimItems = res.instance.not_saved_list_for_prelim.map((item) => { + return (
  • Please fill {item}
  • ); + }); + this.state.preliminaryFinanceData.status = ( +
      + {prelimItems} +
    + ); + + if (res.instance.if_completed_for_budget) { + this.state.budgetSimilatorData.name = ( + Budget Simulator + ); + this.state.budgetSimilatorData.status = (OK); + } else { + this.state.budgetSimilatorData.name = (Budget Simulator); + const budgetItems = res.instance.not_saved_list_for_budget.map((item) => { + return (
  • Please fill {item}
  • ); + }); + this.state.budgetSimilatorData.status = (
      {budgetItems}
    ); + } + } + } + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + }); + } + + processState = () => { + console.log(this.props); // eslint-disable-line + const { landingData } = this.props; + const { data } = landingData; + const rootURL = `/buildings/${this.props.building.building_id}`; + // console.log(landingData); // eslint-disable-line + // console.log(blocnote); // eslint-disable-line + console.log(data); // eslint-disable-line + + if (data === null) { + console.log(data); // eslint-disable-line + } else if (data.if_completed) { + console.log(data); // eslint-disable-line + this.state.financialInputsData.name = ( + Financial Inputs + ); + this.state.financialInputsData.status = (Complete); + this.state.preliminaryFinanceData.name = ( + Preliminary Finance + ); + this.state.preliminaryFinanceData.status = (OK); + this.state.budgetSimilatorData.name = ( + Budget Simulator + ); + this.state.budgetSimilatorData.status = (OK); + } else { + console.log(data); // eslint-disable-line + this.state.financialInputsData.name = ( + Financial Inputs + ); + if (data.if_started) { + this.state.financialInputsData.status = (Started but not complete.); + } else { + this.state.financialInputsData.status = (Not Started.); + } + this.state.preliminaryFinanceData.name = (Preliminary Finance); + const prelimItems = data.not_saved_list_for_prelim.map((item) => { + return (
  • Please fill {item}
  • ); + }); + this.state.preliminaryFinanceData.status = ( +
      + {prelimItems} +
    + ); + + if (data.if_completed_for_budget) { + this.state.budgetSimilatorData.name = ( + Budget Simulator + ); + this.state.budgetSimilatorData.status = (OK); + } else { + this.state.budgetSimilatorData.name = (Budget Simulator); + const budgetItems = data.not_saved_list_for_budget.map((item) => { + return (
  • Please fill {item}
  • ); + }); + this.state.budgetSimilatorData.status = (
      {budgetItems}
    ); + } + } + + this.setState({ loading: false }); + } + + render() { + console.log(this.props.landingData); // eslint-disable-line + this.processState(); + let mainContent = null; + + if (this.state.loading) { + mainContent = ; + } else { + mainContent = ( +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + +
    OPTIONSSTATUS
    + {this.state.financialInputsData.name} + + {this.state.financialInputsData.status} +
    + {this.state.preliminaryFinanceData.name} + + {this.state.preliminaryFinanceData.status} +
    + {this.state.budgetSimilatorData.name} + + {this.state.budgetSimilatorData.status} +
    +
    +
    +
    +
    + ); + } + + return ( +
    + + {mainContent} +
    + ); + } +} + +Blocnote.propTypes = { + building: buildingDetailPropTypes, + loadLandingData: PropTypes.func, + landingData: landingDataProps, +}; + +const mapDispatchToProps = dispatch => ( + bindActionCreators({ + loadLandingData, + }, dispatch) +); + +const mapStateToProps = state => ({ + landingData: state.blocnote, +}); + +export default connect(mapStateToProps, mapDispatchToProps)(Blocnote); diff --git a/src/containers/Blocnote/propTypes.js b/src/containers/Blocnote/propTypes.js index 518f151c..546be1a0 100644 --- a/src/containers/Blocnote/propTypes.js +++ b/src/containers/Blocnote/propTypes.js @@ -10,34 +10,30 @@ export const loadErrorPropTypes = { ]), }; -export const simStatusProps = shape({ - sim_started: string, - sim_finished: string, +export const buildingProps = shape({ + building_id: number, + lot_id: number, + bbl: number, + bin: number, + street_address: string, + borough: string, + zipcode: string, + state: string, + targeting_score: number, }); -export const monthlyHeatingConsum = shape({ - month: string, - value: number, -}); - -export const heatLossComponentBreakdown = shape({ - component: string, - mmbtu: number, - percentage: number, +export const dataProps = shape({ + if_started: bool, + if_completed: bool, + if_completed_for_budget: bool, + if_started_for_budget: bool, + not_saved_list_for_prelim: arrayOf(string), + not_saved_list_for_budget: arrayOf(string), + building: buildingProps, }); export default shape({ - simStatus: shape({ - ...loadErrorPropTypes, - measures: arrayOf(simStatusProps), - }), - monthlyHeatingConsumption: shape({ - ...loadErrorPropTypes, - data: arrayOf(monthlyHeatingConsum), - }), - heatLossComponentBreakdown: shape({ - ...loadErrorPropTypes, - data: arrayOf(heatLossComponentBreakdown), - }), + ...loadErrorPropTypes, + data: dataProps, }); diff --git a/src/containers/Blocnote/reducer.js b/src/containers/Blocnote/reducer.js index ce0ab8fc..761890bf 100644 --- a/src/containers/Blocnote/reducer.js +++ b/src/containers/Blocnote/reducer.js @@ -1,294 +1,42 @@ import { - LOAD_SIM_STATUS, - SIM_STATUS_SUCCESS, - SIM_STATUS_ERROR, - RUN_SIMULATION_REQUESTED, - RUN_SIMULATION_SUCCEEDED, - RUN_SIMULATION_FAILED, - MONTHLY_HEATING_CONSUMPTION_REQUESTED, - MONTHLY_HEATING_CONSUMPTION_SUCCEEDED, - MONTHLY_HEATING_CONSUMPTION_FAILED, - HEAT_LOSS_COMPONENT_BREAKDOWN_REQUESTED, - HEAT_LOSS_COMPONENT_BREAKDOWN_SUCCEEDED, - HEAT_LOSS_COMPONENT_BREAKDOWN_FAILED, - DESIGN_LOAD_REQUESTED, - DESIGN_LOAD_SUCCEEDED, - DESIGN_LOAD_FAILED, - UTILITY_BILL_BREAKDOWN_REQUESTED, - UTILITY_BILL_BREAKDOWN_SUCCEEDED, - UTILITY_BILL_BREAKDOWN_FAILED, - BUILDING_FOOTPRINTS_REQUESTED, - BUILDING_FOOTPRINTS_SUCCEEDED, - BUILDING_FOOTPRINTS_FAILED, + LANDING_DATA_REQUESTED, + LANDING_DATA_SUCCEEDED, + LANDING_DATA_FAILED, } from './constants'; -const J_TO_MMBTU = 9.4708 * (10 ** -10); -const WATTS_TO_MBH = 0.00341214163312794; - const blocnoteInitialState = { - simStatus: { - loading: false, - error: false, - sim_started: null, - sim_finished: null, - }, - runSimulation: { - loading: false, - error: false, - payload: [], - }, - monthlyHeatingConsumption: { - loading: false, - error: false, - data: [], - }, - heatLossComponentBreakdown: { - loading: false, - error: false, - data: [], - }, - designLoad: { - loading: false, - error: false, - data: [], - }, - utilityBillBreakdown: { - loading: false, - error: false, - data: {}, - }, - buildingFootprintsLoading: false, - buildingFootprintsError: false, - buildingFootprints: [], + loading: false, + error: false, + data: null, }; export default function (state = blocnoteInitialState, action) { + console.log(state); // eslint-disable-line switch (action.type) { - case LOAD_SIM_STATUS: - return { - ...state, - simStatus: { - ...state.simStatus, - loading: true, - error: false, - }, - }; - - case SIM_STATUS_SUCCESS: { - /* eslint-disable no-unused-vars, camelcase */ - const { sim_started, sim_finished } = action.payload; - - return { - ...state, - simStatus: { - sim_started: sim_started ? sim_started[0] : null, - sim_finished: sim_finished ? sim_finished[0] : null, - loading: false, - error: false, - }, - }; - } - - case SIM_STATUS_ERROR: - return { - ...state, - simStatus: { - ...state.simStatus, - loading: false, - error: action.error, - }, - }; - - case RUN_SIMULATION_REQUESTED: - return { - ...state, - runSimulation: { - loading: true, - error: false, - payload: [], - }, - }; - - case RUN_SIMULATION_SUCCEEDED: - return { - ...state, - runSimulation: { - loading: false, - error: false, - payload: action.payload, - }, - }; - - case RUN_SIMULATION_FAILED: - return { - ...state, - runSimulation: { - loading: false, - error: action.error, - payload: [], - }, - }; - - case MONTHLY_HEATING_CONSUMPTION_REQUESTED: - return { - ...state, - monthlyHeatingConsumption: { - ...blocnoteInitialState.monthlyHeatingConsumption, - loading: true, - error: false, - }, - }; - - case MONTHLY_HEATING_CONSUMPTION_SUCCEEDED: - return { - ...state, - monthlyHeatingConsumption: { - loading: false, - error: false, - data: action.payload.map(item => ({ - // Convert month num to month name - month: new Date(`${item[0]}/1/17`).toLocaleString('en-us', { month: 'short' }), - value: +(J_TO_MMBTU * item[1]).toFixed(2), - })), - }, - }; - - case MONTHLY_HEATING_CONSUMPTION_FAILED: - return { - ...state, - monthlyHeatingConsumption: { - ...blocnoteInitialState.monthlyHeatingConsumption, - loading: false, - error: action.error, - }, - }; - - case HEAT_LOSS_COMPONENT_BREAKDOWN_REQUESTED: - return { - ...state, - heatLossComponentBreakdown: { - ...blocnoteInitialState.heatLossComponentBreakdown, - loading: true, - }, - }; - - case HEAT_LOSS_COMPONENT_BREAKDOWN_SUCCEEDED: - return { - ...state, - heatLossComponentBreakdown: { - ...blocnoteInitialState.heatLossComponentBreakdown, - data: action.payload.map(item => ({ - component: item[0], - mmbtu: +item[1].toFixed(2), - percentage: +item[2].toFixed(2), - })), - }, - }; - - case HEAT_LOSS_COMPONENT_BREAKDOWN_FAILED: - return { - ...state, - heatLossComponentBreakdown: { - ...blocnoteInitialState.heatLossComponentBreakdown, - error: action.error, - }, - }; - - case DESIGN_LOAD_REQUESTED: - return { - ...state, - designLoad: { - ...blocnoteInitialState.designLoad, - loading: true, - }, - }; - - case DESIGN_LOAD_SUCCEEDED: - return { - ...state, - designLoad: { - ...blocnoteInitialState.designLoad, - data: action.payload.map(i => [i[0], +(i[1] * WATTS_TO_MBH).toFixed(2)]), - }, - }; - - case DESIGN_LOAD_FAILED: - return { - ...state, - designLoad: { - ...blocnoteInitialState.designLoad, - error: action.error, - }, - }; - - case UTILITY_BILL_BREAKDOWN_REQUESTED: + case LANDING_DATA_REQUESTED: return { ...state, - utilityBillBreakdown: { - loading: true, - error: false, - data: {}, - }, + loading: true, + error: false, }; - case UTILITY_BILL_BREAKDOWN_SUCCEEDED: { - if (Object.keys(action.payload).length === 0) { - return { - ...state, - utilityBillBreakdown: { - ...blocnoteInitialState.utilityBillBreakdown, - }, - }; - } - - const { fuel_type, end_use, monthly_heating } = action.payload; - const ft = Object.keys(fuel_type).map(key => ( - { name: key, mmBTU: +(fuel_type[key].toFixed(2)) } - )); - - // TODO: Remove slice method on key, chart doesn't display more than 15 chars - const eu = Object.keys(end_use).map(key => ( - { name: key.replace(/_/g, ' ').slice(0, 15), mmBTU: +(end_use[key].toFixed(2)) } - )); - + case LANDING_DATA_SUCCEEDED: { + console.log({ ...state, data: action.instance, loading: false, error: false }); // eslint-disable-line return { ...state, - utilityBillBreakdown: { - loading: false, - error: false, - data: { - fuel_type: ft, - end_use: eu, - monthly_heating: monthly_heating.map(i => +(i.toFixed(2))), - }, - }, + data: action.instance, + loading: false, + error: false, }; } - case UTILITY_BILL_BREAKDOWN_FAILED: + case LANDING_DATA_FAILED: return { ...state, - utilityBillBreakdown: { - loading: false, - error: action.error, - data: {}, - }, + loading: false, + error: action.error, }; - case BUILDING_FOOTPRINTS_REQUESTED: - return { ...state, buildingFootprintsLoading: true, buildingFootprintsError: false }; - - case BUILDING_FOOTPRINTS_SUCCEEDED: - return { - ...state, - buildingFootprintsLoading: false, - buildingFootprintsError: false, - buildingFootprints: action.payload.footprint, - }; - - case BUILDING_FOOTPRINTS_FAILED: - return { ...state, buildingFootprintsLoading: false, buildingFootprintsError: action.error }; - default: return state; } diff --git a/src/containers/Blocnote/sagas.js b/src/containers/Blocnote/sagas.js index dd1ee7ee..317ea35e 100644 --- a/src/containers/Blocnote/sagas.js +++ b/src/containers/Blocnote/sagas.js @@ -1,128 +1,34 @@ import { call, put, takeEvery } from 'redux-saga/effects'; import request from '../../utils/request'; +import { getHeaders } from '../../utils/restServices'; import { - LOAD_SIM_STATUS, - RUN_SIMULATION_REQUESTED, - MONTHLY_HEATING_CONSUMPTION_REQUESTED, - HEAT_LOSS_COMPONENT_BREAKDOWN_REQUESTED, - DESIGN_LOAD_REQUESTED, - UTILITY_BILL_BREAKDOWN_REQUESTED, - BUILDING_FOOTPRINTS_REQUESTED, + LANDING_DATA_REQUESTED, } from './constants'; import { - simStatusLoaded, - simStatusLoadingError, - runSimulationSucceeded, - runSimulationFailed, - monthlyHeatingConsumptionLoaded, - monthlyHeatingConsumptionFailed, - heatLossComponentBreakdownLoaded, - heatLossComponentBreakdownFailed, - designLoadLoaded, - designLoadFailed, - utilityBillBreakdownLoaded, - utilityBillBreakdownFailed, - buildingFootprintsLoaded, - buildingFootprintsFailed, + landingDataLoaded, + landingDataFailed, } from './actions'; -function* loadSimStatus(action) { - const url = `${process.env.REACT_APP_BLOCLINK_URL}/buildings/${action.buildingId}/api/v1/simulation-status/`; - const res = yield call(request, url, { method: 'GET' }); - - if (!res.err) { - yield put(simStatusLoaded(res)); - } else { - yield put(simStatusLoadingError(res.err)); - } -} - -function* runSimulation(action) { - const url = `${process.env.REACT_APP_BLOCLINK_URL}/buildings/${action.buildingId}/api/v1/run-simulation/`; - const res = yield call(request, url, { method: 'POST', body: JSON.stringify({ weather: action.weather }) }); - - if (!res.err) { - yield put(runSimulationSucceeded(res)); - } else { - yield put(runSimulationFailed(res.err)); - } -} - -function* loadMonthlyHeatingConsum(action) { - const buildingId = action.payload; - - const res = yield call(request, `${process.env.REACT_APP_BLOCLINK_URL}/buildings/${buildingId}/api/v1/monthly-heating-energy/`, { - method: 'GET', - }); - - if (!res.err) { - yield put(monthlyHeatingConsumptionLoaded(res)); - } else { - yield put(monthlyHeatingConsumptionFailed(res.err)); - } -} - -function* loadHeatLossComponentBreakdown(action) { - const buildingId = action.payload; - - const res = yield call(request, `${process.env.REACT_APP_BLOCLINK_URL}/buildings/${buildingId}/api/v1/component-breakdown/`, { +function* loadLandingData(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/data/`; + const res = yield call(request, url, { method: 'GET', + headers: getHeaders(), }); if (!res.err) { - yield put(heatLossComponentBreakdownLoaded(res)); - } else { - yield put(heatLossComponentBreakdownFailed(res.err)); - } -} - -function* loadDesignLoad(action) { - const buildingId = action.payload; - - const res = yield call(request, `${process.env.REACT_APP_BLOCLINK_URL}/buildings/${buildingId}/api/v1/design-load/`, { - method: 'GET', - }); - - if (!res.err) { - yield put(designLoadLoaded(res)); - } else { - yield put(designLoadFailed(res.err)); - } -} - -function* loadUtilBreakdown(action) { - const url = `${process.env.REACT_APP_BLOCLINK_URL}/buildings/${action.buildingId}/api/v1/utility-bill-end-use/`; - const res = yield call(request, url, { method: 'GET' }); - - if (!res.err) { - yield put(utilityBillBreakdownLoaded(res)); - } else { - yield put(utilityBillBreakdownFailed(res.err)); - } -} - -function* loadBuildingFootprints(action) { - const url = `${process.env.REACT_APP_BLOCLINK_URL}/buildings/${action.buildingId}/api/v1/building-footprint/`; - const res = yield call(request, url, { method: 'GET' }); - - if (!res.err) { - yield put(buildingFootprintsLoaded(res)); + console.log(res); // eslint-disable-line + yield put(landingDataLoaded(res)); } else { - yield put(buildingFootprintsFailed(res.err)); + yield put(landingDataFailed(res.err)); } } function* blocnoteWatcher() { - yield takeEvery(LOAD_SIM_STATUS, loadSimStatus); - yield takeEvery(RUN_SIMULATION_REQUESTED, runSimulation); - yield takeEvery(MONTHLY_HEATING_CONSUMPTION_REQUESTED, loadMonthlyHeatingConsum); - yield takeEvery(HEAT_LOSS_COMPONENT_BREAKDOWN_REQUESTED, loadHeatLossComponentBreakdown); - yield takeEvery(DESIGN_LOAD_REQUESTED, loadDesignLoad); - yield takeEvery(UTILITY_BILL_BREAKDOWN_REQUESTED, loadUtilBreakdown); - yield takeEvery(BUILDING_FOOTPRINTS_REQUESTED, loadBuildingFootprints); + yield takeEvery(LANDING_DATA_REQUESTED, loadLandingData); } export default blocnoteWatcher; diff --git a/src/reducers.js b/src/reducers.js index a6b710cf..5bf5ae9a 100644 --- a/src/reducers.js +++ b/src/reducers.js @@ -16,6 +16,7 @@ import sensors from './containers/Sensors/reducer'; import buildingArea from './containers/BuildingArea/reducer'; import weather from './containers/Weather/reducer'; import events from './containers/Event/reducer'; +import blocnote from './containers/Blocnote/reducer'; export default combineReducers({ @@ -35,4 +36,5 @@ export default combineReducers({ buildingArea, weather, events, + blocnote, }); diff --git a/src/routes.js b/src/routes.js index 939876df..f5a1df07 100644 --- a/src/routes.js +++ b/src/routes.js @@ -23,10 +23,10 @@ import Sensors from './containers/Sensors/Sensors'; import SensorInstall from './containers/Sensors/SensorInstall'; import GatewayList from './components/SensorInstall/GatewayList'; import BuildingReports from './containers/BuildingReports'; -import Blocnote from './containers/Blocnote/Blocnote'; -import FinancialInputs from './components/Blocnote/FinancialInputs'; -import PreliminaryFinance from './components/Blocnote/PreliminaryFinance'; -import BudgetSimulator from './components/Blocnote/BudgetSimulator'; +import Blocnote from './containers/Blocnote'; +// import FinancialInputs from './containers/Blocnote/FinancialInputs'; +// import PreliminaryFinance from './containers/Blocnote/PreliminaryFinance'; +// import BudgetSimulator from './containers/Blocnote/BudgetSimulator'; import Wrapper from './containers/Wrapper'; import { BGroupOverview, BGroup } from './containers/BGroup'; import NavOnly from './screens/NavOnly/NavOnly'; @@ -63,15 +63,9 @@ export default ( - - - - - - - - - + {/* + + */} diff --git a/src/sagas.js b/src/sagas.js index 7f33bf76..d880c23e 100644 --- a/src/sagas.js +++ b/src/sagas.js @@ -13,6 +13,7 @@ import sensorsSaga from './containers/Sensors/sagas'; import buildingAreaSaga from './containers/BuildingArea/sagas'; import weatherSaga from './containers/Weather/sagas'; import eventsSaga from './containers/Event/sagas'; +import blocnoteSaga from './containers/Blocnote/sagas'; export default function* rootSaga() { @@ -32,5 +33,6 @@ export default function* rootSaga() { buildingAreaSaga(), weatherSaga(), eventsSaga(), + blocnoteSaga(), ]; } -- GitLab From e7841218b1a9547772adcdcbaa253185a3bcaa26 Mon Sep 17 00:00:00 2001 From: akkking Date: Fri, 12 Apr 2019 12:41:35 -0400 Subject: [PATCH 38/79] Add financial Inputs to container --- src/containers/Blocnote/actions.js | 53 ++++++----- src/containers/Blocnote/constants.js | 24 +++++ src/containers/Blocnote/index.js | 112 +++-------------------- src/containers/Blocnote/reducer.js | 132 ++++++++++++++++++++++++--- src/containers/Blocnote/sagas.js | 19 ++++ 5 files changed, 206 insertions(+), 134 deletions(-) diff --git a/src/containers/Blocnote/actions.js b/src/containers/Blocnote/actions.js index 4126732e..f7d2ef29 100644 --- a/src/containers/Blocnote/actions.js +++ b/src/containers/Blocnote/actions.js @@ -2,35 +2,42 @@ import { LANDING_DATA_REQUESTED, LANDING_DATA_SUCCEEDED, LANDING_DATA_FAILED, + FINANCE_OVERVIEW_REQUESTED, + FINANCE_OVERVIEW_SUCCEEDED, + FINANCE_OVERVIEW_FAILED, } from './constants'; -// import { makeActionCreator } from '../../utils/reduxHelpers'; +import { makeActionCreator } from '../../utils/reduxHelpers'; -export function loadLandingData(buildingId) { - return { - type: LANDING_DATA_REQUESTED, - buildingId, - }; -} +// export function loadLandingData(buildingId) { +// return { +// type: LANDING_DATA_REQUESTED, +// buildingId, +// }; +// } -export function landingDataLoaded(landingData) { - console.log(landingData); // eslint-disable-line - return { - type: LANDING_DATA_SUCCEEDED, - instance: landingData.instance, - }; -} +// export function landingDataLoaded(landingData) { +// console.log(landingData); // eslint-disable-line +// return { +// type: LANDING_DATA_SUCCEEDED, +// instance: landingData.instance, +// }; +// } -export function landingDataFailed(error) { - return { - type: LANDING_DATA_FAILED, - error, - }; -} +// export function landingDataFailed(error) { +// return { +// type: LANDING_DATA_FAILED, +// error, +// }; +// } // console.log('hellx'); -// export const loadLandingData = makeActionCreator(LANDING_DATA_REQUESTED, 'buildingId'); -// export const landingDataLoaded = makeActionCreator(LANDING_DATA_SUCCEEDED, 'instance'); -// export const landingDataFailed = makeActionCreator(LANDING_DATA_FAILED, 'error'); +export const loadLandingData = makeActionCreator(LANDING_DATA_REQUESTED, 'buildingId'); +export const landingDataLoaded = makeActionCreator(LANDING_DATA_SUCCEEDED, 'instance'); +export const landingDataFailed = makeActionCreator(LANDING_DATA_FAILED, 'error'); + +export const loadfianceOverview = makeActionCreator(FINANCE_OVERVIEW_REQUESTED, 'buildingId'); +export const financeOverviewLoaded = makeActionCreator(FINANCE_OVERVIEW_SUCCEEDED, 'instance'); +export const financeOverviewFailed = makeActionCreator(FINANCE_OVERVIEW_FAILED, 'error'); diff --git a/src/containers/Blocnote/constants.js b/src/containers/Blocnote/constants.js index ae65e1bd..e2f19ce6 100644 --- a/src/containers/Blocnote/constants.js +++ b/src/containers/Blocnote/constants.js @@ -1,3 +1,27 @@ export const LANDING_DATA_REQUESTED = 'LANDING_DATA_REQUESTED'; export const LANDING_DATA_SUCCEEDED = 'LANDING_DATA_SUCCEEDED'; export const LANDING_DATA_FAILED = 'LANDING_DATA_FAILED'; +export const FINANCE_OVERVIEW_REQUESTED = 'FINANCE_OVERIVEW_REQUESTED'; +export const FINANCE_OVERVIEW_SUCCEEDED = 'FINANCE_OVERIVEW_SUCCEEDED'; +export const FINANCE_OVERVIEW_FAILED = 'FINANCE_OVERIVEW_FAILED'; +export const BILLS_SUMMARY_REQUESTED = 'BILLS_SUMMARY_REQUESTED'; +export const BILLS_SUMMARY_SUCCEEDED = 'BILLS_SUMMARY_SUCCEEDED'; +export const BILLS_SUMMARY_FAILED = 'BILLS_SUMMARY_FAILED'; +export const CASH_BALANCE_REQUESTED = 'CASH_BALANCE_REQUESTED'; +export const CASH_BALANCE_SUCCEEDED = 'CASH_BALANCE_SUCCEEDED'; +export const CASH_BALANCE_FAILED = 'CASH_BALANCE_FAILED'; +export const CUSTOMER_PREFERENCE_REQUESTED = 'CUSTOMER_PREFERENCE_REQUESTED'; +export const CUSTOMER_PREFERENCE_SUCCEEDED = 'CUSTOMER_PREFERENCE_SUCCEEDED'; +export const CUSTOMER_PREFERENCE_FAILED = 'CUSTOMER_PREFERENCE_FAILED'; +export const ENERGY_BILLS_REQUESTED = 'ENERGY_BILLS_REQUESTED'; +export const ENERGY_BILLS_SUCCEEDED = 'ENERGY_BILLS_SUCCEEDED'; +export const ENERGY_BILLS_FAILED = 'ENERGY_BILLS_FAILED'; +export const INCOME_STATEMENTS_REQUESTED = 'INCOME_STATEMENTS_REQUESTED'; +export const INCOME_STATEMENTS_SUCCEEDED = 'INCOME_STATEMENTS_SUCCEEDED'; +export const INCOME_STATEMENTS_FAILED = 'INCOME_STATEMENTS_FAILED'; +export const LOAN_OPTIONS_REQUESTED = 'LOAN_OPTIONS_REQUESTED'; +export const LOAN_OPTIONS_SUCCEEDED = 'LOAN_OPTIONS_SUCCEEDED'; +export const LOAN_OPTIONS_FAILED = 'LOAN_OPTIONS_FAILED'; +export const MORTGAGE_LIABILITIES_REQUESTED = 'MORTGAGE_LIABILITIES_REQUESTED'; +export const MORTGAGE_LIABILITIES_SUCCEEDED = 'MORTGAGE_LIABILITIES_SUCCEEDED'; +export const MORTGAGE_LIABILITIES_FAILED = 'MORTGAGE_LIABILITIES_FAILED'; diff --git a/src/containers/Blocnote/index.js b/src/containers/Blocnote/index.js index a6dde0ae..d47d81a8 100644 --- a/src/containers/Blocnote/index.js +++ b/src/containers/Blocnote/index.js @@ -7,13 +7,8 @@ import LinkBarDetail from '../../components/LinkBarDetail'; import buildingDetailPropTypes from '../Building/propTypes'; import { loadLandingData } from './actions'; import './styles.css'; -import { - blocnoteURL, - getHeaders, -} from '../../utils/restServices'; -import request from '../../utils/request'; import Loading from '../../components/Loading'; -import landingDataProps from './propTypes'; +import blocnoteProps from './propTypes'; class Blocnote extends Component { @@ -24,97 +19,19 @@ class Blocnote extends Component { financialInputsData: { name: null, status: null }, preliminaryFinanceData: { name: null, status: null }, budgetSimilatorData: { name: null, status: null }, - loading: true, }; } componentDidMount() { - console.log(this.state); // eslint-disable-line this.props.loadLandingData(this.props.building.building_id); - console.log(this.props); // eslint-disable-line } - componentWillReceiveProps(nextProps) { - console.log(nextProps); // eslint-disable-line - console.log(this.props); // eslint-disable-line - } - - loadData = (buildingId) => { - request(`${blocnoteURL}buildings/${buildingId}/data/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - console.log(res); // eslint-disable-line - if (!res.err) { - if (Object.keys(res.instance).length > 0) { - const rootURL = `/buildings/${this.props.building.building_id}`; - - if (res.instance.if_completed) { - this.state.financialInputsData.name = ( - Financial Inputs - ); - this.state.financialInputsData.status = (Complete); - this.state.preliminaryFinanceData.name = ( - Preliminary Finance - ); - this.state.preliminaryFinanceData.status = (OK); - this.state.budgetSimilatorData.name = ( - Budget Simulator - ); - this.state.budgetSimilatorData.status = (OK); - } else { - this.state.financialInputsData.name = ( - Financial Inputs - ); - if (res.instance.if_started) { - this.state.financialInputsData.status = (Started but not complete.); - } else { - this.state.financialInputsData.status = (Not Started.); - } - this.state.preliminaryFinanceData.name = (Preliminary Finance); - const prelimItems = res.instance.not_saved_list_for_prelim.map((item) => { - return (
  • Please fill {item}
  • ); - }); - this.state.preliminaryFinanceData.status = ( -
      - {prelimItems} -
    - ); - - if (res.instance.if_completed_for_budget) { - this.state.budgetSimilatorData.name = ( - Budget Simulator - ); - this.state.budgetSimilatorData.status = (OK); - } else { - this.state.budgetSimilatorData.name = (Budget Simulator); - const budgetItems = res.instance.not_saved_list_for_budget.map((item) => { - return (
  • Please fill {item}
  • ); - }); - this.state.budgetSimilatorData.status = (
      {budgetItems}
    ); - } - } - } - } else if (res.err) { - this.setState({ error: res.err }); - } - this.setState({ loading: false }); - }); - } - - processState = () => { - console.log(this.props); // eslint-disable-line - const { landingData } = this.props; - const { data } = landingData; + processState = (data) => { const rootURL = `/buildings/${this.props.building.building_id}`; - // console.log(landingData); // eslint-disable-line - // console.log(blocnote); // eslint-disable-line - console.log(data); // eslint-disable-line if (data === null) { console.log(data); // eslint-disable-line - } else if (data.if_completed) { - console.log(data); // eslint-disable-line + } else if (data.instance.if_completed) { this.state.financialInputsData.name = ( Financial Inputs ); @@ -128,17 +45,16 @@ class Blocnote extends Component { ); this.state.budgetSimilatorData.status = (OK); } else { - console.log(data); // eslint-disable-line this.state.financialInputsData.name = ( Financial Inputs ); - if (data.if_started) { + if (data.instance.if_started) { this.state.financialInputsData.status = (Started but not complete.); } else { this.state.financialInputsData.status = (Not Started.); } this.state.preliminaryFinanceData.name = (Preliminary Finance); - const prelimItems = data.not_saved_list_for_prelim.map((item) => { + const prelimItems = data.instance.not_saved_list_for_prelim.map((item) => { return (
  • Please fill {item}
  • ); }); this.state.preliminaryFinanceData.status = ( @@ -147,31 +63,31 @@ class Blocnote extends Component { ); - if (data.if_completed_for_budget) { + if (data.instance.if_completed_for_budget) { this.state.budgetSimilatorData.name = ( Budget Simulator ); this.state.budgetSimilatorData.status = (OK); } else { this.state.budgetSimilatorData.name = (Budget Simulator); - const budgetItems = data.not_saved_list_for_budget.map((item) => { + const budgetItems = data.instance.not_saved_list_for_budget.map((item) => { return (
  • Please fill {item}
  • ); }); this.state.budgetSimilatorData.status = (
      {budgetItems}
    ); } } - - this.setState({ loading: false }); } render() { - console.log(this.props.landingData); // eslint-disable-line - this.processState(); let mainContent = null; + const { blocnote } = this.props; + const { landingData } = blocnote; + const { data } = landingData; - if (this.state.loading) { + if (data === null) { mainContent = ; } else { + this.processState(data); mainContent = (
    @@ -237,7 +153,7 @@ class Blocnote extends Component { Blocnote.propTypes = { building: buildingDetailPropTypes, loadLandingData: PropTypes.func, - landingData: landingDataProps, + blocnote: blocnoteProps, }; const mapDispatchToProps = dispatch => ( @@ -247,7 +163,7 @@ const mapDispatchToProps = dispatch => ( ); const mapStateToProps = state => ({ - landingData: state.blocnote, + blocnote: state.blocnote, }); export default connect(mapStateToProps, mapDispatchToProps)(Blocnote); diff --git a/src/containers/Blocnote/reducer.js b/src/containers/Blocnote/reducer.js index 761890bf..a5e8fbae 100644 --- a/src/containers/Blocnote/reducer.js +++ b/src/containers/Blocnote/reducer.js @@ -2,12 +2,78 @@ import { LANDING_DATA_REQUESTED, LANDING_DATA_SUCCEEDED, LANDING_DATA_FAILED, + FINANCE_OVERVIEW_REQUESTED, + FINANCE_OVERVIEW_SUCCEEDED, + FINANCE_OVERVIEW_FAILED, + // BILLS_SUMMARY_REQUESTED, + // BILLS_SUMMARY_SUCCEEDED, + // BILLS_SUMMARY_FAILED, + // CASH_BALANCE_REQUESTED, + // CASH_BALANCE_SUCCEEDED, + // CASH_BALANCE_FAILED, + // CUSTOMER_PREFERENCE_REQUESTED, + // CUSTOMER_PREFERENCE_SUCCEEDED, + // CUSTOMER_PREFERENCE_FAILED, + // ENERGY_BILLS_REQUESTED, + // ENERGY_BILLS_SUCCEEDED, + // ENERGY_BILLS_FAILED, + // INCOME_STATEMENTS_REQUESTED, + // INCOME_STATEMENTS_SUCCEEDED, + // INCOME_STATEMENTS_FAILED, + // LOAN_OPTIONS_REQUESTED, + // LOAN_OPTIONS_SUCCEEDED, + // LOAN_OPTIONS_FAILED, + // MORTGAGE_LIABILITIES_REQUESTED, + // MORTGAGE_LIABILITIES_SUCCEEDED, + // MORTGAGE_LIABILITIES_FAILED, } from './constants'; const blocnoteInitialState = { - loading: false, - error: false, - data: null, + landingData: { + loading: false, + error: false, + data: null, + }, + fianceOverview: { + loading: false, + error: false, + data: null, + }, + billsSummary: { + loading: false, + error: false, + data: null, + }, + cashBalance: { + loading: false, + error: false, + data: null, + }, + customerPreference: { + loading: false, + error: false, + data: null, + }, + energyBills: { + loading: false, + error: false, + data: null, + }, + incomeStatments: { + loading: false, + error: false, + data: null, + }, + loanOptions: { + loading: false, + error: false, + data: null, + }, + mortgageLiabilities: { + loading: false, + error: false, + data: null, + }, }; export default function (state = blocnoteInitialState, action) { @@ -16,25 +82,65 @@ export default function (state = blocnoteInitialState, action) { case LANDING_DATA_REQUESTED: return { ...state, - loading: true, - error: false, + landingData: { + ...state.landingData, + loading: true, + error: false, + }, }; - case LANDING_DATA_SUCCEEDED: { - console.log({ ...state, data: action.instance, loading: false, error: false }); // eslint-disable-line + case LANDING_DATA_SUCCEEDED: + // console.log({ + // ...state, + // data: action.instance, + // loading: false, error: + // false + // }); // eslint-disable-line return { ...state, - data: action.instance, - loading: false, - error: false, + landingData: { + data: action.instance, + loading: false, + error: false, + }, }; - } case LANDING_DATA_FAILED: return { ...state, - loading: false, - error: action.error, + landingData: { + loading: false, + error: action.error, + }, + }; + + case FINANCE_OVERVIEW_REQUESTED: + return { + ...state, + fianceOverview: { + ...state.fianceOverview, + loading: true, + error: false, + }, + }; + + case FINANCE_OVERVIEW_SUCCEEDED: + return { + ...state, + fianceOverview: { + data: action.instance, + loading: false, + error: false, + }, + }; + + case FINANCE_OVERVIEW_FAILED: + return { + ...state, + fianceOverview: { + loading: false, + error: action.error, + }, }; default: diff --git a/src/containers/Blocnote/sagas.js b/src/containers/Blocnote/sagas.js index 317ea35e..2251c276 100644 --- a/src/containers/Blocnote/sagas.js +++ b/src/containers/Blocnote/sagas.js @@ -4,11 +4,14 @@ import { getHeaders } from '../../utils/restServices'; import { LANDING_DATA_REQUESTED, + FINANCE_OVERVIEW_REQUESTED, } from './constants'; import { landingDataLoaded, landingDataFailed, + financeOverviewLoaded, + financeOverviewFailed, } from './actions'; @@ -27,8 +30,24 @@ function* loadLandingData(action) { } } +function* loadFinanceOverview(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/finance-overview/`; + const res = yield call(request, url, { + method: 'GET', + headers: getHeaders(), + }); + + if (!res.err) { + console.log(res); // eslint-disable-line + yield put(financeOverviewLoaded(res)); + } else { + yield put(financeOverviewFailed(res.err)); + } +} + function* blocnoteWatcher() { yield takeEvery(LANDING_DATA_REQUESTED, loadLandingData); + yield takeEvery(FINANCE_OVERVIEW_REQUESTED, loadFinanceOverview); } export default blocnoteWatcher; -- GitLab From 2298e0553411c4d159d5430b6703bf56a670a388 Mon Sep 17 00:00:00 2001 From: akkking Date: Fri, 12 Apr 2019 14:17:33 -0400 Subject: [PATCH 39/79] Remove states uses from landing & budgetSimulator page --- src/components/Blocnote/index.js | 167 +++++++++++++++++ src/containers/Blocnote/BudgetSimulator.js | 205 ++++++++------------- src/containers/Blocnote/actions.js | 7 + src/containers/Blocnote/constants.js | 5 + src/containers/Blocnote/index.js | 76 ++++---- src/containers/Blocnote/reducer.js | 37 ++++ src/containers/Blocnote/sagas.js | 19 +- src/routes.js | 6 +- 8 files changed, 349 insertions(+), 173 deletions(-) create mode 100644 src/components/Blocnote/index.js diff --git a/src/components/Blocnote/index.js b/src/components/Blocnote/index.js new file mode 100644 index 00000000..4f59563b --- /dev/null +++ b/src/components/Blocnote/index.js @@ -0,0 +1,167 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { Link } from 'react-router'; +import LinkBarDetail from '../LinkBarDetail'; +import './styles.css'; +import { + blocnoteURL, + getHeaders, +} from '../../utils/restServices'; +import request from '../../utils/request'; +import Loading from '../Loading'; + + +class Blocnote extends Component { + + constructor(props) { + super(props); + this.state = { + financialInputsData: { name: null, status: null }, + preliminaryFinanceData: { name: null, status: null }, + budgetSimilatorData: { name: null, status: null }, + loading: true, + }; + } + + componentDidMount() { + console.log(this.state); // eslint-disable-line + this.loadData(this.props.buildingId); + console.log(this.props); // eslint-disable-line + } + + loadData = (buildingId) => { + request(`${blocnoteURL}buildings/${buildingId}/data/`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + console.log(res); // eslint-disable-line + if (!res.err) { + if (Object.keys(res.instance).length > 0) { + const rootURL = `/buildings/${this.props.buildingId}`; + + if (res.instance.if_completed) { + this.state.financialInputsData.name = ( + Financial Inputs + ); + this.state.financialInputsData.status = (Complete); + this.state.preliminaryFinanceData.name = ( + Preliminary Finance + ); + this.state.preliminaryFinanceData.status = (OK); + this.state.budgetSimilatorData.name = ( + Budget Simulator + ); + this.state.budgetSimilatorData.status = (OK); + } else { + this.state.financialInputsData.name = ( + Financial Inputs + ); + if (res.instance.if_started) { + this.state.financialInputsData.status = (Started but not complete.); + } else { + this.state.financialInputsData.status = (Not Started.); + } + this.state.preliminaryFinanceData.name = (Preliminary Finance); + const prelimItems = res.instance.not_saved_list_for_prelim.map((item) => { + return (
  • Please fill {item}
  • ); + }); + this.state.preliminaryFinanceData.status = ( +
      + {prelimItems} +
    + ); + + if (res.instance.if_completed_for_budget) { + this.state.budgetSimilatorData.name = ( + Budget Simulator + ); + this.state.budgetSimilatorData.status = (OK); + } else { + this.state.budgetSimilatorData.name = (Budget Simulator); + const budgetItems = res.instance.not_saved_list_for_budget.map((item) => { + return (
  • Please fill {item}
  • ); + }); + this.state.budgetSimilatorData.status = (
      {budgetItems}
    ); + } + } + } + } else if (res.err) { + this.setState({ error: res.err }); + } + this.setState({ loading: false }); + }); + } + + render() { + let mainContent = null; + + if (this.state.loading) { + mainContent = ; + } else { + mainContent = ( +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + +
    OPTIONSSTATUS
    + {this.state.financialInputsData.name} + + {this.state.financialInputsData.status} +
    + {this.state.preliminaryFinanceData.name} + + {this.state.preliminaryFinanceData.status} +
    + {this.state.budgetSimilatorData.name} + + {this.state.budgetSimilatorData.status} +
    +
    +
    +
    +
    + ); + } + + return ( +
    + + {mainContent} +
    + ); + } +} + +Blocnote.propTypes = { + buildingId: PropTypes.string, +}; + +export default Blocnote; diff --git a/src/containers/Blocnote/BudgetSimulator.js b/src/containers/Blocnote/BudgetSimulator.js index c56df082..113cbe17 100644 --- a/src/containers/Blocnote/BudgetSimulator.js +++ b/src/containers/Blocnote/BudgetSimulator.js @@ -1,142 +1,80 @@ import React, { Component } from 'react'; -import { Link } from 'react-router'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; import LinkBarDetail from '../../components/LinkBarDetail'; import buildingDetailPropTypes from '../Building/propTypes'; import './styles.css'; -import { - blocnoteURL, - getHeaders, -} from '../../utils/restServices'; -import request from '../../utils/request'; import Loading from '../../components/Loading'; +import BugetTable from '../../components/Blocnote/BudgetSimulator/BugetTable'; +import BudgetChart from '../../components/Blocnote/BudgetSimulator/BudgetChart'; +import { loadBudgetSimulator } from './actions'; +import blocnoteProps from './propTypes'; class BudgetSimulator extends Component { - - constructor(props) { - super(props); - this.state = { - financialInputsData: { name: null, status: null }, - preliminaryFinanceData: { name: null, status: null }, - budgetSimilatorData: { name: null, status: null }, - loading: true, - }; - } - componentDidMount() { - this.loadData(this.props.building.building_id); + this.props.loadBudgetSimulator(this.props.building.building_id); } - loadData = (buildingId) => { - request(`${blocnoteURL}buildings/${buildingId}/data/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - console.log(res); // eslint-disable-line - if (!res.err) { - if (Object.keys(res.instance).length > 0) { - const rootURL = `/buildings/${this.props.building.building_id}`; - - if (res.instance.if_completed) { - this.state.financialInputsData.name = ( - Financial Inputs - ); - this.state.financialInputsData.status = (Complete); - this.state.preliminaryFinanceData.name = ( - Preliminary Finance - ); - this.state.preliminaryFinanceData.status = (OK); - this.state.budgetSimilatorData.name = ( - Budget Simulator - ); - this.state.budgetSimilatorData.status = (OK); - } else { - this.state.financialInputsData.name = ( - Financial Inputs - ); - if (res.instance.if_started) { - this.state.financialInputsData.status = (Started but not complete.); - } else { - this.state.financialInputsData.status = (Not Started.); - } - this.state.preliminaryFinanceData.name = (Preliminary Finance); - const prelimItems = res.instance.not_saved_list_for_prelim.map((item) => { - return (
  • Please fill {item}
  • ); - }); - this.state.preliminaryFinanceData.status = ( -
      - {prelimItems} -
    - ); - - if (res.instance.if_completed_for_budget) { - this.state.budgetSimilatorData.name = ( - Budget Simulator - ); - this.state.budgetSimilatorData.status = (OK); - } else { - this.state.budgetSimilatorData.name = (Budget Simulator); - const budgetItems = res.instance.not_saved_list_for_budget.map((item) => { - return (
  • Please fill {item}
  • ); - }); - this.state.budgetSimilatorData.status = (
      {budgetItems}
    ); - } - } - } - } else if (res.err) { - this.setState({ error: res.err }); - } - this.setState({ loading: false }); - }); + processData = (data) => { + const tables = data.instance.tables; + return { + savingPotentialList: data.instance.saving_potential_list, + budgetLoanFirst: data.instance.tables.budget_loan_first, + budgetLoanOnly: data.instance.tables.budget_loan_only, + budgetSfFirst: data.instance.tables.budget_sf_first, + budgetSfMax: data.instance.tables.budget_sf_max, + budgets: Object.keys(tables).map(tableName => tables[tableName][0].slice(1)), + }; } render() { let mainContent = null; + let bugetTables = []; + const blockStyle = { marginBottom: '40px' }; + const tableKeys = [ + 'budgetLoanFirst', + 'budgetLoanOnly', + 'budgetSfFirst', + 'budgetSfMax', + ]; + const tableNames = { + budgetLoanFirst: 'Budget with Loan only', + budgetLoanOnly: 'Budget with Loan first', + budgetSfFirst: 'Budget with SF first', + budgetSfMax: 'Budget with SF maximum', + }; + + const { blocnote } = this.props; + const { budgetSimulator } = blocnote; + const { data } = budgetSimulator; - if (this.state.loading) { + if (data === null) { mainContent = ; } else { + const dataDic = this.processData(data); + bugetTables = tableKeys.map((tableKey) => { + return ( +
    + +
    + ); + }); + mainContent = ( -
    +
    +
    -
    -
    - - - - - - - - - - - - - - - - - - - - - -
    OPTIONSSTATUS
    - {this.state.financialInputsData.name} - - {this.state.financialInputsData.status} -
    - {this.state.preliminaryFinanceData.name} - - {this.state.preliminaryFinanceData.status} -
    - {this.state.budgetSimilatorData.name} - - {this.state.budgetSimilatorData.status} -
    -
    -
    + {bugetTables}
    ); @@ -145,10 +83,11 @@ class BudgetSimulator extends Component { return (
    @@ -160,19 +99,19 @@ class BudgetSimulator extends Component { BudgetSimulator.propTypes = { building: buildingDetailPropTypes, - // envelope: envelopeProps, - // loadScenario: PropTypes.func, + blocnote: blocnoteProps, + loadBudgetSimulator: PropTypes.func, + buildingId: PropTypes.string, }; -// const mapDispatchToProps = dispatch => ( -// bindActionCreators({ -// // loadScenario, -// }, dispatch) -// ); +const mapDispatchToProps = dispatch => ( + bindActionCreators({ + loadBudgetSimulator, + }, dispatch) +); -// const mapStateToProps = state => ({ -// // envelope: state.envelope, -// eng: state.eng, -// }); +const mapStateToProps = state => ({ + blocnote: state.blocnote, +}); -export default BudgetSimulator; +export default connect(mapStateToProps, mapDispatchToProps)(BudgetSimulator); diff --git a/src/containers/Blocnote/actions.js b/src/containers/Blocnote/actions.js index f7d2ef29..0dd83f9c 100644 --- a/src/containers/Blocnote/actions.js +++ b/src/containers/Blocnote/actions.js @@ -5,6 +5,9 @@ import { FINANCE_OVERVIEW_REQUESTED, FINANCE_OVERVIEW_SUCCEEDED, FINANCE_OVERVIEW_FAILED, + BUDGET_SIMULATOR_REQUESTED, + BUDGET_SIMULATOR_SUCCEEDED, + BUDGET_SIMULATOR_FAILED, } from './constants'; import { makeActionCreator } from '../../utils/reduxHelpers'; @@ -41,3 +44,7 @@ export const landingDataFailed = makeActionCreator(LANDING_DATA_FAILED, 'error') export const loadfianceOverview = makeActionCreator(FINANCE_OVERVIEW_REQUESTED, 'buildingId'); export const financeOverviewLoaded = makeActionCreator(FINANCE_OVERVIEW_SUCCEEDED, 'instance'); export const financeOverviewFailed = makeActionCreator(FINANCE_OVERVIEW_FAILED, 'error'); + +export const loadBudgetSimulator = makeActionCreator(BUDGET_SIMULATOR_REQUESTED, 'buildingId'); +export const budgetSimulatorLoaded = makeActionCreator(BUDGET_SIMULATOR_SUCCEEDED, 'instance'); +export const budgetSimulatorFailed = makeActionCreator(BUDGET_SIMULATOR_FAILED, 'error'); diff --git a/src/containers/Blocnote/constants.js b/src/containers/Blocnote/constants.js index e2f19ce6..58e4a88e 100644 --- a/src/containers/Blocnote/constants.js +++ b/src/containers/Blocnote/constants.js @@ -1,6 +1,7 @@ export const LANDING_DATA_REQUESTED = 'LANDING_DATA_REQUESTED'; export const LANDING_DATA_SUCCEEDED = 'LANDING_DATA_SUCCEEDED'; export const LANDING_DATA_FAILED = 'LANDING_DATA_FAILED'; + export const FINANCE_OVERVIEW_REQUESTED = 'FINANCE_OVERIVEW_REQUESTED'; export const FINANCE_OVERVIEW_SUCCEEDED = 'FINANCE_OVERIVEW_SUCCEEDED'; export const FINANCE_OVERVIEW_FAILED = 'FINANCE_OVERIVEW_FAILED'; @@ -25,3 +26,7 @@ export const LOAN_OPTIONS_FAILED = 'LOAN_OPTIONS_FAILED'; export const MORTGAGE_LIABILITIES_REQUESTED = 'MORTGAGE_LIABILITIES_REQUESTED'; export const MORTGAGE_LIABILITIES_SUCCEEDED = 'MORTGAGE_LIABILITIES_SUCCEEDED'; export const MORTGAGE_LIABILITIES_FAILED = 'MORTGAGE_LIABILITIES_FAILED'; + +export const BUDGET_SIMULATOR_REQUESTED = 'BUDGET_SIMULATOR_REQUESTED'; +export const BUDGET_SIMULATOR_SUCCEEDED = 'BUDGET_SIMULATOR_SUCCEEDED'; +export const BUDGET_SIMULATOR_FAILED = 'BUDGET_SIMULATOR_FAILED'; diff --git a/src/containers/Blocnote/index.js b/src/containers/Blocnote/index.js index d47d81a8..7c47731e 100644 --- a/src/containers/Blocnote/index.js +++ b/src/containers/Blocnote/index.js @@ -12,70 +12,74 @@ import blocnoteProps from './propTypes'; class Blocnote extends Component { - - constructor(props) { - super(props); - this.state = { - financialInputsData: { name: null, status: null }, - preliminaryFinanceData: { name: null, status: null }, - budgetSimilatorData: { name: null, status: null }, - }; - } - componentDidMount() { this.props.loadLandingData(this.props.building.building_id); } - processState = (data) => { + processData = (data) => { const rootURL = `/buildings/${this.props.building.building_id}`; + const dataDic = { + financialInputs: { + name: null, + status: null, + }, + preliminaryFinance: { + name: null, + status: null, + }, + budgetSimilator: { + name: null, + status: null, + }, + }; - if (data === null) { - console.log(data); // eslint-disable-line - } else if (data.instance.if_completed) { - this.state.financialInputsData.name = ( + if (data.instance.if_completed) { + dataDic.financialInputs.name = ( Financial Inputs ); - this.state.financialInputsData.status = (Complete); - this.state.preliminaryFinanceData.name = ( + dataDic.financialInputs.status = (Complete); + dataDic.preliminaryFinance.name = ( Preliminary Finance ); - this.state.preliminaryFinanceData.status = (OK); - this.state.budgetSimilatorData.name = ( + dataDic.preliminaryFinance.status = (OK); + dataDic.budgetSimilatorData.name = ( Budget Simulator ); - this.state.budgetSimilatorData.status = (OK); + dataDic.budgetSimilator.status = (OK); } else { - this.state.financialInputsData.name = ( + dataDic.financialInputs.name = ( Financial Inputs ); if (data.instance.if_started) { - this.state.financialInputsData.status = (Started but not complete.); + dataDic.financialInputs.status = (Started but not complete.); } else { - this.state.financialInputsData.status = (Not Started.); + dataDic.financialInputs.status = (Not Started.); } - this.state.preliminaryFinanceData.name = (Preliminary Finance); + dataDic.preliminaryFinance.name = (Preliminary Finance); const prelimItems = data.instance.not_saved_list_for_prelim.map((item) => { return (
  • Please fill {item}
  • ); }); - this.state.preliminaryFinanceData.status = ( + dataDic.preliminaryFinance.status = (
      {prelimItems}
    ); if (data.instance.if_completed_for_budget) { - this.state.budgetSimilatorData.name = ( + dataDic.budgetSimilator.name = ( Budget Simulator ); - this.state.budgetSimilatorData.status = (OK); + dataDic.budgetSimilator.status = (OK); } else { - this.state.budgetSimilatorData.name = (Budget Simulator); + dataDic.budgetSimilator.name = (Budget Simulator); const budgetItems = data.instance.not_saved_list_for_budget.map((item) => { return (
  • Please fill {item}
  • ); }); - this.state.budgetSimilatorData.status = (
      {budgetItems}
    ); + dataDic.budgetSimilator.status = (
      {budgetItems}
    ); } } + + return dataDic; } render() { @@ -87,7 +91,7 @@ class Blocnote extends Component { if (data === null) { mainContent = ; } else { - this.processState(data); + const dataDic = this.processData(data); mainContent = (
    @@ -103,26 +107,26 @@ class Blocnote extends Component { - {this.state.financialInputsData.name} + {dataDic.financialInputs.name} - {this.state.financialInputsData.status} + {dataDic.financialInputs.status} - {this.state.preliminaryFinanceData.name} + {dataDic.preliminaryFinance.name} - {this.state.preliminaryFinanceData.status} + {dataDic.preliminaryFinance.status} - {this.state.budgetSimilatorData.name} + {dataDic.budgetSimilator.name} - {this.state.budgetSimilatorData.status} + {dataDic.budgetSimilator.status} diff --git a/src/containers/Blocnote/reducer.js b/src/containers/Blocnote/reducer.js index a5e8fbae..82c4b8ee 100644 --- a/src/containers/Blocnote/reducer.js +++ b/src/containers/Blocnote/reducer.js @@ -26,6 +26,9 @@ import { // MORTGAGE_LIABILITIES_REQUESTED, // MORTGAGE_LIABILITIES_SUCCEEDED, // MORTGAGE_LIABILITIES_FAILED, + BUDGET_SIMULATOR_REQUESTED, + BUDGET_SIMULATOR_SUCCEEDED, + BUDGET_SIMULATOR_FAILED, } from './constants'; const blocnoteInitialState = { @@ -74,6 +77,11 @@ const blocnoteInitialState = { error: false, data: null, }, + budgetSimulator: { + loading: false, + error: false, + data: null, + }, }; export default function (state = blocnoteInitialState, action) { @@ -143,6 +151,35 @@ export default function (state = blocnoteInitialState, action) { }, }; + case BUDGET_SIMULATOR_REQUESTED: + return { + ...state, + budgetSimulator: { + ...state.budgetSimulator, + loading: true, + error: false, + }, + }; + + case BUDGET_SIMULATOR_SUCCEEDED: + return { + ...state, + budgetSimulator: { + data: action.instance, + loading: false, + error: false, + }, + }; + + case BUDGET_SIMULATOR_FAILED: + return { + ...state, + budgetSimulator: { + loading: false, + error: action.error, + }, + }; + default: return state; } diff --git a/src/containers/Blocnote/sagas.js b/src/containers/Blocnote/sagas.js index 2251c276..40264aad 100644 --- a/src/containers/Blocnote/sagas.js +++ b/src/containers/Blocnote/sagas.js @@ -5,6 +5,7 @@ import { getHeaders } from '../../utils/restServices'; import { LANDING_DATA_REQUESTED, FINANCE_OVERVIEW_REQUESTED, + BUDGET_SIMULATOR_REQUESTED, } from './constants'; import { @@ -12,6 +13,8 @@ import { landingDataFailed, financeOverviewLoaded, financeOverviewFailed, + budgetSimulatorLoaded, + budgetSimulatorFailed, } from './actions'; @@ -38,16 +41,30 @@ function* loadFinanceOverview(action) { }); if (!res.err) { - console.log(res); // eslint-disable-line yield put(financeOverviewLoaded(res)); } else { yield put(financeOverviewFailed(res.err)); } } +function* loadBudgetSimulator(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/budget/budget-data/`; + const res = yield call(request, url, { + method: 'GET', + headers: getHeaders(), + }); + + if (!res.err) { + yield put(budgetSimulatorLoaded(res)); + } else { + yield put(budgetSimulatorFailed(res.err)); + } +} + function* blocnoteWatcher() { yield takeEvery(LANDING_DATA_REQUESTED, loadLandingData); yield takeEvery(FINANCE_OVERVIEW_REQUESTED, loadFinanceOverview); + yield takeEvery(BUDGET_SIMULATOR_REQUESTED, loadBudgetSimulator); } export default blocnoteWatcher; diff --git a/src/routes.js b/src/routes.js index f5a1df07..1b6342e0 100644 --- a/src/routes.js +++ b/src/routes.js @@ -26,7 +26,7 @@ import BuildingReports from './containers/BuildingReports'; import Blocnote from './containers/Blocnote'; // import FinancialInputs from './containers/Blocnote/FinancialInputs'; // import PreliminaryFinance from './containers/Blocnote/PreliminaryFinance'; -// import BudgetSimulator from './containers/Blocnote/BudgetSimulator'; +import BudgetSimulator from './containers/Blocnote/BudgetSimulator'; import Wrapper from './containers/Wrapper'; import { BGroupOverview, BGroup } from './containers/BGroup'; import NavOnly from './screens/NavOnly/NavOnly'; @@ -64,8 +64,8 @@ export default ( {/* - - */} + */} + -- GitLab From 989618f209e80c73368e00b2f615b6a2c8eeb484 Mon Sep 17 00:00:00 2001 From: akkking Date: Fri, 12 Apr 2019 16:09:58 -0400 Subject: [PATCH 40/79] Add financial inputs components --- .../FinancialInputs/MortgageLiabilities.js | 4 +- src/containers/Blocnote/FinancialInputs.js | 293 ++++++++++-------- src/containers/Blocnote/actions.js | 76 +++-- src/containers/Blocnote/constants.js | 21 +- src/containers/Blocnote/reducer.js | 281 +++++++++++++++-- src/containers/Blocnote/sagas.js | 144 +++++++++ 6 files changed, 622 insertions(+), 197 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js index e09dd317..9371e294 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -98,8 +98,8 @@ class MortgageLiabilities extends Component { } handleOnChange = (event) => { - console.log(event.target.name); - console.log(event.target.value); + console.log(event.target.name); // eslint-disable-line + console.log(event.target.value); // eslint-disable-line this.setState({ [event.target.name]: event.target.value }); // this.setState({ liability: event.target.value }); } diff --git a/src/containers/Blocnote/FinancialInputs.js b/src/containers/Blocnote/FinancialInputs.js index 7dca1f9c..0a2a9706 100644 --- a/src/containers/Blocnote/FinancialInputs.js +++ b/src/containers/Blocnote/FinancialInputs.js @@ -1,145 +1,150 @@ import React, { Component } from 'react'; -import { Link } from 'react-router'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; import LinkBarDetail from '../../components/LinkBarDetail'; import buildingDetailPropTypes from '../Building/propTypes'; import './styles.css'; -import { - blocnoteURL, - getHeaders, -} from '../../utils/restServices'; -import request from '../../utils/request'; import Loading from '../../components/Loading'; - +import { + loadFinanceOverview, loadBills, loadBillsOverview, + loadBillsSummary, loadCashBalance, loadLoanOptions, + loadCustomerPreference, loadIncomeStatement, loadLiabilities, +} from './actions'; +import blocnoteProps from './propTypes'; +import FinanceOverview from './../../components/Blocnote/FinancialInputs/FinanceOverview'; +import EnergyBills from './../../components/Blocnote/FinancialInputs/EnergyBills'; +import BillsSummary from './../../components/Blocnote/FinancialInputs/BillsSummary'; +import EnergyBillsOverview from './../../components/Blocnote/FinancialInputs/EnergyBillsOverview'; +import IncomeStatements from './../../components/Blocnote/FinancialInputs/IncomeStatements'; +import CashBalance from './../../components/Blocnote/FinancialInputs/CashBalance'; +import MortgageLiabilities from './../../components/Blocnote/FinancialInputs/MortgageLiabilities'; +import LoanOptions from './../../components/Blocnote/FinancialInputs/LoanOptions'; +import CustomerPreference from './../../components/Blocnote/FinancialInputs/CustomerPreference'; +// import { +// EnergyBills, BillsSummary, +// EnergyBillsOverview, IncomeStatements, CashBalance, +// MortgageLiabilities, LoanOptions, CustomerPreference, +// } from './../../components/Blocnote/FinancialInputs'; class FinancialInputs extends Component { - - constructor(props) { - super(props); - this.state = { - financialInputsData: { name: null, status: null }, - preliminaryFinanceData: { name: null, status: null }, - budgetSimilatorData: { name: null, status: null }, - loading: true, - }; - } - componentDidMount() { - this.loadData(this.props.building.building_id); - this.props.loadBuildingDetail(this.props.buildingId); - this.props.loadProjects({ building_id: this.props.buildingId }); + this.props.loadFinanceOverview(this.props.buildingId); + this.props.loadBills(this.props.buildingId); + this.props.loadBillsSummary(this.props.buildingId); + this.props.loadBillsOverview(this.props.buildingId); + this.props.loadIncomeStatement(this.props.buildingId); + this.props.loadCashBalance(this.props.buildingId); + this.props.loadLiabilities(this.props.buildingId); + this.props.loadLoanOptions(this.props.buildingId); + this.props.loadCustomerPreference(this.props.buildingId); } - loadData = (buildingId) => { - request(`${blocnoteURL}buildings/${buildingId}/data/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - console.log(res); // eslint-disable-line - if (!res.err) { - if (Object.keys(res.instance).length > 0) { - const rootURL = `/buildings/${this.props.building.building_id}`; - - if (res.instance.if_completed) { - this.state.financialInputsData.name = ( - Financial Inputs - ); - this.state.financialInputsData.status = (Complete); - this.state.preliminaryFinanceData.name = ( - Preliminary Finance - ); - this.state.preliminaryFinanceData.status = (OK); - this.state.budgetSimilatorData.name = ( - Budget Simulator - ); - this.state.budgetSimilatorData.status = (OK); - } else { - this.state.financialInputsData.name = ( - Financial Inputs - ); - if (res.instance.if_started) { - this.state.financialInputsData.status = (Started but not complete.); - } else { - this.state.financialInputsData.status = (Not Started.); - } - this.state.preliminaryFinanceData.name = (Preliminary Finance); - const prelimItems = res.instance.not_saved_list_for_prelim.map((item) => { - return (
  • Please fill {item}
  • ); - }); - this.state.preliminaryFinanceData.status = ( -
      - {prelimItems} -
    - ); - - if (res.instance.if_completed_for_budget) { - this.state.budgetSimilatorData.name = ( - Budget Simulator - ); - this.state.budgetSimilatorData.status = (OK); - } else { - this.state.budgetSimilatorData.name = (Budget Simulator); - const budgetItems = res.instance.not_saved_list_for_budget.map((item) => { - return (
  • Please fill {item}
  • ); - }); - this.state.budgetSimilatorData.status = (
      {budgetItems}
    ); - } - } - } - } else if (res.err) { - this.setState({ error: res.err }); - } - this.setState({ loading: false }); - }); + processData = (data) => { + const tables = data.instance.tables; + return { + savingPotentialList: data.instance.saving_potential_list, + budgetLoanFirst: data.instance.tables.budget_loan_first, + budgetLoanOnly: data.instance.tables.budget_loan_only, + budgetSfFirst: data.instance.tables.budget_sf_first, + budgetSfMax: data.instance.tables.budget_sf_max, + budgets: Object.keys(tables).map(tableName => tables[tableName][0].slice(1)), + }; } render() { let mainContent = null; + const blockStyle = { marginBottom: '40px' }; + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; + const successMessageStyle = { + color: 'green', + paddingLeft: '25px', + fontWeight: 'bold', + }; + const errorMessageStyle = { + color: 'red', + paddingLeft: '25px', + fontWeight: 'bold', + }; + + console.log(this.props); // eslint-disable-line + const { blocnote } = this.props; + const { budgetSimulator } = blocnote; + const { data } = budgetSimulator; - if (this.state.loading) { + if (data === null) { mainContent = ; } else { + const dataDic = this.processData(data); + console.log(dataDic); // eslint-disable-line mainContent = ( -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - -
    OPTIONSSTATUS
    - {this.state.financialInputsData.name} - - {this.state.financialInputsData.status} -
    - {this.state.preliminaryFinanceData.name} - - {this.state.preliminaryFinanceData.status} -
    - {this.state.budgetSimilatorData.name} - - {this.state.budgetSimilatorData.status} -
    -
    -
    -
    +
    + + + + + + + + +
    ); } @@ -161,20 +166,36 @@ class FinancialInputs extends Component { } FinancialInputs.propTypes = { + buildingId: PropTypes.string, building: buildingDetailPropTypes, - // envelope: envelopeProps, - // loadScenario: PropTypes.func, + blocnote: blocnoteProps, + loadFinanceOverview: PropTypes.func, + loadBills: PropTypes.func, + loadBillsSummary: PropTypes.func, + loadBillsOverview: PropTypes.func, + loadIncomeStatement: PropTypes.func, + loadCashBalance: PropTypes.func, + loadLiabilities: PropTypes.func, + loadLoanOptions: PropTypes.func, + loadCustomerPreference: PropTypes.func, }; -// const mapDispatchToProps = dispatch => ( -// bindActionCreators({ -// // loadScenario, -// }, dispatch) -// ); +const mapDispatchToProps = dispatch => { + return bindActionCreators({ + loadFinanceOverview, + loadBills, + loadBillsSummary, + loadBillsOverview, + loadIncomeStatement, + loadCashBalance, + loadLiabilities, + loadLoanOptions, + loadCustomerPreference, + }, dispatch); +}; -// const mapStateToProps = state => ({ -// // envelope: state.envelope, -// eng: state.eng, -// }); +const mapStateToProps = state => ({ + blocnote: state.blocnote, +}); -export default FinancialInputs; +export default connect(mapStateToProps, mapDispatchToProps)(FinancialInputs); diff --git a/src/containers/Blocnote/actions.js b/src/containers/Blocnote/actions.js index 0dd83f9c..9b5f2b72 100644 --- a/src/containers/Blocnote/actions.js +++ b/src/containers/Blocnote/actions.js @@ -5,45 +5,67 @@ import { FINANCE_OVERVIEW_REQUESTED, FINANCE_OVERVIEW_SUCCEEDED, FINANCE_OVERVIEW_FAILED, + BILLS_REQUESTED, + BILLS_SUCCEEDED, + BILLS_FAILED, + BILLS_SUMMARY_REQUESTED, + BILLS_SUMMARY_SUCCEEDED, + BILLS_SUMMARY_FAILED, + BILLS_OVERVIEW_REQUESTED, + BILLS_OVERVIEW_SUCCEEDED, + BILLS_OVERVIEW_FAILED, + LOAN_OPTIONS_REQUESTED, + LOAN_OPTIONS_SUCCEEDED, + LOAN_OPTIONS_FAILED, + INCOME_STATEMENT_REQUESTED, + INCOME_STATEMENT_SUCCEEDED, + INCOME_STATEMENT_FAILED, + CASH_BALANCE_REQUESTED, + CASH_BALANCE_SUCCEEDED, + CASH_BALANCE_FAILED, + LIABILITIES_REQUESTED, + LIABILITIES_SUCCEEDED, + LIABILITIES_FAILED, + CUSTOMER_PREFERENCE_REQUESTED, + CUSTOMER_PREFERENCE_SUCCEEDED, + CUSTOMER_PREFERENCE_FAILED, BUDGET_SIMULATOR_REQUESTED, BUDGET_SIMULATOR_SUCCEEDED, BUDGET_SIMULATOR_FAILED, } from './constants'; import { makeActionCreator } from '../../utils/reduxHelpers'; -// export function loadLandingData(buildingId) { -// return { -// type: LANDING_DATA_REQUESTED, -// buildingId, -// }; -// } - - -// export function landingDataLoaded(landingData) { -// console.log(landingData); // eslint-disable-line -// return { -// type: LANDING_DATA_SUCCEEDED, -// instance: landingData.instance, -// }; -// } - - -// export function landingDataFailed(error) { -// return { -// type: LANDING_DATA_FAILED, -// error, -// }; -// } - -// console.log('hellx'); - export const loadLandingData = makeActionCreator(LANDING_DATA_REQUESTED, 'buildingId'); export const landingDataLoaded = makeActionCreator(LANDING_DATA_SUCCEEDED, 'instance'); export const landingDataFailed = makeActionCreator(LANDING_DATA_FAILED, 'error'); -export const loadfianceOverview = makeActionCreator(FINANCE_OVERVIEW_REQUESTED, 'buildingId'); +export const loadFinanceOverview = makeActionCreator(FINANCE_OVERVIEW_REQUESTED, 'buildingId'); export const financeOverviewLoaded = makeActionCreator(FINANCE_OVERVIEW_SUCCEEDED, 'instance'); export const financeOverviewFailed = makeActionCreator(FINANCE_OVERVIEW_FAILED, 'error'); +export const loadBills = makeActionCreator(BILLS_REQUESTED, 'buildingId'); +export const billsLoaded = makeActionCreator(BILLS_SUCCEEDED, 'instance'); +export const billsFailed = makeActionCreator(BILLS_FAILED, 'error'); +export const loadBillsSummary = makeActionCreator(BILLS_SUMMARY_REQUESTED, 'buildingId'); +export const billsSummaryLoaded = makeActionCreator(BILLS_SUMMARY_SUCCEEDED, 'instance'); +export const billsSummaryFailed = makeActionCreator(BILLS_SUMMARY_FAILED, 'error'); +export const loadBillsOverview = makeActionCreator(BILLS_OVERVIEW_REQUESTED, 'buildingId'); +export const billsOverviewLoaded = makeActionCreator(BILLS_OVERVIEW_SUCCEEDED, 'instance'); +export const billsOverviewFailed = makeActionCreator(BILLS_OVERVIEW_FAILED, 'error'); +export const loadCashBalance = makeActionCreator(CASH_BALANCE_REQUESTED, 'buildingId'); +export const cashBalanceLoaded = makeActionCreator(CASH_BALANCE_SUCCEEDED, 'instance'); +export const cashBalanceFailed = makeActionCreator(CASH_BALANCE_FAILED, 'error'); +export const loadLoanOptions = makeActionCreator(LOAN_OPTIONS_REQUESTED, 'buildingId'); +export const loanOptionsLoaded = makeActionCreator(LOAN_OPTIONS_SUCCEEDED, 'instance'); +export const loanOptionsFailed = makeActionCreator(LOAN_OPTIONS_FAILED, 'error'); +export const loadCustomerPreference = makeActionCreator(CUSTOMER_PREFERENCE_REQUESTED, 'buildingId'); +export const customerPreferenceLoaded = makeActionCreator(CUSTOMER_PREFERENCE_SUCCEEDED, 'instance'); +export const customerPreferenceFailed = makeActionCreator(CUSTOMER_PREFERENCE_FAILED, 'error'); +export const loadIncomeStatement = makeActionCreator(INCOME_STATEMENT_REQUESTED, 'buildingId'); +export const incomeStatementLoaded = makeActionCreator(INCOME_STATEMENT_SUCCEEDED, 'instance'); +export const incomeStatementFailed = makeActionCreator(INCOME_STATEMENT_FAILED, 'error'); +export const loadLiabilities = makeActionCreator(LIABILITIES_REQUESTED, 'buildingId'); +export const liabilitiesLoaded = makeActionCreator(LIABILITIES_SUCCEEDED, 'instance'); +export const liabilitiesFailed = makeActionCreator(LIABILITIES_FAILED, 'error'); export const loadBudgetSimulator = makeActionCreator(BUDGET_SIMULATOR_REQUESTED, 'buildingId'); export const budgetSimulatorLoaded = makeActionCreator(BUDGET_SIMULATOR_SUCCEEDED, 'instance'); diff --git a/src/containers/Blocnote/constants.js b/src/containers/Blocnote/constants.js index 58e4a88e..2e194fc1 100644 --- a/src/containers/Blocnote/constants.js +++ b/src/containers/Blocnote/constants.js @@ -5,6 +5,12 @@ export const LANDING_DATA_FAILED = 'LANDING_DATA_FAILED'; export const FINANCE_OVERVIEW_REQUESTED = 'FINANCE_OVERIVEW_REQUESTED'; export const FINANCE_OVERVIEW_SUCCEEDED = 'FINANCE_OVERIVEW_SUCCEEDED'; export const FINANCE_OVERVIEW_FAILED = 'FINANCE_OVERIVEW_FAILED'; +export const BILLS_REQUESTED = 'BILLS_REQUESTED'; +export const BILLS_SUCCEEDED = 'BILLS_SUCCEEDED'; +export const BILLS_FAILED = 'BILLS_FAILED'; +export const BILLS_OVERVIEW_REQUESTED = 'BILLS_OVERVIEW_REQUESTED'; +export const BILLS_OVERVIEW_SUCCEEDED = 'BILLS_OVERVIEW_SUCCEEDED'; +export const BILLS_OVERVIEW_FAILED = 'BILLS_OVERVIEW_FAILED'; export const BILLS_SUMMARY_REQUESTED = 'BILLS_SUMMARY_REQUESTED'; export const BILLS_SUMMARY_SUCCEEDED = 'BILLS_SUMMARY_SUCCEEDED'; export const BILLS_SUMMARY_FAILED = 'BILLS_SUMMARY_FAILED'; @@ -14,18 +20,15 @@ export const CASH_BALANCE_FAILED = 'CASH_BALANCE_FAILED'; export const CUSTOMER_PREFERENCE_REQUESTED = 'CUSTOMER_PREFERENCE_REQUESTED'; export const CUSTOMER_PREFERENCE_SUCCEEDED = 'CUSTOMER_PREFERENCE_SUCCEEDED'; export const CUSTOMER_PREFERENCE_FAILED = 'CUSTOMER_PREFERENCE_FAILED'; -export const ENERGY_BILLS_REQUESTED = 'ENERGY_BILLS_REQUESTED'; -export const ENERGY_BILLS_SUCCEEDED = 'ENERGY_BILLS_SUCCEEDED'; -export const ENERGY_BILLS_FAILED = 'ENERGY_BILLS_FAILED'; -export const INCOME_STATEMENTS_REQUESTED = 'INCOME_STATEMENTS_REQUESTED'; -export const INCOME_STATEMENTS_SUCCEEDED = 'INCOME_STATEMENTS_SUCCEEDED'; -export const INCOME_STATEMENTS_FAILED = 'INCOME_STATEMENTS_FAILED'; +export const INCOME_STATEMENT_REQUESTED = 'INCOME_STATEMENT_REQUESTED'; +export const INCOME_STATEMENT_SUCCEEDED = 'INCOME_STATEMENT_SUCCEEDED'; +export const INCOME_STATEMENT_FAILED = 'INCOME_STATEMENT_FAILED'; export const LOAN_OPTIONS_REQUESTED = 'LOAN_OPTIONS_REQUESTED'; export const LOAN_OPTIONS_SUCCEEDED = 'LOAN_OPTIONS_SUCCEEDED'; export const LOAN_OPTIONS_FAILED = 'LOAN_OPTIONS_FAILED'; -export const MORTGAGE_LIABILITIES_REQUESTED = 'MORTGAGE_LIABILITIES_REQUESTED'; -export const MORTGAGE_LIABILITIES_SUCCEEDED = 'MORTGAGE_LIABILITIES_SUCCEEDED'; -export const MORTGAGE_LIABILITIES_FAILED = 'MORTGAGE_LIABILITIES_FAILED'; +export const LIABILITIES_REQUESTED = 'LIABILITIES_REQUESTED'; +export const LIABILITIES_SUCCEEDED = 'LIABILITIES_SUCCEEDED'; +export const LIABILITIES_FAILED = 'LIABILITIES_FAILED'; export const BUDGET_SIMULATOR_REQUESTED = 'BUDGET_SIMULATOR_REQUESTED'; export const BUDGET_SIMULATOR_SUCCEEDED = 'BUDGET_SIMULATOR_SUCCEEDED'; diff --git a/src/containers/Blocnote/reducer.js b/src/containers/Blocnote/reducer.js index 82c4b8ee..26c8688e 100644 --- a/src/containers/Blocnote/reducer.js +++ b/src/containers/Blocnote/reducer.js @@ -5,27 +5,30 @@ import { FINANCE_OVERVIEW_REQUESTED, FINANCE_OVERVIEW_SUCCEEDED, FINANCE_OVERVIEW_FAILED, - // BILLS_SUMMARY_REQUESTED, - // BILLS_SUMMARY_SUCCEEDED, - // BILLS_SUMMARY_FAILED, - // CASH_BALANCE_REQUESTED, - // CASH_BALANCE_SUCCEEDED, - // CASH_BALANCE_FAILED, - // CUSTOMER_PREFERENCE_REQUESTED, - // CUSTOMER_PREFERENCE_SUCCEEDED, - // CUSTOMER_PREFERENCE_FAILED, - // ENERGY_BILLS_REQUESTED, - // ENERGY_BILLS_SUCCEEDED, - // ENERGY_BILLS_FAILED, - // INCOME_STATEMENTS_REQUESTED, - // INCOME_STATEMENTS_SUCCEEDED, - // INCOME_STATEMENTS_FAILED, - // LOAN_OPTIONS_REQUESTED, - // LOAN_OPTIONS_SUCCEEDED, - // LOAN_OPTIONS_FAILED, - // MORTGAGE_LIABILITIES_REQUESTED, - // MORTGAGE_LIABILITIES_SUCCEEDED, - // MORTGAGE_LIABILITIES_FAILED, + BILLS_REQUESTED, + BILLS_SUCCEEDED, + BILLS_FAILED, + BILLS_OVERVIEW_REQUESTED, + BILLS_OVERVIEW_SUCCEEDED, + BILLS_OVERVIEW_FAILED, + BILLS_SUMMARY_REQUESTED, + BILLS_SUMMARY_SUCCEEDED, + BILLS_SUMMARY_FAILED, + CASH_BALANCE_REQUESTED, + CASH_BALANCE_SUCCEEDED, + CASH_BALANCE_FAILED, + CUSTOMER_PREFERENCE_REQUESTED, + CUSTOMER_PREFERENCE_SUCCEEDED, + CUSTOMER_PREFERENCE_FAILED, + INCOME_STATEMENT_REQUESTED, + INCOME_STATEMENT_SUCCEEDED, + INCOME_STATEMENT_FAILED, + LOAN_OPTIONS_REQUESTED, + LOAN_OPTIONS_SUCCEEDED, + LOAN_OPTIONS_FAILED, + LIABILITIES_REQUESTED, + LIABILITIES_SUCCEEDED, + LIABILITIES_FAILED, BUDGET_SIMULATOR_REQUESTED, BUDGET_SIMULATOR_SUCCEEDED, BUDGET_SIMULATOR_FAILED, @@ -62,7 +65,7 @@ const blocnoteInitialState = { error: false, data: null, }, - incomeStatments: { + incomeStatment: { loading: false, error: false, data: null, @@ -72,7 +75,7 @@ const blocnoteInitialState = { error: false, data: null, }, - mortgageLiabilities: { + liabilities: { loading: false, error: false, data: null, @@ -151,6 +154,238 @@ export default function (state = blocnoteInitialState, action) { }, }; + case BILLS_REQUESTED: + return { + ...state, + bills: { + ...state.bills, + loading: true, + error: false, + }, + }; + + case BILLS_SUCCEEDED: + return { + ...state, + bills: { + data: action.instance, + loading: false, + error: false, + }, + }; + + case BILLS_FAILED: + return { + ...state, + bills: { + loading: false, + error: action.error, + }, + }; + + case BILLS_OVERVIEW_REQUESTED: + return { + ...state, + billsOverview: { + ...state.billsOverview, + loading: true, + error: false, + }, + }; + + case BILLS_OVERVIEW_SUCCEEDED: + return { + ...state, + billsOverview: { + data: action.instance, + loading: false, + error: false, + }, + }; + + case BILLS_OVERVIEW_FAILED: + return { + ...state, + billsOverview: { + loading: false, + error: action.error, + }, + }; + + case BILLS_SUMMARY_REQUESTED: + return { + ...state, + billsSummary: { + ...state.billsSummary, + loading: true, + error: false, + }, + }; + + case BILLS_SUMMARY_SUCCEEDED: + return { + ...state, + billsSummary: { + data: action.instance, + loading: false, + error: false, + }, + }; + + case BILLS_SUMMARY_FAILED: + return { + ...state, + billsSummary: { + loading: false, + error: action.error, + }, + }; + + case LOAN_OPTIONS_REQUESTED: + return { + ...state, + loanOptions: { + ...state.loanOptions, + loading: true, + error: false, + }, + }; + + case LOAN_OPTIONS_SUCCEEDED: + return { + ...state, + loanOptions: { + data: action.instance, + loading: false, + error: false, + }, + }; + + case LOAN_OPTIONS_FAILED: + return { + ...state, + loanOptions: { + loading: false, + error: action.error, + }, + }; + + case CASH_BALANCE_REQUESTED: + return { + ...state, + cashBalance: { + ...state.cashBalance, + loading: true, + error: false, + }, + }; + + case CASH_BALANCE_SUCCEEDED: + return { + ...state, + cashBalance: { + data: action.instance, + loading: false, + error: false, + }, + }; + + case CASH_BALANCE_FAILED: + return { + ...state, + cashBalance: { + loading: false, + error: action.error, + }, + }; + + case INCOME_STATEMENT_REQUESTED: + return { + ...state, + incomeStatment: { + ...state.incomeStatment, + loading: true, + error: false, + }, + }; + + case INCOME_STATEMENT_SUCCEEDED: + return { + ...state, + incomeStatment: { + data: action.instance, + loading: false, + error: false, + }, + }; + + case INCOME_STATEMENT_FAILED: + return { + ...state, + incomeStatment: { + loading: false, + error: action.error, + }, + }; + + case LIABILITIES_REQUESTED: + return { + ...state, + liabilities: { + ...state.liabilities, + loading: true, + error: false, + }, + }; + + case LIABILITIES_SUCCEEDED: + return { + ...state, + liabilities: { + data: action.instance, + loading: false, + error: false, + }, + }; + + case LIABILITIES_FAILED: + return { + ...state, + liabilities: { + loading: false, + error: action.error, + }, + }; + + case CUSTOMER_PREFERENCE_REQUESTED: + return { + ...state, + customerPreference: { + ...state.customerPreference, + loading: true, + error: false, + }, + }; + + case CUSTOMER_PREFERENCE_SUCCEEDED: + return { + ...state, + customerPreference: { + data: action.instance, + loading: false, + error: false, + }, + }; + + case CUSTOMER_PREFERENCE_FAILED: + return { + ...state, + customerPreference: { + loading: false, + error: action.error, + }, + }; + case BUDGET_SIMULATOR_REQUESTED: return { ...state, diff --git a/src/containers/Blocnote/sagas.js b/src/containers/Blocnote/sagas.js index 40264aad..d333a8e4 100644 --- a/src/containers/Blocnote/sagas.js +++ b/src/containers/Blocnote/sagas.js @@ -5,6 +5,14 @@ import { getHeaders } from '../../utils/restServices'; import { LANDING_DATA_REQUESTED, FINANCE_OVERVIEW_REQUESTED, + BILLS_REQUESTED, + BILLS_OVERVIEW_REQUESTED, + BILLS_SUMMARY_REQUESTED, + LOAN_OPTIONS_REQUESTED, + CASH_BALANCE_REQUESTED, + INCOME_STATEMENT_REQUESTED, + LIABILITIES_REQUESTED, + CUSTOMER_PREFERENCE_REQUESTED, BUDGET_SIMULATOR_REQUESTED, } from './constants'; @@ -13,6 +21,22 @@ import { landingDataFailed, financeOverviewLoaded, financeOverviewFailed, + billsLoaded, + billsFailed, + billsOverviewLoaded, + billsOverviewFailed, + billsSummaryLoaded, + billsSummaryFailed, + incomeStatementLoaded, + incomeStatementFailed, + loanOptionsLoaded, + loanOptionsFailed, + cashBalanceLoaded, + cashBalanceFailed, + liabilitiesLoaded, + liabilitiesFailed, + customerPreferenceLoaded, + customerPreferenceFailed, budgetSimulatorLoaded, budgetSimulatorFailed, } from './actions'; @@ -47,6 +71,118 @@ function* loadFinanceOverview(action) { } } +function* loadBills(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/bills/`; + const res = yield call(request, url, { + method: 'GET', + headers: getHeaders(), + }); + + if (!res.err) { + yield put(billsLoaded(res)); + } else { + yield put(billsFailed(res.err)); + } +} + +function* loadBillsOverview(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/bills-overview/`; + const res = yield call(request, url, { + method: 'GET', + headers: getHeaders(), + }); + + if (!res.err) { + yield put(billsOverviewLoaded(res)); + } else { + yield put(billsOverviewFailed(res.err)); + } +} + +function* loadBillsSummary(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/bills-summary/`; + const res = yield call(request, url, { + method: 'GET', + headers: getHeaders(), + }); + + if (!res.err) { + yield put(billsSummaryLoaded(res)); + } else { + yield put(billsSummaryFailed(res.err)); + } +} + +function* loadLoanOptions(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/loan-options/?loans=all-loans`; + const res = yield call(request, url, { + method: 'GET', + headers: getHeaders(), + }); + + if (!res.err) { + yield put(loanOptionsLoaded(res)); + } else { + yield put(loanOptionsFailed(res.err)); + } +} + +function* loadCashBalance(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/cash-balance/`; + const res = yield call(request, url, { + method: 'GET', + headers: getHeaders(), + }); + + if (!res.err) { + yield put(cashBalanceLoaded(res)); + } else { + yield put(cashBalanceFailed(res.err)); + } +} + +function* loadIncomeStatement(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/income-statement/`; + const res = yield call(request, url, { + method: 'GET', + headers: getHeaders(), + }); + + if (!res.err) { + yield put(incomeStatementLoaded(res)); + } else { + yield put(incomeStatementFailed(res.err)); + } +} + +function* loadCustomerPreference(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/customer-preference/`; + const res = yield call(request, url, { + method: 'GET', + headers: getHeaders(), + }); + + if (!res.err) { + yield put(customerPreferenceLoaded(res)); + } else { + yield put(customerPreferenceFailed(res.err)); + } +} + +function* loadLiabilities(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/liabilities/`; + const res = yield call(request, url, { + method: 'GET', + headers: getHeaders(), + }); + + if (!res.err) { + yield put(liabilitiesLoaded(res)); + } else { + yield put(liabilitiesFailed(res.err)); + } +} + function* loadBudgetSimulator(action) { const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/budget/budget-data/`; const res = yield call(request, url, { @@ -64,6 +200,14 @@ function* loadBudgetSimulator(action) { function* blocnoteWatcher() { yield takeEvery(LANDING_DATA_REQUESTED, loadLandingData); yield takeEvery(FINANCE_OVERVIEW_REQUESTED, loadFinanceOverview); + yield takeEvery(BILLS_REQUESTED, loadBills); + yield takeEvery(BILLS_OVERVIEW_REQUESTED, loadBillsOverview); + yield takeEvery(BILLS_SUMMARY_REQUESTED, loadBillsSummary); + yield takeEvery(CASH_BALANCE_REQUESTED, loadCashBalance); + yield takeEvery(LOAN_OPTIONS_REQUESTED, loadLoanOptions); + yield takeEvery(INCOME_STATEMENT_REQUESTED, loadIncomeStatement); + yield takeEvery(CUSTOMER_PREFERENCE_REQUESTED, loadCustomerPreference); + yield takeEvery(LIABILITIES_REQUESTED, loadLiabilities); yield takeEvery(BUDGET_SIMULATOR_REQUESTED, loadBudgetSimulator); } -- GitLab From 8a73f34558225ff26b594ec8b87149f5d98a2aae Mon Sep 17 00:00:00 2001 From: akkking Date: Fri, 12 Apr 2019 17:03:12 -0400 Subject: [PATCH 41/79] update reducer FinancialInputs, routes --- src/containers/Blocnote/FinancialInputs.js | 121 +++++++++++++-------- src/containers/Blocnote/reducer.js | 12 +- src/routes.js | 6 +- 3 files changed, 84 insertions(+), 55 deletions(-) diff --git a/src/containers/Blocnote/FinancialInputs.js b/src/containers/Blocnote/FinancialInputs.js index 0a2a9706..188a97a5 100644 --- a/src/containers/Blocnote/FinancialInputs.js +++ b/src/containers/Blocnote/FinancialInputs.js @@ -21,11 +21,8 @@ import CashBalance from './../../components/Blocnote/FinancialInputs/CashBalance import MortgageLiabilities from './../../components/Blocnote/FinancialInputs/MortgageLiabilities'; import LoanOptions from './../../components/Blocnote/FinancialInputs/LoanOptions'; import CustomerPreference from './../../components/Blocnote/FinancialInputs/CustomerPreference'; -// import { -// EnergyBills, BillsSummary, -// EnergyBillsOverview, IncomeStatements, CashBalance, -// MortgageLiabilities, LoanOptions, CustomerPreference, -// } from './../../components/Blocnote/FinancialInputs'; +import { blocnoteURL } from '../../utils/restServices'; + class FinancialInputs extends Component { componentDidMount() { @@ -40,20 +37,41 @@ class FinancialInputs extends Component { this.props.loadCustomerPreference(this.props.buildingId); } - processData = (data) => { - const tables = data.instance.tables; + processFinanceOverview = (data) => { + const funds = []; + data.instance.funds.forEach(fund => { + funds.push({ + fund_id: fund[0], + fund_name: fund[1], + }); + }); + + const financeData = data.instance.financing_overview_data; + let fundDropDownSelectedValue = 'No Fund'; + data.instance.funds.forEach(fund => { + if (fund[0] === financeData.fund_id) { + fundDropDownSelectedValue = fund[1]; + } + }); + + const acp = parseInt(financeData.anticipated_construction_period, 10); return { - savingPotentialList: data.instance.saving_potential_list, - budgetLoanFirst: data.instance.tables.budget_loan_first, - budgetLoanOnly: data.instance.tables.budget_loan_only, - budgetSfFirst: data.instance.tables.budget_sf_first, - budgetSfMax: data.instance.tables.budget_sf_max, - budgets: Object.keys(tables).map(tableName => tables[tableName][0].slice(1)), + financeData: data.instance.financing_overview_data, + fundOptions: funds, + fundDropDownId: financeData.fund_id, + fundDropDownValue: fundDropDownSelectedValue, + proFormaStartDate: financeData.pro_forma_start_date, + proFormaDuration: financeData.pro_forma_duration, + analysisDate: financeData.analysis_date, + anticipatedConstructionStartDate: financeData.anticipated_construction_start_date, + anticipatedCommissioningDate: financeData.anticipated_commissioning_date, + anticipatedConstructionPeriod: acp, }; } render() { let mainContent = null; + const baseURL = `${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs`; const blockStyle = { marginBottom: '40px' }; const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const successMessageStyle = { @@ -69,81 +87,92 @@ class FinancialInputs extends Component { console.log(this.props); // eslint-disable-line const { blocnote } = this.props; - const { budgetSimulator } = blocnote; - const { data } = budgetSimulator; + const { + fianceOverview, bills, billsOverview, billsSummary, cashBalance, + loanOptions, incomeStatement, liabilities, customerPreference, + } = blocnote; + + mainContent = ; + console.log(blocnote); // eslint-disable-line - if (data === null) { - mainContent = ; - } else { - const dataDic = this.processData(data); - console.log(dataDic); // eslint-disable-line + if (fianceOverview.data !== null && + bills.data !== null && + billsOverview.data !== null && + billsSummary.data !== null && + cashBalance.data !== null && + loanOptions.data !== null && + incomeStatement.data !== null && + liabilities.data !== null && + customerPreference.data !== null) { + const fianceOverviewData = this.processFinanceOverview(fianceOverview.data); + console.log(fianceOverviewData); // eslint-disable-line mainContent = (
    ); diff --git a/src/containers/Blocnote/reducer.js b/src/containers/Blocnote/reducer.js index 26c8688e..9d71b7c1 100644 --- a/src/containers/Blocnote/reducer.js +++ b/src/containers/Blocnote/reducer.js @@ -60,12 +60,12 @@ const blocnoteInitialState = { error: false, data: null, }, - energyBills: { + bills: { loading: false, error: false, data: null, }, - incomeStatment: { + incomeStatement: { loading: false, error: false, data: null, @@ -302,8 +302,8 @@ export default function (state = blocnoteInitialState, action) { case INCOME_STATEMENT_REQUESTED: return { ...state, - incomeStatment: { - ...state.incomeStatment, + incomeStatement: { + ...state.incomeStatement, loading: true, error: false, }, @@ -312,7 +312,7 @@ export default function (state = blocnoteInitialState, action) { case INCOME_STATEMENT_SUCCEEDED: return { ...state, - incomeStatment: { + incomeStatement: { data: action.instance, loading: false, error: false, @@ -322,7 +322,7 @@ export default function (state = blocnoteInitialState, action) { case INCOME_STATEMENT_FAILED: return { ...state, - incomeStatment: { + incomeStatement: { loading: false, error: action.error, }, diff --git a/src/routes.js b/src/routes.js index 1b6342e0..db433180 100644 --- a/src/routes.js +++ b/src/routes.js @@ -24,7 +24,7 @@ import SensorInstall from './containers/Sensors/SensorInstall'; import GatewayList from './components/SensorInstall/GatewayList'; import BuildingReports from './containers/BuildingReports'; import Blocnote from './containers/Blocnote'; -// import FinancialInputs from './containers/Blocnote/FinancialInputs'; +import FinancialInputs from './containers/Blocnote/FinancialInputs'; // import PreliminaryFinance from './containers/Blocnote/PreliminaryFinance'; import BudgetSimulator from './containers/Blocnote/BudgetSimulator'; import Wrapper from './containers/Wrapper'; @@ -63,8 +63,8 @@ export default ( - {/* - */} + + {/* */} -- GitLab From 9a95951c1b28d4f25c8b47d40c9484cf7eb1ed49 Mon Sep 17 00:00:00 2001 From: akkking Date: Mon, 15 Apr 2019 12:09:35 -0400 Subject: [PATCH 42/79] Add 2 decimals to amount, fix nav bar issue --- .../Blocnote/FinancialInputs/BillsSummaryTable.js | 2 +- .../Blocnote/FinancialInputs/CashBalance.js | 2 +- .../Blocnote/FinancialInputs/LoanOptions.js | 4 ++-- src/containers/Blocnote/BudgetSimulator.js | 2 +- src/containers/Blocnote/FinancialInputs.js | 13 ++++++++----- 5 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js index 956b8d08..4f803ce6 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -75,7 +75,7 @@ class BillsSummaryTable extends Component { onUpdEvent={this.updateRow} onDelEvent={this.deleteRow} year={parseInt(item.year, 10)} - charge={parseFloat(item.charge)} + charge={parseFloat(item.charge).toFixed(2)} id={item.id} key={item.id} /> diff --git a/src/components/Blocnote/FinancialInputs/CashBalance.js b/src/components/Blocnote/FinancialInputs/CashBalance.js index 5b5eec4d..b59a24dc 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalance.js +++ b/src/components/Blocnote/FinancialInputs/CashBalance.js @@ -72,7 +72,7 @@ class CashBalance extends Component { ); diff --git a/src/containers/Blocnote/BudgetSimulator.js b/src/containers/Blocnote/BudgetSimulator.js index 113cbe17..b87ca5cf 100644 --- a/src/containers/Blocnote/BudgetSimulator.js +++ b/src/containers/Blocnote/BudgetSimulator.js @@ -87,7 +87,7 @@ class BudgetSimulator extends Component { breadcrumbs={[ { name: 'Building Overview', url: '' }, { name: 'Blocnote', url: 'blocnote' }, - { name: 'Budget Simulator', url: 'null' }, + { name: 'Budget Simulator', url: null }, ]} links={[]} /> diff --git a/src/containers/Blocnote/FinancialInputs.js b/src/containers/Blocnote/FinancialInputs.js index 188a97a5..3d31308b 100644 --- a/src/containers/Blocnote/FinancialInputs.js +++ b/src/containers/Blocnote/FinancialInputs.js @@ -160,8 +160,8 @@ class FinancialInputs extends Component { blockStyle={blockStyle} headerStyle={headerStyle} data={loanOptions.data.status} - noi={parseFloat(loanOptions.data.noi)} - cash={parseFloat(loanOptions.data.cash)} + noi={parseFloat(loanOptions.data.noi).toFixed(2)} + cash={parseFloat(loanOptions.data.cash).toFixed(2)} />
    @@ -184,7 +186,8 @@ class FinancialInputs extends Component { buildingId={this.props.building.building_id.toString()} breadcrumbs={[ { name: 'Building Overview', url: '' }, - { name: 'Blocnote', url: '' }, + { name: 'Blocnote', url: 'blocnote' }, + { name: 'Financial Inputs', url: null }, ]} links={[]} /> -- GitLab From 33afe40ae60e2682ac2b0f6a301dafc01b00b294 Mon Sep 17 00:00:00 2001 From: akkking Date: Tue, 16 Apr 2019 10:59:50 -0400 Subject: [PATCH 43/79] Update loanOptions using Redux --- .../FinancialInputs/LoanOptionsRow.js | 4 + src/containers/Blocnote/FinancialInputs.js | 36 ++- .../FinancialInputs/CustomerPreference.js | 215 +++++++++++++++ .../Blocnote/FinancialInputs/LoanOptions.js | 255 ++++++++++++++++++ .../FinancialInputs/LoanOptionsRow.js | 116 ++++++++ src/containers/Blocnote/actions.js | 14 + src/containers/Blocnote/constants.js | 8 + src/containers/Blocnote/reducer.js | 68 +++++ src/containers/Blocnote/sagas.js | 157 ++++------- 9 files changed, 763 insertions(+), 110 deletions(-) create mode 100644 src/containers/Blocnote/FinancialInputs/CustomerPreference.js create mode 100644 src/containers/Blocnote/FinancialInputs/LoanOptions.js create mode 100644 src/containers/Blocnote/FinancialInputs/LoanOptionsRow.js diff --git a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js index 55637dc0..04c2ef75 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js @@ -42,6 +42,7 @@ class LoanOptionsRow extends Component { type="text" step="any" name="lender" + required onChange={this.handleOnChange} value={this.state.lender} /> @@ -52,6 +53,7 @@ class LoanOptionsRow extends Component { type="number" step="any" name="remainingTerm" + required value={parseFloat(this.state.interestRate)} onChange={this.handleOnChange} style={{ width: '50%', textAlign: 'right' }} @@ -67,6 +69,7 @@ class LoanOptionsRow extends Component { type="number" step="any" name="duration" + required value={this.state.duration} onChange={this.handleOnChange} style={{ width: '50%', textAlign: 'right' }} @@ -85,6 +88,7 @@ class LoanOptionsRow extends Component { type="number" step="any" name="maxLoanAmount" + required value={this.state.maxLoanAmount} onChange={this.handleOnChange} style={{ width: '50%', textAlign: 'left' }} diff --git a/src/containers/Blocnote/FinancialInputs.js b/src/containers/Blocnote/FinancialInputs.js index 3d31308b..079e34c5 100644 --- a/src/containers/Blocnote/FinancialInputs.js +++ b/src/containers/Blocnote/FinancialInputs.js @@ -10,6 +10,7 @@ import { loadFinanceOverview, loadBills, loadBillsOverview, loadBillsSummary, loadCashBalance, loadLoanOptions, loadCustomerPreference, loadIncomeStatement, loadLiabilities, + updateCustomerPreference, updateLoanOptions, } from './actions'; import blocnoteProps from './propTypes'; import FinanceOverview from './../../components/Blocnote/FinancialInputs/FinanceOverview'; @@ -19,8 +20,8 @@ import EnergyBillsOverview from './../../components/Blocnote/FinancialInputs/Ene import IncomeStatements from './../../components/Blocnote/FinancialInputs/IncomeStatements'; import CashBalance from './../../components/Blocnote/FinancialInputs/CashBalance'; import MortgageLiabilities from './../../components/Blocnote/FinancialInputs/MortgageLiabilities'; -import LoanOptions from './../../components/Blocnote/FinancialInputs/LoanOptions'; -import CustomerPreference from './../../components/Blocnote/FinancialInputs/CustomerPreference'; +import LoanOptions from './/FinancialInputs/LoanOptions'; +import CustomerPreference from './FinancialInputs/CustomerPreference'; import { blocnoteURL } from '../../utils/restServices'; @@ -84,6 +85,11 @@ class FinancialInputs extends Component { paddingLeft: '25px', fontWeight: 'bold', }; + const defaultMessageStyle = { + color: 'black', + paddingLeft: '25px', + fontWeight: 'bold', + }; console.log(this.props); // eslint-disable-line const { blocnote } = this.props; @@ -105,7 +111,6 @@ class FinancialInputs extends Component { liabilities.data !== null && customerPreference.data !== null) { const fianceOverviewData = this.processFinanceOverview(fianceOverview.data); - console.log(fianceOverviewData); // eslint-disable-line mainContent = (
    ); @@ -210,6 +220,8 @@ FinancialInputs.propTypes = { loadLiabilities: PropTypes.func, loadLoanOptions: PropTypes.func, loadCustomerPreference: PropTypes.func, + updateLoanOptions: PropTypes.func, + updateCustomerPreference: PropTypes.func, }; const mapDispatchToProps = dispatch => { @@ -223,6 +235,8 @@ const mapDispatchToProps = dispatch => { loadLiabilities, loadLoanOptions, loadCustomerPreference, + updateLoanOptions, + updateCustomerPreference, }, dispatch); }; diff --git a/src/containers/Blocnote/FinancialInputs/CustomerPreference.js b/src/containers/Blocnote/FinancialInputs/CustomerPreference.js new file mode 100644 index 00000000..5b3ce17f --- /dev/null +++ b/src/containers/Blocnote/FinancialInputs/CustomerPreference.js @@ -0,0 +1,215 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Button, + Table, + Input, + InputGroup, + InputGroupAddon, +} from 'reactstrap'; +import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; + + +class CustomerPreference extends Component { + constructor(props) { + super(props); + this.handleOnChange = this.handleOnChange.bind(this); + this.state = { + downpayment: this.props.data.downpayment, + expectedNetNoiDscr: this.props.data.expected_net_noi_dscr, + expectedPayback: this.props.data.expected_payback, + updated: false, + }; + } + + handleOnChange = (event) => { + this.setState({ [event.target.name]: event.target.value }); + } + + handleUpdateCustomerPreference = () => { + this.props.updateCustomerPreference( + this.props.buildingId, + { + downpayment: parseFloat(this.state.downpayment).toFixed(2), + expected_net_noi_dscr: parseInt(this.state.expectedNetNoiDscr, 10), + expected_payback: this.state.expectedPayback, + }, + ); + this.setState({ updated: true }); + } + + render() { + const header = [ + 'Preference', + 'Value (if values is not known, please leave it blank)', + ].map((title, key) => { + return ( + + {title} + + ); + }); + + const rows = []; + const style = { fontWeight: 'bold' }; + if (this.props.data !== null) { + rows.push( + + + Affordable Downpayment (?) + + + + + $ + + + + + + ); + rows.push( + + + Expected Payback (?) + + + + + + Months + + + + + ); + rows.push( + + + Expected Saving DSCR (?) + + + + + + X + + + + + ); + } + + let messageStyle = {}; + let messageContent = null; + + if (this.props.loading) { + messageContent = 'Updating ...'; + messageStyle = this.props.defaultMessageStyle; + } + + if (this.props.error && typeof this.props.error === 'object') { + messageContent = this.props.error.response.statusText; + messageStyle = this.props.errorMessageStyle; + } + + if (!this.props.error && !this.props.loading + && this.props.data !== null + && this.state.updated) { + messageContent = 'Saved!'; + messageStyle = this.props.successMessageStyle; + } + + return ( +
    +

    + Customer Preference +

    +
    +
    + + + + {header} + + + + {rows} + +
    +
    +
    +
    +
    +    + +
    +
    +
    + ); + } +} + +CustomerPreference.propTypes = { + blockStyle: PropTypes.shape({ + marginBottom: PropTypes.string, + }), + headerStyle: PropTypes.shape({ + textAlign: PropTypes.string, + marginBottom: PropTypes.string, + }), + data: PropTypes.shape({ + downpayment: PropTypes.string, + expected_net_noi_dscr: PropTypes.string, + expected_payback: PropTypes.string, + }), + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + buildingId: PropTypes.number, + updateCustomerPreference: PropTypes.func, + error: PropTypes.bool, + loading: PropTypes.bool, +}; + +export default CustomerPreference; diff --git a/src/containers/Blocnote/FinancialInputs/LoanOptions.js b/src/containers/Blocnote/FinancialInputs/LoanOptions.js new file mode 100644 index 00000000..fff02cdd --- /dev/null +++ b/src/containers/Blocnote/FinancialInputs/LoanOptions.js @@ -0,0 +1,255 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Button, + Input, + Table, + InputGroup, + InputGroupAddon, +} from 'reactstrap'; +import LoanOptionsRow from './LoanOptionsRow'; +import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; + + +class LoanOptions extends Component { + constructor(props) { + super(props); + this.deleteRow = this.deleteRow.bind(this); + this.addRow = this.addRow.bind(this); + this.state = { + loanOptions: this.props.data, + noi: this.props.noi, + cash: this.props.cash, + id: 99, + lender: '', + interestRate: '', + duration: '', + maxLoanAmount: '', + updated: false, + }; + } + + deleteRow = id => { + const loanOptionsCopy = this.state.loanOptions.filter((loanOption, index) => { + console.log(loanOption); // eslint-disable-line + return index !== id; + }); + this.setState({ loanOptions: loanOptionsCopy }, () => { + alert('Statement deleted!'); + }); + } + + addRow = () => { + const newLoanOption = { + id: this.state.id, + lender: this.state.lender, + interestRate: this.state.interestRate, + duration: this.state.duration, + maxLoanAmount: this.state.maxLoanAmount, + }; + const loanOptionsCopy = this.state.loanOptions; + loanOptionsCopy.push(newLoanOption); + this.setState({ loanOptions: loanOptionsCopy }, () => { + console.log(this.state.loanOptions, 'New loan option added!'); // eslint-disable-line + this.setState({ + id: this.state.id + 1, + lender: '', + interestRate: '', + duration: '', + maxLoanAmount: '', + updated: false, + }); + }); + } + + handleOnChange = (event) => { + this.setState({ [event.target.name]: event.target.value }); + } + + handleUpdateLoanOptions = () => { + const formData = {}; + formData['noi-dscr'] = parseFloat(this.state.noi).toFixed(2); + formData['cash-dscr'] = parseFloat(this.state.cash).toFixed(2); + formData.instance = this.state.loanOptions; + this.props.updateLoanOptions( + this.props.buildingId, + formData, + ); + this.setState({ updated: true }); + } + + render() { + const header = [ + 'Loan Options', + 'Lender', + 'Interet Rate', + 'Duration', + 'Maximum Loan Amount', + 'Option', + ].map((title, key) => { + return ( + + {title} + + ); + }); + + let loans = []; + if (this.state.loanOptions !== null) { + loans = this.state.loanOptions.map((loanOptions, index) => { + return ( + + ); + }); + } + + let messageStyle = {}; + let messageContent = null; + + if (this.props.loading) { + messageContent = 'Updating ...'; + messageStyle = this.props.defaultMessageStyle; + } + + if (this.props.error && typeof this.props.error === 'object') { + messageContent = this.props.error.response.statusText; + messageStyle = this.props.errorMessageStyle; + } + + if (!this.props.error && !this.props.loading + && this.props.data !== null + && this.state.updated) { + messageContent = 'Saved!'; + messageStyle = this.props.successMessageStyle; + } + + return ( +
    +

    + Loan Options +

    +
    +
    + + + + + + + {header} + + + + {loans} + +
    +
    +
    + + + Required NOI DSCR + + + +
    +
    + + + Required Cash DSCR + + + +
    +
    +
    +
    +
    +
    +
    +    +   + +
    +
    +
    + ); + } +} + +LoanOptions.propTypes = { + blockStyle: PropTypes.shape({ + marginBottom: PropTypes.string, + }), + headerStyle: PropTypes.shape({ + textAlign: PropTypes.string, + marginBottom: PropTypes.string, + }), + cash: PropTypes.number, + noi: PropTypes.number, + data: PropTypes.arrayOf( + PropTypes.shape({ + duration: PropTypes.string, + interest_rate: PropTypes.string, + lender: PropTypes.string, + max_loan_amount: PropTypes.string, + }), + ), + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + buildingId: PropTypes.number, + updateLoanOptions: PropTypes.func, + error: PropTypes.bool, + loading: PropTypes.bool, +}; + +export default LoanOptions; diff --git a/src/containers/Blocnote/FinancialInputs/LoanOptionsRow.js b/src/containers/Blocnote/FinancialInputs/LoanOptionsRow.js new file mode 100644 index 00000000..55637dc0 --- /dev/null +++ b/src/containers/Blocnote/FinancialInputs/LoanOptionsRow.js @@ -0,0 +1,116 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Button, + InputGroup, + InputGroupAddon, + Input, +} from 'reactstrap'; + + +class LoanOptionsRow extends Component { + constructor(props) { + super(props); + this.handleOnChange = this.handleOnChange.bind(this); + this.onDelEvent = this.onDelEvent.bind(this); + this.state = { + id: props.id, + lender: props.lender, + interestRate: props.interestRate, + duration: props.duration, + maxLoanAmount: props.maxLoanAmount, + }; + } + + onDelEvent() { + this.props.onDelEvent(this.props.id); + } + + handleOnChange = (event) => { + this.setState({ [event.target.name]: event.target.value }); + } + + render() { + const style = { textAlign: 'left' }; + return ( + + + Loan {this.state.id + 1} + + + + + + + + + % + + + + + + + + Months + + + + + + + $ + + + + + + + + + ); + } +} + +LoanOptionsRow.propTypes = { + id: PropTypes.number, + lender: PropTypes.string, + interestRate: PropTypes.number, + duration: PropTypes.string, + maxLoanAmount: PropTypes.number, + onDelEvent: PropTypes.func, +}; + +export default LoanOptionsRow; diff --git a/src/containers/Blocnote/actions.js b/src/containers/Blocnote/actions.js index 9b5f2b72..35f239d2 100644 --- a/src/containers/Blocnote/actions.js +++ b/src/containers/Blocnote/actions.js @@ -32,6 +32,12 @@ import { BUDGET_SIMULATOR_REQUESTED, BUDGET_SIMULATOR_SUCCEEDED, BUDGET_SIMULATOR_FAILED, + UPDATE_LOAN_OPTIONS_REQUESTED, + UPDATE_LOAN_OPTIONS_SUCCEEDED, + UPDATE_LOAN_OPTIONS_FAILED, + UPDATE_CUSTOMER_PREFERENCE_REQUESTED, + UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED, + UPDATE_CUSTOMER_PREFERENCE_FAILED, } from './constants'; import { makeActionCreator } from '../../utils/reduxHelpers'; @@ -70,3 +76,11 @@ export const liabilitiesFailed = makeActionCreator(LIABILITIES_FAILED, 'error'); export const loadBudgetSimulator = makeActionCreator(BUDGET_SIMULATOR_REQUESTED, 'buildingId'); export const budgetSimulatorLoaded = makeActionCreator(BUDGET_SIMULATOR_SUCCEEDED, 'instance'); export const budgetSimulatorFailed = makeActionCreator(BUDGET_SIMULATOR_FAILED, 'error'); + +export const updateLoanOptions = makeActionCreator(UPDATE_LOAN_OPTIONS_REQUESTED, 'buildingId', 'payload'); +export const updateLoanOptionsSucceeded = makeActionCreator(UPDATE_LOAN_OPTIONS_SUCCEEDED, 'instance'); +export const updateLoanOptionsFailed = makeActionCreator(UPDATE_LOAN_OPTIONS_FAILED, 'error'); + +export const updateCustomerPreference = makeActionCreator(UPDATE_CUSTOMER_PREFERENCE_REQUESTED, 'buildingId', 'payload'); +export const updateCustomerPreferenceSucceeded = makeActionCreator(UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED, 'instance'); +export const updateCustomerPreferenceFailed = makeActionCreator(UPDATE_CUSTOMER_PREFERENCE_FAILED, 'error'); diff --git a/src/containers/Blocnote/constants.js b/src/containers/Blocnote/constants.js index 2e194fc1..2f9283cc 100644 --- a/src/containers/Blocnote/constants.js +++ b/src/containers/Blocnote/constants.js @@ -30,6 +30,14 @@ export const LIABILITIES_REQUESTED = 'LIABILITIES_REQUESTED'; export const LIABILITIES_SUCCEEDED = 'LIABILITIES_SUCCEEDED'; export const LIABILITIES_FAILED = 'LIABILITIES_FAILED'; +export const UPDATE_LOAN_OPTIONS_REQUESTED = 'UPDATE_LOAN_OPTIONS_REQUESTED'; +export const UPDATE_LOAN_OPTIONS_SUCCEEDED = 'UPDATE_LOAN_OPTIONS_SUCCEEDED'; +export const UPDATE_LOAN_OPTIONS_FAILED = 'UPDATE_LOAN_OPTIONS_FAILED'; + +export const UPDATE_CUSTOMER_PREFERENCE_REQUESTED = 'UPDATE_CUSTOMER_PREFERENCE_REQUESTED'; +export const UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED = 'UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED'; +export const UPDATE_CUSTOMER_PREFERENCE_FAILED = 'UPDATE_CUSTOMER_PREFERENCE_FAILED'; + export const BUDGET_SIMULATOR_REQUESTED = 'BUDGET_SIMULATOR_REQUESTED'; export const BUDGET_SIMULATOR_SUCCEEDED = 'BUDGET_SIMULATOR_SUCCEEDED'; export const BUDGET_SIMULATOR_FAILED = 'BUDGET_SIMULATOR_FAILED'; diff --git a/src/containers/Blocnote/reducer.js b/src/containers/Blocnote/reducer.js index 9d71b7c1..df4257eb 100644 --- a/src/containers/Blocnote/reducer.js +++ b/src/containers/Blocnote/reducer.js @@ -32,6 +32,12 @@ import { BUDGET_SIMULATOR_REQUESTED, BUDGET_SIMULATOR_SUCCEEDED, BUDGET_SIMULATOR_FAILED, + UPDATE_LOAN_OPTIONS_REQUESTED, + UPDATE_LOAN_OPTIONS_SUCCEEDED, + UPDATE_LOAN_OPTIONS_FAILED, + UPDATE_CUSTOMER_PREFERENCE_REQUESTED, + UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED, + UPDATE_CUSTOMER_PREFERENCE_FAILED, } from './constants'; const blocnoteInitialState = { @@ -386,6 +392,68 @@ export default function (state = blocnoteInitialState, action) { }, }; + case UPDATE_LOAN_OPTIONS_REQUESTED: + return { + ...state, + loanOptions: { + ...state.loanOptions, + loading: true, + error: false, + }, + }; + + case UPDATE_LOAN_OPTIONS_SUCCEEDED: + console.log(action); // eslint-disable-line + console.log(state); // eslint-disable-line + return { + ...state, + loanOptions: { + data: { instance: action.instance }, + loading: false, + error: false, + }, + }; + + case UPDATE_LOAN_OPTIONS_FAILED: + return { ...state, + loanOptions: { + ...state.loanOptions, + loading: false, + error: action.error, + }, + }; + + case UPDATE_CUSTOMER_PREFERENCE_REQUESTED: + return { + ...state, + customerPreference: { + ...state.customerPreference, + loading: true, + error: false, + }, + }; + + case UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED: + console.log(action); // eslint-disable-line + console.log(state); // eslint-disable-line + return { + ...state, + customerPreference: { + data: { instance: action.instance }, + loading: false, + error: false, + }, + }; + + case UPDATE_CUSTOMER_PREFERENCE_FAILED: + return { ...state, + customerPreference: { + ...state.customerPreference, + loading: false, + error: action.error, + }, + }; + case BUDGET_SIMULATOR_REQUESTED: return { ...state, diff --git a/src/containers/Blocnote/sagas.js b/src/containers/Blocnote/sagas.js index d333a8e4..b0c82ad7 100644 --- a/src/containers/Blocnote/sagas.js +++ b/src/containers/Blocnote/sagas.js @@ -1,4 +1,5 @@ import { call, put, takeEvery } from 'redux-saga/effects'; +import SagaRequests from '../../utils/sagaRequests'; import request from '../../utils/request'; import { getHeaders } from '../../utils/restServices'; @@ -14,6 +15,8 @@ import { LIABILITIES_REQUESTED, CUSTOMER_PREFERENCE_REQUESTED, BUDGET_SIMULATOR_REQUESTED, + UPDATE_LOAN_OPTIONS_REQUESTED, + UPDATE_CUSTOMER_PREFERENCE_REQUESTED, } from './constants'; import { @@ -39,161 +42,115 @@ import { customerPreferenceFailed, budgetSimulatorLoaded, budgetSimulatorFailed, + updateLoanOptionsSucceeded, + updateLoanOptionsFailed, + updateCustomerPreferenceSucceeded, + updateCustomerPreferenceFailed, } from './actions'; function* loadLandingData(action) { const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/data/`; - const res = yield call(request, url, { - method: 'GET', - headers: getHeaders(), - }); - - if (!res.err) { - console.log(res); // eslint-disable-line - yield put(landingDataLoaded(res)); - } else { - yield put(landingDataFailed(res.err)); - } + yield SagaRequests.get(action, url, landingDataLoaded, landingDataFailed); } function* loadFinanceOverview(action) { const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/finance-overview/`; - const res = yield call(request, url, { - method: 'GET', - headers: getHeaders(), - }); - - if (!res.err) { - yield put(financeOverviewLoaded(res)); - } else { - yield put(financeOverviewFailed(res.err)); - } + yield SagaRequests.get(action, url, financeOverviewLoaded, financeOverviewFailed); } function* loadBills(action) { const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/bills/`; - const res = yield call(request, url, { - method: 'GET', - headers: getHeaders(), - }); - - if (!res.err) { - yield put(billsLoaded(res)); - } else { - yield put(billsFailed(res.err)); - } + yield SagaRequests.get(action, url, billsLoaded, billsFailed); } function* loadBillsOverview(action) { const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/bills-overview/`; - const res = yield call(request, url, { - method: 'GET', - headers: getHeaders(), - }); - - if (!res.err) { - yield put(billsOverviewLoaded(res)); - } else { - yield put(billsOverviewFailed(res.err)); - } + yield SagaRequests.get(action, url, billsOverviewLoaded, billsOverviewFailed); } function* loadBillsSummary(action) { const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/bills-summary/`; - const res = yield call(request, url, { - method: 'GET', - headers: getHeaders(), - }); - - if (!res.err) { - yield put(billsSummaryLoaded(res)); - } else { - yield put(billsSummaryFailed(res.err)); - } + yield SagaRequests.get(action, url, billsSummaryLoaded, billsSummaryFailed); } function* loadLoanOptions(action) { const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/loan-options/?loans=all-loans`; - const res = yield call(request, url, { - method: 'GET', - headers: getHeaders(), - }); - - if (!res.err) { - yield put(loanOptionsLoaded(res)); - } else { - yield put(loanOptionsFailed(res.err)); - } + yield SagaRequests.get(action, url, loanOptionsLoaded, loanOptionsFailed); } function* loadCashBalance(action) { const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/cash-balance/`; - const res = yield call(request, url, { - method: 'GET', - headers: getHeaders(), - }); - - if (!res.err) { - yield put(cashBalanceLoaded(res)); - } else { - yield put(cashBalanceFailed(res.err)); - } + yield SagaRequests.get(action, url, cashBalanceLoaded, cashBalanceFailed); } function* loadIncomeStatement(action) { const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/income-statement/`; - const res = yield call(request, url, { - method: 'GET', - headers: getHeaders(), - }); - - if (!res.err) { - yield put(incomeStatementLoaded(res)); - } else { - yield put(incomeStatementFailed(res.err)); - } + yield SagaRequests.get(action, url, incomeStatementLoaded, incomeStatementFailed); } function* loadCustomerPreference(action) { const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/customer-preference/`; + yield SagaRequests.get(action, url, customerPreferenceLoaded, customerPreferenceFailed); +} + +function* loadLiabilities(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/liabilities/`; + yield SagaRequests.get(action, url, liabilitiesLoaded, liabilitiesFailed); +} + +function* loadBudgetSimulator(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/budget/budget-data/`; + yield SagaRequests.get(action, url, budgetSimulatorLoaded, budgetSimulatorFailed); const res = yield call(request, url, { method: 'GET', headers: getHeaders(), }); if (!res.err) { - yield put(customerPreferenceLoaded(res)); + yield put(budgetSimulatorLoaded(res)); } else { - yield put(customerPreferenceFailed(res.err)); + yield put(budgetSimulatorFailed(res.err)); } } -function* loadLiabilities(action) { - const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/liabilities/`; - const res = yield call(request, url, { - method: 'GET', - headers: getHeaders(), - }); +function* updateLoanOptions(action) { + console.log(action); // eslint-disable-line + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/loan-options/`; + const res = yield call( + request, + SagaRequests.generateURL(url, action), + { + method: 'PUT', + headers: getHeaders(), + body: JSON.stringify(action.payload), + } + ); if (!res.err) { - yield put(liabilitiesLoaded(res)); + yield put(updateLoanOptionsSucceeded(action.payload)); } else { - yield put(liabilitiesFailed(res.err)); + yield put(updateLoanOptionsFailed(res.err)); } } -function* loadBudgetSimulator(action) { - const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/budget/budget-data/`; - const res = yield call(request, url, { - method: 'GET', - headers: getHeaders(), - }); +function* updateCustomerPreference(action) { + console.log(action); // eslint-disable-line + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/customer-preference/`; + const res = yield call( + request, + SagaRequests.generateURL(url, action), + { + method: 'PUT', + headers: getHeaders(), + body: JSON.stringify(action.payload), + } + ); if (!res.err) { - yield put(budgetSimulatorLoaded(res)); + yield put(updateCustomerPreferenceSucceeded(action.payload)); } else { - yield put(budgetSimulatorFailed(res.err)); + yield put(updateCustomerPreferenceFailed(res.err)); } } @@ -209,6 +166,8 @@ function* blocnoteWatcher() { yield takeEvery(CUSTOMER_PREFERENCE_REQUESTED, loadCustomerPreference); yield takeEvery(LIABILITIES_REQUESTED, loadLiabilities); yield takeEvery(BUDGET_SIMULATOR_REQUESTED, loadBudgetSimulator); + yield takeEvery(UPDATE_LOAN_OPTIONS_REQUESTED, updateLoanOptions); + yield takeEvery(UPDATE_CUSTOMER_PREFERENCE_REQUESTED, updateCustomerPreference); } export default blocnoteWatcher; -- GitLab From 96eccf22403f66895c3f879a9b608bdedcc00a74 Mon Sep 17 00:00:00 2001 From: akkking Date: Tue, 16 Apr 2019 12:49:44 -0400 Subject: [PATCH 44/79] Add cash balance with Redux --- src/containers/Blocnote/FinancialInputs.js | 28 ++- .../Blocnote/FinancialInputs/CashBalance.js | 191 +++++++++++++++++ .../FinancialInputs/CashBalanceRow.js | 94 ++++++++ .../FinancialInputs/LoanOptionsRow.js | 2 +- .../FinancialInputs/MortgageLiabilities.js | 202 ++++++++++++++++++ .../FinancialInputs/MortgageLiabilitiesRow.js | 123 +++++++++++ src/containers/Blocnote/actions.js | 14 ++ src/containers/Blocnote/constants.js | 8 + src/containers/Blocnote/reducer.js | 74 ++++++- src/containers/Blocnote/sagas.js | 48 +++++ 10 files changed, 769 insertions(+), 15 deletions(-) create mode 100644 src/containers/Blocnote/FinancialInputs/CashBalance.js create mode 100644 src/containers/Blocnote/FinancialInputs/CashBalanceRow.js create mode 100644 src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js create mode 100644 src/containers/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js diff --git a/src/containers/Blocnote/FinancialInputs.js b/src/containers/Blocnote/FinancialInputs.js index 079e34c5..b6a06c10 100644 --- a/src/containers/Blocnote/FinancialInputs.js +++ b/src/containers/Blocnote/FinancialInputs.js @@ -10,7 +10,8 @@ import { loadFinanceOverview, loadBills, loadBillsOverview, loadBillsSummary, loadCashBalance, loadLoanOptions, loadCustomerPreference, loadIncomeStatement, loadLiabilities, - updateCustomerPreference, updateLoanOptions, + updateCashBalance, + updateLiabilities, updateLoanOptions, updateCustomerPreference, } from './actions'; import blocnoteProps from './propTypes'; import FinanceOverview from './../../components/Blocnote/FinancialInputs/FinanceOverview'; @@ -18,9 +19,9 @@ import EnergyBills from './../../components/Blocnote/FinancialInputs/EnergyBills import BillsSummary from './../../components/Blocnote/FinancialInputs/BillsSummary'; import EnergyBillsOverview from './../../components/Blocnote/FinancialInputs/EnergyBillsOverview'; import IncomeStatements from './../../components/Blocnote/FinancialInputs/IncomeStatements'; -import CashBalance from './../../components/Blocnote/FinancialInputs/CashBalance'; -import MortgageLiabilities from './../../components/Blocnote/FinancialInputs/MortgageLiabilities'; -import LoanOptions from './/FinancialInputs/LoanOptions'; +import CashBalance from './FinancialInputs/CashBalance'; +import MortgageLiabilities from './FinancialInputs/MortgageLiabilities'; +import LoanOptions from './FinancialInputs/LoanOptions'; import CustomerPreference from './FinancialInputs/CustomerPreference'; import { blocnoteURL } from '../../utils/restServices'; @@ -151,15 +152,22 @@ class FinancialInputs extends Component { @@ -220,6 +228,8 @@ FinancialInputs.propTypes = { loadLiabilities: PropTypes.func, loadLoanOptions: PropTypes.func, loadCustomerPreference: PropTypes.func, + updateCashBalance: PropTypes.func, + updateLiabilities: PropTypes.func, updateLoanOptions: PropTypes.func, updateCustomerPreference: PropTypes.func, }; @@ -235,6 +245,8 @@ const mapDispatchToProps = dispatch => { loadLiabilities, loadLoanOptions, loadCustomerPreference, + updateCashBalance, + updateLiabilities, updateLoanOptions, updateCustomerPreference, }, dispatch); diff --git a/src/containers/Blocnote/FinancialInputs/CashBalance.js b/src/containers/Blocnote/FinancialInputs/CashBalance.js new file mode 100644 index 00000000..d5d7a448 --- /dev/null +++ b/src/containers/Blocnote/FinancialInputs/CashBalance.js @@ -0,0 +1,191 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Button, + Table, +} from 'reactstrap'; +import CashBalanceRow from './CashBalanceRow'; +import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; + + +class CashBalance extends Component { + constructor(props) { + super(props); + this.deleteRow = this.deleteRow.bind(this); + this.addRow = this.addRow.bind(this); + this.state = { + cashBalance: this.props.data, + id: this.props.data.length, + balanceAmount: '', + statementDate: '', + isFromBalanceSheet: false, + updated: false, + }; + } + + deleteRow = id => { + const cashBalanceCopy = this.state.cashBalance.filter((statement, index) => { + console.log(statement); // eslint-disable-line + return index !== id; + }); + this.setState({ cashBalance: cashBalanceCopy }, () => { + alert('Statement deleted!'); + }); + } + + addRow = () => { + const newStatement = { + id: this.state.id, + balanceAmount: this.state.balanceAmount, + statementDate: this.state.statementDate, + isFromBalanceSheet: this.state.isFromBalanceSheet, + }; + const cashBalanceCopy = this.state.cashBalance; + cashBalanceCopy.push(newStatement); + this.setState({ cashBalance: cashBalanceCopy }, () => { + console.log(this.state.cashBalance, 'New statement added!'); // eslint-disable-line + this.setState({ + id: this.state.id + 1, + balanceAmount: '', + statementDate: '', + isFromBalanceSheet: false, + updated: false, + }); + }); + } + + handleUpdateCashBalance = () => { + this.props.updateCashBalance(this.state.cashBalance); + this.setState({ updated: true }); + } + + render() { + const header = [ + '#Statement', + 'Balance Amount', + 'Statement Date', + 'Balance Sheet', + 'Option'].map((title, key) => { + return ( + + {title} + + ); + }); + let rows = []; + + if (this.state.cashBalance !== null) { + rows = this.state.cashBalance.map((statement, index) => { + return ( + + ); + }); + } + + let messageStyle = {}; + let messageContent = null; + + if (this.props.loading) { + messageContent = 'Updating ...'; + messageStyle = this.props.defaultMessageStyle; + } + + if (this.props.error && typeof this.props.error === 'object') { + messageContent = this.props.error.response.statusText; + messageStyle = this.props.errorMessageStyle; + } + + if (!this.props.error && !this.props.loading + && this.props.data !== null + && this.state.updated) { + messageContent = 'Saved!'; + messageStyle = this.props.successMessageStyle; + } + + return ( +
    +

    + Cash Balance +

    +
    +
    + + + + {header} + + + + {rows} + +
    +
    +
    +
    +
    +    +   + +
    +
    +
    + ); + } +} + +CashBalance.propTypes = { + blockStyle: PropTypes.shape({ + marginBottom: PropTypes.string, + }), + headerStyle: PropTypes.shape({ + textAlign: PropTypes.string, + marginBottom: PropTypes.string, + }), + data: PropTypes.arrayOf( + PropTypes.shape({ + balance_amount: PropTypes.string, + is_from_balance_sheet: PropTypes.boolean, + statement_date: PropTypes.string, + }), + ), + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + updateCashBalance: PropTypes.func, + error: PropTypes.bool, + loading: PropTypes.bool, +}; + +export default CashBalance; diff --git a/src/containers/Blocnote/FinancialInputs/CashBalanceRow.js b/src/containers/Blocnote/FinancialInputs/CashBalanceRow.js new file mode 100644 index 00000000..1e78d5de --- /dev/null +++ b/src/containers/Blocnote/FinancialInputs/CashBalanceRow.js @@ -0,0 +1,94 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + InputGroup, + InputGroupAddon, + Input, + Button, +} from 'reactstrap'; + + +class CashBalanceRow extends Component { + constructor(props) { + super(props); + this.handleOnChange = this.handleOnChange.bind(this); + this.onDelEvent = this.onDelEvent.bind(this); + this.state = { + id: props.id, + balanceAmount: props.balanceAmount, + statementDate: props.statementDate, + isFromBalanceSheet: props.isFromBalanceSheet, + }; + } + + onDelEvent() { + this.props.onDelEvent(this.props.id); + } + + handleOnChange = (event) => { + this.setState({ [event.target.name]: event.target.value }); + } + + render() { + return ( + + + {this.props.id + 1} + + + + + $ + + + + + + + + + + + + + + + ); + } +} + +CashBalanceRow.propTypes = { + id: PropTypes.number, + balanceAmount: PropTypes.number, + statementDate: PropTypes.string, + isFromBalanceSheet: PropTypes.bool, + onDelEvent: PropTypes.func, +}; + +export default CashBalanceRow; diff --git a/src/containers/Blocnote/FinancialInputs/LoanOptionsRow.js b/src/containers/Blocnote/FinancialInputs/LoanOptionsRow.js index 55637dc0..205abd32 100644 --- a/src/containers/Blocnote/FinancialInputs/LoanOptionsRow.js +++ b/src/containers/Blocnote/FinancialInputs/LoanOptionsRow.js @@ -51,7 +51,7 @@ class LoanOptionsRow extends Component { { + const liabilitiesCopy = this.state.liabilities.filter((liability, index) => { + console.log(liability); // eslint-disable-line + return index !== id; + }); + console.log(liabilitiesCopy); // eslint-disable-line + this.setState({ liabilities: liabilitiesCopy }, () => { + alert('Liability deleted!'); + }); + } + + addRow = () => { + const newLiability = { + id: this.state.id, + lender: this.state.lender, + inputDate: this.state.inputDate, + monthlyService: this.state.monthlyService, + remainingTerm: this.state.remainingTerm, + }; + const liabilitiesCopy = this.state.liabilities; + liabilitiesCopy.push(newLiability); + this.setState({ liabilities: liabilitiesCopy }, () => { + console.log(this.state.liabilities, 'New statement added!'); // eslint-disable-line + this.setState({ + id: this.state.id + 1, + lender: '', + inputDate: '', + monthlyService: '', + remainingTerm: '', + updated: false, + }); + }); + } + + handleUpdateLiabilities = () => { + this.props.updateLiabilities(this.state.liabilities); + this.setState({ updated: true }); + } + + render() { + const header = [ + '#Debt', + 'Lender Name', + 'Monthly Service', + 'Remaining Terms', + 'Input Date', + 'Option', + ].map((title, key) => { + return ( + + {title} + + ); + }); + let rows = []; + + if (this.state.liabilities !== null) { + rows = this.state.liabilities.map((liability, index) => { + return ( + + ); + }); + } + + let messageStyle = {}; + let messageContent = null; + + if (this.props.loading) { + messageContent = 'Updating ...'; + messageStyle = this.props.defaultMessageStyle; + } + + if (this.props.error && typeof this.props.error === 'object') { + messageContent = this.props.error.response.statusText; + messageStyle = this.props.errorMessageStyle; + } + + if (!this.props.error && !this.props.loading + && this.props.data !== null + && this.state.updated) { + messageContent = 'Saved!'; + messageStyle = this.props.successMessageStyle; + } + + return ( +
    +

    + Mortgage and Liabilities +

    +
    +
    + + + + {header} + + + + {rows} + +
    +
    +
    +
    +
    +    +   + +
    +
    +
    + ); + } +} + +MortgageLiabilities.propTypes = { + blockStyle: PropTypes.shape({ + marginBottom: PropTypes.string, + }), + headerStyle: PropTypes.shape({ + textAlign: PropTypes.string, + marginBottom: PropTypes.string, + }), + data: PropTypes.arrayOf( + PropTypes.shape({ + lender: PropTypes.string, + monthly_service: PropTypes.boolean, + input_date: PropTypes.string, + remaining_term: PropTypes.string, + }), + ), + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + updateLiabilities: PropTypes.func, + error: PropTypes.bool, + loading: PropTypes.bool, +}; + +export default MortgageLiabilities; diff --git a/src/containers/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js b/src/containers/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js new file mode 100644 index 00000000..f618a4b3 --- /dev/null +++ b/src/containers/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js @@ -0,0 +1,123 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Button, + InputGroup, + InputGroupAddon, + Input, +} from 'reactstrap'; + + +class MortgageLiabilitiesRow extends Component { + constructor(props) { + super(props); + this.handleOnChange = this.handleOnChange.bind(this); + this.onDelEvent = this.onDelEvent.bind(this); + this.state = { + lender: props.lender, + inputDate: props.inputDate, + monthlyService: props.monthlyService, + remainingTerm: props.remainingTerm, + liability: props.liability, + }; + } + + onDelEvent() { + this.props.onDelEvent(this.props.id); + } + + handleOnChange = (event) => { + console.log(event.target.name); // eslint-disable-line + console.log(event.target.value); // eslint-disable-line + this.setState({ [event.target.name]: event.target.value }); + } + + render() { + const style = { textAlign: 'left' }; + return ( + + + {this.props.id + 1} + + + + + + + + $ + + + + + + + + + Months + + + + + + + + + + + ); + } +} + +MortgageLiabilitiesRow.propTypes = { + id: PropTypes.number, + lender: PropTypes.string, + inputDate: PropTypes.string, + monthlyService: PropTypes.string, + remainingTerm: PropTypes.string, + onDelEvent: PropTypes.func, + liability: PropTypes.shape({ + lender: PropTypes.string, + inputDate: PropTypes.string, + monthlyService: PropTypes.string, + remainingTerm: PropTypes.number, + }), +}; + +export default MortgageLiabilitiesRow; diff --git a/src/containers/Blocnote/actions.js b/src/containers/Blocnote/actions.js index 35f239d2..11a0620c 100644 --- a/src/containers/Blocnote/actions.js +++ b/src/containers/Blocnote/actions.js @@ -32,6 +32,12 @@ import { BUDGET_SIMULATOR_REQUESTED, BUDGET_SIMULATOR_SUCCEEDED, BUDGET_SIMULATOR_FAILED, + UPDATE_CASH_BALANCE_REQUESTED, + UPDATE_CASH_BALANCE_SUCCEEDED, + UPDATE_CASH_BALANCE_FAILED, + UPDATE_LIABILITIES_REQUESTED, + UPDATE_LIABILITIES_SUCCEEDED, + UPDATE_LIABILITIES_FAILED, UPDATE_LOAN_OPTIONS_REQUESTED, UPDATE_LOAN_OPTIONS_SUCCEEDED, UPDATE_LOAN_OPTIONS_FAILED, @@ -77,6 +83,14 @@ export const loadBudgetSimulator = makeActionCreator(BUDGET_SIMULATOR_REQUESTED, export const budgetSimulatorLoaded = makeActionCreator(BUDGET_SIMULATOR_SUCCEEDED, 'instance'); export const budgetSimulatorFailed = makeActionCreator(BUDGET_SIMULATOR_FAILED, 'error'); +export const updateCashBalance = makeActionCreator(UPDATE_CASH_BALANCE_REQUESTED, 'buildingId', 'payload'); +export const updateCashBalanceSucceeded = makeActionCreator(UPDATE_CASH_BALANCE_SUCCEEDED, 'instance'); +export const updateCashBalanceFailed = makeActionCreator(UPDATE_CASH_BALANCE_FAILED, 'error'); + +export const updateLiabilities = makeActionCreator(UPDATE_LIABILITIES_REQUESTED, 'buildingId', 'payload'); +export const updateLiabilitiesSucceeded = makeActionCreator(UPDATE_LIABILITIES_SUCCEEDED, 'instance'); +export const updateLiabilitiesFailed = makeActionCreator(UPDATE_LIABILITIES_FAILED, 'error'); + export const updateLoanOptions = makeActionCreator(UPDATE_LOAN_OPTIONS_REQUESTED, 'buildingId', 'payload'); export const updateLoanOptionsSucceeded = makeActionCreator(UPDATE_LOAN_OPTIONS_SUCCEEDED, 'instance'); export const updateLoanOptionsFailed = makeActionCreator(UPDATE_LOAN_OPTIONS_FAILED, 'error'); diff --git a/src/containers/Blocnote/constants.js b/src/containers/Blocnote/constants.js index 2f9283cc..a5f09a2c 100644 --- a/src/containers/Blocnote/constants.js +++ b/src/containers/Blocnote/constants.js @@ -30,6 +30,14 @@ export const LIABILITIES_REQUESTED = 'LIABILITIES_REQUESTED'; export const LIABILITIES_SUCCEEDED = 'LIABILITIES_SUCCEEDED'; export const LIABILITIES_FAILED = 'LIABILITIES_FAILED'; +export const UPDATE_CASH_BALANCE_REQUESTED = 'UPDATE_CASH_BALANCE_REQUESTED'; +export const UPDATE_CASH_BALANCE_SUCCEEDED = 'UPDATE_CASH_BALANCE_SUCCEEDED'; +export const UPDATE_CASH_BALANCE_FAILED = 'UPDATE_CASH_BALANCE_FAILED'; + +export const UPDATE_LIABILITIES_REQUESTED = 'UPDATE_LIABILITIES_REQUESTED'; +export const UPDATE_LIABILITIES_SUCCEEDED = 'UPDATE_LIABILITIES_SUCCEEDED'; +export const UPDATE_LIABILITIES_FAILED = 'UPDATE_LIABILITIES_FAILED'; + export const UPDATE_LOAN_OPTIONS_REQUESTED = 'UPDATE_LOAN_OPTIONS_REQUESTED'; export const UPDATE_LOAN_OPTIONS_SUCCEEDED = 'UPDATE_LOAN_OPTIONS_SUCCEEDED'; export const UPDATE_LOAN_OPTIONS_FAILED = 'UPDATE_LOAN_OPTIONS_FAILED'; diff --git a/src/containers/Blocnote/reducer.js b/src/containers/Blocnote/reducer.js index df4257eb..f1ac1798 100644 --- a/src/containers/Blocnote/reducer.js +++ b/src/containers/Blocnote/reducer.js @@ -32,6 +32,12 @@ import { BUDGET_SIMULATOR_REQUESTED, BUDGET_SIMULATOR_SUCCEEDED, BUDGET_SIMULATOR_FAILED, + UPDATE_CASH_BALANCE_REQUESTED, + UPDATE_CASH_BALANCE_SUCCEEDED, + UPDATE_CASH_BALANCE_FAILED, + UPDATE_LIABILITIES_REQUESTED, + UPDATE_LIABILITIES_SUCCEEDED, + UPDATE_LIABILITIES_FAILED, UPDATE_LOAN_OPTIONS_REQUESTED, UPDATE_LOAN_OPTIONS_SUCCEEDED, UPDATE_LOAN_OPTIONS_FAILED, @@ -107,12 +113,6 @@ export default function (state = blocnoteInitialState, action) { }; case LANDING_DATA_SUCCEEDED: - // console.log({ - // ...state, - // data: action.instance, - // loading: false, error: - // false - // }); // eslint-disable-line return { ...state, landingData: { @@ -392,6 +392,68 @@ export default function (state = blocnoteInitialState, action) { }, }; + case UPDATE_CASH_BALANCE_REQUESTED: + return { + ...state, + cashBalance: { + ...state.cashBalance, + loading: true, + error: false, + }, + }; + + case UPDATE_CASH_BALANCE_SUCCEEDED: + console.log(action); // eslint-disable-line + console.log(state); // eslint-disable-line + return { + ...state, + cashBalance: { + data: { instance: action.instance }, + loading: false, + error: false, + }, + }; + + case UPDATE_CASH_BALANCE_FAILED: + return { ...state, + cashBalance: { + ...state.cashBalance, + loading: false, + error: action.error, + }, + }; + + case UPDATE_LIABILITIES_REQUESTED: + return { + ...state, + liabilities: { + ...state.liabilities, + loading: true, + error: false, + }, + }; + + case UPDATE_LIABILITIES_SUCCEEDED: + console.log(action); // eslint-disable-line + console.log(state); // eslint-disable-line + return { + ...state, + liabilities: { + data: { instance: action.instance }, + loading: false, + error: false, + }, + }; + + case UPDATE_LIABILITIES_FAILED: + return { ...state, + liabilities: { + ...state.liabilities, + loading: false, + error: action.error, + }, + }; + case UPDATE_LOAN_OPTIONS_REQUESTED: return { ...state, diff --git a/src/containers/Blocnote/sagas.js b/src/containers/Blocnote/sagas.js index b0c82ad7..75adf1cb 100644 --- a/src/containers/Blocnote/sagas.js +++ b/src/containers/Blocnote/sagas.js @@ -15,6 +15,8 @@ import { LIABILITIES_REQUESTED, CUSTOMER_PREFERENCE_REQUESTED, BUDGET_SIMULATOR_REQUESTED, + UPDATE_CASH_BALANCE_REQUESTED, + UPDATE_LIABILITIES_REQUESTED, UPDATE_LOAN_OPTIONS_REQUESTED, UPDATE_CUSTOMER_PREFERENCE_REQUESTED, } from './constants'; @@ -42,6 +44,10 @@ import { customerPreferenceFailed, budgetSimulatorLoaded, budgetSimulatorFailed, + updateCashBalanceSucceeded, + updateCashBalanceFailed, + updateLiabilitiesSucceeded, + updateLiabilitiesFailed, updateLoanOptionsSucceeded, updateLoanOptionsFailed, updateCustomerPreferenceSucceeded, @@ -114,6 +120,46 @@ function* loadBudgetSimulator(action) { } } +function* updateCashBalance(action) { + console.log(action); // eslint-disable-line + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/cash-balance/`; + const res = yield call( + request, + SagaRequests.generateURL(url, action), + { + method: 'PUT', + headers: getHeaders(), + body: JSON.stringify(action.payload), + } + ); + + if (!res.err) { + yield put(updateCashBalanceSucceeded(action.payload)); + } else { + yield put(updateCashBalanceFailed(res.err)); + } +} + +function* updateLiabilities(action) { + console.log(action); // eslint-disable-line + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/liabilities/`; + const res = yield call( + request, + SagaRequests.generateURL(url, action), + { + method: 'PUT', + headers: getHeaders(), + body: JSON.stringify(action.payload), + } + ); + + if (!res.err) { + yield put(updateLiabilitiesSucceeded(action.payload)); + } else { + yield put(updateLiabilitiesFailed(res.err)); + } +} + function* updateLoanOptions(action) { console.log(action); // eslint-disable-line const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/loan-options/`; @@ -166,6 +212,8 @@ function* blocnoteWatcher() { yield takeEvery(CUSTOMER_PREFERENCE_REQUESTED, loadCustomerPreference); yield takeEvery(LIABILITIES_REQUESTED, loadLiabilities); yield takeEvery(BUDGET_SIMULATOR_REQUESTED, loadBudgetSimulator); + yield takeEvery(UPDATE_CASH_BALANCE_REQUESTED, updateCashBalance); + yield takeEvery(UPDATE_LIABILITIES_REQUESTED, updateLiabilities); yield takeEvery(UPDATE_LOAN_OPTIONS_REQUESTED, updateLoanOptions); yield takeEvery(UPDATE_CUSTOMER_PREFERENCE_REQUESTED, updateCustomerPreference); } -- GitLab From fe96ac917797f12bdd57657712784122202dc2c6 Mon Sep 17 00:00:00 2001 From: akkking Date: Tue, 16 Apr 2019 18:05:59 -0400 Subject: [PATCH 45/79] Add Bills Summary section with Redux --- src/containers/Blocnote/FinancialInputs.js | 20 +- .../Blocnote/FinancialInputs/BillsSummary.js | 109 +++++++++ .../FinancialInputs/BillsSummaryRow.js | 98 ++++++++ .../FinancialInputs/BillsSummaryTable.js | 225 ++++++++++++++++++ src/containers/Blocnote/actions.js | 19 ++ src/containers/Blocnote/constants.js | 10 + src/containers/Blocnote/reducer.js | 120 ++++++++++ src/containers/Blocnote/sagas.js | 76 +++++- 8 files changed, 673 insertions(+), 4 deletions(-) create mode 100644 src/containers/Blocnote/FinancialInputs/BillsSummary.js create mode 100644 src/containers/Blocnote/FinancialInputs/BillsSummaryRow.js create mode 100644 src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js diff --git a/src/containers/Blocnote/FinancialInputs.js b/src/containers/Blocnote/FinancialInputs.js index b6a06c10..95570317 100644 --- a/src/containers/Blocnote/FinancialInputs.js +++ b/src/containers/Blocnote/FinancialInputs.js @@ -10,13 +10,14 @@ import { loadFinanceOverview, loadBills, loadBillsOverview, loadBillsSummary, loadCashBalance, loadLoanOptions, loadCustomerPreference, loadIncomeStatement, loadLiabilities, + createBillsSummary, updateBillsSummary, deleteBillsSummary, updateCashBalance, updateLiabilities, updateLoanOptions, updateCustomerPreference, } from './actions'; import blocnoteProps from './propTypes'; import FinanceOverview from './../../components/Blocnote/FinancialInputs/FinanceOverview'; import EnergyBills from './../../components/Blocnote/FinancialInputs/EnergyBills'; -import BillsSummary from './../../components/Blocnote/FinancialInputs/BillsSummary'; +import BillsSummary from './FinancialInputs/BillsSummary'; import EnergyBillsOverview from './../../components/Blocnote/FinancialInputs/EnergyBillsOverview'; import IncomeStatements from './../../components/Blocnote/FinancialInputs/IncomeStatements'; import CashBalance from './FinancialInputs/CashBalance'; @@ -137,7 +138,16 @@ class FinancialInputs extends Component { @@ -166,6 +177,7 @@ class FinancialInputs extends Component { errorMessageStyle={errorMessageStyle} defaultMessageStyle={defaultMessageStyle} data={liabilities.data.instance} + buildingId={this.props.building.building_id} loading={liabilities.loading} updateLiabilities={this.props.updateLiabilities} /> @@ -228,6 +240,9 @@ FinancialInputs.propTypes = { loadLiabilities: PropTypes.func, loadLoanOptions: PropTypes.func, loadCustomerPreference: PropTypes.func, + createBillsSummary: PropTypes.func, + updateBillsSummary: PropTypes.func, + deleteBillsSummary: PropTypes.func, updateCashBalance: PropTypes.func, updateLiabilities: PropTypes.func, updateLoanOptions: PropTypes.func, @@ -245,6 +260,9 @@ const mapDispatchToProps = dispatch => { loadLiabilities, loadLoanOptions, loadCustomerPreference, + createBillsSummary, + updateBillsSummary, + deleteBillsSummary, updateCashBalance, updateLiabilities, updateLoanOptions, diff --git a/src/containers/Blocnote/FinancialInputs/BillsSummary.js b/src/containers/Blocnote/FinancialInputs/BillsSummary.js new file mode 100644 index 00000000..58c5cbe8 --- /dev/null +++ b/src/containers/Blocnote/FinancialInputs/BillsSummary.js @@ -0,0 +1,109 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import BillsSummaryTable from './BillsSummaryTable'; + + +class BillsSummary extends Component { + constructor(props) { + super(props); + this.state = { + billSummary: props.data, + successMessages: [], + }; + } + + render() { + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; + const BillsSummaryTables = []; + + if (this.state.billSummary !== null) { + // console.log(this.state.billSummary); // eslint-disable-line + Object.keys(this.state.billSummary).forEach(billName => { + BillsSummaryTables.push( +
    + +
    + ); + }); + } + + return ( +
    +

    + Bills Summary +

    +
    + {BillsSummaryTables} +
    +
    + ); + } +} + +BillsSummary.propTypes = { + data: PropTypes.shape({ + electric: PropTypes.arrayOf( + PropTypes.shape({ + year: PropTypes.string, + charge: PropTypes.string, + id: PropTypes.number, + }) + ), + gas: PropTypes.arrayOf( + PropTypes.shape({ + year: PropTypes.string, + charge: PropTypes.string, + id: PropTypes.number, + }) + ), + oil: PropTypes.arrayOf( + PropTypes.shape({ + year: PropTypes.string, + charge: PropTypes.string, + id: PropTypes.number, + }) + ), + water: PropTypes.arrayOf( + PropTypes.shape({ + year: PropTypes.string, + charge: PropTypes.string, + id: PropTypes.number, + }) + ), + }), + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + buildingId: PropTypes.number, + createBillsSummary: PropTypes.func, + updateBillsSummary: PropTypes.func, + deleteBillsSummary: PropTypes.func, +}; + +BillsSummary.defaultProps = { + data: null, +}; + +export default BillsSummary; diff --git a/src/containers/Blocnote/FinancialInputs/BillsSummaryRow.js b/src/containers/Blocnote/FinancialInputs/BillsSummaryRow.js new file mode 100644 index 00000000..5907a1da --- /dev/null +++ b/src/containers/Blocnote/FinancialInputs/BillsSummaryRow.js @@ -0,0 +1,98 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Button, + InputGroup, + InputGroupAddon, + Input, +} from 'reactstrap'; + + +class BillsSummaryRow extends Component { + constructor(props) { + super(props); + this.handleOnChange = this.handleOnChange.bind(this); + this.handleUpdateBillsSummary = this.handleUpdateBillsSummary.bind(this); + this.handleDeleteBillsSummary = this.handleDeleteBillsSummary.bind(this); + this.state = { + id: props.id, + year: props.year, + charge: props.charge, + }; + } + + handleUpdateBillsSummary() { + console.log(this.state); // eslint-disable-line + this.props.updateBillsSummary(this.state); + } + + handleDeleteBillsSummary() { + this.props.deleteBillsSummary(this.props.id); + } + + handleOnChange = (event) => { + this.setState({ [event.target.name]: event.target.value }); + } + + render() { + return ( + + + + + Year + + + + + + + + $ + + + + + + {' '} + + + + ); + } +} + +BillsSummaryRow.propTypes = { + id: PropTypes.number, + year: PropTypes.number, + charge: PropTypes.number, + updateBillsSummary: PropTypes.func, + deleteBillsSummary: PropTypes.func, +}; + +export default BillsSummaryRow; diff --git a/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js new file mode 100644 index 00000000..6d8e86ec --- /dev/null +++ b/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -0,0 +1,225 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Button, + Table, + InputGroup, + InputGroupAddon, + Input, +} from 'reactstrap'; +import BillsSummaryRow from './BillsSummaryRow'; +import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; + + +class BillsSummaryTable extends Component { + constructor(props) { + super(props); + this.handleCreateBillsSummary = this.handleCreateBillsSummary.bind(this); + this.state = { + billName: props.billName, + billData: props.billData, + year: '', + charge: '', + action: null, + }; + } + + handleCreateBillsSummary = () => { + const billData = { + utility_type: this.props.billName, + year: this.state.year, + charge: this.state.charge, + }; + console.log(this.props.buildingId); // eslint-disable-line + this.props.createBillsSummary( + this.props.buildingId, + billData, + ); + const newBill = { + id: 100, + utility_type: this.props.billName, + year: this.state.year, + charge: this.state.charge, + }; + const billDataCopy = this.state.billData; + billDataCopy.push(newBill); + this.setState({ billData: billDataCopy }, () => { + console.log(this.state.billData, 'bill added!'); // eslint-disable-line + this.setState({ + year: '', + charge: '', + action: 'created', + }); + }); + console.log(this.state); // eslint-disable-line + } + + updateBillsSummary = (billData) => { + console.log(this.props.buildingId); // eslint-disable-line + this.props.updateBillsSummary( + this.props.buildingId, + billData, + ); + this.setState({ action: 'updated' }); + } + + deleteBillsSummary = id => { + this.props.deleteBillsSummary( + this.props.buildingId, + { id }, + ); + const billDataCopy = this.state.billData.filter(bill => bill.id !== id); + this.setState({ + billData: billDataCopy, + action: 'deleted', + }); + } + + handleOnChange = (event) => { + this.setState({ [event.target.name]: event.target.value }); + } + + render() { + const tableHeaderStyle = { + textAlign: 'left', + fontWeight: 'bold', + }; + + let rows = []; + if (this.state.billData !== []) { + rows = this.state.billData.map((item) => { + // charge = charge.toLocaleString(); + return ( + + ); + }); + rows.push( + + + + + Year + + + + + + + + $ + + + + + + {' '} + + + ); + } + + let messageStyle = {}; + let messageContent = null; + + if (this.props.loading) { + messageContent = 'Processing ...'; + messageStyle = this.props.defaultMessageStyle; + } + + if (this.props.error && typeof this.props.error === 'object') { + messageContent = this.props.error.response.statusText; + messageStyle = this.props.errorMessageStyle; + } + + if (!this.props.error && !this.props.loading + && this.props.billData !== null + && this.state.action !== null) { + messageContent = this.state.action.charAt(0).toUpperCase() + this.state.action.slice(1); + messageStyle = this.props.successMessageStyle; + } + + return ( +
    + + + + + + + + + {rows} + +
    + {this.props.billName} Annual Charge + +    +
    +
    + ); + } +} + +BillsSummaryTable.propTypes = { + billName: PropTypes.string, + billData: PropTypes.arrayOf( + PropTypes.shape({ + year: PropTypes.string, + charge: PropTypes.string, + id: PropTypes.number, + }) + ), + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + createBillsSummary: PropTypes.func, + updateBillsSummary: PropTypes.func, + deleteBillsSummary: PropTypes.func, + error: PropTypes.bool, + loading: PropTypes.bool, +}; + +BillsSummaryTable.defaultProps = { + billData: [], +}; + +export default BillsSummaryTable; diff --git a/src/containers/Blocnote/actions.js b/src/containers/Blocnote/actions.js index 11a0620c..fa0b3772 100644 --- a/src/containers/Blocnote/actions.js +++ b/src/containers/Blocnote/actions.js @@ -32,6 +32,15 @@ import { BUDGET_SIMULATOR_REQUESTED, BUDGET_SIMULATOR_SUCCEEDED, BUDGET_SIMULATOR_FAILED, + CREATE_BILLS_SUMMARY_REQUESTED, + CREATE_BILLS_SUMMARY_SUCCEEDED, + CREATE_BILLS_SUMMARY_FAILED, + UPDATE_BILLS_SUMMARY_REQUESTED, + UPDATE_BILLS_SUMMARY_SUCCEEDED, + UPDATE_BILLS_SUMMARY_FAILED, + DELETE_BILLS_SUMMARY_REQUESTED, + DELETE_BILLS_SUMMARY_SUCCEEDED, + DELETE_BILLS_SUMMARY_FAILED, UPDATE_CASH_BALANCE_REQUESTED, UPDATE_CASH_BALANCE_SUCCEEDED, UPDATE_CASH_BALANCE_FAILED, @@ -83,6 +92,16 @@ export const loadBudgetSimulator = makeActionCreator(BUDGET_SIMULATOR_REQUESTED, export const budgetSimulatorLoaded = makeActionCreator(BUDGET_SIMULATOR_SUCCEEDED, 'instance'); export const budgetSimulatorFailed = makeActionCreator(BUDGET_SIMULATOR_FAILED, 'error'); +export const createBillsSummary = makeActionCreator(CREATE_BILLS_SUMMARY_REQUESTED, 'buildingId', 'payload'); +export const createBillsSummarySucceeded = makeActionCreator(CREATE_BILLS_SUMMARY_SUCCEEDED, 'instance', 'result'); +export const createBillsSummaryFailed = makeActionCreator(CREATE_BILLS_SUMMARY_FAILED, 'error'); +export const updateBillsSummary = makeActionCreator(UPDATE_BILLS_SUMMARY_REQUESTED, 'buildingId', 'payload'); +export const updateBillsSummarySucceeded = makeActionCreator(UPDATE_BILLS_SUMMARY_SUCCEEDED, 'instance'); +export const updateBillsSummaryFailed = makeActionCreator(UPDATE_BILLS_SUMMARY_FAILED, 'error'); +export const deleteBillsSummary = makeActionCreator(DELETE_BILLS_SUMMARY_REQUESTED, 'buildingId', 'payload'); +export const deleteBillsSummarySucceeded = makeActionCreator(DELETE_BILLS_SUMMARY_SUCCEEDED, 'instance'); +export const deleteBillsSummaryFailed = makeActionCreator(DELETE_BILLS_SUMMARY_FAILED, 'error'); + export const updateCashBalance = makeActionCreator(UPDATE_CASH_BALANCE_REQUESTED, 'buildingId', 'payload'); export const updateCashBalanceSucceeded = makeActionCreator(UPDATE_CASH_BALANCE_SUCCEEDED, 'instance'); export const updateCashBalanceFailed = makeActionCreator(UPDATE_CASH_BALANCE_FAILED, 'error'); diff --git a/src/containers/Blocnote/constants.js b/src/containers/Blocnote/constants.js index a5f09a2c..261a1d63 100644 --- a/src/containers/Blocnote/constants.js +++ b/src/containers/Blocnote/constants.js @@ -30,6 +30,16 @@ export const LIABILITIES_REQUESTED = 'LIABILITIES_REQUESTED'; export const LIABILITIES_SUCCEEDED = 'LIABILITIES_SUCCEEDED'; export const LIABILITIES_FAILED = 'LIABILITIES_FAILED'; +export const CREATE_BILLS_SUMMARY_REQUESTED = 'CREATE_BILLS_SUMMARY_REQUESTED'; +export const CREATE_BILLS_SUMMARY_SUCCEEDED = 'CREATE_BILLS_SUMMARY_SUCCEEDED'; +export const CREATE_BILLS_SUMMARY_FAILED = 'CREATE_BILLS_SUMMARY_FAILED'; +export const UPDATE_BILLS_SUMMARY_REQUESTED = 'UPDATE_BILLS_SUMMARY_REQUESTED'; +export const UPDATE_BILLS_SUMMARY_SUCCEEDED = 'UPDATE_BILLS_SUMMARY_SUCCEEDED'; +export const UPDATE_BILLS_SUMMARY_FAILED = 'UPDATE_BILLS_SUMMARY_FAILED'; +export const DELETE_BILLS_SUMMARY_REQUESTED = 'DELETE_BILLS_SUMMARY_REQUESTED'; +export const DELETE_BILLS_SUMMARY_SUCCEEDED = 'DELETE_BILLS_SUMMARY_SUCCEEDED'; +export const DELETE_BILLS_SUMMARY_FAILED = 'DELETE_BILLS_SUMMARY_FAILED'; + export const UPDATE_CASH_BALANCE_REQUESTED = 'UPDATE_CASH_BALANCE_REQUESTED'; export const UPDATE_CASH_BALANCE_SUCCEEDED = 'UPDATE_CASH_BALANCE_SUCCEEDED'; export const UPDATE_CASH_BALANCE_FAILED = 'UPDATE_CASH_BALANCE_FAILED'; diff --git a/src/containers/Blocnote/reducer.js b/src/containers/Blocnote/reducer.js index f1ac1798..897f3494 100644 --- a/src/containers/Blocnote/reducer.js +++ b/src/containers/Blocnote/reducer.js @@ -32,6 +32,15 @@ import { BUDGET_SIMULATOR_REQUESTED, BUDGET_SIMULATOR_SUCCEEDED, BUDGET_SIMULATOR_FAILED, + CREATE_BILLS_SUMMARY_REQUESTED, + CREATE_BILLS_SUMMARY_SUCCEEDED, + CREATE_BILLS_SUMMARY_FAILED, + UPDATE_BILLS_SUMMARY_REQUESTED, + UPDATE_BILLS_SUMMARY_SUCCEEDED, + UPDATE_BILLS_SUMMARY_FAILED, + DELETE_BILLS_SUMMARY_REQUESTED, + DELETE_BILLS_SUMMARY_SUCCEEDED, + DELETE_BILLS_SUMMARY_FAILED, UPDATE_CASH_BALANCE_REQUESTED, UPDATE_CASH_BALANCE_SUCCEEDED, UPDATE_CASH_BALANCE_FAILED, @@ -247,6 +256,117 @@ export default function (state = blocnoteInitialState, action) { }, }; + case CREATE_BILLS_SUMMARY_REQUESTED: + return { + ...state, + billsSummary: { + ...state.billsSummary, + loading: true, + error: false, + }, + }; + + case CREATE_BILLS_SUMMARY_SUCCEEDED: + // const utilityType = action.instance.utility_type; + console.log(state.billsSummary.data); // eslint-disable-line + console.log([ + ...state.billsSummary.data, + { + id: action.result.id, + utility_type: action.instance.utility_type, + year: action.instance.year, + charge: action.instance.charge, + }, + ]); // eslint-disable-line + + return { + ...state, + billsSummary: { + data: { + result: + [ + ...state.billsSummary.data, + { + id: action.result.id, + utility_type: action.instance.utility_type, + year: action.instance.year, + charge: action.instance.charge, + }, + ], + + }, + loading: false, + error: false, + }, + }; + + case CREATE_BILLS_SUMMARY_FAILED: + return { + ...state, + billsSummary: { + loading: false, + error: action.error, + }, + }; + + case UPDATE_BILLS_SUMMARY_REQUESTED: + return { + ...state, + billsSummary: { + ...state.billsSummary, + loading: true, + error: false, + }, + }; + + case UPDATE_BILLS_SUMMARY_SUCCEEDED: + return { + ...state, + billsSummary: { + ...state.billsSummary, + loading: false, + error: false, + }, + }; + + case UPDATE_BILLS_SUMMARY_FAILED: + return { + ...state, + billsSummary: { + loading: false, + error: action.error, + }, + }; + + case DELETE_BILLS_SUMMARY_REQUESTED: + return { + ...state, + billsSummary: { + ...state.billsSummary, + loading: true, + error: false, + }, + }; + + case DELETE_BILLS_SUMMARY_SUCCEEDED: + return { + ...state, + billsSummary: { + ...state.billsSummary, + loading: false, + error: false, + }, + }; + + case DELETE_BILLS_SUMMARY_FAILED: + return { + ...state, + billsSummary: { + loading: false, + error: action.error, + }, + }; + case LOAN_OPTIONS_REQUESTED: return { ...state, diff --git a/src/containers/Blocnote/sagas.js b/src/containers/Blocnote/sagas.js index 75adf1cb..12415b9e 100644 --- a/src/containers/Blocnote/sagas.js +++ b/src/containers/Blocnote/sagas.js @@ -15,6 +15,9 @@ import { LIABILITIES_REQUESTED, CUSTOMER_PREFERENCE_REQUESTED, BUDGET_SIMULATOR_REQUESTED, + CREATE_BILLS_SUMMARY_REQUESTED, + UPDATE_BILLS_SUMMARY_REQUESTED, + DELETE_BILLS_SUMMARY_REQUESTED, UPDATE_CASH_BALANCE_REQUESTED, UPDATE_LIABILITIES_REQUESTED, UPDATE_LOAN_OPTIONS_REQUESTED, @@ -44,6 +47,12 @@ import { customerPreferenceFailed, budgetSimulatorLoaded, budgetSimulatorFailed, + createBillsSummarySucceeded, + createBillsSummaryFailed, + updateBillsSummarySucceeded, + updateBillsSummaryFailed, + deleteBillsSummarySucceeded, + deleteBillsSummaryFailed, updateCashBalanceSucceeded, updateCashBalanceFailed, updateLiabilitiesSucceeded, @@ -120,8 +129,68 @@ function* loadBudgetSimulator(action) { } } -function* updateCashBalance(action) { +function* createBillsSummary(action) { + console.log(action); // eslint-disable-line + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/bills-summary/`; + const res = yield call( + request, + SagaRequests.generateURL(url, action), + { + method: 'POST', + headers: getHeaders(), + body: JSON.stringify(action.payload), + } + ); + + if (!res.err) { + console.log(res); // eslint-disable-line + yield put(createBillsSummarySucceeded(action.payload, res)); + } else { + yield put(createBillsSummaryFailed(res.err)); + } +} + +function* updateBillsSummary(action) { + console.log(action); // eslint-disable-line + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/bills-summary/`; + const res = yield call( + request, + SagaRequests.generateURL(url, action), + { + method: 'PUT', + headers: getHeaders(), + body: JSON.stringify(action.payload), + } + ); + + if (!res.err) { + yield put(updateBillsSummarySucceeded(action.payload)); + } else { + yield put(updateBillsSummaryFailed(res.err)); + } +} + +function* deleteBillsSummary(action) { console.log(action); // eslint-disable-line + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/bills-summary/`; + const res = yield call( + request, + SagaRequests.generateURL(url, action), + { + method: 'DELETE', + headers: getHeaders(), + body: JSON.stringify(action.payload), + } + ); + + if (!res.err) { + yield put(deleteBillsSummarySucceeded(action.payload)); + } else { + yield put(deleteBillsSummaryFailed(res.err)); + } +} + +function* updateCashBalance(action) { const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/cash-balance/`; const res = yield call( request, @@ -141,7 +210,6 @@ function* updateCashBalance(action) { } function* updateLiabilities(action) { - console.log(action); // eslint-disable-line const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/liabilities/`; const res = yield call( request, @@ -161,7 +229,6 @@ function* updateLiabilities(action) { } function* updateLoanOptions(action) { - console.log(action); // eslint-disable-line const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/loan-options/`; const res = yield call( request, @@ -212,6 +279,9 @@ function* blocnoteWatcher() { yield takeEvery(CUSTOMER_PREFERENCE_REQUESTED, loadCustomerPreference); yield takeEvery(LIABILITIES_REQUESTED, loadLiabilities); yield takeEvery(BUDGET_SIMULATOR_REQUESTED, loadBudgetSimulator); + yield takeEvery(CREATE_BILLS_SUMMARY_REQUESTED, createBillsSummary); + yield takeEvery(UPDATE_BILLS_SUMMARY_REQUESTED, updateBillsSummary); + yield takeEvery(DELETE_BILLS_SUMMARY_REQUESTED, deleteBillsSummary); yield takeEvery(UPDATE_CASH_BALANCE_REQUESTED, updateCashBalance); yield takeEvery(UPDATE_LIABILITIES_REQUESTED, updateLiabilities); yield takeEvery(UPDATE_LOAN_OPTIONS_REQUESTED, updateLoanOptions); -- GitLab From e8ddad6412cb093729ffff1ce4bfd7d65bc2d15f Mon Sep 17 00:00:00 2001 From: akkking Date: Tue, 16 Apr 2019 23:24:23 -0400 Subject: [PATCH 46/79] Add confirm alert, fix add/delete record issues --- .../FinancialInputs/BillsSummaryTable.js | 38 ++++++++++--------- .../Blocnote/FinancialInputs/CashBalance.js | 18 +++++---- .../Blocnote/FinancialInputs/LoanOptions.js | 20 ++++++---- .../FinancialInputs/MortgageLiabilities.js | 17 +++++---- 4 files changed, 52 insertions(+), 41 deletions(-) diff --git a/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js index 6d8e86ec..f821c2f4 100644 --- a/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -25,25 +25,25 @@ class BillsSummaryTable extends Component { } handleCreateBillsSummary = () => { - const billData = { - utility_type: this.props.billName, - year: this.state.year, - charge: this.state.charge, - }; console.log(this.props.buildingId); // eslint-disable-line this.props.createBillsSummary( this.props.buildingId, - billData, + { + utility_type: this.props.billName, + year: this.state.year, + charge: this.state.charge, + }, () => { + console.log('saga done!'); // eslint-disable-line + } ); + console.log(this.state.billData); // eslint-disable-line const newBill = { id: 100, utility_type: this.props.billName, year: this.state.year, charge: this.state.charge, }; - const billDataCopy = this.state.billData; - billDataCopy.push(newBill); - this.setState({ billData: billDataCopy }, () => { + this.setState({ billData: [...this.state.billData, newBill] }, () => { console.log(this.state.billData, 'bill added!'); // eslint-disable-line this.setState({ year: '', @@ -64,15 +64,17 @@ class BillsSummaryTable extends Component { } deleteBillsSummary = id => { - this.props.deleteBillsSummary( - this.props.buildingId, - { id }, - ); - const billDataCopy = this.state.billData.filter(bill => bill.id !== id); - this.setState({ - billData: billDataCopy, - action: 'deleted', - }); + if (confirm('Are you sure to delete this bill?') === true) { + this.props.deleteBillsSummary( + this.props.buildingId, + { id }, + ); + const billDataCopy = this.state.billData.filter(bill => bill.id !== id); + this.setState({ + billData: billDataCopy, + action: 'deleted', + }); + } } handleOnChange = (event) => { diff --git a/src/containers/Blocnote/FinancialInputs/CashBalance.js b/src/containers/Blocnote/FinancialInputs/CashBalance.js index d5d7a448..eb910e3c 100644 --- a/src/containers/Blocnote/FinancialInputs/CashBalance.js +++ b/src/containers/Blocnote/FinancialInputs/CashBalance.js @@ -24,13 +24,17 @@ class CashBalance extends Component { } deleteRow = id => { - const cashBalanceCopy = this.state.cashBalance.filter((statement, index) => { - console.log(statement); // eslint-disable-line - return index !== id; - }); - this.setState({ cashBalance: cashBalanceCopy }, () => { - alert('Statement deleted!'); - }); + if (this.state.cashBalance.length === 1) { + alert('Sorry, you need at least one statement!'); + } else if (confirm('Are you sure to delete this statement?') === true) { + const cashBalanceCopy = this.state.cashBalance.filter((statement, index) => { + console.log(statement); // eslint-disable-line + return index !== id; + }); + this.setState({ cashBalance: cashBalanceCopy }, () => { + console.log('Statement deleted!'); // eslint-disable-line + }); + } } addRow = () => { diff --git a/src/containers/Blocnote/FinancialInputs/LoanOptions.js b/src/containers/Blocnote/FinancialInputs/LoanOptions.js index fff02cdd..fa6d6e4c 100644 --- a/src/containers/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/containers/Blocnote/FinancialInputs/LoanOptions.js @@ -30,13 +30,17 @@ class LoanOptions extends Component { } deleteRow = id => { - const loanOptionsCopy = this.state.loanOptions.filter((loanOption, index) => { - console.log(loanOption); // eslint-disable-line - return index !== id; - }); - this.setState({ loanOptions: loanOptionsCopy }, () => { - alert('Statement deleted!'); - }); + if (this.state.loanOptions.length === 1) { + alert('Sorry, you need at least one loan option!'); + } else if (confirm('Are you sure to delete this loan option?') === true) { + const loanOptionsCopy = this.state.loanOptions.filter((loanOption, index) => { + console.log(loanOption); // eslint-disable-line + return index !== id; + }); + this.setState({ loanOptions: loanOptionsCopy }, () => { + console.log('Statement deleted!'); // eslint-disable-line + }); + } } addRow = () => { @@ -100,7 +104,7 @@ class LoanOptions extends Component { return ( { - const liabilitiesCopy = this.state.liabilities.filter((liability, index) => { - console.log(liability); // eslint-disable-line - return index !== id; - }); - console.log(liabilitiesCopy); // eslint-disable-line - this.setState({ liabilities: liabilitiesCopy }, () => { - alert('Liability deleted!'); - }); + if (confirm('Are you sure to delete this liability?') === true) { + const liabilitiesCopy = this.state.liabilities.filter((liability, index) => { + console.log(liability); // eslint-disable-line + return index !== id; + }); + this.setState({ liabilities: liabilitiesCopy }, () => { + console.log('Liability deleted!'); // eslint-disable-line + }); + } } addRow = () => { -- GitLab From e08f94ee0908369ba544ab955c4a0c516596f424 Mon Sep 17 00:00:00 2001 From: akkking Date: Wed, 17 Apr 2019 18:23:57 -0400 Subject: [PATCH 47/79] Add Bills Overview updates --- .../FinancialInputs/FinanceOverview.js | 4 + src/containers/Blocnote/FinancialInputs.js | 19 +- .../FinancialInputs/\bIncomeStatements.js" | 257 +++++++++++++++++ .../Blocnote/FinancialInputs/BillsOverview.js | 271 ++++++++++++++++++ src/containers/Blocnote/actions.js | 13 + src/containers/Blocnote/constants.js | 7 + src/containers/Blocnote/index.js | 2 +- src/containers/Blocnote/reducer.js | 84 +++++- src/containers/Blocnote/sagas.js | 48 ++++ 9 files changed, 691 insertions(+), 14 deletions(-) create mode 100644 "src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" create mode 100644 src/containers/Blocnote/FinancialInputs/BillsOverview.js diff --git a/src/components/Blocnote/FinancialInputs/FinanceOverview.js b/src/components/Blocnote/FinancialInputs/FinanceOverview.js index 4dbebe15..11ade275 100644 --- a/src/components/Blocnote/FinancialInputs/FinanceOverview.js +++ b/src/components/Blocnote/FinancialInputs/FinanceOverview.js @@ -156,6 +156,7 @@ class FinanceOverview extends Component { } render() { + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const lineSpaceStyle = { textAlign: 'left' }; let mainContent = ''; @@ -176,6 +177,9 @@ class FinanceOverview extends Component { mainContent = (
    +

    + Financial Overview +

    diff --git a/src/containers/Blocnote/FinancialInputs.js b/src/containers/Blocnote/FinancialInputs.js index 95570317..cce7a8a1 100644 --- a/src/containers/Blocnote/FinancialInputs.js +++ b/src/containers/Blocnote/FinancialInputs.js @@ -11,15 +11,15 @@ import { loadBillsSummary, loadCashBalance, loadLoanOptions, loadCustomerPreference, loadIncomeStatement, loadLiabilities, createBillsSummary, updateBillsSummary, deleteBillsSummary, - updateCashBalance, + createBillsOverview, updateBillsOverview, updateCashBalance, updateLiabilities, updateLoanOptions, updateCustomerPreference, } from './actions'; import blocnoteProps from './propTypes'; import FinanceOverview from './../../components/Blocnote/FinancialInputs/FinanceOverview'; import EnergyBills from './../../components/Blocnote/FinancialInputs/EnergyBills'; import BillsSummary from './FinancialInputs/BillsSummary'; -import EnergyBillsOverview from './../../components/Blocnote/FinancialInputs/EnergyBillsOverview'; -import IncomeStatements from './../../components/Blocnote/FinancialInputs/IncomeStatements'; +import BillsOverview from './FinancialInputs/BillsOverview'; +import IncomeStatements from './FinancialInputs/IncomeStatements'; import CashBalance from './FinancialInputs/CashBalance'; import MortgageLiabilities from './FinancialInputs/MortgageLiabilities'; import LoanOptions from './FinancialInputs/LoanOptions'; @@ -149,10 +149,17 @@ class FinancialInputs extends Component { updateBillsSummary={this.props.updateBillsSummary} deleteBillsSummary={this.props.deleteBillsSummary} /> - { createBillsSummary, updateBillsSummary, deleteBillsSummary, + createBillsOverview, + updateBillsOverview, updateCashBalance, updateLiabilities, updateLoanOptions, diff --git "a/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" "b/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" new file mode 100644 index 00000000..096523ef --- /dev/null +++ "b/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" @@ -0,0 +1,257 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Dropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + Button, + Table, +} from 'reactstrap'; + + +class IncomeStatements extends Component { + constructor(props) { + super(props); + this.toggleGrowthRate = this.toggleGrowthRate.bind(this); + this.changeGrowthRate = this.changeGrowthRate.bind(this); + this.state = { + growthRateDropdownOpen: false, + growthRateDropdownValue: 'Growth Rate', + growthRateOptions: [ + { id: 'xx', key: 'xx', name: 'CAGR=1.58%' }, + { id: 'yy', key: 'yy', name: 'Average' }, + { id: '0.00', key: '0.00', name: '0%' }, + { id: '0.01', key: '0.01', name: '1%' }, + { id: '0.02', key: '0.02', name: '2%' }, + { id: '0.03', key: '0.03', name: '3%' }, + { id: '0.04', key: '0.04', name: '4%' }, + { id: '0.05', key: '0.05', name: '5%' }, + { id: '0.06', key: '0.06', name: '6%' }, + { id: '0.07', key: '0.07', name: '7%' }, + { id: '0.08', key: '0.08', name: '8%' }, + { id: '0.09', key: '0.09', name: '9%' }, + { id: '0.10', key: '0.10', name: '10%' }, + { id: '0.11', key: '0.11', name: '11%' }, + { id: '0.12', key: '0.12', name: '12%' }, + { id: '0.13', key: '0.13', name: '13%' }, + { id: '0.14', key: '0.14', name: '14%' }, + { id: '0.15', key: '0.15', name: '15%' }, + ], + }; + } + + toggleGrowthRate() { + this.setState({ + growthRateDropdownOpen: !this.state.growthRateDropdownOpen, + }); + } + + changeGrowthRate(e) { + this.setState({ growthRateDropDownValue: e.currentTarget.textContent }); + } + + buildHeader = (headerNames) => { + return [ + ...headerNames, + ...Object.keys(this.props.data.hist), + ...[this.props.data.future.year], + ...['Average'], + ].map((name, key) => { + return ( + {name} + ); + }); + } + + render() { + let header = []; + let rows = []; + + const columnKeys = [ + 'revenue', + 'utility_expense', + 'energy_opex', + 'electric_opex', + 'gas_opex', + 'oil_opex', + 'water_opex', + 'other_utility', + 'non_utility_expense', + 'net_non_energy_opex', + 'total_opex', + 'noi', + ]; + + const columnNames = { + revenue: 'Revenue', + utility_expense: 'Utility Expense', + energy_opex: 'Energy Expense', + electric_opex: 'Electric Bill', + gas_opex: 'Gas Bill', + oil_opex: 'Oil Bill', + water_opex: 'Water Bill', + other_utility: 'Other Utility Expense', + non_utility_expense: 'Non-Utility Operating Expense', + net_non_energy_opex: 'Net Non-Energy Expense', + total_opex: 'Total Expense', + noi: 'Net Operating Income', + }; + + const growthRateOptions = this.state.growthRateOptions.map(e => { + return ( + + {e.name} + + ); + }); + + if (this.props.data !== null) { + header = this.buildHeader(['Year']); + const histYears = Object.keys(this.props.data.hist).sort(); + + rows = columnKeys.map((columnKey, id) => { + const cells = [ + ...[columnNames[columnKey]], + ...histYears.map((histYear) => { + let cellValue = this.props.data.hist[histYear][columnKey]; + cellValue = Math.round(cellValue * 100) / 100; + cellValue = cellValue.toLocaleString(); + cellValue = `$${cellValue}`; + return cellValue; + }), + ...[this.props.data.future[columnKey]].map((amount) => { + let cellValue = amount; + cellValue = Math.round(cellValue * 100) / 100; + cellValue = cellValue.toLocaleString(); + cellValue = `$${cellValue}`; + return cellValue; + }), + ...Object.values([this.props.data.average[columnKey]]).map((amount) => { + let cellValue = amount; + cellValue = Math.round(cellValue * 100) / 100; + cellValue = cellValue.toLocaleString(); + cellValue = `$${cellValue}`; + return cellValue; + }), + ]; + + const cellsData = Object.values(cells).map((celldata, key) => { + return ( + + + {celldata} + + + ); + }); + + return ( + + {cellsData} + + ); + }); + } + + return ( +
    +

    + Income Statements (in $, End of Year) +

    +
    +
    + + + {this.state.growthRateDropdownValue} + + + {growthRateOptions} + + +
    +
    + +
    +
    +
    +
    + + + + {header} + + + + {rows} + +
    +
    +
    +
    + ); + } +} + +IncomeStatements.propTypes = { + blockStyle: PropTypes.shape({ + marginBottom: PropTypes.string, + }), + headerStyle: PropTypes.shape({ + textAlign: PropTypes.string, + marginBottom: PropTypes.string, + }), + data: PropTypes.shape({ + average: PropTypes.shape({ + electric_opex: PropTypes.number, + energy_opex: PropTypes.number, + gas_opex: PropTypes.number, + net_non_energy_opex: PropTypes.number, + noi: PropTypes.number, + non_utility_expense: PropTypes.number, + oil_opex: PropTypes.number, + other_utility: PropTypes.number, + revenue: PropTypes.number, + total_opex: PropTypes.number, + utility_expense: PropTypes.number, + water_opex: PropTypes.number, + year: null, + }), + cagr: PropTypes.number, + future: PropTypes.shape({ + electric_opex: PropTypes.number, + energy_opex: PropTypes.number, + gas_opex: PropTypes.number, + net_non_energy_opex: PropTypes.number, + noi: PropTypes.number, + non_utility_expense: PropTypes.number, + oil_opex: PropTypes.number, + other_utility: PropTypes.number, + revenue: PropTypes.number, + total_opex: PropTypes.number, + utility_expense: PropTypes.number, + water_opex: PropTypes.number, + year: null, + }), + growth_rate: PropTypes.number, + hist: PropTypes.objectOf, + result: PropTypes.arrayOf(PropTypes.shape({ + year: PropTypes.string, + revenue: PropTypes.string, + utility_expense: PropTypes.string, + non_utility_operating_expense: PropTypes.string, + })), + }), +}; + +export default IncomeStatements; diff --git a/src/containers/Blocnote/FinancialInputs/BillsOverview.js b/src/containers/Blocnote/FinancialInputs/BillsOverview.js new file mode 100644 index 00000000..897485eb --- /dev/null +++ b/src/containers/Blocnote/FinancialInputs/BillsOverview.js @@ -0,0 +1,271 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Dropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + Button, + Table, +} from 'reactstrap'; +import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; + + +class BillsOverview extends Component { + constructor(props) { + super(props); + this.toggleEstimation = this.toggleEstimation.bind(this); + this.changeEstimation = this.changeEstimation.bind(this); + const data = {}; + ['electric', 'water', 'gas', 'oil'].forEach((billName) => { + Object.entries(this.props.data[billName]).forEach((bill) => { + const keyName = `${billName}-value-${bill[0]}`; + data[keyName] = bill[1]; + }); + }); + // console.log(data); // eslint-disable-line + this.state = { + estimationDropdownOpen: false, + estimationDropDownValue: 'Select Estimation', + estimationOptions: [ + { id: 'RoughEstimation', key: 'RoughEstimation', name: 'Rough Estimation' }, + { id: 'Fancy Estimation', key: 'FancyEstimation', name: 'Fancy Estimation' }, + ], + action: null, + postBills: data, + }; + } + + toggleEstimation() { + this.setState({ + estimationDropdownOpen: !this.state.estimationDropdownOpen, + }); + } + + changeEstimation(e) { + this.setState({ estimationDropDownValue: e.currentTarget.textContent }); + } + + handleCreateBillsOverview = () => { + this.props.createBillsOverview( + this.props.buildingId, + this.state.postBills, + ); + this.setState({ action: 'created' }); + } + + handleUpdateBillsOverview = () => { + const data = {}; + data['Estimation Model'] = this.state.estimationDropDownValue; + + if (data['Estimation Model'] === 'Select Estimation') { + alert('Please select an estimation model'); + } else { + this.props.updateBillsOverview( + this.props.buildingId, + data, + ); + this.setState({ action: 'updated' }); + } + } + + buildHeader = (headerNames) => { + return [...headerNames, ...Object.keys(this.props.data.electric)].map((name, key) => { + return ( + + {name} + + ); + }); + } + + buildFooter = (footerNames) => { + const cellValues = Object.values(this.props.data.total_annual_charge).map((amount) => { + let cellValue = amount; + cellValue = Math.round(cellValue * 100) / 100; + cellValue = cellValue.toLocaleString(); + return `$${cellValue}`; + }); + return [...footerNames, ...cellValues].map((name, key) => { + return ( + + {name} + + ); + }); + } + + render() { + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; + const validBillNames = ['electric', 'water', 'gas', 'oil']; + const estimationOptions = this.state.estimationOptions.map(e => { + return ( + + {e.name} + + ); + }); + let header = []; + let footer = []; + let rows = []; + + if (this.props.data !== null) { + const headerNames = ['Data Source', 'Utility']; + const footerNames = ['', 'Total Annual Charge']; + header = this.buildHeader(headerNames); + footer = this.buildFooter(footerNames); + + rows = Object.keys(this.props.data) + .filter(billName => validBillNames.includes(billName)) + .map((billName, trKey) => { + const cells = [ + ...['Annual Estimate', billName.charAt(0).toUpperCase() + billName.slice(1)], + ...Object.values(this.props.data[billName]), + ]; + const cellsData = Object.values(cells).map((amount, tdKey) => { + let cellValue = amount; + + if (!isNaN(cellValue)) { + cellValue = Math.round(cellValue * 100) / 100; + cellValue = cellValue.toLocaleString(); + cellValue = `$${cellValue}`; + } + + return ( + + + {cellValue} + + + ); + }); + + return ( + + {cellsData} + + ); + }); + } + + let messageStyle = {}; + let messageContent = null; + + if (this.props.loading) { + messageContent = 'Processing ...'; + messageStyle = this.props.defaultMessageStyle; + } + + if (this.props.error && typeof this.props.error === 'object') { + messageContent = this.props.error.response.statusText; + messageStyle = this.props.errorMessageStyle; + } + + if (!this.props.error && !this.props.loading + && this.props.data !== null + && this.state.action !== null) { + messageContent = this.state.action.charAt(0).toUpperCase() + this.state.action.slice(1); + messageStyle = this.props.successMessageStyle; + } + + return ( +
    +

    + Energy Bills Overview +

    +
    +
    + + + {this.state.estimationDropDownValue} + + + {estimationOptions} + + +
    +
    + +
    +
    + +
    +
    +
    +
    + + + + {header} + + + + {rows} + {footer} + +
    +
    +
    +
    +
    + +
    +
    +
    + ); + } +} + +BillsOverview.propTypes = { + data: PropTypes.shape({ + electric: PropTypes.objectOf, + electric_user: PropTypes.string, + gas: PropTypes.objectOf, + gas_user: PropTypes.string, + oil: PropTypes.objectOf, + oil_user: PropTypes.string, + water: PropTypes.objectOf, + water_user: PropTypes.string, + total_annual_charge: PropTypes.objectOf, + }), + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + buildingId: PropTypes.number, + createBillsOverview: PropTypes.func, + updateBillsOverview: PropTypes.func, + error: PropTypes.bool, + loading: PropTypes.bool, +}; + +export default BillsOverview; diff --git a/src/containers/Blocnote/actions.js b/src/containers/Blocnote/actions.js index fa0b3772..fac59975 100644 --- a/src/containers/Blocnote/actions.js +++ b/src/containers/Blocnote/actions.js @@ -41,6 +41,12 @@ import { DELETE_BILLS_SUMMARY_REQUESTED, DELETE_BILLS_SUMMARY_SUCCEEDED, DELETE_BILLS_SUMMARY_FAILED, + CREATE_BILLS_OVERVIEW_REQUESTED, + CREATE_BILLS_OVERVIEW_SUCCEEDED, + CREATE_BILLS_OVERVIEW_FAILED, + UPDATE_BILLS_OVERVIEW_REQUESTED, + UPDATE_BILLS_OVERVIEW_SUCCEEDED, + UPDATE_BILLS_OVERVIEW_FAILED, UPDATE_CASH_BALANCE_REQUESTED, UPDATE_CASH_BALANCE_SUCCEEDED, UPDATE_CASH_BALANCE_FAILED, @@ -102,6 +108,13 @@ export const deleteBillsSummary = makeActionCreator(DELETE_BILLS_SUMMARY_REQUEST export const deleteBillsSummarySucceeded = makeActionCreator(DELETE_BILLS_SUMMARY_SUCCEEDED, 'instance'); export const deleteBillsSummaryFailed = makeActionCreator(DELETE_BILLS_SUMMARY_FAILED, 'error'); +export const createBillsOverview = makeActionCreator(CREATE_BILLS_OVERVIEW_REQUESTED, 'buildingId', 'payload'); +export const createBillsOverviewSucceeded = makeActionCreator(CREATE_BILLS_OVERVIEW_SUCCEEDED, 'instance'); +export const createBillsOverviewFailed = makeActionCreator(CREATE_BILLS_OVERVIEW_FAILED, 'error'); +export const updateBillsOverview = makeActionCreator(UPDATE_BILLS_OVERVIEW_REQUESTED, 'buildingId', 'payload'); +export const updateBillsOverviewSucceeded = makeActionCreator(UPDATE_BILLS_OVERVIEW_SUCCEEDED, 'instance'); +export const updateBillsOverviewFailed = makeActionCreator(UPDATE_BILLS_OVERVIEW_FAILED, 'error'); + export const updateCashBalance = makeActionCreator(UPDATE_CASH_BALANCE_REQUESTED, 'buildingId', 'payload'); export const updateCashBalanceSucceeded = makeActionCreator(UPDATE_CASH_BALANCE_SUCCEEDED, 'instance'); export const updateCashBalanceFailed = makeActionCreator(UPDATE_CASH_BALANCE_FAILED, 'error'); diff --git a/src/containers/Blocnote/constants.js b/src/containers/Blocnote/constants.js index 261a1d63..e17edf22 100644 --- a/src/containers/Blocnote/constants.js +++ b/src/containers/Blocnote/constants.js @@ -40,6 +40,13 @@ export const DELETE_BILLS_SUMMARY_REQUESTED = 'DELETE_BILLS_SUMMARY_REQUESTED'; export const DELETE_BILLS_SUMMARY_SUCCEEDED = 'DELETE_BILLS_SUMMARY_SUCCEEDED'; export const DELETE_BILLS_SUMMARY_FAILED = 'DELETE_BILLS_SUMMARY_FAILED'; +export const CREATE_BILLS_OVERVIEW_REQUESTED = 'CREATE_BILLS_OVERVIEW_REQUESTED'; +export const CREATE_BILLS_OVERVIEW_SUCCEEDED = 'CREATE_BILLS_OVERVIEW_SUCCEEDED'; +export const CREATE_BILLS_OVERVIEW_FAILED = 'CREATE_BILLS_OVERVIEW_FAILED'; +export const UPDATE_BILLS_OVERVIEW_REQUESTED = 'UPDATE_BILLS_OVERVIEW_REQUESTED'; +export const UPDATE_BILLS_OVERVIEW_SUCCEEDED = 'UPDATE_BILLS_OVERVIEW_SUCCEEDED'; +export const UPDATE_BILLS_OVERVIEW_FAILED = 'UPDATE_BILLS_OVERVIEW_FAILED'; + export const UPDATE_CASH_BALANCE_REQUESTED = 'UPDATE_CASH_BALANCE_REQUESTED'; export const UPDATE_CASH_BALANCE_SUCCEEDED = 'UPDATE_CASH_BALANCE_SUCCEEDED'; export const UPDATE_CASH_BALANCE_FAILED = 'UPDATE_CASH_BALANCE_FAILED'; diff --git a/src/containers/Blocnote/index.js b/src/containers/Blocnote/index.js index 7c47731e..0c977df3 100644 --- a/src/containers/Blocnote/index.js +++ b/src/containers/Blocnote/index.js @@ -42,7 +42,7 @@ class Blocnote extends Component { Preliminary Finance ); dataDic.preliminaryFinance.status = (OK); - dataDic.budgetSimilatorData.name = ( + dataDic.budgetSimilator.name = ( Budget Simulator ); dataDic.budgetSimilator.status = (OK); diff --git a/src/containers/Blocnote/reducer.js b/src/containers/Blocnote/reducer.js index 897f3494..dd360b48 100644 --- a/src/containers/Blocnote/reducer.js +++ b/src/containers/Blocnote/reducer.js @@ -41,6 +41,12 @@ import { DELETE_BILLS_SUMMARY_REQUESTED, DELETE_BILLS_SUMMARY_SUCCEEDED, DELETE_BILLS_SUMMARY_FAILED, + CREATE_BILLS_OVERVIEW_REQUESTED, + CREATE_BILLS_OVERVIEW_SUCCEEDED, + CREATE_BILLS_OVERVIEW_FAILED, + UPDATE_BILLS_OVERVIEW_REQUESTED, + UPDATE_BILLS_OVERVIEW_SUCCEEDED, + UPDATE_BILLS_OVERVIEW_FAILED, UPDATE_CASH_BALANCE_REQUESTED, UPDATE_CASH_BALANCE_SUCCEEDED, UPDATE_CASH_BALANCE_FAILED, @@ -269,15 +275,15 @@ export default function (state = blocnoteInitialState, action) { case CREATE_BILLS_SUMMARY_SUCCEEDED: // const utilityType = action.instance.utility_type; console.log(state.billsSummary.data); // eslint-disable-line - console.log([ - ...state.billsSummary.data, - { - id: action.result.id, - utility_type: action.instance.utility_type, - year: action.instance.year, - charge: action.instance.charge, - }, - ]); // eslint-disable-line + // console.log([ + // ...state.billsSummary.data, + // { + // id: action.result.id, + // utility_type: action.instance.utility_type, + // year: action.instance.year, + // charge: action.instance.charge, + // }, + // ]); // eslint-disable-line return { ...state, @@ -512,6 +518,66 @@ export default function (state = blocnoteInitialState, action) { }, }; + case CREATE_BILLS_OVERVIEW_REQUESTED: + return { + ...state, + billsOverview: { + ...state.billsOverview, + loading: true, + error: false, + }, + }; + + case CREATE_BILLS_OVERVIEW_SUCCEEDED: + return { + ...state, + billsOverview: { + ...state.billsOverview, + loading: false, + error: false, + }, + }; + + case CREATE_BILLS_OVERVIEW_FAILED: + return { + ...state, + billsOverview: { + loading: false, + error: action.error, + }, + }; + + case UPDATE_BILLS_OVERVIEW_REQUESTED: + return { + ...state, + billsOverview: { + ...state.billsOverview, + loading: true, + error: false, + }, + }; + + case UPDATE_BILLS_OVERVIEW_SUCCEEDED: + console.log(action); // eslint-disable-line + console.log(state); // eslint-disable-line + return { + ...state, + billsOverview: { + ...state.billsOverview, + loading: false, + error: false, + }, + }; + + case UPDATE_BILLS_OVERVIEW_FAILED: + return { ...state, + billsOverview: { + ...state.billsOverview, + loading: false, + error: action.error, + }, + }; + case UPDATE_CASH_BALANCE_REQUESTED: return { ...state, diff --git a/src/containers/Blocnote/sagas.js b/src/containers/Blocnote/sagas.js index 12415b9e..318a030b 100644 --- a/src/containers/Blocnote/sagas.js +++ b/src/containers/Blocnote/sagas.js @@ -18,6 +18,8 @@ import { CREATE_BILLS_SUMMARY_REQUESTED, UPDATE_BILLS_SUMMARY_REQUESTED, DELETE_BILLS_SUMMARY_REQUESTED, + CREATE_BILLS_OVERVIEW_REQUESTED, + UPDATE_BILLS_OVERVIEW_REQUESTED, UPDATE_CASH_BALANCE_REQUESTED, UPDATE_LIABILITIES_REQUESTED, UPDATE_LOAN_OPTIONS_REQUESTED, @@ -53,6 +55,10 @@ import { updateBillsSummaryFailed, deleteBillsSummarySucceeded, deleteBillsSummaryFailed, + createBillsOverviewSucceeded, + createBillsOverviewFailed, + updateBillsOverviewSucceeded, + updateBillsOverviewFailed, updateCashBalanceSucceeded, updateCashBalanceFailed, updateLiabilitiesSucceeded, @@ -190,6 +196,46 @@ function* deleteBillsSummary(action) { } } +function* createBillsOverview(action) { + console.log(action); // eslint-disable-line + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/bills-overview/`; + const res = yield call( + request, + SagaRequests.generateURL(url, action), + { + method: 'POST', + headers: getHeaders(), + body: JSON.stringify(action.payload), + } + ); + + if (!res.err) { + console.log(res); // eslint-disable-line + yield put(createBillsOverviewSucceeded(action.payload, res)); + } else { + yield put(createBillsOverviewFailed(res.err)); + } +} + +function* updateBillsOverview(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/bills-overview/`; + const res = yield call( + request, + SagaRequests.generateURL(url, action), + { + method: 'PUT', + headers: getHeaders(), + body: JSON.stringify(action.payload), + } + ); + + if (!res.err) { + yield put(updateBillsOverviewSucceeded(action.payload)); + } else { + yield put(updateBillsOverviewFailed(res.err)); + } +} + function* updateCashBalance(action) { const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/cash-balance/`; const res = yield call( @@ -282,6 +328,8 @@ function* blocnoteWatcher() { yield takeEvery(CREATE_BILLS_SUMMARY_REQUESTED, createBillsSummary); yield takeEvery(UPDATE_BILLS_SUMMARY_REQUESTED, updateBillsSummary); yield takeEvery(DELETE_BILLS_SUMMARY_REQUESTED, deleteBillsSummary); + yield takeEvery(CREATE_BILLS_OVERVIEW_REQUESTED, createBillsOverview); + yield takeEvery(UPDATE_BILLS_OVERVIEW_REQUESTED, updateBillsOverview); yield takeEvery(UPDATE_CASH_BALANCE_REQUESTED, updateCashBalance); yield takeEvery(UPDATE_LIABILITIES_REQUESTED, updateLiabilities); yield takeEvery(UPDATE_LOAN_OPTIONS_REQUESTED, updateLoanOptions); -- GitLab From 8241a5911eb9b62cf664a0306edaf1d02596bb73 Mon Sep 17 00:00:00 2001 From: akkking Date: Thu, 18 Apr 2019 00:30:01 -0400 Subject: [PATCH 48/79] Fix income statement dropdown issue --- .../FinancialInputs/\bIncomeStatements.js" | 48 +++++++++---------- .../Blocnote/FinancialInputs/BillsOverview.js | 7 ++- 2 files changed, 30 insertions(+), 25 deletions(-) diff --git "a/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" "b/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" index 096523ef..4db65f5a 100644 --- "a/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" +++ "b/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" @@ -16,39 +16,39 @@ class IncomeStatements extends Component { this.toggleGrowthRate = this.toggleGrowthRate.bind(this); this.changeGrowthRate = this.changeGrowthRate.bind(this); this.state = { - growthRateDropdownOpen: false, - growthRateDropdownValue: 'Growth Rate', + GRDropdownOpen: false, + GRDropdownValue: 'Select Growth Rate', growthRateOptions: [ - { id: 'xx', key: 'xx', name: 'CAGR=1.58%' }, - { id: 'yy', key: 'yy', name: 'Average' }, - { id: '0.00', key: '0.00', name: '0%' }, - { id: '0.01', key: '0.01', name: '1%' }, - { id: '0.02', key: '0.02', name: '2%' }, - { id: '0.03', key: '0.03', name: '3%' }, - { id: '0.04', key: '0.04', name: '4%' }, - { id: '0.05', key: '0.05', name: '5%' }, - { id: '0.06', key: '0.06', name: '6%' }, - { id: '0.07', key: '0.07', name: '7%' }, - { id: '0.08', key: '0.08', name: '8%' }, - { id: '0.09', key: '0.09', name: '9%' }, - { id: '0.10', key: '0.10', name: '10%' }, - { id: '0.11', key: '0.11', name: '11%' }, - { id: '0.12', key: '0.12', name: '12%' }, - { id: '0.13', key: '0.13', name: '13%' }, - { id: '0.14', key: '0.14', name: '14%' }, - { id: '0.15', key: '0.15', name: '15%' }, + { id: '-2', key: '-2', name: 'CAGR=1.58%' }, + { id: '-1', key: '-1', name: 'Average' }, + { id: '0', key: '0', name: '0%' }, + { id: '1', key: '1', name: '1%' }, + { id: '2', key: '2', name: '2%' }, + { id: '3', key: '3', name: '3%' }, + { id: '4', key: '4', name: '4%' }, + { id: '5', key: '5', name: '5%' }, + { id: '6', key: '6', name: '6%' }, + { id: '7', key: '7', name: '7%' }, + { id: '8', key: '8', name: '8%' }, + { id: '9', key: '9', name: '9%' }, + { id: '10', key: '10', name: '10%' }, + { id: '11', key: '11', name: '11%' }, + { id: '12', key: '12', name: '12%' }, + { id: '13', key: '13', name: '13%' }, + { id: '14', key: '14', name: '14%' }, + { id: '15', key: '15', name: '15%' }, ], }; } toggleGrowthRate() { this.setState({ - growthRateDropdownOpen: !this.state.growthRateDropdownOpen, + GRDropdownOpen: !this.state.GRDropdownOpen, }); } changeGrowthRate(e) { - this.setState({ growthRateDropDownValue: e.currentTarget.textContent }); + this.setState({ GRDropdownValue: e.currentTarget.textContent }); } buildHeader = (headerNames) => { @@ -166,12 +166,12 @@ class IncomeStatements extends Component {
    - {this.state.growthRateDropdownValue} + {this.state.GRDropdownValue} {growthRateOptions} diff --git a/src/containers/Blocnote/FinancialInputs/BillsOverview.js b/src/containers/Blocnote/FinancialInputs/BillsOverview.js index 897485eb..4d689944 100644 --- a/src/containers/Blocnote/FinancialInputs/BillsOverview.js +++ b/src/containers/Blocnote/FinancialInputs/BillsOverview.js @@ -34,6 +34,7 @@ class BillsOverview extends Component { action: null, postBills: data, }; + console.log(this.state.estimationDropDownValue); // eslint-disable-line } toggleEstimation() { @@ -179,7 +180,11 @@ class BillsOverview extends Component {

    - + {this.state.estimationDropDownValue} -- GitLab From fcda2feb225946739a29cc7cbde5d385125acbc2 Mon Sep 17 00:00:00 2001 From: akkking Date: Thu, 18 Apr 2019 01:36:12 -0400 Subject: [PATCH 49/79] Update text to input for history years --- .../FinancialInputs/\bIncomeStatements.js" | 61 ++++++++++++++++--- 1 file changed, 52 insertions(+), 9 deletions(-) diff --git "a/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" "b/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" index 4db65f5a..9510cb23 100644 --- "a/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" +++ "b/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" @@ -6,6 +6,9 @@ import { DropdownMenu, DropdownItem, Button, + Input, + InputGroup, + InputGroupAddon, Table, } from 'reactstrap'; @@ -15,6 +18,7 @@ class IncomeStatements extends Component { super(props); this.toggleGrowthRate = this.toggleGrowthRate.bind(this); this.changeGrowthRate = this.changeGrowthRate.bind(this); + this.handleOnChange = this.handleOnChange.bind(this); this.state = { GRDropdownOpen: false, GRDropdownValue: 'Select Growth Rate', @@ -38,9 +42,14 @@ class IncomeStatements extends Component { { id: '14', key: '14', name: '14%' }, { id: '15', key: '15', name: '15%' }, ], + incomeStatements: props.data, }; } + handleOnChange = (event) => { + this.setState({ [event.target.name]: event.target.value }); + } + toggleGrowthRate() { this.setState({ GRDropdownOpen: !this.state.GRDropdownOpen, @@ -52,14 +61,30 @@ class IncomeStatements extends Component { } buildHeader = (headerNames) => { + const histYears = Object.keys(this.state.incomeStatements.hist); return [ ...headerNames, - ...Object.keys(this.props.data.hist), - ...[this.props.data.future.year], + ...histYears, + ...[this.state.incomeStatements.future.year], ...['Average'], - ].map((name, key) => { + ].map((headerName, key) => { + if (histYears.includes(headerName)) { + const inputName = `Year-${key}`; + return ( + + + + ); + } return ( - {name} + {headerName} ); }); } @@ -110,28 +135,46 @@ class IncomeStatements extends Component { ); }); - if (this.props.data !== null) { + if (this.state.incomeStatements !== null) { header = this.buildHeader(['Year']); - const histYears = Object.keys(this.props.data.hist).sort(); + const histYears = Object.keys(this.state.incomeStatements.hist).sort(); rows = columnKeys.map((columnKey, id) => { const cells = [ ...[columnNames[columnKey]], ...histYears.map((histYear) => { - let cellValue = this.props.data.hist[histYear][columnKey]; + let cellValue = this.state.incomeStatements.hist[histYear][columnKey]; cellValue = Math.round(cellValue * 100) / 100; + if (['utility_expense', 'revenue', 'non_utility_expense'].includes(columnKey)) { + const inputName = `${columnKey}-${id}`; + return ( + + + $ + + + + ); + } cellValue = cellValue.toLocaleString(); cellValue = `$${cellValue}`; return cellValue; }), - ...[this.props.data.future[columnKey]].map((amount) => { + ...[this.state.incomeStatements.future[columnKey]].map((amount) => { let cellValue = amount; cellValue = Math.round(cellValue * 100) / 100; cellValue = cellValue.toLocaleString(); cellValue = `$${cellValue}`; return cellValue; }), - ...Object.values([this.props.data.average[columnKey]]).map((amount) => { + ...Object.values([this.state.incomeStatements.average[columnKey]]).map((amount) => { let cellValue = amount; cellValue = Math.round(cellValue * 100) / 100; cellValue = cellValue.toLocaleString(); -- GitLab From 3b7fcf4fe92e63a75d460813b3901597b524aafd Mon Sep 17 00:00:00 2001 From: akkking Date: Thu, 18 Apr 2019 14:59:05 -0400 Subject: [PATCH 50/79] Add income statements updates --- src/containers/Blocnote/FinancialInputs.js | 10 +- .../FinancialInputs/\bIncomeStatements.js" | 120 +++++++++++++++--- .../Blocnote/FinancialInputs/BillsOverview.js | 1 - src/containers/Blocnote/actions.js | 7 + src/containers/Blocnote/constants.js | 4 + src/containers/Blocnote/reducer.js | 34 +++++ src/containers/Blocnote/sagas.js | 23 ++++ 7 files changed, 177 insertions(+), 22 deletions(-) diff --git a/src/containers/Blocnote/FinancialInputs.js b/src/containers/Blocnote/FinancialInputs.js index cce7a8a1..83ffcc85 100644 --- a/src/containers/Blocnote/FinancialInputs.js +++ b/src/containers/Blocnote/FinancialInputs.js @@ -11,7 +11,7 @@ import { loadBillsSummary, loadCashBalance, loadLoanOptions, loadCustomerPreference, loadIncomeStatement, loadLiabilities, createBillsSummary, updateBillsSummary, deleteBillsSummary, - createBillsOverview, updateBillsOverview, updateCashBalance, + createBillsOverview, updateBillsOverview, updateIncomeStatements, updateCashBalance, updateLiabilities, updateLoanOptions, updateCustomerPreference, } from './actions'; import blocnoteProps from './propTypes'; @@ -164,7 +164,13 @@ class FinancialInputs extends Component { { deleteBillsSummary, createBillsOverview, updateBillsOverview, + updateIncomeStatements, updateCashBalance, updateLiabilities, updateLoanOptions, diff --git "a/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" "b/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" index 9510cb23..a6dc42c4 100644 --- "a/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" +++ "b/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" @@ -11,6 +11,7 @@ import { InputGroupAddon, Table, } from 'reactstrap'; +import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; class IncomeStatements extends Component { @@ -19,7 +20,8 @@ class IncomeStatements extends Component { this.toggleGrowthRate = this.toggleGrowthRate.bind(this); this.changeGrowthRate = this.changeGrowthRate.bind(this); this.handleOnChange = this.handleOnChange.bind(this); - this.state = { + + const obj = { GRDropdownOpen: false, GRDropdownValue: 'Select Growth Rate', growthRateOptions: [ @@ -43,10 +45,22 @@ class IncomeStatements extends Component { { id: '15', key: '15', name: '15%' }, ], incomeStatements: props.data, + action: null, }; + + const histYears = {}; + Object.keys(props.data.hist).forEach((year, id) => { + const histYear = `Year-${id + 1}`; + histYears[histYear] = parseInt(year, 10); + }); + + this.state = Object.assign(obj, histYears); + console.log(this.state); // eslint-disable-line } handleOnChange = (event) => { + console.log(event.target.name); // eslint-disable-line + console.log(event.target.value); // eslint-disable-line this.setState({ [event.target.name]: event.target.value }); } @@ -60,21 +74,22 @@ class IncomeStatements extends Component { this.setState({ GRDropdownValue: e.currentTarget.textContent }); } - buildHeader = (headerNames) => { - const histYears = Object.keys(this.state.incomeStatements.hist); - return [ - ...headerNames, - ...histYears, - ...[this.state.incomeStatements.future.year], - ...['Average'], - ].map((headerName, key) => { - if (histYears.includes(headerName)) { - const inputName = `Year-${key}`; - return ( + buildHeader = () => { + const headers = []; + const year = 'year'; + headers.push( + + Year + + ); + + Object.entries(this.state).forEach((entry, key) => { + if (entry[0].includes('Year')) { + headers.push( ); } - return ( - {headerName} - ); }); + const futureYear = this.state.incomeStatements.future.year; + headers.push( + + {futureYear} + + ); + const average = 'average'; + headers.push( + + Average + + ); + return headers; + } + + handleUpdateIncomeStatements = () => { + this.props.updateIncomeStatements( + this.props.buildingId, + this.state.incomeStatements + ); + this.setState({ updated: true }); } render() { @@ -136,7 +169,7 @@ class IncomeStatements extends Component { }); if (this.state.incomeStatements !== null) { - header = this.buildHeader(['Year']); + header = this.buildHeader(); const histYears = Object.keys(this.state.incomeStatements.hist).sort(); rows = columnKeys.map((columnKey, id) => { @@ -146,7 +179,7 @@ class IncomeStatements extends Component { let cellValue = this.state.incomeStatements.hist[histYear][columnKey]; cellValue = Math.round(cellValue * 100) / 100; if (['utility_expense', 'revenue', 'non_utility_expense'].includes(columnKey)) { - const inputName = `${columnKey}-${id}`; + const inputName = `${columnKey}${id}`; return ( @@ -201,6 +234,26 @@ class IncomeStatements extends Component { }); } + let messageStyle = {}; + let messageContent = null; + + if (this.props.loading) { + messageContent = 'Processing ...'; + messageStyle = this.props.defaultMessageStyle; + } + + if (this.props.error && typeof this.props.error === 'object') { + messageContent = this.props.error.response.statusText; + messageStyle = this.props.errorMessageStyle; + } + + if (!this.props.error && !this.props.loading + && this.props.data !== null + && this.state.action !== null) { + messageContent = this.state.action.charAt(0).toUpperCase() + this.state.action.slice(1); + messageStyle = this.props.successMessageStyle; + } + return (

    @@ -222,7 +275,15 @@ class IncomeStatements extends Component {

    -
    @@ -254,6 +315,7 @@ IncomeStatements.propTypes = { textAlign: PropTypes.string, marginBottom: PropTypes.string, }), + buildingId: PropTypes.number, data: PropTypes.shape({ average: PropTypes.shape({ electric_opex: PropTypes.number, @@ -295,6 +357,24 @@ IncomeStatements.propTypes = { non_utility_operating_expense: PropTypes.string, })), }), + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + error: PropTypes.bool, + loading: PropTypes.bool, + updateIncomeStatements: PropTypes.func, }; export default IncomeStatements; diff --git a/src/containers/Blocnote/FinancialInputs/BillsOverview.js b/src/containers/Blocnote/FinancialInputs/BillsOverview.js index 4d689944..801d74de 100644 --- a/src/containers/Blocnote/FinancialInputs/BillsOverview.js +++ b/src/containers/Blocnote/FinancialInputs/BillsOverview.js @@ -34,7 +34,6 @@ class BillsOverview extends Component { action: null, postBills: data, }; - console.log(this.state.estimationDropDownValue); // eslint-disable-line } toggleEstimation() { diff --git a/src/containers/Blocnote/actions.js b/src/containers/Blocnote/actions.js index fac59975..5435678a 100644 --- a/src/containers/Blocnote/actions.js +++ b/src/containers/Blocnote/actions.js @@ -47,6 +47,9 @@ import { UPDATE_BILLS_OVERVIEW_REQUESTED, UPDATE_BILLS_OVERVIEW_SUCCEEDED, UPDATE_BILLS_OVERVIEW_FAILED, + UPDATE_INCOME_STATEMENTS_REQUESTED, + UPDATE_INCOME_STATEMENTS_SUCCEEDED, + UPDATE_INCOME_STATEMENTS_FAILED, UPDATE_CASH_BALANCE_REQUESTED, UPDATE_CASH_BALANCE_SUCCEEDED, UPDATE_CASH_BALANCE_FAILED, @@ -115,6 +118,10 @@ export const updateBillsOverview = makeActionCreator(UPDATE_BILLS_OVERVIEW_REQUE export const updateBillsOverviewSucceeded = makeActionCreator(UPDATE_BILLS_OVERVIEW_SUCCEEDED, 'instance'); export const updateBillsOverviewFailed = makeActionCreator(UPDATE_BILLS_OVERVIEW_FAILED, 'error'); +export const updateIncomeStatements = makeActionCreator(UPDATE_INCOME_STATEMENTS_REQUESTED, 'buildingId'); +export const updateIncomeStatementsSucceeded = makeActionCreator(UPDATE_INCOME_STATEMENTS_SUCCEEDED, 'instance'); +export const updateIncomeStatementsFailed = makeActionCreator(UPDATE_INCOME_STATEMENTS_FAILED, 'error'); + export const updateCashBalance = makeActionCreator(UPDATE_CASH_BALANCE_REQUESTED, 'buildingId', 'payload'); export const updateCashBalanceSucceeded = makeActionCreator(UPDATE_CASH_BALANCE_SUCCEEDED, 'instance'); export const updateCashBalanceFailed = makeActionCreator(UPDATE_CASH_BALANCE_FAILED, 'error'); diff --git a/src/containers/Blocnote/constants.js b/src/containers/Blocnote/constants.js index e17edf22..2019025d 100644 --- a/src/containers/Blocnote/constants.js +++ b/src/containers/Blocnote/constants.js @@ -47,6 +47,10 @@ export const UPDATE_BILLS_OVERVIEW_REQUESTED = 'UPDATE_BILLS_OVERVIEW_REQUESTED' export const UPDATE_BILLS_OVERVIEW_SUCCEEDED = 'UPDATE_BILLS_OVERVIEW_SUCCEEDED'; export const UPDATE_BILLS_OVERVIEW_FAILED = 'UPDATE_BILLS_OVERVIEW_FAILED'; +export const UPDATE_INCOME_STATEMENTS_REQUESTED = 'UPDATE_INCOME_STATEMENTS_REQUESTED'; +export const UPDATE_INCOME_STATEMENTS_SUCCEEDED = 'UPDATE_INCOME_STATEMENTS_SUCCEEDED'; +export const UPDATE_INCOME_STATEMENTS_FAILED = 'UPDATE_INCOME_STATEMENTS_FAILED'; + export const UPDATE_CASH_BALANCE_REQUESTED = 'UPDATE_CASH_BALANCE_REQUESTED'; export const UPDATE_CASH_BALANCE_SUCCEEDED = 'UPDATE_CASH_BALANCE_SUCCEEDED'; export const UPDATE_CASH_BALANCE_FAILED = 'UPDATE_CASH_BALANCE_FAILED'; diff --git a/src/containers/Blocnote/reducer.js b/src/containers/Blocnote/reducer.js index dd360b48..36457984 100644 --- a/src/containers/Blocnote/reducer.js +++ b/src/containers/Blocnote/reducer.js @@ -47,6 +47,9 @@ import { UPDATE_BILLS_OVERVIEW_REQUESTED, UPDATE_BILLS_OVERVIEW_SUCCEEDED, UPDATE_BILLS_OVERVIEW_FAILED, + UPDATE_INCOME_STATEMENTS_REQUESTED, + UPDATE_INCOME_STATEMENTS_SUCCEEDED, + UPDATE_INCOME_STATEMENTS_FAILED, UPDATE_CASH_BALANCE_REQUESTED, UPDATE_CASH_BALANCE_SUCCEEDED, UPDATE_CASH_BALANCE_FAILED, @@ -578,6 +581,37 @@ export default function (state = blocnoteInitialState, action) { }, }; + case UPDATE_INCOME_STATEMENTS_REQUESTED: + return { + ...state, + incomeStatement: { + ...state.incomeStatement, + loading: true, + error: false, + }, + }; + + case UPDATE_INCOME_STATEMENTS_SUCCEEDED: + console.log(action); // eslint-disable-line + console.log(state); // eslint-disable-line + return { + ...state, + incomeStatement: { + data: { instance: action.instance }, + loading: false, + error: false, + }, + }; + + case UPDATE_INCOME_STATEMENTS_FAILED: + return { ...state, + incomeStatement: { + ...state.incomeStatement, + loading: false, + error: action.error, + }, + }; + case UPDATE_CASH_BALANCE_REQUESTED: return { ...state, diff --git a/src/containers/Blocnote/sagas.js b/src/containers/Blocnote/sagas.js index 318a030b..f3324998 100644 --- a/src/containers/Blocnote/sagas.js +++ b/src/containers/Blocnote/sagas.js @@ -20,6 +20,7 @@ import { DELETE_BILLS_SUMMARY_REQUESTED, CREATE_BILLS_OVERVIEW_REQUESTED, UPDATE_BILLS_OVERVIEW_REQUESTED, + UPDATE_INCOME_STATEMENTS_REQUESTED, UPDATE_CASH_BALANCE_REQUESTED, UPDATE_LIABILITIES_REQUESTED, UPDATE_LOAN_OPTIONS_REQUESTED, @@ -59,6 +60,8 @@ import { createBillsOverviewFailed, updateBillsOverviewSucceeded, updateBillsOverviewFailed, + updateIncomeStatementsSucceeded, + updateIncomeStatementsFailed, updateCashBalanceSucceeded, updateCashBalanceFailed, updateLiabilitiesSucceeded, @@ -236,6 +239,25 @@ function* updateBillsOverview(action) { } } +function* updateIncomeStatements(action) { + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/income-statement/`; + const res = yield call( + request, + SagaRequests.generateURL(url, action), + { + method: 'PUT', + headers: getHeaders(), + body: JSON.stringify(action.payload), + } + ); + + if (!res.err) { + yield put(updateIncomeStatementsSucceeded(action.payload)); + } else { + yield put(updateIncomeStatementsFailed(res.err)); + } +} + function* updateCashBalance(action) { const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/financial-inputs/cash-balance/`; const res = yield call( @@ -330,6 +352,7 @@ function* blocnoteWatcher() { yield takeEvery(DELETE_BILLS_SUMMARY_REQUESTED, deleteBillsSummary); yield takeEvery(CREATE_BILLS_OVERVIEW_REQUESTED, createBillsOverview); yield takeEvery(UPDATE_BILLS_OVERVIEW_REQUESTED, updateBillsOverview); + yield takeEvery(UPDATE_INCOME_STATEMENTS_REQUESTED, updateIncomeStatements); yield takeEvery(UPDATE_CASH_BALANCE_REQUESTED, updateCashBalance); yield takeEvery(UPDATE_LIABILITIES_REQUESTED, updateLiabilities); yield takeEvery(UPDATE_LOAN_OPTIONS_REQUESTED, updateLoanOptions); -- GitLab From eeab13dfac2dbdd4eff613b513f12af23bbf5a46 Mon Sep 17 00:00:00 2001 From: akkking Date: Thu, 18 Apr 2019 19:13:16 -0400 Subject: [PATCH 51/79] Organize folder structure, update preliminary finance page --- src/components/Blocnote/FinancialInputs.js | 2 +- .../Blocnote/BudgetSimulator/actions.js | 6 + .../Blocnote/BudgetSimulator/constants.js | 3 + .../index.js} | 15 +- .../Blocnote/FinancialInputs/actions.js | 68 +++++++ .../Blocnote/FinancialInputs/constants.js | 64 +++++++ .../index.js} | 30 +-- .../Blocnote/PreliminaryFinance/actions.js | 6 + .../Blocnote/PreliminaryFinance/constants.js | 3 + .../Blocnote/PreliminaryFinance/index.js | 176 ++++++++++++++++++ src/routes.js | 18 +- 11 files changed, 362 insertions(+), 29 deletions(-) create mode 100644 src/containers/Blocnote/BudgetSimulator/actions.js create mode 100644 src/containers/Blocnote/BudgetSimulator/constants.js rename src/containers/Blocnote/{BudgetSimulator.js => BudgetSimulator/index.js} (86%) create mode 100644 src/containers/Blocnote/FinancialInputs/actions.js create mode 100644 src/containers/Blocnote/FinancialInputs/constants.js rename src/containers/Blocnote/{FinancialInputs.js => FinancialInputs/index.js} (92%) create mode 100644 src/containers/Blocnote/PreliminaryFinance/actions.js create mode 100644 src/containers/Blocnote/PreliminaryFinance/constants.js create mode 100644 src/containers/Blocnote/PreliminaryFinance/index.js diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js index a0fb7171..0c458919 100644 --- a/src/components/Blocnote/FinancialInputs.js +++ b/src/components/Blocnote/FinancialInputs.js @@ -364,7 +364,7 @@ class FinancialInputs extends Component { } } -FinancialInputs.propTypes = { +propTypes = { buildingId: PropTypes.string, }; diff --git a/src/containers/Blocnote/BudgetSimulator/actions.js b/src/containers/Blocnote/BudgetSimulator/actions.js new file mode 100644 index 00000000..157a250f --- /dev/null +++ b/src/containers/Blocnote/BudgetSimulator/actions.js @@ -0,0 +1,6 @@ +import * as constants from './constants'; +import { makeActionCreator } from '../../../utils/reduxHelpers'; + +export const loadBudgetSimulator = makeActionCreator(constants.BUDGET_SIMULATOR_REQUESTED, 'buildingId'); +export const budgetSimulatorLoaded = makeActionCreator(constants.BUDGET_SIMULATOR_SUCCEEDED, 'instance'); +export const budgetSimulatorFailed = makeActionCreator(constants.BUDGET_SIMULATOR_FAILED, 'error'); diff --git a/src/containers/Blocnote/BudgetSimulator/constants.js b/src/containers/Blocnote/BudgetSimulator/constants.js new file mode 100644 index 00000000..c0dbcb69 --- /dev/null +++ b/src/containers/Blocnote/BudgetSimulator/constants.js @@ -0,0 +1,3 @@ +export const BUDGET_SIMULATOR_REQUESTED = 'BUDGET_SIMULATOR_REQUESTED'; +export const BUDGET_SIMULATOR_SUCCEEDED = 'BUDGET_SIMULATOR_SUCCEEDED'; +export const BUDGET_SIMULATOR_FAILED = 'BUDGET_SIMULATOR_FAILED'; diff --git a/src/containers/Blocnote/BudgetSimulator.js b/src/containers/Blocnote/BudgetSimulator/index.js similarity index 86% rename from src/containers/Blocnote/BudgetSimulator.js rename to src/containers/Blocnote/BudgetSimulator/index.js index b87ca5cf..00b40c5a 100644 --- a/src/containers/Blocnote/BudgetSimulator.js +++ b/src/containers/Blocnote/BudgetSimulator/index.js @@ -2,14 +2,14 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; -import LinkBarDetail from '../../components/LinkBarDetail'; -import buildingDetailPropTypes from '../Building/propTypes'; -import './styles.css'; -import Loading from '../../components/Loading'; -import BugetTable from '../../components/Blocnote/BudgetSimulator/BugetTable'; -import BudgetChart from '../../components/Blocnote/BudgetSimulator/BudgetChart'; +import LinkBarDetail from '../../../components/LinkBarDetail'; +import buildingDetailPropTypes from '../../Building/propTypes'; +import './../styles.css'; +import Loading from '../../../components/Loading'; +import BugetTable from '../../../components/Blocnote/BudgetSimulator/BugetTable'; +import BudgetChart from '../../../components/Blocnote/BudgetSimulator/BudgetChart'; import { loadBudgetSimulator } from './actions'; -import blocnoteProps from './propTypes'; +import blocnoteProps from './../propTypes'; class BudgetSimulator extends Component { @@ -18,6 +18,7 @@ class BudgetSimulator extends Component { } processData = (data) => { + console.log(data); // eslint-disable-line const tables = data.instance.tables; return { savingPotentialList: data.instance.saving_potential_list, diff --git a/src/containers/Blocnote/FinancialInputs/actions.js b/src/containers/Blocnote/FinancialInputs/actions.js new file mode 100644 index 00000000..e253b555 --- /dev/null +++ b/src/containers/Blocnote/FinancialInputs/actions.js @@ -0,0 +1,68 @@ +import * as constants from './constants'; +import { makeActionCreator } from '../../../utils/reduxHelpers'; + +export const loadFinanceOverview = makeActionCreator(constants.FINANCE_OVERVIEW_REQUESTED, 'buildingId'); +export const financeOverviewLoaded = makeActionCreator(constants.FINANCE_OVERVIEW_SUCCEEDED, 'instance'); +export const financeOverviewFailed = makeActionCreator(constants.FINANCE_OVERVIEW_FAILED, 'error'); +export const loadBills = makeActionCreator(constants.BILLS_REQUESTED, 'buildingId'); +export const billsLoaded = makeActionCreator(constants.BILLS_SUCCEEDED, 'instance'); +export const billsFailed = makeActionCreator(constants.BILLS_FAILED, 'error'); +export const loadBillsSummary = makeActionCreator(constants.BILLS_SUMMARY_REQUESTED, 'buildingId'); +export const billsSummaryLoaded = makeActionCreator(constants.BILLS_SUMMARY_SUCCEEDED, 'instance'); +export const billsSummaryFailed = makeActionCreator(constants.BILLS_SUMMARY_FAILED, 'error'); +export const loadBillsOverview = makeActionCreator(constants.BILLS_OVERVIEW_REQUESTED, 'buildingId'); +export const billsOverviewLoaded = makeActionCreator(constants.BILLS_OVERVIEW_SUCCEEDED, 'instance'); +export const billsOverviewFailed = makeActionCreator(constants.BILLS_OVERVIEW_FAILED, 'error'); +export const loadCashBalance = makeActionCreator(constants.CASH_BALANCE_REQUESTED, 'buildingId'); +export const cashBalanceLoaded = makeActionCreator(constants.CASH_BALANCE_SUCCEEDED, 'instance'); +export const cashBalanceFailed = makeActionCreator(constants.CASH_BALANCE_FAILED, 'error'); +export const loadLoanOptions = makeActionCreator(constants.LOAN_OPTIONS_REQUESTED, 'buildingId'); +export const loanOptionsLoaded = makeActionCreator(constants.LOAN_OPTIONS_SUCCEEDED, 'instance'); +export const loanOptionsFailed = makeActionCreator(constants.LOAN_OPTIONS_FAILED, 'error'); +export const loadCustomerPreference = makeActionCreator(constants.CUSTOMER_PREFERENCE_REQUESTED, 'buildingId'); +export const customerPreferenceLoaded = makeActionCreator(constants.CUSTOMER_PREFERENCE_SUCCEEDED, 'instance'); +export const customerPreferenceFailed = makeActionCreator(constants.CUSTOMER_PREFERENCE_FAILED, 'error'); +export const loadIncomeStatement = makeActionCreator(constants.INCOME_STATEMENT_REQUESTED, 'buildingId'); +export const incomeStatementLoaded = makeActionCreator(constants.INCOME_STATEMENT_SUCCEEDED, 'instance'); +export const incomeStatementFailed = makeActionCreator(constants.INCOME_STATEMENT_FAILED, 'error'); +export const loadLiabilities = makeActionCreator(constants.LIABILITIES_REQUESTED, 'buildingId'); +export const liabilitiesLoaded = makeActionCreator(constants.LIABILITIES_SUCCEEDED, 'instance'); +export const liabilitiesFailed = makeActionCreator(constants.LIABILITIES_FAILED, 'error'); + +export const createBillsSummary = makeActionCreator(constants.CREATE_BILLS_SUMMARY_REQUESTED, 'buildingId', 'payload'); +export const createBillsSummarySucceeded = makeActionCreator(constants.CREATE_BILLS_SUMMARY_SUCCEEDED, 'instance', 'result'); +export const createBillsSummaryFailed = makeActionCreator(constants.CREATE_BILLS_SUMMARY_FAILED, 'error'); +export const updateBillsSummary = makeActionCreator(constants.UPDATE_BILLS_SUMMARY_REQUESTED, 'buildingId', 'payload'); +export const updateBillsSummarySucceeded = makeActionCreator(constants.UPDATE_BILLS_SUMMARY_SUCCEEDED, 'instance'); +export const updateBillsSummaryFailed = makeActionCreator(constants.UPDATE_BILLS_SUMMARY_FAILED, 'error'); +export const deleteBillsSummary = makeActionCreator(constants.DELETE_BILLS_SUMMARY_REQUESTED, 'buildingId', 'payload'); +export const deleteBillsSummarySucceeded = makeActionCreator(constants.DELETE_BILLS_SUMMARY_SUCCEEDED, 'instance'); +export const deleteBillsSummaryFailed = makeActionCreator(constants.DELETE_BILLS_SUMMARY_FAILED, 'error'); + +export const createBillsOverview = makeActionCreator(constants.CREATE_BILLS_OVERVIEW_REQUESTED, 'buildingId', 'payload'); +export const createBillsOverviewSucceeded = makeActionCreator(constants.CREATE_BILLS_OVERVIEW_SUCCEEDED, 'instance'); +export const createBillsOverviewFailed = makeActionCreator(constants.CREATE_BILLS_OVERVIEW_FAILED, 'error'); +export const updateBillsOverview = makeActionCreator(constants.UPDATE_BILLS_OVERVIEW_REQUESTED, 'buildingId', 'payload'); +export const updateBillsOverviewSucceeded = makeActionCreator(constants.UPDATE_BILLS_OVERVIEW_SUCCEEDED, 'instance'); +export const updateBillsOverviewFailed = makeActionCreator(constants.UPDATE_BILLS_OVERVIEW_FAILED, 'error'); + +export const updateIncomeStatements = makeActionCreator(constants.UPDATE_INCOME_STATEMENTS_REQUESTED, 'buildingId'); +export const updateIncomeStatementsSucceeded = makeActionCreator(constants.UPDATE_INCOME_STATEMENTS_SUCCEEDED, 'instance'); +export const updateIncomeStatementsFailed = makeActionCreator(constants.UPDATE_INCOME_STATEMENTS_FAILED, 'error'); + +export const updateCashBalance = makeActionCreator(constants.UPDATE_CASH_BALANCE_REQUESTED, 'buildingId', 'payload'); +export const updateCashBalanceSucceeded = makeActionCreator(constants.UPDATE_CASH_BALANCE_SUCCEEDED, 'instance'); +export const updateCashBalanceFailed = makeActionCreator(constants.UPDATE_CASH_BALANCE_FAILED, 'error'); + +export const updateLiabilities = makeActionCreator(constants.UPDATE_LIABILITIES_REQUESTED, 'buildingId', 'payload'); +export const updateLiabilitiesSucceeded = makeActionCreator(constants.UPDATE_LIABILITIES_SUCCEEDED, 'instance'); +export const updateLiabilitiesFailed = makeActionCreator(constants.UPDATE_LIABILITIES_FAILED, 'error'); + +export const updateLoanOptions = makeActionCreator(constants.UPDATE_LOAN_OPTIONS_REQUESTED, 'buildingId', 'payload'); +export const updateLoanOptionsSucceeded = makeActionCreator(constants.UPDATE_LOAN_OPTIONS_SUCCEEDED, 'instance'); +export const updateLoanOptionsFailed = makeActionCreator(constants.UPDATE_LOAN_OPTIONS_FAILED, 'error'); + +export const updateCustomerPreference = makeActionCreator(constants.UPDATE_CUSTOMER_PREFERENCE_REQUESTED, 'buildingId', 'payload'); +export const updateCustomerPreferenceSucceeded = makeActionCreator(constants.UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED, 'instance'); +export const updateCustomerPreferenceFailed = makeActionCreator(constants.UPDATE_CUSTOMER_PREFERENCE_FAILED, 'error'); + diff --git a/src/containers/Blocnote/FinancialInputs/constants.js b/src/containers/Blocnote/FinancialInputs/constants.js new file mode 100644 index 00000000..de4a0ad4 --- /dev/null +++ b/src/containers/Blocnote/FinancialInputs/constants.js @@ -0,0 +1,64 @@ +export const FINANCE_OVERVIEW_REQUESTED = 'FINANCE_OVERIVEW_REQUESTED'; +export const FINANCE_OVERVIEW_SUCCEEDED = 'FINANCE_OVERIVEW_SUCCEEDED'; +export const FINANCE_OVERVIEW_FAILED = 'FINANCE_OVERIVEW_FAILED'; +export const BILLS_REQUESTED = 'BILLS_REQUESTED'; +export const BILLS_SUCCEEDED = 'BILLS_SUCCEEDED'; +export const BILLS_FAILED = 'BILLS_FAILED'; +export const BILLS_OVERVIEW_REQUESTED = 'BILLS_OVERVIEW_REQUESTED'; +export const BILLS_OVERVIEW_SUCCEEDED = 'BILLS_OVERVIEW_SUCCEEDED'; +export const BILLS_OVERVIEW_FAILED = 'BILLS_OVERVIEW_FAILED'; +export const BILLS_SUMMARY_REQUESTED = 'BILLS_SUMMARY_REQUESTED'; +export const BILLS_SUMMARY_SUCCEEDED = 'BILLS_SUMMARY_SUCCEEDED'; +export const BILLS_SUMMARY_FAILED = 'BILLS_SUMMARY_FAILED'; +export const CASH_BALANCE_REQUESTED = 'CASH_BALANCE_REQUESTED'; +export const CASH_BALANCE_SUCCEEDED = 'CASH_BALANCE_SUCCEEDED'; +export const CASH_BALANCE_FAILED = 'CASH_BALANCE_FAILED'; +export const CUSTOMER_PREFERENCE_REQUESTED = 'CUSTOMER_PREFERENCE_REQUESTED'; +export const CUSTOMER_PREFERENCE_SUCCEEDED = 'CUSTOMER_PREFERENCE_SUCCEEDED'; +export const CUSTOMER_PREFERENCE_FAILED = 'CUSTOMER_PREFERENCE_FAILED'; +export const INCOME_STATEMENT_REQUESTED = 'INCOME_STATEMENT_REQUESTED'; +export const INCOME_STATEMENT_SUCCEEDED = 'INCOME_STATEMENT_SUCCEEDED'; +export const INCOME_STATEMENT_FAILED = 'INCOME_STATEMENT_FAILED'; +export const LOAN_OPTIONS_REQUESTED = 'LOAN_OPTIONS_REQUESTED'; +export const LOAN_OPTIONS_SUCCEEDED = 'LOAN_OPTIONS_SUCCEEDED'; +export const LOAN_OPTIONS_FAILED = 'LOAN_OPTIONS_FAILED'; +export const LIABILITIES_REQUESTED = 'LIABILITIES_REQUESTED'; +export const LIABILITIES_SUCCEEDED = 'LIABILITIES_SUCCEEDED'; +export const LIABILITIES_FAILED = 'LIABILITIES_FAILED'; + +export const CREATE_BILLS_SUMMARY_REQUESTED = 'CREATE_BILLS_SUMMARY_REQUESTED'; +export const CREATE_BILLS_SUMMARY_SUCCEEDED = 'CREATE_BILLS_SUMMARY_SUCCEEDED'; +export const CREATE_BILLS_SUMMARY_FAILED = 'CREATE_BILLS_SUMMARY_FAILED'; +export const UPDATE_BILLS_SUMMARY_REQUESTED = 'UPDATE_BILLS_SUMMARY_REQUESTED'; +export const UPDATE_BILLS_SUMMARY_SUCCEEDED = 'UPDATE_BILLS_SUMMARY_SUCCEEDED'; +export const UPDATE_BILLS_SUMMARY_FAILED = 'UPDATE_BILLS_SUMMARY_FAILED'; +export const DELETE_BILLS_SUMMARY_REQUESTED = 'DELETE_BILLS_SUMMARY_REQUESTED'; +export const DELETE_BILLS_SUMMARY_SUCCEEDED = 'DELETE_BILLS_SUMMARY_SUCCEEDED'; +export const DELETE_BILLS_SUMMARY_FAILED = 'DELETE_BILLS_SUMMARY_FAILED'; + +export const CREATE_BILLS_OVERVIEW_REQUESTED = 'CREATE_BILLS_OVERVIEW_REQUESTED'; +export const CREATE_BILLS_OVERVIEW_SUCCEEDED = 'CREATE_BILLS_OVERVIEW_SUCCEEDED'; +export const CREATE_BILLS_OVERVIEW_FAILED = 'CREATE_BILLS_OVERVIEW_FAILED'; +export const UPDATE_BILLS_OVERVIEW_REQUESTED = 'UPDATE_BILLS_OVERVIEW_REQUESTED'; +export const UPDATE_BILLS_OVERVIEW_SUCCEEDED = 'UPDATE_BILLS_OVERVIEW_SUCCEEDED'; +export const UPDATE_BILLS_OVERVIEW_FAILED = 'UPDATE_BILLS_OVERVIEW_FAILED'; + +export const UPDATE_INCOME_STATEMENTS_REQUESTED = 'UPDATE_INCOME_STATEMENTS_REQUESTED'; +export const UPDATE_INCOME_STATEMENTS_SUCCEEDED = 'UPDATE_INCOME_STATEMENTS_SUCCEEDED'; +export const UPDATE_INCOME_STATEMENTS_FAILED = 'UPDATE_INCOME_STATEMENTS_FAILED'; + +export const UPDATE_CASH_BALANCE_REQUESTED = 'UPDATE_CASH_BALANCE_REQUESTED'; +export const UPDATE_CASH_BALANCE_SUCCEEDED = 'UPDATE_CASH_BALANCE_SUCCEEDED'; +export const UPDATE_CASH_BALANCE_FAILED = 'UPDATE_CASH_BALANCE_FAILED'; + +export const UPDATE_LIABILITIES_REQUESTED = 'UPDATE_LIABILITIES_REQUESTED'; +export const UPDATE_LIABILITIES_SUCCEEDED = 'UPDATE_LIABILITIES_SUCCEEDED'; +export const UPDATE_LIABILITIES_FAILED = 'UPDATE_LIABILITIES_FAILED'; + +export const UPDATE_LOAN_OPTIONS_REQUESTED = 'UPDATE_LOAN_OPTIONS_REQUESTED'; +export const UPDATE_LOAN_OPTIONS_SUCCEEDED = 'UPDATE_LOAN_OPTIONS_SUCCEEDED'; +export const UPDATE_LOAN_OPTIONS_FAILED = 'UPDATE_LOAN_OPTIONS_FAILED'; + +export const UPDATE_CUSTOMER_PREFERENCE_REQUESTED = 'UPDATE_CUSTOMER_PREFERENCE_REQUESTED'; +export const UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED = 'UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED'; +export const UPDATE_CUSTOMER_PREFERENCE_FAILED = 'UPDATE_CUSTOMER_PREFERENCE_FAILED'; diff --git a/src/containers/Blocnote/FinancialInputs.js b/src/containers/Blocnote/FinancialInputs/index.js similarity index 92% rename from src/containers/Blocnote/FinancialInputs.js rename to src/containers/Blocnote/FinancialInputs/index.js index 83ffcc85..f246a785 100644 --- a/src/containers/Blocnote/FinancialInputs.js +++ b/src/containers/Blocnote/FinancialInputs/index.js @@ -2,10 +2,10 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; -import LinkBarDetail from '../../components/LinkBarDetail'; -import buildingDetailPropTypes from '../Building/propTypes'; -import './styles.css'; -import Loading from '../../components/Loading'; +import LinkBarDetail from '../../../components/LinkBarDetail'; +import buildingDetailPropTypes from '../../Building/propTypes'; +import './../styles.css'; +import Loading from '../../../components/Loading'; import { loadFinanceOverview, loadBills, loadBillsOverview, loadBillsSummary, loadCashBalance, loadLoanOptions, @@ -14,17 +14,17 @@ import { createBillsOverview, updateBillsOverview, updateIncomeStatements, updateCashBalance, updateLiabilities, updateLoanOptions, updateCustomerPreference, } from './actions'; -import blocnoteProps from './propTypes'; -import FinanceOverview from './../../components/Blocnote/FinancialInputs/FinanceOverview'; -import EnergyBills from './../../components/Blocnote/FinancialInputs/EnergyBills'; -import BillsSummary from './FinancialInputs/BillsSummary'; -import BillsOverview from './FinancialInputs/BillsOverview'; -import IncomeStatements from './FinancialInputs/IncomeStatements'; -import CashBalance from './FinancialInputs/CashBalance'; -import MortgageLiabilities from './FinancialInputs/MortgageLiabilities'; -import LoanOptions from './FinancialInputs/LoanOptions'; -import CustomerPreference from './FinancialInputs/CustomerPreference'; -import { blocnoteURL } from '../../utils/restServices'; +import blocnoteProps from './../propTypes'; +import FinanceOverview from './../../../components/Blocnote/FinancialInputs/FinanceOverview'; +import EnergyBills from './../../../components/Blocnote/FinancialInputs/EnergyBills'; +import BillsSummary from './BillsSummary'; +import BillsOverview from './BillsOverview'; +import IncomeStatements from './IncomeStatements'; +import CashBalance from './CashBalance'; +import MortgageLiabilities from './MortgageLiabilities'; +import LoanOptions from './LoanOptions'; +import CustomerPreference from './CustomerPreference'; +import { blocnoteURL } from '../../../utils/restServices'; class FinancialInputs extends Component { diff --git a/src/containers/Blocnote/PreliminaryFinance/actions.js b/src/containers/Blocnote/PreliminaryFinance/actions.js new file mode 100644 index 00000000..08b48448 --- /dev/null +++ b/src/containers/Blocnote/PreliminaryFinance/actions.js @@ -0,0 +1,6 @@ +import * as constants from './constants'; +import { makeActionCreator } from '../../../utils/reduxHelpers'; + +export const loadScenario = makeActionCreator(constants.SCENARIO_REQUESTED, 'buildingId'); +export const scenarioLoaded = makeActionCreator(constants.SCENARIO_SUCCEEDED, 'instance'); +export const scenarioFailed = makeActionCreator(constants.SCENARIO_FAILED, 'error'); diff --git a/src/containers/Blocnote/PreliminaryFinance/constants.js b/src/containers/Blocnote/PreliminaryFinance/constants.js new file mode 100644 index 00000000..7fc90ade --- /dev/null +++ b/src/containers/Blocnote/PreliminaryFinance/constants.js @@ -0,0 +1,3 @@ +export const SCENARIO_REQUESTED = 'SCENARIO_REQUESTED'; +export const SCENARIO_SUCCEEDED = 'SCENARIO_SUCCEEDED'; +export const SCENARIO_FAILED = 'SCENARIO_FAILED'; diff --git a/src/containers/Blocnote/PreliminaryFinance/index.js b/src/containers/Blocnote/PreliminaryFinance/index.js new file mode 100644 index 00000000..055b77bc --- /dev/null +++ b/src/containers/Blocnote/PreliminaryFinance/index.js @@ -0,0 +1,176 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import LinkBarDetail from '../../../components/LinkBarDetail'; +// import buildingDetailPropTypes from '../Building/propTypes'; +import './../styles.css'; +import blocnoteProps from './../propTypes'; +import Loading from '../../../components/Loading'; +import { + loadScenario, +} from './actions'; +import BudgetChart from './../../../components/Blocnote/PreliminaryFinance/BudgetChart'; +import CostEstimation from './../../../components/Blocnote/PreliminaryFinance/CostEstimation'; +import SavingEstimation from './../../../components/Blocnote/PreliminaryFinance/SavingEstimation'; +import LoanSummary from './../../../components/Blocnote/PreliminaryFinance/LoanSummary'; +import ProjectEconomics from './../../../components/Blocnote/PreliminaryFinance/ProjectEconomics'; +import SavingsScheduleChart from './../../../components/Blocnote/PreliminaryFinance/SavingsScheduleChart'; +import PriorRetrofitIncomeStatement from './../../../components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement'; +import PostRetrofitIncomeStatement from './../../../components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement'; +import PriorRetrofitBalanceSheet from './../../../components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet'; +import PostRetrofitBalanceSheet from './../../../components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet'; +import DownPayment from './../../../components/Blocnote/PreliminaryFinance/DownPayment'; +import SelectScenario from './../../../components/Blocnote/PreliminaryFinance/SelectScenario'; +import SaveScenario from './../../../components/Blocnote/PreliminaryFinance/SaveScenario'; +import { blocnoteURL } from '../../../utils/restServices'; + + +class PreliminaryFinance extends Component { + componentDidMount() { + this.props.loadScenario(this.props.buildingId); + } + + render() { + let mainContent = null; + const baseURL = `${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs`; + const blockStyle = { marginBottom: '40px' }; + const headerStyle = { textAlign: 'left', marginBottom: '25px' }; + const successMessageStyle = { + color: 'green', + paddingLeft: '25px', + fontWeight: 'bold', + }; + const errorMessageStyle = { + color: 'red', + paddingLeft: '25px', + fontWeight: 'bold', + }; + const defaultMessageStyle = { + color: 'black', + paddingLeft: '25px', + fontWeight: 'bold', + }; + + console.log(this.props); // eslint-disable-line + const { blocnote } = this.props; + const { scenario } = blocnote; + + mainContent = ; + + if (scenario.data !== null) { + const tables = scenario.data.instance.instance.tables; + const budgets = Object.keys(tables).map(tableName => tables[tableName][0].slice(1)); + + const projectEconomicsContent = [[]]; + Object.keys(scenario.data.instance.economics_overview).forEach((key) => { + const temp = []; + temp.push(key); + temp.push(scenario.data.instance.economics_overview[key]); + projectEconomicsContent.push(temp); + }); + mainContent = ( +
    + + + + + + + + + + + + + +
    + ); + } + + return ( +
    + + {mainContent} +
    + ); + } +} + +PreliminaryFinance.propTypes = { + buildingId: PropTypes.string, + // building: buildingDetailPropTypes, + blocnote: blocnoteProps, + loadScenario: PropTypes.func, +}; + +const mapDispatchToProps = dispatch => { + return bindActionCreators({ + loadScenario, + }, dispatch); +}; + +const mapStateToProps = state => ({ + blocnote: state.blocnote, +}); + +export default connect(mapStateToProps, mapDispatchToProps)(PreliminaryFinance); diff --git a/src/routes.js b/src/routes.js index db433180..9ef9c9b8 100644 --- a/src/routes.js +++ b/src/routes.js @@ -24,9 +24,9 @@ import SensorInstall from './containers/Sensors/SensorInstall'; import GatewayList from './components/SensorInstall/GatewayList'; import BuildingReports from './containers/BuildingReports'; import Blocnote from './containers/Blocnote'; -import FinancialInputs from './containers/Blocnote/FinancialInputs'; -// import PreliminaryFinance from './containers/Blocnote/PreliminaryFinance'; -import BudgetSimulator from './containers/Blocnote/BudgetSimulator'; +import FinancialInputs from './containers/Blocnote/FinancialInputs/'; +import PreliminaryFinance from './containers/Blocnote/PreliminaryFinance/'; +import BudgetSimulator from './containers/Blocnote/BudgetSimulator/'; import Wrapper from './containers/Wrapper'; import { BGroupOverview, BGroup } from './containers/BGroup'; import NavOnly from './screens/NavOnly/NavOnly'; @@ -63,9 +63,15 @@ export default ( - - {/* */} - + + + + + + + + + -- GitLab From 5bbb34c8049b0358785e1a0b03976986d3c05ce2 Mon Sep 17 00:00:00 2001 From: akkking Date: Thu, 18 Apr 2019 19:14:43 -0400 Subject: [PATCH 52/79] Update saga, reducer, actions, constants by separating folder structure --- src/containers/Blocnote/PreliminaryFinance.js | 178 -------------- src/containers/Blocnote/actions.js | 141 +---------- src/containers/Blocnote/constants.js | 69 ------ src/containers/Blocnote/index.js | 14 +- src/containers/Blocnote/reducer.js | 231 ++++++++---------- src/containers/Blocnote/sagas.js | 148 +++++------ 6 files changed, 176 insertions(+), 605 deletions(-) delete mode 100644 src/containers/Blocnote/PreliminaryFinance.js diff --git a/src/containers/Blocnote/PreliminaryFinance.js b/src/containers/Blocnote/PreliminaryFinance.js deleted file mode 100644 index 1065c5ea..00000000 --- a/src/containers/Blocnote/PreliminaryFinance.js +++ /dev/null @@ -1,178 +0,0 @@ -import React, { Component } from 'react'; -import { Link } from 'react-router'; -import LinkBarDetail from '../../components/LinkBarDetail'; -import buildingDetailPropTypes from '../Building/propTypes'; -import './styles.css'; -import { - blocnoteURL, - getHeaders, -} from '../../utils/restServices'; -import request from '../../utils/request'; -import Loading from '../../components/Loading'; - - -class PreliminaryFinance extends Component { - - constructor(props) { - super(props); - this.state = { - financialInputsData: { name: null, status: null }, - preliminaryFinanceData: { name: null, status: null }, - budgetSimilatorData: { name: null, status: null }, - loading: true, - }; - } - - componentDidMount() { - this.loadData(this.props.building.building_id); - } - - loadData = (buildingId) => { - request(`${blocnoteURL}buildings/${buildingId}/data/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - console.log(res); // eslint-disable-line - if (!res.err) { - if (Object.keys(res.instance).length > 0) { - const rootURL = `/buildings/${this.props.building.building_id}`; - - if (res.instance.if_completed) { - this.state.financialInputsData.name = ( - Financial Inputs - ); - this.state.financialInputsData.status = (Complete); - this.state.preliminaryFinanceData.name = ( - Preliminary Finance - ); - this.state.preliminaryFinanceData.status = (OK); - this.state.budgetSimilatorData.name = ( - Budget Simulator - ); - this.state.budgetSimilatorData.status = (OK); - } else { - this.state.financialInputsData.name = ( - Financial Inputs - ); - if (res.instance.if_started) { - this.state.financialInputsData.status = (Started but not complete.); - } else { - this.state.financialInputsData.status = (Not Started.); - } - this.state.preliminaryFinanceData.name = (Preliminary Finance); - const prelimItems = res.instance.not_saved_list_for_prelim.map((item) => { - return (
  • Please fill {item}
  • ); - }); - this.state.preliminaryFinanceData.status = ( -
      - {prelimItems} -
    - ); - - if (res.instance.if_completed_for_budget) { - this.state.budgetSimilatorData.name = ( - Budget Simulator - ); - this.state.budgetSimilatorData.status = (OK); - } else { - this.state.budgetSimilatorData.name = (Budget Simulator); - const budgetItems = res.instance.not_saved_list_for_budget.map((item) => { - return (
  • Please fill {item}
  • ); - }); - this.state.budgetSimilatorData.status = (
      {budgetItems}
    ); - } - } - } - } else if (res.err) { - this.setState({ error: res.err }); - } - this.setState({ loading: false }); - }); - } - - render() { - let mainContent = null; - - if (this.state.loading) { - mainContent = ; - } else { - mainContent = ( -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - -
    OPTIONSSTATUS
    - {this.state.financialInputsData.name} - - {this.state.financialInputsData.status} -
    - {this.state.preliminaryFinanceData.name} - - {this.state.preliminaryFinanceData.status} -
    - {this.state.budgetSimilatorData.name} - - {this.state.budgetSimilatorData.status} -
    -
    -
    -
    -
    - ); - } - - return ( -
    - - {mainContent} -
    - ); - } -} - -PreliminaryFinance.propTypes = { - building: buildingDetailPropTypes, - // envelope: envelopeProps, - // loadScenario: PropTypes.func, -}; - -// const mapDispatchToProps = dispatch => ( -// bindActionCreators({ -// // loadScenario, -// }, dispatch) -// ); - -// const mapStateToProps = state => ({ -// // envelope: state.envelope, -// eng: state.eng, -// }); - -export default PreliminaryFinance; diff --git a/src/containers/Blocnote/actions.js b/src/containers/Blocnote/actions.js index 5435678a..2a43545f 100644 --- a/src/containers/Blocnote/actions.js +++ b/src/containers/Blocnote/actions.js @@ -1,139 +1,6 @@ -import { - LANDING_DATA_REQUESTED, - LANDING_DATA_SUCCEEDED, - LANDING_DATA_FAILED, - FINANCE_OVERVIEW_REQUESTED, - FINANCE_OVERVIEW_SUCCEEDED, - FINANCE_OVERVIEW_FAILED, - BILLS_REQUESTED, - BILLS_SUCCEEDED, - BILLS_FAILED, - BILLS_SUMMARY_REQUESTED, - BILLS_SUMMARY_SUCCEEDED, - BILLS_SUMMARY_FAILED, - BILLS_OVERVIEW_REQUESTED, - BILLS_OVERVIEW_SUCCEEDED, - BILLS_OVERVIEW_FAILED, - LOAN_OPTIONS_REQUESTED, - LOAN_OPTIONS_SUCCEEDED, - LOAN_OPTIONS_FAILED, - INCOME_STATEMENT_REQUESTED, - INCOME_STATEMENT_SUCCEEDED, - INCOME_STATEMENT_FAILED, - CASH_BALANCE_REQUESTED, - CASH_BALANCE_SUCCEEDED, - CASH_BALANCE_FAILED, - LIABILITIES_REQUESTED, - LIABILITIES_SUCCEEDED, - LIABILITIES_FAILED, - CUSTOMER_PREFERENCE_REQUESTED, - CUSTOMER_PREFERENCE_SUCCEEDED, - CUSTOMER_PREFERENCE_FAILED, - BUDGET_SIMULATOR_REQUESTED, - BUDGET_SIMULATOR_SUCCEEDED, - BUDGET_SIMULATOR_FAILED, - CREATE_BILLS_SUMMARY_REQUESTED, - CREATE_BILLS_SUMMARY_SUCCEEDED, - CREATE_BILLS_SUMMARY_FAILED, - UPDATE_BILLS_SUMMARY_REQUESTED, - UPDATE_BILLS_SUMMARY_SUCCEEDED, - UPDATE_BILLS_SUMMARY_FAILED, - DELETE_BILLS_SUMMARY_REQUESTED, - DELETE_BILLS_SUMMARY_SUCCEEDED, - DELETE_BILLS_SUMMARY_FAILED, - CREATE_BILLS_OVERVIEW_REQUESTED, - CREATE_BILLS_OVERVIEW_SUCCEEDED, - CREATE_BILLS_OVERVIEW_FAILED, - UPDATE_BILLS_OVERVIEW_REQUESTED, - UPDATE_BILLS_OVERVIEW_SUCCEEDED, - UPDATE_BILLS_OVERVIEW_FAILED, - UPDATE_INCOME_STATEMENTS_REQUESTED, - UPDATE_INCOME_STATEMENTS_SUCCEEDED, - UPDATE_INCOME_STATEMENTS_FAILED, - UPDATE_CASH_BALANCE_REQUESTED, - UPDATE_CASH_BALANCE_SUCCEEDED, - UPDATE_CASH_BALANCE_FAILED, - UPDATE_LIABILITIES_REQUESTED, - UPDATE_LIABILITIES_SUCCEEDED, - UPDATE_LIABILITIES_FAILED, - UPDATE_LOAN_OPTIONS_REQUESTED, - UPDATE_LOAN_OPTIONS_SUCCEEDED, - UPDATE_LOAN_OPTIONS_FAILED, - UPDATE_CUSTOMER_PREFERENCE_REQUESTED, - UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED, - UPDATE_CUSTOMER_PREFERENCE_FAILED, -} from './constants'; +import * as constants from './constants'; import { makeActionCreator } from '../../utils/reduxHelpers'; -export const loadLandingData = makeActionCreator(LANDING_DATA_REQUESTED, 'buildingId'); -export const landingDataLoaded = makeActionCreator(LANDING_DATA_SUCCEEDED, 'instance'); -export const landingDataFailed = makeActionCreator(LANDING_DATA_FAILED, 'error'); - -export const loadFinanceOverview = makeActionCreator(FINANCE_OVERVIEW_REQUESTED, 'buildingId'); -export const financeOverviewLoaded = makeActionCreator(FINANCE_OVERVIEW_SUCCEEDED, 'instance'); -export const financeOverviewFailed = makeActionCreator(FINANCE_OVERVIEW_FAILED, 'error'); -export const loadBills = makeActionCreator(BILLS_REQUESTED, 'buildingId'); -export const billsLoaded = makeActionCreator(BILLS_SUCCEEDED, 'instance'); -export const billsFailed = makeActionCreator(BILLS_FAILED, 'error'); -export const loadBillsSummary = makeActionCreator(BILLS_SUMMARY_REQUESTED, 'buildingId'); -export const billsSummaryLoaded = makeActionCreator(BILLS_SUMMARY_SUCCEEDED, 'instance'); -export const billsSummaryFailed = makeActionCreator(BILLS_SUMMARY_FAILED, 'error'); -export const loadBillsOverview = makeActionCreator(BILLS_OVERVIEW_REQUESTED, 'buildingId'); -export const billsOverviewLoaded = makeActionCreator(BILLS_OVERVIEW_SUCCEEDED, 'instance'); -export const billsOverviewFailed = makeActionCreator(BILLS_OVERVIEW_FAILED, 'error'); -export const loadCashBalance = makeActionCreator(CASH_BALANCE_REQUESTED, 'buildingId'); -export const cashBalanceLoaded = makeActionCreator(CASH_BALANCE_SUCCEEDED, 'instance'); -export const cashBalanceFailed = makeActionCreator(CASH_BALANCE_FAILED, 'error'); -export const loadLoanOptions = makeActionCreator(LOAN_OPTIONS_REQUESTED, 'buildingId'); -export const loanOptionsLoaded = makeActionCreator(LOAN_OPTIONS_SUCCEEDED, 'instance'); -export const loanOptionsFailed = makeActionCreator(LOAN_OPTIONS_FAILED, 'error'); -export const loadCustomerPreference = makeActionCreator(CUSTOMER_PREFERENCE_REQUESTED, 'buildingId'); -export const customerPreferenceLoaded = makeActionCreator(CUSTOMER_PREFERENCE_SUCCEEDED, 'instance'); -export const customerPreferenceFailed = makeActionCreator(CUSTOMER_PREFERENCE_FAILED, 'error'); -export const loadIncomeStatement = makeActionCreator(INCOME_STATEMENT_REQUESTED, 'buildingId'); -export const incomeStatementLoaded = makeActionCreator(INCOME_STATEMENT_SUCCEEDED, 'instance'); -export const incomeStatementFailed = makeActionCreator(INCOME_STATEMENT_FAILED, 'error'); -export const loadLiabilities = makeActionCreator(LIABILITIES_REQUESTED, 'buildingId'); -export const liabilitiesLoaded = makeActionCreator(LIABILITIES_SUCCEEDED, 'instance'); -export const liabilitiesFailed = makeActionCreator(LIABILITIES_FAILED, 'error'); - -export const loadBudgetSimulator = makeActionCreator(BUDGET_SIMULATOR_REQUESTED, 'buildingId'); -export const budgetSimulatorLoaded = makeActionCreator(BUDGET_SIMULATOR_SUCCEEDED, 'instance'); -export const budgetSimulatorFailed = makeActionCreator(BUDGET_SIMULATOR_FAILED, 'error'); - -export const createBillsSummary = makeActionCreator(CREATE_BILLS_SUMMARY_REQUESTED, 'buildingId', 'payload'); -export const createBillsSummarySucceeded = makeActionCreator(CREATE_BILLS_SUMMARY_SUCCEEDED, 'instance', 'result'); -export const createBillsSummaryFailed = makeActionCreator(CREATE_BILLS_SUMMARY_FAILED, 'error'); -export const updateBillsSummary = makeActionCreator(UPDATE_BILLS_SUMMARY_REQUESTED, 'buildingId', 'payload'); -export const updateBillsSummarySucceeded = makeActionCreator(UPDATE_BILLS_SUMMARY_SUCCEEDED, 'instance'); -export const updateBillsSummaryFailed = makeActionCreator(UPDATE_BILLS_SUMMARY_FAILED, 'error'); -export const deleteBillsSummary = makeActionCreator(DELETE_BILLS_SUMMARY_REQUESTED, 'buildingId', 'payload'); -export const deleteBillsSummarySucceeded = makeActionCreator(DELETE_BILLS_SUMMARY_SUCCEEDED, 'instance'); -export const deleteBillsSummaryFailed = makeActionCreator(DELETE_BILLS_SUMMARY_FAILED, 'error'); - -export const createBillsOverview = makeActionCreator(CREATE_BILLS_OVERVIEW_REQUESTED, 'buildingId', 'payload'); -export const createBillsOverviewSucceeded = makeActionCreator(CREATE_BILLS_OVERVIEW_SUCCEEDED, 'instance'); -export const createBillsOverviewFailed = makeActionCreator(CREATE_BILLS_OVERVIEW_FAILED, 'error'); -export const updateBillsOverview = makeActionCreator(UPDATE_BILLS_OVERVIEW_REQUESTED, 'buildingId', 'payload'); -export const updateBillsOverviewSucceeded = makeActionCreator(UPDATE_BILLS_OVERVIEW_SUCCEEDED, 'instance'); -export const updateBillsOverviewFailed = makeActionCreator(UPDATE_BILLS_OVERVIEW_FAILED, 'error'); - -export const updateIncomeStatements = makeActionCreator(UPDATE_INCOME_STATEMENTS_REQUESTED, 'buildingId'); -export const updateIncomeStatementsSucceeded = makeActionCreator(UPDATE_INCOME_STATEMENTS_SUCCEEDED, 'instance'); -export const updateIncomeStatementsFailed = makeActionCreator(UPDATE_INCOME_STATEMENTS_FAILED, 'error'); - -export const updateCashBalance = makeActionCreator(UPDATE_CASH_BALANCE_REQUESTED, 'buildingId', 'payload'); -export const updateCashBalanceSucceeded = makeActionCreator(UPDATE_CASH_BALANCE_SUCCEEDED, 'instance'); -export const updateCashBalanceFailed = makeActionCreator(UPDATE_CASH_BALANCE_FAILED, 'error'); - -export const updateLiabilities = makeActionCreator(UPDATE_LIABILITIES_REQUESTED, 'buildingId', 'payload'); -export const updateLiabilitiesSucceeded = makeActionCreator(UPDATE_LIABILITIES_SUCCEEDED, 'instance'); -export const updateLiabilitiesFailed = makeActionCreator(UPDATE_LIABILITIES_FAILED, 'error'); - -export const updateLoanOptions = makeActionCreator(UPDATE_LOAN_OPTIONS_REQUESTED, 'buildingId', 'payload'); -export const updateLoanOptionsSucceeded = makeActionCreator(UPDATE_LOAN_OPTIONS_SUCCEEDED, 'instance'); -export const updateLoanOptionsFailed = makeActionCreator(UPDATE_LOAN_OPTIONS_FAILED, 'error'); - -export const updateCustomerPreference = makeActionCreator(UPDATE_CUSTOMER_PREFERENCE_REQUESTED, 'buildingId', 'payload'); -export const updateCustomerPreferenceSucceeded = makeActionCreator(UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED, 'instance'); -export const updateCustomerPreferenceFailed = makeActionCreator(UPDATE_CUSTOMER_PREFERENCE_FAILED, 'error'); +export const loadLandingData = makeActionCreator(constants.LANDING_DATA_REQUESTED, 'buildingId'); +export const landingDataLoaded = makeActionCreator(constants.LANDING_DATA_SUCCEEDED, 'instance'); +export const landingDataFailed = makeActionCreator(constants.LANDING_DATA_FAILED, 'error'); diff --git a/src/containers/Blocnote/constants.js b/src/containers/Blocnote/constants.js index 2019025d..ae65e1bd 100644 --- a/src/containers/Blocnote/constants.js +++ b/src/containers/Blocnote/constants.js @@ -1,72 +1,3 @@ export const LANDING_DATA_REQUESTED = 'LANDING_DATA_REQUESTED'; export const LANDING_DATA_SUCCEEDED = 'LANDING_DATA_SUCCEEDED'; export const LANDING_DATA_FAILED = 'LANDING_DATA_FAILED'; - -export const FINANCE_OVERVIEW_REQUESTED = 'FINANCE_OVERIVEW_REQUESTED'; -export const FINANCE_OVERVIEW_SUCCEEDED = 'FINANCE_OVERIVEW_SUCCEEDED'; -export const FINANCE_OVERVIEW_FAILED = 'FINANCE_OVERIVEW_FAILED'; -export const BILLS_REQUESTED = 'BILLS_REQUESTED'; -export const BILLS_SUCCEEDED = 'BILLS_SUCCEEDED'; -export const BILLS_FAILED = 'BILLS_FAILED'; -export const BILLS_OVERVIEW_REQUESTED = 'BILLS_OVERVIEW_REQUESTED'; -export const BILLS_OVERVIEW_SUCCEEDED = 'BILLS_OVERVIEW_SUCCEEDED'; -export const BILLS_OVERVIEW_FAILED = 'BILLS_OVERVIEW_FAILED'; -export const BILLS_SUMMARY_REQUESTED = 'BILLS_SUMMARY_REQUESTED'; -export const BILLS_SUMMARY_SUCCEEDED = 'BILLS_SUMMARY_SUCCEEDED'; -export const BILLS_SUMMARY_FAILED = 'BILLS_SUMMARY_FAILED'; -export const CASH_BALANCE_REQUESTED = 'CASH_BALANCE_REQUESTED'; -export const CASH_BALANCE_SUCCEEDED = 'CASH_BALANCE_SUCCEEDED'; -export const CASH_BALANCE_FAILED = 'CASH_BALANCE_FAILED'; -export const CUSTOMER_PREFERENCE_REQUESTED = 'CUSTOMER_PREFERENCE_REQUESTED'; -export const CUSTOMER_PREFERENCE_SUCCEEDED = 'CUSTOMER_PREFERENCE_SUCCEEDED'; -export const CUSTOMER_PREFERENCE_FAILED = 'CUSTOMER_PREFERENCE_FAILED'; -export const INCOME_STATEMENT_REQUESTED = 'INCOME_STATEMENT_REQUESTED'; -export const INCOME_STATEMENT_SUCCEEDED = 'INCOME_STATEMENT_SUCCEEDED'; -export const INCOME_STATEMENT_FAILED = 'INCOME_STATEMENT_FAILED'; -export const LOAN_OPTIONS_REQUESTED = 'LOAN_OPTIONS_REQUESTED'; -export const LOAN_OPTIONS_SUCCEEDED = 'LOAN_OPTIONS_SUCCEEDED'; -export const LOAN_OPTIONS_FAILED = 'LOAN_OPTIONS_FAILED'; -export const LIABILITIES_REQUESTED = 'LIABILITIES_REQUESTED'; -export const LIABILITIES_SUCCEEDED = 'LIABILITIES_SUCCEEDED'; -export const LIABILITIES_FAILED = 'LIABILITIES_FAILED'; - -export const CREATE_BILLS_SUMMARY_REQUESTED = 'CREATE_BILLS_SUMMARY_REQUESTED'; -export const CREATE_BILLS_SUMMARY_SUCCEEDED = 'CREATE_BILLS_SUMMARY_SUCCEEDED'; -export const CREATE_BILLS_SUMMARY_FAILED = 'CREATE_BILLS_SUMMARY_FAILED'; -export const UPDATE_BILLS_SUMMARY_REQUESTED = 'UPDATE_BILLS_SUMMARY_REQUESTED'; -export const UPDATE_BILLS_SUMMARY_SUCCEEDED = 'UPDATE_BILLS_SUMMARY_SUCCEEDED'; -export const UPDATE_BILLS_SUMMARY_FAILED = 'UPDATE_BILLS_SUMMARY_FAILED'; -export const DELETE_BILLS_SUMMARY_REQUESTED = 'DELETE_BILLS_SUMMARY_REQUESTED'; -export const DELETE_BILLS_SUMMARY_SUCCEEDED = 'DELETE_BILLS_SUMMARY_SUCCEEDED'; -export const DELETE_BILLS_SUMMARY_FAILED = 'DELETE_BILLS_SUMMARY_FAILED'; - -export const CREATE_BILLS_OVERVIEW_REQUESTED = 'CREATE_BILLS_OVERVIEW_REQUESTED'; -export const CREATE_BILLS_OVERVIEW_SUCCEEDED = 'CREATE_BILLS_OVERVIEW_SUCCEEDED'; -export const CREATE_BILLS_OVERVIEW_FAILED = 'CREATE_BILLS_OVERVIEW_FAILED'; -export const UPDATE_BILLS_OVERVIEW_REQUESTED = 'UPDATE_BILLS_OVERVIEW_REQUESTED'; -export const UPDATE_BILLS_OVERVIEW_SUCCEEDED = 'UPDATE_BILLS_OVERVIEW_SUCCEEDED'; -export const UPDATE_BILLS_OVERVIEW_FAILED = 'UPDATE_BILLS_OVERVIEW_FAILED'; - -export const UPDATE_INCOME_STATEMENTS_REQUESTED = 'UPDATE_INCOME_STATEMENTS_REQUESTED'; -export const UPDATE_INCOME_STATEMENTS_SUCCEEDED = 'UPDATE_INCOME_STATEMENTS_SUCCEEDED'; -export const UPDATE_INCOME_STATEMENTS_FAILED = 'UPDATE_INCOME_STATEMENTS_FAILED'; - -export const UPDATE_CASH_BALANCE_REQUESTED = 'UPDATE_CASH_BALANCE_REQUESTED'; -export const UPDATE_CASH_BALANCE_SUCCEEDED = 'UPDATE_CASH_BALANCE_SUCCEEDED'; -export const UPDATE_CASH_BALANCE_FAILED = 'UPDATE_CASH_BALANCE_FAILED'; - -export const UPDATE_LIABILITIES_REQUESTED = 'UPDATE_LIABILITIES_REQUESTED'; -export const UPDATE_LIABILITIES_SUCCEEDED = 'UPDATE_LIABILITIES_SUCCEEDED'; -export const UPDATE_LIABILITIES_FAILED = 'UPDATE_LIABILITIES_FAILED'; - -export const UPDATE_LOAN_OPTIONS_REQUESTED = 'UPDATE_LOAN_OPTIONS_REQUESTED'; -export const UPDATE_LOAN_OPTIONS_SUCCEEDED = 'UPDATE_LOAN_OPTIONS_SUCCEEDED'; -export const UPDATE_LOAN_OPTIONS_FAILED = 'UPDATE_LOAN_OPTIONS_FAILED'; - -export const UPDATE_CUSTOMER_PREFERENCE_REQUESTED = 'UPDATE_CUSTOMER_PREFERENCE_REQUESTED'; -export const UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED = 'UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED'; -export const UPDATE_CUSTOMER_PREFERENCE_FAILED = 'UPDATE_CUSTOMER_PREFERENCE_FAILED'; - -export const BUDGET_SIMULATOR_REQUESTED = 'BUDGET_SIMULATOR_REQUESTED'; -export const BUDGET_SIMULATOR_SUCCEEDED = 'BUDGET_SIMULATOR_SUCCEEDED'; -export const BUDGET_SIMULATOR_FAILED = 'BUDGET_SIMULATOR_FAILED'; diff --git a/src/containers/Blocnote/index.js b/src/containers/Blocnote/index.js index 0c977df3..4135a9c0 100644 --- a/src/containers/Blocnote/index.js +++ b/src/containers/Blocnote/index.js @@ -34,10 +34,10 @@ class Blocnote extends Component { }; if (data.instance.if_completed) { - dataDic.financialInputs.name = ( + dataDic.name = ( Financial Inputs ); - dataDic.financialInputs.status = (Complete); + dataDic.status = (Complete); dataDic.preliminaryFinance.name = ( Preliminary Finance ); @@ -47,13 +47,13 @@ class Blocnote extends Component { ); dataDic.budgetSimilator.status = (OK); } else { - dataDic.financialInputs.name = ( + dataDic.name = ( Financial Inputs ); if (data.instance.if_started) { - dataDic.financialInputs.status = (Started but not complete.); + dataDic.status = (Started but not complete.); } else { - dataDic.financialInputs.status = (Not Started.); + dataDic.status = (Not Started.); } dataDic.preliminaryFinance.name = (Preliminary Finance); const prelimItems = data.instance.not_saved_list_for_prelim.map((item) => { @@ -107,10 +107,10 @@ class Blocnote extends Component { - {dataDic.financialInputs.name} + {dataDic.name} - {dataDic.financialInputs.status} + {dataDic.status} diff --git a/src/containers/Blocnote/reducer.js b/src/containers/Blocnote/reducer.js index 36457984..43605256 100644 --- a/src/containers/Blocnote/reducer.js +++ b/src/containers/Blocnote/reducer.js @@ -1,68 +1,7 @@ -import { - LANDING_DATA_REQUESTED, - LANDING_DATA_SUCCEEDED, - LANDING_DATA_FAILED, - FINANCE_OVERVIEW_REQUESTED, - FINANCE_OVERVIEW_SUCCEEDED, - FINANCE_OVERVIEW_FAILED, - BILLS_REQUESTED, - BILLS_SUCCEEDED, - BILLS_FAILED, - BILLS_OVERVIEW_REQUESTED, - BILLS_OVERVIEW_SUCCEEDED, - BILLS_OVERVIEW_FAILED, - BILLS_SUMMARY_REQUESTED, - BILLS_SUMMARY_SUCCEEDED, - BILLS_SUMMARY_FAILED, - CASH_BALANCE_REQUESTED, - CASH_BALANCE_SUCCEEDED, - CASH_BALANCE_FAILED, - CUSTOMER_PREFERENCE_REQUESTED, - CUSTOMER_PREFERENCE_SUCCEEDED, - CUSTOMER_PREFERENCE_FAILED, - INCOME_STATEMENT_REQUESTED, - INCOME_STATEMENT_SUCCEEDED, - INCOME_STATEMENT_FAILED, - LOAN_OPTIONS_REQUESTED, - LOAN_OPTIONS_SUCCEEDED, - LOAN_OPTIONS_FAILED, - LIABILITIES_REQUESTED, - LIABILITIES_SUCCEEDED, - LIABILITIES_FAILED, - BUDGET_SIMULATOR_REQUESTED, - BUDGET_SIMULATOR_SUCCEEDED, - BUDGET_SIMULATOR_FAILED, - CREATE_BILLS_SUMMARY_REQUESTED, - CREATE_BILLS_SUMMARY_SUCCEEDED, - CREATE_BILLS_SUMMARY_FAILED, - UPDATE_BILLS_SUMMARY_REQUESTED, - UPDATE_BILLS_SUMMARY_SUCCEEDED, - UPDATE_BILLS_SUMMARY_FAILED, - DELETE_BILLS_SUMMARY_REQUESTED, - DELETE_BILLS_SUMMARY_SUCCEEDED, - DELETE_BILLS_SUMMARY_FAILED, - CREATE_BILLS_OVERVIEW_REQUESTED, - CREATE_BILLS_OVERVIEW_SUCCEEDED, - CREATE_BILLS_OVERVIEW_FAILED, - UPDATE_BILLS_OVERVIEW_REQUESTED, - UPDATE_BILLS_OVERVIEW_SUCCEEDED, - UPDATE_BILLS_OVERVIEW_FAILED, - UPDATE_INCOME_STATEMENTS_REQUESTED, - UPDATE_INCOME_STATEMENTS_SUCCEEDED, - UPDATE_INCOME_STATEMENTS_FAILED, - UPDATE_CASH_BALANCE_REQUESTED, - UPDATE_CASH_BALANCE_SUCCEEDED, - UPDATE_CASH_BALANCE_FAILED, - UPDATE_LIABILITIES_REQUESTED, - UPDATE_LIABILITIES_SUCCEEDED, - UPDATE_LIABILITIES_FAILED, - UPDATE_LOAN_OPTIONS_REQUESTED, - UPDATE_LOAN_OPTIONS_SUCCEEDED, - UPDATE_LOAN_OPTIONS_FAILED, - UPDATE_CUSTOMER_PREFERENCE_REQUESTED, - UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED, - UPDATE_CUSTOMER_PREFERENCE_FAILED, -} from './constants'; +import * as LandingPage from './constants'; +import * as FinancialInputs from './FinancialInputs/constants'; +import * as PreliminaryFinance from './PreliminaryFinance/constants'; +import * as BudgetSimulator from './BudgetSimulator/constants'; const blocnoteInitialState = { landingData: { @@ -110,6 +49,11 @@ const blocnoteInitialState = { error: false, data: null, }, + scenario: { + loading: false, + error: false, + data: null, + }, budgetSimulator: { loading: false, error: false, @@ -120,7 +64,7 @@ const blocnoteInitialState = { export default function (state = blocnoteInitialState, action) { console.log(state); // eslint-disable-line switch (action.type) { - case LANDING_DATA_REQUESTED: + case LandingPage.LANDING_DATA_REQUESTED: return { ...state, landingData: { @@ -130,7 +74,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case LANDING_DATA_SUCCEEDED: + case LandingPage.LANDING_DATA_SUCCEEDED: return { ...state, landingData: { @@ -140,7 +84,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case LANDING_DATA_FAILED: + case LandingPage.LANDING_DATA_FAILED: return { ...state, landingData: { @@ -149,7 +93,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case FINANCE_OVERVIEW_REQUESTED: + case FinancialInputs.FINANCE_OVERVIEW_REQUESTED: return { ...state, fianceOverview: { @@ -159,7 +103,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case FINANCE_OVERVIEW_SUCCEEDED: + case FinancialInputs.FINANCE_OVERVIEW_SUCCEEDED: return { ...state, fianceOverview: { @@ -169,7 +113,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case FINANCE_OVERVIEW_FAILED: + case FinancialInputs.FINANCE_OVERVIEW_FAILED: return { ...state, fianceOverview: { @@ -178,7 +122,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case BILLS_REQUESTED: + case FinancialInputs.BILLS_REQUESTED: return { ...state, bills: { @@ -188,7 +132,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case BILLS_SUCCEEDED: + case FinancialInputs.BILLS_SUCCEEDED: return { ...state, bills: { @@ -198,7 +142,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case BILLS_FAILED: + case FinancialInputs.BILLS_FAILED: return { ...state, bills: { @@ -207,7 +151,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case BILLS_OVERVIEW_REQUESTED: + case FinancialInputs.BILLS_OVERVIEW_REQUESTED: return { ...state, billsOverview: { @@ -217,7 +161,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case BILLS_OVERVIEW_SUCCEEDED: + case FinancialInputs.BILLS_OVERVIEW_SUCCEEDED: return { ...state, billsOverview: { @@ -227,7 +171,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case BILLS_OVERVIEW_FAILED: + case FinancialInputs.BILLS_OVERVIEW_FAILED: return { ...state, billsOverview: { @@ -236,7 +180,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case BILLS_SUMMARY_REQUESTED: + case FinancialInputs.BILLS_SUMMARY_REQUESTED: return { ...state, billsSummary: { @@ -246,7 +190,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case BILLS_SUMMARY_SUCCEEDED: + case FinancialInputs.BILLS_SUMMARY_SUCCEEDED: return { ...state, billsSummary: { @@ -256,7 +200,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case BILLS_SUMMARY_FAILED: + case FinancialInputs.BILLS_SUMMARY_FAILED: return { ...state, billsSummary: { @@ -265,7 +209,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case CREATE_BILLS_SUMMARY_REQUESTED: + case FinancialInputs.CREATE_BILLS_SUMMARY_REQUESTED: return { ...state, billsSummary: { @@ -275,7 +219,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case CREATE_BILLS_SUMMARY_SUCCEEDED: + case FinancialInputs.CREATE_BILLS_SUMMARY_SUCCEEDED: // const utilityType = action.instance.utility_type; console.log(state.billsSummary.data); // eslint-disable-line // console.log([ @@ -309,7 +253,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case CREATE_BILLS_SUMMARY_FAILED: + case FinancialInputs.CREATE_BILLS_SUMMARY_FAILED: return { ...state, billsSummary: { @@ -318,7 +262,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_BILLS_SUMMARY_REQUESTED: + case FinancialInputs.UPDATE_BILLS_SUMMARY_REQUESTED: return { ...state, billsSummary: { @@ -328,7 +272,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_BILLS_SUMMARY_SUCCEEDED: + case FinancialInputs.UPDATE_BILLS_SUMMARY_SUCCEEDED: return { ...state, billsSummary: { @@ -338,7 +282,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_BILLS_SUMMARY_FAILED: + case FinancialInputs.UPDATE_BILLS_SUMMARY_FAILED: return { ...state, billsSummary: { @@ -347,7 +291,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case DELETE_BILLS_SUMMARY_REQUESTED: + case FinancialInputs.DELETE_BILLS_SUMMARY_REQUESTED: return { ...state, billsSummary: { @@ -357,7 +301,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case DELETE_BILLS_SUMMARY_SUCCEEDED: + case FinancialInputs.DELETE_BILLS_SUMMARY_SUCCEEDED: return { ...state, billsSummary: { @@ -367,7 +311,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case DELETE_BILLS_SUMMARY_FAILED: + case FinancialInputs.DELETE_BILLS_SUMMARY_FAILED: return { ...state, billsSummary: { @@ -376,7 +320,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case LOAN_OPTIONS_REQUESTED: + case FinancialInputs.LOAN_OPTIONS_REQUESTED: return { ...state, loanOptions: { @@ -386,7 +330,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case LOAN_OPTIONS_SUCCEEDED: + case FinancialInputs.LOAN_OPTIONS_SUCCEEDED: return { ...state, loanOptions: { @@ -396,7 +340,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case LOAN_OPTIONS_FAILED: + case FinancialInputs.LOAN_OPTIONS_FAILED: return { ...state, loanOptions: { @@ -405,7 +349,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case CASH_BALANCE_REQUESTED: + case FinancialInputs.CASH_BALANCE_REQUESTED: return { ...state, cashBalance: { @@ -415,7 +359,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case CASH_BALANCE_SUCCEEDED: + case FinancialInputs.CASH_BALANCE_SUCCEEDED: return { ...state, cashBalance: { @@ -425,7 +369,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case CASH_BALANCE_FAILED: + case FinancialInputs.CASH_BALANCE_FAILED: return { ...state, cashBalance: { @@ -434,7 +378,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case INCOME_STATEMENT_REQUESTED: + case FinancialInputs.INCOME_STATEMENT_REQUESTED: return { ...state, incomeStatement: { @@ -444,7 +388,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case INCOME_STATEMENT_SUCCEEDED: + case FinancialInputs.INCOME_STATEMENT_SUCCEEDED: return { ...state, incomeStatement: { @@ -454,7 +398,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case INCOME_STATEMENT_FAILED: + case FinancialInputs.INCOME_STATEMENT_FAILED: return { ...state, incomeStatement: { @@ -463,7 +407,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case LIABILITIES_REQUESTED: + case FinancialInputs.LIABILITIES_REQUESTED: return { ...state, liabilities: { @@ -473,7 +417,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case LIABILITIES_SUCCEEDED: + case FinancialInputs.LIABILITIES_SUCCEEDED: return { ...state, liabilities: { @@ -483,7 +427,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case LIABILITIES_FAILED: + case FinancialInputs.LIABILITIES_FAILED: return { ...state, liabilities: { @@ -492,7 +436,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case CUSTOMER_PREFERENCE_REQUESTED: + case FinancialInputs.CUSTOMER_PREFERENCE_REQUESTED: return { ...state, customerPreference: { @@ -502,7 +446,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case CUSTOMER_PREFERENCE_SUCCEEDED: + case FinancialInputs.CUSTOMER_PREFERENCE_SUCCEEDED: return { ...state, customerPreference: { @@ -512,7 +456,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case CUSTOMER_PREFERENCE_FAILED: + case FinancialInputs.CUSTOMER_PREFERENCE_FAILED: return { ...state, customerPreference: { @@ -521,7 +465,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case CREATE_BILLS_OVERVIEW_REQUESTED: + case FinancialInputs.CREATE_BILLS_OVERVIEW_REQUESTED: return { ...state, billsOverview: { @@ -531,7 +475,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case CREATE_BILLS_OVERVIEW_SUCCEEDED: + case FinancialInputs.CREATE_BILLS_OVERVIEW_SUCCEEDED: return { ...state, billsOverview: { @@ -541,7 +485,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case CREATE_BILLS_OVERVIEW_FAILED: + case FinancialInputs.CREATE_BILLS_OVERVIEW_FAILED: return { ...state, billsOverview: { @@ -550,7 +494,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_BILLS_OVERVIEW_REQUESTED: + case FinancialInputs.UPDATE_BILLS_OVERVIEW_REQUESTED: return { ...state, billsOverview: { @@ -560,7 +504,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_BILLS_OVERVIEW_SUCCEEDED: + case FinancialInputs.UPDATE_BILLS_OVERVIEW_SUCCEEDED: console.log(action); // eslint-disable-line console.log(state); // eslint-disable-line return { @@ -572,7 +516,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_BILLS_OVERVIEW_FAILED: + case FinancialInputs.UPDATE_BILLS_OVERVIEW_FAILED: return { ...state, billsOverview: { ...state.billsOverview, @@ -581,7 +525,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_INCOME_STATEMENTS_REQUESTED: + case FinancialInputs.UPDATE_INCOME_STATEMENTS_REQUESTED: return { ...state, incomeStatement: { @@ -591,7 +535,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_INCOME_STATEMENTS_SUCCEEDED: + case FinancialInputs.UPDATE_INCOME_STATEMENTS_SUCCEEDED: console.log(action); // eslint-disable-line console.log(state); // eslint-disable-line return { @@ -603,7 +547,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_INCOME_STATEMENTS_FAILED: + case FinancialInputs.UPDATE_INCOME_STATEMENTS_FAILED: return { ...state, incomeStatement: { ...state.incomeStatement, @@ -612,7 +556,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_CASH_BALANCE_REQUESTED: + case FinancialInputs.UPDATE_CASH_BALANCE_REQUESTED: return { ...state, cashBalance: { @@ -622,7 +566,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_CASH_BALANCE_SUCCEEDED: + case FinancialInputs.UPDATE_CASH_BALANCE_SUCCEEDED: console.log(action); // eslint-disable-line console.log(state); // eslint-disable-line return { @@ -634,7 +578,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_CASH_BALANCE_FAILED: + case FinancialInputs.UPDATE_CASH_BALANCE_FAILED: return { ...state, cashBalance: { ...state.cashBalance, @@ -643,7 +587,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_LIABILITIES_REQUESTED: + case FinancialInputs.UPDATE_LIABILITIES_REQUESTED: return { ...state, liabilities: { @@ -653,7 +597,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_LIABILITIES_SUCCEEDED: + case FinancialInputs.UPDATE_LIABILITIES_SUCCEEDED: console.log(action); // eslint-disable-line console.log(state); // eslint-disable-line return { @@ -665,7 +609,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_LIABILITIES_FAILED: + case FinancialInputs.UPDATE_LIABILITIES_FAILED: return { ...state, liabilities: { ...state.liabilities, @@ -674,7 +618,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_LOAN_OPTIONS_REQUESTED: + case FinancialInputs.UPDATE_LOAN_OPTIONS_REQUESTED: return { ...state, loanOptions: { @@ -684,7 +628,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_LOAN_OPTIONS_SUCCEEDED: + case FinancialInputs.UPDATE_LOAN_OPTIONS_SUCCEEDED: console.log(action); // eslint-disable-line console.log(state); // eslint-disable-line return { @@ -696,7 +640,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_LOAN_OPTIONS_FAILED: + case FinancialInputs.UPDATE_LOAN_OPTIONS_FAILED: return { ...state, loanOptions: { ...state.loanOptions, @@ -705,7 +649,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_CUSTOMER_PREFERENCE_REQUESTED: + case FinancialInputs.UPDATE_CUSTOMER_PREFERENCE_REQUESTED: return { ...state, customerPreference: { @@ -715,7 +659,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED: + case FinancialInputs.UPDATE_CUSTOMER_PREFERENCE_SUCCEEDED: console.log(action); // eslint-disable-line console.log(state); // eslint-disable-line return { @@ -727,7 +671,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case UPDATE_CUSTOMER_PREFERENCE_FAILED: + case FinancialInputs.UPDATE_CUSTOMER_PREFERENCE_FAILED: return { ...state, customerPreference: { ...state.customerPreference, @@ -736,7 +680,38 @@ export default function (state = blocnoteInitialState, action) { }, }; - case BUDGET_SIMULATOR_REQUESTED: + case PreliminaryFinance.SCENARIO_REQUESTED: + return { + ...state, + scenario: { + ...state.scenario, + loading: true, + error: false, + }, + }; + + case PreliminaryFinance.SCENARIO_SUCCEEDED: + console.log(action); // eslint-disable-line + console.log(state); // eslint-disable-line + return { + ...state, + scenario: { + data: { instance: action.instance }, + loading: false, + error: false, + }, + }; + + case PreliminaryFinance.SCENARIO_FAILED: + return { ...state, + scenario: { + ...state.scenario, + loading: false, + error: action.error, + }, + }; + + case BudgetSimulator.BUDGET_SIMULATOR_REQUESTED: return { ...state, budgetSimulator: { @@ -746,7 +721,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case BUDGET_SIMULATOR_SUCCEEDED: + case BudgetSimulator.BUDGET_SIMULATOR_SUCCEEDED: return { ...state, budgetSimulator: { @@ -756,7 +731,7 @@ export default function (state = blocnoteInitialState, action) { }, }; - case BUDGET_SIMULATOR_FAILED: + case BudgetSimulator.BUDGET_SIMULATOR_FAILED: return { ...state, budgetSimulator: { diff --git a/src/containers/Blocnote/sagas.js b/src/containers/Blocnote/sagas.js index f3324998..7c7daae6 100644 --- a/src/containers/Blocnote/sagas.js +++ b/src/containers/Blocnote/sagas.js @@ -2,76 +2,44 @@ import { call, put, takeEvery } from 'redux-saga/effects'; import SagaRequests from '../../utils/sagaRequests'; import request from '../../utils/request'; import { getHeaders } from '../../utils/restServices'; +import * as LandingPage from './constants'; +import * as FinancialInputs from './FinancialInputs/constants'; +import * as PreliminaryFinance from './PreliminaryFinance/constants'; +import * as BudgetSimulator from './BudgetSimulator/constants'; import { - LANDING_DATA_REQUESTED, - FINANCE_OVERVIEW_REQUESTED, - BILLS_REQUESTED, - BILLS_OVERVIEW_REQUESTED, - BILLS_SUMMARY_REQUESTED, - LOAN_OPTIONS_REQUESTED, - CASH_BALANCE_REQUESTED, - INCOME_STATEMENT_REQUESTED, - LIABILITIES_REQUESTED, - CUSTOMER_PREFERENCE_REQUESTED, - BUDGET_SIMULATOR_REQUESTED, - CREATE_BILLS_SUMMARY_REQUESTED, - UPDATE_BILLS_SUMMARY_REQUESTED, - DELETE_BILLS_SUMMARY_REQUESTED, - CREATE_BILLS_OVERVIEW_REQUESTED, - UPDATE_BILLS_OVERVIEW_REQUESTED, - UPDATE_INCOME_STATEMENTS_REQUESTED, - UPDATE_CASH_BALANCE_REQUESTED, - UPDATE_LIABILITIES_REQUESTED, - UPDATE_LOAN_OPTIONS_REQUESTED, - UPDATE_CUSTOMER_PREFERENCE_REQUESTED, -} from './constants'; + landingDataLoaded, landingDataFailed, +} from './actions'; import { - landingDataLoaded, - landingDataFailed, - financeOverviewLoaded, - financeOverviewFailed, - billsLoaded, - billsFailed, - billsOverviewLoaded, - billsOverviewFailed, - billsSummaryLoaded, - billsSummaryFailed, - incomeStatementLoaded, - incomeStatementFailed, - loanOptionsLoaded, - loanOptionsFailed, - cashBalanceLoaded, - cashBalanceFailed, - liabilitiesLoaded, - liabilitiesFailed, - customerPreferenceLoaded, - customerPreferenceFailed, - budgetSimulatorLoaded, - budgetSimulatorFailed, - createBillsSummarySucceeded, - createBillsSummaryFailed, - updateBillsSummarySucceeded, - updateBillsSummaryFailed, - deleteBillsSummarySucceeded, - deleteBillsSummaryFailed, - createBillsOverviewSucceeded, - createBillsOverviewFailed, - updateBillsOverviewSucceeded, - updateBillsOverviewFailed, - updateIncomeStatementsSucceeded, - updateIncomeStatementsFailed, - updateCashBalanceSucceeded, - updateCashBalanceFailed, - updateLiabilitiesSucceeded, - updateLiabilitiesFailed, - updateLoanOptionsSucceeded, - updateLoanOptionsFailed, - updateCustomerPreferenceSucceeded, - updateCustomerPreferenceFailed, -} from './actions'; + financeOverviewLoaded, financeOverviewFailed, + billsLoaded, billsFailed, + billsOverviewLoaded, billsOverviewFailed, + billsSummaryLoaded, billsSummaryFailed, + incomeStatementLoaded, incomeStatementFailed, + loanOptionsLoaded, loanOptionsFailed, + cashBalanceLoaded, cashBalanceFailed, + liabilitiesLoaded, liabilitiesFailed, + customerPreferenceLoaded, customerPreferenceFailed, + createBillsSummarySucceeded, createBillsSummaryFailed, + updateBillsSummarySucceeded, updateBillsSummaryFailed, + deleteBillsSummarySucceeded, deleteBillsSummaryFailed, + createBillsOverviewSucceeded, createBillsOverviewFailed, + updateBillsOverviewSucceeded, updateBillsOverviewFailed, + updateIncomeStatementsSucceeded, updateIncomeStatementsFailed, + updateCashBalanceSucceeded, updateCashBalanceFailed, + updateLiabilitiesSucceeded, updateLiabilitiesFailed, + updateLoanOptionsSucceeded, updateLoanOptionsFailed, + updateCustomerPreferenceSucceeded, updateCustomerPreferenceFailed, +} from './FinancialInputs/actions'; + +import { + scenarioLoaded, scenarioFailed, +} from './PreliminaryFinance/actions'; +import { + budgetSimulatorLoaded, budgetSimulatorFailed, +} from './BudgetSimulator/actions'; function* loadLandingData(action) { const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/data/`; @@ -335,28 +303,36 @@ function* updateCustomerPreference(action) { } } +function* loadScenario(action) { + console.log(action); // eslint-disable-line + console.log(`${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/preliminary-finance/scenario/`); // eslint-disable-line + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/preliminary-finance/scenario/`; + yield SagaRequests.get(action, url, scenarioLoaded, scenarioFailed); +} + function* blocnoteWatcher() { - yield takeEvery(LANDING_DATA_REQUESTED, loadLandingData); - yield takeEvery(FINANCE_OVERVIEW_REQUESTED, loadFinanceOverview); - yield takeEvery(BILLS_REQUESTED, loadBills); - yield takeEvery(BILLS_OVERVIEW_REQUESTED, loadBillsOverview); - yield takeEvery(BILLS_SUMMARY_REQUESTED, loadBillsSummary); - yield takeEvery(CASH_BALANCE_REQUESTED, loadCashBalance); - yield takeEvery(LOAN_OPTIONS_REQUESTED, loadLoanOptions); - yield takeEvery(INCOME_STATEMENT_REQUESTED, loadIncomeStatement); - yield takeEvery(CUSTOMER_PREFERENCE_REQUESTED, loadCustomerPreference); - yield takeEvery(LIABILITIES_REQUESTED, loadLiabilities); - yield takeEvery(BUDGET_SIMULATOR_REQUESTED, loadBudgetSimulator); - yield takeEvery(CREATE_BILLS_SUMMARY_REQUESTED, createBillsSummary); - yield takeEvery(UPDATE_BILLS_SUMMARY_REQUESTED, updateBillsSummary); - yield takeEvery(DELETE_BILLS_SUMMARY_REQUESTED, deleteBillsSummary); - yield takeEvery(CREATE_BILLS_OVERVIEW_REQUESTED, createBillsOverview); - yield takeEvery(UPDATE_BILLS_OVERVIEW_REQUESTED, updateBillsOverview); - yield takeEvery(UPDATE_INCOME_STATEMENTS_REQUESTED, updateIncomeStatements); - yield takeEvery(UPDATE_CASH_BALANCE_REQUESTED, updateCashBalance); - yield takeEvery(UPDATE_LIABILITIES_REQUESTED, updateLiabilities); - yield takeEvery(UPDATE_LOAN_OPTIONS_REQUESTED, updateLoanOptions); - yield takeEvery(UPDATE_CUSTOMER_PREFERENCE_REQUESTED, updateCustomerPreference); + yield takeEvery(LandingPage.LANDING_DATA_REQUESTED, loadLandingData); + yield takeEvery(FinancialInputs.FINANCE_OVERVIEW_REQUESTED, loadFinanceOverview); + yield takeEvery(FinancialInputs.BILLS_REQUESTED, loadBills); + yield takeEvery(FinancialInputs.BILLS_OVERVIEW_REQUESTED, loadBillsOverview); + yield takeEvery(FinancialInputs.BILLS_SUMMARY_REQUESTED, loadBillsSummary); + yield takeEvery(FinancialInputs.CASH_BALANCE_REQUESTED, loadCashBalance); + yield takeEvery(FinancialInputs.LOAN_OPTIONS_REQUESTED, loadLoanOptions); + yield takeEvery(FinancialInputs.INCOME_STATEMENT_REQUESTED, loadIncomeStatement); + yield takeEvery(FinancialInputs.CUSTOMER_PREFERENCE_REQUESTED, loadCustomerPreference); + yield takeEvery(FinancialInputs.LIABILITIES_REQUESTED, loadLiabilities); + yield takeEvery(FinancialInputs.CREATE_BILLS_SUMMARY_REQUESTED, createBillsSummary); + yield takeEvery(FinancialInputs.UPDATE_BILLS_SUMMARY_REQUESTED, updateBillsSummary); + yield takeEvery(FinancialInputs.DELETE_BILLS_SUMMARY_REQUESTED, deleteBillsSummary); + yield takeEvery(FinancialInputs.CREATE_BILLS_OVERVIEW_REQUESTED, createBillsOverview); + yield takeEvery(FinancialInputs.UPDATE_BILLS_OVERVIEW_REQUESTED, updateBillsOverview); + yield takeEvery(FinancialInputs.UPDATE_INCOME_STATEMENTS_REQUESTED, updateIncomeStatements); + yield takeEvery(FinancialInputs.UPDATE_CASH_BALANCE_REQUESTED, updateCashBalance); + yield takeEvery(FinancialInputs.UPDATE_LIABILITIES_REQUESTED, updateLiabilities); + yield takeEvery(FinancialInputs.UPDATE_LOAN_OPTIONS_REQUESTED, updateLoanOptions); + yield takeEvery(FinancialInputs.UPDATE_CUSTOMER_PREFERENCE_REQUESTED, updateCustomerPreference); + yield takeEvery(PreliminaryFinance.SCENARIO_REQUESTED, loadScenario); + yield takeEvery(BudgetSimulator.BUDGET_SIMULATOR_REQUESTED, loadBudgetSimulator); } export default blocnoteWatcher; -- GitLab From a776e866dc4a78956ff9b89b7d254b6730f43a8d Mon Sep 17 00:00:00 2001 From: akkking Date: Fri, 19 Apr 2019 14:39:05 -0400 Subject: [PATCH 53/79] Move cost and saving estimations to container --- src/components/Blocnote/PreliminaryFinance.js | 6 +- .../FinancialInputs/BillsSummaryTable.js | 148 +++++++++++------ .../PreliminaryFinance/CostEstimation.js | 128 +++++++++++++++ .../PreliminaryFinance/CostEstimationRow.js | 73 +++++++++ .../PreliminaryFinance/InputScenario.js | 151 ++++++++++++++++++ .../PreliminaryFinance/SavingEstimation.js | 84 ++++++++++ .../PreliminaryFinance/SavingEstimationRow.js | 83 ++++++++++ .../PreliminaryFinance/SelectScenario.js | 66 ++++++++ .../Blocnote/PreliminaryFinance/actions.js | 4 + .../Blocnote/PreliminaryFinance/constants.js | 4 + .../Blocnote/PreliminaryFinance/index.js | 32 ++-- src/containers/Blocnote/index.js | 5 +- src/containers/Blocnote/reducer.js | 31 ++++ src/containers/Blocnote/sagas.js | 22 +++ 14 files changed, 760 insertions(+), 77 deletions(-) create mode 100644 src/containers/Blocnote/PreliminaryFinance/CostEstimation.js create mode 100644 src/containers/Blocnote/PreliminaryFinance/CostEstimationRow.js create mode 100644 src/containers/Blocnote/PreliminaryFinance/InputScenario.js create mode 100644 src/containers/Blocnote/PreliminaryFinance/SavingEstimation.js create mode 100644 src/containers/Blocnote/PreliminaryFinance/SavingEstimationRow.js create mode 100644 src/containers/Blocnote/PreliminaryFinance/SelectScenario.js diff --git a/src/components/Blocnote/PreliminaryFinance.js b/src/components/Blocnote/PreliminaryFinance.js index cd41a43d..93c1bea8 100644 --- a/src/components/Blocnote/PreliminaryFinance.js +++ b/src/components/Blocnote/PreliminaryFinance.js @@ -4,8 +4,6 @@ import LinkBarDetail from '../LinkBarDetail'; import ErrorAlert from '../ErrorAlert'; import Loading from '../Loading'; import './styles.css'; -import CostEstimation from './PreliminaryFinance/CostEstimation'; -import SavingEstimation from './PreliminaryFinance/SavingEstimation'; import LoanSummary from './PreliminaryFinance/LoanSummary'; import ProjectEconomics from './PreliminaryFinance/ProjectEconomics'; import SavingsScheduleChart from './PreliminaryFinance/SavingsScheduleChart'; @@ -17,8 +15,8 @@ import BudgetChart from './PreliminaryFinance/BudgetChart'; import request from '../../utils/request'; import { getHeaders, blocnoteURL } from '../../utils/restServices'; import DownPayment from './PreliminaryFinance/DownPayment'; -import SelectScenario from './PreliminaryFinance/SelectScenario'; -import SaveScenario from './PreliminaryFinance/SaveScenario'; +import SelectScenario from '../../containers/Blocnote/PreliminaryFinance/SelectScenario'; +import SaveScenario from '../../containers/Blocnote/PreliminaryFinance/InputScenario'; /* eslint-disable react/sort-comp */ diff --git a/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js index f821c2f4..655be0a0 100644 --- a/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -3,9 +3,9 @@ import PropTypes from 'prop-types'; import { Button, Table, - InputGroup, - InputGroupAddon, - Input, + // InputGroup, + // InputGroupAddon, + // Input, } from 'reactstrap'; import BillsSummaryRow from './BillsSummaryRow'; import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; @@ -81,11 +81,70 @@ class BillsSummaryTable extends Component { this.setState({ [event.target.name]: event.target.value }); } - render() { - const tableHeaderStyle = { - textAlign: 'left', - fontWeight: 'bold', + addRow = () => { + const newBillData = { + id: this.state.id, + year: this.state.year, + charge: this.state.charge, }; + const billDataCopy = this.state.billData; + billDataCopy.push(newBillData); + this.setState({ billData: billDataCopy }, () => { + console.log(this.state.billData, 'New bill added!'); // eslint-disable-line + this.setState({ + id: this.state.id + 1, + year: '', + charge: '', + }); + }); + } + + // addRow = () => { + // rows.push( + // + // + // + // + // Year + // + // + // + // + // + // + // + // $ + // + // + // + // + // + // {' '} + // + // + // ); + // } + + render() { + // const tableHeaderStyle = { + // textAlign: 'left', + // fontWeight: 'bold', + // }; let rows = []; if (this.state.billData !== []) { @@ -104,44 +163,6 @@ class BillsSummaryTable extends Component { /> ); }); - rows.push( - - - - - Year - - - - - - - - $ - - - - - - {' '} - - - ); } let messageStyle = {}; @@ -166,23 +187,50 @@ class BillsSummaryTable extends Component { return (
    - +
    - - {rows} + + + + +
    + {this.props.billName} Annual Charge -    + />{' '}{' '}
    + +
    ); diff --git a/src/containers/Blocnote/PreliminaryFinance/CostEstimation.js b/src/containers/Blocnote/PreliminaryFinance/CostEstimation.js new file mode 100644 index 00000000..0b3843a2 --- /dev/null +++ b/src/containers/Blocnote/PreliminaryFinance/CostEstimation.js @@ -0,0 +1,128 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Table, + Button, +} from 'reactstrap'; +import CostEstimationRow from './CostEstimationRow'; + + +class CostEstimation extends Component { + constructor(props) { + super(props); + this.addRow = this.addRow.bind(); + this.state = { + costEstimation: props.data, + item: '', + cost: '', + }; + } + + addRow = () => { + const newEstimation = { + id: this.state.id, + balanceAmount: this.state.item, + statementDate: this.state.cost, + }; + const costEstimationCopy = this.state.costEstimation; + costEstimationCopy.push(newEstimation); + this.setState({ costEstimation: costEstimationCopy }, () => { + console.log(this.state.costEstimation, 'New cost estimation added!'); // eslint-disable-line + this.setState({ + id: this.state.id + 1, + item: '', + cost: '', + }); + }); + } + + render() { + let rows = []; + const tdStyle = { + textAlign: 'center', + padding: '10px 0 10px', + }; + + if (this.state.costEstimation !== null) { + rows = this.state.costEstimation.map((costItem) => { + return ( + + ); + }); + // rows.push( + // + // ); + } + + return ( +
    + + + + + + + + + + + + + {rows} + + + + + + +
    + Cost Estimation +
    ItemEstimated CostOption
    + +
    +
    + ); + } +} + +CostEstimation.propTypes = { + blockStyle: PropTypes.string, + // headerStyle: PropTypes.string, + data: PropTypes.arrayOf, +}; + +export default CostEstimation; diff --git a/src/containers/Blocnote/PreliminaryFinance/CostEstimationRow.js b/src/containers/Blocnote/PreliminaryFinance/CostEstimationRow.js new file mode 100644 index 00000000..7ef05c5b --- /dev/null +++ b/src/containers/Blocnote/PreliminaryFinance/CostEstimationRow.js @@ -0,0 +1,73 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Input, + Button, +} from 'reactstrap'; + +class CostEstimationRow extends Component { + constructor(props) { + super(props); + this.handleOnChange = this.handleOnChange.bind(); + this.state = { + id: props.id, + item: props.item, + cost: props.cost, + }; + } + + handleOnChange = (event) => { + this.setState({ [event.target.name]: event.target.value }); + } + + render() { + return ( + + + + + +
    +
    $
    + +
    + + + + + + ); + } +} + +CostEstimationRow.propTypes = { + id: PropTypes.number, + item: PropTypes.string, + cost: PropTypes.number, + buttonColor: PropTypes.string, + buttonValue: PropTypes.string, +}; + +export default CostEstimationRow; diff --git a/src/containers/Blocnote/PreliminaryFinance/InputScenario.js b/src/containers/Blocnote/PreliminaryFinance/InputScenario.js new file mode 100644 index 00000000..398a5137 --- /dev/null +++ b/src/containers/Blocnote/PreliminaryFinance/InputScenario.js @@ -0,0 +1,151 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Input, + Button, +} from 'reactstrap'; +import CostEstimation from './CostEstimation'; +import SavingEstimation from './SavingEstimation'; +import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; + +class InputScenario extends Component { + constructor(props) { + super(props); + this.handleOnChange = this.handleOnChange.bind(); + this.state = { + scenarioName: props.scenarioName, + costs: props.costs, + savings: props.savings, + loading: false, + action: null, + }; + } + + handleUpdateScenario = () => { + console.log(this.state.savings); // eslint-disable-line + console.log(this.props.buildingId); // eslint-disable-line + // const data = { + // scenario: this.state.scenarioName, + // cost: this.state.costs, + // savings: this.state.savings, + // }; + this.props.updateScenario( + this.props.buildingId, + ); + this.setState({ action: 'updated' }); + } + + handleOnChange = (event) => { + this.setState({ [event.target.name]: event.target.value }); + } + + render() { + + let messageStyle = {}; + let messageContent = null; + + if (this.props.loading) { + messageContent = 'Processing ...'; + messageStyle = this.props.defaultMessageStyle; + } + + if (this.props.error && typeof this.props.error === 'object') { + messageContent = this.props.error.response.statusText; + messageStyle = this.props.errorMessageStyle; + } + + if (!this.props.error && !this.props.loading + && this.props.data !== null + && this.state.action !== null) { + messageContent = this.state.action.charAt(0).toUpperCase() + this.state.action.slice(1); + messageStyle = this.props.successMessageStyle; + } + + return ( +
    +
    +
    +
    +
    Scenario :
    + +
    +
    +
    + {' '}{' '} + + + {' '} + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    + ); + } +} + +InputScenario.propTypes = { + buildingId: PropTypes.number, + scenarioName: PropTypes.string, + data: PropTypes.objectOf, + blockStyle: PropTypes.shape({ + marginBottom: PropTypes.string, + }), + headerStyle: PropTypes.shape({ + textAlign: PropTypes.string, + marginBottom: PropTypes.string, + }), + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + costs: PropTypes.objectOf, + savings: PropTypes.objectOf, + updateScenario: PropTypes.func, + error: PropTypes.bool, + loading: PropTypes.bool, +}; + +export default InputScenario; diff --git a/src/containers/Blocnote/PreliminaryFinance/SavingEstimation.js b/src/containers/Blocnote/PreliminaryFinance/SavingEstimation.js new file mode 100644 index 00000000..31ae356a --- /dev/null +++ b/src/containers/Blocnote/PreliminaryFinance/SavingEstimation.js @@ -0,0 +1,84 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + Table, +} from 'reactstrap'; +import SavingEstimationRow from './SavingEstimationRow'; + + +class SavingEstimation extends Component { + constructor(props) { + super(props); + + this.state = { + savingsEstimation: props.data, + successMessages: [], + error: false, + loading: false, + }; + } + + render() { + const tdStyle = { + textAlign: 'center', + padding: '10px 0 10px', + }; + const rows = []; + console.log(this.state.savingsEstimation); // eslint-disable-line + + if (this.state.savingsEstimation !== null) { + Object.entries(this.state.savingsEstimation).forEach(([utilityName, utilityData]) => { + rows.push( + + ); + }); + } + + return ( +
    + + + + + + + + + + + + + + {rows} + +
    + Saving Estimation +
    UtilityEstimated SavingsUsed Before RetrofitUsed After Retrofit
    +
    + ); + } +} + +SavingEstimation.propTypes = { + blockStyle: PropTypes.string, + // headerStyle: PropTypes.string, + data: PropTypes.objectOf, +}; + +export default SavingEstimation; diff --git a/src/containers/Blocnote/PreliminaryFinance/SavingEstimationRow.js b/src/containers/Blocnote/PreliminaryFinance/SavingEstimationRow.js new file mode 100644 index 00000000..eaa64e4e --- /dev/null +++ b/src/containers/Blocnote/PreliminaryFinance/SavingEstimationRow.js @@ -0,0 +1,83 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + FormGroup, + Label, + Input, +} from 'reactstrap'; + + +class SavingEstimationRow extends Component { + constructor(props) { + super(props); + this.handleOnChange = this.handleOnChange.bind(); + this.state = { + estimatedSavings: this.props.estimatedSavings, + usedBeforeRetrofit: this.props.usedBeforeRetrofit, + usedAfterRetrofit: this.props.usedAfterRetrofit, + error: false, + loading: false, + }; + } + + handleOnChange = (event) => { + this.setState({ [event.target.name]: event.target.value }); + } + + render() { + return ( + + + {this.props.utilityName} + + +
    + +
    %
    +
    + + + + + + + + + + + + + ); + } +} + +SavingEstimationRow.propTypes = { + tdStyle: PropTypes.string, + utilityName: PropTypes.string, + estimatedSavings: PropTypes.number, + usedBeforeRetrofit: PropTypes.bool, + usedAfterRetrofit: PropTypes.bool, +}; + +export default SavingEstimationRow; diff --git a/src/containers/Blocnote/PreliminaryFinance/SelectScenario.js b/src/containers/Blocnote/PreliminaryFinance/SelectScenario.js new file mode 100644 index 00000000..44ac0af7 --- /dev/null +++ b/src/containers/Blocnote/PreliminaryFinance/SelectScenario.js @@ -0,0 +1,66 @@ +import React, { Component } from 'react'; +import { + Dropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, +} from 'reactstrap'; + + +class SelectScenario extends Component { + constructor(props) { + super(props); + this.toggleScenario = this.toggleScenario.bind(this); + this.changeScenario = this.changeScenario.bind(this); + this.state = { + successMessages: [], + error: false, + loading: false, + scenarioDropdownOpen: false, + scenarioDropDownValue: 'Select Scenario', + scenarioOptions: [ + { id: 'Scenario1', key: 'Scenario1', name: 'Scenario 1' }, + { id: 'Scenario2', key: 'Scenario2', name: 'Scenario 2' }, + ], + }; + } + + toggleScenario() { + this.setState({ + scenarioDropdownOpen: !this.state.scenarioDropdownOpen, + }); + } + + changeScenario(e) { + this.setState({ scenarioDropDownValue: e.currentTarget.textContent }); + } + + render() { + const scenarioOptions = this.state.scenarioOptions.map(e => { + return ( + + {e.name} + + ); + }); + return ( +
    + + + {this.state.scenarioDropDownValue} + + + {scenarioOptions} + + +
    +
    + ); + } +} + +export default SelectScenario; diff --git a/src/containers/Blocnote/PreliminaryFinance/actions.js b/src/containers/Blocnote/PreliminaryFinance/actions.js index 08b48448..afd6f922 100644 --- a/src/containers/Blocnote/PreliminaryFinance/actions.js +++ b/src/containers/Blocnote/PreliminaryFinance/actions.js @@ -4,3 +4,7 @@ import { makeActionCreator } from '../../../utils/reduxHelpers'; export const loadScenario = makeActionCreator(constants.SCENARIO_REQUESTED, 'buildingId'); export const scenarioLoaded = makeActionCreator(constants.SCENARIO_SUCCEEDED, 'instance'); export const scenarioFailed = makeActionCreator(constants.SCENARIO_FAILED, 'error'); + +export const updateScenario = makeActionCreator(constants.UPDATE_SCENARIO_REQUESTED, 'buildingId'); +export const updateScenarioSucceeded = makeActionCreator(constants.UPDATE_SCENARIO_SUCCEEDED, 'instance'); +export const updateScenarioFailed = makeActionCreator(constants.UPDATE_SCENARIO_FAILED, 'error'); diff --git a/src/containers/Blocnote/PreliminaryFinance/constants.js b/src/containers/Blocnote/PreliminaryFinance/constants.js index 7fc90ade..ba798461 100644 --- a/src/containers/Blocnote/PreliminaryFinance/constants.js +++ b/src/containers/Blocnote/PreliminaryFinance/constants.js @@ -1,3 +1,7 @@ export const SCENARIO_REQUESTED = 'SCENARIO_REQUESTED'; export const SCENARIO_SUCCEEDED = 'SCENARIO_SUCCEEDED'; export const SCENARIO_FAILED = 'SCENARIO_FAILED'; + +export const UPDATE_SCENARIO_REQUESTED = 'UPDATE_SCENARIO_REQUESTED'; +export const UPDATE_SCENARIO_SUCCEEDED = 'UPDATE_SCENARIO_SUCCEEDED'; +export const UPDATE_SCENARIO_FAILED = 'UPDATE_SCENARIO_FAILED'; diff --git a/src/containers/Blocnote/PreliminaryFinance/index.js b/src/containers/Blocnote/PreliminaryFinance/index.js index 055b77bc..4312ba0c 100644 --- a/src/containers/Blocnote/PreliminaryFinance/index.js +++ b/src/containers/Blocnote/PreliminaryFinance/index.js @@ -3,16 +3,13 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import LinkBarDetail from '../../../components/LinkBarDetail'; -// import buildingDetailPropTypes from '../Building/propTypes'; import './../styles.css'; import blocnoteProps from './../propTypes'; import Loading from '../../../components/Loading'; import { - loadScenario, + loadScenario, updateScenario, } from './actions'; import BudgetChart from './../../../components/Blocnote/PreliminaryFinance/BudgetChart'; -import CostEstimation from './../../../components/Blocnote/PreliminaryFinance/CostEstimation'; -import SavingEstimation from './../../../components/Blocnote/PreliminaryFinance/SavingEstimation'; import LoanSummary from './../../../components/Blocnote/PreliminaryFinance/LoanSummary'; import ProjectEconomics from './../../../components/Blocnote/PreliminaryFinance/ProjectEconomics'; import SavingsScheduleChart from './../../../components/Blocnote/PreliminaryFinance/SavingsScheduleChart'; @@ -21,8 +18,8 @@ import PostRetrofitIncomeStatement from './../../../components/Blocnote/Prelimin import PriorRetrofitBalanceSheet from './../../../components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet'; import PostRetrofitBalanceSheet from './../../../components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet'; import DownPayment from './../../../components/Blocnote/PreliminaryFinance/DownPayment'; -import SelectScenario from './../../../components/Blocnote/PreliminaryFinance/SelectScenario'; -import SaveScenario from './../../../components/Blocnote/PreliminaryFinance/SaveScenario'; +import SelectScenario from './SelectScenario'; +import InputScenario from './InputScenario'; import { blocnoteURL } from '../../../utils/restServices'; @@ -76,24 +73,16 @@ class PreliminaryFinance extends Component { budgets={budgets} /> - - - { return bindActionCreators({ loadScenario, + updateScenario, }, dispatch); }; diff --git a/src/containers/Blocnote/index.js b/src/containers/Blocnote/index.js index 4135a9c0..d7f2d184 100644 --- a/src/containers/Blocnote/index.js +++ b/src/containers/Blocnote/index.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; +import { Table } from 'reactstrap'; import { Link } from 'react-router'; import LinkBarDetail from '../../components/LinkBarDetail'; import buildingDetailPropTypes from '../Building/propTypes'; @@ -97,7 +98,7 @@ class Blocnote extends Component {
    - +
    @@ -130,7 +131,7 @@ class Blocnote extends Component { -
    OPTIONS
    +
    diff --git a/src/containers/Blocnote/reducer.js b/src/containers/Blocnote/reducer.js index 43605256..dcaffd96 100644 --- a/src/containers/Blocnote/reducer.js +++ b/src/containers/Blocnote/reducer.js @@ -711,6 +711,37 @@ export default function (state = blocnoteInitialState, action) { }, }; + case PreliminaryFinance.UPDATE_SCENARIO_REQUESTED: + return { + ...state, + scenario: { + ...state.scenario, + loading: true, + error: false, + }, + }; + + case PreliminaryFinance.UPDATE_SCENARIO_SUCCEEDED: + console.log(action); // eslint-disable-line + console.log(state); // eslint-disable-line + return { + ...state, + scenario: { + data: { instance: action.instance }, + loading: false, + error: false, + }, + }; + + case PreliminaryFinance.UPDATE_SCENARIO_FAILED: + return { ...state, + scenario: { + ...state.scenario, + loading: false, + error: action.error, + }, + }; + case BudgetSimulator.BUDGET_SIMULATOR_REQUESTED: return { ...state, diff --git a/src/containers/Blocnote/sagas.js b/src/containers/Blocnote/sagas.js index 7c7daae6..816b35f9 100644 --- a/src/containers/Blocnote/sagas.js +++ b/src/containers/Blocnote/sagas.js @@ -35,6 +35,7 @@ import { import { scenarioLoaded, scenarioFailed, + updateScenarioSucceeded, updateScenarioFailed, } from './PreliminaryFinance/actions'; import { @@ -310,6 +311,26 @@ function* loadScenario(action) { yield SagaRequests.get(action, url, scenarioLoaded, scenarioFailed); } +function* updateScenario(action) { + console.log(action); // eslint-disable-line + const url = `${process.env.REACT_APP_BLOCNOTE_URL}/buildings/${action.buildingId}/preliminary-finance/scenario/`; + const res = yield call( + request, + SagaRequests.generateURL(url, action), + { + method: 'PUT', + headers: getHeaders(), + body: JSON.stringify(action.payload), + } + ); + + if (!res.err) { + yield put(updateScenarioSucceeded(action.payload)); + } else { + yield put(updateScenarioFailed(res.err)); + } +} + function* blocnoteWatcher() { yield takeEvery(LandingPage.LANDING_DATA_REQUESTED, loadLandingData); yield takeEvery(FinancialInputs.FINANCE_OVERVIEW_REQUESTED, loadFinanceOverview); @@ -332,6 +353,7 @@ function* blocnoteWatcher() { yield takeEvery(FinancialInputs.UPDATE_LOAN_OPTIONS_REQUESTED, updateLoanOptions); yield takeEvery(FinancialInputs.UPDATE_CUSTOMER_PREFERENCE_REQUESTED, updateCustomerPreference); yield takeEvery(PreliminaryFinance.SCENARIO_REQUESTED, loadScenario); + yield takeEvery(PreliminaryFinance.UPDATE_SCENARIO_REQUESTED, updateScenario); yield takeEvery(BudgetSimulator.BUDGET_SIMULATOR_REQUESTED, loadBudgetSimulator); } -- GitLab From 6f8a888e2264e5e4e5951bce925e5abfff783c63 Mon Sep 17 00:00:00 2001 From: akkking Date: Fri, 19 Apr 2019 14:40:33 -0400 Subject: [PATCH 54/79] Remove cost and savings components, updated Loan Summary and ProjectEconomicsRow --- .../PreliminaryFinance/CostEstimation.js | 74 ------------------ .../PreliminaryFinance/CostEstimationRow.js | 64 --------------- .../PreliminaryFinance/LoanSummary.js | 2 +- .../PreliminaryFinance/ProjectEconomicsRow.js | 2 +- .../PreliminaryFinance/SaveScenario.js | 49 ------------ .../PreliminaryFinance/SavingEstimation.js | 77 ------------------- .../PreliminaryFinance/SavingEstimationRow.js | 66 ---------------- .../PreliminaryFinance/SelectScenario.js | 66 ---------------- 8 files changed, 2 insertions(+), 398 deletions(-) delete mode 100644 src/components/Blocnote/PreliminaryFinance/CostEstimation.js delete mode 100644 src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js delete mode 100644 src/components/Blocnote/PreliminaryFinance/SaveScenario.js delete mode 100644 src/components/Blocnote/PreliminaryFinance/SavingEstimation.js delete mode 100644 src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js delete mode 100644 src/components/Blocnote/PreliminaryFinance/SelectScenario.js diff --git a/src/components/Blocnote/PreliminaryFinance/CostEstimation.js b/src/components/Blocnote/PreliminaryFinance/CostEstimation.js deleted file mode 100644 index f8052e42..00000000 --- a/src/components/Blocnote/PreliminaryFinance/CostEstimation.js +++ /dev/null @@ -1,74 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - Table, -} from 'reactstrap'; -import CostEstimationRow from './CostEstimationRow'; - - -class CostEstimation extends Component { - constructor(props) { - super(props); - - this.state = { - successMessages: [], - error: false, - loading: false, - }; - } - - render() { - let rows = []; - - if (this.props.data !== null) { - rows = this.props.data.map((costItem) => { - return ( - - ); - }); - rows.push( - - ); - } - - return ( -
    -

    - Cost Estimation -

    - - - - - - - - - - {rows} - -
    ItemEstimated CostOption
    -
    - ); - } -} - -CostEstimation.propTypes = { - blockStyle: PropTypes.string, - headerStyle: PropTypes.string, - data: PropTypes.arrayOf, -}; - -export default CostEstimation; diff --git a/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js b/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js deleted file mode 100644 index d3bfc3e7..00000000 --- a/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js +++ /dev/null @@ -1,64 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - Input, - Button, -} from 'reactstrap'; - -class CostEstimationRow extends Component { - constructor(props) { - super(props); - - this.state = { - successMessages: [], - error: false, - loading: false, - }; - } - - render() { - return ( - - - - - -
    -
    $
    - -
    - - - - - - ); - } -} - -CostEstimationRow.propTypes = { - item: PropTypes.string, - cost: PropTypes.number, - buttonColor: PropTypes.string, - buttonValue: PropTypes.string, -}; - -export default CostEstimationRow; diff --git a/src/components/Blocnote/PreliminaryFinance/LoanSummary.js b/src/components/Blocnote/PreliminaryFinance/LoanSummary.js index cd4ceb92..6332d711 100644 --- a/src/components/Blocnote/PreliminaryFinance/LoanSummary.js +++ b/src/components/Blocnote/PreliminaryFinance/LoanSummary.js @@ -24,7 +24,7 @@ class LoanSummary extends Component { if (this.props.data !== null) { header = this.props.data[0].map((item) => { return ( - {item} + {item} ); }); this.props.data.shift(); diff --git a/src/components/Blocnote/PreliminaryFinance/ProjectEconomicsRow.js b/src/components/Blocnote/PreliminaryFinance/ProjectEconomicsRow.js index 6b4ae174..5315d9b9 100644 --- a/src/components/Blocnote/PreliminaryFinance/ProjectEconomicsRow.js +++ b/src/components/Blocnote/PreliminaryFinance/ProjectEconomicsRow.js @@ -16,7 +16,7 @@ class ProjectEconomicsRow extends Component { render() { return ( - + {this.props.row_name} diff --git a/src/components/Blocnote/PreliminaryFinance/SaveScenario.js b/src/components/Blocnote/PreliminaryFinance/SaveScenario.js deleted file mode 100644 index 33634e2a..00000000 --- a/src/components/Blocnote/PreliminaryFinance/SaveScenario.js +++ /dev/null @@ -1,49 +0,0 @@ -import React, { Component } from 'react'; -import { - Input, - Button, -} from 'reactstrap'; - - -class SaveScenario extends Component { - constructor(props) { - super(props); - this.state = { - successMessages: [], - error: false, - loading: false, - }; - } - - render() { - return ( -
    -
    -
    -
    -
    Scenario :
    - -
    -
    -
    - - -   - -
    -
    -
    -
    - ); - } -} - -export default SaveScenario; diff --git a/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js b/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js deleted file mode 100644 index 2408c76d..00000000 --- a/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js +++ /dev/null @@ -1,77 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - Table, -} from 'reactstrap'; -import SavingEstimationRow from './SavingEstimationRow'; - - -class SavingEstimation extends Component { - constructor(props) { - super(props); - - this.state = { - successMessages: [], - error: false, - loading: false, - }; - } - - render() { - const tdStyle = { textAlign: 'center' }; - const rows = []; - console.log(this.props.data); // eslint-disable-line - - if (this.props.data !== null) { - Object.entries(this.props.data).forEach(([utilityName, utilityData]) => { - rows.push( - - ); - }); - } - - return ( -
    -

    - Saving Estimation -

    - - - - - - - - - - - {rows} - -
    - Utility - - Estimated Savings - - Used Before Retrofit - - Used After Retrofit -
    -
    - ); - } -} - -SavingEstimation.propTypes = { - blockStyle: PropTypes.string, - headerStyle: PropTypes.string, - data: PropTypes.objectOf, -}; - -export default SavingEstimation; diff --git a/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js b/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js deleted file mode 100644 index 44ac6797..00000000 --- a/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js +++ /dev/null @@ -1,66 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - FormGroup, - Label, - Input, -} from 'reactstrap'; - - -class SavingEstimationRow extends Component { - constructor(props) { - super(props); - - this.state = { - successMessages: [], - error: false, - loading: false, - }; - } - - render() { - return ( - - - {this.props.utility_name} - - -
    - -
    %
    -
    - - - - - - - - - - - - - ); - } -} - -SavingEstimationRow.propTypes = { - tdStyle: PropTypes.string, - utility_name: PropTypes.string, - estimated_savings: PropTypes.number, -}; - -export default SavingEstimationRow; diff --git a/src/components/Blocnote/PreliminaryFinance/SelectScenario.js b/src/components/Blocnote/PreliminaryFinance/SelectScenario.js deleted file mode 100644 index 44ac0af7..00000000 --- a/src/components/Blocnote/PreliminaryFinance/SelectScenario.js +++ /dev/null @@ -1,66 +0,0 @@ -import React, { Component } from 'react'; -import { - Dropdown, - DropdownToggle, - DropdownMenu, - DropdownItem, -} from 'reactstrap'; - - -class SelectScenario extends Component { - constructor(props) { - super(props); - this.toggleScenario = this.toggleScenario.bind(this); - this.changeScenario = this.changeScenario.bind(this); - this.state = { - successMessages: [], - error: false, - loading: false, - scenarioDropdownOpen: false, - scenarioDropDownValue: 'Select Scenario', - scenarioOptions: [ - { id: 'Scenario1', key: 'Scenario1', name: 'Scenario 1' }, - { id: 'Scenario2', key: 'Scenario2', name: 'Scenario 2' }, - ], - }; - } - - toggleScenario() { - this.setState({ - scenarioDropdownOpen: !this.state.scenarioDropdownOpen, - }); - } - - changeScenario(e) { - this.setState({ scenarioDropDownValue: e.currentTarget.textContent }); - } - - render() { - const scenarioOptions = this.state.scenarioOptions.map(e => { - return ( - - {e.name} - - ); - }); - return ( -
    - - - {this.state.scenarioDropDownValue} - - - {scenarioOptions} - - -
    -
    - ); - } -} - -export default SelectScenario; -- GitLab From fa9bd1120cebff5704c2201a30f55809a9851e5f Mon Sep 17 00:00:00 2001 From: akkking Date: Fri, 19 Apr 2019 15:07:29 -0400 Subject: [PATCH 55/79] Update table formats --- .../PreliminaryFinance/LoanSummary.js | 2 +- .../FinancialInputs/\bIncomeStatements.js" | 2 +- .../FinancialInputs/BillsSummaryTable.js | 1 - .../Blocnote/FinancialInputs/CashBalance.js | 2 +- .../FinancialInputs/CustomerPreference.js | 2 +- .../Blocnote/FinancialInputs/LoanOptions.js | 2 +- .../FinancialInputs/MortgageLiabilities.js | 2 +- .../PreliminaryFinance/CostEstimation.js | 9 --- .../PreliminaryFinance/CostEstimationRow.js | 2 +- src/containers/Blocnote/index.js | 74 +++++++++---------- 10 files changed, 43 insertions(+), 55 deletions(-) diff --git a/src/components/Blocnote/PreliminaryFinance/LoanSummary.js b/src/components/Blocnote/PreliminaryFinance/LoanSummary.js index 6332d711..51e7d168 100644 --- a/src/components/Blocnote/PreliminaryFinance/LoanSummary.js +++ b/src/components/Blocnote/PreliminaryFinance/LoanSummary.js @@ -55,7 +55,7 @@ class LoanSummary extends Component {

    Loan Summary

    - +
    {header} diff --git "a/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" "b/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" index a6dc42c4..2606efd8 100644 --- "a/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" +++ "b/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" @@ -290,7 +290,7 @@ class IncomeStatements extends Component {
    -
    +
    {header} diff --git a/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js index 655be0a0..cbd6ad15 100644 --- a/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -197,7 +197,6 @@ class BillsSummaryTable extends Component { padding: '15px 0 15px', background: '#EEEEEE', color: '#000000', - fontSize: '16px', fontWeight: 'bold', }} > diff --git a/src/containers/Blocnote/FinancialInputs/CashBalance.js b/src/containers/Blocnote/FinancialInputs/CashBalance.js index eb910e3c..f30e0e00 100644 --- a/src/containers/Blocnote/FinancialInputs/CashBalance.js +++ b/src/containers/Blocnote/FinancialInputs/CashBalance.js @@ -120,7 +120,7 @@ class CashBalance extends Component {
    -
    +
    {header} diff --git a/src/containers/Blocnote/FinancialInputs/CustomerPreference.js b/src/containers/Blocnote/FinancialInputs/CustomerPreference.js index 5b3ce17f..e7390fb6 100644 --- a/src/containers/Blocnote/FinancialInputs/CustomerPreference.js +++ b/src/containers/Blocnote/FinancialInputs/CustomerPreference.js @@ -147,7 +147,7 @@ class CustomerPreference extends Component {
    -
    +
    {header} diff --git a/src/containers/Blocnote/FinancialInputs/LoanOptions.js b/src/containers/Blocnote/FinancialInputs/LoanOptions.js index fa6d6e4c..d431768c 100644 --- a/src/containers/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/containers/Blocnote/FinancialInputs/LoanOptions.js @@ -142,7 +142,7 @@ class LoanOptions extends Component {
    -
    +
    - - - - - - - ); - } -} - -CashBalanceRow.propTypes = { - id: PropTypes.number, - balanceAmount: PropTypes.number, - statementDate: PropTypes.string, - isFromBalanceSheet: PropTypes.bool, - onDelEvent: PropTypes.func, -}; - -export default CashBalanceRow; diff --git a/src/containers/Blocnote/FinancialInputs/CustomerPreference.js b/src/containers/Blocnote/FinancialInputs/CustomerPreference.js deleted file mode 100644 index b3bb9331..00000000 --- a/src/containers/Blocnote/FinancialInputs/CustomerPreference.js +++ /dev/null @@ -1,213 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - Button, - Table, - Input, - InputGroup, - InputGroupAddon, -} from 'reactstrap'; -import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; - - -class CustomerPreference extends Component { - constructor(props) { - super(props); - this.handleOnChange = this.handleOnChange.bind(this); - this.state = { - downpayment: this.props.data.downpayment, - expectedNetNoiDscr: this.props.data.expected_net_noi_dscr, - expectedPayback: this.props.data.expected_payback, - updated: false, - }; - } - - handleOnChange = (event) => { - this.setState({ [event.target.name]: event.target.value }); - } - - handleUpdateCustomerPreference = () => { - this.props.updateCustomerPreference( - this.props.buildingId, - { - downpayment: parseFloat(this.state.downpayment).toFixed(2), - expected_net_noi_dscr: parseInt(this.state.expectedNetNoiDscr, 10), - expected_payback: this.state.expectedPayback, - }, - ); - this.setState({ updated: true }); - } - - render() { - const header = [ - 'Preference', - 'Value (if values is not known, please leave it blank)', - ].map((title, key) => { - return ( - - ); - }); - - const rows = []; - const style = { fontWeight: 'bold' }; - if (this.props.data !== null) { - rows.push( - - - - - ); - rows.push( - - - - - ); - rows.push( - - - - - ); - } - - let messageStyle = {}; - let messageContent = null; - - if (this.props.loading) { - messageContent = 'Updating ...'; - messageStyle = this.props.defaultMessageStyle; - } - - if (this.props.error && typeof this.props.error === 'object') { - messageContent = this.props.error.response.statusText; - messageStyle = this.props.errorMessageStyle; - } - - if (!this.props.error && !this.props.loading - && this.props.data !== null - && this.state.updated) { - messageContent = 'Saved!'; - messageStyle = this.props.successMessageStyle; - } - - return ( -
    -

    - Customer Preference -

    -
    -
    -
    diff --git a/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js index d6f610ba..8b327ce8 100644 --- a/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -127,7 +127,7 @@ class MortgageLiabilities extends Component {
    - +
    {header} diff --git a/src/containers/Blocnote/PreliminaryFinance/CostEstimation.js b/src/containers/Blocnote/PreliminaryFinance/CostEstimation.js index 0b3843a2..a5e21f47 100644 --- a/src/containers/Blocnote/PreliminaryFinance/CostEstimation.js +++ b/src/containers/Blocnote/PreliminaryFinance/CostEstimation.js @@ -56,15 +56,6 @@ class CostEstimation extends Component { /> ); }); - // rows.push( - // - // ); } return ( diff --git a/src/containers/Blocnote/PreliminaryFinance/CostEstimationRow.js b/src/containers/Blocnote/PreliminaryFinance/CostEstimationRow.js index 7ef05c5b..83a8bb47 100644 --- a/src/containers/Blocnote/PreliminaryFinance/CostEstimationRow.js +++ b/src/containers/Blocnote/PreliminaryFinance/CostEstimationRow.js @@ -50,7 +50,7 @@ class CostEstimationRow extends Component { /> - - // - // - // - // - // ); - // } - render() { - // const tableHeaderStyle = { - // textAlign: 'left', - // fontWeight: 'bold', - // }; - let rows = []; - if (this.state.billData !== []) { - rows = this.state.billData.map((item) => { + + if (this.state.billData.length !== 0) { + rows = this.state.billData.map((bill) => { // charge = charge.toLocaleString(); return ( ); }); + } else { + rows = ( +
    + Currently no bill. +
    + ); } let messageStyle = {}; @@ -230,6 +192,7 @@ class BillsSummaryTable extends Component { } BillsSummaryTable.propTypes = { + buildingId: PropTypes.number, billName: PropTypes.string, billData: PropTypes.arrayOf( PropTypes.shape({ diff --git a/src/containers/Blocnote/FinancialInputs/index.js b/src/containers/Blocnote/FinancialInputs/index.js index 17074e70..68db6628 100644 --- a/src/containers/Blocnote/FinancialInputs/index.js +++ b/src/containers/Blocnote/FinancialInputs/index.js @@ -139,6 +139,12 @@ class FinancialInputs extends Component { let cashBalanceData = []; let loanOptionsData = []; + let billsSummaryData = { + gas: [], + oil: [], + water: [], + electric: [], + }; let customerPreferenceData = {}; if (Object.keys(cashBalance.data).length !== 0) { cashBalanceData = cashBalance.data.instance.result; @@ -146,10 +152,23 @@ class FinancialInputs extends Component { if (loanOptions.data.load === true) { loanOptionsData = loanOptions.data.status; } + if (Object.keys(billsSummary.data.result.user_bill).length === 0) { + Object.entries(billsSummary.data.result).forEach((billSummary, id) => { + if (billSummary[0] !== 'user_bill') { + billsSummaryData[billSummary[0]] = [{ + year: String(Object.keys(billSummary[1])[0]), + charge: String(Object.values(billSummary[1])[0]), + id, + }]; + } + }); + } else { + billsSummaryData = billsSummary.data.result.user_bill; + } if (Object.keys(customerPreference.data).length !== 0) { customerPreferenceData = customerPreference.data.instance; } - console.log(customerPreferenceData); // eslint-disable-line + console.log(billsSummaryData); // eslint-disable-line mainContent = (
    @@ -179,7 +198,7 @@ class FinancialInputs extends Component { successMessageStyle={successMessageStyle} errorMessageStyle={errorMessageStyle} defaultMessageStyle={defaultMessageStyle} - data={billsSummary.data.result.user_bill} + data={billsSummaryData} error={billsSummary.error} loading={billsSummary.loading} buildingId={this.props.building.building_id} -- GitLab From d20ff65bef8f0e498fd7ca7546d26c63a9ab5986 Mon Sep 17 00:00:00 2001 From: akkking Date: Mon, 22 Apr 2019 17:48:37 -0400 Subject: [PATCH 66/79] Fix energy bills not showing issues --- src/components/Blocnote/FinancialInputs.js | 2 +- .../Blocnote/FinancialInputs/Bills.js | 69 +++++++++++++ .../Blocnote/FinancialInputs/BillsRow.js | 31 ++++++ .../Blocnote/FinancialInputs/BillsTable.js | 98 +++++++++++++++++++ .../Blocnote/FinancialInputs/EnergyBills.js | 94 ------------------ .../Blocnote/FinancialInputs/index.js | 4 +- 6 files changed, 201 insertions(+), 97 deletions(-) create mode 100644 src/components/Blocnote/FinancialInputs/Bills.js create mode 100644 src/components/Blocnote/FinancialInputs/BillsRow.js create mode 100644 src/components/Blocnote/FinancialInputs/BillsTable.js delete mode 100644 src/components/Blocnote/FinancialInputs/EnergyBills.js diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js index 0c458919..850cd731 100644 --- a/src/components/Blocnote/FinancialInputs.js +++ b/src/components/Blocnote/FinancialInputs.js @@ -6,7 +6,7 @@ import './styles.css'; import request from '../../utils/request'; import Loading from '../../components/Loading'; import FinanceOverview from './FinancialInputs/FinanceOverview'; -import EnergyBills from './FinancialInputs/EnergyBills'; +import EnergyBills from './FinancialInputs/Bills'; import BillsSummary from './FinancialInputs/BillsSummary'; import EnergyBillsOverview from './FinancialInputs/EnergyBillsOverview'; import IncomeStatements from './FinancialInputs/IncomeStatements'; diff --git a/src/components/Blocnote/FinancialInputs/Bills.js b/src/components/Blocnote/FinancialInputs/Bills.js new file mode 100644 index 00000000..e37b1d6a --- /dev/null +++ b/src/components/Blocnote/FinancialInputs/Bills.js @@ -0,0 +1,69 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + Row, +} from 'reactstrap'; +import BillsTable from './BillsTable'; + + +const Bills = (props) => { + const BillsTables = []; + const billsExist = { + gas: false, + oil: false, + water: false, + electric: false, + }; + + if (props.data !== null) { + console.log(props.data); // eslint-disable-line + Object.keys(props.data).forEach(billName => { + BillsTables.push( +
    + +
    + ); + billsExist[billName] = true; + }); + } + + Object.entries(billsExist).forEach(billExist => { + if (billExist[1] === false) { + BillsTables.push( +
    + +
    + ); + } + }); + + return ( +
    +

    + Energy Bills +

    + + {BillsTables} + +
    + ); +}; + +Bills.propTypes = { + blockStyle: PropTypes.shape({ + marginBottom: PropTypes.string, + }), + headerStyle: PropTypes.shape({ + textAlign: PropTypes.string, + marginBottom: PropTypes.string, + }), + data: PropTypes.objectOf, +}; + +export default Bills; diff --git a/src/components/Blocnote/FinancialInputs/BillsRow.js b/src/components/Blocnote/FinancialInputs/BillsRow.js new file mode 100644 index 00000000..d0a59b29 --- /dev/null +++ b/src/components/Blocnote/FinancialInputs/BillsRow.js @@ -0,0 +1,31 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + + +const BillsRow = (props) => { + return ( +
    + + + + + + ); +}; + +BillsRow.propTypes = { + dateFrom: PropTypes.number, + dateTo: PropTypes.number, + usage: PropTypes.func, + charge: PropTypes.func, +}; + +export default BillsRow; diff --git a/src/components/Blocnote/FinancialInputs/BillsTable.js b/src/components/Blocnote/FinancialInputs/BillsTable.js new file mode 100644 index 00000000..b12b7f5d --- /dev/null +++ b/src/components/Blocnote/FinancialInputs/BillsTable.js @@ -0,0 +1,98 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + Table, +} from 'reactstrap'; +import BillsRow from './BillsRow'; + + +const BillsTable = (props) => { + const headerStyle = { + textAlign: 'center', + fontWeight: 'bold', + // marginBottom: '15px', + padding: '15px', + borderBottom: '1px solid #CCCCCC', + background: '#EEEEEE', + }; + const tdStyle = { + textAlign: 'center', + fontSize: '13px', + }; + + const billsName = props.billsName.charAt(0).toUpperCase() + props.billsName.slice(1); + let rows = []; + let header = ( + + + + + + + ); + if (props.billsData.length !== 0) { + console.log(props.billsData); // eslint-disable-line + rows = props.billsData.map((bill) => { + // charge = charge.toLocaleString(); + return ( + + ); + }); + } else { + header = ''; + rows = ( + + + + ); + } + + return ( +
    +
    + {billsName} Bills +
    +
    + - - + {saveButton} ); } diff --git a/src/containers/Blocnote/FinancialInputs/CashBalance.js b/src/containers/Blocnote/FinancialInputs/CashBalance.js index f30e0e00..316374ae 100644 --- a/src/containers/Blocnote/FinancialInputs/CashBalance.js +++ b/src/containers/Blocnote/FinancialInputs/CashBalance.js @@ -78,7 +78,7 @@ class CashBalance extends Component { }); let rows = []; - if (this.state.cashBalance !== null) { + if (Object.keys(this.state.cashBalance).length !== 0) { rows = this.state.cashBalance.map((statement, index) => { return ( { @@ -99,16 +100,16 @@ class LoanOptions extends Component { }); let loans = []; - if (this.state.loanOptions !== null) { - loans = this.state.loanOptions.map((loanOptions, index) => { + if (Object.keys(this.state.loanOptions).length !== 0) { + loans = this.state.loanOptions.map((loanOption, index) => { return ( ); diff --git a/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js index 8b327ce8..1d341600 100644 --- a/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -83,7 +83,8 @@ class MortgageLiabilities extends Component { }); let rows = []; - if (this.state.liabilities !== null) { + if (this.state.liabilities.length !== 0) { + console.log(this.state.liabilities); // eslint-disable-line rows = this.state.liabilities.map((liability, index) => { return ( { - if (fund[0] === financeData.fund_id) { - fundDropDownSelectedValue = fund[1]; - } - }); - - const acp = parseInt(financeData.anticipated_construction_period, 10); - return { - financeData: data.instance.financing_overview_data, + const financeData = { fundOptions: funds, - fundDropDownId: financeData.fund_id, - fundDropDownValue: fundDropDownSelectedValue, - proFormaStartDate: financeData.pro_forma_start_date, - proFormaDuration: financeData.pro_forma_duration, - analysisDate: financeData.analysis_date, - anticipatedConstructionStartDate: financeData.anticipated_construction_start_date, - anticipatedCommissioningDate: financeData.anticipated_commissioning_date, - anticipatedConstructionPeriod: acp, + fundDropDownId: null, + fundDropDownValue: 'No Fund', + proFormaStartDate: null, + proFormaDuration: null, + analysisDate: null, + anticipatedConstructionStartDate: null, + anticipatedCommissioningDate: null, + anticipatedConstructionPeriod: null, }; + + if (data.instance.financing_overview_data !== undefined) { + const fData = data.instance.financing_overview_data; + data.instance.funds.forEach(fund => { + if (fund[0] === fData.fund_id) { + financeData.fundDropDownValue = fund[1]; + } + }); + financeData.fundDropDownId = fData.fund_id; + financeData.proFormaStartDate = fData.pro_forma_start_date; + financeData.proFormaDuration = fData.pro_forma_duration; + financeData.analysisDate = fData.analysis_date; + financeData.anticipatedConstructionStartDate = fData.anticipated_construction_start_date; + financeData.anticipatedCommissioningDate = fData.anticipated_commissioning_date; + financeData.anticipatedConstructionPeriod = parseInt( + fData.anticipated_construction_period, 10 + ); + } + + return financeData; } render() { @@ -116,7 +126,31 @@ class FinancialInputs extends Component { incomeStatement.data !== null && liabilities.data !== null && customerPreference.data !== null) { - const fianceOverviewData = this.processFinanceOverview(fianceOverview.data); + console.log(fianceOverview); // eslint-disable-line + console.log(bills.data); // eslint-disable-line + console.log(billsOverview.data); // eslint-disable-line + console.log(billsSummary.data); // eslint-disable-line + console.log(cashBalance.data); // eslint-disable-line + console.log(loanOptions.data); // eslint-disable-line + console.log(incomeStatement.data); // eslint-disable-line + console.log(liabilities.data); // eslint-disable-line + console.log(customerPreference.data); // eslint-disable-line + const foData = this.processFinanceOverview(fianceOverview.data); + + let cashBalanceData = []; + let loanOptionsData = []; + let customerPreferenceData = {}; + if (Object.keys(cashBalance.data).length !== 0) { + cashBalanceData = cashBalance.data.instance.result; + } + if (loanOptions.data.load === true) { + loanOptionsData = loanOptions.data.status; + } + if (Object.keys(customerPreference.data).length !== 0) { + customerPreferenceData = customerPreference.data.instance; + } + console.log(customerPreferenceData); // eslint-disable-line + mainContent = (
    Date: Mon, 22 Apr 2019 15:14:04 -0400 Subject: [PATCH 65/79] Fix Bills Summary Incomplete bills issue --- .../Blocnote/FinancialInputs/BillsSummary.js | 10 +-- .../FinancialInputs/BillsSummaryTable.js | 75 +++++-------------- .../Blocnote/FinancialInputs/index.js | 23 +++++- 3 files changed, 45 insertions(+), 63 deletions(-) diff --git a/src/containers/Blocnote/FinancialInputs/BillsSummary.js b/src/containers/Blocnote/FinancialInputs/BillsSummary.js index 47e78dfc..05b6b1ba 100644 --- a/src/containers/Blocnote/FinancialInputs/BillsSummary.js +++ b/src/containers/Blocnote/FinancialInputs/BillsSummary.js @@ -10,21 +10,21 @@ class BillsSummary extends Component { constructor(props) { super(props); this.state = { - billSummary: props.data, + billsSummary: props.data, }; } render() { const BillsSummaryTables = []; - if (this.state.billSummary !== null) { - // console.log(this.state.billSummary); // eslint-disable-line - Object.keys(this.state.billSummary).forEach(billName => { + if (this.state.billsSummary !== null) { + console.log(this.state.billsSummary); // eslint-disable-line + Object.keys(this.state.billsSummary).forEach(billName => { BillsSummaryTables.push(
    { - console.log(this.props.buildingId); // eslint-disable-line this.props.createBillsSummary( this.props.buildingId, { @@ -33,7 +32,6 @@ class BillsSummaryTable extends Component { console.log('saga done!'); // eslint-disable-line } ); - console.log(this.state.billData); // eslint-disable-line const newBill = { id: 100, utility_type: this.props.billName, @@ -48,11 +46,9 @@ class BillsSummaryTable extends Component { action: 'created', }); }); - console.log(this.state); // eslint-disable-line } updateBillsSummary = (billData) => { - console.log(this.props.buildingId); // eslint-disable-line this.props.updateBillsSummary( this.props.buildingId, billData, @@ -96,70 +92,36 @@ class BillsSummaryTable extends Component { }); } - // addRow = () => { - // rows.push( - //
    - // - // - // Year - // - // - // - // - // - // - // $ - // - // - // - // - // {' '} - //
    + {props.dateFrom} + + {props.dateTo} + + {props.usage} + + $ {props.charge} +
    Date FromDate ToUsage (kWh)Amount
    + There is no bill. +
    + {header} + + {rows} + +
    +
    + ); +}; + +BillsTable.propTypes = { + billsName: PropTypes.string, + billsData: PropTypes.arrayOf( + PropTypes.shape({ + year: PropTypes.string, + charge: PropTypes.string, + id: PropTypes.number, + }) + ), + // deleteRow: PropTypes.func, +}; + +BillsTable.defaultProps = { + billsData: [], +}; + +export default BillsTable; diff --git a/src/components/Blocnote/FinancialInputs/EnergyBills.js b/src/components/Blocnote/FinancialInputs/EnergyBills.js deleted file mode 100644 index 7327efcc..00000000 --- a/src/components/Blocnote/FinancialInputs/EnergyBills.js +++ /dev/null @@ -1,94 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { - Table, -} from 'reactstrap'; - -const EnergyBills = (props) => { - return ( -
    -

    - Energy Bills -

    -
    -
    - - - - - - - - - - - -
    Electricity
    - No Bills available -
    -
    -
    - - - - - - - - - - - -
    Gas
    - No Bills available -
    -
    -
    - - - - - - - - - - - -
    Oil
    - No Bills available -
    -
    -
    - - - - - - - - - - - -
    Water
    - No Bills available -
    -
    -
    -
    - ); -}; - -EnergyBills.propTypes = { - blockStyle: PropTypes.shape({ - marginBottom: PropTypes.string, - }), - headerStyle: PropTypes.shape({ - textAlign: PropTypes.string, - marginBottom: PropTypes.string, - }), - // data: PropTypes.objectOf, -}; - -export default EnergyBills; diff --git a/src/containers/Blocnote/FinancialInputs/index.js b/src/containers/Blocnote/FinancialInputs/index.js index 68db6628..e27fdff1 100644 --- a/src/containers/Blocnote/FinancialInputs/index.js +++ b/src/containers/Blocnote/FinancialInputs/index.js @@ -16,7 +16,7 @@ import { } from './actions'; import blocnoteProps from './../propTypes'; import FinanceOverview from './../../../components/Blocnote/FinancialInputs/FinanceOverview'; -import EnergyBills from './../../../components/Blocnote/FinancialInputs/EnergyBills'; +import Bills from '../../../components/Blocnote/FinancialInputs/Bills'; import BillsSummary from './BillsSummary'; import BillsOverview from './BillsOverview'; import IncomeStatements from './IncomeStatements'; @@ -187,7 +187,7 @@ class FinancialInputs extends Component { anticipatedCommissioningDate={foData.anticipatedCommissioningDate} anticipatedConstructionPeriod={foData.anticipatedConstructionPeriod} /> - Date: Mon, 22 Apr 2019 18:02:17 -0400 Subject: [PATCH 67/79] Update table formats --- .../Blocnote/FinancialInputs/BillsOverview.js | 10 +-- .../FinancialInputs/BillsSummaryTable.js | 19 +++-- .../Blocnote/FinancialInputs/CashBalance.js | 8 +- .../FinancialInputs/CustomerPreference.js | 8 +- .../Blocnote/FinancialInputs/LoanOptions.js | 84 +++++++++---------- .../FinancialInputs/MortgageLiabilities.js | 8 +- 6 files changed, 65 insertions(+), 72 deletions(-) diff --git a/src/containers/Blocnote/FinancialInputs/BillsOverview.js b/src/containers/Blocnote/FinancialInputs/BillsOverview.js index db31cdb1..9592267c 100644 --- a/src/containers/Blocnote/FinancialInputs/BillsOverview.js +++ b/src/containers/Blocnote/FinancialInputs/BillsOverview.js @@ -224,12 +224,10 @@ class BillsOverview extends Component {
    - - - - {header} - - +
    + + {header} + {rows} {footer} diff --git a/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js index b37a3c86..fec02686 100644 --- a/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -113,14 +113,17 @@ class BillsSummaryTable extends Component { }); } else { rows = ( -
    - Currently no bill. -
    + + + ); } diff --git a/src/containers/Blocnote/FinancialInputs/CashBalance.js b/src/containers/Blocnote/FinancialInputs/CashBalance.js index 316374ae..c33e4258 100644 --- a/src/containers/Blocnote/FinancialInputs/CashBalance.js +++ b/src/containers/Blocnote/FinancialInputs/CashBalance.js @@ -121,11 +121,9 @@ class CashBalance extends Component {
    + Currently no bill. +
    - - - {header} - - + + {header} + {rows} diff --git a/src/containers/Blocnote/FinancialInputs/CustomerPreference.js b/src/containers/Blocnote/FinancialInputs/CustomerPreference.js index e7390fb6..b3bb9331 100644 --- a/src/containers/Blocnote/FinancialInputs/CustomerPreference.js +++ b/src/containers/Blocnote/FinancialInputs/CustomerPreference.js @@ -148,11 +148,9 @@ class CustomerPreference extends Component {
    - - - {header} - - + + {header} + {rows} diff --git a/src/containers/Blocnote/FinancialInputs/LoanOptions.js b/src/containers/Blocnote/FinancialInputs/LoanOptions.js index 3fd922d7..623afb0a 100644 --- a/src/containers/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/containers/Blocnote/FinancialInputs/LoanOptions.js @@ -143,50 +143,48 @@ class LoanOptions extends Component {
    -
    - - - + ); + [0, 1, 2].forEach((entry, key) => { + headers.push( + + ); + }); + headers.push( + + ); + headers.push( + + ); + return headers; + } + handleUpdateIncomeStatements = () => { this.setState({ loading: true }); const hist = []; @@ -258,6 +292,52 @@ class IncomeStatements extends Component { ); }); + return ( + + {cellsData} + + ); + }); + } else { + header = this.buildEmptyHeader(); + const histYears = [0, 1, 2]; + rows = columnKeys.map((columnKey, id) => { + const cells = [ + ...[columnNames[columnKey]], + ...histYears.map((histYear) => { + if (['utility_expense', 'revenue', 'non_utility_expense'].includes(columnKey)) { + return ( + + + $ + + + + ); + } + return null; + }), + ...['', ''], + ]; + + const cellsData = Object.values(cells).map((celldata, key) => { + return ( + + ); + }); + return ( {cellsData} @@ -323,11 +403,9 @@ class IncomeStatements extends Component {
    -
    -
    - - - Required NOI DSCR - - - -
    -
    - - - Required Cash DSCR - - - -
    + + + - - - {header} - - +
    + + + Required Cash DSCR + + + +
    + + + + + {header} + {loans} diff --git a/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js index 1d341600..12d0c500 100644 --- a/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -129,11 +129,9 @@ class MortgageLiabilities extends Component {
    +
    +
    + + + Required NOI DSCR + + +
    -
    - - - {header} - - + + {header} + {rows} -- GitLab From 4da2ab487fe9f56a2a6c85f22649dbaa0af06d19 Mon Sep 17 00:00:00 2001 From: akkking Date: Mon, 22 Apr 2019 18:19:36 -0400 Subject: [PATCH 68/79] Fix no records cases for each components --- src/components/Blocnote/FinancialInputs/BillsTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Blocnote/FinancialInputs/BillsTable.js b/src/components/Blocnote/FinancialInputs/BillsTable.js index b12b7f5d..60dc3585 100644 --- a/src/components/Blocnote/FinancialInputs/BillsTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsTable.js @@ -69,7 +69,7 @@ const BillsTable = (props) => { > {billsName} Bills -
    +
    {header} {rows} -- GitLab From c10ce04775fba472d2fe42c7cab871fbd320d4f5 Mon Sep 17 00:00:00 2001 From: akkking Date: Mon, 22 Apr 2019 18:20:04 -0400 Subject: [PATCH 69/79] Fix no records cases for each components --- .../Blocnote/FinancialInputs/BillsSummaryTable.js | 2 +- src/containers/Blocnote/FinancialInputs/CashBalance.js | 8 ++++++++ src/containers/Blocnote/FinancialInputs/LoanOptions.js | 8 ++++++++ .../Blocnote/FinancialInputs/MortgageLiabilities.js | 8 ++++++++ 4 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js index fec02686..a165391d 100644 --- a/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -180,7 +180,7 @@ class BillsSummaryTable extends Component { onClick={this.addRow} size="sm" > - Add Bill + ✛ Bill diff --git a/src/containers/Blocnote/FinancialInputs/CashBalance.js b/src/containers/Blocnote/FinancialInputs/CashBalance.js index c33e4258..979c29af 100644 --- a/src/containers/Blocnote/FinancialInputs/CashBalance.js +++ b/src/containers/Blocnote/FinancialInputs/CashBalance.js @@ -91,6 +91,14 @@ class CashBalance extends Component { /> ); }); + } else { + rows = ( + + + + ); } let messageStyle = {}; diff --git a/src/containers/Blocnote/FinancialInputs/LoanOptions.js b/src/containers/Blocnote/FinancialInputs/LoanOptions.js index 623afb0a..2edd4166 100644 --- a/src/containers/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/containers/Blocnote/FinancialInputs/LoanOptions.js @@ -114,6 +114,14 @@ class LoanOptions extends Component { /> ); }); + } else { + loans = ( + + + + ); } let messageStyle = {}; diff --git a/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js index 12d0c500..e15cd004 100644 --- a/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -99,6 +99,14 @@ class MortgageLiabilities extends Component { /> ); }); + } else { + rows = ( + + + + ); } let messageStyle = {}; -- GitLab From 2c135b234214034f56893e182e7e53dfd34ca71a Mon Sep 17 00:00:00 2001 From: akkking Date: Tue, 23 Apr 2019 12:24:21 -0400 Subject: [PATCH 70/79] Add Energy Bills expand/Collapse button --- .../Blocnote/FinancialInputs/BillsTable.js | 233 +++++++++++++----- .../FinancialInputs/\bIncomeStatements.js" | 88 ++++++- .../PreliminaryFinance/CostEstimation.js | 42 ++-- .../PreliminaryFinance/SavingEstimation.js | 42 ++-- 4 files changed, 292 insertions(+), 113 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/BillsTable.js b/src/components/Blocnote/FinancialInputs/BillsTable.js index 60dc3585..a3ca4a89 100644 --- a/src/components/Blocnote/FinancialInputs/BillsTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsTable.js @@ -1,83 +1,184 @@ -import React from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Table, + Button, } from 'reactstrap'; import BillsRow from './BillsRow'; -const BillsTable = (props) => { - const headerStyle = { - textAlign: 'center', - fontWeight: 'bold', - // marginBottom: '15px', - padding: '15px', - borderBottom: '1px solid #CCCCCC', - background: '#EEEEEE', - }; - const tdStyle = { - textAlign: 'center', - fontSize: '13px', - }; +class BillsTable extends Component { - const billsName = props.billsName.charAt(0).toUpperCase() + props.billsName.slice(1); - let rows = []; - let header = ( - - - - - - - ); - if (props.billsData.length !== 0) { - console.log(props.billsData); // eslint-disable-line - rows = props.billsData.map((bill) => { - // charge = charge.toLocaleString(); - return ( - - ); + constructor(props) { + global.expandNum = 15; + super(props); + this.state = { + billsData: (this.props.billsData.length > global.expandNum) ? + this.props.billsData.slice(0, global.expandNum) : this.props.billsData, + showExpandButton: (this.props.billsData.length > global.expandNum) === true, + showCollapseButton: false, + }; + } + + expandBills = () => { + console.log(this.props.billsData.slice(0, this.state.billsData.length + global.expandNum)); // eslint-disable-line + this.setState({ + billsData: this.props.billsData.slice(0, this.state.billsData.length + global.expandNum), + }, () => { + console.log('Expanded'); // eslint-disable-line + this.setState({ + showCollapseButton: true, + }); + if (this.state.billsData.length === this.props.billsData.length) { + console.log(this.props.billsData.length); // eslint-disable-line + this.setState({ + showExpandButton: false, + }); + } }); - } else { - header = ''; - rows = ( + } + + collapeBills = () => { + const collapeNum = this.state.billsData.length === this.props.billsData.length ? + this.state.billsData.length % global.expandNum : global.expandNum; + this.setState({ + billsData: this.props.billsData.slice(0, this.state.billsData.length - collapeNum), + }, () => { + console.log('Collapsed'); // eslint-disable-line + this.setState({ + showExpandButton: true, + }); + if (this.state.billsData.length <= global.expandNum) { + this.setState({ + showCollapseButton: false, + }); + } + }); + } + + render() { + const headerStyle = { + textAlign: 'center', + fontWeight: 'bold', + // marginBottom: '15px', + padding: '15px', + borderBottom: '1px solid #999999', + background: '#EEEEEE', + }; + const tdStyle = { + textAlign: 'center', + fontSize: '13px', + }; + const buttonStyle = { + textAlign: 'center', + marginBottom: '30px', + marginRight: '-10px', + cursor: 'pointer', + }; + + const billsName = this.props.billsName.charAt(0).toUpperCase() + this.props.billsName.slice(1); + let header = ( - + + + + ); - } + let rows = []; + let expandButton = null; + let collapseButton = null; + const showBillNum = this.props.billsData.length > 0 ? + `Showing ${this.state.billsData.length} of ${this.props.billsData.length}` : null; + + if (this.state.billsData.length !== 0) { + console.log(this.props.billsData); // eslint-disable-line + rows = this.state.billsData.map((bill) => { + // charge = charge.toLocaleString(); + return ( + + ); + }); + } else { + header = ''; + rows = ( + + + + ); + } - return ( -
    -
    - {billsName} Bills + if (this.state.showExpandButton) { + expandButton = ( + + ); + } + if (this.state.showCollapseButton) { + collapseButton = ( + + ); + } + + return ( +
    +
    + Currently no statements. +
    + Currently no loans. +
    + Currently no liabilities. +
    Date FromDate ToUsage (kWh)Amount
    - There is no bill. - Date FromDate ToUsage (kWh)Amount
    + There is no bill. +
    + + + + + {header} + + {rows} + +
    + {billsName} Bills + + {showBillNum} +
    +
    + {expandButton} + {collapseButton} +
    - - {header} - - {rows} - -
    - - ); -}; + ); + } +} BillsTable.propTypes = { billsName: PropTypes.string, diff --git "a/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" "b/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" index f7fa4d68..369f94c6 100644 --- "a/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" +++ "b/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" @@ -128,6 +128,40 @@ class IncomeStatements extends Component { return headers; } + buildEmptyHeader = () => { + const headers = []; + const year = 'year'; + headers.push( +
    + Year + + + + {' '}Next Year{' '} + + {' '}Average{' '} +
    + + {celldata} + +
    - - - {header} - - + + {header} + {rows} diff --git a/src/containers/Blocnote/PreliminaryFinance/CostEstimation.js b/src/containers/Blocnote/PreliminaryFinance/CostEstimation.js index e697f794..15f1a003 100644 --- a/src/containers/Blocnote/PreliminaryFinance/CostEstimation.js +++ b/src/containers/Blocnote/PreliminaryFinance/CostEstimation.js @@ -55,6 +55,7 @@ class CostEstimation extends Component { const tdStyle = { textAlign: 'center', padding: '10px 0 10px', + fontSize: '13px', }; if (this.state.costEstimation !== null) { @@ -75,27 +76,26 @@ class CostEstimation extends Component { return (
    -
    - - - - - - - - - - +
    - Cost Estimation -
    ItemEstimated CostOption
    + + + + + + + + {rows} diff --git a/src/containers/Blocnote/PreliminaryFinance/SavingEstimation.js b/src/containers/Blocnote/PreliminaryFinance/SavingEstimation.js index 2c4ce147..640b39b8 100644 --- a/src/containers/Blocnote/PreliminaryFinance/SavingEstimation.js +++ b/src/containers/Blocnote/PreliminaryFinance/SavingEstimation.js @@ -27,6 +27,7 @@ class SavingEstimation extends Component { const tdStyle = { textAlign: 'center', padding: '10px 0 10px', + fontSize: '13px', }; const rows = []; console.log(this.state.savingEstimation); // eslint-disable-line @@ -50,27 +51,26 @@ class SavingEstimation extends Component { return (
    + Cost Estimation +
    ItemEstimated CostOption
    - - - - - - - - - - - + + + + + + + + + {rows} -- GitLab From f3b76c7ed01aee5600f688d8e7bf3ffa2b3c58e6 Mon Sep 17 00:00:00 2001 From: akkking Date: Wed, 24 Apr 2019 00:51:17 -0400 Subject: [PATCH 71/79] Fix income statement create new statement error --- .../FinancialInputs/\bIncomeStatements.js" | 187 ++++++++++++++---- 1 file changed, 152 insertions(+), 35 deletions(-) diff --git "a/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" "b/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" index 369f94c6..e8db5907 100644 --- "a/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" +++ "b/src/containers/Blocnote/FinancialInputs/\bIncomeStatements.js" @@ -20,6 +20,7 @@ class IncomeStatements extends Component { this.toggleGrowthRate = this.toggleGrowthRate.bind(this); this.changeGrowthRate = this.changeGrowthRate.bind(this); this.handleOnChange = this.handleOnChange.bind(this); + // this.handleOnChangeNew = this.handleOnChangeNew.bind(this); const obj = { GRDropdownOpen: false, @@ -46,37 +47,79 @@ class IncomeStatements extends Component { { id: '15', key: '15', name: '15%' }, ], incomeStatements: props.data, + incomeStatementsNew: null, error: false, loading: false, action: null, }; const histYears = {}; + const incomeStatementsNew = { incomeStatementsNew: [] }; if (props.data.hist !== null) { Object.keys(props.data.hist).forEach((year, id) => { const histYear = `Year-${id + 1}`; histYears[histYear] = parseInt(year, 10); }); + } else { + [0, 1, 2].forEach(id => { + const histYear = `Year-${id + 1}`; + histYears[histYear] = null; + }); + + const growthRate = {}; + growthRate['growth-rate'] = props.data.cagr; + incomeStatementsNew.incomeStatementsNew.push(this.initIncomeStatement()); + incomeStatementsNew.incomeStatementsNew.push(this.initIncomeStatement()); + incomeStatementsNew.incomeStatementsNew.push(this.initIncomeStatement()); + incomeStatementsNew.incomeStatementsNew.push(growthRate); } - this.state = Object.assign(obj, histYears); + this.state = Object.assign(obj, histYears, incomeStatementsNew); + console.log(this.state); // eslint-disable-line + } + + initIncomeStatement = () => { + const statement = { + year: null, + revenue: null, + }; + statement['utility-expense'] = null; + statement['non-utility-operating-expense'] = null; + return statement; } handleOnChange = (event) => { const year = event.target.id; const targetName = event.target.name; - const copIS = this.state.incomeStatements; - Object.entries(copIS.hist).forEach((incomeStatement) => { + const copyIS = this.state.incomeStatements; + Object.entries(copyIS.hist).forEach((incomeStatement) => { if (incomeStatement[0] === year) { - copIS.hist[year][targetName] = parseFloat(event.target.value); + copyIS.hist[year][targetName] = parseFloat(event.target.value); } }); - this.setState({ incomeStatements: copIS }, () => { + this.setState({ incomeStatements: copyIS }, () => { console.log(this.state.incomeStatements); // eslint-disable-line }); } + handleOnChangeNew = (event) => { + const id = event.target.id; + const targetName = event.target.name.includes('Year') ? 'year' : event.target.name; + const targetValue = event.target.value; + const copyISNew = this.state.incomeStatementsNew.map((item, key) => { + if (parseInt(key, 10) === parseInt(id, 10)) { + const tmp = item; + tmp[targetName] = targetValue; + return tmp; + } + return item; + }); + this.setState({ incomeStatementsNew: copyISNew }, () => { + console.log(this.state.incomeStatementsNew); // eslint-disable-line + }); + } + toggleGrowthRate() { this.setState({ GRDropdownOpen: !this.state.GRDropdownOpen, @@ -106,7 +149,6 @@ class IncomeStatements extends Component { value={entry[1]} type="number" required - step="0.01" onChange={this.handleOnChange} /> @@ -136,18 +178,23 @@ class IncomeStatements extends Component { Year ); - [0, 1, 2].forEach((entry, key) => { - headers.push( - - ); + let id = 0; + Object.entries(this.state).forEach((entry, key) => { + if (entry[0].includes('Year')) { + headers.push( + + ); + id += 1; + } }); headers.push( ); }); + + calculateSaveButton = ( + + ); } else { header = this.buildEmptyHeader(); - const histYears = [0, 1, 2]; + const ids = Object.keys(this.state.incomeStatementsNew).slice(0, 3).sort(); + console.log(this.state.incomeStatementsNew); // eslint-disable-line rows = columnKeys.map((columnKey, id) => { const cells = [ ...[columnNames[columnKey]], - ...histYears.map((histYear) => { - if (['utility_expense', 'revenue', 'non_utility_expense'].includes(columnKey)) { + ...ids.map((index) => { + const keyMapping = { + revenue: 'revenue', + utility_expense: 'utility-expense', + non_utility_expense: 'non-utility-operating-expense', + }; + + if (['revenue', 'utility_expense', 'non_utility_expense'].includes(columnKey)) { + const newColumnKey = keyMapping[columnKey]; return ( $ ); @@ -344,6 +457,16 @@ class IncomeStatements extends Component { ); }); + + calculateSaveButton = ( + + ); } let messageStyle = {}; @@ -391,13 +514,7 @@ class IncomeStatements extends Component { messageStyle={messageStyle} messageContent={messageContent} />    - + {calculateSaveButton}
    -- GitLab From c2e9c90f9d361f133d93ec5577d22a58dbb9c9b7 Mon Sep 17 00:00:00 2001 From: akkking Date: Wed, 24 Apr 2019 14:18:32 -0400 Subject: [PATCH 72/79] Move components from containers to components folder, update cash balance --- .../Blocnote/FinancialInputs/BillsOverview.js | 2 +- .../Blocnote/FinancialInputs/BillsSummary.js | 52 +- .../FinancialInputs/BillsSummaryRow.js | 26 +- .../FinancialInputs/BillsSummaryTable.js | 242 ++++++---- .../Blocnote/FinancialInputs/BillsTable.js | 1 - .../Blocnote/FinancialInputs/CashBalance.js | 180 +++++-- .../FinancialInputs/CashBalanceRow.js | 13 +- .../FinancialInputs/CustomerPreference.js | 112 ++--- .../FinancialInputs/EnergyBillsOverview.js | 186 -------- .../FinancialInputs/IncomeStatements.js | 449 ++++++++++++++++-- .../Blocnote/FinancialInputs/LoanOptions.js | 197 +++++--- .../FinancialInputs/LoanOptionsRow.js | 6 +- .../FinancialInputs/MortgageLiabilities.js | 141 +++--- .../FinancialInputs/MortgageLiabilitiesRow.js | 20 +- .../Blocnote/FinancialInputs/test.js | 191 -------- .../PreliminaryFinance/CostEstimation.js | 0 .../PreliminaryFinance/CostEstimationRow.js | 0 .../PreliminaryFinance/InputScenario.js | 0 .../PreliminaryFinance/LoanSummary.js | 8 +- .../PreliminaryFinance/SavingEstimation.js | 0 .../PreliminaryFinance/SavingEstimationRow.js | 0 .../PreliminaryFinance/SelectScenario.js | 0 .../Blocnote/FinancialInputs/BillsSummary.js | 115 ----- .../FinancialInputs/BillsSummaryRow.js | 98 ---- .../FinancialInputs/BillsSummaryTable.js | 233 --------- .../Blocnote/FinancialInputs/CashBalance.js | 201 -------- .../FinancialInputs/CashBalanceRow.js | 94 ---- .../FinancialInputs/CustomerPreference.js | 213 --------- .../Blocnote/FinancialInputs/LoanOptions.js | 266 ----------- .../FinancialInputs/LoanOptionsRow.js | 116 ----- .../FinancialInputs/MortgageLiabilities.js | 210 -------- .../FinancialInputs/MortgageLiabilitiesRow.js | 123 ----- .../Blocnote/FinancialInputs/index.js | 14 +- .../Blocnote/PreliminaryFinance/index.js | 4 +- 34 files changed, 1055 insertions(+), 2458 deletions(-) rename src/{containers => components}/Blocnote/FinancialInputs/BillsOverview.js (98%) delete mode 100644 src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js delete mode 100644 src/components/Blocnote/FinancialInputs/test.js rename src/{containers => components}/Blocnote/PreliminaryFinance/CostEstimation.js (100%) rename src/{containers => components}/Blocnote/PreliminaryFinance/CostEstimationRow.js (100%) rename src/{containers => components}/Blocnote/PreliminaryFinance/InputScenario.js (100%) rename src/{containers => components}/Blocnote/PreliminaryFinance/SavingEstimation.js (100%) rename src/{containers => components}/Blocnote/PreliminaryFinance/SavingEstimationRow.js (100%) rename src/{containers => components}/Blocnote/PreliminaryFinance/SelectScenario.js (100%) delete mode 100644 src/containers/Blocnote/FinancialInputs/BillsSummary.js delete mode 100644 src/containers/Blocnote/FinancialInputs/BillsSummaryRow.js delete mode 100644 src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js delete mode 100644 src/containers/Blocnote/FinancialInputs/CashBalance.js delete mode 100644 src/containers/Blocnote/FinancialInputs/CashBalanceRow.js delete mode 100644 src/containers/Blocnote/FinancialInputs/CustomerPreference.js delete mode 100644 src/containers/Blocnote/FinancialInputs/LoanOptions.js delete mode 100644 src/containers/Blocnote/FinancialInputs/LoanOptionsRow.js delete mode 100644 src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js delete mode 100644 src/containers/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js diff --git a/src/containers/Blocnote/FinancialInputs/BillsOverview.js b/src/components/Blocnote/FinancialInputs/BillsOverview.js similarity index 98% rename from src/containers/Blocnote/FinancialInputs/BillsOverview.js rename to src/components/Blocnote/FinancialInputs/BillsOverview.js index 9592267c..1fa5a241 100644 --- a/src/containers/Blocnote/FinancialInputs/BillsOverview.js +++ b/src/components/Blocnote/FinancialInputs/BillsOverview.js @@ -8,7 +8,7 @@ import { Button, Table, } from 'reactstrap'; -import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; +import ResultMessage from './ResultMessage'; class BillsOverview extends Component { diff --git a/src/components/Blocnote/FinancialInputs/BillsSummary.js b/src/components/Blocnote/FinancialInputs/BillsSummary.js index 306b4eb3..05b6b1ba 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummary.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummary.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { + Row, +} from 'reactstrap'; import BillsSummaryTable from './BillsSummaryTable'; @@ -7,23 +10,28 @@ class BillsSummary extends Component { constructor(props) { super(props); this.state = { - billSummary: props.data, - successMessages: [], + billsSummary: props.data, }; } render() { - const headerStyle = { textAlign: 'left', marginBottom: '25px' }; const BillsSummaryTables = []; - if (this.state.billSummary !== null) { - // console.log(this.state.billSummary); // eslint-disable-line - Object.keys(this.state.billSummary).forEach(billName => { + if (this.state.billsSummary !== null) { + console.log(this.state.billsSummary); // eslint-disable-line + Object.keys(this.state.billsSummary).forEach(billName => { BillsSummaryTables.push(
    ); @@ -32,12 +40,12 @@ class BillsSummary extends Component { return (
    -

    +

    Bills Summary

    -
    + {BillsSummaryTables} -
    +
    ); } @@ -74,6 +82,30 @@ BillsSummary.propTypes = { }) ), }), + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + headerStyle: PropTypes.shape({ + textAlign: PropTypes.string, + paddingLeft: PropTypes.string, + marginBottom: PropTypes.string, + }), + buildingId: PropTypes.number, + createBillsSummary: PropTypes.func, + updateBillsSummary: PropTypes.func, + deleteBillsSummary: PropTypes.func, }; BillsSummary.defaultProps = { diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js index 48dc87b2..b7479d8d 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js @@ -12,20 +12,22 @@ class BillsSummaryRow extends Component { constructor(props) { super(props); this.handleOnChange = this.handleOnChange.bind(this); - this.onUpdEvent = this.onUpdEvent.bind(this); - this.onDelEvent = this.onDelEvent.bind(this); + this.handleUpdateBillsSummary = this.handleUpdateBillsSummary.bind(this); + this.handleDeleteBillsSummary = this.handleDeleteBillsSummary.bind(this); this.state = { + id: props.id, year: props.year, charge: props.charge, }; } - onUpdEvent() { - this.props.onUpdEvent(this.state, this.props.id); + handleUpdateBillsSummary() { + console.log(this.state); // eslint-disable-line + this.props.updateBillsSummary(this.state); } - onDelEvent() { - this.props.onDelEvent(this.props.id); + handleDeleteBillsSummary() { + this.props.deleteBillsSummary(this.props.id); } handleOnChange = (event) => { @@ -44,6 +46,7 @@ class BillsSummaryRow extends Component { type="number" step="any" name="year" + required value={this.state.year} onChange={this.handleOnChange} style={{ width: '50%', textAlign: 'left' }} @@ -59,21 +62,22 @@ class BillsSummaryRow extends Component { type="number" step="any" name="charge" + required value={this.state.charge} onChange={this.handleOnChange} style={{ width: '50%', textAlign: 'left' }} /> -
    - - - ); } + let messageStyle = {}; + let messageContent = null; + + if (this.props.loading) { + messageContent = 'Processing ...'; + messageStyle = this.props.defaultMessageStyle; + } + + if (this.props.error && typeof this.props.error === 'object') { + messageContent = this.props.error.response.statusText; + messageStyle = this.props.errorMessageStyle; + } + + if (!this.props.error && !this.props.loading + && this.props.billData !== null + && this.state.action !== null) { + messageContent = this.state.action.charAt(0).toUpperCase() + this.state.action.slice(1); + messageStyle = this.props.successMessageStyle; + } + + const billName = this.props.billName.charAt(0).toUpperCase() + this.props.billName.slice(1); return (
    -
    - Saving Estimation -
    UtilityEstimated SavingsUsed Before RetrofitUsed After Retrofit
    + Saving Estimation +
    UtilityEstimated SavingsUsed Before RetrofitUsed After Retrofit
    - - + + @@ -187,9 +234,58 @@ class IncomeStatements extends Component { }); } + handleCreateIncomeStatements = () => { + const emptyMessages = []; + const incomeStatementsNew = Object.values(this.state.incomeStatementsNew.slice(0, 3)) + .map(statement => { + if (statement.year === null && + !emptyMessages.includes('Year')) { + emptyMessages.push('Year'); + } + if (statement.revenue === null && + !emptyMessages.includes('Revenue')) { + emptyMessages.push('Revenue'); + } + if (statement['utility-expense'] === null && + !emptyMessages.includes('Utility Expense')) { + emptyMessages.push('Utility Expense'); + } + if (statement['non-utility-operating-expense'] === null && + !emptyMessages.includes('Non-Utility Operating Expense')) { + emptyMessages.push('Non-Utility Operating Expense'); + } + + const newStatement = {}; + newStatement.year = String(statement.year); + newStatement.revenue = String(statement.revenue); + newStatement['utility-expense'] = String(statement['utility-expense']); + newStatement['non-utility-operating-expense'] = String(statement['non-utility-operating-expense']); + return newStatement; + }); + + if (emptyMessages.length !== 0) { + const msg = `Please fill in ${emptyMessages.join(', ')} fields.`; + alert(msg); + } else { + const growthRate = {}; + growthRate['growth-rate'] = String(this.state.incomeStatementsNew[3]['growth-rate']); + incomeStatementsNew.push(growthRate); + this.setState({ loading: true }); + this.props.updateIncomeStatements( + this.props.buildingId, + incomeStatementsNew, + ); + this.setState({ + loading: false, + action: 'updated', + }); + } + } + render() { let header = []; let rows = []; + let calculateSaveButton = null; const columnKeys = [ 'revenue', @@ -233,11 +329,10 @@ class IncomeStatements extends Component { ); }); - if (this.state.incomeStatements.future !== null && - this.state.incomeStatements.hist !== null) { + if (this.state.incomeStatements.hist !== null && + this.state.incomeStatements.future !== null) { header = this.buildHeader(); const histYears = Object.keys(this.state.incomeStatements.hist).sort(); - rows = columnKeys.map((columnKey, id) => { const cells = [ ...[columnNames[columnKey]], @@ -298,27 +393,45 @@ class IncomeStatements extends Component {
    + {' '} @@ -87,8 +91,8 @@ BillsSummaryRow.propTypes = { id: PropTypes.number, year: PropTypes.number, charge: PropTypes.number, - onDelEvent: PropTypes.func, - onUpdEvent: PropTypes.func, + updateBillsSummary: PropTypes.func, + deleteBillsSummary: PropTypes.func, }; export default BillsSummaryRow; diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js index 4f803ce6..a165391d 100644 --- a/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsSummaryTable.js @@ -1,136 +1,190 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { - Button, Table, - InputGroup, - InputGroupAddon, - Input, + Button, } from 'reactstrap'; import BillsSummaryRow from './BillsSummaryRow'; +import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; class BillsSummaryTable extends Component { constructor(props) { super(props); - this.updateRow = this.updateRow.bind(this); - this.deleteRow = this.deleteRow.bind(this); - this.addRow = this.addRow.bind(this); + this.handleCreateBillsSummary = this.handleCreateBillsSummary.bind(this); this.state = { billName: props.billName, billData: props.billData, year: '', charge: '', + action: null, }; } - updateRow = (obj, id) => { - const billDataCopy = this.state.billData.map(bill => { - if (bill.id === id) { - const billCopy = bill; - billCopy.year = obj.year; - billCopy.charge = obj.charge; - return billCopy; + handleCreateBillsSummary = () => { + this.props.createBillsSummary( + this.props.buildingId, + { + utility_type: this.props.billName, + year: this.state.year, + charge: this.state.charge, + }, () => { + console.log('saga done!'); // eslint-disable-line } - return bill; - }); - this.setState({ billData: billDataCopy }, () => { - alert('Bill updated!'); + ); + const newBill = { + id: 100, + utility_type: this.props.billName, + year: this.state.year, + charge: this.state.charge, + }; + this.setState({ billData: [...this.state.billData, newBill] }, () => { + console.log(this.state.billData, 'bill added!'); // eslint-disable-line + this.setState({ + year: '', + charge: '', + action: 'created', + }); }); } - deleteRow = id => { - const billDataCopy = this.state.billData.filter(bill => bill.id !== id); - this.setState({ billData: billDataCopy }, () => { - alert('Bill deleted!'); - }); + updateBillsSummary = (billData) => { + this.props.updateBillsSummary( + this.props.buildingId, + billData, + ); + this.setState({ action: 'updated' }); } - addRow = () => { - const newBill = { id: 100, year: this.state.year, charge: this.state.charge }; - const billDataCopy = this.state.billData; - billDataCopy.push(newBill); - this.setState({ billData: billDataCopy }, () => { - console.log(this.state.billData, 'bill added!'); // eslint-disable-line - this.setState({ year: '', charge: '' }); - alert('Bill added!'); - }); + deleteBillsSummary = id => { + if (confirm('Are you sure to delete this bill?') === true) { + this.props.deleteBillsSummary( + this.props.buildingId, + { id }, + ); + const billDataCopy = this.state.billData.filter(bill => bill.id !== id); + this.setState({ + billData: billDataCopy, + action: 'deleted', + }); + } } handleOnChange = (event) => { this.setState({ [event.target.name]: event.target.value }); } - render() { - const tableHeaderStyle = { - textAlign: 'left', + addRow = () => { + const newBillData = { + id: this.state.id, + year: this.state.year, + charge: this.state.charge, }; + const billDataCopy = this.state.billData; + billDataCopy.push(newBillData); + this.setState({ billData: billDataCopy }, () => { + console.log(this.state.billData, 'New bill added!'); // eslint-disable-line + this.setState({ + id: this.state.id + 1, + year: '', + charge: '', + }); + }); + } + render() { let rows = []; - if (this.state.billData !== []) { - rows = this.state.billData.map((item) => { + + if (this.state.billData.length !== 0) { + rows = this.state.billData.map((bill) => { // charge = charge.toLocaleString(); return ( ); }); - rows.push( + } else { + rows = (
    - - - Year - - - - - - - $ - - - - - {' '} + + Currently no bill.
    - - - - - +
    +
    + {billName} Annual Charge +
    +
    + {' '}{' '} + +
    +
    +
    - {this.props.billName} Annual Charge -
    {rows} @@ -141,6 +195,7 @@ class BillsSummaryTable extends Component { } BillsSummaryTable.propTypes = { + buildingId: PropTypes.number, billName: PropTypes.string, billData: PropTypes.arrayOf( PropTypes.shape({ @@ -149,7 +204,26 @@ BillsSummaryTable.propTypes = { id: PropTypes.number, }) ), - // deleteRow: PropTypes.func, + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + createBillsSummary: PropTypes.func, + updateBillsSummary: PropTypes.func, + deleteBillsSummary: PropTypes.func, + error: PropTypes.bool, + loading: PropTypes.bool, }; BillsSummaryTable.defaultProps = { diff --git a/src/components/Blocnote/FinancialInputs/BillsTable.js b/src/components/Blocnote/FinancialInputs/BillsTable.js index a3ca4a89..1a2f32a4 100644 --- a/src/components/Blocnote/FinancialInputs/BillsTable.js +++ b/src/components/Blocnote/FinancialInputs/BillsTable.js @@ -92,7 +92,6 @@ class BillsTable extends Component { `Showing ${this.state.billsData.length} of ${this.props.billsData.length}` : null; if (this.state.billsData.length !== 0) { - console.log(this.props.billsData); // eslint-disable-line rows = this.state.billsData.map((bill) => { // charge = charge.toLocaleString(); return ( diff --git a/src/components/Blocnote/FinancialInputs/CashBalance.js b/src/components/Blocnote/FinancialInputs/CashBalance.js index b59a24dc..9898dee9 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalance.js +++ b/src/components/Blocnote/FinancialInputs/CashBalance.js @@ -5,6 +5,7 @@ import { Table, } from 'reactstrap'; import CashBalanceRow from './CashBalanceRow'; +import ResultMessage from './ResultMessage'; class CashBalance extends Component { @@ -15,39 +16,89 @@ class CashBalance extends Component { this.state = { cashBalance: this.props.data, id: this.props.data.length, - balanceAmount: '', - statementDate: '', + balanceAmount: null, + statementDate: null, isFromBalanceSheet: false, + action: null, }; } deleteRow = id => { - const cashBalanceCopy = this.state.cashBalance.filter((statement, index) => { - console.log(statement); // eslint-disable-line - return index !== id; - }); - this.setState({ cashBalance: cashBalanceCopy }, () => { - alert('Statement deleted!'); - }); + if (this.state.cashBalance.length === 1) { + alert('Sorry, you need at least one statement!'); + } else if (confirm('Are you sure to delete this statement?') === true) { + const cashBalanceCopy = this.state.cashBalance.filter((statement, index) => { + console.log(statement); // eslint-disable-line + return index !== id; + }); + this.setState({ cashBalance: cashBalanceCopy }, () => { + console.log('Statement deleted!'); // eslint-disable-line + }); + } } addRow = () => { - const newStatement = { - id: this.state.id, - balanceAmount: this.state.balanceAmount, - statementDate: this.state.statementDate, - isFromBalanceSheet: this.state.isFromBalanceSheet, - }; - const cashBalanceCopy = this.state.cashBalance; - cashBalanceCopy.push(newStatement); - this.setState({ cashBalance: cashBalanceCopy }, () => { - console.log(this.state.cashBalance, 'New statement added!'); // eslint-disable-line - this.setState({ - id: this.state.id + 1, - balanceAmount: '', - statementDate: '', - isFromBalanceSheet: false, + const emptyFields = []; + if (this.state.cashBalance.length > 0) { + Object.values(this.state.cashBalance).forEach(statement => { + if (statement.balanceAmount === null && + !emptyFields.includes('Balance Amount')) { + emptyFields.push('Balance Amount'); + } + if (statement.statementDate === null && + !emptyFields.includes('Statement Date')) { + emptyFields.push('Statement Date'); + } + }); + } + + if (emptyFields.length > 0) { + alert(`Please fill in ${emptyFields.join(', ')} fields`); + } else { + const newStatement = { + id: this.state.id, + balanceAmount: this.state.balanceAmount, + statementDate: this.state.statementDate, + isFromBalanceSheet: this.state.isFromBalanceSheet, + }; + const cashBalanceCopy = this.state.cashBalance; + cashBalanceCopy.push(newStatement); + this.setState({ cashBalance: cashBalanceCopy }, () => { + console.log(this.state.cashBalance, 'New statement added!'); // eslint-disable-line + this.setState({ + id: this.state.id + 1, + balanceAmount: null, + statementDate: null, + isFromBalanceSheet: false, + }); }); + } + } + + updateRow = (row) => { + const cashBalance = this.state.cashBalance.map((statement, id) => { + if (id === row.id) { + const tmp = { id }; + tmp.balance_amount = row.balanceAmount; + tmp.statement_date = row.statementDate; + tmp.is_from_balance_sheet = row.isFromBalanceSheet; + return tmp; + } + return statement; + }); + this.setState({ cashBalance }, () => { + console.log(cashBalance); // eslint-disable-line + }); + } + + handleUpdateCashBalance = () => { + this.props.updateCashBalance( + this.props.buildingId, + this.state.cashBalance, + ); + this.setState({ + loading: false, + action: 'updated', }); } @@ -64,9 +115,10 @@ class CashBalance extends Component { ); }); - let rows = []; - if (this.state.cashBalance !== null) { + let saveButton = null; + let rows = []; + if (Object.keys(this.state.cashBalance).length !== 0) { rows = this.state.cashBalance.map((statement, index) => { return ( ); }); + saveButton = ( + + ); + } else { + rows = ( + + + + ); + } + + let messageStyle = {}; + let messageContent = null; + + if (this.props.loading) { + messageContent = 'Updating ...'; + messageStyle = this.props.defaultMessageStyle; + } + + if (this.props.error && typeof this.props.error === 'object') { + messageContent = this.props.error.response.statusText; + messageStyle = this.props.errorMessageStyle; + } + + if (!this.props.error && !this.props.loading + && this.props.data !== null + && this.state.action) { + messageContent = 'Saved!'; + messageStyle = this.props.successMessageStyle; } return ( @@ -88,12 +177,10 @@ class CashBalance extends Component {
    -
    + Currently no statements. +
    - - - {header} - - +
    + + {header} + {rows} @@ -102,15 +189,17 @@ class CashBalance extends Component {
    +      - + {saveButton}
    @@ -133,6 +222,25 @@ CashBalance.propTypes = { statement_date: PropTypes.string, }), ), + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + buildingId: PropTypes.number, + updateCashBalance: PropTypes.func, + error: PropTypes.bool, + loading: PropTypes.bool, }; export default CashBalance; diff --git a/src/components/Blocnote/FinancialInputs/CashBalanceRow.js b/src/components/Blocnote/FinancialInputs/CashBalanceRow.js index c07eacd3..2f0974ec 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalanceRow.js +++ b/src/components/Blocnote/FinancialInputs/CashBalanceRow.js @@ -26,14 +26,19 @@ class CashBalanceRow extends Component { } handleOnChange = (event) => { - this.setState({ [event.target.name]: event.target.value }); + this.setState({ [event.target.name]: + event.target.name === 'isFromBalanceSheet' ? event.target.checked : event.target.value }, + () => { + console.log(this.state); // eslint-disable-line + this.props.onChangeEvent(this.state); + }); } render() { return ( - ); + buildHeader = () => { + const headers = []; + const year = 'year'; + headers.push( + + ); + + Object.entries(this.state).forEach((entry, key) => { + if (entry[0].includes('Year')) { + headers.push( + + ); + } + }); + const futureYear = this.state.incomeStatements.future.year; + headers.push( + + ); + const average = 'average'; + headers.push( + + ); + return headers; + } + + buildEmptyHeader = () => { + const headers = []; + const year = 'year'; + headers.push( + + ); + let id = 0; + Object.entries(this.state).forEach((entry, key) => { + if (entry[0].includes('Year')) { + headers.push( + + ); + id += 1; + } + }); + headers.push( + + ); + headers.push( + + ); + return headers; + } + + handleUpdateIncomeStatements = () => { + this.setState({ loading: true }); + const hist = []; + Object.entries(this.state.incomeStatements.hist).forEach(incomeStatement => { + const obj = { + year: String(incomeStatement[0]), + revenue: String(incomeStatement[1].revenue), + }; + obj['non-utility-operating-expense'] = String(incomeStatement[1].non_utility_expense); + obj['utility-expense'] = String(incomeStatement[1].utility_expense); + hist.push(obj); }); + const growthRate = {}; + growthRate['growth-rate'] = String(this.state.selectedDropdownId); + hist.push(growthRate); + this.props.updateIncomeStatements( + this.props.buildingId, + hist, + ); + this.setState({ + loading: false, + action: 'updated', + }); + } + + handleCreateIncomeStatements = () => { + const emptyMessages = []; + const incomeStatementsNew = Object.values(this.state.incomeStatementsNew.slice(0, 3)) + .map(statement => { + if (statement.year === null && + !emptyMessages.includes('Year')) { + emptyMessages.push('Year'); + } + if (statement.revenue === null && + !emptyMessages.includes('Revenue')) { + emptyMessages.push('Revenue'); + } + if (statement['utility-expense'] === null && + !emptyMessages.includes('Utility Expense')) { + emptyMessages.push('Utility Expense'); + } + if (statement['non-utility-operating-expense'] === null && + !emptyMessages.includes('Non-Utility Operating Expense')) { + emptyMessages.push('Non-Utility Operating Expense'); + } + + const newStatement = {}; + newStatement.year = String(statement.year); + newStatement.revenue = String(statement.revenue); + newStatement['utility-expense'] = String(statement['utility-expense']); + newStatement['non-utility-operating-expense'] = String(statement['non-utility-operating-expense']); + return newStatement; + }); + + if (emptyMessages.length !== 0) { + const msg = `Please fill in ${emptyMessages.join(', ')} fields.`; + alert(msg); + } else { + const growthRate = {}; + growthRate['growth-rate'] = String(this.state.incomeStatementsNew[3]['growth-rate']); + incomeStatementsNew.push(growthRate); + this.setState({ loading: true }); + this.props.updateIncomeStatements( + this.props.buildingId, + incomeStatementsNew, + ); + this.setState({ + loading: false, + action: 'updated', + }); + } } render() { let header = []; let rows = []; + let calculateSaveButton = null; const columnKeys = [ 'revenue', @@ -110,28 +329,46 @@ class IncomeStatements extends Component { ); }); - if (this.props.data !== null) { - header = this.buildHeader(['Year']); - const histYears = Object.keys(this.props.data.hist).sort(); - + if (this.state.incomeStatements.hist !== null && + this.state.incomeStatements.future !== null) { + header = this.buildHeader(); + const histYears = Object.keys(this.state.incomeStatements.hist).sort(); rows = columnKeys.map((columnKey, id) => { const cells = [ ...[columnNames[columnKey]], ...histYears.map((histYear) => { - let cellValue = this.props.data.hist[histYear][columnKey]; + let cellValue = this.state.incomeStatements.hist[histYear][columnKey]; cellValue = Math.round(cellValue * 100) / 100; + if (['utility_expense', 'revenue', 'non_utility_expense'].includes(columnKey)) { + return ( + + + $ + + + + ); + } cellValue = cellValue.toLocaleString(); cellValue = `$${cellValue}`; return cellValue; }), - ...[this.props.data.future[columnKey]].map((amount) => { + ...[this.state.incomeStatements.future[columnKey]].map((amount) => { let cellValue = amount; cellValue = Math.round(cellValue * 100) / 100; cellValue = cellValue.toLocaleString(); cellValue = `$${cellValue}`; return cellValue; }), - ...Object.values([this.props.data.average[columnKey]]).map((amount) => { + ...Object.values([this.state.incomeStatements.average[columnKey]]).map((amount) => { let cellValue = amount; cellValue = Math.round(cellValue * 100) / 100; cellValue = cellValue.toLocaleString(); @@ -156,6 +393,99 @@ class IncomeStatements extends Component { ); }); + + calculateSaveButton = ( + + ); + } else { + header = this.buildEmptyHeader(); + const ids = Object.keys(this.state.incomeStatementsNew).slice(0, 3).sort(); + rows = columnKeys.map((columnKey, id) => { + const cells = [ + ...[columnNames[columnKey]], + ...ids.map((index) => { + const keyMapping = { + revenue: 'revenue', + utility_expense: 'utility-expense', + non_utility_expense: 'non-utility-operating-expense', + }; + + if (['revenue', 'utility_expense', 'non_utility_expense'].includes(columnKey)) { + const newColumnKey = keyMapping[columnKey]; + return ( + + + $ + + + + ); + } + return null; + }), + ...['', ''], + ]; + + const cellsData = Object.values(cells).map((celldata, key) => { + return ( + + ); + }); + + return ( + + {cellsData} + + ); + }); + + calculateSaveButton = ( + + ); + } + + let messageStyle = {}; + let messageContent = null; + + if (this.state.loading) { + messageContent = 'Processing ...'; + messageStyle = this.props.defaultMessageStyle; + } + + if (this.state.error && typeof this.state.error === 'object') { + messageContent = this.state.error.response.statusText; + messageStyle = this.props.errorMessageStyle; + } + + if (!this.state.error && !this.state.loading + && this.state.incomeStatements !== null + && this.state.action !== null) { + messageContent = this.state.action.charAt(0).toUpperCase() + this.state.action.slice(1); + messageStyle = this.props.successMessageStyle; } return ( @@ -166,12 +496,12 @@ class IncomeStatements extends Component {
    - {this.state.growthRateDropdownValue} + {this.state.GRDropdownValue} {growthRateOptions} @@ -179,19 +509,19 @@ class IncomeStatements extends Component {
    - +    + {calculateSaveButton}
    -
    - {this.props.id} + {this.props.id + 1} @@ -44,6 +49,7 @@ class CashBalanceRow extends Component { type="number" step="any" name="balanceAmount" + required value={this.state.balanceAmount} onChange={this.handleOnChange} style={{ width: '50%', textAlign: 'left' }} @@ -55,6 +61,7 @@ class CashBalanceRow extends Component { type="date" className="form-control date" name="statementDate" + required value={this.state.statementDate} onChange={this.handleOnChange} /> @@ -63,6 +70,7 @@ class CashBalanceRow extends Component { @@ -86,6 +94,7 @@ CashBalanceRow.propTypes = { statementDate: PropTypes.string, isFromBalanceSheet: PropTypes.bool, onDelEvent: PropTypes.func, + onChangeEvent: PropTypes.func, }; export default CashBalanceRow; diff --git a/src/components/Blocnote/FinancialInputs/CustomerPreference.js b/src/components/Blocnote/FinancialInputs/CustomerPreference.js index bb835027..5741596c 100644 --- a/src/components/Blocnote/FinancialInputs/CustomerPreference.js +++ b/src/components/Blocnote/FinancialInputs/CustomerPreference.js @@ -14,14 +14,11 @@ class CustomerPreference extends Component { constructor(props) { super(props); this.handleOnChange = this.handleOnChange.bind(this); - this.saveData = this.saveData.bind(this); this.state = { - customerPreference: this.props.data, - downpayment: this.props.downpayment, - expectedNetNoiDscr: this.props.expectedNetNoiDscr, - expectedPayback: this.props.expectedPayback, - messageStyle: {}, - messageContent: null, + downpayment: this.props.data.downpayment, + expectedNetNoiDscr: this.props.data.expected_net_noi_dscr, + expectedPayback: this.props.data.expected_payback, + updated: false, }; } @@ -29,46 +26,16 @@ class CustomerPreference extends Component { this.setState({ [event.target.name]: event.target.value }); } - saveData = () => { - if (this.state.downpayment === null || - this.state.expectedNetNoiDscr === null || - this.state.expectedPayback === null) { - this.setState({ - messageContent: 'Data input cannot empty!', - messageStyle: this.props.errorMessageStyle, - }); - } else { - fetch(`${this.props.baseURL}/customer-preference/`, { - method: 'PUT', - credentials: 'same-origin', - body: JSON.stringify({ - downpayment: this.state.downpayment, - expected_net_noi_dscr: this.state.expectedNetNoiDscr, - expected_payback: this.state.expectedPayback, - }), - headers: new Headers({ - 'Content-Type': 'application/json', - 'X-CSRFToken': this.state.csrftoken, - }), - }).then((res) => { - if (!res.err) { - this.setState({ - messageContent: 'Saved.', - messageStyle: this.props.successMessageStyle, - }); - } else { - const errors = []; - res.err.responseBody.then((error) => { - Object.keys(error).forEach((key) => { - errors.push(`${error[key][0]}`); - }); - }); - this.setState({ - errorMessage: errors, - }); - } - }); - } + handleUpdateCustomerPreference = () => { + this.props.updateCustomerPreference( + this.props.buildingId, + { + downpayment: parseFloat(this.state.downpayment).toFixed(2), + expected_net_noi_dscr: parseInt(this.state.expectedNetNoiDscr, 10), + expected_payback: this.state.expectedPayback, + }, + ); + this.setState({ updated: true }); } render() { @@ -99,6 +66,7 @@ class CustomerPreference extends Component { @@ -151,6 +120,26 @@ class CustomerPreference extends Component { ); } + let messageStyle = {}; + let messageContent = null; + + if (this.props.loading) { + messageContent = 'Updating ...'; + messageStyle = this.props.defaultMessageStyle; + } + + if (this.props.error && typeof this.props.error === 'object') { + messageContent = this.props.error.response.statusText; + messageStyle = this.props.errorMessageStyle; + } + + if (!this.props.error && !this.props.loading + && this.props.data !== null + && this.state.updated) { + messageContent = 'Saved!'; + messageStyle = this.props.successMessageStyle; + } + return (

    @@ -158,12 +147,10 @@ class CustomerPreference extends Component {

    - - - - {header} - - +
    + + {header} + {rows} @@ -173,12 +160,12 @@ class CustomerPreference extends Component {
       @@ -202,10 +189,6 @@ CustomerPreference.propTypes = { expected_net_noi_dscr: PropTypes.string, expected_payback: PropTypes.string, }), - downpayment: PropTypes.number, - expectedNetNoiDscr: PropTypes.number, - expectedPayback: PropTypes.number, - baseURL: PropTypes.string, successMessageStyle: PropTypes.shape({ color: PropTypes.string, paddingLeft: PropTypes.string, @@ -216,6 +199,15 @@ CustomerPreference.propTypes = { paddingLeft: PropTypes.string, fontWeight: PropTypes.string, }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + buildingId: PropTypes.number, + updateCustomerPreference: PropTypes.func, + error: PropTypes.bool, + loading: PropTypes.bool, }; export default CustomerPreference; diff --git a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js b/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js deleted file mode 100644 index eba6fd2d..00000000 --- a/src/components/Blocnote/FinancialInputs/EnergyBillsOverview.js +++ /dev/null @@ -1,186 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - Dropdown, - DropdownToggle, - DropdownMenu, - DropdownItem, - Button, - Table, -} from 'reactstrap'; - - -class EnergyBillsOverview extends Component { - constructor(props) { - super(props); - this.toggleEstimation = this.toggleEstimation.bind(this); - this.changeEstimation = this.changeEstimation.bind(this); - this.state = { - estimationDropdownOpen: false, - estimationDropDownValue: 'Select Estimation', - estimationOptions: [ - { id: 'RoughEstimation', key: 'RoughEstimation', name: 'Rough Estimation' }, - { id: 'Fancy Estimation', key: 'FancyEstimation', name: 'Fancy Estimation' }, - ], - }; - } - - toggleEstimation() { - this.setState({ - estimationDropdownOpen: !this.state.estimationDropdownOpen, - }); - } - - changeEstimation(e) { - this.setState({ estimationDropDownValue: e.currentTarget.textContent }); - } - - buildHeader = (headerNames) => { - return [...headerNames, ...Object.keys(this.props.data.electric)].map((name, key) => { - return ( -
    - ); - }); - } - - buildFooter = (footerNames) => { - const cellValues = Object.values(this.props.data.total_annual_charge).map((amount) => { - let cellValue = amount; - cellValue = Math.round(cellValue * 100) / 100; - cellValue = cellValue.toLocaleString(); - return `$${cellValue}`; - }); - return [...footerNames, ...cellValues].map((name, key) => { - return ( - - ); - }); - } - - render() { - const headerStyle = { textAlign: 'left', marginBottom: '25px' }; - const validBillNames = ['electric', 'water', 'gas', 'oil']; - const estimationOptions = this.state.estimationOptions.map(e => { - return ( - - {e.name} - - ); - }); - let header = []; - let footer = []; - let rows = []; - - if (this.props.data !== null) { - const headerNames = ['Data Source', 'Utility']; - const footerNames = ['', 'Total Annual Charge']; - header = this.buildHeader(headerNames); - footer = this.buildFooter(footerNames); - - rows = Object.keys(this.props.data) - .filter(billName => validBillNames.includes(billName)) - .map((billName, trKey) => { - const cells = [ - ...['Annual Estimate', billName.charAt(0).toUpperCase() + billName.slice(1)], - ...Object.values(this.props.data[billName]), - ]; - const cellsData = Object.values(cells).map((amount, tdKey) => { - let cellValue = amount; - - if (!isNaN(cellValue)) { - cellValue = Math.round(cellValue * 100) / 100; - cellValue = cellValue.toLocaleString(); - cellValue = `$${cellValue}`; - } - - return ( - - ); - }); - - return ( - - {cellsData} - - ); - }); - } - - return ( -
    -

    - Energy Bills Overview -

    -
    -
    - - - {this.state.estimationDropDownValue} - - - {estimationOptions} - - -
    -
    - -
    -
    -
    -
    -
    - {name} - - {name} - - - {cellValue} - -
    - - - {header} - - - - {rows} - {footer} - -
    -
    -
    -
    -
    - -
    -
    -
    - ); - } -} - -EnergyBillsOverview.propTypes = { - data: PropTypes.shape({ - electric: PropTypes.objectOf, - electric_user: PropTypes.string, - gas: PropTypes.objectOf, - gas_user: PropTypes.string, - oil: PropTypes.objectOf, - oil_user: PropTypes.string, - water: PropTypes.objectOf, - water_user: PropTypes.string, - total_annual_charge: PropTypes.objectOf, - }), -}; - -export default EnergyBillsOverview; diff --git a/src/components/Blocnote/FinancialInputs/IncomeStatements.js b/src/components/Blocnote/FinancialInputs/IncomeStatements.js index 096523ef..1043fecc 100644 --- a/src/components/Blocnote/FinancialInputs/IncomeStatements.js +++ b/src/components/Blocnote/FinancialInputs/IncomeStatements.js @@ -6,8 +6,12 @@ import { DropdownMenu, DropdownItem, Button, + Input, + InputGroup, + InputGroupAddon, Table, } from 'reactstrap'; +import ResultMessage from './ResultMessage'; class IncomeStatements extends Component { @@ -15,58 +19,273 @@ class IncomeStatements extends Component { super(props); this.toggleGrowthRate = this.toggleGrowthRate.bind(this); this.changeGrowthRate = this.changeGrowthRate.bind(this); - this.state = { - growthRateDropdownOpen: false, - growthRateDropdownValue: 'Growth Rate', + this.handleOnChange = this.handleOnChange.bind(this); + // this.handleOnChangeNew = this.handleOnChangeNew.bind(this); + + const obj = { + GRDropdownOpen: false, + GRDropdownValue: 'Select Growth Rate', + selectedDropdownId: 0, growthRateOptions: [ - { id: 'xx', key: 'xx', name: 'CAGR=1.58%' }, - { id: 'yy', key: 'yy', name: 'Average' }, - { id: '0.00', key: '0.00', name: '0%' }, - { id: '0.01', key: '0.01', name: '1%' }, - { id: '0.02', key: '0.02', name: '2%' }, - { id: '0.03', key: '0.03', name: '3%' }, - { id: '0.04', key: '0.04', name: '4%' }, - { id: '0.05', key: '0.05', name: '5%' }, - { id: '0.06', key: '0.06', name: '6%' }, - { id: '0.07', key: '0.07', name: '7%' }, - { id: '0.08', key: '0.08', name: '8%' }, - { id: '0.09', key: '0.09', name: '9%' }, - { id: '0.10', key: '0.10', name: '10%' }, - { id: '0.11', key: '0.11', name: '11%' }, - { id: '0.12', key: '0.12', name: '12%' }, - { id: '0.13', key: '0.13', name: '13%' }, - { id: '0.14', key: '0.14', name: '14%' }, - { id: '0.15', key: '0.15', name: '15%' }, + { id: '-2', key: '-2', name: 'CAGR=1.58%' }, + { id: '-1', key: '-1', name: 'Average' }, + { id: '0', key: '0', name: '0%' }, + { id: '1', key: '1', name: '1%' }, + { id: '2', key: '2', name: '2%' }, + { id: '3', key: '3', name: '3%' }, + { id: '4', key: '4', name: '4%' }, + { id: '5', key: '5', name: '5%' }, + { id: '6', key: '6', name: '6%' }, + { id: '7', key: '7', name: '7%' }, + { id: '8', key: '8', name: '8%' }, + { id: '9', key: '9', name: '9%' }, + { id: '10', key: '10', name: '10%' }, + { id: '11', key: '11', name: '11%' }, + { id: '12', key: '12', name: '12%' }, + { id: '13', key: '13', name: '13%' }, + { id: '14', key: '14', name: '14%' }, + { id: '15', key: '15', name: '15%' }, ], + incomeStatements: props.data, + incomeStatementsNew: null, + error: false, + loading: false, + action: null, + }; + + const histYears = {}; + const incomeStatementsNew = { incomeStatementsNew: [] }; + if (props.data.hist !== null) { + Object.keys(props.data.hist).forEach((year, id) => { + const histYear = `Year-${id + 1}`; + histYears[histYear] = parseInt(year, 10); + }); + } else { + [0, 1, 2].forEach(id => { + const histYear = `Year-${id + 1}`; + histYears[histYear] = null; + }); + + const growthRate = {}; + growthRate['growth-rate'] = props.data.cagr; + incomeStatementsNew.incomeStatementsNew.push(this.initIncomeStatement()); + incomeStatementsNew.incomeStatementsNew.push(this.initIncomeStatement()); + incomeStatementsNew.incomeStatementsNew.push(this.initIncomeStatement()); + incomeStatementsNew.incomeStatementsNew.push(growthRate); + } + + this.state = Object.assign(obj, histYears, incomeStatementsNew); + console.log(this.state); // eslint-disable-line + } + + initIncomeStatement = () => { + const statement = { + year: null, + revenue: null, }; + statement['utility-expense'] = null; + statement['non-utility-operating-expense'] = null; + return statement; + } + + handleOnChange = (event) => { + const year = event.target.id; + const targetName = event.target.name; + const copyIS = this.state.incomeStatements; + Object.entries(copyIS.hist).forEach((incomeStatement) => { + if (incomeStatement[0] === year) { + copyIS.hist[year][targetName] = parseFloat(event.target.value); + } + }); + + this.setState({ incomeStatements: copyIS }, () => { + console.log(this.state.incomeStatements); // eslint-disable-line + }); + } + + handleOnChangeNew = (event) => { + const id = event.target.id; + const targetName = event.target.name.includes('Year') ? 'year' : event.target.name; + const targetValue = event.target.value; + const copyISNew = this.state.incomeStatementsNew.map((item, key) => { + if (parseInt(key, 10) === parseInt(id, 10)) { + const tmp = item; + tmp[targetName] = targetValue; + return tmp; + } + return item; + }); + this.setState({ incomeStatementsNew: copyISNew }, () => { + console.log(this.state.incomeStatementsNew); // eslint-disable-line + }); } toggleGrowthRate() { this.setState({ - growthRateDropdownOpen: !this.state.growthRateDropdownOpen, + GRDropdownOpen: !this.state.GRDropdownOpen, }); } changeGrowthRate(e) { - this.setState({ growthRateDropDownValue: e.currentTarget.textContent }); + this.setState({ GRDropdownValue: e.currentTarget.textContent }); + this.setState({ selectedDropdownId: e.currentTarget.id }); } - buildHeader = (headerNames) => { - return [ - ...headerNames, - ...Object.keys(this.props.data.hist), - ...[this.props.data.future.year], - ...['Average'], - ].map((name, key) => { - return ( -
    {name} + Year + + + + {futureYear} + + Average + + Year + + + + {' '}Next Year{' '} + + {' '}Average{' '} +
    + + {celldata} + +
    - - - {header} - - +
    + + {header} + {rows} @@ -211,6 +541,7 @@ IncomeStatements.propTypes = { textAlign: PropTypes.string, marginBottom: PropTypes.string, }), + buildingId: PropTypes.number, data: PropTypes.shape({ average: PropTypes.shape({ electric_opex: PropTypes.number, @@ -252,6 +583,22 @@ IncomeStatements.propTypes = { non_utility_operating_expense: PropTypes.string, })), }), + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + updateIncomeStatements: PropTypes.func, }; export default IncomeStatements; diff --git a/src/components/Blocnote/FinancialInputs/LoanOptions.js b/src/components/Blocnote/FinancialInputs/LoanOptions.js index 951e1fa1..0f3cdba6 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptions.js @@ -8,6 +8,7 @@ import { InputGroupAddon, } from 'reactstrap'; import LoanOptionsRow from './LoanOptionsRow'; +import ResultMessage from './ResultMessage'; class LoanOptions extends Component { @@ -24,17 +25,22 @@ class LoanOptions extends Component { interestRate: '', duration: '', maxLoanAmount: '', + updated: false, }; } deleteRow = id => { - const loanOptionsCopy = this.state.loanOptions.filter((loanOption, index) => { - console.log(loanOption); // eslint-disable-line - return index !== id; - }); - this.setState({ loanOptions: loanOptionsCopy }, () => { - alert('Statement deleted!'); - }); + if (this.state.loanOptions.length === 1) { + alert('Sorry, you need at least one loan option!'); + } else if (confirm('Are you sure to delete this loan option?') === true) { + const loanOptionsCopy = this.state.loanOptions.filter((loanOption, index) => { + console.log(loanOption); // eslint-disable-line + return index !== id; + }); + this.setState({ loanOptions: loanOptionsCopy }, () => { + console.log('Statement deleted!'); // eslint-disable-line + }); + } } addRow = () => { @@ -56,6 +62,7 @@ class LoanOptions extends Component { interestRate: '', duration: '', maxLoanAmount: '', + updated: false, }); }); } @@ -64,6 +71,18 @@ class LoanOptions extends Component { this.setState({ [event.target.name]: event.target.value }); } + handleUpdateLoanOptions = () => { + const formData = {}; + formData['noi-dscr'] = parseFloat(this.state.noi).toFixed(2); + formData['cash-dscr'] = parseFloat(this.state.cash).toFixed(2); + formData.instance = this.state.loanOptions; + this.props.updateLoanOptions( + this.props.buildingId, + formData, + ); + this.setState({ updated: true }); + } + render() { const header = [ 'Loan Options', @@ -81,20 +100,57 @@ class LoanOptions extends Component { }); let loans = []; - if (this.state.loanOptions !== null) { - loans = this.state.loanOptions.map((loanOptions, index) => { + let saveButton = null; + if (Object.keys(this.state.loanOptions).length !== 0) { + loans = this.state.loanOptions.map((loanOption, index) => { return ( ); }); + saveButton = ( + + ); + } else { + loans = ( + + + + ); + } + + let messageStyle = {}; + let messageContent = null; + + if (this.props.loading) { + messageContent = 'Updating ...'; + messageStyle = this.props.defaultMessageStyle; + } + + if (this.props.error && typeof this.props.error === 'object') { + messageContent = this.props.error.response.statusText; + messageStyle = this.props.errorMessageStyle; + } + + if (!this.props.error && !this.props.loading + && this.props.data !== null + && this.state.updated) { + messageContent = 'Saved!'; + messageStyle = this.props.successMessageStyle; } return ( @@ -104,50 +160,48 @@ class LoanOptions extends Component {
    -
    + Currently no loans. +
    - - - - ); - }); - let rows = []; - - if (Object.keys(this.state.cashBalance).length !== 0) { - rows = this.state.cashBalance.map((statement, index) => { - return ( - - ); - }); - } else { - rows = ( - - - - ); - } - - let messageStyle = {}; - let messageContent = null; - - if (this.props.loading) { - messageContent = 'Updating ...'; - messageStyle = this.props.defaultMessageStyle; - } - - if (this.props.error && typeof this.props.error === 'object') { - messageContent = this.props.error.response.statusText; - messageStyle = this.props.errorMessageStyle; - } - - if (!this.props.error && !this.props.loading - && this.props.data !== null - && this.state.updated) { - messageContent = 'Saved!'; - messageStyle = this.props.successMessageStyle; - } - - return ( -
    -

    - Cash Balance -

    -
    -
    -
    -
    -
    - - - Required NOI DSCR - - - -
    -
    - - - Required Cash DSCR - - - -
    + + + - - - {header} - - + + + + + {header} + {loans} @@ -156,15 +210,17 @@ class LoanOptions extends Component {
    +      - + {saveButton}
    @@ -190,6 +246,25 @@ LoanOptions.propTypes = { max_loan_amount: PropTypes.string, }), ), + successMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + errorMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + buildingId: PropTypes.number, + updateLoanOptions: PropTypes.func, + error: PropTypes.bool, + loading: PropTypes.bool, }; export default LoanOptions; diff --git a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js index 04c2ef75..205abd32 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js @@ -42,7 +42,6 @@ class LoanOptionsRow extends Component { type="text" step="any" name="lender" - required onChange={this.handleOnChange} value={this.state.lender} /> @@ -52,8 +51,7 @@ class LoanOptionsRow extends Component { { - const liabilitiesCopy = this.state.liabilities.filter((liability, index) => { - console.log(liability); // eslint-disable-line - return index !== id; - }); - console.log(liabilitiesCopy); // eslint-disable-line - this.setState({ liabilities: liabilitiesCopy }, () => { - alert('Liability deleted!'); - }); + if (confirm('Are you sure to delete this liability?') === true) { + const liabilitiesCopy = this.state.liabilities.filter((liability, index) => { + console.log(liability); // eslint-disable-line + return index !== id; + }); + this.setState({ liabilities: liabilitiesCopy }, () => { + console.log('Liability deleted!'); // eslint-disable-line + }); + } } addRow = () => { @@ -55,53 +56,14 @@ class MortgageLiabilities extends Component { inputDate: '', monthlyService: '', remainingTerm: '', + updated: false, }); }); } - saveData = () => { - if (this.state.downpayment === null || - this.state.expectedNetNoiDscr === null || - this.state.expectedPayback === null) { - this.setState({ - messageContent: 'Data input cannot empty!', - messageStyle: this.props.errorMessageStyle, - }); - } else { - fetch(`${this.props.baseURL}/liabilities/`, { - method: 'PUT', - credentials: 'same-origin', - body: JSON.stringify(this.state.liabilities), - headers: new Headers({ - 'Content-Type': 'application/json', - 'X-CSRFToken': this.state.csrftoken, - }), - }).then((res) => { - if (!res.err) { - this.setState({ - messageContent: 'Saved.', - messageStyle: this.props.successMessageStyle, - }); - } else { - const errors = []; - res.err.responseBody.then((error) => { - Object.keys(error).forEach((key) => { - errors.push(`${error[key][0]}`); - }); - }); - this.setState({ - errorMessage: errors, - }); - } - }); - } - } - - handleOnChange = (event) => { - console.log(event.target.name); // eslint-disable-line - console.log(event.target.value); // eslint-disable-line - this.setState({ [event.target.name]: event.target.value }); - // this.setState({ liability: event.target.value }); + handleUpdateLiabilities = () => { + this.props.updateLiabilities(this.state.liabilities); + this.setState({ updated: true }); } render() { @@ -119,9 +81,11 @@ class MortgageLiabilities extends Component { ); }); - let rows = []; - if (this.state.liabilities !== null) { + let rows = []; + let saveButton = null; + if (this.state.liabilities.length !== 0) { + console.log(this.state.liabilities); // eslint-disable-line rows = this.state.liabilities.map((liability, index) => { return ( ); }); + saveButton = ( + + ); + } else { + rows = ( + + + + ); + } + + let messageStyle = {}; + let messageContent = null; + + if (this.props.loading) { + messageContent = 'Updating ...'; + messageStyle = this.props.defaultMessageStyle; + } + + if (this.props.error && typeof this.props.error === 'object') { + messageContent = this.props.error.response.statusText; + messageStyle = this.props.errorMessageStyle; + } + + if (!this.props.error && !this.props.loading + && this.props.data !== null + && this.state.updated) { + messageContent = 'Saved!'; + messageStyle = this.props.successMessageStyle; } return ( @@ -146,12 +145,10 @@ class MortgageLiabilities extends Component {
    -
    +
    +
    + + + Required NOI DSCR + + + +
    +
    + + + Required Cash DSCR + + +
    -
    + Currently no liabilities. +
    - - - {header} - - +
    + + {header} + {rows} @@ -161,21 +158,16 @@ class MortgageLiabilities extends Component {
         - + {saveButton}
    @@ -199,7 +191,6 @@ MortgageLiabilities.propTypes = { remaining_term: PropTypes.string, }), ), - baseURL: PropTypes.string, successMessageStyle: PropTypes.shape({ color: PropTypes.string, paddingLeft: PropTypes.string, @@ -210,6 +201,14 @@ MortgageLiabilities.propTypes = { paddingLeft: PropTypes.string, fontWeight: PropTypes.string, }), + defaultMessageStyle: PropTypes.shape({ + color: PropTypes.string, + paddingLeft: PropTypes.string, + fontWeight: PropTypes.string, + }), + updateLiabilities: PropTypes.func, + error: PropTypes.bool, + loading: PropTypes.bool, }; export default MortgageLiabilities; diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js index bd15f5e6..f618a4b3 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js @@ -11,6 +11,7 @@ import { class MortgageLiabilitiesRow extends Component { constructor(props) { super(props); + this.handleOnChange = this.handleOnChange.bind(this); this.onDelEvent = this.onDelEvent.bind(this); this.state = { lender: props.lender, @@ -25,6 +26,12 @@ class MortgageLiabilitiesRow extends Component { this.props.onDelEvent(this.props.id); } + handleOnChange = (event) => { + console.log(event.target.name); // eslint-disable-line + console.log(event.target.value); // eslint-disable-line + this.setState({ [event.target.name]: event.target.value }); + } + render() { const style = { textAlign: 'left' }; return ( @@ -38,8 +45,9 @@ class MortgageLiabilitiesRow extends Component { step="any" className="form-control" name="lender" + required value={this.state.lender} - onChange={this.props.handleOnChange} + onChange={this.handleOnChange} /> - - - - - - - ); - } - -} -class EditableCell extends React.Component { - render() { - return ( - - ); - } -} - -ReactDOM.render( < Products / > , document.getElementById('container')); - diff --git a/src/containers/Blocnote/PreliminaryFinance/CostEstimation.js b/src/components/Blocnote/PreliminaryFinance/CostEstimation.js similarity index 100% rename from src/containers/Blocnote/PreliminaryFinance/CostEstimation.js rename to src/components/Blocnote/PreliminaryFinance/CostEstimation.js diff --git a/src/containers/Blocnote/PreliminaryFinance/CostEstimationRow.js b/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js similarity index 100% rename from src/containers/Blocnote/PreliminaryFinance/CostEstimationRow.js rename to src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js diff --git a/src/containers/Blocnote/PreliminaryFinance/InputScenario.js b/src/components/Blocnote/PreliminaryFinance/InputScenario.js similarity index 100% rename from src/containers/Blocnote/PreliminaryFinance/InputScenario.js rename to src/components/Blocnote/PreliminaryFinance/InputScenario.js diff --git a/src/components/Blocnote/PreliminaryFinance/LoanSummary.js b/src/components/Blocnote/PreliminaryFinance/LoanSummary.js index 51e7d168..eb91aec4 100644 --- a/src/components/Blocnote/PreliminaryFinance/LoanSummary.js +++ b/src/components/Blocnote/PreliminaryFinance/LoanSummary.js @@ -56,11 +56,9 @@ class LoanSummary extends Component { Loan Summary
    @@ -51,8 +59,9 @@ class MortgageLiabilitiesRow extends Component { type="number" step="any" name="monthlyService" + required value={this.state.monthlyService} - onChange={this.props.handleOnChange} + onChange={this.handleOnChange} style={{ width: '50%', textAlign: 'left' }} /> @@ -63,8 +72,9 @@ class MortgageLiabilitiesRow extends Component { type="number" step="any" name="remainingTerm" + required value={this.state.remainingTerm} - onChange={this.props.handleOnChange} + onChange={this.handleOnChange} style={{ width: '50%', textAlign: 'right' }} /> @@ -77,8 +87,9 @@ class MortgageLiabilitiesRow extends Component { type="date" className="form-control date" name="inputDate" + required value={this.state.inputDate} - onChange={this.props.handleOnChange} + onChange={this.handleOnChange} /> @@ -101,7 +112,6 @@ MortgageLiabilitiesRow.propTypes = { monthlyService: PropTypes.string, remainingTerm: PropTypes.string, onDelEvent: PropTypes.func, - handleOnChange: PropTypes.func, liability: PropTypes.shape({ lender: PropTypes.string, inputDate: PropTypes.string, diff --git a/src/components/Blocnote/FinancialInputs/test.js b/src/components/Blocnote/FinancialInputs/test.js deleted file mode 100644 index 36525078..00000000 --- a/src/components/Blocnote/FinancialInputs/test.js +++ /dev/null @@ -1,191 +0,0 @@ -class Products extends React.Component { - constructor(props) { - super(props); - this.state = {}; - this.state.filterText = ""; - this.state.products = [ - { - id: 1, - category: 'Sporting Goods', - price: '49.99', - qty: 12, - name: 'football' - }, { - id: 2, - category: 'Sporting Goods', - price: '9.99', - qty: 15, - name: 'baseball' - }, - ]; - } - handleUserInput(filterText) { - this.setState({filterText: filterText}); - }; - handleRowDel(product) { - var index = this.state.products.indexOf(product); - this.state.products.splice(index, 1); - this.setState(this.state.products); - }; - handleAddEvent(evt) { - var id = (+ new Date() + Math.floor(Math.random() * 999999)).toString(36); - var product = { - id: id, - name: "", - price: "", - category: "", - qty: 0 - } - this.state.products.push(product); - this.setState(this.state.products); - } - handleProductTable(evt) { - var item = { - id: evt.target.id, - name: evt.target.name, - value: evt.target.value - }; - var products = this.state.products.slice(); - var newProducts = products.map(function(product) { - for (var key in product) { - if (key == item.name && product.id == item.id) { - product[key] = item.value; - } - } - return product; - }); - this.setState({products:newProducts}); - // console.log(this.state.products); - }; - render() { - return ( -
    - - -
    - ); - } -} - -class SearchBar extends React.Component { - handleChange() { - this.props.onUserInput(this.refs.filterTextInput.value); - } - render() { - return ( -
    - -
    - ); - } -} - -class ProductTable extends React.Component { - render() { - var onProductTableUpdate = this.props.onProductTableUpdate; - var rowDel = this.props.onRowDel; - var filterText = this.props.filterText; - var product = this.props.products.map(function(product) { - if (product.name.indexOf(filterText) === -1) { - return; - } - return ( - - ); - }); - return ( -
    - - - - - - - - - - - - {product} - -
    Namepricequantitycategory
    -
    - ); - } -} - -class ProductRow extends React.Component { - onDelEvent() { - this.props.onDelEvent(this.props.product); - } - render() { - return ( -
    - -
    - -
    - - - {header} - - + + {header} + {rows} diff --git a/src/containers/Blocnote/PreliminaryFinance/SavingEstimation.js b/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js similarity index 100% rename from src/containers/Blocnote/PreliminaryFinance/SavingEstimation.js rename to src/components/Blocnote/PreliminaryFinance/SavingEstimation.js diff --git a/src/containers/Blocnote/PreliminaryFinance/SavingEstimationRow.js b/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js similarity index 100% rename from src/containers/Blocnote/PreliminaryFinance/SavingEstimationRow.js rename to src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js diff --git a/src/containers/Blocnote/PreliminaryFinance/SelectScenario.js b/src/components/Blocnote/PreliminaryFinance/SelectScenario.js similarity index 100% rename from src/containers/Blocnote/PreliminaryFinance/SelectScenario.js rename to src/components/Blocnote/PreliminaryFinance/SelectScenario.js diff --git a/src/containers/Blocnote/FinancialInputs/BillsSummary.js b/src/containers/Blocnote/FinancialInputs/BillsSummary.js deleted file mode 100644 index 05b6b1ba..00000000 --- a/src/containers/Blocnote/FinancialInputs/BillsSummary.js +++ /dev/null @@ -1,115 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - Row, -} from 'reactstrap'; -import BillsSummaryTable from './BillsSummaryTable'; - - -class BillsSummary extends Component { - constructor(props) { - super(props); - this.state = { - billsSummary: props.data, - }; - } - - render() { - const BillsSummaryTables = []; - - if (this.state.billsSummary !== null) { - console.log(this.state.billsSummary); // eslint-disable-line - Object.keys(this.state.billsSummary).forEach(billName => { - BillsSummaryTables.push( -
    - -
    - ); - }); - } - - return ( -
    -

    - Bills Summary -

    - - {BillsSummaryTables} - -
    - ); - } -} - -BillsSummary.propTypes = { - data: PropTypes.shape({ - electric: PropTypes.arrayOf( - PropTypes.shape({ - year: PropTypes.string, - charge: PropTypes.string, - id: PropTypes.number, - }) - ), - gas: PropTypes.arrayOf( - PropTypes.shape({ - year: PropTypes.string, - charge: PropTypes.string, - id: PropTypes.number, - }) - ), - oil: PropTypes.arrayOf( - PropTypes.shape({ - year: PropTypes.string, - charge: PropTypes.string, - id: PropTypes.number, - }) - ), - water: PropTypes.arrayOf( - PropTypes.shape({ - year: PropTypes.string, - charge: PropTypes.string, - id: PropTypes.number, - }) - ), - }), - successMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - errorMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - defaultMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - headerStyle: PropTypes.shape({ - textAlign: PropTypes.string, - paddingLeft: PropTypes.string, - marginBottom: PropTypes.string, - }), - buildingId: PropTypes.number, - createBillsSummary: PropTypes.func, - updateBillsSummary: PropTypes.func, - deleteBillsSummary: PropTypes.func, -}; - -BillsSummary.defaultProps = { - data: null, -}; - -export default BillsSummary; diff --git a/src/containers/Blocnote/FinancialInputs/BillsSummaryRow.js b/src/containers/Blocnote/FinancialInputs/BillsSummaryRow.js deleted file mode 100644 index b7479d8d..00000000 --- a/src/containers/Blocnote/FinancialInputs/BillsSummaryRow.js +++ /dev/null @@ -1,98 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - Button, - InputGroup, - InputGroupAddon, - Input, -} from 'reactstrap'; - - -class BillsSummaryRow extends Component { - constructor(props) { - super(props); - this.handleOnChange = this.handleOnChange.bind(this); - this.handleUpdateBillsSummary = this.handleUpdateBillsSummary.bind(this); - this.handleDeleteBillsSummary = this.handleDeleteBillsSummary.bind(this); - this.state = { - id: props.id, - year: props.year, - charge: props.charge, - }; - } - - handleUpdateBillsSummary() { - console.log(this.state); // eslint-disable-line - this.props.updateBillsSummary(this.state); - } - - handleDeleteBillsSummary() { - this.props.deleteBillsSummary(this.props.id); - } - - handleOnChange = (event) => { - this.setState({ [event.target.name]: event.target.value }); - } - - render() { - return ( - - - - - - ); - } -} - -BillsSummaryRow.propTypes = { - id: PropTypes.number, - year: PropTypes.number, - charge: PropTypes.number, - updateBillsSummary: PropTypes.func, - deleteBillsSummary: PropTypes.func, -}; - -export default BillsSummaryRow; diff --git a/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js b/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js deleted file mode 100644 index a165391d..00000000 --- a/src/containers/Blocnote/FinancialInputs/BillsSummaryTable.js +++ /dev/null @@ -1,233 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - Table, - Button, -} from 'reactstrap'; -import BillsSummaryRow from './BillsSummaryRow'; -import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; - - -class BillsSummaryTable extends Component { - constructor(props) { - super(props); - this.handleCreateBillsSummary = this.handleCreateBillsSummary.bind(this); - this.state = { - billName: props.billName, - billData: props.billData, - year: '', - charge: '', - action: null, - }; - } - - handleCreateBillsSummary = () => { - this.props.createBillsSummary( - this.props.buildingId, - { - utility_type: this.props.billName, - year: this.state.year, - charge: this.state.charge, - }, () => { - console.log('saga done!'); // eslint-disable-line - } - ); - const newBill = { - id: 100, - utility_type: this.props.billName, - year: this.state.year, - charge: this.state.charge, - }; - this.setState({ billData: [...this.state.billData, newBill] }, () => { - console.log(this.state.billData, 'bill added!'); // eslint-disable-line - this.setState({ - year: '', - charge: '', - action: 'created', - }); - }); - } - - updateBillsSummary = (billData) => { - this.props.updateBillsSummary( - this.props.buildingId, - billData, - ); - this.setState({ action: 'updated' }); - } - - deleteBillsSummary = id => { - if (confirm('Are you sure to delete this bill?') === true) { - this.props.deleteBillsSummary( - this.props.buildingId, - { id }, - ); - const billDataCopy = this.state.billData.filter(bill => bill.id !== id); - this.setState({ - billData: billDataCopy, - action: 'deleted', - }); - } - } - - handleOnChange = (event) => { - this.setState({ [event.target.name]: event.target.value }); - } - - addRow = () => { - const newBillData = { - id: this.state.id, - year: this.state.year, - charge: this.state.charge, - }; - const billDataCopy = this.state.billData; - billDataCopy.push(newBillData); - this.setState({ billData: billDataCopy }, () => { - console.log(this.state.billData, 'New bill added!'); // eslint-disable-line - this.setState({ - id: this.state.id + 1, - year: '', - charge: '', - }); - }); - } - - render() { - let rows = []; - - if (this.state.billData.length !== 0) { - rows = this.state.billData.map((bill) => { - // charge = charge.toLocaleString(); - return ( - - ); - }); - } else { - rows = ( - - - - ); - } - - let messageStyle = {}; - let messageContent = null; - - if (this.props.loading) { - messageContent = 'Processing ...'; - messageStyle = this.props.defaultMessageStyle; - } - - if (this.props.error && typeof this.props.error === 'object') { - messageContent = this.props.error.response.statusText; - messageStyle = this.props.errorMessageStyle; - } - - if (!this.props.error && !this.props.loading - && this.props.billData !== null - && this.state.action !== null) { - messageContent = this.state.action.charAt(0).toUpperCase() + this.state.action.slice(1); - messageStyle = this.props.successMessageStyle; - } - - const billName = this.props.billName.charAt(0).toUpperCase() + this.props.billName.slice(1); - return ( -
    -
    -
    - {billName} Annual Charge -
    -
    - {' '}{' '} - -
    -
    -
    - - - Year - - - - - - - $ - - - - - {' '} - -
    - Currently no bill. -
    - - {rows} - -
    -
    - ); - } -} - -BillsSummaryTable.propTypes = { - buildingId: PropTypes.number, - billName: PropTypes.string, - billData: PropTypes.arrayOf( - PropTypes.shape({ - year: PropTypes.string, - charge: PropTypes.string, - id: PropTypes.number, - }) - ), - successMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - errorMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - defaultMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - createBillsSummary: PropTypes.func, - updateBillsSummary: PropTypes.func, - deleteBillsSummary: PropTypes.func, - error: PropTypes.bool, - loading: PropTypes.bool, -}; - -BillsSummaryTable.defaultProps = { - billData: [], -}; - -export default BillsSummaryTable; diff --git a/src/containers/Blocnote/FinancialInputs/CashBalance.js b/src/containers/Blocnote/FinancialInputs/CashBalance.js deleted file mode 100644 index 979c29af..00000000 --- a/src/containers/Blocnote/FinancialInputs/CashBalance.js +++ /dev/null @@ -1,201 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - Button, - Table, -} from 'reactstrap'; -import CashBalanceRow from './CashBalanceRow'; -import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; - - -class CashBalance extends Component { - constructor(props) { - super(props); - this.deleteRow = this.deleteRow.bind(this); - this.addRow = this.addRow.bind(this); - this.state = { - cashBalance: this.props.data, - id: this.props.data.length, - balanceAmount: '', - statementDate: '', - isFromBalanceSheet: false, - updated: false, - }; - } - - deleteRow = id => { - if (this.state.cashBalance.length === 1) { - alert('Sorry, you need at least one statement!'); - } else if (confirm('Are you sure to delete this statement?') === true) { - const cashBalanceCopy = this.state.cashBalance.filter((statement, index) => { - console.log(statement); // eslint-disable-line - return index !== id; - }); - this.setState({ cashBalance: cashBalanceCopy }, () => { - console.log('Statement deleted!'); // eslint-disable-line - }); - } - } - - addRow = () => { - const newStatement = { - id: this.state.id, - balanceAmount: this.state.balanceAmount, - statementDate: this.state.statementDate, - isFromBalanceSheet: this.state.isFromBalanceSheet, - }; - const cashBalanceCopy = this.state.cashBalance; - cashBalanceCopy.push(newStatement); - this.setState({ cashBalance: cashBalanceCopy }, () => { - console.log(this.state.cashBalance, 'New statement added!'); // eslint-disable-line - this.setState({ - id: this.state.id + 1, - balanceAmount: '', - statementDate: '', - isFromBalanceSheet: false, - updated: false, - }); - }); - } - - handleUpdateCashBalance = () => { - this.props.updateCashBalance(this.state.cashBalance); - this.setState({ updated: true }); - } - - render() { - const header = [ - '#Statement', - 'Balance Amount', - 'Statement Date', - 'Balance Sheet', - 'Option'].map((title, key) => { - return ( -
    - {title} -
    - Currently no statements. -
    - - {header} - - - {rows} - -
    -
    -
    -
    -
    -    -   - -
    -
    - - ); - } -} - -CashBalance.propTypes = { - blockStyle: PropTypes.shape({ - marginBottom: PropTypes.string, - }), - headerStyle: PropTypes.shape({ - textAlign: PropTypes.string, - marginBottom: PropTypes.string, - }), - data: PropTypes.arrayOf( - PropTypes.shape({ - balance_amount: PropTypes.string, - is_from_balance_sheet: PropTypes.boolean, - statement_date: PropTypes.string, - }), - ), - successMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - errorMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - defaultMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - updateCashBalance: PropTypes.func, - error: PropTypes.bool, - loading: PropTypes.bool, -}; - -export default CashBalance; diff --git a/src/containers/Blocnote/FinancialInputs/CashBalanceRow.js b/src/containers/Blocnote/FinancialInputs/CashBalanceRow.js deleted file mode 100644 index 1e78d5de..00000000 --- a/src/containers/Blocnote/FinancialInputs/CashBalanceRow.js +++ /dev/null @@ -1,94 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - InputGroup, - InputGroupAddon, - Input, - Button, -} from 'reactstrap'; - - -class CashBalanceRow extends Component { - constructor(props) { - super(props); - this.handleOnChange = this.handleOnChange.bind(this); - this.onDelEvent = this.onDelEvent.bind(this); - this.state = { - id: props.id, - balanceAmount: props.balanceAmount, - statementDate: props.statementDate, - isFromBalanceSheet: props.isFromBalanceSheet, - }; - } - - onDelEvent() { - this.props.onDelEvent(this.props.id); - } - - handleOnChange = (event) => { - this.setState({ [event.target.name]: event.target.value }); - } - - render() { - return ( -
    - {this.props.id + 1} - - - - $ - - - - - - - - - -
    - {title} -
    - Affordable Downpayment (?) - - - - $ - - - -
    - Expected Payback (?) - - - - - Months - - -
    - Expected Saving DSCR (?) - - - - - X - - -
    - - {header} - - - {rows} - -
    -
    -
    -
    -
    -    - -
    -
    -
    - ); - } -} - -CustomerPreference.propTypes = { - blockStyle: PropTypes.shape({ - marginBottom: PropTypes.string, - }), - headerStyle: PropTypes.shape({ - textAlign: PropTypes.string, - marginBottom: PropTypes.string, - }), - data: PropTypes.shape({ - downpayment: PropTypes.string, - expected_net_noi_dscr: PropTypes.string, - expected_payback: PropTypes.string, - }), - successMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - errorMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - defaultMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - buildingId: PropTypes.number, - updateCustomerPreference: PropTypes.func, - error: PropTypes.bool, - loading: PropTypes.bool, -}; - -export default CustomerPreference; diff --git a/src/containers/Blocnote/FinancialInputs/LoanOptions.js b/src/containers/Blocnote/FinancialInputs/LoanOptions.js deleted file mode 100644 index 2edd4166..00000000 --- a/src/containers/Blocnote/FinancialInputs/LoanOptions.js +++ /dev/null @@ -1,266 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - Button, - Input, - Table, - InputGroup, - InputGroupAddon, -} from 'reactstrap'; -import LoanOptionsRow from './LoanOptionsRow'; -import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; - - -class LoanOptions extends Component { - constructor(props) { - super(props); - this.deleteRow = this.deleteRow.bind(this); - this.addRow = this.addRow.bind(this); - this.state = { - loanOptions: this.props.data, - noi: this.props.noi, - cash: this.props.cash, - id: 99, - lender: '', - interestRate: '', - duration: '', - maxLoanAmount: '', - updated: false, - }; - } - - deleteRow = id => { - if (this.state.loanOptions.length === 1) { - alert('Sorry, you need at least one loan option!'); - } else if (confirm('Are you sure to delete this loan option?') === true) { - const loanOptionsCopy = this.state.loanOptions.filter((loanOption, index) => { - console.log(loanOption); // eslint-disable-line - return index !== id; - }); - this.setState({ loanOptions: loanOptionsCopy }, () => { - console.log('Statement deleted!'); // eslint-disable-line - }); - } - } - - addRow = () => { - const newLoanOption = { - id: this.state.id, - lender: this.state.lender, - interestRate: this.state.interestRate, - duration: this.state.duration, - maxLoanAmount: this.state.maxLoanAmount, - }; - console.log(this.state.loanOptions); // eslint-disable-line - const loanOptionsCopy = this.state.loanOptions; - loanOptionsCopy.push(newLoanOption); - this.setState({ loanOptions: loanOptionsCopy }, () => { - console.log(this.state.loanOptions, 'New loan option added!'); // eslint-disable-line - this.setState({ - id: this.state.id + 1, - lender: '', - interestRate: '', - duration: '', - maxLoanAmount: '', - updated: false, - }); - }); - } - - handleOnChange = (event) => { - this.setState({ [event.target.name]: event.target.value }); - } - - handleUpdateLoanOptions = () => { - const formData = {}; - formData['noi-dscr'] = parseFloat(this.state.noi).toFixed(2); - formData['cash-dscr'] = parseFloat(this.state.cash).toFixed(2); - formData.instance = this.state.loanOptions; - this.props.updateLoanOptions( - this.props.buildingId, - formData, - ); - this.setState({ updated: true }); - } - - render() { - const header = [ - 'Loan Options', - 'Lender', - 'Interet Rate', - 'Duration', - 'Maximum Loan Amount', - 'Option', - ].map((title, key) => { - return ( - - {title} - - ); - }); - - let loans = []; - if (Object.keys(this.state.loanOptions).length !== 0) { - loans = this.state.loanOptions.map((loanOption, index) => { - return ( - - ); - }); - } else { - loans = ( - - - Currently no loans. - - - ); - } - - let messageStyle = {}; - let messageContent = null; - - if (this.props.loading) { - messageContent = 'Updating ...'; - messageStyle = this.props.defaultMessageStyle; - } - - if (this.props.error && typeof this.props.error === 'object') { - messageContent = this.props.error.response.statusText; - messageStyle = this.props.errorMessageStyle; - } - - if (!this.props.error && !this.props.loading - && this.props.data !== null - && this.state.updated) { - messageContent = 'Saved!'; - messageStyle = this.props.successMessageStyle; - } - - return ( -
    -

    - Loan Options -

    -
    -
    - - - - - - {header} - - - {loans} - -
    -
    -
    - - - Required NOI DSCR - - - -
    -
    - - - Required Cash DSCR - - - -
    -
    -
    -
    -
    -
    -
    -    -   - -
    -
    -
    - ); - } -} - -LoanOptions.propTypes = { - blockStyle: PropTypes.shape({ - marginBottom: PropTypes.string, - }), - headerStyle: PropTypes.shape({ - textAlign: PropTypes.string, - marginBottom: PropTypes.string, - }), - cash: PropTypes.number, - noi: PropTypes.number, - data: PropTypes.arrayOf( - PropTypes.shape({ - duration: PropTypes.string, - interest_rate: PropTypes.string, - lender: PropTypes.string, - max_loan_amount: PropTypes.string, - }), - ), - successMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - errorMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - defaultMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - buildingId: PropTypes.number, - updateLoanOptions: PropTypes.func, - error: PropTypes.bool, - loading: PropTypes.bool, -}; - -export default LoanOptions; diff --git a/src/containers/Blocnote/FinancialInputs/LoanOptionsRow.js b/src/containers/Blocnote/FinancialInputs/LoanOptionsRow.js deleted file mode 100644 index 205abd32..00000000 --- a/src/containers/Blocnote/FinancialInputs/LoanOptionsRow.js +++ /dev/null @@ -1,116 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - Button, - InputGroup, - InputGroupAddon, - Input, -} from 'reactstrap'; - - -class LoanOptionsRow extends Component { - constructor(props) { - super(props); - this.handleOnChange = this.handleOnChange.bind(this); - this.onDelEvent = this.onDelEvent.bind(this); - this.state = { - id: props.id, - lender: props.lender, - interestRate: props.interestRate, - duration: props.duration, - maxLoanAmount: props.maxLoanAmount, - }; - } - - onDelEvent() { - this.props.onDelEvent(this.props.id); - } - - handleOnChange = (event) => { - this.setState({ [event.target.name]: event.target.value }); - } - - render() { - const style = { textAlign: 'left' }; - return ( - - - Loan {this.state.id + 1} - - - - - - - - - % - - - - - - - - Months - - - - - - - $ - - - - - - - - - ); - } -} - -LoanOptionsRow.propTypes = { - id: PropTypes.number, - lender: PropTypes.string, - interestRate: PropTypes.number, - duration: PropTypes.string, - maxLoanAmount: PropTypes.number, - onDelEvent: PropTypes.func, -}; - -export default LoanOptionsRow; diff --git a/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js deleted file mode 100644 index e15cd004..00000000 --- a/src/containers/Blocnote/FinancialInputs/MortgageLiabilities.js +++ /dev/null @@ -1,210 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - Button, - Table, -} from 'reactstrap'; -import MortgageLiabilitiesRow from './MortgageLiabilitiesRow'; -import ResultMessage from './../../../components/Blocnote/FinancialInputs/ResultMessage'; - - -class MortgageLiabilities extends Component { - constructor(props) { - super(props); - this.deleteRow = this.deleteRow.bind(this); - this.addRow = this.addRow.bind(this); - this.state = { - liabilities: this.props.data, - id: this.props.data.length, - lender: '', - inputDate: '', - monthlyService: '', - remainingTerm: '', - messageStyle: {}, - messageContent: null, - updated: false, - }; - } - - deleteRow = id => { - if (confirm('Are you sure to delete this liability?') === true) { - const liabilitiesCopy = this.state.liabilities.filter((liability, index) => { - console.log(liability); // eslint-disable-line - return index !== id; - }); - this.setState({ liabilities: liabilitiesCopy }, () => { - console.log('Liability deleted!'); // eslint-disable-line - }); - } - } - - addRow = () => { - const newLiability = { - id: this.state.id, - lender: this.state.lender, - inputDate: this.state.inputDate, - monthlyService: this.state.monthlyService, - remainingTerm: this.state.remainingTerm, - }; - const liabilitiesCopy = this.state.liabilities; - liabilitiesCopy.push(newLiability); - this.setState({ liabilities: liabilitiesCopy }, () => { - console.log(this.state.liabilities, 'New statement added!'); // eslint-disable-line - this.setState({ - id: this.state.id + 1, - lender: '', - inputDate: '', - monthlyService: '', - remainingTerm: '', - updated: false, - }); - }); - } - - handleUpdateLiabilities = () => { - this.props.updateLiabilities(this.state.liabilities); - this.setState({ updated: true }); - } - - render() { - const header = [ - '#Debt', - 'Lender Name', - 'Monthly Service', - 'Remaining Terms', - 'Input Date', - 'Option', - ].map((title, key) => { - return ( - - {title} - - ); - }); - let rows = []; - - if (this.state.liabilities.length !== 0) { - console.log(this.state.liabilities); // eslint-disable-line - rows = this.state.liabilities.map((liability, index) => { - return ( - - ); - }); - } else { - rows = ( - - - Currently no liabilities. - - - ); - } - - let messageStyle = {}; - let messageContent = null; - - if (this.props.loading) { - messageContent = 'Updating ...'; - messageStyle = this.props.defaultMessageStyle; - } - - if (this.props.error && typeof this.props.error === 'object') { - messageContent = this.props.error.response.statusText; - messageStyle = this.props.errorMessageStyle; - } - - if (!this.props.error && !this.props.loading - && this.props.data !== null - && this.state.updated) { - messageContent = 'Saved!'; - messageStyle = this.props.successMessageStyle; - } - - return ( -
    -

    - Mortgage and Liabilities -

    -
    -
    - - - {header} - - - {rows} - -
    -
    -
    -
    -
    -    -   - -
    -
    -
    - ); - } -} - -MortgageLiabilities.propTypes = { - blockStyle: PropTypes.shape({ - marginBottom: PropTypes.string, - }), - headerStyle: PropTypes.shape({ - textAlign: PropTypes.string, - marginBottom: PropTypes.string, - }), - data: PropTypes.arrayOf( - PropTypes.shape({ - lender: PropTypes.string, - monthly_service: PropTypes.boolean, - input_date: PropTypes.string, - remaining_term: PropTypes.string, - }), - ), - successMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - errorMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - defaultMessageStyle: PropTypes.shape({ - color: PropTypes.string, - paddingLeft: PropTypes.string, - fontWeight: PropTypes.string, - }), - updateLiabilities: PropTypes.func, - error: PropTypes.bool, - loading: PropTypes.bool, -}; - -export default MortgageLiabilities; diff --git a/src/containers/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js b/src/containers/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js deleted file mode 100644 index f618a4b3..00000000 --- a/src/containers/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js +++ /dev/null @@ -1,123 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - Button, - InputGroup, - InputGroupAddon, - Input, -} from 'reactstrap'; - - -class MortgageLiabilitiesRow extends Component { - constructor(props) { - super(props); - this.handleOnChange = this.handleOnChange.bind(this); - this.onDelEvent = this.onDelEvent.bind(this); - this.state = { - lender: props.lender, - inputDate: props.inputDate, - monthlyService: props.monthlyService, - remainingTerm: props.remainingTerm, - liability: props.liability, - }; - } - - onDelEvent() { - this.props.onDelEvent(this.props.id); - } - - handleOnChange = (event) => { - console.log(event.target.name); // eslint-disable-line - console.log(event.target.value); // eslint-disable-line - this.setState({ [event.target.name]: event.target.value }); - } - - render() { - const style = { textAlign: 'left' }; - return ( - - - {this.props.id + 1} - - - - - - - - $ - - - - - - - - - Months - - - - - - - - - - - ); - } -} - -MortgageLiabilitiesRow.propTypes = { - id: PropTypes.number, - lender: PropTypes.string, - inputDate: PropTypes.string, - monthlyService: PropTypes.string, - remainingTerm: PropTypes.string, - onDelEvent: PropTypes.func, - liability: PropTypes.shape({ - lender: PropTypes.string, - inputDate: PropTypes.string, - monthlyService: PropTypes.string, - remainingTerm: PropTypes.number, - }), -}; - -export default MortgageLiabilitiesRow; diff --git a/src/containers/Blocnote/FinancialInputs/index.js b/src/containers/Blocnote/FinancialInputs/index.js index e27fdff1..d8c4d4c6 100644 --- a/src/containers/Blocnote/FinancialInputs/index.js +++ b/src/containers/Blocnote/FinancialInputs/index.js @@ -17,13 +17,13 @@ import { import blocnoteProps from './../propTypes'; import FinanceOverview from './../../../components/Blocnote/FinancialInputs/FinanceOverview'; import Bills from '../../../components/Blocnote/FinancialInputs/Bills'; -import BillsSummary from './BillsSummary'; -import BillsOverview from './BillsOverview'; -import IncomeStatements from './IncomeStatements'; -import CashBalance from './CashBalance'; -import MortgageLiabilities from './MortgageLiabilities'; -import LoanOptions from './LoanOptions'; -import CustomerPreference from './CustomerPreference'; +import BillsSummary from '../../../components/Blocnote/FinancialInputs/BillsSummary'; +import BillsOverview from '../../../components/Blocnote/FinancialInputs/BillsOverview'; +import IncomeStatements from '../../../components/Blocnote/FinancialInputs/IncomeStatements'; +import CashBalance from '../../../components/Blocnote/FinancialInputs/CashBalance'; +import MortgageLiabilities from '../../../components/Blocnote/FinancialInputs/MortgageLiabilities'; +import LoanOptions from '../../../components/Blocnote/FinancialInputs/LoanOptions'; +import CustomerPreference from '../../../components/Blocnote/FinancialInputs/CustomerPreference'; import { blocnoteURL } from '../../../utils/restServices'; diff --git a/src/containers/Blocnote/PreliminaryFinance/index.js b/src/containers/Blocnote/PreliminaryFinance/index.js index 4312ba0c..720090a8 100644 --- a/src/containers/Blocnote/PreliminaryFinance/index.js +++ b/src/containers/Blocnote/PreliminaryFinance/index.js @@ -18,8 +18,8 @@ import PostRetrofitIncomeStatement from './../../../components/Blocnote/Prelimin import PriorRetrofitBalanceSheet from './../../../components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet'; import PostRetrofitBalanceSheet from './../../../components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet'; import DownPayment from './../../../components/Blocnote/PreliminaryFinance/DownPayment'; -import SelectScenario from './SelectScenario'; -import InputScenario from './InputScenario'; +import SelectScenario from './../../../components/Blocnote/PreliminaryFinance/SelectScenario'; +import InputScenario from './../../../components/Blocnote/PreliminaryFinance/InputScenario'; import { blocnoteURL } from '../../../utils/restServices'; -- GitLab From 330c14e8a666a64f88735ec0401d43c06e5ed94a Mon Sep 17 00:00:00 2001 From: akkking Date: Wed, 24 Apr 2019 16:24:42 -0400 Subject: [PATCH 73/79] Update cash balance, liabilities components --- .../Blocnote/FinancialInputs/CashBalance.js | 82 +++++++------ .../FinancialInputs/CashBalanceRow.js | 19 ++- .../FinancialInputs/IncomeStatements.js | 4 + .../FinancialInputs/MortgageLiabilities.js | 112 +++++++++++++----- .../FinancialInputs/MortgageLiabilitiesRow.js | 35 +++--- 5 files changed, 159 insertions(+), 93 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/CashBalance.js b/src/components/Blocnote/FinancialInputs/CashBalance.js index 9898dee9..2434ee26 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalance.js +++ b/src/components/Blocnote/FinancialInputs/CashBalance.js @@ -16,13 +16,35 @@ class CashBalance extends Component { this.state = { cashBalance: this.props.data, id: this.props.data.length, - balanceAmount: null, - statementDate: null, - isFromBalanceSheet: false, + balance_amount: null, + statement_date: null, + is_from_balance_sheet: false, action: null, }; } + validateInputs = () => { + const emptyFields = []; + if (this.state.cashBalance.length > 0) { + Object.values(this.state.cashBalance).forEach(statement => { + if (statement.balance_amount === null && + !emptyFields.includes('Balance Amount')) { + emptyFields.push('Balance Amount'); + } + if (statement.statement_date === null && + !emptyFields.includes('Statement Date')) { + emptyFields.push('Statement Date'); + } + }); + } + + if (emptyFields.length > 0) { + alert(`Please fill in ${emptyFields.join(', ')} fields`); + return false; + } + return true; + } + deleteRow = id => { if (this.state.cashBalance.length === 1) { alert('Sorry, you need at least one statement!'); @@ -38,28 +60,12 @@ class CashBalance extends Component { } addRow = () => { - const emptyFields = []; - if (this.state.cashBalance.length > 0) { - Object.values(this.state.cashBalance).forEach(statement => { - if (statement.balanceAmount === null && - !emptyFields.includes('Balance Amount')) { - emptyFields.push('Balance Amount'); - } - if (statement.statementDate === null && - !emptyFields.includes('Statement Date')) { - emptyFields.push('Statement Date'); - } - }); - } - - if (emptyFields.length > 0) { - alert(`Please fill in ${emptyFields.join(', ')} fields`); - } else { + if (this.validateInputs() === true) { const newStatement = { id: this.state.id, - balanceAmount: this.state.balanceAmount, - statementDate: this.state.statementDate, - isFromBalanceSheet: this.state.isFromBalanceSheet, + balance_amount: this.state.balance_amount, + statement_date: this.state.statement_date, + is_from_balance_dheet: this.state.is_from_balance_dheet, }; const cashBalanceCopy = this.state.cashBalance; cashBalanceCopy.push(newStatement); @@ -67,9 +73,9 @@ class CashBalance extends Component { console.log(this.state.cashBalance, 'New statement added!'); // eslint-disable-line this.setState({ id: this.state.id + 1, - balanceAmount: null, - statementDate: null, - isFromBalanceSheet: false, + balance_amount: null, + statement_date: null, + is_fromBalance_sheet: false, }); }); } @@ -79,9 +85,9 @@ class CashBalance extends Component { const cashBalance = this.state.cashBalance.map((statement, id) => { if (id === row.id) { const tmp = { id }; - tmp.balance_amount = row.balanceAmount; - tmp.statement_date = row.statementDate; - tmp.is_from_balance_sheet = row.isFromBalanceSheet; + tmp.balance_amount = row.balance_amount; + tmp.statement_date = row.statement_date; + tmp.is_from_balance_sheet = row.is_from_balance_sheet; return tmp; } return statement; @@ -92,14 +98,16 @@ class CashBalance extends Component { } handleUpdateCashBalance = () => { - this.props.updateCashBalance( - this.props.buildingId, - this.state.cashBalance, - ); - this.setState({ - loading: false, - action: 'updated', - }); + if (this.validateInputs() === true) { + this.props.updateCashBalance( + this.props.buildingId, + this.state.cashBalance, + ); + this.setState({ + loading: false, + action: 'updated', + }); + } } render() { diff --git a/src/components/Blocnote/FinancialInputs/CashBalanceRow.js b/src/components/Blocnote/FinancialInputs/CashBalanceRow.js index 2f0974ec..4a6083d5 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalanceRow.js +++ b/src/components/Blocnote/FinancialInputs/CashBalanceRow.js @@ -15,9 +15,9 @@ class CashBalanceRow extends Component { this.onDelEvent = this.onDelEvent.bind(this); this.state = { id: props.id, - balanceAmount: props.balanceAmount, - statementDate: props.statementDate, - isFromBalanceSheet: props.isFromBalanceSheet, + balance_amount: props.balanceAmount, + statement_date: props.statementDate, + is_from_balance_sheet: props.isFromBalanceSheet, }; } @@ -29,7 +29,6 @@ class CashBalanceRow extends Component { this.setState({ [event.target.name]: event.target.name === 'isFromBalanceSheet' ? event.target.checked : event.target.value }, () => { - console.log(this.state); // eslint-disable-line this.props.onChangeEvent(this.state); }); } @@ -48,9 +47,9 @@ class CashBalanceRow extends Component { @@ -60,18 +59,18 @@ class CashBalanceRow extends Component { diff --git a/src/components/Blocnote/FinancialInputs/IncomeStatements.js b/src/components/Blocnote/FinancialInputs/IncomeStatements.js index 1043fecc..04a58767 100644 --- a/src/components/Blocnote/FinancialInputs/IncomeStatements.js +++ b/src/components/Blocnote/FinancialInputs/IncomeStatements.js @@ -263,6 +263,10 @@ class IncomeStatements extends Component { return newStatement; }); + if (this.state.GRDropdownValue === 'Select Growth Rate') { + emptyMessages.push('Growth Rate'); + } + if (emptyMessages.length !== 0) { const msg = `Please fill in ${emptyMessages.join(', ')} fields.`; alert(msg); diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js index aa6796b2..58d2c9b9 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilities.js @@ -16,16 +16,44 @@ class MortgageLiabilities extends Component { this.state = { liabilities: this.props.data, id: this.props.data.length, - lender: '', - inputDate: '', - monthlyService: '', - remainingTerm: '', - messageStyle: {}, - messageContent: null, - updated: false, + lender: null, + input_date: null, + monthly_service: null, + remaining_term: null, }; } + validateInputs = () => { + const emptyFields = []; + if (this.state.liabilities.length > 0) { + Object.values(this.state.liabilities).forEach(liability => { + console.log(liability); // eslint-disable-line + if (liability.lender === null && + !emptyFields.includes('Lender')) { + emptyFields.push('Lender'); + } + if (liability.monthly_service === null && + !emptyFields.includes('Monthly Service')) { + emptyFields.push('Monthly Service'); + } + if (liability.remaining_term === null && + !emptyFields.includes('Remaining Term')) { + emptyFields.push('Remaining Term'); + } + if (liability.input_date === null && + !emptyFields.includes('Input Date')) { + emptyFields.push('Input Date'); + } + }); + } + + if (emptyFields.length > 0) { + alert(`Please fill in ${emptyFields.join(', ')} fields`); + return false; + } + return true; + } + deleteRow = id => { if (confirm('Are you sure to delete this liability?') === true) { const liabilitiesCopy = this.state.liabilities.filter((liability, index) => { @@ -39,31 +67,59 @@ class MortgageLiabilities extends Component { } addRow = () => { - const newLiability = { - id: this.state.id, - lender: this.state.lender, - inputDate: this.state.inputDate, - monthlyService: this.state.monthlyService, - remainingTerm: this.state.remainingTerm, - }; - const liabilitiesCopy = this.state.liabilities; - liabilitiesCopy.push(newLiability); - this.setState({ liabilities: liabilitiesCopy }, () => { - console.log(this.state.liabilities, 'New statement added!'); // eslint-disable-line - this.setState({ - id: this.state.id + 1, - lender: '', - inputDate: '', - monthlyService: '', - remainingTerm: '', - updated: false, + if (this.validateInputs() === true) { + const newLiability = { + id: this.state.id, + lender: this.state.lender, + input_date: this.state.input_date, + monthly_service: this.state.monthly_service, + remaining_term: this.state.remaining_term, + }; + const liabilitiesCopy = this.state.liabilities; + liabilitiesCopy.push(newLiability); + this.setState({ liabilities: liabilitiesCopy }, () => { + console.log(this.state.liabilities, 'New liability added!'); // eslint-disable-line + this.setState({ + id: this.state.id + 1, + lender: null, + input_date: null, + monthly_service: null, + remaining_term: null, + }); }); + } + } + + updateRow = (row) => { + const liabilities = this.state.liabilities.map((liability, id) => { + console.log(id); // eslint-disable-line + console.log(row.id); // eslint-disable-line + if (id === row.id) { + const tmp = { id }; + tmp.lender = row.lender; + tmp.input_date = row.input_date; + tmp.monthly_service = row.monthly_service; + tmp.remaining_term = row.remaining_term; + return tmp; + } + return liability; + }); + this.setState({ liabilities }, () => { + console.log(liabilities); // eslint-disable-line }); } handleUpdateLiabilities = () => { - this.props.updateLiabilities(this.state.liabilities); - this.setState({ updated: true }); + if (this.validateInputs() === true) { + this.props.updateLiabilities( + this.props.buildingId, + this.state.liabilities, + ); + this.setState({ + loading: false, + action: 'updated', + }); + } } render() { @@ -97,6 +153,7 @@ class MortgageLiabilities extends Component { monthlyService={liability.monthly_service} remainingTerm={liability.remaining_term} onDelEvent={this.deleteRow} + onChangeEvent={this.updateRow} /> ); }); @@ -206,6 +263,7 @@ MortgageLiabilities.propTypes = { paddingLeft: PropTypes.string, fontWeight: PropTypes.string, }), + buildingId: PropTypes.number, updateLiabilities: PropTypes.func, error: PropTypes.bool, loading: PropTypes.bool, diff --git a/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js b/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js index f618a4b3..fbb2b838 100644 --- a/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js +++ b/src/components/Blocnote/FinancialInputs/MortgageLiabilitiesRow.js @@ -14,11 +14,11 @@ class MortgageLiabilitiesRow extends Component { this.handleOnChange = this.handleOnChange.bind(this); this.onDelEvent = this.onDelEvent.bind(this); this.state = { + id: props.id, lender: props.lender, - inputDate: props.inputDate, - monthlyService: props.monthlyService, - remainingTerm: props.remainingTerm, - liability: props.liability, + input_date: props.inputDate, + monthly_service: props.monthlyService, + remaining_term: props.remainingTerm, }; } @@ -27,9 +27,11 @@ class MortgageLiabilitiesRow extends Component { } handleOnChange = (event) => { - console.log(event.target.name); // eslint-disable-line - console.log(event.target.value); // eslint-disable-line - this.setState({ [event.target.name]: event.target.value }); + this.setState({ [event.target.name]: event.target.value }, + () => { + console.log(this.state); // eslint-disable-line + this.props.onChangeEvent(this.state); + }); } render() { @@ -58,9 +60,9 @@ class MortgageLiabilitiesRow extends Component { @@ -71,9 +73,9 @@ class MortgageLiabilitiesRow extends Component { @@ -86,9 +88,9 @@ class MortgageLiabilitiesRow extends Component { @@ -112,12 +114,7 @@ MortgageLiabilitiesRow.propTypes = { monthlyService: PropTypes.string, remainingTerm: PropTypes.string, onDelEvent: PropTypes.func, - liability: PropTypes.shape({ - lender: PropTypes.string, - inputDate: PropTypes.string, - monthlyService: PropTypes.string, - remainingTerm: PropTypes.number, - }), + onChangeEvent: PropTypes.func, }; export default MortgageLiabilitiesRow; -- GitLab From b862205bf1821afef1a908e8c5077e22dbc638cc Mon Sep 17 00:00:00 2001 From: akkking Date: Wed, 24 Apr 2019 23:34:52 -0400 Subject: [PATCH 74/79] Update loan options component --- .../Blocnote/FinancialInputs/LoanOptions.js | 145 +++++++++++++----- .../FinancialInputs/LoanOptionsRow.js | 72 +++++++-- .../Blocnote/FinancialInputs/index.js | 4 + 3 files changed, 165 insertions(+), 56 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/LoanOptions.js b/src/components/Blocnote/FinancialInputs/LoanOptions.js index 0f3cdba6..3b40ddb1 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptions.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptions.js @@ -16,19 +16,52 @@ class LoanOptions extends Component { super(props); this.deleteRow = this.deleteRow.bind(this); this.addRow = this.addRow.bind(this); + this.updateRow = this.updateRow.bind(this); this.state = { - loanOptions: this.props.data, - noi: this.props.noi, - cash: this.props.cash, + loanOptions: props.data, + lenders: props.lenders, + noi: props.noi, + cash: props.cash, id: 99, - lender: '', - interestRate: '', - duration: '', - maxLoanAmount: '', - updated: false, + lender: null, + interest_rate: null, + duration: null, + max_loan_amount: null, + action: null, }; } + validateInputs = () => { + const emptyFields = []; + if (this.state.loanOptions.length > 0) { + Object.values(this.state.loanOptions).forEach(loanOption => { + console.log(loanOption); // eslint-disable-line + if (loanOption.lender === null && + !emptyFields.includes('Lender')) { + emptyFields.push('Lender'); + } + if (loanOption.interest_rate === null && + !emptyFields.includes('Interest Rate')) { + emptyFields.push('Interest Rate'); + } + if (loanOption.duration === null && + !emptyFields.includes('Duration')) { + emptyFields.push('Duration'); + } + if (loanOption.max_loan_amount === null && + !emptyFields.includes('Max Loan Amount')) { + emptyFields.push('Max Loan Amount'); + } + }); + } + + if (emptyFields.length > 0) { + alert(`Please fill in ${emptyFields.join(', ')} fields`); + return false; + } + return true; + } + deleteRow = id => { if (this.state.loanOptions.length === 1) { alert('Sorry, you need at least one loan option!'); @@ -44,50 +77,75 @@ class LoanOptions extends Component { } addRow = () => { - const newLoanOption = { - id: this.state.id, - lender: this.state.lender, - interestRate: this.state.interestRate, - duration: this.state.duration, - maxLoanAmount: this.state.maxLoanAmount, - }; - console.log(this.state.loanOptions); // eslint-disable-line - const loanOptionsCopy = this.state.loanOptions; - loanOptionsCopy.push(newLoanOption); - this.setState({ loanOptions: loanOptionsCopy }, () => { - console.log(this.state.loanOptions, 'New loan option added!'); // eslint-disable-line - this.setState({ - id: this.state.id + 1, - lender: '', - interestRate: '', - duration: '', - maxLoanAmount: '', - updated: false, - }); - }); + if (this.validateInputs() === true) { + if (this.props.financeOverviewExist === true) { + const loanOption = { + id: this.state.id, + lender: this.state.lender, + interest_rate: this.state.interest_rate, + duration: this.state.duration, + max_loan_amount: this.state.max_loan_amount, + }; + console.log(this.state.loanOptions); // eslint-disable-line + const loanOptions = this.state.loanOptions; + loanOptions.push(loanOption); + this.setState({ loanOptions }, () => { + console.log(this.state.loanOptions, 'New loan option added!'); // eslint-disable-line + this.setState({ + id: this.state.id + 1, + lender: null, + interest_rate: null, + duration: null, + max_loan_amount: null, + }); + }); + } else { + alert('Please fill in Financial Overview first'); + } + } } - handleOnChange = (event) => { - this.setState({ [event.target.name]: event.target.value }); + updateRow = (row) => { + const loanOptions = this.state.loanOptions.map((loanOption, id) => { + console.log(id); // eslint-disable-line + console.log(row.id); // eslint-disable-line + if (id === row.id) { + const tmp = { id }; + tmp.lender = row.lender; + tmp.interest_rate = row.interest_rate; + tmp.duration = row.duration; + tmp.max_loan_amount = row.max_loan_amount; + return tmp; + } + return loanOption; + }); + this.setState({ loanOptions }, () => { + console.log(loanOptions); // eslint-disable-line + }); } handleUpdateLoanOptions = () => { - const formData = {}; - formData['noi-dscr'] = parseFloat(this.state.noi).toFixed(2); - formData['cash-dscr'] = parseFloat(this.state.cash).toFixed(2); - formData.instance = this.state.loanOptions; - this.props.updateLoanOptions( - this.props.buildingId, - formData, - ); - this.setState({ updated: true }); + if (this.validateInputs() === true) { + const formData = {}; + formData['noi-dscr'] = parseFloat(this.state.noi).toFixed(2); + formData['cash-dscr'] = parseFloat(this.state.cash).toFixed(2); + formData.instance = this.state.loanOptions; + this.props.updateLoanOptions( + this.props.buildingId, + formData, + ); + this.setState({ + loading: false, + action: 'updated', + }); + } } render() { const header = [ 'Loan Options', 'Lender', - 'Interet Rate', + 'Interest Rate', 'Duration', 'Maximum Loan Amount', 'Option', @@ -107,6 +165,7 @@ class LoanOptions extends Component {
    - +
    @@ -68,9 +74,8 @@ CostEstimationRow.propTypes = { id: PropTypes.number, item: PropTypes.string, cost: PropTypes.number, - buttonColor: PropTypes.string, - buttonValue: PropTypes.string, - updRow: PropTypes.func, + onUpdEvent: PropTypes.func, + onDelEvent: PropTypes.func, }; export default CostEstimationRow; diff --git a/src/components/Blocnote/PreliminaryFinance/LoanSummary.js b/src/components/Blocnote/PreliminaryFinance/LoanSummary.js index eb91aec4..eca34032 100644 --- a/src/components/Blocnote/PreliminaryFinance/LoanSummary.js +++ b/src/components/Blocnote/PreliminaryFinance/LoanSummary.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { Table, @@ -6,67 +6,55 @@ import { import LoanSummaryRow from './LoanSummaryRow'; -class LoanSummary extends Component { - constructor(props) { - super(props); +const LoanSummary = (props) => { + let header = []; + let rows = []; - this.state = { - successMessages: [], - error: false, - loading: false, - }; + if (props.data !== null && props.data !== undefined) { + header = props.data[0].map((item) => { + return ( + + ); + }); + props.data.shift(); + rows = props.data.map((item) => { + let amountBorrowed = Math.round(item[1] * 100) / 100; + amountBorrowed = amountBorrowed.toLocaleString(); + let amountUpperLimit = Math.round(item[2] * 100) / 100; + amountUpperLimit = amountUpperLimit.toLocaleString(); + const annualInterestRate = item[3][1] + item[3][0]; + const duration = `${item[4][1]} ${item[4][0]}`; + const monthlyDebtService = item[5].toLocaleString(); + return ( + + ); + }); } - render() { - let header = []; - let rows = []; - - if (this.props.data !== null) { - header = this.props.data[0].map((item) => { - return ( - - ); - }); - this.props.data.shift(); - rows = this.props.data.map((item) => { - let amountBorrowed = Math.round(item[1] * 100) / 100; - amountBorrowed = amountBorrowed.toLocaleString(); - let amountUpperLimit = Math.round(item[2] * 100) / 100; - amountUpperLimit = amountUpperLimit.toLocaleString(); - const annualInterestRate = item[3][1] + item[3][0]; - const duration = `${item[4][1]} ${item[4][0]}`; - const monthlyDebtService = item[5].toLocaleString(); - return ( - - ); - }); - } - - return ( -
    -

    - Loan Summary -

    -
    @@ -238,6 +297,7 @@ LoanOptions.propTypes = { }), cash: PropTypes.number, noi: PropTypes.number, + lenders: PropTypes.arrayOf, data: PropTypes.arrayOf( PropTypes.shape({ duration: PropTypes.string, @@ -262,6 +322,7 @@ LoanOptions.propTypes = { fontWeight: PropTypes.string, }), buildingId: PropTypes.number, + financeOverviewExist: PropTypes.bool, updateLoanOptions: PropTypes.func, error: PropTypes.bool, loading: PropTypes.bool, diff --git a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js index 205abd32..bf54384b 100644 --- a/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js +++ b/src/components/Blocnote/FinancialInputs/LoanOptionsRow.js @@ -5,6 +5,10 @@ import { InputGroup, InputGroupAddon, Input, + Dropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, } from 'reactstrap'; @@ -13,12 +17,20 @@ class LoanOptionsRow extends Component { super(props); this.handleOnChange = this.handleOnChange.bind(this); this.onDelEvent = this.onDelEvent.bind(this); + this.toggleLender = this.toggleLender.bind(this); + this.changeLender = this.changeLender.bind(this); this.state = { id: props.id, lender: props.lender, - interestRate: props.interestRate, + lenders: props.lenders, + interest_rate: props.interestRate, duration: props.duration, - maxLoanAmount: props.maxLoanAmount, + max_loan_amount: props.maxLoanAmount, + lenderDropdownOpen: false, + lenderDropDownValue: props.lender, + lenderOptions: props.lenders !== undefined ? props.lenders.map((lender, id) => { + return { id, key: id, name: lender }; + }) : [], }; } @@ -27,32 +39,62 @@ class LoanOptionsRow extends Component { } handleOnChange = (event) => { - this.setState({ [event.target.name]: event.target.value }); + this.setState({ [event.target.name]: event.target.value }, + () => { + console.log(this.state); // eslint-disable-line + this.props.onChangeEvent(this.state); + }); + } + + toggleLender() { + this.setState({ + lenderDropdownOpen: !this.state.lenderDropdownOpen, + }); + } + + changeLender(e) { + this.setState({ lenderDropDownValue: e.currentTarget.textContent }); } render() { const style = { textAlign: 'left' }; + const lenderOptions = this.state.lenderOptions.map(e => { + return ( + + {e.name} + + ); + }); return (
    Loan {this.state.id + 1} - + + + {this.state.lenderDropDownValue} + + + {lenderOptions} + + @@ -84,8 +126,8 @@ class LoanOptionsRow extends Component { @@ -111,6 +153,8 @@ LoanOptionsRow.propTypes = { duration: PropTypes.string, maxLoanAmount: PropTypes.number, onDelEvent: PropTypes.func, + lenders: PropTypes.arrayOf, + onChangeEvent: PropTypes.func, }; export default LoanOptionsRow; diff --git a/src/containers/Blocnote/FinancialInputs/index.js b/src/containers/Blocnote/FinancialInputs/index.js index d8c4d4c6..5b526be1 100644 --- a/src/containers/Blocnote/FinancialInputs/index.js +++ b/src/containers/Blocnote/FinancialInputs/index.js @@ -137,6 +137,8 @@ class FinancialInputs extends Component { console.log(customerPreference.data); // eslint-disable-line const foData = this.processFinanceOverview(fianceOverview.data); + const financeOverviewExist = + fianceOverview.data.instance.financing_overview_data !== undefined; let cashBalanceData = []; let loanOptionsData = []; let billsSummaryData = { @@ -258,10 +260,12 @@ class FinancialInputs extends Component { errorMessageStyle={errorMessageStyle} defaultMessageStyle={defaultMessageStyle} data={loanOptionsData} + lenders={loanOptions.data.lenders} noi={parseFloat(loanOptions.data.noi).toFixed(2)} cash={parseFloat(loanOptions.data.cash).toFixed(2)} loading={loanOptions.loading} buildingId={this.props.building.building_id} + financeOverviewExist={financeOverviewExist} updateLoanOptions={this.props.updateLoanOptions} /> Date: Thu, 25 Apr 2019 00:02:25 -0400 Subject: [PATCH 75/79] Fix financial overview submit issue --- .../Blocnote/FinancialInputs/FinanceOverview.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/FinanceOverview.js b/src/components/Blocnote/FinancialInputs/FinanceOverview.js index 6c601fad..8e25a112 100644 --- a/src/components/Blocnote/FinancialInputs/FinanceOverview.js +++ b/src/components/Blocnote/FinancialInputs/FinanceOverview.js @@ -13,7 +13,7 @@ import { InputGroupAddon, Label, } from 'reactstrap'; -import CSRFToken from './csrftoken'; +// import CSRFToken from './csrftoken'; import ResultMessage from './ResultMessage'; @@ -60,9 +60,9 @@ class FinanceOverview extends Component { const formData = new FormData(event.target); formData.set('fund_id', this.state.fundDropDownId); - this.setState({ - csrftoken: formData.get('csrfmiddlewaretoken'), - }); + // this.setState({ + // csrftoken: formData.get('csrfmiddlewaretoken'), + // }); if (formData.get('fund_id') === '0') { this.setState({ @@ -169,8 +169,9 @@ class FinanceOverview extends Component { this.props.fundOptions.forEach((fund) => { fundOptions.push( {fund.fund_name} @@ -180,7 +181,7 @@ class FinanceOverview extends Component { mainContent = ( - + {/* */}

    Financial Overview

    -- GitLab From ca9afa385798c7d966469b6c52081bc9371b64d8 Mon Sep 17 00:00:00 2001 From: akkking Date: Thu, 25 Apr 2019 00:41:01 -0400 Subject: [PATCH 76/79] Remove unnecessary component files --- src/components/Blocnote/BudgetSimulator.js | 135 ------- src/components/Blocnote/FinancialInputs.js | 371 ------------------ src/components/Blocnote/PreliminaryFinance.js | 197 ---------- src/components/Blocnote/index.js | 167 -------- 4 files changed, 870 deletions(-) delete mode 100644 src/components/Blocnote/BudgetSimulator.js delete mode 100644 src/components/Blocnote/FinancialInputs.js delete mode 100644 src/components/Blocnote/PreliminaryFinance.js delete mode 100644 src/components/Blocnote/index.js diff --git a/src/components/Blocnote/BudgetSimulator.js b/src/components/Blocnote/BudgetSimulator.js deleted file mode 100644 index 7fdd05ef..00000000 --- a/src/components/Blocnote/BudgetSimulator.js +++ /dev/null @@ -1,135 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import LinkBarDetail from '../LinkBarDetail'; -import Loading from '../Loading'; -import './styles.css'; -import BugetTable from './BudgetSimulator/BugetTable'; -import BudgetChart from './BudgetSimulator/BudgetChart'; -import request from '../../utils/request'; -import { getHeaders, blocnoteURL } from '../../utils/restServices'; -/* eslint-disable react/sort-comp */ - - -class BudgetSimulator extends Component { - mounted = false; - - constructor(props) { - super(props); - - this.state = { - savingPotentialList: null, - budgetLoanFirst: null, - budgetLoanOnly: null, - budgetSfFirst: null, - budgetSfMax: null, - budgets: null, - error: false, - loading: true, - }; - } - - componentDidMount() { - this.mounted = true; - this.loadBudgetData(); - } - - loadBudgetData = () => { - this.setState({ loading: true }); - request(`${blocnoteURL}buildings/${this.props.buildingId}/budget/budget-data/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - if (this.mounted) { - if (!res.err) { - if (Object.keys(res.instance).length > 0) { - this.setState({ savingPotentialList: res.instance.saving_potential_list }); - this.setState({ budgetLoanFirst: res.instance.tables.budget_loan_first }); - this.setState({ budgetLoanOnly: res.instance.tables.budget_loan_only }); - this.setState({ budgetSfFirst: res.instance.tables.budget_sf_first }); - this.setState({ budgetSfMax: res.instance.tables.budget_sf_max }); - const tables = res.instance.tables; - this.setState({ budgets: - Object.keys(tables).map(tableName => tables[tableName][0].slice(1)), - }); - } - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); - } - this.setState({ loading: false }); - } - }); - } - - resetErrorMessage = () => { - this.setState({ error: false }); - } - - render() { - let mainContent = null; - let bugetTables = []; - const blockStyle = { marginBottom: '40px' }; - const tableKeys = [ - 'budgetLoanFirst', - 'budgetLoanOnly', - 'budgetSfFirst', - 'budgetSfMax', - ]; - const tableNames = { - budgetLoanFirst: 'Budget with Loan only', - budgetLoanOnly: 'Budget with Loan first', - budgetSfFirst: 'Budget with SF first', - budgetSfMax: 'Budget with SF maximum', - }; - - if (this.state.loading) { - mainContent = ; - } else { - bugetTables = tableKeys.map((tableKey) => { - return ( -
    - -
    - ); - }); - - mainContent = ( -
    - -
    - {bugetTables} -
    -
    - ); - } - - return ( -
    - - {mainContent} -
    - ); - } -} - -BudgetSimulator.propTypes = { - buildingId: PropTypes.string, -}; - -export default BudgetSimulator; diff --git a/src/components/Blocnote/FinancialInputs.js b/src/components/Blocnote/FinancialInputs.js deleted file mode 100644 index 850cd731..00000000 --- a/src/components/Blocnote/FinancialInputs.js +++ /dev/null @@ -1,371 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import LinkBarDetail from '../../components/LinkBarDetail'; -import ErrorAlert from '../../components/ErrorAlert'; -import './styles.css'; -import request from '../../utils/request'; -import Loading from '../../components/Loading'; -import FinanceOverview from './FinancialInputs/FinanceOverview'; -import EnergyBills from './FinancialInputs/Bills'; -import BillsSummary from './FinancialInputs/BillsSummary'; -import EnergyBillsOverview from './FinancialInputs/EnergyBillsOverview'; -import IncomeStatements from './FinancialInputs/IncomeStatements'; -import CashBalance from './FinancialInputs/CashBalance'; -import MortgageLiabilities from './FinancialInputs/MortgageLiabilities'; -import LoanOptions from './FinancialInputs/LoanOptions'; -import CustomerPreference from './FinancialInputs/CustomerPreference'; -import { getHeaders, blocnoteURL } from '../../utils/restServices'; - - -class FinancialInputs extends Component { - constructor(props) { - super(props); - this.mounted = false; - this.state = { - financeData: null, - bills: null, - billsSummary: null, - billsOverview: null, - incomeStatements: null, - cashBalance: null, - liabilities: null, - loanOptions: null, - noi: null, - cash: null, - customerPreference: null, - // successMessages: [], - error: false, - loading: true, - baseURL: `${blocnoteURL}buildings/${this.props.buildingId}/financial-inputs`, - }; - } - - componentDidMount() { - this.mounted = true; - this.loading(); - this.loadFinanceOverview(); - this.loadBills(); - this.loadBillsSummary(); - this.loadBillsOverview(); - this.loadIncomeStatement(); - this.loadCashBalance(); - this.loadLiabilities(); - this.loadLoanOptions(); - this.loadCustomerPreference(); - this.unloading(); - } - - loading = () => { - this.setState({ loading: true }); - } - - unloading = () => { - this.setState({ loading: false }); - } - - loadFinanceOverview = () => { - request(`${this.state.baseURL}/finance-overview/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - if (this.mounted) { - if (!res.err) { - if (Object.keys(res.instance).length > 0) { - const funds = []; - res.instance.funds.forEach(fund => { - funds.push({ - fund_id: fund[0], - fund_name: fund[1], - }); - }); - - const financeData = res.instance.financing_overview_data; - let fundDropDownSelectedValue = 'No Fund'; - res.instance.funds.forEach(fund => { - if (fund[0] === financeData.fund_id) { - fundDropDownSelectedValue = fund[1]; - } - }); - - const acp = parseInt(financeData.anticipated_construction_period, 10); - this.setState({ - financeData: res.instance.financing_overview_data, - fundOptions: funds, - fundDropDownId: financeData.fund_id, - fundDropDownValue: fundDropDownSelectedValue, - proFormaStartDate: financeData.pro_forma_start_date, - proFormaDuration: financeData.pro_forma_duration, - analysisDate: financeData.analysis_date, - anticipatedConstructionStartDate: financeData.anticipated_construction_start_date, - anticipatedCommissioningDate: financeData.anticipated_commissioning_date, - anticipatedConstructionPeriod: acp, - }); - console.log(this.state); // eslint-disable-line - } - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); - } - } - }); - } - - loadBills = () => { - request(`${this.state.baseURL}/bills/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - if (this.mounted) { - if (!res.err) { - if (Object.keys(res.result).length > 0) { - this.setState({ bills: res.result }); - } - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); - } - } - }); - } - - loadBillsSummary = () => { - request(`${this.state.baseURL}/bills-summary/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - if (this.mounted) { - if (!res.err) { - if (Object.keys(res.result).length > 0) { - this.setState({ billsSummary: res.result.user_bill }); - } - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); - } - } - }); - } - - loadBillsOverview = () => { - request(`${this.state.baseURL}/bills-overview/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - if (!res.err) { - if (Object.keys(res.instance).length > 0) { - this.setState({ billsOverview: res.instance }); - } - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); - } - }); - } - - loadIncomeStatement = () => { - request(`${this.state.baseURL}/income-statement/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - if (!res.err) { - if (Object.keys(res.instance).length > 0) { - this.setState({ incomeStatements: res.instance }); - } - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); - } - }); - } - - loadCashBalance = () => { - request(`${this.state.baseURL}/cash-balance/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - if (!res.err) { - if (Object.keys(res.instance).length > 0) { - this.setState({ cashBalance: res.instance.result }); - } - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); - } - }); - } - - loadLiabilities = () => { - request(`${this.state.baseURL}/liabilities/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - if (!res.err) { - if (Object.keys(res.instance).length > 0) { - this.setState({ liabilities: res.instance }); - } - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); - } - }); - } - - loadLoanOptions = () => { - request(`${this.state.baseURL}/loan-options/?loans=all-loans`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - if (!res.err) { - if (Object.keys(res).length > 0) { - this.setState({ loanOptions: res.status }); - this.setState({ cash: res.cash }); - this.setState({ noi: res.noi }); - } - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); - } - }); - } - - loadCustomerPreference = () => { - request(`${this.state.baseURL}/customer-preference/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - if (!res.err) { - if (Object.keys(res.instance).length > 0) { - this.setState({ customerPreference: res.instance }); - } - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); - } - }); - } - - resetErrorMessage = () => { - this.setState({ error: false }); - } - - render() { - let mainContent = null; - const blockStyle = { marginBottom: '40px' }; - const headerStyle = { textAlign: 'left', marginBottom: '25px' }; - const successMessageStyle = { - color: 'green', - paddingLeft: '25px', - fontWeight: 'bold', - }; - const errorMessageStyle = { - color: 'red', - paddingLeft: '25px', - fontWeight: 'bold', - }; - - mainContent = ; - console.log(this.state); // eslint-disable-line - if (this.state.financeData !== null && - this.state.billsSummary !== null && - this.state.cashBalance !== null && - this.state.liabilities !== null && - this.state.loanOptions !== null && - this.state.customerPreference !== null) { - mainContent = ( -
    - - - - - - - - - - -
    - ); - } - - return ( -
    - - {mainContent} -
    - ); - } -} - -propTypes = { - buildingId: PropTypes.string, -}; - -export default FinancialInputs; diff --git a/src/components/Blocnote/PreliminaryFinance.js b/src/components/Blocnote/PreliminaryFinance.js deleted file mode 100644 index 93c1bea8..00000000 --- a/src/components/Blocnote/PreliminaryFinance.js +++ /dev/null @@ -1,197 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import LinkBarDetail from '../LinkBarDetail'; -import ErrorAlert from '../ErrorAlert'; -import Loading from '../Loading'; -import './styles.css'; -import LoanSummary from './PreliminaryFinance/LoanSummary'; -import ProjectEconomics from './PreliminaryFinance/ProjectEconomics'; -import SavingsScheduleChart from './PreliminaryFinance/SavingsScheduleChart'; -import PriorRetrofitIncomeStatement from './PreliminaryFinance/PriorRetrofitIncomeStatement'; -import PostRetrofitIncomeStatement from './PreliminaryFinance/PostRetrofitIncomeStatement'; -import PriorRetrofitBalanceSheet from './PreliminaryFinance/PriorRetrofitBalanceSheet'; -import PostRetrofitBalanceSheet from './PreliminaryFinance/PostRetrofitBalanceSheet'; -import BudgetChart from './PreliminaryFinance/BudgetChart'; -import request from '../../utils/request'; -import { getHeaders, blocnoteURL } from '../../utils/restServices'; -import DownPayment from './PreliminaryFinance/DownPayment'; -import SelectScenario from '../../containers/Blocnote/PreliminaryFinance/SelectScenario'; -import SaveScenario from '../../containers/Blocnote/PreliminaryFinance/InputScenario'; -/* eslint-disable react/sort-comp */ - - -class PreliminaryFinance extends Component { - mounted = false; - - constructor(props) { - super(props); - this.state = { - projectEconomics: null, - costs: null, - savings: null, - loanSummary: null, - priorIncomeStatement: null, - postIncomeStatement: null, - priorBalanceSheet: null, - postBalanceSheet: null, - downpayment: null, - savingPotentialList: null, - budgets: null, - savingsScheduleChartData: null, - dropdownOpen: false, - successMessages: [], - error: false, - loading: true, - }; - } - - componentDidMount() { - this.mounted = true; - this.loadScenario(); - } - - loadScenario = () => { - this.setState({ loading: true }); - console.log(this.props); // eslint-disable-line - request(`${blocnoteURL}buildings/${this.props.buildingId}/preliminary-finance/scenario/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - if (this.mounted) { - console.log(res); // eslint-disable-line - if (!res.err) { - if (Object.keys(res.economics_overview).length > 0) { - const projectEconomicsContent = [[]]; - Object.keys(res.economics_overview).forEach((key) => { - const temp = []; - temp.push(key); - temp.push(res.economics_overview[key]); - projectEconomicsContent.push(temp); - }); - this.setState({ scenarioName: res.name }); - this.setState({ projectEconomics: projectEconomicsContent }); - this.setState({ costs: res.costs }); - this.setState({ savings: res.savings }); - this.setState({ loanSummary: res.loan_summary }); - this.setState({ priorIncomeStatement: res.prior_income_statement }); - this.setState({ postIncomeStatement: res.post_income_statement }); - this.setState({ priorBalanceSheet: res.prior_balance_sheet }); - this.setState({ postBalanceSheet: res.post_balance_sheet }); - this.setState({ downpayment: res.downpayment }); - this.setState({ savingPotentialList: res.instance.saving_potential_list }); - this.setState({ savingsScheduleChartData: res }); - console.log(this.state.savingPotentialList); // eslint-disable-line - const tables = res.instance.tables; - this.setState({ budgets: - Object.keys(tables).map(tableName => tables[tableName][0].slice(1)), - }); - } - this.resetErrorMessage(); - } else if (res.err) { - this.setState({ error: res.err }); - } - this.setState({ loading: false }); - } - }); - } - - resetErrorMessage = () => { - this.setState({ error: false }); - } - - render() { - let mainContent = null; - const blockStyle = { marginBottom: '40px' }; - const headerStyle = { textAlign: 'left', marginBottom: '25px' }; - - if (this.state.loading) { - mainContent = ; - } else { - mainContent = ( -
    - - - - - - - - - - - - - - -
    - ); - } - - return ( -
    - - {mainContent} -
    - ); - } -} - -PreliminaryFinance.propTypes = { - buildingId: PropTypes.string, -}; - -export default PreliminaryFinance; diff --git a/src/components/Blocnote/index.js b/src/components/Blocnote/index.js deleted file mode 100644 index 4f59563b..00000000 --- a/src/components/Blocnote/index.js +++ /dev/null @@ -1,167 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { Link } from 'react-router'; -import LinkBarDetail from '../LinkBarDetail'; -import './styles.css'; -import { - blocnoteURL, - getHeaders, -} from '../../utils/restServices'; -import request from '../../utils/request'; -import Loading from '../Loading'; - - -class Blocnote extends Component { - - constructor(props) { - super(props); - this.state = { - financialInputsData: { name: null, status: null }, - preliminaryFinanceData: { name: null, status: null }, - budgetSimilatorData: { name: null, status: null }, - loading: true, - }; - } - - componentDidMount() { - console.log(this.state); // eslint-disable-line - this.loadData(this.props.buildingId); - console.log(this.props); // eslint-disable-line - } - - loadData = (buildingId) => { - request(`${blocnoteURL}buildings/${buildingId}/data/`, { - method: 'GET', - headers: getHeaders(), - }).then((res) => { - console.log(res); // eslint-disable-line - if (!res.err) { - if (Object.keys(res.instance).length > 0) { - const rootURL = `/buildings/${this.props.buildingId}`; - - if (res.instance.if_completed) { - this.state.financialInputsData.name = ( - Financial Inputs - ); - this.state.financialInputsData.status = (Complete); - this.state.preliminaryFinanceData.name = ( - Preliminary Finance - ); - this.state.preliminaryFinanceData.status = (OK); - this.state.budgetSimilatorData.name = ( - Budget Simulator - ); - this.state.budgetSimilatorData.status = (OK); - } else { - this.state.financialInputsData.name = ( - Financial Inputs - ); - if (res.instance.if_started) { - this.state.financialInputsData.status = (Started but not complete.); - } else { - this.state.financialInputsData.status = (Not Started.); - } - this.state.preliminaryFinanceData.name = (Preliminary Finance); - const prelimItems = res.instance.not_saved_list_for_prelim.map((item) => { - return (
  • Please fill {item}
  • ); - }); - this.state.preliminaryFinanceData.status = ( -
      - {prelimItems} -
    - ); - - if (res.instance.if_completed_for_budget) { - this.state.budgetSimilatorData.name = ( - Budget Simulator - ); - this.state.budgetSimilatorData.status = (OK); - } else { - this.state.budgetSimilatorData.name = (Budget Simulator); - const budgetItems = res.instance.not_saved_list_for_budget.map((item) => { - return (
  • Please fill {item}
  • ); - }); - this.state.budgetSimilatorData.status = (
      {budgetItems}
    ); - } - } - } - } else if (res.err) { - this.setState({ error: res.err }); - } - this.setState({ loading: false }); - }); - } - - render() { - let mainContent = null; - - if (this.state.loading) { - mainContent = ; - } else { - mainContent = ( -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - -
    OPTIONSSTATUS
    - {this.state.financialInputsData.name} - - {this.state.financialInputsData.status} -
    - {this.state.preliminaryFinanceData.name} - - {this.state.preliminaryFinanceData.status} -
    - {this.state.budgetSimilatorData.name} - - {this.state.budgetSimilatorData.status} -
    -
    -
    -
    -
    - ); - } - - return ( -
    - - {mainContent} -
    - ); - } -} - -Blocnote.propTypes = { - buildingId: PropTypes.string, -}; - -export default Blocnote; -- GitLab From 3f44ed5828ba616e1b2d06debad34bce3bb5999b Mon Sep 17 00:00:00 2001 From: akkking Date: Fri, 26 Apr 2019 15:33:32 -0400 Subject: [PATCH 77/79] Update on Saving and cost estimation, loan summary --- .../FinancialInputs/CashBalanceRow.js | 2 +- .../PreliminaryFinance/CostEstimation.js | 89 ++++++++++----- .../PreliminaryFinance/CostEstimationRow.js | 17 ++- .../PreliminaryFinance/LoanSummary.js | 106 ++++++++---------- .../PreliminaryFinance/SavingEstimation.js | 22 +++- .../PreliminaryFinance/SavingEstimationRow.js | 22 ++-- 6 files changed, 156 insertions(+), 102 deletions(-) diff --git a/src/components/Blocnote/FinancialInputs/CashBalanceRow.js b/src/components/Blocnote/FinancialInputs/CashBalanceRow.js index 4a6083d5..332bbfc6 100644 --- a/src/components/Blocnote/FinancialInputs/CashBalanceRow.js +++ b/src/components/Blocnote/FinancialInputs/CashBalanceRow.js @@ -27,7 +27,7 @@ class CashBalanceRow extends Component { handleOnChange = (event) => { this.setState({ [event.target.name]: - event.target.name === 'isFromBalanceSheet' ? event.target.checked : event.target.value }, + event.target.name === 'is_from_balance_sheet' ? event.target.checked : event.target.value }, () => { this.props.onChangeEvent(this.state); }); diff --git a/src/components/Blocnote/PreliminaryFinance/CostEstimation.js b/src/components/Blocnote/PreliminaryFinance/CostEstimation.js index 15f1a003..6f561c36 100644 --- a/src/components/Blocnote/PreliminaryFinance/CostEstimation.js +++ b/src/components/Blocnote/PreliminaryFinance/CostEstimation.js @@ -12,37 +12,73 @@ class CostEstimation extends Component { super(props); this.addRow = this.addRow.bind(); this.state = { - costEstimation: props.data, - item: '', - cost: '', + costEstimation: props.data.map((estimation) => { + return { item: estimation.cost_item, cost: String(estimation.cost) }; + }), + id: props.data.length, + cost_item: null, + cost: null, }; } + validateInputs = () => { + const emptyFields = []; + if (this.state.costEstimation.length > 0) { + Object.values(this.state.costEstimation).forEach(estimation => { + if (estimation.item === null && + !emptyFields.includes('Item name')) { + emptyFields.push('Item name'); + } + if (estimation.cost === null && + !emptyFields.includes('Cost')) { + emptyFields.push('Cost'); + } + }); + } + + if (emptyFields.length > 0) { + alert(`Please fill in ${emptyFields.join(', ')} fields`); + return false; + } + return true; + } + addRow = () => { - const newEstimation = { - id: this.state.id, - balanceAmount: this.state.item, - statementDate: this.state.cost, - }; - const costEstimationCopy = this.state.costEstimation; - costEstimationCopy.push(newEstimation); - this.setState({ costEstimation: costEstimationCopy }, () => { - console.log(this.state.costEstimation, 'New cost estimation added!'); // eslint-disable-line - this.setState({ - id: this.state.id + 1, - item: '', - cost: '', + if (this.validateInputs() === true) { + const newEstimation = { + item: this.state.item, + cost: this.state.cost, + }; + const costEstimation = this.state.costEstimation; + costEstimation.push(newEstimation); + this.setState({ costEstimation }, () => { + console.log(this.state.costEstimation, 'New cost estimation added!'); // eslint-disable-line + this.setState({ + cost_item: null, + cost: null, + }); }); - }); + } + } + + delRow = id => { + if (confirm('Are you sure to delete this estimation?') === true) { + const costEstimation = this.state.costEstimation.filter((estimation, index) => { + console.log(estimation); // eslint-disable-line + return index !== id; + }); + this.setState({ costEstimation }, () => { + console.log('Estimation deleted!'); // eslint-disable-line + }); + } } updRow = (row) => { - console.log(row); // eslint-disable-line - const costEstimation = this.state.costEstimation.map((costItem, index) => { + const costEstimation = this.state.costEstimation.map((estimation, index) => { if (index === row.id) { - return { cost_item: row.item, cost: row.cost }; + return { item: row.item, cost: String(row.cost) }; } - return costItem; + return estimation; }); this.setState({ costEstimation }, () => { this.props.updateCostEstimation(this.state.costEstimation); @@ -59,16 +95,15 @@ class CostEstimation extends Component { }; if (this.state.costEstimation !== null) { - rows = this.state.costEstimation.map((costItem) => { + rows = this.state.costEstimation.map((costItem, id) => { return ( ); }); diff --git a/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js b/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js index d914a895..bf270674 100644 --- a/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js +++ b/src/components/Blocnote/PreliminaryFinance/CostEstimationRow.js @@ -9,6 +9,7 @@ class CostEstimationRow extends Component { constructor(props) { super(props); this.handleOnChange = this.handleOnChange.bind(); + this.handleDelRow = this.handleDelRow.bind(); this.state = { id: props.id, item: props.item, @@ -16,9 +17,13 @@ class CostEstimationRow extends Component { }; } + handleDelRow = () => { + this.props.onDelEvent(this.props.id); + } + handleOnChange = (event) => { this.setState({ [event.target.name]: event.target.value }, () => { - this.props.updRow(this.state); + this.props.onUpdEvent(this.state); }); } @@ -54,9 +59,10 @@ class CostEstimationRow extends Component {
    {item}{item}
    - - {header} - - - {rows} - -
    -
    - ); - } -} + return ( +
    +

    + Loan Summary +

    + + + {header} + + + {rows} + +
    +
    + ); +}; LoanSummary.propTypes = { blockStyle: PropTypes.string, diff --git a/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js b/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js index 640b39b8..7214bc74 100644 --- a/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js +++ b/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js @@ -11,12 +11,32 @@ class SavingEstimation extends Component { super(props); this.state = { savingEstimation: props.data, + // savingEstimation: this.formatData(props.data), }; } + // formatData = (data) => { + // const savingEstimation = {}; + // Object.keys(data).forEach(key => { + // savingEstimation[key].estimated_savings = String(savingEstimation[key].estimated_savings); + // }); + // return savingEstimation; + // } + + // props.data.map((estimation) => { + // return { + // estimated_savings: String(estimation.estimated_savings), + // utility_type: estimation.utility_type, + // used_before_retrofit: estimation.used_before_retrofit, + // used_after_retrofit: estimation.used_after_retrofit, + // }; + // }), + updRow = (row) => { + const newRow = row; const savingEstimation = this.state.savingEstimation; - savingEstimation[row.utilityType] = row; + newRow.estimated_savings = String(row.estimated_savings); + savingEstimation[row.utilityType] = newRow; this.setState({ savingEstimation }, () => { this.props.updateSavingEstimation(this.state.savingEstimation); console.log(this.state.savingEstimation); // eslint-disable-line diff --git a/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js b/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js index 3bbcd217..fe346d30 100644 --- a/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js +++ b/src/components/Blocnote/PreliminaryFinance/SavingEstimationRow.js @@ -12,22 +12,25 @@ class SavingEstimationRow extends Component { super(props); this.handleOnChange = this.handleOnChange.bind(); this.state = { - estimatedSavings: this.props.estimatedSavings, - usedBeforeRetrofit: this.props.usedBeforeRetrofit, - usedAfterRetrofit: this.props.usedAfterRetrofit, - utilityType: this.props.utilityType, - error: false, - loading: false, + estimatedSavings: props.estimatedSavings, + usedBeforeRetrofit: props.usedBeforeRetrofit, + usedAfterRetrofit: props.usedAfterRetrofit, + utilityType: props.utilityType, }; + console.log(props); // eslint-disable-line } handleOnChange = (event) => { - this.setState({ [event.target.name]: event.target.value }, () => { + this.setState({ [event.target.name]: + ['usedBeforeRetrofit', 'usedAfterRetrofit'].includes(event.target.name) ? + event.target.checked : event.target.value }, + () => { this.props.updRow(this.state); }); } render() { + console.log(this.state); // eslint-disable-line return ( @@ -38,7 +41,6 @@ class SavingEstimationRow extends Component { @@ -66,6 +70,8 @@ class SavingEstimationRow extends Component { type="checkbox" name="usedAfterRetrofit" value={this.state.usedAfterRetrofit} + checked={this.state.usedAfterRetrofit} + onChange={this.handleOnChange} /> -- GitLab From 673b4852071fb0e9ed1fefdfbbb236b645392db5 Mon Sep 17 00:00:00 2001 From: akkking Date: Fri, 26 Apr 2019 15:34:51 -0400 Subject: [PATCH 78/79] package-lock updates --- package-lock.json | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index c8b87755..3ee8d7a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5028,7 +5028,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5443,7 +5444,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5499,6 +5501,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5542,12 +5545,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -12264,9 +12269,9 @@ "dev": true }, "raf": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.0.tgz", - "integrity": "sha512-pDP/NMRAXoTfrhCfyfSEwJAKLaxBU9eApMeBPB1TkDouZmvPerIClV8lTAd+uF8ZiTaVl69e1FCxQrAd/VTjGw==", + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz", + "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==", "requires": { "performance-now": "^2.1.0" } -- GitLab From 56a4957e79434d3e9caaafcd4cff5bd9df25ff7f Mon Sep 17 00:00:00 2001 From: akkking Date: Tue, 30 Apr 2019 12:38:50 -0400 Subject: [PATCH 79/79] Move components to stateless components, remove not needed file --- .../PreliminaryFinance/LoanSummaryRow.js | 62 +++++++--------- .../PostRetrofitBalanceSheet.js | 64 +++++++--------- .../PostRetrofitIncomeStatement.js | 64 +++++++--------- .../PriorRetrofitBalanceSheet.js | 64 +++++++--------- .../PriorRetrofitIncomeStatement.js | 64 +++++++--------- .../PreliminaryFinance/ProjectEconomics.js | 3 - .../PreliminaryFinance/SavingEstimation.js | 18 ----- .../PreliminaryFinance/TableContent.js | 73 ++++++++----------- src/utils/loadTable.js | 42 ----------- 9 files changed, 159 insertions(+), 295 deletions(-) delete mode 100644 src/utils/loadTable.js diff --git a/src/components/Blocnote/PreliminaryFinance/LoanSummaryRow.js b/src/components/Blocnote/PreliminaryFinance/LoanSummaryRow.js index b674b963..2b3da2b2 100644 --- a/src/components/Blocnote/PreliminaryFinance/LoanSummaryRow.js +++ b/src/components/Blocnote/PreliminaryFinance/LoanSummaryRow.js @@ -1,43 +1,31 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; -class LoanSummaryRow extends Component { - constructor(props) { - super(props); - - this.state = { - successMessages: [], - error: false, - loading: false, - }; - } - - render() { - return ( - - - {this.props.lender} - - - ${this.props.amountBorrowed} - - - ${this.props.amountUpperLimit} - - - {this.props.annualInterestRate} - - - {this.props.duration} - - - ${this.props.monthlyDebtService} - - - ); - } -} +const LoanSummaryRow = (props) => { + return ( + + + {props.lender} + + + ${props.amountBorrowed} + + + ${props.amountUpperLimit} + + + {props.annualInterestRate} + + + {props.duration} + + + ${props.monthlyDebtService} + + + ); +}; LoanSummaryRow.propTypes = { lender: PropTypes.string, diff --git a/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js b/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js index efed0767..e27c3f5f 100644 --- a/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js +++ b/src/components/Blocnote/PreliminaryFinance/PostRetrofitBalanceSheet.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { Table, @@ -6,46 +6,34 @@ import { import TableContent from './TableContent'; -class PostRetrofitBalanceSheet extends Component { - constructor(props) { - super(props); +const PostRetrofitBalanceSheet = (props) => { + let header = []; - this.state = { - successMessages: [], - error: false, - loading: false, - }; + if (props.data !== null) { + header = props.data[0].map((item) => { + return ( + {item} + ); + }); + props.data.shift(); } - render() { - let header = []; - - if (this.props.data !== null) { - header = this.props.data[0].map((item) => { - return ( - {item} - ); - }); - this.props.data.shift(); - } - - return ( -
    -

    - Post Retrofit Balance Sheet -

    - - - - {header} - - - -
    -
    - ); - } -} + return ( +
    +

    + Post Retrofit Balance Sheet +

    + + + + {header} + + + +
    +
    + ); +}; PostRetrofitBalanceSheet.propTypes = { blockStyle: PropTypes.string, diff --git a/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js b/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js index 4d6f59ca..c949d896 100644 --- a/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js +++ b/src/components/Blocnote/PreliminaryFinance/PostRetrofitIncomeStatement.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { Table, @@ -6,46 +6,34 @@ import { import TableContent from './TableContent'; -class PostRetrofitIncomeStatement extends Component { - constructor(props) { - super(props); +const PostRetrofitIncomeStatement = (props) => { + let header = []; - this.state = { - successMessages: [], - error: false, - loading: false, - }; + if (props.data !== null) { + header = props.data[0].map((item) => { + return ( + {item} + ); + }); + props.data.shift(); } - render() { - let header = []; - - if (this.props.data !== null) { - header = this.props.data[0].map((item) => { - return ( - {item} - ); - }); - this.props.data.shift(); - } - - return ( -
    -

    - Post Retrofit Income Statement -

    - - - - {header} - - - -
    -
    - ); - } -} + return ( +
    +

    + Post Retrofit Income Statement +

    + + + + {header} + + + +
    +
    + ); +}; PostRetrofitIncomeStatement.propTypes = { blockStyle: PropTypes.string, diff --git a/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js index 59d50dc4..cde94856 100644 --- a/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js +++ b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitBalanceSheet.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { Table, @@ -6,46 +6,34 @@ import { import TableContent from './TableContent'; -class PriorRetrofitBalanceSheet extends Component { - constructor(props) { - super(props); +const PriorRetrofitBalanceSheet = (props) => { + let header = []; - this.state = { - successMessages: [], - error: false, - loading: false, - }; + if (props.data !== null) { + header = props.data[0].map((item) => { + return ( + {item} + ); + }); + props.data.shift(); } - render() { - let header = []; - - if (this.props.data !== null) { - header = this.props.data[0].map((item) => { - return ( - {item} - ); - }); - this.props.data.shift(); - } - - return ( -
    -

    - Prior Retrofit Balance Sheet -

    - - - - {header} - - - -
    -
    - ); - } -} + return ( +
    +

    + Prior Retrofit Balance Sheet +

    + + + + {header} + + + +
    +
    + ); +}; PriorRetrofitBalanceSheet.propTypes = { blockStyle: PropTypes.string, diff --git a/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js index ccf497a2..0a038581 100644 --- a/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js +++ b/src/components/Blocnote/PreliminaryFinance/PriorRetrofitIncomeStatement.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { Table, @@ -6,46 +6,34 @@ import { import TableContent from './TableContent'; -class PriorRetrofitIncomeStatement extends Component { - constructor(props) { - super(props); +const PriorRetrofitIncomeStatement = (props) => { + let header = []; - this.state = { - successMessages: [], - error: false, - loading: false, - }; + if (props.data !== null) { + header = props.data[0].map((item) => { + return ( + {item} + ); + }); + props.data.shift(); } - render() { - let header = []; - - if (this.props.data !== null) { - header = this.props.data[0].map((item) => { - return ( - {item} - ); - }); - this.props.data.shift(); - } - - return ( -
    -

    - Prior Retrofit Income Statement -

    - - - - {header} - - - -
    -
    - ); - } -} + return ( +
    +

    + Prior Retrofit Income Statement +

    + + + + {header} + + + +
    +
    + ); +}; PriorRetrofitIncomeStatement.propTypes = { blockStyle: PropTypes.string, diff --git a/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js b/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js index 7980a7ea..9332a32d 100644 --- a/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js +++ b/src/components/Blocnote/PreliminaryFinance/ProjectEconomics.js @@ -5,11 +5,8 @@ import ProjectEconomicsRow from './ProjectEconomicsRow'; class ProjectEconomics extends Component { constructor(props) { super(props); - this.state = { successMessages: [], - error: false, - loading: false, }; } diff --git a/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js b/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js index 7214bc74..904edc0c 100644 --- a/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js +++ b/src/components/Blocnote/PreliminaryFinance/SavingEstimation.js @@ -11,27 +11,9 @@ class SavingEstimation extends Component { super(props); this.state = { savingEstimation: props.data, - // savingEstimation: this.formatData(props.data), }; } - // formatData = (data) => { - // const savingEstimation = {}; - // Object.keys(data).forEach(key => { - // savingEstimation[key].estimated_savings = String(savingEstimation[key].estimated_savings); - // }); - // return savingEstimation; - // } - - // props.data.map((estimation) => { - // return { - // estimated_savings: String(estimation.estimated_savings), - // utility_type: estimation.utility_type, - // used_before_retrofit: estimation.used_before_retrofit, - // used_after_retrofit: estimation.used_after_retrofit, - // }; - // }), - updRow = (row) => { const newRow = row; const savingEstimation = this.state.savingEstimation; diff --git a/src/components/Blocnote/PreliminaryFinance/TableContent.js b/src/components/Blocnote/PreliminaryFinance/TableContent.js index a230185f..8d0c0b91 100644 --- a/src/components/Blocnote/PreliminaryFinance/TableContent.js +++ b/src/components/Blocnote/PreliminaryFinance/TableContent.js @@ -1,55 +1,42 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; -class TableContent extends Component { - constructor(props) { - super(props); +const TableContent = (props) => { + let rows = []; - this.state = { - successMessages: [], - error: false, - loading: false, - }; - } - - render() { - console.log(this.props.rows); // eslint-disable-line - let rows = []; - - if (this.props.rows !== null) { - rows = this.props.rows.map((items) => { - const cells = items.map((item) => { - let cellValue = item; - if (typeof (item) !== 'string') { - cellValue = Math.round(item * 100) / 100; - cellValue = cellValue.toLocaleString(); - cellValue = `$${cellValue}`; - } - - return ( - - - {cellValue} - - - ); - }); + if (props.rows !== null) { + rows = props.rows.map((items) => { + const cells = items.map((item) => { + let cellValue = item; + if (typeof (item) !== 'string') { + cellValue = Math.round(item * 100) / 100; + cellValue = cellValue.toLocaleString(); + cellValue = `$${cellValue}`; + } return ( - - {cells} - ); + + + {cellValue} + + + ); }); - } - return ( - - {rows} - - ); + return ( + + {cells} + ); + }); } -} + + return ( + + {rows} + + ); +}; TableContent.propTypes = { rows: PropTypes.arrayOf, diff --git a/src/utils/loadTable.js b/src/utils/loadTable.js deleted file mode 100644 index 49f9ee8a..00000000 --- a/src/utils/loadTable.js +++ /dev/null @@ -1,42 +0,0 @@ -function insertGenericRow(rowParent, rowContent, rowCount, style = false) { - const row = rowParent.insertRow(rowCount); - let cell; - if (!style) { - rowContent.forEach((heading, index) => { - cell = row.insertCell(index); - cell.innerHTML = heading; - }); - } else if (style === 'currency/dollar') { - rowContent.forEach((heading, index) => { - cell = row.insertCell(index); - if (Array.isArray(heading)) { - if (heading[0] !== '%') { - cell.innerHTML = ` ${heading[1]} ${heading[0]} `; - } else { - cell.innerHTML = ` ${heading[1]}${heading[0]} `; - } - } else if (typeof (heading) !== 'string') { - const amount = Math.round(heading * 100) / 100; - cell.innerHTML = ` $${amount.toLocaleString()} `; - } else { - cell.innerHTML = ` ${heading} `; - } - }); - } -} - -export function loadTable(componentId, heading, contents, style = false) { - const component = document.querySelector(`#${componentId}`); - component.querySelector('.card-title').innerHTML = heading; - const headings = contents[0]; - const tableHead = component.querySelector(`#${componentId}-table thead`); - tableHead.innerHTML = ''; - insertGenericRow(tableHead, headings); - const tableBody = component.querySelector(`#${componentId}-table tbody`); - tableBody.innerHTML = ''; - const bodyContent = contents.splice(1); - bodyContent.forEach((row, rowIndex) => { - insertGenericRow(tableBody, row, rowIndex, style); - }); -} - -- GitLab