autonomic-cooperative/ojuso-map
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make conditional form logic more terse

Browse Source
This commit is contained in:
Anna Sidwell 2018-11-26 23:56:58 +00:00
parent dd54a7a2f9
commit e1ff5b64cf
1 changed files with 50 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
apps/map/templates/map/form-case_study.html
View File

@ -58,16 +58,23 @@
$(thingToShow).hide() $(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 // Returns true if checkbox is checked
function isChecked(elem) { function isChecked(elem) {
return elem.checked return elem.checked
} }
// Returns a function that returns true if its parameter matches `condition` // Returns a function that returns true if its parameter matches `condition`
function isJust(condition) { function isEqual(condition) {
return elem => elem.value === condition return elem => elem.value === condition
} }
// Inverse of the above
function isNot(condition) { function isNot(condition) {
return elem => elem.value !== condition return elem => elem.value !== condition
} }
@ -82,95 +89,51 @@
// TODO: Move this knowledge out of the template // TODO: Move this knowledge out of the template
// //
var showHideFields = [ var showHideFields = {
// 'Basic information' tab // 'Basic information' tab
{ 'location_context': [
control: 'location_context', show(isEqual('RUR'), '#div_id_type_of_ecosystem'), // Rural
showHide: '#div_id_type_of_ecosystem', ],
visible: isJust('RUR') // Rural
},
// Technical/economic tab // Technical/economic tab
{ 'sector_of_economy': [
control: 'sector_of_economy', show(isEqual('RN'), '.power_generation_questions'), // Energy generation project
showHide: '.power_generation_questions', show(isEqual('PG'), '.energy_network_questions'), // Energy networks (PG = power grid)
visible: isJust('RN') // Energy generation project show(isEqual('ST'), '.energy_storage_questions'), // Storage
}, show(isOneOf(['RN', 'ST', 'PG']),
{ '.energy_generation_network_and_storage_questions'),
control: 'generation_technology', show(isEqual('SM'), '.mineral_commodity_questions'), // Mining
showHide: '#div_id_biomass_detail', show(isEqual('MA'), '.manufacturing_questions'), // Manufacturing
visible: isJust('BIO') // Bio-energy ],
},
{ 'use_in_energy_economy': [
control: 'sector_of_economy', show(isEqual('OTR'), '#div_id_use_in_energy_economy_other'),
showHide: '.energy_network_questions', ],
visible: isJust('PG') // Energy networks (PG = power grid)
},
{
control: 'power_technology',
showHide: '#div_id_power_technology_other',
visible: isJust('OT')
},
{ 'power_technology': [
control: 'sector_of_economy', show(isEqual('OT'), '#div_id_power_technology_other'),
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
},
'generation_technology': [
show(isEqual('BIO'), '#div_id_biomass_detail'), // Bio-energy
],
// Socio-environmental tab // Socio-environmental tab
{ 'positive_or_negative': [
control: 'positive_or_negative', show(isNot('N'), '#div_id_positive_case_type'),
showHide: '#div_id_positive_case_type', show(isNot('P'), '#div_id_negative_case_reasons'),
visible: isNot('N') show(isOneOf([ 'P', 'N' ]), '#div_id_obstacles_and_hindrances'),
}, ],
{
control: 'positive_or_negative', 'negative_case_reasons': [
showHide: '#div_id_negative_case_reasons', show(isEqual('OTHR'), '#div_id_negative_case_reasons_other'),
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')
},
// Contact tab // Contact tab
{ 'shown_on_other_platforms': [
control: 'shown_on_other_platforms', show(isChecked, '#div_id_shown_on_other_platforms_detail'),
showHide: '#div_id_shown_on_other_platforms_detail', ],
visible: isChecked };
},
];
// //
// Fields that require their own more advanced logic // Fields that require their own more advanced logic
@ -244,12 +207,15 @@
$('form').attr('novalidate', 'novalidate'); $('form').attr('novalidate', 'novalidate');
// Add conditional form show/hide logic // Add conditional form show/hide logic
for (const item of showHideFields) { for (const field of Object.keys(showHideFields)) {
const control = document.forms['case-study-form'][item.control] const control = document.forms['case-study-form'][field]
$(control).change(() => { $(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(); $(control).change();