aboutsummaryrefslogtreecommitdiff
path: root/qc_app/static
diff options
context:
space:
mode:
Diffstat (limited to 'qc_app/static')
-rw-r--r--qc_app/static/css/styles.css19
-rw-r--r--qc_app/static/js/upload_progress.js92
2 files changed, 111 insertions, 0 deletions
diff --git a/qc_app/static/css/styles.css b/qc_app/static/css/styles.css
index aa6b049..9e5a4ec 100644
--- a/qc_app/static/css/styles.css
+++ b/qc_app/static/css/styles.css
@@ -82,3 +82,22 @@ table {
border-color: #336699;
padding: 0 0.3em 0.3em 0.3em;
}
+
+.hidden {
+ display: none;
+}
+
+.modal {
+ position: fixed;
+ opacity: 90%;
+ left: 1em;
+ top: 1em;
+ width: 500px;
+ height: 250px;
+ text-align: center;
+ z-index: 9999;
+ background: #F4F4F4;
+
+ border: 2px solid;
+ border-radius: 1em;
+}
diff --git a/qc_app/static/js/upload_progress.js b/qc_app/static/js/upload_progress.js
new file mode 100644
index 0000000..d615be4
--- /dev/null
+++ b/qc_app/static/js/upload_progress.js
@@ -0,0 +1,92 @@
+function make_processing_indicator(elt) {
+ var count = 0;
+ return function() {
+ var message = "Checking for errors: "
+ if(count > 5) {
+ count = 1;
+ }
+ for(i = 0; i < count; i++) {
+ message = message + ".";
+ }
+ elt.innerHTML = message
+ count = count + 1
+ };
+}
+
+function make_progress_updater(file, indicator_elt) {
+ var progress_bar = indicator_elt.querySelector("#progress-bar");
+ var progress_text = indicator_elt.querySelector("#progress-text");
+ var extra_text = indicator_elt.querySelector("#progress-extra-text");
+ return function(event) {
+ if(event.loaded <= file.size) {
+ var percent = Math.round((event.loaded / file.size) * 100);
+ progress_bar.value = percent
+ progress_text.innerHTML = "Uploading: " + percent + "%";
+ extra_text.setAttribute("class", "hidden")
+ }
+
+ if(event.loaded == event.total) {
+ progress_bar.value = 100;
+ progress_text.innerHTML = "Uploaded: 100%";
+ extra_text.setAttribute("class", null);
+ intv = setInterval(make_processing_indicator(extra_text), 400);
+ setTimeout(function() {clearTimeout(intv);}, 20000);
+ }
+ };
+}
+
+function setup_request(file, progress_indicator_elt) {
+ var request = new XMLHttpRequest();
+ var updater = make_progress_updater(file, progress_indicator_elt);
+ request.upload.addEventListener("progress", updater);
+ request.onload = function(event) {
+ document.location.assign(request.responseURL);
+ };
+ return request;
+}
+
+function selected_filetype(radios) {
+ for(idx = 0; idx < radios.length; idx++) {
+ if(radios[idx].checked) {
+ return radios[idx].value;
+ }
+ }
+}
+
+function setup_formdata(form) {
+ var formdata = new FormData();
+ 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 upload_data(event) {
+ event.preventDefault();
+
+ var pindicator = document.getElementById("progress-indicator");
+ pindicator.setAttribute("class", "modal");
+
+ var form = document.getElementsByTagName("form")[0]
+ var formdata = setup_formdata(form);
+
+ document.getElementById("progress-filename").innerHTML = (
+ form.querySelector("input[type='file']").files[0].name);
+ var request = setup_request(
+ form.querySelector("input[type='file']").files[0],
+ document.getElementById("progress-indicator"));
+ request.open(form.getAttribute("method"), form.getAttribute("action"));
+ request.send(formdata);
+ return false;
+}
+
+
+function setup_upload_handlers() {
+ console.info("Setting up the upload handlers.")
+ upload_form = document.getElementsByTagName("form")[0];
+ upload_form.addEventListener("submit", upload_data);
+}