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

validation on the excel file given as input (using SheetJS)

Browse source
This commit is contained in:
Luis Aleixo 2023-07-24 11:32:36 +02:00
parent 6aa485c3d8
commit 965b931773
3 changed files with 337 additions and 223 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,245 +1,357 @@
const CO2_data_form = [ const CO2_data_form = [
'CO2_data', "CO2_data",
'exposed_coffee_break_option', "exposed_coffee_break_option",
'exposed_coffee_duration', "exposed_coffee_duration",
'exposed_finish', "exposed_finish",
'exposed_lunch_finish', "exposed_lunch_finish",
'exposed_lunch_option', "exposed_lunch_option",
'exposed_lunch_start', "exposed_lunch_start",
'exposed_start', "exposed_start",
'fitting_ventilation_states', "fitting_ventilation_states",
'fitting_ventilation_type', "fitting_ventilation_type",
'infected_coffee_break_option', "infected_coffee_break_option",
'infected_coffee_duration', "infected_coffee_duration",
'infected_dont_have_breaks_with_exposed', "infected_dont_have_breaks_with_exposed",
'infected_finish', "infected_finish",
'infected_lunch_finish', "infected_lunch_finish",
'infected_lunch_option', "infected_lunch_option",
'infected_lunch_start', "infected_lunch_start",
'infected_people', "infected_people",
'infected_start', "infected_start",
'room_volume', "room_volume",
'total_people', "total_people",
'ventilation_type', "ventilation_type",
]; ];
// Method to upload a valid excel file // Method to upload a valid excel file
function uploadFile(endpoint) { function uploadFile(endpoint) {
clearFittingResultComponent(); clearFittingResultComponent();
const files = $("#file_upload")[0].files; const files = $("#file_upload")[0].files;
if (files.length === 0) { if (files.length === 0) {
$("#upload-error").show(); $("#upload-error").show();
return; return;
} else {
$("#upload-error").hide();
};
const file = files[0];
const extension = file.name.substring(file.name.lastIndexOf(".")).toUpperCase();
extension === ".XLS" || extension === ".XLSX"
? excelFileToJSON(endpoint, file)
: $('#upload-file-extention-error').show();
} }
const file = files[0];
// Method to read excel file and convert it into JSON const extension = file.name
function excelFileToJSON(endpoint, file) { .substring(file.name.lastIndexOf("."))
try { .toUpperCase();
const reader = new FileReader(); if (extension !== ".XLS" && extension !== ".XLSX") {
reader.readAsBinaryString(file); $("#upload-error")
reader.onload = function (e) { .text("Please select a valid excel file (.XLS or .XLSX).")
const data = e.target.result; .show();
const workbook = XLSX.read(data, { type: "binary" }); return;
const firstSheetName = workbook.SheetNames[0];
const jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[firstSheetName]);
displayJsonToHtmlTable(endpoint, jsonData);
};
} catch (e) {
console.error(e);
}
} }
// Method to display the data in HTML Table // FileReader API to read the Excel file
function displayJsonToHtmlTable(endpoint, jsonData) { const reader = new FileReader();
// const table = $("#display_excel_data"); reader.onload = function (event) {
const format = $("#CO2_data"); const fileContent = event.target.result;
const structure = { times: [], CO2: [] }; const workbook = XLSX.read(fileContent, { type: "binary" });
if (jsonData.length > 0) {
for (let i = 0; i < jsonData.length; i++) { // Assuming the first sheet is the one we want to validate
const row = jsonData[i]; const firstSheetName = workbook.SheetNames[0];
structure.times.push(row["Times"]); const worksheet = workbook.Sheets[firstSheetName];
structure.CO2.push(row["CO2"]);
} // Check if the headers match the expected format
format.val(JSON.stringify(structure)); const headerCoordinates = {
$('#generate_fitting_data').prop("disabled", false); Times: "A1",
$('#fitting_ventilation_states').prop('disabled', false); CO2: "B1",
$('[name=fitting_ventilation_type]').prop('disabled', false); };
plotCO2Data(endpoint); for (const header in headerCoordinates) {
}; const cellValue = worksheet[headerCoordinates[header]]?.v;
if (
!cellValue ||
cellValue.trim().toLowerCase() !== header.toLowerCase()
) {
$("#upload-error")
.text(`The file does not have the expected header "${header}".`)
.show();
return;
}
}
// Check if there is any data below the header row
if (data.length <= 1) {
$("#upload-error")
.text(
"The Excel file is empty. Please make sure it contains data below the header row."
)
.show();
return;
}
// Validate data in the columns
const data = XLSX.utils.sheet_to_json(worksheet, { header: 1, raw: false });
const timesColumnIndex = 0;
const CO2ColumnIndex = 1;
for (let i = 1; i < data.length; i++) {
try {
const timesCellValue = parseFloat(data[i][timesColumnIndex]);
const CO2CellValue = parseFloat(data[i][CO2ColumnIndex]);
if (isNaN(timesCellValue) || isNaN(CO2CellValue)) {
throw new Error("Invalid data in the Times or CO2 columns.");
}
} catch (error) {
$("#upload-error")
.text(
"Invalid data in the Times or CO2 columns. Please make sure they contain only float values."
)
.show();
return;
}
}
// Call function to convert Excel file to JSON and further processing
try {
generateJSONStructure(endpoint, data);
// If all validations pass, process the file here or display a success message
$("#upload-file-extention-error").hide();
} catch (error) {
console.log(error);
}
};
reader.readAsBinaryString(file); // Read the file as a binary string
}
// Method to generate the JSON structure
function generateJSONStructure(endpoint, jsonData) {
const inputToPopulate = $("#CO2_data");
// Initialize the final structure
const finalStructure = { times: [], CO2: [] };
if (jsonData.length > 0) {
// Loop through the input dataArray and extract the values starting from the second array (index 1)
for (let i = 1; i < jsonData.length; i++) {
const arr = jsonData[i];
// Assuming arr contains two float values
finalStructure.times.push(parseFloat(arr[0]));
finalStructure.CO2.push(parseFloat(arr[1]));
}
inputToPopulate.val(JSON.stringify(finalStructure));
$("#generate_fitting_data").prop("disabled", false);
$("#fitting_ventilation_states").prop("disabled", false);
$("[name=fitting_ventilation_type]").prop("disabled", false);
plotCO2Data(endpoint);
} }
}
// Method to download Excel template available on CERNBox
function downloadTemplate(uri = 'https://caimira-resources.web.cern.ch/CO2_template.xlsx', filename = 'CO2_template.xlsx') { // Method to download Excel template available on CERNBox
const link = document.createElement("a"); function downloadTemplate(
link.download = filename; uri = "https://caimira-resources.web.cern.ch/CO2_template.xlsx",
link.href = uri; filename = "CO2_template.xlsx"
document.body.appendChild(link); ) {
link.click(); const link = document.createElement("a");
document.body.removeChild(link); link.download = filename;
delete link; link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
function insertErrorFor(referenceNode, text) {
const element = $("<span></span>")
.addClass("error_text text-danger")
.html("&nbsp;&nbsp;" + text);
$(referenceNode).before(element);
}
function validateFormInputs(obj) {
$("span.error_text").remove();
let submit = true;
for (let i = 0; i < CO2_data_form.length; i++) {
const element = $(`[name=${CO2_data_form[i]}]`)[0];
if (element.name !== "fitting_ventilation_states" && element.value === "") {
insertErrorFor(
$("#DIVCO2_data_dialog"),
`'${element.name}' must be defined.<br />`
);
submit = false;
}
} }
if (submit) {
function insertErrorFor(referenceNode, text) { $($(obj).data("target")).modal("show");
const element = $('<span></span>').addClass('error_text text-danger').html('&nbsp;&nbsp;' + text); $("#upload-error").hide();
$(referenceNode).before(element); $("#upload-file-extention-error").hide();
} }
return submit;
function validateFormInputs(obj) { }
$('span.error_text').remove();
let submit = true;
for (let i = 0; i < CO2_data_form.length; i++) {
const element = $(`[name=${CO2_data_form[i]}]`)[0];
if (element.name !== 'fitting_ventilation_states' && element.value === '') {
insertErrorFor($('#DIVCO2_data_dialog'), `'${element.name}' must be defined.<br />`);
submit = false;
}
}
if (submit) {
$($(obj).data('target')).modal('show');
$("#upload-error").hide();
$('#upload-file-extention-error').hide();
}
return submit;
}
function validateCO2Form() { function validateCO2Form() {
let submit = true; let submit = true;
if (validateFormInputs($('#button_fit_data'))) submit = true; if (validateFormInputs($("#button_fit_data"))) submit = true;
// Check if natural ventilation is selected
if ($('input[name="fitting_ventilation_type"]:checked')[0].value == 'fitting_natural_ventilation') {
// Validate ventilation scheme
const element = $('[name=fitting_ventilation_states')[0]
if (element.value !== '') {
// validate input format
try {
const parsedValue = JSON.parse(element.value);
if (!Array.isArray(parsedValue)) {
insertErrorFor($('#DIVCO2_fitting_result'), `'${element.name}' must be a list.</br>`);
submit = false;
};
} catch {
insertErrorFor($('#DIVCO2_fitting_result'), `'${element.name}' must be a list of numbers.</br>`);
submit = false;
};
} else {
insertErrorFor($('#DIVCO2_fitting_result'), `'${element.name}' must be defined.</br>`);
submit = false;
};
};
return submit; // Check if natural ventilation is selected
if (
$('input[name="fitting_ventilation_type"]:checked')[0].value ==
"fitting_natural_ventilation"
) {
// Validate ventilation scheme
const element = $("[name=fitting_ventilation_states")[0];
if (element.value !== "") {
// validate input format
try {
const parsedValue = JSON.parse(element.value);
if (!Array.isArray(parsedValue)) {
insertErrorFor(
$("#DIVCO2_fitting_result"),
`'${element.name}' must be a list.</br>`
);
submit = false;
}
} catch {
insertErrorFor(
$("#DIVCO2_fitting_result"),
`'${element.name}' must be a list of numbers.</br>`
);
submit = false;
}
} else {
insertErrorFor(
$("#DIVCO2_fitting_result"),
`'${element.name}' must be defined.</br>`
);
submit = false;
}
}
return submit;
} }
function displayTransitionTimesHourFormat(start, stop) { function displayTransitionTimesHourFormat(start, stop) {
var minutes_start = (start % 1 * 60).toPrecision(2); var minutes_start = ((start % 1) * 60).toPrecision(2);
var minutes_stop = (stop % 1 * 60).toPrecision(2); var minutes_stop = ((stop % 1) * 60).toPrecision(2);
return Math.floor(start) + ':' + ((minutes_start != '0.0') ? minutes_start : '00') + ' - ' + Math.floor(stop) + ':' + ((minutes_stop != '0.0') ? minutes_stop : '00'); return (
Math.floor(start) +
":" +
(minutes_start != "0.0" ? minutes_start : "00") +
" - " +
Math.floor(stop) +
":" +
(minutes_stop != "0.0" ? minutes_stop : "00")
);
} }
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 submission // 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(
let ventilation_table = "<tr><th>Time (HH:MM)</th><th>ACH value (h⁻¹)</th></tr>"; "Exhalation rate: " +
json_response['ventilation_values'].forEach((val, index) => { String(json_response["exhalation_rate"].toFixed(2)) +
let transition_times = displayTransitionTimesHourFormat(json_response['transition_times'][index], json_response['transition_times'][index + 1]); " m³/h"
ventilation_table += `<tr><td>${transition_times}</td><td>${val.toPrecision(2)}</td></tr>`; );
}); let ventilation_table =
$('#disable_fitting_algorithm').prop('disabled', false); "<tr><th>Time (HH:MM)</th><th>ACH value (h⁻¹)</th></tr>";
$("#ventilation_rate_fit").html(ventilation_table); json_response["ventilation_values"].forEach((val, index) => {
$("#generate_fitting_data").html('Fit data'); let transition_times = displayTransitionTimesHourFormat(
$("#generate_fitting_data").hide(); json_response["transition_times"][index],
$("#save_and_dismiss_dialog").show(); json_response["transition_times"][index + 1]
);
ventilation_table += `<tr><td>${transition_times}</td><td>${val.toPrecision(
2
)}</td></tr>`;
});
$("#disable_fitting_algorithm").prop("disabled", false);
$("#ventilation_rate_fit").html(ventilation_table);
$("#generate_fitting_data").html("Fit data");
$("#generate_fitting_data").hide();
$("#save_and_dismiss_dialog").show();
} }
function formatCO2DataForm(CO2_data_form) { function formatCO2DataForm(CO2_data_form) {
let CO2_mapping = {}; let CO2_mapping = {};
CO2_data_form.map(el => { CO2_data_form.map((el) => {
let element = $(`[name=${el}]`); let element = $(`[name=${el}]`);
// Validate checkboxes // Validate checkboxes
if (element[0].type == 'checkbox') { if (element[0].type == "checkbox") {
CO2_mapping[element[0].name] = String(+element[0].checked); CO2_mapping[element[0].name] = String(+element[0].checked);
} }
// Validate radio buttons // Validate radio buttons
else if (element[0].type == 'radio') CO2_mapping[element[0].name] = $(`[name=${element[0].name}]:checked`)[0].value; else if (element[0].type == "radio")
else CO2_mapping[element[0].name] = element[0].value; CO2_mapping[element[0].name] = $(
}); `[name=${element[0].name}]:checked`
return CO2_mapping; )[0].value;
else CO2_mapping[element[0].name] = element[0].value;
});
return CO2_mapping;
} }
function plotCO2Data(url) { function plotCO2Data(url) {
if (validateFormInputs()) { if (validateFormInputs()) {
let CO2_mapping = formatCO2DataForm(CO2_data_form); let CO2_mapping = formatCO2DataForm(CO2_data_form);
fetch(url, { fetch(url, {
method: "POST", method: "POST",
body: JSON.stringify(CO2_mapping), body: JSON.stringify(CO2_mapping),
}) }).then((response) =>
.then((response) => response
response.json() .json()
.then(json_response => $("#CO2_data_plot").attr("src", json_response['CO2_plot'])) .then((json_response) =>
.then($('#DIVCO2_fitting_to_submit').show()) $("#CO2_data_plot").attr("src", json_response["CO2_plot"])
.catch(error => console.log(error)) )
); .then($("#DIVCO2_fitting_to_submit").show())
} .catch((error) => console.log(error))
);
}
} }
function submitFittingAlgorithm(url) { function submitFittingAlgorithm(url) {
if (validateCO2Form()) { if (validateCO2Form()) {
// Disable all the ventilation inputs // Disable all the ventilation inputs
$('#fitting_ventilation_states, [name=fitting_ventilation_type]').prop('disabled', true); $("#fitting_ventilation_states, [name=fitting_ventilation_type]").prop(
"disabled",
// Prepare data for submission true
const CO2_mapping = formatCO2DataForm(CO2_data_form); );
$('#CO2_input_data_div').show();
$('#disable_fitting_algorithm').prop('disabled', true); // Prepare data for submission
$('#generate_fitting_data') const CO2_mapping = formatCO2DataForm(CO2_data_form);
.html('<span id="loading_spinner" class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...') $("#CO2_input_data_div").show();
.prop('disabled', true); $("#disable_fitting_algorithm").prop("disabled", true);
$('#CO2_input_data').html(JSON.stringify(CO2_mapping, null, '\t')); $("#generate_fitting_data")
.html(
fetch(url, { '<span id="loading_spinner" class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...'
method: 'POST', )
body: JSON.stringify(CO2_mapping), .prop("disabled", true);
}) $("#CO2_input_data").html(JSON.stringify(CO2_mapping, null, "\t"));
.then((response) => response.json())
.then((json_response) => { fetch(url, {
displayFittingData(json_response); method: "POST",
}); body: JSON.stringify(CO2_mapping),
} })
} .then((response) => response.json())
.then((json_response) => {
function clearFittingResultComponent() { displayFittingData(json_response);
// Remove all the previously generated fitting elements });
$('#generate_fitting_data').prop('disabled', true);
$('#CO2_fitting_result').val('');
$('#CO2_data').val('{}');
$('#fitting_ventilation_states').val('');
$('span.error_text').remove();
$('#DIVCO2_fitting_result, #CO2_input_data_div').hide();
$('#DIVCO2_fitting_to_submit').hide();
$('#CO2_data_plot').attr('src', '');
// Update the ventilation scheme components
$('#fitting_ventilation_states, [name=fitting_ventilation_type]').prop('disabled', false);
// Update the bottom right buttons
$('#generate_fitting_data').show();
$('#save_and_dismiss_dialog').hide();
}
function disableFittingAlgorithm() {
clearFittingResultComponent();
$('#CO2_data_no').click();
} }
}
function clearFittingResultComponent() {
// Remove all the previously generated fitting elements
$("#generate_fitting_data").prop("disabled", true);
$("#CO2_fitting_result").val("");
$("#CO2_data").val("{}");
$("#fitting_ventilation_states").val("");
$("span.error_text").remove();
$("#DIVCO2_fitting_result, #CO2_input_data_div").hide();
$("#DIVCO2_fitting_to_submit").hide();
$("#CO2_data_plot").attr("src", "");
// Update the ventilation scheme components
$("#fitting_ventilation_states, [name=fitting_ventilation_type]").prop(
"disabled",
false
);
// Update the bottom right buttons
$("#generate_fitting_data").show();
$("#save_and_dismiss_dialog").hide();
}
function disableFittingAlgorithm() {
clearFittingResultComponent();
$("#CO2_data_no").click();
}

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

@ -330,8 +330,7 @@
<!-- Input element to upload an excel file --> <!-- Input element to upload an excel file -->
<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"></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>
<!-- Formatted excel data --> <!-- Formatted excel data -->
<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>

5
caimira/apps/templates/base/layout.html.j2
View file

@ -110,7 +110,10 @@
<script src="{{ get_url('/static/js') }}/ScrollMagic.min.js"></script> <script src="{{ get_url('/static/js') }}/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js" integrity="sha512-8qmis31OQi6hIRgvkht0s6mCOittjMa9GMqtK9hes5iEQBQE/Ca6yGE5FsW36vyipGoWQswBj/QBm2JR086Rkw==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js" integrity="sha512-8qmis31OQi6hIRgvkht0s6mCOittjMa9GMqtK9hes5iEQBQE/Ca6yGE5FsW36vyipGoWQswBj/QBm2JR086Rkw==" crossorigin="anonymous"></script>
<script src="{{ get_url('/static/js') }}/usage-tracking.js"></script> <script src="{{ get_url('/static/js') }}/usage-tracking.js"></script>
<!-- SheetJS for Excel validation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
{% block body_scripts %} {% block body_scripts %}
{% endblock body_scripts %} {% endblock body_scripts %}