diff options
Diffstat (limited to 'qc_app')
| -rw-r--r-- | qc_app/entry.py | 4 | ||||
| -rw-r--r-- | qc_app/static/js/upload_progress.js | 63 | ||||
| -rw-r--r-- | qc_app/templates/index.html | 50 | ||||
| -rw-r--r-- | qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html | 28 | ||||
| -rw-r--r-- | qc_app/templates/upload_progress_indicator.html | 16 |
5 files changed, 94 insertions, 67 deletions
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 @@ </div> <form action="{{url_for('entry.upload_file')}}" - method="POST" enctype="multipart/form-data"> + method="POST" + enctype="multipart/form-data" + id="frm-upload-expression-data"> <legend class="heading">upload expression data</legend> - {%with messages = get_flashed_messages(with_categories=True) %} - {%if messages %} - <div class="alerts"> - {%for category, message in messages %} - <span class="alert {{category}}">{{message}}</span> - {%endfor%} - </div> - {%endif%} - {%endwith%} + {{flash_messages("error-expr-data")}} <fieldset> <label for="select_species01">Species</label> @@ -108,20 +103,7 @@ </fieldset> </form> -<div id="progress-indicator" class="hidden"> - <h3>Uploading file</h3> - <p id="progress-filename">the-file</p> - <progress id="progress-bar" value="0" max="100"> - 0 - </progress> - <p id="progress-text">Uploading 0%</p> - <p id="progress-extra-text">Processing</p> - <form id="frm-cancel-upload" style="border-style: none;"> - <button id="btn-cancel-upload" type="submit" class="btn btn-danger"> - Cancel - </button> - </form> -</div> +{{upload_progress_indicator()}} <h2 class="heading">samples/cases</h2> @@ -155,6 +137,22 @@ {%block javascript%} <script type="text/javascript" src="static/js/upload_progress.js"></script> <script type="text/javascript"> - setup_upload_handlers(); + 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; + } + + setup_upload_handlers( + "frm-upload-expression-data", make_data_uploader(setup_formdata)); </script> {%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%} <h2 class="heading">Upload R/qtl2 Bundle</h2> +{{upload_progress_indicator()}} + <form id="frm-upload-rqtl2-bundle" action="{{url_for('upload.rqtl2.upload_rqtl2_bundle', species_id=species.SpeciesId, @@ -20,8 +23,8 @@ <fieldset> <legend>file upload</legend> - <label for="file:rqtl2-bundle">R/qtl2 bundle</label> - <input type="file" id="file:rqtl2-bundle" name="rqtl2_bundle_file" + <label for="file-rqtl2-bundle">R/qtl2 bundle</label> + <input type="file" id="file-rqtl2-bundle" name="rqtl2_bundle_file" accept="application/zip, .zip" required="required" /> <span class="form-input-help"><p>Provide a valid R/qtl2 zip file here. In @@ -42,3 +45,24 @@ </form> {%endblock%} + +{%block javascript%} +<script type="text/javascript" src="/static/js/upload_progress.js"></script> +<script type="text/javascript"> + setup_upload_handlers( + "frm-upload-rqtl2-bundle", make_data_uploader( + function (form) { + var formdata = new FormData(); + formdata.append( + "species_id", + form.querySelector('input[name="species_id"]').value); + formdata.append( + "population_id", + form.querySelector('input[name="population_id"]').value); + formdata.append( + "rqtl2_bundle_file", + form.querySelector("#file-rqtl2-bundle").files[0]); + return formdata; + })); +</script> +{%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()%} +<div id="upload-progress-indicator" class="hidden"> + <h3>Uploading file</h3> + <p id="progress-filename">the-file</p> + <progress id="progress-bar" value="0" max="100"> + 0 + </progress> + <p id="progress-text">Uploading 0%</p> + <p id="progress-extra-text">Processing</p> + <form id="frm-cancel-upload" style="border-style: none;"> + <button id="btn-cancel-upload" type="submit" class="btn btn-danger"> + Cancel + </button> + </form> +</div> +{%endmacro%} |