From 01e3bf8ca587b20d412e10ebd307b71fb1e5588e Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Tue, 20 Sep 2022 14:48:46 +0200
Subject: [PATCH] Added UI validation for the total number of infected people

---
 caimira/apps/calculator/static/js/form.js     | 35 +++++++++++++------
 .../templates/base/calculator.form.html.j2    |  4 +--
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/caimira/apps/calculator/static/js/form.js b/caimira/apps/calculator/static/js/form.js
index 5361a043..6c0525fa 100644
--- a/caimira/apps/calculator/static/js/form.js
+++ b/caimira/apps/calculator/static/js/form.js
@@ -195,16 +195,26 @@ function set_disabled_status(id, option) {
     $(id).removeClass("disabled");
 }
 
-function setMaxInfectedPeople() {
-  $("#training_limit_error").hide();
-  var max = $("#total_people").val()
+function validateMaxInfectedPeople() {
+  let infected_people = document.getElementById("infected_people");
+  removeErrorFor(infected_people);
+  $(infected_people).removeClass("red_border");
+  
+  let infected = infected_people.valueAsNumber;
+  let max = document.getElementById("total_people").valueAsNumber;
 
-  if ($("#activity_type").val() === "training") {
-    max = 1;
-    $("#training_limit_error").show();
+  if ($("#activity_type").val() === "training" && infected > 1) {
+    insertErrorFor(infected_people, "Conference/Training activities limited to 1 infected person.");
+    $(infected_people).addClass("red_border");
+    return false;
+  }
+  else if (infected >= max) {
+    insertErrorFor(infected_people, "Value is equal or higher than the total number of occupants.");
+    $(infected_people).addClass("red_border");
+    return false;
   }
 
-  $("#infected_people").attr("max", max);
+  return true;
 }
 
 function removeInvalid(id) {
@@ -497,6 +507,9 @@ function validate_form(form) {
       }
   }
 
+  //Validate number of infected people
+  if (!validateMaxInfectedPeople()) submit = false;
+
   //Validate all non zero values
   $("input[required].non_zero").each(function() {
     if (!validateValue(this)) {
@@ -876,9 +889,11 @@ $(document).ready(function () {
 
   // Setup the maximum number of people at page load (to handle back/forward),
   // and update it when total people is changed.
-  setMaxInfectedPeople();
-  $("#total_people").change(setMaxInfectedPeople);
-  $("#activity_type").change(setMaxInfectedPeople);
+  validateMaxInfectedPeople();
+  $("#total_people").change(validateMaxInfectedPeople);
+  $("#activity_type").change(validateMaxInfectedPeople);
+  $("#total_people").change(validateMaxInfectedPeople);
+  $("#infected_people").change(validateMaxInfectedPeople);
 
   //Validate all non zero values
   $("input[required].non_zero").each(function() {validateValue(this)});
diff --git a/caimira/apps/templates/base/calculator.form.html.j2 b/caimira/apps/templates/base/calculator.form.html.j2
index 770df231..563e6d0c 100644
--- a/caimira/apps/templates/base/calculator.form.html.j2
+++ b/caimira/apps/templates/base/calculator.form.html.j2
@@ -313,8 +313,8 @@
     </div>
 
     <div class="form-group row">
-      <div class="col-sm-4"><label class="col-form-label">Number of infected people: </label></div>
-      <div class="col-sm-6 align-self-center"><input type="number" id="infected_people" class="form-control" name="infected_people" min=1 value=1 required></div>
+      <div class="col-sm-4" style="top: -2px"><label>Number of infected people: </label></div>
+      <div class="col-sm-6"><input type="number" id="infected_people" class="form-control" name="infected_people" min=1 value=1 required></div>
     </div>
 
     <span id="training_limit_error" class="red_text" hidden>Conference/Training activities limited to 1 infected<br></span>