pingu_98/cara
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finalised input validation and updated form with new fields

Browse source
This commit is contained in:
gaazzopa 2020-11-05 11:36:36 +01:00
parent 825ec88025
commit f98a96f546
2 changed files with 55 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
cara/apps/calculator/static/form.html
View file

@ -14,8 +14,8 @@
<body onload="clear_form()">
<h1> <p><b>CARA</b> Covid Airborne Risk Assessment tool (beta)</p></h1>
<b> <p style="text-align:right"> Please send feedback to <a href="mailto:CARA-dev@cern.ch">CARA-dev@cern.ch</a></p></b>
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='return on_submit(this)'>
<div style="width: 33%; float:left;">
@ -26,22 +26,22 @@
<b>Room data:</b><br>
<input type="radio" id="room_type_volume" name="volume_type" value="room_volume" onclick="require_fields(this)" required>
Room volume: &nbsp;&nbsp; <input type="number" id="room_volume" name="room_volume" placeholder="Room volume (m³)" min="0"><br>
or
<input type="radio" id="room_type_dimensions" name="volume_type" value="room_dimensions" onclick="require_fields(this)" required>
Floor area: &nbsp;&nbsp; <input type="number" id="floor_area" name="floor_area" placeholder="Room floor area (m²)" min="0"><br>
&nbsp;&nbsp;&nbsp;&nbsp; Ceiling height: &nbsp;&nbsp; <input type="number" id="ceiling_height" name="ceiling_height" placeholder="Room ceiling height (m²)" min="0"><br>
<hr width="80%">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ceiling height: &nbsp;&nbsp; <input type="number" id="ceiling_height" name="ceiling_height" placeholder="Room ceiling height (m²)" min="0"><br>
<hr width="80%">
<!-- 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>
<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="" />
<div id="DIVmechanical_ventilation" style="display:none">
<input type="radio" id="air_type_supply" name="air_type" value="air_supply" onclick="require_fields(this)">
Air supply flow rate &nbsp;&nbsp; <input type="number" id="air_supply" name="air_supply" min="0"><br>
<input type="radio" id="air_type_changes" name="air_type" value="air_changes" onclick="require_fields(this)">
Air changes per hour &nbsp;&nbsp; <input type="number" id="air_changes" name="air_changes" min="0"><br>
</div>
<div id="DIVnatural_ventilation" style="display:none">
@ -57,16 +57,13 @@
<label for="breaks">Breaks</label><br>
</div>
<br>
HEPA filtration:
<input type="radio" id="hepa_filter" name="filter_type" value="hepa_yes">
<label for="hepa_filter">Yes</label>
<input type="radio" id="hepa_filter" name="filter_type" value="hepa_no" checked="checked">
<label for="hepa_filter">No</label>
<hr width="80%">
HEPA filtration:
<input type="radio" id="hepa_filter" name="hepa_option" value=1>
<label for="hepa_filter">Yes</label>
<input type="radio" id="hepa_filter" name="hepa_option" value=0 checked="checked">
<label for="hepa_filter">No</label>
<hr width="80%">
</div>
<div style="width: 33%; float:left;">
@ -74,8 +71,8 @@
<!-- Event Options -->
<b>Event data:</b><br>
Attendees:<br>
Total number of occupants: <input type="number" name="total_people" min="1" required><br>
Number of infected people: <input type="number" name="infected_people" min="1" required><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>
<hr width="80%">
Activity type: <select id="activity_type" name="activity_type">
<option value="office">Office</option>
@ -87,9 +84,9 @@
Infected person(s) presence: <br>
Start: <input type="time" id="inf_activity_start" name="activity_start" required> &nbsp;&nbsp;
Finish: <input type="time" id="inf_activity_finish" name="activity_finish" required><br>
<hr width="80%">
When is the event?<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>Single event</input>
Date: <input type="text" id="datepicker" name="single_event_date" unrequired><br>
<input type="radio" id="event_type_recurrent" name="event_type" value="recurrent_event" onclick="require_fields(this)" required>Recurrent usage</input>
@ -110,8 +107,10 @@ When is the event?<br>
<hr width="80%">
<!-- Lunch Options -->
Lunch break:
<input type="radio" id="lunch_option" name="lunch_option" value=0 checked="checked"> <label for="lunch_option">No</label>
<input type="radio" id="lunch_option" name="lunch_option"></input> <label for="lunch_option">Yes</label><br>
<input type="radio" id="lunch_option_no" name="lunch_option" value=0 checked="checked" onclick="require_fields(this)">
<label for="lunch_option">No</label>
<input type="radio" id="lunch_option_yes" name="lunch_option" value=1 onclick="require_fields(this)"></input>
<label for="lunch_option">Yes</label><br>
<div id="DIVlunch_break">
Start: <input type="time" id="lunch_start" name="lunch_start" unrequired> &nbsp;&nbsp;
@ -142,10 +141,7 @@ When is the event?<br>
Face masks: <br>
Are masks worn when occupants are at workstations? <br>
<input type="radio" id="continuous" name="mask_wearing" value="continuous" required>Yes
<input type="radio" id="removed" name="mask_wearing" value="removed" required checked="checked">No
<input type="radio" id="removed" name="mask_wearing" value="removed" required checked="checked">No
</div>
<div style="width: 33%; float:left;">
@ -230,7 +226,7 @@ function objectifyForm(formArray) {
var value = Number(formArray[i]['value']);
if (formArray[i]['name'] === "simulation_name")
if (formArray[i]['name'] === "simulation_name" || formArray[i]['name'] === "room_number")
returnArray[formArray[i]['name']] = formArray[i]['value'].toString();
else if(isNaN(value) || !formArray[i]['value'].trim())
returnArray[formArray[i]['name']] = formArray[i]['value'];

68
cara/apps/calculator/static/js/form.js
View file

@ -2,6 +2,9 @@ function clear_form(){
document.covid_calculator.reset();
}
function test() {
}
/* -------Show/Hide DIVs------- */
function show(show, var_id, obj) {
var show = document.getElementById(show);
@ -16,30 +19,21 @@ function show(show, var_id, obj) {
}
function show_hide(show, hide, obj) {
var show = document.getElementById(show);
var hide = document.getElementById(hide);
if (show.style.display === "none") {
show.style.display = "block";
hide.style.display = "none";
}// else {
// show.style.display = "none";
//}
var no_ventilation = document.getElementById("no_ventilation");
require_fields(obj);
}
/*$(document).on("click", "input[name='ventilation_type']", function(){
thisRadio = $(this);
if (thisRadio.hasClass("imChecked")) {
thisRadio.removeClass("imChecked");
thisRadio.prop('checked', false);
} else {
thisRadio.prop('checked', true);
thisRadio.addClass("imChecked");
};
})*/
if (show.style.display === "block") {
show.style.display = "none";
obj.checked = false;
no_ventilation.checked = true;
unrequire_fields(obj);
} else if (show.style.display === "none") {
show.style.display = "block";
hide.style.display = "none";
require_fields(obj);
} }
/* -------Required fields------- */
function require_fields(obj){
@ -74,19 +68,23 @@ function require_fields(obj){
case "event_type_recurrent":
require_single_event(false);
break;
case "BUTTON_lunch":
var button = document.getElementById("lunch_option");
if (button.value == 0)
require_lunch(false);
else if (button.value == 1)
require_lunch(true);
case "lunch_option_no":
require_lunch(false);
break;
case "BUTTON_coffee":
var button = document.getElementById("coffee_option");
if (button.value == 0)
require_coffee(false);
else if (button.value == 1)
require_coffee(true);
case "lunch_option_yes":
require_lunch(true);
break;
default:
break;
} }
function unrequire_fields(obj){
switch(obj.id) {
case "mechanical":
require_mechanical_ventilation(false);
break;
case "natural":
require_natural_ventilation(false);
break;
default:
break;
@ -132,10 +130,6 @@ function require_lunch(option) {
$("#lunch_finish").prop('required',option);
}
function require_coffee(option) {
$("#coffee_breaks").prop('required',option);
}
/* -------UI------- */
$(function() {
$("#datepicker").datepicker();