aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFrederick Muriuki Muriithi2024-06-14 10:31:39 -0500
committerFrederick Muriuki Muriithi2024-06-14 10:43:57 -0500
commit0783b155002da7034d68ead6c62ccdb0670b37b7 (patch)
tree6353962d22dbb05d63b085c84d323c14b200452d
parent6043dabe8f1351f567843a6c0509958d6d56870a (diff)
downloadgn-uploader-0783b155002da7034d68ead6c62ccdb0670b37b7.tar.gz
Use bootstrap for displaying progress widget
This commit converts the progress indication widget into a bootstrap modal dialog, and updates the javascript to prevent the code from interacting with bootstrap in unpredictable ways.
-rw-r--r--qc_app/static/js/upload_progress.js5
-rw-r--r--qc_app/templates/select_species.html5
-rw-r--r--qc_app/templates/upload_progress_indicator.html45
3 files changed, 37 insertions, 18 deletions
diff --git a/qc_app/static/js/upload_progress.js b/qc_app/static/js/upload_progress.js
index 22dbda8..9638b36 100644
--- a/qc_app/static/js/upload_progress.js
+++ b/qc_app/static/js/upload_progress.js
@@ -40,7 +40,6 @@ function setup_cancel_upload(request, indicator_elt) {
"click", function(event) {
event.preventDefault();
request.abort();
- indicator_elt.setAttribute("class", "hidden");
});
}
@@ -80,12 +79,10 @@ function make_data_uploader(setup_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("upload-progress-indicator"));
+ var request = setup_request(the_file, pindicator);
request.open(form.getAttribute("method"), form.getAttribute("action"));
request.send(formdata);
return false;
diff --git a/qc_app/templates/select_species.html b/qc_app/templates/select_species.html
index 35850de..b813248 100644
--- a/qc_app/templates/select_species.html
+++ b/qc_app/templates/select_species.html
@@ -57,7 +57,10 @@
class="form-control"/>
</div>
- <button type="submit" class="btn btn-primary">upload file</button>
+ <button type="submit"
+ class="btn btn-primary"
+ data-toggle="modal"
+ data-target="#upload-progress-indicator">upload file</button>
</form>
</div>
{%endblock%}
diff --git a/qc_app/templates/upload_progress_indicator.html b/qc_app/templates/upload_progress_indicator.html
index 9855c2d..e274e83 100644
--- a/qc_app/templates/upload_progress_indicator.html
+++ b/qc_app/templates/upload_progress_indicator.html
@@ -1,16 +1,35 @@
{%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 id="upload-progress-indicator" class="modal fade" tabindex="-1" role="dialog">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h3 class="modal-title">Uploading file</h3>
+ </div>
+
+ <div class="modal-body">
+ <form id="frm-cancel-upload" style="border-style: none;">
+ <div class="form-group">
+ <span id="progress-filename" class="form-text">No file selected!</span>
+ <progress id="progress-bar" value="0" max="100" class="form-control">
+ 0</progress>
+ </div>
+
+ <div class="form-group">
+ <span class="form-text text-muted" id="progress-text">
+ Uploading 0%</span>
+ <span class="form-text text-muted" id="progress-extra-text">
+ Processing</span>
+ </div>
+ </form>
+ </div>
+
+ <div class="modal-footer">
+ <button id="btn-cancel-upload"
+ type="button"
+ class="btn btn-danger"
+ data-dismiss="modal">Cancel</button>
+ </div>
+ </div>
+ </div>
</div>
{%endmacro%}