Merge branch 'develop/form-updates' into 'master'

Updates to UI form

Closes #69 and #64

See merge request cara/cara!72

cara/apps/calculator/static/css/form.css

@@ -6,6 +6,10 @@
 	color: black;
 }
 
-.red {
+.red_border {
 	box-shadow: 0px 0px 2px 1px red;
+}
+
+.red_text {
+	color: red;
 }

cara/apps/calculator/static/js/form.js

@@ -160,12 +160,28 @@ function validate_form(form) {
 
   //Validate all dates
   $("input[required].datepicker").each(function () {
-    $(this).removeClass("red");
+    $(this).removeClass("red_border");
+    $(this).next().hide();
 
     var fromDate = $(this).val();
     if (!isValidDate(fromDate)) {
-      $(this).addClass("red");
+      $(this).addClass("red_border");
       submit = false;
+      $(this).next().show();
+    }
+  });
+
+  //Validate all times
+  $("input[required].finish_time").each(function () {
+    $(this).removeClass("red_border");
+    $(this).next().hide();
+
+    var startTime = parseValToNumber($(this).prev());
+    var finishTime = parseValToNumber($(this));
+    if (startTime > finishTime) {
+      $(this).addClass("red_border");
+      submit = false;
+      $(this).next().show();
     }
   });
 
@@ -183,6 +199,10 @@ function isValidDate(date) {
   return composedDate.getDate() == d && composedDate.getMonth() + 1 == m && composedDate.getFullYear() == y;
 }
 
+function parseValToNumber(obj) {
+    return parseInt(obj.val().replace(':',''), 10);
+}
+
 /* ------ On Load ---------- */
 
 $(document).ready(function () {

cara/apps/calculator/templates/calculator.form.html.j2

@@ -80,22 +80,25 @@ Beta v1.0.0 <span style="float:right; font-weight:bold">Please send feedback to
     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>
+                    <option value="office">Office/Meeting</option>
                     <option value="workshop">Workshop</option>
                     <option value="training">Training</option>
                    </select><br>
     Start: <input type="time" id="activity_start" name="activity_start" value="09:00" required> &nbsp;&nbsp;
-    Finish: <input type="time" id="activity_finish" name="activity_finish" value="18:00" required><br>
+    Finish: <input type="time" id="activity_finish" class="finish_time" name="activity_finish" value="18:00" required>
+    <span id="activity_time_error" class="red_text" hidden>Finish time must be after start</span><br>
     Infected person(s) presence: <br>
     Start: <input type="time" id="infected_start" name="infected_start" value="09:00" required> &nbsp;&nbsp;
-    Finish: <input type="time" id="infected_finish" name="infected_finish" value="18:00" required><br>
+    Finish: <input type="time" id="infected_finish" class="finish_time" name="infected_finish" value="18:00" required>
+    <span id="infected_time_error" class="red_text" hidden>Finish time must be after start</span><br>
+    
     <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)" required></input>
     <label for="event_type_single">Single event</label> &nbsp;&nbsp;
     <label for="single_event_date">Date: </label>
-    <input type="text" id="single_event_date" class="datepicker" name="single_event_date" placeholder="dd/mm/yyyy"><br>
+    <input type="text" id="single_event_date" class="datepicker" name="single_event_date" placeholder="dd/mm/yyyy">
+    <span id="event_time_error" class="red_text" hidden> Incorrect date format</span><br>
     <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">
@@ -122,7 +125,8 @@ Beta v1.0.0 <span style="float:right; font-weight:bold">Please send feedback to
     
     <div id="DIVlunch_break">
         Start: <input type="time" id="lunch_start" name="lunch_start" unrequired> &nbsp;&nbsp;
-        Finish: <input type="time" id="lunch_finish" name="lunch_finish" unrequired><br>
+        Finish: <input type="time" id="lunch_finish" class="finish_time" name="lunch_finish" unrequired>
+        <span id="lunch_time_error" class="red_text" hidden>Finish time must be after start</span><br>
     </div>
 
     <!-- Coffee Options -->
@@ -162,7 +166,7 @@ Beta v1.0.0 <span style="float:right; font-weight:bold">Please send feedback to
   Enter the data on the available means for venting of indoor spaces. For mechanical ventilation, you should check with a specialist for the air flow or air change rate.<br>
   <b>Event data</b><br>
   Enter the total number of occupants in the room and how many of them you assume are infected. We have provided common activity types:<br>
-  Office = typical scenario all persons seated, talking.<br>
+  Office/Meeting = typical scenario all persons seated, talking.<br>
   Workshop = assembly workshop environment, all persons doing light exercise, talking.<br>
   Training = one person (the trainer) standing, talking, all others seated, talking quietly (whispering). It is assumed the trainer is the infected person, for the worst case scenario.<br>
 You should specify if the event is a one off (give date) or recurrent use of the same space for the same activity, in which case select the month when the activity takes place.<br>

cara/apps/calculator/templates/report.html.j2

@@ -4,6 +4,8 @@
 	<meta charset="UTF-8">  
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 
+  	<title>Report | CARA (COVID Airborne Risk Assessment)</title>
+
 	<link rel="stylesheet" type="text/css" href="/calculator/static/css/report.css"> 
 </head>
 
@@ -63,7 +65,7 @@
 		infected.</p></li>
 		<li><p class="data_text">Activity type: 
 		{% if form.activity_type == "office" %}
-		Office work – typical scenario with all persons seated, talking.
+		Office/Meeting – typical scenario with all persons seated, talking.
 		{% elif form.activity_type == "workshop" %}
 		Workshop = assembly workshop environment, all persons doing light exercise, talking.
 		{% elif form.activity_type == "training" %}