From 41563d4dae54a1532aa7dafa372031ef58112c40 Mon Sep 17 00:00:00 2001
From: gaazzopa <gabriella.azzopardi@cern.ch>
Date: Fri, 6 Nov 2020 15:53:42 +0100
Subject: [PATCH 1/2] Fixed issues with form submission

---
 cara/apps/calculator/static/form.html  | 21 ++++----
 cara/apps/calculator/static/js/form.js | 74 ++++++++++++++++++--------
 2 files changed, 63 insertions(+), 32 deletions(-)

diff --git a/cara/apps/calculator/static/form.html b/cara/apps/calculator/static/form.html
index 409b60f1..e0eabf6e 100644
--- a/cara/apps/calculator/static/form.html
+++ b/cara/apps/calculator/static/form.html
@@ -6,7 +6,7 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
-    <script type="text/javascript" src="/calculator/static/js/form.js"></script>
+    <script type="text/javascript" src="js/form.js"></script>
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous"/>
     <link rel="stylesheet" href="/calculator/static/css/form.css"/>
@@ -18,7 +18,7 @@
 Beta v1.0.0 <span style="float:right; font-weight:bold">Please send feedback to <a href="mailto:CARA-dev@cern.ch">CARA-dev@cern.ch</a></span>
 <h1> <p><b>CARA</b> Covid Airborne Risk Assessment tool</p></h1>
 
-<form id="covid_calculator" name="covid_calculator" action="/calculator/report" method="POST">
+<form id="covid_calculator" name="covid_calculator" onsubmit="debug_submit(this)">
 
 <div style="width: 33%; float:left;">
 
@@ -36,14 +36,15 @@ Beta v1.0.0 <span style="float:right; font-weight:bold">Please send feedback to
 
     <!-- Ventilation Options -->
     Ventilation type:
-    <input type="radio" id="mechanical" name="ventilation_type" value="mechanical" onclick="show_hide('DIVmechanical_ventilation', 'DIVnatural_ventilation', this)">Mechanical</input>
-    <input type="radio" id="natural" name="ventilation_type" value="natural" onclick="show_hide('DIVnatural_ventilation', 'DIVmechanical_ventilation', this)">Natural</input><br>
-    <input type="hidden" id="no_ventilation" name="ventilation_type" value="" />
+    <input type="hidden" id="ventilation_type" name="ventilation_type" value=""/>
+    <input type="radio" id="mechanical" name="RADIO_ventilation_type" value="mechanical" onclick="show_hide('DIVmechanical_ventilation', 'DIVnatural_ventilation', this)">Mechanical</input>
+    <input type="radio" id="natural" name="RADIO_ventilation_type" value="natural" onclick="show_hide('DIVnatural_ventilation', 'DIVmechanical_ventilation', this)">Natural</input><br>
 
     <div id="DIVmechanical_ventilation" style="display:none">
-        <input type="radio" id="air_type_supply" name="mechanical_ventilation_type" value="air_supply" onclick="require_fields(this)">
-        Air supply flow rate &nbsp;&nbsp; <input type="number" step=0.01 id="air_supply" name="air_supply" min="0" placeholder="(m³)"><br>
-        <input type="radio" id="air_type_changes" name="mechanical_ventilation_type" value="air_changes" onclick="require_fields(this)">
+        <input type="hidden" id="mechanical_ventilation_type" name="mechanical_ventilation_type" value=""/>
+        <input type="radio" id="air_type_supply" name="RADIO_mechanical_ventilation_type" value="air_supply" onclick="require_fields(this)">
+        Air supply flow rate &nbsp;&nbsp; <input type="number" step=0.01 id="air_supply" name="air_supply" min="0" placeholder="(m³ / hour)"><br>
+        <input type="radio" id="air_type_changes" name="RADIO_mechanical_ventilation_type" value="air_changes" onclick="require_fields(this)">
         Air changes per hour &nbsp;&nbsp; <input type="number" step=0.01 id="air_changes" name="air_changes" min="0"><br>
     </div>
 
@@ -90,11 +91,11 @@ Beta v1.0.0 <span style="float:right; font-weight:bold">Please send feedback to
     <hr width="80%">
 
     When is the event?<br>
-    <input type="radio" id="event_type_single" name="event_type" value="single_event" onclick="require_fields(this)"></input>
+    <input type="radio" id="event_type_single" name="event_type" value="single_event" onclick="require_fields(this)" required></input>
     <label for="event_type_single">Single event</label> &nbsp;&nbsp;
     <label for="datepicker">Date: </label>
     <input type="text" id="datepicker" name="single_event_date"><br>
-    <input type="radio" id="event_type_recurrent" name="event_type" value="recurrent_event" onclick="require_fields(this)"></input>
+    <input type="radio" id="event_type_recurrent" name="event_type" value="recurrent_event" onclick="require_fields(this)" required></input>
     <label for="event_type_recurrent">Recurrent usage</label>
     <select id="recurrent_event_month" name="recurrent_event_month">
         <option value="January">January</option>
