From 8ef0d4166081cd57d2d287236792280c7aff977f Mon Sep 17 00:00:00 2001
From: Phil Elson <philip.elson@cern.ch>
Date: Fri, 6 Nov 2020 21:48:09 +0100
Subject: [PATCH] Ensure that the maximum number of infected people remains
 below the total number, even if pressing the back button. Closes #65.

---
 cara/apps/calculator/static/form.html  |  4 ++--
 cara/apps/calculator/static/js/form.js | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/cara/apps/calculator/static/form.html b/cara/apps/calculator/static/form.html
index d7ac9946..01d2d7da 100644
--- a/cara/apps/calculator/static/form.html
+++ b/cara/apps/calculator/static/form.html
@@ -76,8 +76,8 @@ Beta v1.0.0 <span style="float:right; font-weight:bold">Please send feedback to
     <!-- Event Options -->
     <b>Event data:</b><br>
     Attendees:<br>
-    Total number of occupants: <input type="number" id="total_people" name="total_people" min=1 onchange="document.getElementById('infected_people').max=this.value" required><br>
-    Number of infected people: <input type="number" id="infected_people" name="infected_people" min=1 max="document.getElementById('total_people').value" required><br>
+    Total number of occupants: <input type="number" id="total_people" name="total_people" min=1 required><br>
+    Number of infected people: <input type="number" id="infected_people" name="infected_people" min=1 required><br>
     <hr width="80%">
     Activity type: <select id="activity_type" name="activity_type">
                     <option value="office">Office</option>
diff --git a/cara/apps/calculator/static/js/form.js b/cara/apps/calculator/static/js/form.js
index 9f3c479d..fd1fcebb 100644
--- a/cara/apps/calculator/static/js/form.js
+++ b/cara/apps/calculator/static/js/form.js
@@ -144,6 +144,10 @@ function require_lunch(option) {
   $("#lunch_finish").prop('required',option);
 }
 
+function setMaxInfectedPeople(){
+  $("#infected_people").attr("max", $("#total_people").val());
+}
+
 /* -------UI------- */
 $(function() {
   $(".datepicker").datepicker({
@@ -221,8 +225,13 @@ function objectifyForm(formArray) {
 }
 
 $(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);
+
   var radioValue = $("input[name='event_type']:checked");
   if(radioValue.val()){
     require_fields(radioValue.get(0));
   }
-})
\ No newline at end of file
+})