From e1ff5b64cf495cee422e4953ea40e1a011023b14 Mon Sep 17 00:00:00 2001 From: Anna Sidwell Date: Mon, 26 Nov 2018 23:56:58 +0000 Subject: [PATCH] Make conditional form logic more terse --- apps/map/templates/map/form-case_study.html | 134 ++++++++------------ 1 file changed, 50 insertions(+), 84 deletions(-) diff --git a/apps/map/templates/map/form-case_study.html b/apps/map/templates/map/form-case_study.html index 1be9d25..e1c276a 100644 --- a/apps/map/templates/map/form-case_study.html +++ b/apps/map/templates/map/form-case_study.html @@ -58,16 +58,23 @@ $(thingToShow).hide() } } + + // Constructor function to make list below more terse + function show(condition, selector) { + return { showHide: selector, visible: condition } + } + // Returns true if checkbox is checked function isChecked(elem) { return elem.checked } // Returns a function that returns true if its parameter matches `condition` - function isJust(condition) { + function isEqual(condition) { return elem => elem.value === condition } + // Inverse of the above function isNot(condition) { return elem => elem.value !== condition } @@ -82,95 +89,51 @@ // TODO: Move this knowledge out of the template // - var showHideFields = [ + var showHideFields = { // 'Basic information' tab - { - control: 'location_context', - showHide: '#div_id_type_of_ecosystem', - visible: isJust('RUR') // Rural - }, + 'location_context': [ + show(isEqual('RUR'), '#div_id_type_of_ecosystem'), // Rural + ], // Technical/economic tab - { - control: 'sector_of_economy', - showHide: '.power_generation_questions', - visible: isJust('RN') // Energy generation project - }, - { - control: 'generation_technology', - showHide: '#div_id_biomass_detail', - visible: isJust('BIO') // Bio-energy - }, + 'sector_of_economy': [ + show(isEqual('RN'), '.power_generation_questions'), // Energy generation project + show(isEqual('PG'), '.energy_network_questions'), // Energy networks (PG = power grid) + show(isEqual('ST'), '.energy_storage_questions'), // Storage + show(isOneOf(['RN', 'ST', 'PG']), + '.energy_generation_network_and_storage_questions'), + show(isEqual('SM'), '.mineral_commodity_questions'), // Mining + show(isEqual('MA'), '.manufacturing_questions'), // Manufacturing + ], - { - control: 'sector_of_economy', - showHide: '.energy_network_questions', - visible: isJust('PG') // Energy networks (PG = power grid) - }, - { - control: 'power_technology', - showHide: '#div_id_power_technology_other', - visible: isJust('OT') - }, + 'use_in_energy_economy': [ + show(isEqual('OTR'), '#div_id_use_in_energy_economy_other'), + ], - { - control: 'sector_of_economy', - showHide: '.energy_storage_questions', - visible: isJust('ST') // Storage - }, - { - control: 'sector_of_economy', - showHide: '.energy_generation_network_and_storage_questions', - visible: isOneOf(['RN', 'ST', 'PG']) // Generation (RN), Storage (ST) and networks (PG) - }, - - { - control: 'sector_of_economy', - showHide: '.mineral_commodity_questions', - visible: isJust('SM') // mining - }, - { - control: 'use_in_energy_economy', - showHide: '#div_id_use_in_energy_economy_other', - visible: isJust('OTR') - }, - - { - control: 'sector_of_economy', - showHide: '.manufacturing_questions', - visible: isJust('MA') // manufacturing - }, + 'power_technology': [ + show(isEqual('OT'), '#div_id_power_technology_other'), + ], + 'generation_technology': [ + show(isEqual('BIO'), '#div_id_biomass_detail'), // Bio-energy + ], // Socio-environmental tab - { - control: 'positive_or_negative', - showHide: '#div_id_positive_case_type', - visible: isNot('N') - }, - { - control: 'positive_or_negative', - showHide: '#div_id_negative_case_reasons', - visible: isNot('P') - }, - { - control: 'positive_or_negative', - showHide: '#div_id_obstacles_and_hindrances', - visible: isOneOf(['P', 'N']) // positive/negative (process pro / vs) - }, - { - control: 'negative_case_reasons', - showHide: '#div_id_negative_case_reasons_other', - visible: isJust('OTHR') - }, + 'positive_or_negative': [ + show(isNot('N'), '#div_id_positive_case_type'), + show(isNot('P'), '#div_id_negative_case_reasons'), + show(isOneOf([ 'P', 'N' ]), '#div_id_obstacles_and_hindrances'), + ], + + 'negative_case_reasons': [ + show(isEqual('OTHR'), '#div_id_negative_case_reasons_other'), + ], // Contact tab - { - control: 'shown_on_other_platforms', - showHide: '#div_id_shown_on_other_platforms_detail', - visible: isChecked - }, - ]; + 'shown_on_other_platforms': [ + show(isChecked, '#div_id_shown_on_other_platforms_detail'), + ], + }; // // Fields that require their own more advanced logic @@ -244,12 +207,15 @@ $('form').attr('novalidate', 'novalidate'); // Add conditional form show/hide logic - for (const item of showHideFields) { - const control = document.forms['case-study-form'][item.control] + for (const field of Object.keys(showHideFields)) { + const control = document.forms['case-study-form'][field] $(control).change(() => { - // Check the value matches any of the conditions. - showIf(item.showHide, item.visible(control)) + + for (const row of showHideFields[field]) { + // Check the value matches any of the conditions. + showIf(row.showHide, row.visible(control)) + } }); $(control).change();