From 15d28e1711ce26e841a2aef83bb0dd518035d068 Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Wed, 14 Jun 2023 16:43:48 +0200
Subject: [PATCH] added a way to download an excel template; added a preview
 feature to the display CO2 table

---
 caimira/apps/calculator/static/js/co2_form.js | 38 ++++++++++++++-----
 .../templates/base/calculator.form.html.j2    |  9 +++--
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/caimira/apps/calculator/static/js/co2_form.js b/caimira/apps/calculator/static/js/co2_form.js
index 594b7079..2a68e0b9 100644
--- a/caimira/apps/calculator/static/js/co2_form.js
+++ b/caimira/apps/calculator/static/js/co2_form.js
@@ -19,8 +19,10 @@ const CO2_data = [
 	'infected_start',
 	'room_volume',
 	'total_people',
+	'ventilation_type',
 	'windows_duration',
 	'windows_frequency',
+	'window_opening_regime',
 ]
 
 // Method to upload a valid excel file
@@ -48,7 +50,6 @@ function excelFileToJSON(file) {
 		reader.onload = function (e) {
 			var data = e.target.result;
 			var workbook = XLSX.read(data, { type: "binary" });
-			var result = {};
 			var firstSheetName = workbook.SheetNames[0];
 			//reading only first sheet data
 			var jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[firstSheetName]);
@@ -67,17 +68,22 @@ function displayJsonToHtmlTable(jsonData) {
 	let structure = { times: [], CO2: [] };
 	if (jsonData.length > 0) {
 		var htmlData = "<tr><th>Time</th><th>CO2 Value</th></tr>";
-		for (var i = 0; i < jsonData.length; i++) {
+		let jsonLength = jsonData.length;
+		for (var i = 0; i < jsonLength; i++) {
 			var row = jsonData[i];
-			htmlData +=
-				"<tr><td>" +
-				Math.round(row["Times"] * 10) / 10 +
-				"</td><td>" +
-				Math.round(row["CO2"] * 10) / 10 +
-				"</td></tr>";
+			if (i < 5) {
+				htmlData +=
+					"<tr><td>" +
+					Math.round(row["Times"] * 10) / 10 +
+					"</td><td>" +
+					Math.round(row["CO2"] * 10) / 10 +
+					"</td></tr>";
+			}
 			structure["times"].push(row["Times"]);
 			structure["CO2"].push(row["CO2"]);
 		}
+
+		if (jsonLength >= 5) htmlData += "<tr><td> ... </td><td> ... </td></tr>";
 		table.innerHTML = htmlData;
 		console.log(structure);
 		format.value = JSON.stringify(structure);
@@ -86,6 +92,20 @@ function displayJsonToHtmlTable(jsonData) {
 	}
 }
 
+function downloadTemplate() {
+	let final_export = [["Times", "CO2"], [8.5, 440.44]];
+	// Prepare the CSV file.
+    let csvContent = "data:text/csv;charset=utf8," 
+        + final_export.map(e => e.join(",")).join("\n");
+    var encodedUri = encodeURI(csvContent);
+    // Set a name for the file.
+    var link = document.createElement("a");
+    link.setAttribute("href", encodedUri);
+    link.setAttribute("download", "CO2_template.XLSX");
+    document.body.appendChild(link);
+    link.click();
+}
+
 function insertErrorFor(referenceNode, text) {
 	var element = document.createElement("span");
 	element.setAttribute("class", "error_text");
@@ -131,7 +151,7 @@ function submit_fitting_algorithm(url) {
 				$("#DIV_CO2_fitting_result").show();
 				$("#CO2_fitting_result").val(JSON.stringify(json_response));
 				$("#exhalation_rate_fit").html(String(json_response['exhalation_rate']));
-				// $("#ventilation_rate_fit").html(json_response['ventilation_values']);
+				$("#ventilation_rate_fit").html(json_response['ventilation_values']);
 				$("#CO2_data_plot").attr("src", json_response['CO2_plot']);
 				$("#generate_fitting_data").html('Fit data');
 				$("#save_and_dismiss_dialog").show();
diff --git a/caimira/apps/templates/base/calculator.form.html.j2 b/caimira/apps/templates/base/calculator.form.html.j2
index a11dfb2a..462cea56 100644
--- a/caimira/apps/templates/base/calculator.form.html.j2
+++ b/caimira/apps/templates/base/calculator.form.html.j2
@@ -685,8 +685,11 @@
             </button>
           </div>
           <div class="modal-body">    
-
-            <h5>Upload an excel file to display in HTML Table</h5><br>
+            <div class="d-flex d-row justify-content-between">
+              <h5 style="margin-top: auto; margin-bottom: auto">Upload an excel file to display 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>  
@@ -703,7 +706,7 @@
             <div id="DIV_CO2_fitting_result" style="display: none">
               <img id="CO2_data_plot"/>
               <div>Exhalation rate: <p id="exhalation_rate_fit"></p> </div>
-              {# <div>Air exchange: <p id="ventilation_rate_fit"></p></div> #}
+              <div>Air exchange: <p id="ventilation_rate_fit"></p></div>
             </div>
           </div>
           <div class="modal-footer">