diff options
Diffstat (limited to 'qc_app/templates')
| -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 |
3 files changed, 66 insertions, 28 deletions
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%} |