From 0fc28f129bd263b51a4b42f640d5a2a5c52e57cc Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Fri, 10 Jun 2022 16:08:07 +0200
Subject: [PATCH] Input fields with units (and respective resizing adjustments)

---
 cara/apps/calculator/static/js/form.js        | 25 +++++++--
 .../templates/base/calculator.form.html.j2    | 53 +++++++++----------
 2 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/cara/apps/calculator/static/js/form.js b/cara/apps/calculator/static/js/form.js
index e4597acc..dc20b3b4 100644
--- a/cara/apps/calculator/static/js/form.js
+++ b/cara/apps/calculator/static/js/form.js
@@ -183,7 +183,6 @@ function require_mask(option) {
 
 function require_hepa(option) {
   require_input_field("#hepa_amount", option);
-  set_disabled_status("#hepa_amount", !option);
 }
 
 function require_input_field(id, option) {
@@ -236,6 +235,20 @@ function on_ventilation_type_change() {
   });
 }
 
+function on_hepa_option_change() {
+  hepa_option = $('input[type=radio][name=hepa_option]')
+  hepa_option.each(function (index) {
+    if (this.checked) {
+      getChildElement($(this)).show();
+      require_fields(this);
+    }
+    else {
+      getChildElement($(this)).hide();
+      require_fields(this);
+    }
+  })
+}
+
 function on_wearing_mask_change() {
   wearing_mask = $('input[type=radio][name=mask_wearing_option]')
   wearing_mask.each(function (index) {
@@ -711,6 +724,12 @@ $(document).ready(function () {
   // Call the function now to handle forward/back button presses in the browser.
   on_ventilation_type_change();
 
+  // When the hepa filtration option changes we want to make its respective
+  // children show/hide.
+  $("input[type=radio][name=hepa_option]").change(on_hepa_option_change);
+  // Call the function now to handle forward/back button presses in the browser.
+  on_hepa_option_change();
+
   // When the mask_wearing_option changes we want to make its respective
   // children show/hide.
   $("input[type=radio][name=mask_wearing_option]").change(on_wearing_mask_change);
@@ -861,8 +880,8 @@ $(document).ready(function () {
           </div>
         
           <div class='form-group row'>
-            <div class="col-sm-4"><label class="col-form-label col-form-label-sm"> Duration:</label></div>
-            <div class="col-sm-8"><input type="number" id="sr_duration_no_${index}" value="${value.duration}" class="form-control form-control-sm short_range_option" name="short_range_duration" min=1 placeholder="Minutes" onchange="validate_sr_time(this)" form="not-submitted"><br></div>
+            <div class="col-sm-6"><label class="col-form-label col-form-label-sm"> Duration (min):</label></div>
+            <div class="col-sm-6"><input type="number" id="sr_duration_no_${index}" value="${value.duration}" class="form-control form-control-sm short_range_option" name="short_range_duration" min=1 placeholder="Minutes" onchange="validate_sr_time(this)" form="not-submitted"><br></div>
           </div>
 
           <div class="form-group" style="max-width: 8rem">
diff --git a/cara/apps/templates/base/calculator.form.html.j2 b/cara/apps/templates/base/calculator.form.html.j2
index dd43228d..294cda4f 100644
--- a/cara/apps/templates/base/calculator.form.html.j2
+++ b/cara/apps/templates/base/calculator.form.html.j2
@@ -88,11 +88,11 @@
     <br>
 
     <div class="form-group row">
-      <div class="col-sm-4">
+      <div class="col-sm-5">
         <input type="radio" id="room_data_volume" name="volume_type" value="room_volume_explicit" onclick="require_fields(this)" tabindex="-1" required>
-        <label class="col-form-label">Room volume:</label>
+        <label class="col-form-label">Room volume (m³):</label>
       </div>
-      <div class="col-sm-6">
+      <div class="col-sm-5">
         <input type="number" step="any" id="room_volume" class="non_zero form-control" name="room_volume" placeholder="Room volume (m³)" min="0" data-has-radio="#room_data_volume">
       </div>
     </div>
@@ -101,7 +101,7 @@
     <div class="form-group row">
       <div class="col-sm-4">
         <input type="radio" id="room_data_dimensions" name="volume_type" value="room_volume_from_dimensions" onclick="require_fields(this)" tabindex="-1" required>
-        <label for="room_data_dimensions">Floor area:</label>
+        <label class="col-form-label" for="room_data_dimensions">Floor area (m²):</label>
       </div>
       <div class="col-sm-6">
         <input type="number" step="any" id="floor_area" class="non_zero form-control" name="floor_area" placeholder="Room floor area (m²)" min="0" data-has-radio="#room_data_dimensions">
@@ -109,7 +109,7 @@
     </div>
     <div class="form-group row">
       <div class="col-sm-4">
-        <label for="room_data_dimensions">Ceiling height:</label>
+        <label class="col-form-label" for="room_data_dimensions">Ceiling height (m):</label>
       </div>
       <div class="col-sm-6">
         <input type="number" step="any" id="ceiling_height" class="non_zero form-control" name="ceiling_height" placeholder="Room ceiling height (m)" min="0" data-has-radio="#room_data_dimensions">
@@ -189,21 +189,21 @@
 
     <div id="DIVmechanical_ventilation" class="tabbed" style="display:none">
         <div class="split">
-          <div>
-          <input type="radio" id="mech_type_air_supply" name="mechanical_ventilation_type" value="mech_type_air_supply" class="center_radio" onclick="require_fields(this)" tabindex="-1">
-          <label for="mech_type_air_supply" class="col-form-label ml-2">Air supply flow rate</label>
+          <div style="min-width: 55%">
+            <input type="radio" id="mech_type_air_supply" name="mechanical_ventilation_type" value="mech_type_air_supply" class="center_radio" onclick="require_fields(this)" tabindex="-1">
+            <label for="mech_type_air_supply" class="col-form-label ml-2">Air supply flow rate (m³ / hour)</label>
           </div>
           <div>
-          <input type="number" step="any" id="air_supply" class="non_zero form-control" name="air_supply" min="0" placeholder="Flow rate (m³ / hour)" data-has-radio="#mech_type_air_supply"><br>
+            <input type="number" step="any" id="air_supply" class="non_zero form-control" name="air_supply" min="0" placeholder="Flow rate (m³ / hour)" data-has-radio="#mech_type_air_supply"><br>
           </div>
         </div>
         <div class="split">
-          <div>
-          <input type="radio" id="mech_type_air_changes" name="mechanical_ventilation_type" value="mech_type_air_changes" class="center_radio" onclick="require_fields(this)" tabindex="-1">
-          <label for="mech_type_air_changes" class="col-form-label ml-2">Air changes per hour</label>
+          <div style="min-width: 55%">
+            <input type="radio" id="mech_type_air_changes" name="mechanical_ventilation_type" value="mech_type_air_changes" class="center_radio" onclick="require_fields(this)" tabindex="-1">
+            <label for="mech_type_air_changes" class="col-form-label ml-2">Air changes per hour (h⁻¹)</label>
           </div>
           <div>
-          <input type="number" step="any" id="air_changes" class="non_zero form-control" name="air_changes" min="0" placeholder="Air exchange (h⁻¹)" data-has-radio="#mech_type_air_changes"><br>
+            <input type="number" step="any" id="air_changes" class="non_zero form-control" name="air_changes" min="0" placeholder="Air exchange (h⁻¹)" data-has-radio="#mech_type_air_changes"><br>
           </div>
         </div>
     </div>
@@ -214,7 +214,7 @@
         <div><input type="number" id="windows_number" class="non_zero form-control" name="windows_number" placeholder="Number (#)" min="1"><br></div>
       </div>
       <div class="split">
-        <div><label class="col-form-label">Height of window: </label></div>
+        <div><label class="col-form-label">Height of window (m): </label></div>
         <div><input type="number" step="any" id="window_height" class="non_zero form-control" name="window_height" placeholder="Height (m)" min="0"><br></div>
       </div>
         <div class='sub_title'>Window type:</div>
@@ -223,11 +223,11 @@
         <input class="ml-2" type="radio" id="window_hinged" name="window_type" value="window_hinged" onclick="require_fields(this)">
           <label for="window_hinged">Top- or Bottom-Hung</label><br>
         <div class="split">
-          <div><label class="col-form-label">Width of window: </label></div>
+          <div><label class="col-form-label">Width of window (m): </label></div>
           <div><input type="number" step="any" id="window_width" class="non_zero disabled form-control" name="window_width" placeholder="Width (m)" min="0" data-has-radio="#window_hinged"><br></div>
         </div>
         <div class="split">
-          <div><label class="col-form-label">Opening distance: </label></div>
+          <div><label class="col-form-label">Opening distance (m): </label></div>
           <div><input type="number" step="any" id="opening_distance" class="non_zero form-control" name="opening_distance" placeholder="Opening distance (m)" min="0"><br></div>
         </div>
         <div class='sub_title'>Window open:</div>
@@ -245,17 +245,16 @@
     </div>
 
     <div class='sub_title'>HEPA filtration:</div>
-    <div class="split">
-    <div>
-    <input type="radio" id="hepa_no" name="hepa_option" value=0 onclick="require_fields(this)" checked="checked">
-      <label for="hepa_no" class="col-form-label ml-2">No</label>
-    <input class="ml-2" type="radio" id="hepa_yes" name="hepa_option" value=1 onclick="require_fields(this)">
-      <label for="hepa_yes" class="col-form-label ml-2">Yes</label>
-    </div>
-    <div>
-    <input type="number" step="any" id="hepa_amount" class="non_zero disabled form-control" name="hepa_amount" placeholder="Flow rate (m³ / hour)" min="0" data-has-radio="#hepa_yes">
-    </div>
-    </div>
+      <div>
+        <input type="radio" id="hepa_yes" name="hepa_option" value=1 onclick="require_fields(this)" data-enables="#DIVhepa_amount">
+          <label for="hepa_yes" class="col-form-label ml-2">Yes</label>
+        <input class="ml-2" type="radio" id="hepa_no" name="hepa_option" value=0 onclick="require_fields(this)" checked="checked">
+          <label for="hepa_no" class="col-form-label ml-2">No</label>
+      </div>
+      <div class="split" id="DIVhepa_amount">
+        <div><label for="hepa_amount" class="col-form-label ml-2">Flow rate (m³ / hour):</label></div>
+        <div><input type="number" step="any" id="hepa_amount" class="non_zero form-control" name="hepa_amount" placeholder="Flow rate (m³ / hour)" min="0" data-has-radio="#hepa_yes"></div>
+      </div>
     <hr width="80%">
 
     <b>Face masks:</b>