diff --git a/src/App.css b/src/App.css index 055fcbf5b645b5056b09a538e3852202bf58a2a2..d9ec63e0d8525aa0a5be2d09d7513ddfaa81fe0c 100644 --- a/src/App.css +++ b/src/App.css @@ -112,7 +112,7 @@ } .content-wide-element { - font-size: 15px; + font-size: 20px; margin-top: 25px; margin-bottom: 25px; width: 100%; diff --git a/src/App.js b/src/App.js index 3b47e96029739445faab28cf75fd547049a06f1f..6c886eb64d2209e4aa5481f217a008d946e90bea 100644 --- a/src/App.js +++ b/src/App.js @@ -21,7 +21,8 @@ import BuildingOperatingChallenges from './BuildingOperatingChallenges'; import BuildingCoolingSystem from './BuildingCoolingSystem'; import BuildingHeatingSystem from './BuildingHeatingSystem'; import BuildingTypeSubType from './BuildingTypeSubType'; -import BuildingWaterImprovement from './BuildingWaterImprovement'; +import BuildingPastImprovement from './BuildingPastImprovement'; +import BuildingFutureImprovement from './BuildingFutureImprovement'; import { questionTree } from './constants'; import { connect } from 'react-redux'; import { submitContact, submitAnswer, submitBuilding, submitQuestionnaire } from './actions'; @@ -266,10 +267,10 @@ class App extends React.Component { value: '', answerIds: [102, 103, 104, 105, 106, 107, 108, 33, 12], prev: 'buildingHeatingSystem', - next: 'buildingWaterImprovement', + next: 'buildingPastImprovement', }, - buildingWaterImprovement: { - title: 'Any Energy or Water Improvements?', + buildingPastImprovement: { + title: 'Any Energy or Water Improvements in the past 5 years?', questions: [ { id: 18, @@ -424,6 +425,13 @@ class App extends React.Component { answerIds: [1, 2], checked: false, }, + ], + prev: 'buildingCoolingSystem', + next: 'buildingFutureImprovement', + }, + buildingFutureImprovement: { + title: 'Any Energy or Water Improvements within coming year or so?', + questions: [ { id: 35, name: 'newHeatingSystem', @@ -578,9 +586,9 @@ class App extends React.Component { checked: false, }, ], - prev: 'buildingCoolingSystem', + prev: 'buildingPastImprovement', next: 'contact', - }, + } }; } @@ -663,9 +671,9 @@ class App extends React.Component { questions, }); } - // If the survey ID is 2 or 3, set buildingWaterImprovement as prev page for contact + // If the survey ID is 2 or 3, set buildingFutureWaterImprovement as prev page for contact if ([2, 3].includes(this.props.building.data.surveyId) && question === 'buildingNeeds') { - questions['contact'].prev = 'buildingWaterImprovement'; + questions['contact'].prev = 'buildingFutureImprovement'; this.setState({ questions, }); @@ -978,10 +986,15 @@ class App extends React.Component { answer={this.state.questions['buildingCoolingSystem'].value} answerIds={this.state.questions['buildingCoolingSystem'].answerIds} />, - buildingWaterImprovement: , + buildingFutureImprovement: , }; diff --git a/src/BuildingFutureImprovement.js b/src/BuildingFutureImprovement.js new file mode 100644 index 0000000000000000000000000000000000000000..17d2e9cfe591ba0d34d255abe6ab6cc059c5b2a6 --- /dev/null +++ b/src/BuildingFutureImprovement.js @@ -0,0 +1,345 @@ +import React from "react"; +import { Row, Col, Button, Input } from 'reactstrap'; +import './index.css'; +import { yieldExpression } from "@babel/types"; + + +export default class BuildingFutureImprovement extends React.Component { + constructor(props) { + super(props); + this.state = { + form: { + newHeatingSystem: { + questionId: 35, + checked: !(this.props.questions[0].answer === 2 || this.props.questions[0].answer === "No"), + answer: this.props.questions[0].value, + }, + newCoolingSystem: { + questionId: 36, + checked: !(this.props.questions[1].answer === 2 || this.props.questions[1].answer === "No"), + answer: this.props.questions[1].value, + }, + newControl: { questionId: 37, checked: this.props.questions[2].answer === "Yes"}, + convertHeatingFuel: { questionId: 38, checked: this.props.questions[3].answer === "Yes" }, + convertHeatingSystem: { questionId: 39, checked: this.props.questions[4].answer === "Yes" }, + newDomesticHotwaterSystem: { questionId: 40, checked: this.props.questions[5].answer === "Yes" }, + addInsulation: { questionId: 41, checked: this.props.questions[6].answer === "Yes" }, + airSealBuildingEnvelope: { questionId: 42, checked: this.props.questions[7].answer === "Yes" }, + newWindows: { questionId: 43, checked: this.props.questions[8].answer === "Yes" }, + newRoof: { questionId: 44, checked: this.props.questions[9].answer === "Yes" }, + solarPanels: { questionId: 45, checked: this.props.questions[10].answer === "Yes" }, + toilets: { questionId: 46, checked: this.props.questions[11].answer === "Yes" }, + lowFlowShowerheadsFaucets: { questionId: 47, checked: this.props.questions[12].answer === "Yes" }, + ledLighting: { questionId: 48, checked: this.props.questions[13].answer === "Yes" }, + other: { questionId: 49, checked: this.props.questions[14].answer === "Yes" }, + none: { questionId: 50, checked: this.props.questions[15].answer === "Yes" }, + notSure: { questionId: 51, checked: this.props.questions[16].answer === "Yes" } + } + }; + + this.heatingSystemNames = [ + 'Central steam system', + 'Central hydronic (hot water) system', + 'Central forced-air system', + 'Electric baseboard', + 'Individual heat pumps', + 'I don\'t have a heating system', + 'I\'m not sure', + 'Other', + ]; + this.coolingSystemNames = [ + 'Window A/C units', + 'PTAC units', + 'Rooftop air conditioning units', + 'Central chiller plant and fan coil units', + 'Mini split heat pump systems', + 'I don\'t have a cooling system', + 'VRF', + 'Other', + 'I\'m not sure', + ]; + + this.nameMapping = { + 1 : 'Yes', + 2: 'No', + 96: 'Central steam system', + 97: 'Central hydronic (hot water) system', + 98: 'Central forced-air system', + 99: 'Electric baseboard', + 100: 'Individual heat pumps', + 101: 'I don\'t have a heating system', + 33: 'I\'m not sure', + 12: 'Other', + 102: 'Window A/C units', + 103: 'PTAC units', + 104: 'Rooftop air conditioning units', + 105: 'Central chiller plant and fan coil units', + 106: 'Mini split heat pump systems', + 107: 'I don\'t have a cooling system', + 108: 'VRF', + }; + } + + prevQuestion = () => { + this.props.prevQuestion('buildingFutureImprovement'); + } + + nextQuestion = () => { + const answerIds = this.getAnswerIds(); + this.props.nextQuestion( + 'buildingFutureImprovement', + answerIds.map(answerId => this.nameMapping[answerId]), + answerIds, + ); + } + + getAnswerIds = () => { + const answerIds = []; + Object.values(this.state.form).forEach(question => { + if (question.answer === undefined) { + answerIds.push(question.checked ? 1 : 2); + } else { + answerIds.push(question.answer === "" ? 2 : parseInt(question.answer, 10)); + } + }); + return answerIds; + } + + checkAnswer = (answerName) => { + let form = this.state.form; + form[answerName]['checked'] = !this.state.form[answerName].checked; + form[answerName]['answer'] = this.state.form[answerName].checked ? 1 : 2 + this.setState({ form }); + } + + handleInput = (answerName, event) => { + let form = this.state.form; + form[answerName]['answer'] = event.target.value; + this.setState({ form }); + } + + render() { + let disabled = Object.values(this.state.form).filter(val => val.checked === true).length === 0; + + if(this.state.form.newHeatingSystem.checked && [0, 1].includes(this.state.form.newHeatingSystem.answer)) { + disabled = true; + } + if(this.state.form.newCoolingSystem.checked && [0, 1].includes(this.state.form.newCoolingSystem.answer)) { + disabled = true; + } + + const generalDisabled = Object.keys(this.state.form).filter(key => this.state.form['none'].checked || this.state.form['notSure'].checked).length > 0 ? true : false; + const noneDisabled = Object.keys(this.state.form).filter(key => key !== 'none' && this.state.form[key].checked).length > 0 ? true : false; + const notSureDisabled = Object.keys(this.state.form).filter(key => key !== 'notSure' && this.state.form[key].checked).length > 0 ? true : false; + + return ( +
+
+ Any Energy or Water Improvements within coming year or so? +
+
+ Check all that apply +
+
+ + +
+ this.checkAnswer('newHeatingSystem')} /> Install a new heating system + { + this.state.form.newHeatingSystem.checked && + this.handleInput('newHeatingSystem', e)} + disabled={generalDisabled} + > + + { + this.props.questions[0].answerIds.map((answerId, id) => { + return ( + + ); + }) + } + + } +
+
+ this.checkAnswer('newCoolingSystem')} /> Install a new cooling system + { + this.state.form.newCoolingSystem.checked && + this.handleInput('newCoolingSystem', e)} + disabled={generalDisabled} + > + + { + this.props.questions[1].answerIds.map((answerId, id) => { + return ( + + ); + }) + } + + } +
+
+ this.checkAnswer('newControl')} + disabled={generalDisabled} + /> Install new controls +
+
+ this.checkAnswer('convertHeatingFuel')} + disabled={generalDisabled} + /> Convert Heating Fuel +
+
+ this.checkAnswer('convertHeatingSystem')} + disabled={generalDisabled} + /> Convert Heating System +
+
+ this.checkAnswer('newDomesticHotwaterSystem')} + disabled={generalDisabled} + /> Install new domestic hotwater system +
+
+ this.checkAnswer('addInsulation')} + disabled={generalDisabled} + /> Add Insulation +
+
+ this.checkAnswer('airSealBuildingEnvelope')} + disabled={generalDisabled} + /> Air seal the building envelope +
+
+ this.checkAnswer('newWindows')} + disabled={generalDisabled} + /> Install New Windows +
+ + +
+ this.checkAnswer('newRoof')} + disabled={generalDisabled} + /> Install New roof +
+
+ this.checkAnswer('solarPanels')} + disabled={generalDisabled} + /> Install Solar Panels +
+
+ this.checkAnswer('toilets')} + disabled={generalDisabled} + /> Install Toilets +
+
+ this.checkAnswer('lowFlowShowerheadsFaucets')} + disabled={generalDisabled} + /> Low flow showerheads and faucets +
+
+ this.checkAnswer('ledLighting')} + disabled={generalDisabled} + /> Install LED lighting +
+
+ this.checkAnswer('other')} + disabled={generalDisabled} + /> Other +
+
+ this.checkAnswer('none')} + disabled={noneDisabled} + /> None +
+
+ this.checkAnswer('notSure')} + disabled={notSureDisabled} + /> I'm not sure +
+ +
+
+ + + + {'<'} Back + + + + + + +
+ ); + } +} diff --git a/src/BuildingFutureWaterImprovement.js b/src/BuildingFutureWaterImprovement.js new file mode 100644 index 0000000000000000000000000000000000000000..135fa35c22b6cc535c410067fb257f379d48f7f7 --- /dev/null +++ b/src/BuildingFutureWaterImprovement.js @@ -0,0 +1,345 @@ +import React from "react"; +import { Row, Col, Button, Input } from 'reactstrap'; +import './index.css'; +import { yieldExpression } from "@babel/types"; + + +export default class BuildingWaterImprovement extends React.Component { + constructor(props) { + super(props); + this.state = { + form: { + newHeatingSystem: { + questionId: 35, + checked: !(this.props.questions[0].answer === 2 || this.props.questions[0].answer === "No"), + answer: this.props.questions[0].value, + }, + newCoolingSystem: { + questionId: 36, + checked: !(this.props.questions[1].answer === 2 || this.props.questions[1].answer === "No"), + answer: this.props.questions[1].value, + }, + newControl: { questionId: 37, checked: this.props.questions[2].answer === "Yes"}, + convertHeatingFuel: { questionId: 38, checked: this.props.questions[3].answer === "Yes" }, + convertHeatingSystem: { questionId: 39, checked: this.props.questions[4].answer === "Yes" }, + newDomesticHotwaterSystem: { questionId: 40, checked: this.props.questions[5].answer === "Yes" }, + addInsulation: { questionId: 41, checked: this.props.questions[6].answer === "Yes" }, + airSealBuildingEnvelope: { questionId: 42, checked: this.props.questions[7].answer === "Yes" }, + newWindows: { questionId: 43, checked: this.props.questions[8].answer === "Yes" }, + newRoof: { questionId: 44, checked: this.props.questions[9].answer === "Yes" }, + solarPanels: { questionId: 45, checked: this.props.questions[10].answer === "Yes" }, + toilets: { questionId: 46, checked: this.props.questions[11].answer === "Yes" }, + lowFlowShowerheadsFaucets: { questionId: 47, checked: this.props.questions[12].answer === "Yes" }, + ledLighting: { questionId: 48, checked: this.props.questions[13].answer === "Yes" }, + other: { questionId: 49, checked: this.props.questions[14].answer === "Yes" }, + none: { questionId: 50, checked: this.props.questions[15].answer === "Yes" }, + notSure: { questionId: 51, checked: this.props.questions[16].answer === "Yes" } + } + }; + + this.heatingSystemNames = [ + 'Central steam system', + 'Central hydronic (hot water) system', + 'Central forced-air system', + 'Electric baseboard', + 'Individual heat pumps', + 'I don\'t have a heating system', + 'I\'m not sure', + 'Other', + ]; + this.coolingSystemNames = [ + 'Window A/C units', + 'PTAC units', + 'Rooftop air conditioning units', + 'Central chiller plant and fan coil units', + 'Mini split heat pump systems', + 'I don\'t have a cooling system', + 'VRF', + 'Other', + 'I\'m not sure', + ]; + + this.nameMapping = { + 1 : 'Yes', + 2: 'No', + 96: 'Central steam system', + 97: 'Central hydronic (hot water) system', + 98: 'Central forced-air system', + 99: 'Electric baseboard', + 100: 'Individual heat pumps', + 101: 'I don\'t have a heating system', + 33: 'I\'m not sure', + 12: 'Other', + 102: 'Window A/C units', + 103: 'PTAC units', + 104: 'Rooftop air conditioning units', + 105: 'Central chiller plant and fan coil units', + 106: 'Mini split heat pump systems', + 107: 'I don\'t have a cooling system', + 108: 'VRF', + }; + } + + prevQuestion = () => { + this.props.prevQuestion('buildingFutureWaterImprovement'); + } + + nextQuestion = () => { + const answerIds = this.getAnswerIds(); + this.props.nextQuestion( + 'buildingFutureWaterImprovement', + answerIds.map(answerId => this.nameMapping[answerId]), + answerIds, + ); + } + + getAnswerIds = () => { + const answerIds = []; + Object.values(this.state.form).forEach(question => { + if (question.answer === undefined) { + answerIds.push(question.checked ? 1 : 2); + } else { + answerIds.push(question.answer === "" ? 2 : parseInt(question.answer, 10)); + } + }); + return answerIds; + } + + checkAnswer = (answerName) => { + let form = this.state.form; + form[answerName]['checked'] = !this.state.form[answerName].checked; + form[answerName]['answer'] = this.state.form[answerName].checked ? 1 : 2 + this.setState({ form }); + } + + handleInput = (answerName, event) => { + let form = this.state.form; + form[answerName]['answer'] = event.target.value; + this.setState({ form }); + } + + render() { + let disabled = Object.values(this.state.form).filter(val => val.checked === true).length === 0; + + if(this.state.form.newHeatingSystem.checked && [0, 1].includes(this.state.form.newHeatingSystem.answer)) { + disabled = true; + } + if(this.state.form.newCoolingSystem.checked && [0, 1].includes(this.state.form.newCoolingSystem.answer)) { + disabled = true; + } + + const generalDisabled = Object.keys(this.state.form).filter(key => this.state.form['none'].checked || this.state.form['notSure'].checked).length > 0 ? true : false; + const noneDisabled = Object.keys(this.state.form).filter(key => key !== 'none' && this.state.form[key].checked).length > 0 ? true : false; + const notSureDisabled = Object.keys(this.state.form).filter(key => key !== 'notSure' && this.state.form[key].checked).length > 0 ? true : false; + + return ( +
+
+ Any Energy or Water Improvements within coming year or so? +
+
+ Check all that apply +
+
+ + +
+ this.checkAnswer('newHeatingSystem')} /> Install a new heating system + { + this.state.form.newHeatingSystem.checked && + this.handleInput('newHeatingSystem', e)} + disabled={generalDisabled} + > + + { + this.props.questions[17].answerIds.map((answerId, id) => { + return ( + + ); + }) + } + + } +
+
+ this.checkAnswer('newCoolingSystem')} /> Install a new cooling system + { + this.state.form.newCoolingSystem.checked && + this.handleInput('newCoolingSystem', e)} + disabled={generalDisabled} + > + + { + this.props.questions[18].answerIds.map((answerId, id) => { + return ( + + ); + }) + } + + } +
+
+ this.checkAnswer('newControl')} + disabled={generalDisabled} + /> Install new controls +
+
+ this.checkAnswer('convertHeatingFuel')} + disabled={generalDisabled} + /> Convert Heating Fuel +
+
+ this.checkAnswer('convertHeatingSystem')} + disabled={generalDisabled} + /> Convert Heating System +
+
+ this.checkAnswer('newDomesticHotwaterSystem')} + disabled={generalDisabled} + /> Install new domestic hotwater system +
+
+ this.checkAnswer('addInsulation')} + disabled={generalDisabled} + /> Add Insulation +
+
+ this.checkAnswer('airSealBuildingEnvelope')} + disabled={generalDisabled} + /> Air seal the building envelope +
+
+ this.checkAnswer('newWindows')} + disabled={generalDisabled} + /> Install New Windows +
+ + +
+ this.checkAnswer('newRoof')} + disabled={generalDisabled} + /> Install New roof +
+
+ this.checkAnswer('solarPanels')} + disabled={generalDisabled} + /> Install Solar Panels +
+
+ this.checkAnswer('toilets')} + disabled={generalDisabled} + /> Install Toilets +
+
+ this.checkAnswer('lowFlowShowerheadsFaucets')} + disabled={generalDisabled} + /> Low flow showerheads and faucets +
+
+ this.checkAnswer('ledLighting')} + disabled={generalDisabled} + /> Install LED lighting +
+
+ this.checkAnswer('other')} + disabled={generalDisabled} + /> Other +
+
+ this.checkAnswer('none')} + disabled={noneDisabled} + /> None +
+
+ this.checkAnswer('notSure')} + disabled={notSureDisabled} + /> I'm not sure +
+ +
+
+ + + + {'<'} Back + + + + + + +
+ ); + } +} diff --git a/src/BuildingPastImprovement.js b/src/BuildingPastImprovement.js new file mode 100644 index 0000000000000000000000000000000000000000..c58bd90c81b58204274fce3462a866b1f7967b53 --- /dev/null +++ b/src/BuildingPastImprovement.js @@ -0,0 +1,354 @@ +import React from "react"; +import { Row, Col, Button, Input } from 'reactstrap'; +import './index.css'; +import { yieldExpression } from "@babel/types"; + + +export default class BuildingPastImprovement extends React.Component { + constructor(props) { + super(props); + this.state = { + form: { + newHeatingSystem: { + questionId: 18, + checked: !(this.props.questions[0].answer === 2 || this.props.questions[0].answer === "No"), + answer: this.props.questions[0].value, + }, + newCoolingSystem: { + questionId: 19, + checked: !(this.props.questions[1].answer === 2 || this.props.questions[1].answer === "No"), + answer: this.props.questions[1].value, + }, + newControl: { questionId: 20, checked: this.props.questions[2].answer === "Yes" }, + convertHeatingFuel: { questionId: 21, checked: this.props.questions[3].answer === "Yes" }, + convertHeatingSystem: { questionId: 22, checked: this.props.questions[4].answer === "Yes" }, + newDomesticHotwaterSystem: { questionId: 23, checked: this.props.questions[5].answer === "Yes" }, + addInsulation: { questionId: 24, checked: this.props.questions[6].answer === "Yes" }, + airSealBuildingEnvelope: { questionId: 25, checked: this.props.questions[7].answer === "Yes" }, + newWindows: { questionId: 26, checked: this.props.questions[8].answer === "Yes" }, + newRoof: { questionId: 27, checked: this.props.questions[9].answer === "Yes" }, + solarPanels: { questionId: 28, checked: this.props.questions[10].answer === "Yes" }, + toilets: { questionId: 29, checked: this.props.questions[11].answer === "Yes" }, + lowFlowShowerheadsFaucets: { questionId: 30, checked: this.props.questions[12].answer === "Yes" }, + ledLighting: { questionId: 31, checked: this.props.questions[13].answer === "Yes" }, + other: { questionId: 32, checked: this.props.questions[14].answer === "Yes" }, + none: { questionId: 33, checked: this.props.questions[15].answer === "Yes" }, + notSure: { questionId: 34, checked: this.props.questions[16].answer === "Yes" } + }, + }; + + this.heatingSystemNames = [ + 'Central steam system', + 'Central hydronic (hot water) system', + 'Central forced-air system', + 'Electric baseboard', + 'Individual heat pumps', + 'I don\'t have a heating system', + 'I\'m not sure', + 'Other', + ]; + this.coolingSystemNames = [ + 'Window A/C units', + 'PTAC units', + 'Rooftop air conditioning units', + 'Central chiller plant and fan coil units', + 'Mini split heat pump systems', + 'I don\'t have a cooling system', + 'VRF', + 'Other', + 'I\'m not sure', + ]; + + this.nameMapping = { + 1 : 'Yes', + 2: 'No', + 96: 'Central steam system', + 97: 'Central hydronic (hot water) system', + 98: 'Central forced-air system', + 99: 'Electric baseboard', + 100: 'Individual heat pumps', + 101: 'I don\'t have a heating system', + 33: 'I\'m not sure', + 12: 'Other', + 102: 'Window A/C units', + 103: 'PTAC units', + 104: 'Rooftop air conditioning units', + 105: 'Central chiller plant and fan coil units', + 106: 'Mini split heat pump systems', + 107: 'I don\'t have a cooling system', + 108: 'VRF', + }; + } + + prevQuestion = () => { + this.props.prevQuestion('buildingPastImprovement'); + } + + nextQuestion = () => { + const answerIds = this.getAnswerIds(); + this.props.nextQuestion( + 'buildingPastImprovement', + answerIds.map(answerId => this.nameMapping[answerId]), + answerIds, + ); + } + + getAnswerIds = () => { + const answerIds = []; + Object.values(this.state.form).forEach(question => { + if (question.answer === undefined) { + answerIds.push(question.checked ? 1 : 2); + } else { + answerIds.push(question.answer === "" ? 2 : parseInt(question.answer, 10)); + } + }); + return answerIds; + } + + checkAnswer = (answerName) => { + let form = this.state.form; + form[answerName]['checked'] = !this.state.form[answerName].checked; + form[answerName]['answer'] = this.state.form[answerName].checked ? 1 : 2; + this.setState({ form }); + } + + handleInput = (answerName, event) => { + let form = this.state.form; + form[answerName]['answer'] = event.target.value; + this.setState({ form }); + } + + render() { + let disabled = Object.values(this.state.form).filter(val => val.checked === true).length === 0; + + if(this.state.form.newHeatingSystem.checked && [0, 1].includes(this.state.form.newHeatingSystem.answer)) { + disabled = true; + } + if(this.state.form.newCoolingSystem.checked && [0, 1].includes(this.state.form.newCoolingSystem.answer)) { + disabled = true; + } + + const generalDisabled = Object.keys(this.state.form).filter(key => this.state.form['none'].checked || this.state.form['notSure'].checked).length > 0 ? true : false; + const noneDisabled = Object.keys(this.state.form).filter(key => key !== 'none' && this.state.form[key].checked).length > 0 ? true : false; + const notSureDisabled = Object.keys(this.state.form).filter(key => key !== 'notSure' && this.state.form[key].checked).length > 0 ? true : false; + + return ( +
+
+ Any Energy or Water Improvements in the past 5 years? +
+
+ Check all that apply +
+
+ + +
+ this.checkAnswer('newHeatingSystem')} + disabled={generalDisabled} + /> + Installed a new heating system + { + this.state.form.newHeatingSystem.checked && + this.handleInput('newHeatingSystem', e)} + > + + { + this.props.questions[0].answerIds.map((answerId, id) => { + return ( + + ); + }) + } + + } +
+
+ this.checkAnswer('newCoolingSystem')} + disabled={generalDisabled} + /> Installed a new cooling system + { + this.state.form.newCoolingSystem.checked && + this.handleInput('newCoolingSystem', e)} + > + + { + this.props.questions[1].answerIds.map((answerId, id) => { + return ( + + ); + }) + } + + } +
+
+ this.checkAnswer('newControl')} + disabled={generalDisabled} + /> Installed new controls +
+
+ this.checkAnswer('convertHeatingFuel')} + disabled={generalDisabled} + /> Converted Heating Fuel +
+
+ this.checkAnswer('convertHeatingSystem')} + disabled={generalDisabled} + /> Converted Heating System +
+
+ this.checkAnswer('newDomesticHotwaterSystem')} + disabled={generalDisabled} + /> Installed new domestic hotwater system +
+
+ this.checkAnswer('addInsulation')} + disabled={generalDisabled} + /> Added Insulation +
+
+ this.checkAnswer('airSealBuildingEnvelope')} + disabled={generalDisabled} + /> Air sealed the building envelope +
+
+ this.checkAnswer('newWindows')} + disabled={generalDisabled} + /> Installed New Windows +
+ + +
+ this.checkAnswer('newRoof')} + disabled={generalDisabled} + /> Installed New roof +
+
+ this.checkAnswer('solarPanels')} + disabled={generalDisabled} + /> Installed New Solar Panels +
+
+ this.checkAnswer('toilets')} + disabled={generalDisabled} + /> Installed Toilets +
+
+ this.checkAnswer('lowFlowShowerheadsFaucets')} + disabled={generalDisabled} + /> Installed Low flow showerheads and faucets +
+
+ this.checkAnswer('ledLighting')} + disabled={generalDisabled} + /> Installed LED lighting +
+
+ this.checkAnswer('other')} + disabled={generalDisabled} + /> Other +
+
+ this.checkAnswer('none')} + disabled={noneDisabled} + /> None +
+
+ this.checkAnswer('notSure')} + disabled={notSureDisabled} + /> I'm not sure +
+ +
+
+ + + + {'<'} Back + + + + + + +
+ ); + } +} diff --git a/src/BuildingPastWaterImprovement.js b/src/BuildingPastWaterImprovement.js new file mode 100644 index 0000000000000000000000000000000000000000..c4ae58b7511c2d003b149a511bf3de0e2ee78530 --- /dev/null +++ b/src/BuildingPastWaterImprovement.js @@ -0,0 +1,354 @@ +import React from "react"; +import { Row, Col, Button, Input } from 'reactstrap'; +import './index.css'; +import { yieldExpression } from "@babel/types"; + + +export default class BuildingWaterImprovement extends React.Component { + constructor(props) { + super(props); + this.state = { + form: { + newHeatingSystem: { + questionId: 18, + checked: !(this.props.questions[0].answer === 2 || this.props.questions[0].answer === "No"), + answer: this.props.questions[0].value, + }, + newCoolingSystem: { + questionId: 19, + checked: !(this.props.questions[1].answer === 2 || this.props.questions[1].answer === "No"), + answer: this.props.questions[1].value, + }, + newControl: { questionId: 20, checked: this.props.questions[2].answer === "Yes" }, + convertHeatingFuel: { questionId: 21, checked: this.props.questions[3].answer === "Yes" }, + convertHeatingSystem: { questionId: 22, checked: this.props.questions[4].answer === "Yes" }, + newDomesticHotwaterSystem: { questionId: 23, checked: this.props.questions[5].answer === "Yes" }, + addInsulation: { questionId: 24, checked: this.props.questions[6].answer === "Yes" }, + airSealBuildingEnvelope: { questionId: 25, checked: this.props.questions[7].answer === "Yes" }, + newWindows: { questionId: 26, checked: this.props.questions[8].answer === "Yes" }, + newRoof: { questionId: 27, checked: this.props.questions[9].answer === "Yes" }, + solarPanels: { questionId: 28, checked: this.props.questions[10].answer === "Yes" }, + toilets: { questionId: 29, checked: this.props.questions[11].answer === "Yes" }, + lowFlowShowerheadsFaucets: { questionId: 30, checked: this.props.questions[12].answer === "Yes" }, + ledLighting: { questionId: 31, checked: this.props.questions[13].answer === "Yes" }, + other: { questionId: 32, checked: this.props.questions[14].answer === "Yes" }, + none: { questionId: 33, checked: this.props.questions[15].answer === "Yes" }, + notSure: { questionId: 34, checked: this.props.questions[16].answer === "Yes" } + }, + }; + + this.heatingSystemNames = [ + 'Central steam system', + 'Central hydronic (hot water) system', + 'Central forced-air system', + 'Electric baseboard', + 'Individual heat pumps', + 'I don\'t have a heating system', + 'I\'m not sure', + 'Other', + ]; + this.coolingSystemNames = [ + 'Window A/C units', + 'PTAC units', + 'Rooftop air conditioning units', + 'Central chiller plant and fan coil units', + 'Mini split heat pump systems', + 'I don\'t have a cooling system', + 'VRF', + 'Other', + 'I\'m not sure', + ]; + + this.nameMapping = { + 1 : 'Yes', + 2: 'No', + 96: 'Central steam system', + 97: 'Central hydronic (hot water) system', + 98: 'Central forced-air system', + 99: 'Electric baseboard', + 100: 'Individual heat pumps', + 101: 'I don\'t have a heating system', + 33: 'I\'m not sure', + 12: 'Other', + 102: 'Window A/C units', + 103: 'PTAC units', + 104: 'Rooftop air conditioning units', + 105: 'Central chiller plant and fan coil units', + 106: 'Mini split heat pump systems', + 107: 'I don\'t have a cooling system', + 108: 'VRF', + }; + } + + prevQuestion = () => { + this.props.prevQuestion('buildingPastWaterImprovement'); + } + + nextQuestion = () => { + const answerIds = this.getAnswerIds(); + this.props.nextQuestion( + 'buildingPastWaterImprovement', + answerIds.map(answerId => this.nameMapping[answerId]), + answerIds, + ); + } + + getAnswerIds = () => { + const answerIds = []; + Object.values(this.state.form).forEach(question => { + if (question.answer === undefined) { + answerIds.push(question.checked ? 1 : 2); + } else { + answerIds.push(question.answer === "" ? 2 : parseInt(question.answer, 10)); + } + }); + return answerIds; + } + + checkAnswer = (answerName) => { + let form = this.state.form; + form[answerName]['checked'] = !this.state.form[answerName].checked; + form[answerName]['answer'] = this.state.form[answerName].checked ? 1 : 2; + this.setState({ form }); + } + + handleInput = (answerName, event) => { + let form = this.state.form; + form[answerName]['answer'] = event.target.value; + this.setState({ form }); + } + + render() { + let disabled = Object.values(this.state.form).filter(val => val.checked === true).length === 0; + + if(this.state.form.newHeatingSystem.checked && [0, 1].includes(this.state.form.newHeatingSystem.answer)) { + disabled = true; + } + if(this.state.form.newCoolingSystem.checked && [0, 1].includes(this.state.form.newCoolingSystem.answer)) { + disabled = true; + } + + const generalDisabled = Object.keys(this.state.form).filter(key => this.state.form['none'].checked || this.state.form['notSure'].checked).length > 0 ? true : false; + const noneDisabled = Object.keys(this.state.form).filter(key => key !== 'none' && this.state.form[key].checked).length > 0 ? true : false; + const notSureDisabled = Object.keys(this.state.form).filter(key => key !== 'notSure' && this.state.form[key].checked).length > 0 ? true : false; + + return ( +
+
+ Any Energy or Water Improvements in the past 5 years? +
+
+ Check all that apply +
+
+ + +
+ this.checkAnswer('newHeatingSystem')} + disabled={generalDisabled} + /> + Installed a new heating system + { + this.state.form.newHeatingSystem.checked && + this.handleInput('newHeatingSystem', e)} + > + + { + this.props.questions[0].answerIds.map((answerId, id) => { + return ( + + ); + }) + } + + } +
+
+ this.checkAnswer('newCoolingSystem')} + disabled={generalDisabled} + /> Installed a new cooling system + { + this.state.form.newCoolingSystem.checked && + this.handleInput('newCoolingSystem', e)} + > + + { + this.props.questions[1].answerIds.map((answerId, id) => { + return ( + + ); + }) + } + + } +
+
+ this.checkAnswer('newControl')} + disabled={generalDisabled} + /> Installed new controls +
+
+ this.checkAnswer('convertHeatingFuel')} + disabled={generalDisabled} + /> Converted Heating Fuel +
+
+ this.checkAnswer('convertHeatingSystem')} + disabled={generalDisabled} + /> Converted Heating System +
+
+ this.checkAnswer('newDomesticHotwaterSystem')} + disabled={generalDisabled} + /> Installed new domestic hotwater system +
+
+ this.checkAnswer('addInsulation')} + disabled={generalDisabled} + /> Added Insulation +
+
+ this.checkAnswer('airSealBuildingEnvelope')} + disabled={generalDisabled} + /> Air sealed the building envelope +
+
+ this.checkAnswer('newWindows')} + disabled={generalDisabled} + /> Installed New Windows +
+ + +
+ this.checkAnswer('newRoof')} + disabled={generalDisabled} + /> Installed New roof +
+
+ this.checkAnswer('solarPanels')} + disabled={generalDisabled} + /> Installed New Solar Panels +
+
+ this.checkAnswer('toilets')} + disabled={generalDisabled} + /> Installed Toilets +
+
+ this.checkAnswer('lowFlowShowerheadsFaucets')} + disabled={generalDisabled} + /> Installed Low flow showerheads and faucets +
+
+ this.checkAnswer('ledLighting')} + disabled={generalDisabled} + /> Installed LED lighting +
+
+ this.checkAnswer('other')} + disabled={generalDisabled} + /> Other +
+
+ this.checkAnswer('none')} + disabled={noneDisabled} + /> None +
+
+ this.checkAnswer('notSure')} + disabled={notSureDisabled} + /> I'm not sure +
+ +
+
+ + + + {'<'} Back + + + + + + +
+ ); + } +} diff --git a/src/BuildingWaterImprovement.js b/src/BuildingWaterImprovement.js deleted file mode 100644 index ec591ceb8c71a40c738689c56e0d7c8667b448ea..0000000000000000000000000000000000000000 --- a/src/BuildingWaterImprovement.js +++ /dev/null @@ -1,414 +0,0 @@ -import React from "react"; -import { Row, Col, Button, Input } from 'reactstrap'; -import './index.css'; -import { yieldExpression } from "@babel/types"; - - -export default class BuildingWaterImprovement extends React.Component { - constructor(props) { - super(props); - this.state = { - past: { - newHeatingSystem: { - questionId: 18, - checked: !(this.props.questions[0].answer === 2 || this.props.questions[0].answer === "No"), - answer: this.props.questions[0].value, - }, - newCoolingSystem: { - questionId: 19, - checked: !(this.props.questions[1].answer === 2 || this.props.questions[1].answer === "No"), - answer: this.props.questions[1].value, - }, - newControl: { questionId: 20, checked: this.props.questions[2].answer === "Yes" }, - convertHeatingFuel: { questionId: 21, checked: this.props.questions[3].answer === "Yes" }, - convertHeatingSystem: { questionId: 22, checked: this.props.questions[4].answer === "Yes" }, - newDomesticHotwaterSystem: { questionId: 23, checked: this.props.questions[5].answer === "Yes" }, - addInsulation: { questionId: 24, checked: this.props.questions[6].answer === "Yes" }, - airSealBuildingEnvelope: { questionId: 25, checked: this.props.questions[7].answer === "Yes" }, - newWindows: { questionId: 26, checked: this.props.questions[8].answer === "Yes" }, - newRoof: { questionId: 27, checked: this.props.questions[9].answer === "Yes" }, - solarPanels: { questionId: 28, checked: this.props.questions[10].answer === "Yes" }, - toilets: { questionId: 29, checked: this.props.questions[11].answer === "Yes" }, - lowFlowShowerheadsFaucets: { questionId: 30, checked: this.props.questions[12].answer === "Yes" }, - ledLighting: { questionId: 31, checked: this.props.questions[13].answer === "Yes" }, - other: { questionId: 32, checked: this.props.questions[14].answer === "Yes" }, - none: { questionId: 33, checked: this.props.questions[15].answer === "Yes" }, - notSure: { questionId: 34, checked: this.props.questions[16].answer === "Yes" } - }, - future: { - newHeatingSystem: { - questionId: 35, - checked: !(this.props.questions[17].answer === 2 || this.props.questions[17].answer === "No"), - answer: this.props.questions[17].value, - }, - newCoolingSystem: { - questionId: 36, - checked: !(this.props.questions[18].answer === 2 || this.props.questions[18].answer === "No"), - answer: this.props.questions[18].value, - }, - newControl: { questionId: 37, checked: this.props.questions[19].answer === "Yes"}, - convertHeatingFuel: { questionId: 38, checked: this.props.questions[20].answer === "Yes" }, - convertHeatingSystem: { questionId: 39, checked: this.props.questions[21].answer === "Yes" }, - newDomesticHotwaterSystem: { questionId: 40, checked: this.props.questions[22].answer === "Yes" }, - addInsulation: { questionId: 41, checked: this.props.questions[23].answer === "Yes" }, - airSealBuildingEnvelope: { questionId: 42, checked: this.props.questions[24].answer === "Yes" }, - newWindows: { questionId: 43, checked: this.props.questions[25].answer === "Yes" }, - newRoof: { questionId: 44, checked: this.props.questions[26].answer === "Yes" }, - solarPanels: { questionId: 45, checked: this.props.questions[27].answer === "Yes" }, - toilets: { questionId: 46, checked: this.props.questions[28].answer === "Yes" }, - lowFlowShowerheadsFaucets: { questionId: 47, checked: this.props.questions[29].answer === "Yes" }, - ledLighting: { questionId: 48, checked: this.props.questions[30].answer === "Yes" }, - other: { questionId: 49, checked: this.props.questions[31].answer === "Yes" }, - none: { questionId: 50, checked: this.props.questions[32].answer === "Yes" }, - notSure: { questionId: 51, checked: this.props.questions[33].answer === "Yes" } - }, - }; - - this.heatingSystemNames = [ - 'Central steam system', - 'Central hydronic (hot water) system', - 'Central forced-air system', - 'Electric baseboard', - 'Individual heat pumps', - 'I don\'t have a heating system', - 'I\'m not sure', - 'Other', - ]; - this.coolingSystemNames = [ - 'Window A/C units', - 'PTAC units', - 'Rooftop air conditioning units', - 'Central chiller plant and fan coil units', - 'Mini split heat pump systems', - 'I don\'t have a cooling system', - 'VRF', - 'Other', - 'I\'m not sure', - ]; - - this.nameMapping = { - 1 : 'Yes', - 2: 'No', - 96: 'Central steam system', - 97: 'Central hydronic (hot water) system', - 98: 'Central forced-air system', - 99: 'Electric baseboard', - 100: 'Individual heat pumps', - 101: 'I don\'t have a heating system', - 33: 'I\'m not sure', - 12: 'Other', - 102: 'Window A/C units', - 103: 'PTAC units', - 104: 'Rooftop air conditioning units', - 105: 'Central chiller plant and fan coil units', - 106: 'Mini split heat pump systems', - 107: 'I don\'t have a cooling system', - 108: 'VRF', - }; - } - - prevQuestion = () => { - this.props.prevQuestion('buildingWaterImprovement'); - } - - nextQuestion = () => { - const answerIds = this.getAnswerIds(); - this.props.nextQuestion( - 'buildingWaterImprovement', - answerIds.map(answerId => this.nameMapping[answerId]), - answerIds, - ); - } - - getAnswerIds = () => { - const answerIds = []; - [...Object.values(this.state.past), ...Object.values(this.state.future)].forEach(question => { - if (question.answer === undefined) { - answerIds.push(question.checked ? 1 : 2); - } else { - answerIds.push(question.answer === "" ? 2 : parseInt(question.answer, 10)); - } - }); - return answerIds; - } - - checkAnswer = (pastFuture, answerName) => { - if (pastFuture === 'past') { - let past = this.state.past; - past[answerName]['checked'] = !this.state.past[answerName].checked; - past[answerName]['answer'] = this.state.past[answerName].checked ? 1 : 2 - this.setState({ past }); - } - if (pastFuture === 'future') { - let future = this.state.future; - future[answerName]['checked'] = !this.state.future[answerName].checked; - future[answerName]['answer'] = this.state.future[answerName].checked ? 1 : 2 - this.setState({ future }); - } - } - - handleInput = (pastFuture, answerName, event) => { - if (pastFuture === 'past') { - let past = this.state.past; - past[answerName]['answer'] = event.target.value; - this.setState({ past }); - } - if (pastFuture === 'future') { - let future = this.state.future; - future[answerName]['answer'] = event.target.value; - this.setState({ future }); - } - } - - render() { - let disabled = Object.values(this.state.past).filter(val => val.checked === true).length === 0 || - Object.values(this.state.future).filter(val => val.checked === true).length === 0; - - if(this.state.past.newHeatingSystem.checked && [0, 1].includes(this.state.past.newHeatingSystem.answer)) { - disabled = true; - } - if(this.state.past.newCoolingSystem.checked && [0, 1].includes(this.state.past.newCoolingSystem.answer)) { - disabled = true; - } - if(this.state.future.newHeatingSystem.checked && [0, 1].includes(this.state.future.newHeatingSystem.answer)) { - disabled = true; - } - if(this.state.future.newCoolingSystem.checked && [0, 1].includes(this.state.future.newCoolingSystem.answer)) { - disabled = true; - } - - return ( -
-
- Any Energy or Water Improvements? -
-
- Check all that apply -
-
- - -
- In the past 5 years -
-
- this.checkAnswer('past', 'newHeatingSystem')} /> Installed a new heating system - { - this.state.past.newHeatingSystem.checked && - this.handleInput('past', 'newHeatingSystem', e)} - > - - { - this.props.questions[0].answerIds.map((answerId, id) => { - return ( - - ); - }) - } - - } -
-
- this.checkAnswer('past', 'newCoolingSystem')} /> Installed a new cooling system - { - this.state.past.newCoolingSystem.checked && - this.handleInput('past', 'newCoolingSystem', e)} - > - - { - this.props.questions[1].answerIds.map((answerId, id) => { - return ( - - ); - }) - } - - } -
-
- this.checkAnswer('past', 'newControl')} /> Installed new controls -
-
- this.checkAnswer('past', 'convertHeatingFuel')} /> Converted Heating Fuel -
-
- this.checkAnswer('past', 'convertHeatingSystem')} /> Converted Heating System -
-
- this.checkAnswer('past', 'newDomesticHotwaterSystem')} /> Installed new domestic hotwater system -
-
- this.checkAnswer('past', 'addInsulation')} /> Added Insulation -
-
- this.checkAnswer('past', 'airSealBuildingEnvelope')} /> Air sealed the building envelope -
-
- this.checkAnswer('past', 'newWindows')} /> Installed New Windows -
-
- this.checkAnswer('past', 'newRoof')} /> Installed New roof -
-
- this.checkAnswer('past', 'solarPanels')} /> Installed New Solar Panels -
-
- this.checkAnswer('past', 'toilets')} /> Installed Toilets -
-
- this.checkAnswer('past', 'lowFlowShowerheadsFaucets')} /> Installed Low flow showerheads and faucets -
-
- this.checkAnswer('past', 'ledLighting')} /> Installed LED lighting -
-
- this.checkAnswer('past', 'other')} /> Other -
-
- this.checkAnswer('past', 'none')} /> None -
-
- this.checkAnswer('past', 'notSure')} /> I'm not sure -
- - -
- Within coming year or so -
-
- this.checkAnswer('future', 'newHeatingSystem')} /> Install a new heating system - { - this.state.future.newHeatingSystem.checked && - this.handleInput('future', 'newHeatingSystem', e)} - > - - { - this.props.questions[17].answerIds.map((answerId, id) => { - return ( - - ); - }) - } - - } -
-
- this.checkAnswer('future', 'newCoolingSystem')} /> Install a new cooling system - { - this.state.future.newCoolingSystem.checked && - this.handleInput('future', 'newCoolingSystem', e)} - > - - { - this.props.questions[18].answerIds.map((answerId, id) => { - return ( - - ); - }) - } - - } -
-
- this.checkAnswer('future', 'newControl')} /> Install new controls -
-
- this.checkAnswer('future', 'convertHeatingFuel')} /> Convert Heating Fuel -
-
- this.checkAnswer('future', 'convertHeatingSystem')} /> Convert Heating System -
-
- this.checkAnswer('future', 'newDomesticHotwaterSystem')} /> Install new domestic hotwater system -
-
- this.checkAnswer('future', 'addInsulation')} /> Add Insulation -
-
- this.checkAnswer('future', 'airSealBuildingEnvelope')}/> Air seal the building envelope -
-
- this.checkAnswer('future', 'newWindows')} /> New Windows -
-
- this.checkAnswer('future', 'newRoof')} /> New roof -
-
- this.checkAnswer('future', 'solarPanels')} /> Solar Panels -
-
- this.checkAnswer('future', 'toilets')} /> Toilets -
-
- this.checkAnswer('future', 'lowFlowShowerheadsFaucets')} /> Low flow showerheads and faucets -
-
- this.checkAnswer('future', 'ledLighting')} /> LED lighting -
-
- this.checkAnswer('future', 'other')} /> Other -
-
- this.checkAnswer('future', 'none')} /> None -
-
- this.checkAnswer('future', 'notSure')} /> I'm not sure -
- -
-
- - - - {'<'} Back - - - - - - -
- ); - } -}