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

Merge branch 'feature/UI_feedback' into 'master'

Browse source 
UI modifications

See merge request cara/cara!366
This commit is contained in:
Andre Henriques 2022-08-15 12:07:57 +02:00
commit 80573a585a
6 changed files with 91 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -46,6 +46,7 @@ CARA – COVID Airborne Risk Assessment tool
© Copyright 2020-2021 CERN. All rights not expressly granted are reserved.
**For use of the CARA model**
Henriques A, Mounet N, Aleixo L, Elson P, Devine J, Azzopardi G, Andreini M, Rognlien M, Tarocco N, Tang J. (2022). Modelling airborne transmission of SARS-CoV-2 using CARA: risk assessment for enclosed spaces. _Interface Focus 20210076_. https://doi.org/10.1098/rsfs.2021.0076
Reference on the Short-range expiratory jet model from:

8
cara/apps/calculator/model_generator.py
View file

@ -128,8 +128,8 @@ class FormData:
'window_type': 'window_sliding',
'window_height': 0.,
'window_width': 0.,
'windows_duration': 0.,
'windows_frequency': 0.,
'windows_duration': 10.,
'windows_frequency': 60.,
'windows_number': 0,
'window_opening_regime': 'windows_open_permanently',
'short_range_option': 'short_range_no',
@ -716,8 +716,8 @@ def baseline_raw_form_data() -> typing.Dict[str, typing.Union[str, float]]:
'ventilation_type': 'natural_ventilation',
'virus_type': 'SARS_CoV_2',
'volume_type': 'room_volume_explicit',
'windows_duration': '',
'windows_frequency': '',
'windows_duration': '10',
'windows_frequency': '60',
'window_height': '2',
'window_type': 'window_sliding',
'window_width': '2',

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

