Extract upload progress indication code

* Extract the UI elements and code for indicating upload progress into
  separate, reusable "modules".
* Fix bugs arising from changes.

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%}