From 6581586982e81f1e2bd5c546ded05e059a2d8be4 Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Wed, 19 Jul 2023 17:04:31 +0200
Subject: [PATCH] ui modifications on html components

---
 .../templates/base/calculator.form.html.j2    | 146 +++++++++---------
 .../templates/base/calculator.report.html.j2  |   2 +-
 2 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/caimira/apps/templates/base/calculator.form.html.j2 b/caimira/apps/templates/base/calculator.form.html.j2
index 8880de6d..f7a4bc91 100644
--- a/caimira/apps/templates/base/calculator.form.html.j2
+++ b/caimira/apps/templates/base/calculator.form.html.j2
@@ -211,7 +211,7 @@
         </div>
       </div>
 
-      <!-- Modal -->
+      <!-- Natural Ventilation 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">
@@ -300,9 +300,78 @@
 
       </div>
       <br/>
-      <div id="DIVfrom_fitting" style="display:none">
+      
+      <div id="DIVfrom_fitting" class="split" style="display: none">
+        <div>
+          For the CO₂ fitting algorithm, the following input values will be considered:
+          <ul>
+            <li>Room volume (m³)</li>
+            <li>Total number of occupants</li>
+            <li>Presence transition times</li>
+          </ul>
+        </div>
+        <div class="align-self-center text-center">
+          <button id="button_fit_data" type="button" class="btn btn-primary" style="width: 60%" data-target="#DIVCO2_data_dialog" data-keyboard="false" data-backdrop="static" onclick="validateFormInputs(this)">Fitting Algorithm</button>
+        </div>
       </div>
-      <br/>
+
+      <!-- CO2 Modal -->
+      <div class="modal fade" id="DIVCO2_data_dialog" tabindex="-1" role="dialog" aria-labelledby="CO2_values_title" aria-hidden="true" data-backdrop="static">
+        <div class="modal-dialog modal-lg" role="document" overflow: visible>
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="CO2_values_title">CO₂ Fitting Algorithm</h5>
+            </div>
+            <div class="modal-body">    
+              <div class="d-flex d-row justify-content-between">
+                <h5 style="margin-top: auto; margin-bottom: auto">Upload an Excel file to preview in HTML Table</h5>
+                <button type="button" class="btn btn-primary btn-sm" onclick="downloadTemplate()">Download template</button>
+              </div>
+              <br>
+              <!-- Input element to upload an excel file -->
+              <input type="file" id="file_upload" />
+              <button type="button" class="btn btn-primary btn-sm" onclick="uploadFile('{{ get_calculator_url() }}/co2-fit/plot');">Upload</button>  
+              <br>
+              <br>
+              <!-- table to display the excel data -->
+              <table id="display_excel_data" border="1" style="width: 70%; margin-left: auto; margin-right: auto"></table>
+              <input id="CO2_data" type="text" name="CO2_data" form="not-submitted" class="form-control d-none" placeholder='{"times": [...], "concentrations": [...]}' value="{}"><br>
+              <div id="CO2_input_data_div" style="display: none">
+              </div>
+              <input type="text" class="form-control d-none" name="CO2_fitting_result" id="CO2_fitting_result">
+              
+              <div id="DIVCO2_fitting_to_submit" style="display: none">
+                <img id="CO2_data_plot"/><br>
+                <strong>Ventilation scheme:</strong>
+                <div>
+                  <input class="ml-2" type="radio" id="fitting_natural_ventilation" name="fitting_ventilation_type" value='fitting_natural_ventilation' checked="checked" data-enables="#DIVfitting_natural_ventilation">
+                    <label for="fitting_natural_ventilation">Natural</label>
+                  <input class="ml-2" type="radio" id="fitting_mechanical_ventilation" name="fitting_ventilation_type" value='fitting_mechanical_ventilation'>
+                    <label for="fitting_mechanical_ventilation">Mechanical</label>
+                </div>
+
+                <div id="DIVfitting_natural_ventilation" class="form-group mb-0" style="display: none">
+                  <label for="fitting_ventilation_states">Please enter the ventilation state change times, separated by comma - e.g. [8.5, 10, 11.5, 17] </label>
+                  <input type="text" class="form-control" id="fitting_ventilation_states" name="fitting_ventilation_states" placeholder="e.g. [8.5, 10, 11.5, 17]"><br>
+                </div>
+              </div>
+
+              <div id="DIVCO2_fitting_result" style="display: none">
+                <h5 style="margin-top: auto; margin-bottom: auto">Fitting result</h5><br>
+                <p id="exhalation_rate_fit"></p>
+                <p>Ventilation values (ACH):</p><br>
+                <!-- table to display the ventilation result data -->
+                <table id="ventilation_rate_fit" border="1" style="width: 70%; margin-left: auto; margin-right: auto"></table>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button type="button" id="disable_fitting_algorithm" class="btn btn-secondary dismiss_btn_frm_field" data-dismiss="modal" onclick="disableFittingAlgorithm()">Discard</button>
+              <button type="button" id="generate_fitting_data" class="btn btn-primary close_btn_frm_field" onclick="submitFittingAlgorithm('{{ get_calculator_url() }}/co2-fit/')" disabled>Fit data</button>
+              <button type="button" style="display: none" id="save_and_dismiss_dialog" class="btn btn-primary close_btn_frm_field" data-dismiss="modal">Use fit data</button>
+            </div>
+          </div>
+        </div>
+      </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">
@@ -555,7 +624,7 @@
 
     <!-- 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()">