@ -183,7 +183,6 @@ function require_mask(option) {
function require_hepa(option) {
require_input_field("#hepa_amount", option);
set_disabled_status("#hepa_amount", !option);
}
function require_input_field(id, option) {
@ -236,6 +235,20 @@ function on_ventilation_type_change() {
});
}
function on_hepa_option_change() {
hepa_option = $('input[type=radio][name=hepa_option]')
hepa_option.each(function (index) {
if (this.checked) {
getChildElement($(this)).show();
require_fields(this);
}
else {
getChildElement($(this)).hide();
require_fields(this);
}
})
}
function on_wearing_mask_change() {
wearing_mask = $('input[type=radio][name=mask_wearing_option]')
wearing_mask.each(function (index) {
@ -711,6 +724,12 @@ $(document).ready(function () {
// Call the function now to handle forward/back button presses in the browser.
on_ventilation_type_change();
// When the hepa filtration option changes we want to make its respective
// children show/hide.
$("input[type=radio][name=hepa_option]").change(on_hepa_option_change);
// Call the function now to handle forward/back button presses in the browser.
on_hepa_option_change();
// When the mask_wearing_option changes we want to make its respective
// children show/hide.
$("input[type=radio][name=mask_wearing_option]").change(on_wearing_mask_change);
@ -850,7 +869,7 @@ $(document).ready(function () {
<option value="" selected disabled>Select type</option>
<option value="Breathing">Breathing</option>
<option value="Speaking">Speaking</option>
<option value="Shouting">Shouting</option>
<option value="Shouting">Shouting/Singing</option>
</select><br>
</div>
</div>
@ -861,8 +880,8 @@ $(document).ready(function () {
</div>
<div class='form-group row'>
<div class="col-sm-4"><label class="col-form-label col-form-label-sm"> Duration:</label></div>
<div class="col-sm-8"><input type="number" id="sr_duration_no_${index}" value="${value.duration}" class="form-control form-control-sm short_range_option" name="short_range_duration" min=1 placeholder="Minutes" onchange="validate_sr_time(this)" form="not-submitted"><br></div>
<div class="col-sm-6"><label class="col-form-label col-form-label-sm"> Duration (min):</label></div>
<div class="col-sm-6"><input type="number" id="sr_duration_no_${index}" value="${value.duration}" class="form-control form-control-sm short_range_option" name="short_range_duration" min=1 placeholder="Minutes" onchange="validate_sr_time(this)" form="not-submitted"><br></div>
</div>
<div class="form-group" style="max-width: 8rem">

116
cara/apps/templates/base/calculator.form.html.j2
View file

@ -88,31 +88,31 @@
<br>
<div class="form-group row">
<div class="col-sm-4">
<div class="col-sm-5">
<input type="radio" id="room_data_volume" name="volume_type" value="room_volume_explicit" onclick="require_fields(this)" tabindex="-1" required>
<label class="col-form-label">Room volume:</label>
<label class="col-form-label">Room volume (m³):</label>
</div>
<div class="col-sm-6">
<input type="number" step="any" id="room_volume" class="non_zero form-control" name="room_volume" placeholder="Room volume (m³)" min="0" data-has-radio="#room_data_volume">
<div class="col-sm-5">
<input type="number" step="any" id="room_volume" class="non_zero form-control" name="room_volume" placeholder="Room volume" min="0" data-has-radio="#room_data_volume">
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<div class="col-sm-5">
<input type="radio" id="room_data_dimensions" name="volume_type" value="room_volume_from_dimensions" onclick="require_fields(this)" tabindex="-1" required>
<label for="room_data_dimensions">Floor area:</label>
<label class="col-form-label" for="room_data_dimensions">Floor area (m²):</label>
</div>
<div class="col-sm-6">
<input type="number" step="any" id="floor_area" class="non_zero form-control" name="floor_area" placeholder="Room floor area (m²)" min="0" data-has-radio="#room_data_dimensions">
<div class="col-sm-5">
<input type="number" step="any" id="floor_area" class="non_zero form-control" name="floor_area" placeholder="Room floor area" min="0" data-has-radio="#room_data_dimensions">
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<label for="room_data_dimensions">Ceiling height:</label>
<div class="col-sm-5">
<label class="col-form-label ml-3" for="room_data_dimensions">Ceiling height (m):</label>
</div>
<div class="col-sm-6">
<input type="number" step="any" id="ceiling_height" class="non_zero form-control" name="ceiling_height" placeholder="Room ceiling height (m)" min="0" data-has-radio="#room_data_dimensions">
<div class="col-sm-5">
<input type="number" step="any" id="ceiling_height" class="non_zero form-control" name="ceiling_height" placeholder="Room ceiling height" min="0" data-has-radio="#room_data_dimensions">
</div>
</div>
@ -189,73 +189,79 @@
<div id="DIVmechanical_ventilation" class="tabbed" style="display:none">
<div class="split">
<div>
<input type="radio" id="mech_type_air_supply" name="mechanical_ventilation_type" value="mech_type_air_supply" class="center_radio" onclick="require_fields(this)" tabindex="-1">
<label for="mech_type_air_supply" class="col-form-label ml-2">Air supply flow rate</label>
<div style="min-width: 55%">
<input type="radio" id="mech_type_air_supply" name="mechanical_ventilation_type" value="mech_type_air_supply" class="center_radio" onclick="require_fields(this)" tabindex="-1">
<label for="mech_type_air_supply" class="col-form-label ml-2">Air supply flow rate (m³ / hour)</label>
</div>
<div>
<input type="number" step="any" id="air_supply" class="non_zero form-control" name="air_supply" min="0" placeholder="Flow rate (m³ / hour)" data-has-radio="#mech_type_air_supply"><br>
<input type="number" step="any" id="air_supply" class="non_zero form-control" name="air_supply" min="0" placeholder="Flow rate" data-has-radio="#mech_type_air_supply"><br>
</div>
</div>
<div class="split">
<div>
<input type="radio" id="mech_type_air_changes" name="mechanical_ventilation_type" value="mech_type_air_changes" class="center_radio" onclick="require_fields(this)" tabindex="-1">
<label for="mech_type_air_changes" class="col-form-label ml-2">Air changes per hour</label>
<div style="min-width: 55%">
<input type="radio" id="mech_type_air_changes" name="mechanical_ventilation_type" value="mech_type_air_changes" class="center_radio" onclick="require_fields(this)" tabindex="-1">
<label for="mech_type_air_changes" class="col-form-label ml-2">Air changes per hour (h⁻¹)</label>
</div>
<div>
<input type="number" step="any" id="air_changes" class="non_zero form-control" name="air_changes" min="0" placeholder="Air exchange (h⁻¹)" data-has-radio="#mech_type_air_changes"><br>
<input type="number" step="any" id="air_changes" class="non_zero form-control" name="air_changes" min="0" placeholder="Air exchange" data-has-radio="#mech_type_air_changes"><br>
</div>
</div>
</div>
<div id="DIVnatural_ventilation" class="tabbed" style="display:none">
<div class="split">
<div><label class="col-form-label">Number of windows:</label></div>
<div><input type="number" id="windows_number" class="non_zero form-control" name="windows_number" placeholder="Number (#)" min="1"><br></div>
<div id="DIVnatural_ventilation" style="display:none">
<div class="form-group row tabbed">
<div class="col-md-5"><label class="col-form-label">Number of windows:</label></div>
<div class="col-md-5"><input type="number" id="windows_number" class="non_zero form-control" name="windows_number" placeholder="Number" min="1"></div>
</div>
<div class="split">
<div><label class="col-form-label">Height of window: </label></div>
<div><input type="number" step="any" id="window_height" class="non_zero form-control" name="window_height" placeholder="Height (m)" min="0"><br></div>
<div class="form-group row tabbed">
<div class="col-md-5"><label class="col-form-label">Height of window (m): </label></div>
<div class="col-md-5"><input type="number" step="any" id="window_height" class="non_zero form-control" name="window_height" placeholder="Height" min="0"></div>
</div>
<div class='sub_title'>Window type:</div>
<input class="ml-2" type="radio" id="window_sliding" name="window_type" value="window_sliding" onclick="require_fields(this)" checked="checked">
<label for="window_sliding">Sliding / Side-Hung</label>
<input class="ml-2" type="radio" id="window_hinged" name="window_type" value="window_hinged" onclick="require_fields(this)">
<label for="window_hinged">Top- or Bottom-Hung</label><br>
<div class="split">
<div><label class="col-form-label">Width of window: </label></div>
<div><input type="number" step="any" id="window_width" class="non_zero disabled form-control" name="window_width" placeholder="Width (m)" min="0" data-has-radio="#window_hinged"><br></div>
<div class="form-group row tabbed">
<div class="col-md-5"><label class="col-form-label">Width of window (m): </label></div>
<div class="col-md-5"><input type="number" step="any" id="window_width" class="non_zero disabled form-control" name="window_width" placeholder="Width" min="0" data-has-radio="#window_hinged"></div>
</div>
<div class="split">
<div><label class="col-form-label">Opening distance: </label></div>
<div><input type="number" step="any" id="opening_distance" class="non_zero form-control" name="opening_distance" placeholder="Opening distance (m)" min="0"><br></div>
<div class="form-group row tabbed">
<div class="col-md-5"><label class="col-form-label">Opening distance (m): </label></div>
<div class="col-md-5"><input type="number" step="any" id="opening_distance" class="non_zero form-control" name="opening_distance" placeholder="Opening distance" min="0"></div>
</div>
<div class='sub_title'>Window open:</div>
<div class="form-group row">
<span class="tabbed center_radio"><input type="radio" id="windows_open_permanently" name="window_opening_regime" value="windows_open_permanently" onclick="require_fields(this)" checked="checked"></span>
<label for="windows_open_permanently" class="col-form-label ml-2">Permanently</label><br>
<div class='sub_title'>Window open:
<div data-tooltip="Permanently or periodically - e.g. open the window for 10 minutes (duration) every 60 minutes (frequency).">
<span class="tooltip_text">?</span>
</div>
</div>
<div class="form-group row">
<span class="tabbed center_radio"><input type="radio" id="windows_open_periodically" name="window_opening_regime" value="windows_open_periodically" onclick="require_fields(this)"></span>
<input class="ml-2" type="radio" id="windows_open_permanently" name="window_opening_regime" value="windows_open_permanently" onclick="require_fields(this)" checked="checked"></span>
<label for="windows_open_permanently" class="col-form-label ml-2">Permanently</label>
<input class="ml-2" type="radio" id="windows_open_periodically" name="window_opening_regime" value="windows_open_periodically" onclick="require_fields(this)"></span>
<label for="windows_open_periodically" class="col-form-label ml-2 mr-2">Periodically:</label><br>
<input type="number" step="any" id="windows_duration" class="non_zero disabled form-control col-sm-4" name="windows_duration" placeholder="Duration (min)" min="1" data-has-radio="#windows_open_periodically">
<input type="number" step="any" id="windows_frequency" class="non_zero disabled form-control col-sm-4" name="windows_frequency" placeholder="Frequency (min)" min="1" data-has-radio="#windows_open_periodically">
<div class="form-group row tabbed">
<div class="col-md-5"><label for="window_duration" class="col-form-label ml-2">Duration (min):</label></div>
<div class="col-md-5"><input type="number" step="any" id="windows_duration" class="non_zero disabled form-control" name="windows_duration" value="10" min="1" data-has-radio="#windows_open_periodically"></div>
</div>
<div class="form-group row tabbed">
<div class="col-md-5"><label for="window_frequency" class="col-form-label ml-2">Frequency (min):</label></div>
<div class="col-md-5"><input type="number" step="any" id="windows_frequency" class="non_zero disabled form-control" name="windows_frequency" value="60" min="1" data-has-radio="#windows_open_periodically"></div>
</div>
<br>
</div>
<br/>
<div class='sub_title'>HEPA filtration:</div>
<div class="split">
<div>
<input type="radio" id="hepa_no" name="hepa_option" value=0 onclick="require_fields(this)" checked="checked">
<label for="hepa_no" class="col-form-label ml-2">No</label>
<input class="ml-2" type="radio" id="hepa_yes" name="hepa_option" value=1 onclick="require_fields(this)">
<label for="hepa_yes" class="col-form-label ml-2">Yes</label>
</div>
<div>
<input type="number" step="any" id="hepa_amount" class="non_zero disabled form-control" name="hepa_amount" placeholder="Flow rate (m³ / hour)" min="0" data-has-radio="#hepa_yes">
</div>
</div>
<div>
<input type="radio" id="hepa_yes" name="hepa_option" value=1 onclick="require_fields(this)" data-enables="#DIVhepa_amount">
<label for="hepa_yes" class="col-form-label ml-2">Yes</label>
<input class="ml-2" type="radio" id="hepa_no" name="hepa_option" value=0 onclick="require_fields(this)" checked="checked">
<label for="hepa_no" class="col-form-label ml-2">No</label>
</div>
<div class="form-group row tabbed" id="DIVhepa_amount">
<div class="col-md-5"><label for="hepa_amount" class="col-form-label">Flow rate (m³ / hour):</label></div>
<div class="col-md-5"><input type="number" step="any" id="hepa_amount" class="non_zero form-control" name="hepa_amount" placeholder="Flow rate" min="0" data-has-radio="#hepa_yes"></div>
</div>
<hr width="80%">
<b>Face masks:</b>
@ -303,7 +309,7 @@
<div class="form-group row">
<div class="col-sm-4"><label class="col-form-label">Total number of occupants:</label></div>
<div class="col-sm-6 align-self-center"><input type="number" id="total_people" class="form-control" name="total_people" placeholder="Number (#)" min=1 required></div>
<div class="col-sm-6 align-self-center"><input type="number" id="total_people" class="form-control" name="total_people" placeholder="Number" min=1 required></div>
</div>
<div class="form-group row">
@ -576,7 +582,7 @@
<b>Ventilation data:</b> <br>
<ul>
<li>Mechanical ventilation = the HVAC supply of fresh air. Check the flow rates with the concerned technical department.</li>
<li>Natural ventilation = the type of window opening. The opening distance is between the fixed frame and movable part when open (commonly used values are window height of 1.6m and window opening between 0.15m and 0.6m). In case of periodic opening, specify the duration (e.g. for 10 min) and frequency (e.g. every 60 min).</li>
<li>Natural ventilation = the type of window opening. The opening distance is between the fixed frame and movable part when open (commonly used values are window height of 1.6m and window opening between 0.15m and 0.6m). In case of periodic opening, specify the duration (e.g. 10 min) per hour.</li>
<li>HEPA filtration = the air flow of the device. The following values are based on the different fan velocities of a specific commercial device proposed by the HSE Unit:</li>
<ul>
<li>Level 6 (max) = 430 m<sup>3</sup>/h (noisy),</li>

2
cara/apps/templates/base/calculator.report.html.j2
View file

@ -385,7 +385,7 @@
</p></li>
<ul>
{% for interaction in form.short_range_interactions %}
<li>Expiratory activity {{ loop.index if form.short_range_interactions|length > 1 }}: {{ interaction.expiration }} </li>
<li>Expiratory activity {{ loop.index if form.short_range_interactions|length > 1 }}: {{ "Shouting/Singing" if interaction.expiration == "Shouting" else interaction.expiration }} </li>
<li>Start time {{ loop.index if form.short_range_interactions|length > 1 }}: {{ interaction.start_time }} </li>
<li>Duration {{ loop.index if form.short_range_interactions|length > 1 }}: {{ interaction.duration }} {{ "minutes" if interaction.duration|float > 1 else "minute" }}</li>
{% endfor %}

2
cara/apps/templates/base/userguide.html.j2
View file

@ -95,7 +95,7 @@ If there are multiple windows of different sizes, you should take an average.</p
If you open the window at different distances throughout the day, choose an average value.</p>
<p>When using natural ventilation, the circulation of air is simulated as a function of the difference between the temperature inside the room and the outside air temperature. The average outdoor temperature for each hour of the day has been computed for every month of the year based on historical data for Geneva, Switzerland.
It is therefore very important to enter the correct time and date in the event data section.
Finally, you must specify if the windows are open permanently (at all the times), or periodically (in intervals for a certain duration and frequency - both in minutes) - e.g. open the window for 10 minutes (duration) every 60 minutes (frequency).</p>
Finally, you must specify if the windows are open permanently (at all the times), or periodically (in intervals for a certain duration during the course of the day) - e.g. open the window for 10 minutes (duration) every 60 minutes (frequency).</p>
<br>
<h4>No ventilation</h4>
<br>