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/static/js/upload_progress.js | 63 +++++++++++++++----------------------
 1 file changed, 26 insertions(+), 37 deletions(-)

(limited to 'qc_app/static')

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);
 }
-- 
cgit v1.2.3