+      <input type="checkbox" id="infected_dont_have_breaks_with_exposed" class="tabbed form-check-input" name="infected_dont_have_breaks_with_exposed" value="0" 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>
@@ -670,75 +739,6 @@
     <br style="clear:both;">
     <i>Coffee breaks are spread evenly throughout the day.</i>
     <br><br>
-
-    <div class="split">
-      <strong>Use CO₂ concentration values:</strong>
-        <div>
-          <input class="ml-2" type="radio" id="CO2_data_no" name="CO2_data_option" value=0 checked="checked">
-            <label for="CO2_data_no">No</label>
-          <input class="ml-2" type="radio" id="CO2_data_yes" name="CO2_data_option" value=1 data-enables="#DIVCO2_data">
-            <label for="CO2_data_yes">Yes</label>
-        </div>
-    </div>
-
-    <div id="DIVCO2_data" class="split" style="display: none">
-      <div>
-        For the CO₂ fitting algorithm, the following input values will be considered:
-        <ul>
-          <li>Room volume (m³)</li>
-          <li>Ventilation transition times</li>
-          <li>Total number of occupants</li>
-          <li>Presence transition times</li>
-        </ul>
-      </div>
-      <div class="align-self-center text-center">
-        <button id="button_fit_data" type="button" class="btn btn-primary" style="width: 60%" data-toggle="modal" data-target="#DIVCO2_data_dialog" data-keyboard="false" data-backdrop="static" data-previous-vent="no_ventilation">Fit Data</button>
-      </div>
-    </div>
-
-    <!-- CO2 Modal -->
-    <div class="modal fade" id="DIVCO2_data_dialog" tabindex="-1" role="dialog" aria-labelledby="CO2_values_title" aria-hidden="true" data-backdrop="static">
-      <div class="modal-dialog modal-lg" role="document" overflow: visible>
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title" id="CO2_values_title">CO₂ Fitting Algorithm</h5>
-          </div>
-          <div class="modal-body">    
-            <div class="d-flex d-row justify-content-between">
-              <h5 style="margin-top: auto; margin-bottom: auto">Upload an Excel file to preview in HTML Table</h5>
-              <button type="button" class="btn btn-primary btn-sm" onclick="downloadTemplate()">Download template</button>
-            </div>
-            <br>
-            <!-- Input element to upload an excel file -->
-            <input type="file" id="file_upload" />
-            <button type="button" class="btn btn-primary btn-sm" onclick="upload_file()">Upload</button>  
-            <br>
-            <br>
-            <!-- table to display the excel data -->
-            <table id="display_excel_data" border="1" style="width: 70%; margin-left: auto; margin-right: auto"></table>
-            <input id="formatted_data" type="text" name="CO2_data" form="not-submitted" class="form-control d-none" placeholder='{"times": [...], "concentrations": [...]}' ><br>
-            <div id="CO2_input_data_div" style="display: none">
-              {# <p>The following data will be considered:</p><br>
-              <p id="CO2_input_data"></p> #}
-            </div>
-            <input type="text" class="form-control d-none" name="CO2_fitting_result" id="CO2_fitting_result">
-            <div id="DIV_CO2_fitting_result" style="display: none">
-              <h5 style="margin-top: auto; margin-bottom: auto">Fitting result</h5>
-              <img id="CO2_data_plot" style="margin-top: 2%"/>
-              <p id="exhalation_rate_fit"></p>
-              <p>Ventilation values (ACH):</p><br>
-              <!-- table to display the ventilation result data -->
-              <table id="ventilation_rate_fit" border="1" style="width: 70%; margin-left: auto; margin-right: auto"></table>
-            </div>
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary dismiss_btn_frm_field" data-dismiss="modal" onclick="clear_fitting_algorithm()">Discard</button>
-            <button type="button" id="generate_fitting_data" class="btn btn-primary close_btn_frm_field" onclick="submit_fitting_algorithm('{{ get_calculator_url() }}/co2-fit')" disabled>Fit data</button>
-            <button type="button" style="display: none" id="save_and_dismiss_dialog" class="btn btn-primary close_btn_frm_field" data-dismiss="modal">Use fit data</button>
-          </div>
-        </div>
-      </div>
-    </div> 
   
   </div> 
   </div>
diff --git a/caimira/apps/templates/base/calculator.report.html.j2 b/caimira/apps/templates/base/calculator.report.html.j2
index fed4c361..9b1776f6 100644
--- a/caimira/apps/templates/base/calculator.report.html.j2
+++ b/caimira/apps/templates/base/calculator.report.html.j2
@@ -595,7 +595,7 @@
 							{% elif form.activity_type == "gym" %}
 							Gym - For comparison only, all persons doing heavy physical exercise, breathing and not speaking.
 							{% endif %}
-							{% if form.CO2_data_option %}
+							{% if form.ventilation_type == "from_fitting" %}
 							<p style="margin-left: 30px">Exhalation rate from fitting algorithm - {{form.CO2_fitting_result['exhalation_rate'] | round(2, 'floor')}} m³/h</p>
 							{% endif %}
 							</p></li>