From 75ce9f29c53d87dfde5c953a6b47aa2958c31448 Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Thu, 25 Nov 2021 17:27:16 +0100
Subject: [PATCH 1/2] Hide mask types when the option is "no mask"

---
 cara/apps/calculator/static/js/form.js            | 14 ++++++++++++++
 .../calculator/templates/calculator.form.html.j2  | 15 +++++++++------
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/cara/apps/calculator/static/js/form.js b/cara/apps/calculator/static/js/form.js
index 71510e8c..12086af1 100644
--- a/cara/apps/calculator/static/js/form.js
+++ b/cara/apps/calculator/static/js/form.js
@@ -236,6 +236,14 @@ function on_ventilation_type_change() {
   });
 }
 
+function on_wearing_mask_change() {
+  wearing_mask = $('input[type=radio][name=mask_wearing_option]')
+  wearing_mask.each(function (index) {
+    if (this.checked) getChildElement($(this)).show();
+    else getChildElement($(this)).hide();    
+  })
+}
+
 /* -------UI------- */
 
 function show_disclaimer() {
@@ -558,6 +566,12 @@ $(document).ready(function () {
   // Call the function now to handle forward/back button presses in the browser.
   on_ventilation_type_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);
+  // Call the function now to handle forward/back button presses in the browser.
+  on_wearing_mask_change();
+
   // Setup the maximum number of people at page load (to handle back/forward),
   // and update it when total people is changed.
   setMaxInfectedPeople();
diff --git a/cara/apps/calculator/templates/calculator.form.html.j2 b/cara/apps/calculator/templates/calculator.form.html.j2
index 75cbbe5b..92cd6b5e 100644
--- a/cara/apps/calculator/templates/calculator.form.html.j2
+++ b/cara/apps/calculator/templates/calculator.form.html.j2
@@ -260,15 +260,18 @@
     <br>
     
     <div class='sub_title'>Are masks worn when occupants are at workstations?</div>
-    <input type="radio" id="mask_on" name="mask_wearing_option" value="mask_on" required>
+    <input type="radio" id="mask_on" name="mask_wearing_option" value="mask_on" data-enables="#DIVmasks_used" required>
       <label for="mask_on">Yes</label>
     <input class="ml-2" type="radio" id="mask_off"  name="mask_wearing_option" value="mask_off" required checked="checked">
       <label for="mask_off">No</label><br>
-    Type of masks used:
-    <input type="radio" id="mask_type_1" name="mask_type" value="Type I" checked="checked" onclick="require_fields(this)">
-      <label for="mask_type_1">Type 1</label>
-    <input class="ml-2" type="radio" id="mask_type_ffp2"  name="mask_type" value="FFP2" onclick="require_fields(this)">
-      <label for="mask_type_ffp2">FFP2</label><br>
+      
+    <div id="DIVmasks_used" style="display:none">
+      Type of masks used:
+      <input type="radio" id="mask_type_1" name="mask_type" value="Type I" checked="checked" onclick="require_fields(this)">
+        <label for="mask_type_1">Type 1</label>
+      <input class="ml-2" type="radio" id="mask_type_ffp2"  name="mask_type" value="FFP2" onclick="require_fields(this)">
+        <label for="mask_type_ffp2">FFP2</label><br>
+    </div>
     <hr width="80%">
 
   </div>

From b32e81b052bd42ca5093fb00c945e2ff2b19f59b Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Mon, 29 Nov 2021 14:06:03 +0100
Subject: [PATCH 2/2] Moved required fields logic to js

---
 cara/apps/calculator/static/js/form.js                 | 10 ++++++++--
 cara/apps/calculator/templates/calculator.form.html.j2 |  4 ++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/cara/apps/calculator/static/js/form.js b/cara/apps/calculator/static/js/form.js
index 12086af1..5a20f025 100644
--- a/cara/apps/calculator/static/js/form.js
+++ b/cara/apps/calculator/static/js/form.js
@@ -239,8 +239,14 @@ function on_ventilation_type_change() {
 function on_wearing_mask_change() {
   wearing_mask = $('input[type=radio][name=mask_wearing_option]')
   wearing_mask.each(function (index) {
-    if (this.checked) getChildElement($(this)).show();
-    else getChildElement($(this)).hide();    
+    if (this.checked) {
+      getChildElement($(this)).show();
+      require_fields(this);
+    }
+    else {
+      getChildElement($(this)).hide();
+      require_fields(this);
+    }
   })
 }
 
diff --git a/cara/apps/calculator/templates/calculator.form.html.j2 b/cara/apps/calculator/templates/calculator.form.html.j2
index 92cd6b5e..9b73d9fd 100644
--- a/cara/apps/calculator/templates/calculator.form.html.j2
+++ b/cara/apps/calculator/templates/calculator.form.html.j2
@@ -260,9 +260,9 @@
     <br>
     
     <div class='sub_title'>Are masks worn when occupants are at workstations?</div>
-    <input type="radio" id="mask_on" name="mask_wearing_option" value="mask_on" data-enables="#DIVmasks_used" required>
+    <input type="radio" id="mask_on" name="mask_wearing_option" value="mask_on" data-enables="#DIVmasks_used">
       <label for="mask_on">Yes</label>
-    <input class="ml-2" type="radio" id="mask_off"  name="mask_wearing_option" value="mask_off" required checked="checked">
+    <input class="ml-2" type="radio" id="mask_off"  name="mask_wearing_option" value="mask_off" checked="checked">
       <label for="mask_off">No</label><br>
       
     <div id="DIVmasks_used" style="display:none">