Make conditional form logic more terse

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();