From 9bf916e531086c9ae811f76ac07754cc9f28ab49 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Thu, 12 Dec 2019 11:54:26 -0500 Subject: [PATCH 1/5] Separate water improvement question into two separate questions page --- src/App.css | 2 +- src/App.js | 33 +- src/BuildingFutureWaterImprovement.js | 264 ++++++++++++++++ src/BuildingPastWaterImprovement.js | 264 ++++++++++++++++ src/BuildingWaterImprovement.js | 414 -------------------------- 5 files changed, 552 insertions(+), 425 deletions(-) create mode 100644 src/BuildingFutureWaterImprovement.js create mode 100644 src/BuildingPastWaterImprovement.js delete mode 100644 src/BuildingWaterImprovement.js diff --git a/src/App.css b/src/App.css index 055fcbf5b..d9ec63e0d 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 3b47e9602..4eb6e4eab 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 BuildingPastWaterImprovement from './BuildingPastWaterImprovement'; +import BuildingFutureWaterImprovement from './BuildingFutureWaterImprovement'; 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: 'buildingPastWaterImprovement', }, - buildingWaterImprovement: { - title: 'Any Energy or Water Improvements?', + buildingPastWaterImprovement: { + 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: 'buildingFutureWaterImprovement', + }, + buildingFutureWaterImprovement: { + 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: 'buildingPastWaterImprovement', 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 = 'buildingFutureWaterImprovement'; 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: , + buildingFutureWaterImprovement: , }; diff --git a/src/BuildingFutureWaterImprovement.js b/src/BuildingFutureWaterImprovement.js new file mode 100644 index 000000000..654dafff5 --- /dev/null +++ b/src/BuildingFutureWaterImprovement.js @@ -0,0 +1,264 @@ +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; + } + + 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)} + > + + { + 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)} + > + + { + this.props.questions[18].answerIds.map((answerId, id) => { + return ( + + ); + }) + } + + } +
+
+ this.checkAnswer('newControl')} /> Install new controls +
+
+ this.checkAnswer('convertHeatingFuel')} /> Convert Heating Fuel +
+
+ this.checkAnswer('convertHeatingSystem')} /> Convert Heating System +
+
+ this.checkAnswer('newDomesticHotwaterSystem')} /> Install new domestic hotwater system +
+
+ this.checkAnswer('addInsulation')} /> Add Insulation +
+
+ this.checkAnswer('airSealBuildingEnvelope')}/> Air seal the building envelope +
+
+ this.checkAnswer('newWindows')} /> Install New Windows +
+ + +
+ this.checkAnswer('newRoof')} /> Install New roof +
+
+ this.checkAnswer('solarPanels')} /> Install Solar Panels +
+
+ this.checkAnswer('toilets')} /> Install Toilets +
+
+ this.checkAnswer('lowFlowShowerheadsFaucets')} /> Low flow showerheads and faucets +
+
+ this.checkAnswer('ledLighting')} /> Install LED lighting +
+
+ this.checkAnswer('other')} /> Other +
+
+ this.checkAnswer('none')} /> None +
+
+ this.checkAnswer('notSure')} /> I'm not sure +
+ +
+
+ + + + {'<'} Back + + + + + + +
+ ); + } +} diff --git a/src/BuildingPastWaterImprovement.js b/src/BuildingPastWaterImprovement.js new file mode 100644 index 000000000..67dcd3ec5 --- /dev/null +++ b/src/BuildingPastWaterImprovement.js @@ -0,0 +1,264 @@ +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; + } + + return ( +
+
+ Any Energy or Water Improvements in the past 5 years? +
+
+ Check all that apply +
+
+ + +
+ this.checkAnswer('newHeatingSystem')} /> 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')} /> 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')} /> Installed new controls +
+
+ this.checkAnswer('convertHeatingFuel')} /> Converted Heating Fuel +
+
+ this.checkAnswer('convertHeatingSystem')} /> Converted Heating System +
+
+ this.checkAnswer('newDomesticHotwaterSystem')} /> Installed new domestic hotwater system +
+
+ this.checkAnswer('addInsulation')} /> Added Insulation +
+
+ this.checkAnswer('airSealBuildingEnvelope')} /> Air sealed the building envelope +
+
+ this.checkAnswer('newWindows')} /> Installed New Windows +
+ + +
+ this.checkAnswer('newRoof')} /> Installed New roof +
+
+ this.checkAnswer('solarPanels')} /> Installed New Solar Panels +
+
+ this.checkAnswer('toilets')} /> Installed Toilets +
+
+ this.checkAnswer('lowFlowShowerheadsFaucets')} /> Installed Low flow showerheads and faucets +
+
+ this.checkAnswer('ledLighting')} /> Installed LED lighting +
+
+ this.checkAnswer('other')} /> Other +
+
+ this.checkAnswer('none')} /> None +
+
+ this.checkAnswer('notSure')} /> I'm not sure +
+ +
+
+ + + + {'<'} Back + + + + + + +
+ ); + } +} diff --git a/src/BuildingWaterImprovement.js b/src/BuildingWaterImprovement.js deleted file mode 100644 index ec591ceb8..000000000 --- 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 - - - - - - -
- ); - } -} -- GitLab From 00f2a8cc679644e649ebdf3545c6eebd6ba3c765 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Thu, 12 Dec 2019 13:34:58 -0500 Subject: [PATCH 2/5] Disable / Enable checkbox dynamically --- src/BuildingFutureWaterImprovement.js | 111 ++++++++++++++++++++--- src/BuildingPastWaterImprovement.js | 126 ++++++++++++++++++++++---- 2 files changed, 204 insertions(+), 33 deletions(-) diff --git a/src/BuildingFutureWaterImprovement.js b/src/BuildingFutureWaterImprovement.js index 654dafff5..135fa35c2 100644 --- a/src/BuildingFutureWaterImprovement.js +++ b/src/BuildingFutureWaterImprovement.js @@ -128,6 +128,10 @@ export default class BuildingWaterImprovement extends React.Component { 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 (
@@ -148,6 +152,7 @@ export default class BuildingWaterImprovement extends React.Component { className="content-wide-element-input" value={this.state.heatingSystemAnswer} onChange={(e) => this.handleInput('newHeatingSystem', e)} + disabled={generalDisabled} >
- this.checkAnswer('newControl')} /> Install new controls + this.checkAnswer('newControl')} + disabled={generalDisabled} + /> Install new controls
- this.checkAnswer('convertHeatingFuel')} /> Convert Heating Fuel + this.checkAnswer('convertHeatingFuel')} + disabled={generalDisabled} + /> Convert Heating Fuel
- this.checkAnswer('convertHeatingSystem')} /> Convert Heating System + this.checkAnswer('convertHeatingSystem')} + disabled={generalDisabled} + /> Convert Heating System
- this.checkAnswer('newDomesticHotwaterSystem')} /> Install new domestic hotwater system + this.checkAnswer('newDomesticHotwaterSystem')} + disabled={generalDisabled} + /> Install new domestic hotwater system
- this.checkAnswer('addInsulation')} /> Add Insulation + this.checkAnswer('addInsulation')} + disabled={generalDisabled} + /> Add Insulation
- this.checkAnswer('airSealBuildingEnvelope')}/> Air seal the building envelope + this.checkAnswer('airSealBuildingEnvelope')} + disabled={generalDisabled} + /> Air seal the building envelope
- this.checkAnswer('newWindows')} /> Install New Windows + this.checkAnswer('newWindows')} + disabled={generalDisabled} + /> Install New Windows
- this.checkAnswer('newRoof')} /> Install New roof + this.checkAnswer('newRoof')} + disabled={generalDisabled} + /> Install New roof
- this.checkAnswer('solarPanels')} /> Install Solar Panels + this.checkAnswer('solarPanels')} + disabled={generalDisabled} + /> Install Solar Panels
- this.checkAnswer('toilets')} /> Install Toilets + this.checkAnswer('toilets')} + disabled={generalDisabled} + /> Install Toilets
- this.checkAnswer('lowFlowShowerheadsFaucets')} /> Low flow showerheads and faucets + this.checkAnswer('lowFlowShowerheadsFaucets')} + disabled={generalDisabled} + /> Low flow showerheads and faucets
- this.checkAnswer('ledLighting')} /> Install LED lighting + this.checkAnswer('ledLighting')} + disabled={generalDisabled} + /> Install LED lighting
- this.checkAnswer('other')} /> Other + this.checkAnswer('other')} + disabled={generalDisabled} + /> Other
- this.checkAnswer('none')} /> None + this.checkAnswer('none')} + disabled={noneDisabled} + /> None
- this.checkAnswer('notSure')} /> I'm not sure + this.checkAnswer('notSure')} + disabled={notSureDisabled} + /> I'm not sure
diff --git a/src/BuildingPastWaterImprovement.js b/src/BuildingPastWaterImprovement.js index 67dcd3ec5..c4ae58b75 100644 --- a/src/BuildingPastWaterImprovement.js +++ b/src/BuildingPastWaterImprovement.js @@ -34,7 +34,7 @@ export default class BuildingWaterImprovement extends React.Component { 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 = [ @@ -128,6 +128,10 @@ export default class BuildingWaterImprovement extends React.Component { 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 (
@@ -140,7 +144,13 @@ export default class BuildingWaterImprovement extends React.Component {
- this.checkAnswer('newHeatingSystem')} /> Installed a new heating system + this.checkAnswer('newHeatingSystem')} + disabled={generalDisabled} + /> + Installed a new heating system { this.state.form.newHeatingSystem.checked &&
- this.checkAnswer('newCoolingSystem')} /> Installed a new cooling system + this.checkAnswer('newCoolingSystem')} + disabled={generalDisabled} + /> Installed a new cooling system { this.state.form.newCoolingSystem.checked &&
- this.checkAnswer('newControl')} /> Installed new controls + this.checkAnswer('newControl')} + disabled={generalDisabled} + /> Installed new controls
- this.checkAnswer('convertHeatingFuel')} /> Converted Heating Fuel + this.checkAnswer('convertHeatingFuel')} + disabled={generalDisabled} + /> Converted Heating Fuel
- this.checkAnswer('convertHeatingSystem')} /> Converted Heating System + this.checkAnswer('convertHeatingSystem')} + disabled={generalDisabled} + /> Converted Heating System
- this.checkAnswer('newDomesticHotwaterSystem')} /> Installed new domestic hotwater system + this.checkAnswer('newDomesticHotwaterSystem')} + disabled={generalDisabled} + /> Installed new domestic hotwater system
- this.checkAnswer('addInsulation')} /> Added Insulation + this.checkAnswer('addInsulation')} + disabled={generalDisabled} + /> Added Insulation
- this.checkAnswer('airSealBuildingEnvelope')} /> Air sealed the building envelope + this.checkAnswer('airSealBuildingEnvelope')} + disabled={generalDisabled} + /> Air sealed the building envelope
- this.checkAnswer('newWindows')} /> Installed New Windows + this.checkAnswer('newWindows')} + disabled={generalDisabled} + /> Installed New Windows
- this.checkAnswer('newRoof')} /> Installed New roof + this.checkAnswer('newRoof')} + disabled={generalDisabled} + /> Installed New roof
- this.checkAnswer('solarPanels')} /> Installed New Solar Panels + this.checkAnswer('solarPanels')} + disabled={generalDisabled} + /> Installed New Solar Panels
- this.checkAnswer('toilets')} /> Installed Toilets + this.checkAnswer('toilets')} + disabled={generalDisabled} + /> Installed Toilets
- this.checkAnswer('lowFlowShowerheadsFaucets')} /> Installed Low flow showerheads and faucets + this.checkAnswer('lowFlowShowerheadsFaucets')} + disabled={generalDisabled} + /> Installed Low flow showerheads and faucets
- this.checkAnswer('ledLighting')} /> Installed LED lighting + this.checkAnswer('ledLighting')} + disabled={generalDisabled} + /> Installed LED lighting
- this.checkAnswer('other')} /> Other + this.checkAnswer('other')} + disabled={generalDisabled} + /> Other
- this.checkAnswer('none')} /> None + this.checkAnswer('none')} + disabled={noneDisabled} + /> None
- this.checkAnswer('notSure')} /> I'm not sure + this.checkAnswer('notSure')} + disabled={notSureDisabled} + /> I'm not sure
-- GitLab From 35d2b7a73ddda34bc7e00c40efd5e2be100c0f98 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Thu, 12 Dec 2019 15:04:52 -0500 Subject: [PATCH 3/5] Rename building improvement components --- src/App.js | 24 +-- src/BuildingFutureImprovement.js | 345 ++++++++++++++++++++++++++++++ src/BuildingPastImprovement.js | 354 +++++++++++++++++++++++++++++++ 3 files changed, 711 insertions(+), 12 deletions(-) create mode 100644 src/BuildingFutureImprovement.js create mode 100644 src/BuildingPastImprovement.js diff --git a/src/App.js b/src/App.js index 4eb6e4eab..6c886eb64 100644 --- a/src/App.js +++ b/src/App.js @@ -21,8 +21,8 @@ import BuildingOperatingChallenges from './BuildingOperatingChallenges'; import BuildingCoolingSystem from './BuildingCoolingSystem'; import BuildingHeatingSystem from './BuildingHeatingSystem'; import BuildingTypeSubType from './BuildingTypeSubType'; -import BuildingPastWaterImprovement from './BuildingPastWaterImprovement'; -import BuildingFutureWaterImprovement from './BuildingFutureWaterImprovement'; +import BuildingPastImprovement from './BuildingPastImprovement'; +import BuildingFutureImprovement from './BuildingFutureImprovement'; import { questionTree } from './constants'; import { connect } from 'react-redux'; import { submitContact, submitAnswer, submitBuilding, submitQuestionnaire } from './actions'; @@ -267,9 +267,9 @@ class App extends React.Component { value: '', answerIds: [102, 103, 104, 105, 106, 107, 108, 33, 12], prev: 'buildingHeatingSystem', - next: 'buildingPastWaterImprovement', + next: 'buildingPastImprovement', }, - buildingPastWaterImprovement: { + buildingPastImprovement: { title: 'Any Energy or Water Improvements in the past 5 years?', questions: [ { @@ -427,9 +427,9 @@ class App extends React.Component { }, ], prev: 'buildingCoolingSystem', - next: 'buildingFutureWaterImprovement', + next: 'buildingFutureImprovement', }, - buildingFutureWaterImprovement: { + buildingFutureImprovement: { title: 'Any Energy or Water Improvements within coming year or so?', questions: [ { @@ -586,7 +586,7 @@ class App extends React.Component { checked: false, }, ], - prev: 'buildingPastWaterImprovement', + prev: 'buildingPastImprovement', next: 'contact', } }; @@ -673,7 +673,7 @@ class App extends React.Component { } // 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 = 'buildingFutureWaterImprovement'; + questions['contact'].prev = 'buildingFutureImprovement'; this.setState({ questions, }); @@ -986,15 +986,15 @@ class App extends React.Component { answer={this.state.questions['buildingCoolingSystem'].value} answerIds={this.state.questions['buildingCoolingSystem'].answerIds} />, - buildingPastWaterImprovement: , - buildingFutureWaterImprovement: , }; diff --git a/src/BuildingFutureImprovement.js b/src/BuildingFutureImprovement.js new file mode 100644 index 000000000..79e6eb493 --- /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('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 000000000..227c81ad8 --- /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('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 + + + + + + +
+ ); + } +} -- GitLab From 8e41193bb0360c10dde953c8b61ae8797c16a18d Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Thu, 12 Dec 2019 15:24:31 -0500 Subject: [PATCH 4/5] Remove water wording from the code --- src/BuildingFutureImprovement.js | 4 ++-- src/BuildingPastImprovement.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/BuildingFutureImprovement.js b/src/BuildingFutureImprovement.js index 79e6eb493..a9e5283c2 100644 --- a/src/BuildingFutureImprovement.js +++ b/src/BuildingFutureImprovement.js @@ -81,13 +81,13 @@ export default class BuildingFutureImprovement extends React.Component { } prevQuestion = () => { - this.props.prevQuestion('buildingFutureWaterImprovement'); + this.props.prevQuestion('buildingFutureImprovement'); } nextQuestion = () => { const answerIds = this.getAnswerIds(); this.props.nextQuestion( - 'buildingFutureWaterImprovement', + 'buildingFutureImprovement', answerIds.map(answerId => this.nameMapping[answerId]), answerIds, ); diff --git a/src/BuildingPastImprovement.js b/src/BuildingPastImprovement.js index 227c81ad8..c58bd90c8 100644 --- a/src/BuildingPastImprovement.js +++ b/src/BuildingPastImprovement.js @@ -81,13 +81,13 @@ export default class BuildingPastImprovement extends React.Component { } prevQuestion = () => { - this.props.prevQuestion('buildingPastWaterImprovement'); + this.props.prevQuestion('buildingPastImprovement'); } nextQuestion = () => { const answerIds = this.getAnswerIds(); this.props.nextQuestion( - 'buildingPastWaterImprovement', + 'buildingPastImprovement', answerIds.map(answerId => this.nameMapping[answerId]), answerIds, ); -- GitLab From 70a55abbd8f78020371deeec37a95152bd2fb774 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Thu, 12 Dec 2019 15:28:00 -0500 Subject: [PATCH 5/5] Update question index for second improvement question --- src/BuildingFutureImprovement.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BuildingFutureImprovement.js b/src/BuildingFutureImprovement.js index a9e5283c2..17d2e9cfe 100644 --- a/src/BuildingFutureImprovement.js +++ b/src/BuildingFutureImprovement.js @@ -158,7 +158,7 @@ export default class BuildingFutureImprovement extends React.Component { -- Please Select -- { - this.props.questions[17].answerIds.map((answerId, id) => { + this.props.questions[0].answerIds.map((answerId, id) => { return ( { - this.props.questions[18].answerIds.map((answerId, id) => { + this.props.questions[1].answerIds.map((answerId, id) => { return (