647 lines
32 KiB
Django/Jinja
647 lines
32 KiB
Django/Jinja
{% extends "layout.html.j2" %}
|
|
|
|
{% set DEBUG=False %}
|
|
{% set active_page="calculator/" %}
|
|
|
|
{% block extra_headers %}
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="{{ calculator_prefix }}/static/css/form.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"/>
|
|
{% endblock extra_headers %}
|
|
|
|
{% block body_scripts %}
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
|
|
<script src="{{ calculator_prefix }}/static/js/form.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
|
{% endblock body_scripts %}
|
|
|
|
|
|
{% block main %}
|
|
|
|
<span class="caimira_version">v{{ calculator_version }}</span>
|
|
<span class="feedback">Please send feedback to <a href="mailto:CAiMIRA-dev@cern.ch">CAiMIRA-dev@cern.ch</a></span>
|
|
<header class= "bg-light">
|
|
<div class="container container--padding">
|
|
<div class="d-flex header-height">
|
|
<h1 class="align-self-center">Calculator</h1>
|
|
<img src="/static/images/caimira_logo.200x200.png" class="logo_form align-self-center ml-3">
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{% if DEBUG %}
|
|
<form id="covid_calculator" name="covid_calculator" onsubmit="return debug_submit(this)" class="form-inline">
|
|
{% else %}
|
|
<form id="covid_calculator" name="covid_calculator" action="{{ calculator_prefix }}/report" onsubmit="return validate_form(this)" method="POST">
|
|
{% endif %}
|
|
{{ xsrf_form_html }}
|
|
|
|
<input type="hidden" name="calculator_version" value="{{ calculator_version }}">
|
|
|
|
<section>
|
|
<div class="container container--padding">
|
|
<div class="split">
|
|
<div>
|
|
<!-- General Options -->
|
|
|
|
<div class="form-group">
|
|
<b><label class="col-form-label">Simulation name:</label></b>
|
|
<input type="text" class="col-sm-10 form-control" name="simulation_name" placeholder="E.g. Workshop without masks" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<b><label class="col-form-label">Room number:</label></b>
|
|
<input type="text" class="col-sm-10 form-control" name="room_number" placeholder="E.g. 17/R-033" required>
|
|
</div>
|
|
|
|
<hr width="80%">
|
|
|
|
<b>Virus data:</b>
|
|
|
|
<div data-tooltip="Choose the SARS-CoV-2 Variant of Concern (VOC).">
|
|
<span class="tooltip_text">?</span>
|
|
</div><br>
|
|
|
|
<div class="form-group row">
|
|
<div class="col-sm-3"><label class="col-form-label">Variant:</label></div>
|
|
<div class="col-sm-7">
|
|
<select id="Variant" name="virus_type" class="form-control">
|
|
<option value="SARS_CoV_2">SARS-CoV-2 (nominal strain)</option>
|
|
<option value="SARS_CoV_2_ALPHA">SARS-CoV-2 (Alpha VOC)</option>
|
|
<option value="SARS_CoV_2_BETA">SARS-CoV-2 (Beta VOC)</option>
|
|
<option value="SARS_CoV_2_GAMMA">SARS-CoV-2 (Gamma VOC)</option>
|
|
<option value="SARS_CoV_2_DELTA">SARS-CoV-2 (Delta VOC)</option>
|
|
<option selected value="SARS_CoV_2_OMICRON">SARS-CoV-2 (Omicron VOC)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<hr width="80%">
|
|
|
|
<b>Room data:</b>
|
|
{% block room_data %}
|
|
<div data-tooltip="The area you wish to study (choose one of the 2 options). Indicate if a central (radiator-type) heating system is in use.">
|
|
<span class="tooltip_text">?</span>
|
|
</div>
|
|
{% endblock room_data %}
|
|
|
|
<br>
|
|
|
|
<div class="form-group row">
|
|
<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 (m³):</label>
|
|
</div>
|
|
<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-5">
|
|
<input type="radio" id="room_data_dimensions" name="volume_type" value="room_volume_from_dimensions" onclick="require_fields(this)" tabindex="-1" required>
|
|
<label class="col-form-label" for="room_data_dimensions">Floor area (m²):</label>
|
|
</div>
|
|
<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-5">
|
|
<label class="col-form-label ml-3" for="room_data_dimensions">Ceiling height (m):</label>
|
|
</div>
|
|
<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>
|
|
|
|
<div class="split">
|
|
<div>Central heating system in use:</div>
|
|
<div>
|
|
<input class="ml-2" type="radio" id="heating_no" name="room_heating_option" value=0 checked="checked">
|
|
<label for="heating_no">No</label>
|
|
<input class="ml-2" type="radio" id="heating_yes" name="room_heating_option" value=1>
|
|
<label for="heating_yes">Yes</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-sm-5"><label class="col-form-label">Geographic location:</label></div>
|
|
<div class="col-sm-5 align-self-center"><select id="location_select" form="not-submitted" class="form-control" name="location_select" required></select></div>
|
|
</div>
|
|
<div style="display: none">
|
|
<!--
|
|
This block allows us to have hidden input values which are retained during forward/back navigation, as per
|
|
https://stackoverflow.com/a/6384276/741316
|
|
-->
|
|
<input type="text" name="location_name" value="Geneva, CHE">
|
|
<input type="text" name="location_latitude" value="46.20833">
|
|
<input type="text" name="location_longitude" value="6.14275">
|
|
<input type="text" name="inside_temp" value="293">
|
|
<input type="text" name="humidity" value="">
|
|
</div>
|
|
|
|
<hr width="80%">
|
|
|
|
<!-- Ventilation Options -->
|
|
<b>Ventilation data:</b>
|
|
<div data-tooltip="The available means of venting / filtration of indoor spaces.">
|
|
<span class="tooltip_text">?</span>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class='sub_title'>Ventilation type:</div>
|
|
|
|
<div class="split">
|
|
<div>
|
|
<input type="radio" id="no_ventilation" name="ventilation_type" value="no_ventilation" checked>
|
|
<label for="no_ventilation">No ventilation</label>
|
|
<input class="ml-2" type="radio" id="mechanical_ventilation" name="ventilation_type" value="mechanical_ventilation" data-enables="#DIVmechanical_ventilation">
|
|
<label for="mechanical_ventilation">Mechanical</label>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="natural_ventilation" name="ventilation_type" value="natural_ventilation" data-enables="#DIVnatural_ventilation" data-toggle="modal" data-target="#warning_modal">
|
|
<label for="natural_ventilation">Natural</label><br>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="warning_modal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Natural Ventilation</h4>
|
|
<button type="button" class="close align-self-center" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Single-sided ventilation is assumed in the model and is typically effective for room depths up to a depth 2.5 x the ceiling height.
|
|
If these conditions are not met, the air exchange might not be homogenous producing an artificially lower risk further away from the window.
|
|
<br>
|
|
<br>
|
|
<img src="/static/images/nat_vent_dimensions.png" id="nat_vent_image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="DIVmechanical_ventilation" class="tabbed" style="display:none">
|
|
<div class="split">
|
|
<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" data-has-radio="#mech_type_air_supply"><br>
|
|
</div>
|
|
</div>
|
|
<div class="split">
|
|
<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" data-has-radio="#mech_type_air_changes"><br>
|
|
</div>
|
|
</div>
|
|
</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="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="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="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 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>
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
<div data-tooltip="Masks worn at workstations or removed when a 2m physical distance is respected and proper venting is ensured.">
|
|
<span class="tooltip_text">?</span>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class='sub_title'>Are masks worn when occupants are at workstations?</div>
|
|
<input type="radio" id="mask_on" name="mask_wearing_option" value="mask_on" data-enables="#DIVmasks_used">
|
|
<label for="mask_on">Yes</label>
|
|
<input class="ml-2" type="radio" id="mask_off" name="mask_wearing_option" value="mask_off" checked="checked">
|
|
<label for="mask_off">No</label><br>
|
|
|
|
<div id="DIVmasks_used" style="display:none">
|
|
<div class='sub_title'>Type of masks used:</div>
|
|
<div class='split'>
|
|
<div>
|
|
<input type="radio" id="mask_type_1" name="mask_type" value="Type I" checked="checked" onclick="require_fields(this)">
|
|
<label for="mask_type_1">
|
|
Surgical/Type I
|
|
<img class="mask_icons" src="/static/images/masks/t1.png">
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="mask_type_ffp2" name="mask_type" value="FFP2" onclick="require_fields(this)">
|
|
<label for="mask_type_ffp2">
|
|
Respirator/FFP2
|
|
<img class="mask_icons" src="/static/images/masks/ffp2.png">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr width="80%">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<!-- Event Options -->
|
|
<b>Event data:</b>
|
|
<div data-tooltip="The total no. of occupants in the room and how many of them you assume are infected.">
|
|
<span class="tooltip_text">?</span>
|
|
</div><br>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<span id="training_limit_error" class="red_text" hidden>Conference/Training activities limited to 1 infected<br></span>
|
|
<hr width="80%">
|
|
|
|
<div class="form-group row">
|
|
<div class="col-sm-4"><label class="col-form-label">Activity type:</label></div>
|
|
<div class="col-sm-6">
|
|
<select id="activity_type" name="activity_type" class="form-control">
|
|
<option value="office">Office</option>
|
|
<option value="smallmeeting">Small meeting (<10 occ.)</option>
|
|
<option value="largemeeting">Large meeting (>=10 occ.)</option>
|
|
<option value="callcentre">Call Centre</option>
|
|
<option value="controlroom-day">Control Room - Day shift</option>
|
|
<option value="controlroom-night">Control Room - Night shift</option>
|
|
<option value="library">Library</option>
|
|
<option value="lab">Laboratory</option>
|
|
<option value="workshop">Workshop</option>
|
|
<option value="training">Conference/Training</option>
|
|
<option value="gym">Gym</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div style=" margin-right:2rem;">
|
|
<div class="boxMargin pb-0">
|
|
<div class='sub_title'>Exposed person(s) presence:</div>
|
|
<div class="split">
|
|
<div>
|
|
<label class="tabbed mb-0">Start:</label>
|
|
<input type="time" id="exposed_start" class="start_time" data-time-group="exposed" data-lunch-break="exposed_lunch" name="exposed_start" value="08:30" required>
|
|
</div>
|
|
<div>
|
|
<label class="tabbed mb-0">Finish:</label>
|
|
<input type="time" id="exposed_finish" class="finish_time" data-time-group="exposed" data-lunch-break="exposed_lunch" name="exposed_finish" value="17:30" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
<div class="boxMargin pb-0">
|
|
<div class='sub_title'>Infected person(s) presence:</div>
|
|
<div class="split">
|
|
<div>
|
|
<label class="tabbed mb-0">Start: </label>
|
|
<input type="time" id="infected_start" class="start_time" data-time-group="infected" data-lunch-break="infected_lunch" name="infected_start" value="08:30" required>
|
|
</div>
|
|
<div>
|
|
<label class="tabbed mb-0">Finish: </label>
|
|
<input type="time" id="infected_finish" class="finish_time" data-time-group="infected" data-lunch-break="infected_lunch" name="infected_finish" value="17:30" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
|
|
<hr width="80%">
|
|
|
|
<div class="split">
|
|
<div style="min-width: 22em">Short-range interactions (without masks):</div>
|
|
<div>
|
|
<input class="ml-2" type="radio" id="short_range_no" name="short_range_option" value="short_range_no" checked="checked">
|
|
<label for="short_range_no">No</label>
|
|
<input class="ml-2" type="radio" id="short_range_yes" name="short_range_option" value="short_range_yes" data-enables="#DIVsr_interactions">
|
|
<label for="short_range_yes">Yes</label>
|
|
</div>
|
|
</div>
|
|
<p id="short_range_warning" class="red_text" style="margin-right: 2rem">The use of masks mitigates exposure at short-range. The analytical model with short-range interactions does not take mask wearing into account.</p>
|
|
|
|
<div id="DIVsr_interactions" class="none">
|
|
<div class="d-flex">
|
|
<button type="button" id="set_interactions_button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#short_range_dialog" data-keyboard="false" data-backdrop="static">Set interactions</button>
|
|
<p class="align-self-center pl-4"><b id="sr_interactions">0</b> short-range interactions.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="short_range_dialog" tabindex="-1" role="dialog" aria-labelledby="short_range_dialogTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="short_range_dialogTitle">Short-range interactions</h5>
|
|
<button type="button" class="close close_btn_frm_field">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
|
|
<div class="col-md-12 p-0 form-group" id="dialog_sr"></div>
|
|
<div class="text-center"><button type="button" class="add_node_btn_frm_field btn btn-primary btn-sm">Add row</button></div>
|
|
<input type="text" class="form-control d-none" name="short_range_interactions">
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary dismiss_btn_frm_field" data-dismiss="modal">Clear all</button>
|
|
<button type="button" class="btn btn-primary close_btn_frm_field">Save all</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr width="80%">
|
|
|
|
<div class="form-group row">
|
|
<div class="col-sm-4"><label class="col-form-label">Which month is the event?</label></div>
|
|
<div class="col-sm-6 align-self-center">
|
|
<select id="event_month" name="event_month" class="form-control" value="January" required>
|
|
<option value="January">January</option>
|
|
<option value="February">February</option>
|
|
<option value="March">March</option>
|
|
<option value="April">April</option>
|
|
<option value="May">May</option>
|
|
<option value="June">June</option>
|
|
<option value="July">July</option>
|
|
<option value="August">August</option>
|
|
<option value="September">September</option>
|
|
<option value="October">October</option>
|
|
<option value="November">November</option>
|
|
<option value="December">December</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<hr width="80%">
|
|
|
|
<span id="activity_breaks">
|
|
<b>Activity breaks:</b>
|
|
<div data-tooltip="Input breaks that, by default, are the same for infected/exposed person(s) unless specified otherwise.">
|
|
<span class="tooltip_text">?</span>
|
|
</div>
|
|
</span><br>
|
|
|
|
<!-- Lunch Options -->
|
|
<div class="form-check">
|
|
<input type="checkbox" id="infected_dont_have_breaks_with_exposed" class="tabbed form-check-input" name="infected_dont_have_breaks_with_exposed" value='1' onclick="toggle_split_breaks()">
|
|
<label for="infected_dont_have_breaks_with_exposed" class="form-check-label col-sm-12">Input separate breaks for infected and exposed person(s)</label>
|
|
|
|
</div><br>
|
|
<div class="breakBoxExposed" id="DIVexposed_breaks">
|
|
<span id="exposed_break_title" style="display:none;"><b>Exposed person(s) breaks:</b></span>
|
|
<div class="boxMargin">
|
|
<div class="split">
|
|
<div>Lunch break:</div>
|
|
<div>
|
|
<input type="radio" id="exposed_lunch_option_no" data-lunch-select="exposed" name="exposed_lunch_option" value=0>
|
|
<label for="exposed_lunch_option_no">No</label>
|
|
<input class="ml-2" type="radio" id="exposed_lunch_option_yes" data-lunch-select="exposed" data-enables="#DIVexposed_lunch_time" name="exposed_lunch_option" value=1 checked="checked">
|
|
<label for="exposed_lunch_option_yes">Yes</label><br>
|
|
</div>
|
|
</div>
|
|
<div id="DIVexposed_lunch_time" class="split">
|
|
<div>
|
|
Start: <input type="time" id="exposed_lunch_start" class="start_time" data-time-group="exposed_lunch" data-lunch-for="exposed" data-has-radio="#exposed_lunch_option_yes" name="exposed_lunch_start" value="12:30" required onclick="require_fields(this)">
|
|
</div>
|
|
<div>
|
|
Finish: <input type="time" id="exposed_lunch_finish" class="finish_time" data-time-group="exposed_lunch" data-lunch-for="exposed" data-has-radio="#exposed_lunch_option_yes" name="exposed_lunch_finish" value="13:30" required onclick="require_fields(this)"><br>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Coffee Options -->
|
|
<div class="split">
|
|
<div>Coffee Breaks:</div>
|
|
<div>
|
|
<input type="radio" id="exposed_coffee_break_0" name="exposed_coffee_break_option" value="coffee_break_0" checked="checked">
|
|
<label for="exposed_coffee_break_0">No breaks</label>
|
|
<input class="ml-2" type="radio" id="exposed_coffee_break_2" name="exposed_coffee_break_option" value="coffee_break_2" data-enables="#DIVexposed_breaks_duration">
|
|
<label for="exposed_coffee_break_2">2</label>
|
|
<input class="ml-2" type="radio" id="exposed_coffee_break_4" name="exposed_coffee_break_option" value="coffee_break_4" data-enables="#DIVexposed_breaks_duration">
|
|
<label for="exposed_coffee_break_4">4</label><br>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div id="DIVexposed_breaks_duration" style="display:none">
|
|
<div class="split">
|
|
<div>Duration (minutes):</div>
|
|
<div>
|
|
<select id="exposed_coffee_duration" name="exposed_coffee_duration">
|
|
<option value="5">5</option>
|
|
<option value="10">10</option>
|
|
<option value="15">15</option>
|
|
<option value="20">20</option>
|
|
<option value="25">25</option>
|
|
<option value="30">30</option>
|
|
</select><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
|
|
<div class="breakBoxInfected" id="DIVinfected_breaks">
|
|
<b>Infected person(s) breaks:</b>
|
|
<div class="boxMargin">
|
|
<div class="split">
|
|
<div>Lunch break:</div>
|
|
<div>
|
|
<input type="radio" id="infected_lunch_option_no" data-lunch-select="infected" name="infected_lunch_option" value=0 onclick="require_fields(this)">
|
|
<label for="infected_lunch_option_no">No</label>
|
|
<input class="ml-2" type="radio" id="infected_lunch_option_yes" data-lunch-select="infected" data-enables="#DIVinfected_lunch_time" name="infected_lunch_option" value=1 checked="checked" onclick="require_fields(this)">
|
|
<label for="infected_lunch_option_yes">Yes</label><br>
|
|
</div>
|
|
</div>
|
|
<div id="DIVinfected_lunch_time" class="split">
|
|
<div>
|
|
Start: <input type="time" id="infected_lunch_start" class="start_time" data-time-group="infected_lunch" data-lunch-for="infected" data-has-radio="#infected_lunch_option_yes" name="infected_lunch_start" value="12:30" onclick="require_fields(this)">
|
|
</div>
|
|
<div>
|
|
Finish: <input type="time" id="infected_lunch_finish" class="finish_time" data-time-group="infected_lunch" data-lunch-for="infected" data-has-radio="#infected_lunch_option_yes" name="infected_lunch_finish" value="13:30" onclick="require_fields(this)"><br>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Coffee Options -->
|
|
<div class="split">
|
|
<div>Coffee Breaks:</div>
|
|
<div>
|
|
<input type="radio" id="infected_coffee_break_0" name="infected_coffee_break_option" value="coffee_break_0" checked="checked">
|
|
<label for="infected_coffee_break_0" >No breaks</label>
|
|
<input style="ml-2" type="radio" id="infected_coffee_break_2" name="infected_coffee_break_option" value="coffee_break_2" data-enables="#DIVinfected_breaks_duration">
|
|
<label for="infected_coffee_break_2">2</label>
|
|
<input style="ml-2" type="radio" id="infected_coffee_break_4" name="infected_coffee_break_option" value="coffee_break_4" data-enables="#DIVinfected_breaks_duration">
|
|
<label for="infected_coffee_break_4">4</label><br>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div id="DIVinfected_breaks_duration" style="display:none">
|
|
<div class="split">
|
|
<div>Duration (minutes):</div>
|
|
<div>
|
|
<select id="DIVinfected_coffee_duration" name="infected_coffee_duration">
|
|
<option value="5">5</option>
|
|
<option value="10">10</option>
|
|
<option value="15">15</option>
|
|
<option value="20">20</option>
|
|
<option value="25">25</option>
|
|
<option value="30">30</option>
|
|
</select><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
|
|
<br style="clear:both;">
|
|
<i>Coffee breaks are spread evenly throughout the day.</i><br>
|
|
|
|
|
|
<br><br>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<div class="center">
|
|
<button type='submit' class="btn btn-primary bigButton" id="generate_report">
|
|
Generate report
|
|
</button>
|
|
</div>
|
|
|
|
<br><br>
|
|
|
|
<div class="container container--padding">
|
|
<b>Quick Guide:</b><br>
|
|
This tool simulates the airborne spread SARS-CoV-2 virus in a finite volume and estimates the risk of COVID-19 infection. It is based on current scientific data and can be used to compare the effectiveness of different mitigation measures.<br>
|
|
<b>Virus data:</b> <br>
|
|
SARS-CoV-2 covers the original "wild type" strain of the virus and three variants of concern (VOC):<br>
|
|
<ul>
|
|
<li>Alpha (also known as B.1.1.7, first identified in UK, Sept 2020),</li>
|
|
<li>Beta (also known as B.1.351, first identified in South Africa, May 2020).</li>
|
|
<li>Gamma (also known as P.1, first identified in Brazil/Japan, Jan 2021).</li>
|
|
<li>Delta (also known as B.1.617.2, first identified in India, Oct 2020).</li>
|
|
<li>Omicron (also known as B.1.1.529, first identified in South Africa, November 2021).</li>
|
|
</ul>
|
|
Modify the default as necessary, according to local area prevalence e.g. for <a href="https://www.covid19.admin.ch/fr/epidemiologic/virus-variants?detGeo=GE">Geneva</a>
|
|
or <a href="https://www.santepubliquefrance.fr/dossiers/coronavirus-covid-19/covid-19-cartographie-des-variants-en-france-donnees-par-region-et-par-departement">Ain (France)</a>.<br>
|
|
<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. 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>
|
|
<li>Level 5 = 250 m<sup>3</sup>/h (ok w.r.t. noise, recommended),</li>
|
|
<li>Level 4 = 130 m<sup>3</sup>/h (silent),</li>
|
|
<li>Level 3 = 95 m<sup>3</sup>/h (silent).</li>
|
|
</ul>
|
|
</ul>
|
|
<b>Activity types:</b><br>
|
|
The type of activity applies to both the infected and exposed persons:
|
|
<ul>
|
|
<li>Office = all seated, talking 33% of the time,</li>
|
|
<li>Small meeting (< 10 occ.) = all seated, talking time shared between all persons,</li>
|
|
<li>Large meeting (>= 10 occ.) = speaker is standing and speaking 33% of the time, other occupants are seated,</li>
|
|
<li>Call Centre = all seated, continuous talking,</li>
|
|
<li>Control Room (day shift) = all seated, talking 50% of the time,</li>
|
|
<li>Control Room (night shift) = all seated, talking 10% of the time,</li>
|
|
<li>Library = all seated, no talking, just breathing,</li>
|
|
<li>Laboratory = light physical activity, talking 50% of the time,</li>
|
|
<li>Workshop = moderate physical activity, talking 50% of the time,</li>
|
|
<li>Conference/Training = speaker/trainer standing and talking, rest seated and talking quietly.
|
|
Speaker/Trainer assumed infected (worst case scenario),</li>
|
|
<li>Gym = heavy exercise, no talking, just breathing.</li>
|
|
</ul>
|
|
<b>Activity breaks:</b><br>
|
|
<ul>
|
|
<li>If coffee breaks are included, they are spread out evenly throughout the day,
|
|
in addition to any lunch break (if applicable).</li>
|
|
</ul>
|
|
Refer to <a href="{{ calculator_prefix }}/user-guide"> Calculator App user guide </a>
|
|
for more detailed explanations on how to use this tool. <br>
|
|
</div>
|
|
|
|
<div class="center container--padding pr-3 pl-3">
|
|
<button class="btn btn-primary bigButton">
|
|
<a href="{{ calculator_prefix }}/user-guide" class="{{ "nav-link active" if "user-guide" in active_page else "nav-link" }}" style="color:white">User guide</a>
|
|
</button>
|
|
<button class="btn btn-primary bigButton ml-2" type="button" data-toggle="collapse" data-target="#collapseDisclaimer" aria-expanded="false" aria-controls="collapseDisclaimer">
|
|
Disclaimer
|
|
</button>
|
|
</div>
|
|
|
|
<div class="collapse container container--padding" id="collapseDisclaimer">
|
|
<div class="card card-body">{{ text_blocks['Disclaimer'] }}</div>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
{% endblock main %}
|