aboutsummaryrefslogtreecommitdiff
path: root/qc_app/templates/index.html
diff options
context:
space:
mode:
authorFrederick Muriuki Muriithi2024-02-14 10:56:08 +0300
committerFrederick Muriuki Muriithi2024-02-14 10:56:08 +0300
commite9e3b1efc33b35280464ba2f40d96fdd6560e3c1 (patch)
tree8eda1bc024f1a3d598045651a6508036ff23e99e /qc_app/templates/index.html
parent1fda6924b4ac792e4fea42179f8e2242c1cd6dd5 (diff)
downloadgn-uploader-e9e3b1efc33b35280464ba2f40d96fdd6560e3c1.tar.gz
Extract upload progress indication code
* Extract the UI elements and code for indicating upload progress into separate, reusable "modules". * Fix bugs arising from changes.
Diffstat (limited to 'qc_app/templates/index.html')
-rw-r--r--qc_app/templates/index.html50
1 files changed, 24 insertions, 26 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%}