From e9e3b1efc33b35280464ba2f40d96fdd6560e3c1 Mon Sep 17 00:00:00 2001 From: Frederick Muriuki Muriithi Date: Wed, 14 Feb 2024 10:56:08 +0300 Subject: Extract upload progress indication code * Extract the UI elements and code for indicating upload progress into separate, reusable "modules". * Fix bugs arising from changes. --- qc_app/entry.py | 4 +- qc_app/static/js/upload_progress.js | 63 +++++++++------------- qc_app/templates/index.html | 50 +++++++++-------- .../rqtl2/upload-rqtl2-bundle-step-01.html | 28 +++++++++- qc_app/templates/upload_progress_indicator.html | 16 ++++++ 5 files changed, 94 insertions(+), 67 deletions(-) create mode 100644 qc_app/templates/upload_progress_indicator.html (limited to 'qc_app') diff --git a/qc_app/entry.py b/qc_app/entry.py index 987fdcd..f166d4c 100644 --- a/qc_app/entry.py +++ b/qc_app/entry.py @@ -86,7 +86,7 @@ def upload_file(): request_errors = errors(request) if request_errors: for error in request_errors: - flash(error, "alert-error") + flash(error, "alert-error error-expr-data") return render_template( "index.html", species=with_db_connection(species)), 400 @@ -100,7 +100,7 @@ def upload_file(): zip_errors = zip_file_errors(filepath, upload_dir) if zip_errors: for error in zip_errors: - flash(error, "alert-error") + flash(error, "alert-error error-expr-data") return render_template( "index.html", species=with_db_connection(species)), 400 diff --git a/qc_app/static/js/upload_progress.js b/qc_app/static/js/upload_progress.js index c98c33c..22dbda8 100644 --- a/qc_app/static/js/upload_progress.js +++ b/qc_app/static/js/upload_progress.js @@ -1,7 +1,7 @@ function make_processing_indicator(elt) { var count = 0; return function() { - var message = "Checking for errors: " + var message = "Finalising upload and saving file: " if(count > 5) { count = 1; } @@ -63,49 +63,38 @@ function selected_filetype(radios) { } } -function setup_formdata(form) { - var formdata = new FormData(); - formdata.append( - "speciesid", - form.querySelector("#select_species01").value) - formdata.append( - "qc_text_file", - form.querySelector("input[type='file']").files[0]); - formdata.append( - "filetype", - selected_filetype( - Array.from(form.querySelectorAll("input[type='radio']")))); - return formdata; -} +function make_data_uploader(setup_formdata) { + return function(event) { + event.preventDefault(); -function upload_data(event) { - event.preventDefault(); + var pindicator = document.getElementById("upload-progress-indicator"); - var pindicator = document.getElementById("progress-indicator"); + var form = event.target; + var the_file = form.querySelector("input[type='file']").files[0]; + if(the_file === undefined) { + form.querySelector("input[type='file']").parentElement.setAttribute( + "class", "invalid-input"); + error_elt = form.querySelector("#no-file-error"); + if(error_elt !== undefined) { + error_elt.setAttribute("style", "display: block;"); + } + return false; + } + pindicator.setAttribute("class", "modal"); + var formdata = setup_formdata(form); - var form = document.getElementsByTagName("form")[0]; - var the_file = form.querySelector("input[type='file']").files[0]; - if(the_file === undefined) { - form.querySelector("#file_upload").parentElement.setAttribute( - "class", "invalid-input"); - form.querySelector("#no-file-error").setAttribute( - "style", "display: block;"); + document.getElementById("progress-filename").innerHTML = the_file.name; + var request = setup_request( + the_file, document.getElementById("upload-progress-indicator")); + request.open(form.getAttribute("method"), form.getAttribute("action")); + request.send(formdata); return false; } - pindicator.setAttribute("class", "modal"); - var formdata = setup_formdata(form); - - document.getElementById("progress-filename").innerHTML = the_file.name; - var request = setup_request( - the_file, document.getElementById("progress-indicator")); - request.open(form.getAttribute("method"), form.getAttribute("action")); - request.send(formdata); - return false; } -function setup_upload_handlers() { +function setup_upload_handlers(formid, datauploader) { console.info("Setting up the upload handlers.") - upload_form = document.getElementsByTagName("form")[0]; - upload_form.addEventListener("submit", upload_data); + upload_form = document.getElementById(formid); + upload_form.addEventListener("submit", datauploader); } diff --git a/qc_app/templates/index.html b/qc_app/templates/index.html index b9638d2..588133a 100644 --- a/qc_app/templates/index.html +++ b/qc_app/templates/index.html @@ -1,5 +1,6 @@ {%extends "base.html"%} -{%from "flash_messages.html" import flash_all_messages%} +{%from "flash_messages.html" import flash_messages%} +{%from "upload_progress_indicator.html" import upload_progress_indicator%} {%block title%}Data Upload{%endblock%} @@ -54,17 +55,11 @@
+ method="POST" + enctype="multipart/form-data" + id="frm-upload-expression-data"> upload expression data - {%with messages = get_flashed_messages(with_categories=True) %} - {%if messages %} -
- {%for category, message in messages %} - {{message}} - {%endfor%} -
- {%endif%} - {%endwith%} + {{flash_messages("error-expr-data")}}
@@ -108,20 +103,7 @@
- +{{upload_progress_indicator()}}

samples/cases

@@ -155,6 +137,22 @@ {%block javascript%} {%endblock%} diff --git a/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html b/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html index 64fcdcd..eaa68a9 100644 --- a/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html +++ b/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html @@ -1,11 +1,14 @@ {%extends "base.html"%} {%from "flash_messages.html" import flash_all_messages%} +{%from "upload_progress_indicator.html" import upload_progress_indicator%} {%block title%}Upload R/qtl2 Bundle{%endblock%} {%block contents%}

Upload R/qtl2 Bundle

+{{upload_progress_indicator()}} +
R/qtl2 bundle - R/qtl2 bundle +

Provide a valid R/qtl2 zip file here. In @@ -42,3 +45,24 @@

{%endblock%} + +{%block javascript%} + + +{%endblock%} diff --git a/qc_app/templates/upload_progress_indicator.html b/qc_app/templates/upload_progress_indicator.html new file mode 100644 index 0000000..9855c2d --- /dev/null +++ b/qc_app/templates/upload_progress_indicator.html @@ -0,0 +1,16 @@ +{%macro upload_progress_indicator()%} + +{%endmacro%} -- cgit v1.2.3