diff --git a/cara/apps/calculator/static/js/form.js b/cara/apps/calculator/static/js/form.js
index d11f3ace..649bfa2a 100644
--- a/cara/apps/calculator/static/js/form.js
+++ b/cara/apps/calculator/static/js/form.js
@@ -12,19 +12,21 @@ function show(show, var_id, obj) {
 }
 
 function show_hide(show, hide, obj) {
-
   var show = document.getElementById(show);
   var hide = document.getElementById(hide);
-  var no_ventilation = document.getElementById("no_ventilation");
+  var ventilation_type = document.getElementById("ventilation_type");
+  var mechanical_ventilation_type = document.getElementById("mechanical_ventilation_type");
 
   if (show.style.display === "block") {
       show.style.display = "none";
       obj.checked = false;
-      no_ventilation.checked = true;
+      ventilation_type.value = "";
+      mechanical_ventilation_type.value = "";
   } else if (show.style.display === "none") {
       show.style.display = "block";
       hide.style.display = "none";
       require_fields(obj);
+      ventilation_type.value = obj.id;
 } }
 
 /* -------Required fields------- */
@@ -71,37 +73,46 @@ function require_fields(obj){
 } }
 
 function require_room_volume(option) {
-    $("#room_volume").prop('required',option);
+  $("#room_volume").prop('required',option);
 }
 
 function require_room_dimensions(option) {
-    $("#floor_area").prop('required',option);
-    $("#ceiling_height").prop('required',option);
+  $("#floor_area").prop('required',option);
+  $("#ceiling_height").prop('required',option);
 }
 
 function require_mechanical_ventilation(option) {
-    $("#air_type_changes").prop('required',option);
-    $("#air_type_supply").prop('required',option);
-}
+  $("#air_type_changes").prop('required',option);
+  $("#air_type_supply").prop('required',option);
+  if (!option) {
+    var mechanical_ventilation_type = document.getElementById("mechanical_ventilation_type");
+    mechanical_ventilation_type.value = "";
+} }
 
 function require_natural_ventilation(option) {
-    $("#windows_number").prop('required',option);
-    $("#window_height").prop('required',option);
-    $("#window_width").prop('required',option);
-    $("#opening_distance").prop('required',option);
-    $("#always").prop('required',option);
-    $("#interval").prop('required',option);
-    $("#event_type_single").prop('required',option);
-    $("#event_type_recurrent").prop('required',option);
+  $("#windows_number").prop('required',option);
+  $("#window_height").prop('required',option);
+  $("#window_width").prop('required',option);
+  $("#opening_distance").prop('required',option);
+  $("#always").prop('required',option);
+  $("#interval").prop('required',option);
+  $("#event_type_single").prop('required',option);
+  $("#event_type_recurrent").prop('required',option);
 }
 
 function require_air_changes(option) {
-    $("#air_changes").prop('required',option);
-}
+  $("#air_changes").prop('required',option);
+  if (option) {
+    var mechanical_ventilation_type = document.getElementById("mechanical_ventilation_type");
+    mechanical_ventilation_type.value = "air_changes";
+} }
 
 function require_air_supply(option) {
-    $("#air_supply").prop('required',option);
-}
+  $("#air_supply").prop('required',option);
+  if (option) {
+    var mechanical_ventilation_type = document.getElementById("mechanical_ventilation_type");
+    mechanical_ventilation_type.value = "air_supply";
+} }
 
 function require_single_event(option) {
   $("#datepicker").prop('required',option);
@@ -136,5 +147,24 @@ function show_disclaimer() {
     btnText.innerHTML = "Read less";
     moreText.style.display = "inline";
     $("#DIALOG_welcome").dialog("option", "height", 600);
-  }
+} }
+
+/* -------Debugging------- */
+function debug_submit(form){
+
+  //Prevent default posting of form - put here to work in case of errors
+  event.preventDefault();
+
+  //Serialize the data in the form
+  var serializedData = objectifyForm($(form).serializeArray());
+
+  console.log( serializedData );
+  return false; //don't submit
+}
+
+function objectifyForm(formArray) {
+    var returnArray = {};
+    for (var i = 0; i < formArray.length; i++)
+        returnArray[formArray[i]['name']] = formArray[i]['value'];
+    return returnArray;
 }
\ No newline at end of file

From 8e9dd9564c9be286fd0e3ab564d546c562708401 Mon Sep 17 00:00:00 2001
From: gaazzopa <gabriella.azzopardi@cern.ch>
Date: Fri, 6 Nov 2020 16:06:06 +0100
Subject: [PATCH 2/2] Removed debug options

---
 cara/apps/calculator/static/form.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cara/apps/calculator/static/form.html b/cara/apps/calculator/static/form.html
index e0eabf6e..4fc8a5e4 100644
--- a/cara/apps/calculator/static/form.html
+++ b/cara/apps/calculator/static/form.html
@@ -6,7 +6,7 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
-    <script type="text/javascript" src="js/form.js"></script>
+    <script type="text/javascript" src="/calculator/static/js/form.js"></script>
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous"/>
     <link rel="stylesheet" href="/calculator/static/css/form.css"/>
@@ -18,7 +18,7 @@
 Beta v1.0.0 <span style="float:right; font-weight:bold">Please send feedback to <a href="mailto:CARA-dev@cern.ch">CARA-dev@cern.ch</a></span>
 <h1> <p><b>CARA</b> Covid Airborne Risk Assessment tool</p></h1>
 
-<form id="covid_calculator" name="covid_calculator" onsubmit="debug_submit(this)">
+<form id="covid_calculator" name="covid_calculator" action="/calculator/report" method="POST"> <!--DEBUG onsubmit="debug_submit(this)"-->
 
 <div style="width: 33%; float:left;">