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

added error handling on valid excel files and replaced plain javascript with jquery calls

Browse source
This commit is contained in:
Luis Aleixo 2023-07-20 16:10:22 +02:00
parent effc606fc9
commit 16eac4101a
2 changed files with 14 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
caimira/apps/calculator/static/js/co2_form.js
View file

@ -26,7 +26,7 @@ const CO2_data_form = [
// Method to upload a valid excel file // Method to upload a valid excel file
function uploadFile(endpoint) { function uploadFile(endpoint) {
clearFittingResultComponent(); clearFittingResultComponent();
const files = document.getElementById("file_upload").files; const files = $("#file_upload")[0].files;
if (files.length === 0) { if (files.length === 0) {
$("#upload-error").show(); $("#upload-error").show();
return; return;
@ -37,7 +37,7 @@ const CO2_data_form = [
const extension = file.name.substring(file.name.lastIndexOf(".")).toUpperCase(); const extension = file.name.substring(file.name.lastIndexOf(".")).toUpperCase();
extension === ".XLS" || extension === ".XLSX" extension === ".XLS" || extension === ".XLSX"
? excelFileToJSON(endpoint, file) ? excelFileToJSON(endpoint, file)
: alert("Please select a valid excel file."); : $('#upload-file-extention-error').show();
} }
// Method to read excel file and convert it into JSON // Method to read excel file and convert it into JSON
@ -59,36 +59,21 @@ const CO2_data_form = [
// Method to display the data in HTML Table // Method to display the data in HTML Table
function displayJsonToHtmlTable(endpoint, jsonData) { function displayJsonToHtmlTable(endpoint, jsonData) {
const table = document.getElementById("display_excel_data"); // const table = $("#display_excel_data");
const format = document.getElementById("CO2_data"); const format = $("#CO2_data");
const structure = { times: [], CO2: [] }; const structure = { times: [], CO2: [] };
if (jsonData.length > 0) { if (jsonData.length > 0) {
let htmlData = "<tr><th>Time</th><th>CO2 Value</th></tr>"; for (let i = 0; i < jsonData.length; i++) {
const jsonLength = jsonData.length;
for (let i = 0; i < jsonLength; i++) {
const row = jsonData[i]; const row = jsonData[i];
if (i < 5) {
htmlData += `
<tr>
<td>${row["Times"].toFixed(2)}</td>
<td>${row["CO2"].toFixed(2)}</td>
</tr>`;
}
structure.times.push(row["Times"]); structure.times.push(row["Times"]);
structure.CO2.push(row["CO2"]); structure.CO2.push(row["CO2"]);
} }
format.val(JSON.stringify(structure));
if (jsonLength >= 5) {
htmlData += "<tr><td> ... </td><td> ... </td></tr>";
}
format.value = JSON.stringify(structure);
$('#generate_fitting_data').prop("disabled", false); $('#generate_fitting_data').prop("disabled", false);
$('#fitting_ventilation_states').prop('disabled', false); $('#fitting_ventilation_states').prop('disabled', false);
$('[name=fitting_ventilation_type]').prop('disabled', false); $('[name=fitting_ventilation_type]').prop('disabled', false);
plotCO2Data(endpoint); plotCO2Data(endpoint);
} else { };
table.innerHTML = "There is no data in the spreadsheet file";
}
} }
// Method to download Excel template available on CERNBox // Method to download Excel template available on CERNBox
@ -103,15 +88,12 @@ const CO2_data_form = [
} }
function insertErrorFor(referenceNode, text) { function insertErrorFor(referenceNode, text) {
const element = document.createElement("span"); const element = $('<span></span>').addClass('error_text red_text').html('&nbsp;&nbsp;' + text);
element.setAttribute("class", "error_text");
element.classList.add("red_text");
element.innerHTML = "&nbsp;&nbsp;" + text;
$(referenceNode).before(element); $(referenceNode).before(element);
} }
function validateFormInputs(obj) { function validateFormInputs(obj) {
$('span.' + "error_text").remove(); $('span.error_text').remove();
let submit = true; let submit = true;
for (let i = 0; i < CO2_data_form.length; i++) { for (let i = 0; i < CO2_data_form.length; i++) {
const element = $(`[name=${CO2_data_form[i]}]`)[0]; const element = $(`[name=${CO2_data_form[i]}]`)[0];
@ -123,6 +105,7 @@ const CO2_data_form = [
if (submit) { if (submit) {
$($(obj).data('target')).modal('show'); $($(obj).data('target')).modal('show');
$("#upload-error").hide(); $("#upload-error").hide();
$('#upload-file-extention-error').hide();
} }
return submit; return submit;
} }
@ -165,7 +148,7 @@ function displayTransitionTimesHourFormat(start, stop) {
function displayFittingData(json_response) { function displayFittingData(json_response) {
$("#DIVCO2_fitting_result").show(); $("#DIVCO2_fitting_result").show();
$("#CO2_data_plot").attr("src", json_response['CO2_plot']); $("#CO2_data_plot").attr("src", json_response['CO2_plot']);
// Not needed for the form submit // Not needed for the form submission
delete json_response['CO2_plot']; delete json_response['CO2_plot'];
$("#CO2_fitting_result").val(JSON.stringify(json_response)); $("#CO2_fitting_result").val(JSON.stringify(json_response));
$("#exhalation_rate_fit").html('Exhalation rate: ' + String(json_response['exhalation_rate'].toFixed(2)) + ' m³/h'); $("#exhalation_rate_fit").html('Exhalation rate: ' + String(json_response['exhalation_rate'].toFixed(2)) + ' m³/h');
@ -260,4 +243,3 @@ function submitFittingAlgorithm(url) {
clearFittingResultComponent(); clearFittingResultComponent();
$('#CO2_data_no').click(); $('#CO2_data_no').click();
} }

7
caimira/apps/templates/base/calculator.form.html.j2
View file

@ -331,12 +331,11 @@
<input type="file" id="file_upload" /> <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> <button type="button" class="btn btn-primary btn-sm" onclick="uploadFile('{{ get_calculator_url() }}/co2-fit/plot');">Upload</button>
<div id="upload-error" class="mb-0 mt-2 alert alert-danger" style="display: none" role="alert">Please choose any file...</div> <div id="upload-error" class="mb-0 mt-2 alert alert-danger" style="display: none" role="alert">Please choose any file...</div>
<div id="upload-file-extention-error" class="mb-0 mt-2 alert alert-danger" style="display: none" role="alert">Please select a valid excel file.</div>
<br> <br>
<!-- table to display the excel data --> <!-- Formatted 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> <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 id="CO2_input_data_div" style="display: none"></div>
</div>
<input type="text" class="form-control d-none" name="CO2_fitting_result" id="CO2_fitting_result"> <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"> <div id="DIVCO2_fitting_to_submit" style="display: none">