From d7e71638a2dbe0e8d43d1b5e2f58d41c9538ce36 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Tue, 17 Sep 2019 16:15:37 +0200
Subject: [PATCH] Update progress modal
---
app/static/js/opaque.js | 10 +++++++---
app/templates/services/nlp.html.j2 | 4 ++--
app/templates/services/ocr.html.j2 | 4 ++--
3 files changed, 11 insertions(+), 7 deletions(-)
diff --git a/app/static/js/opaque.js b/app/static/js/opaque.js
index 9d9b8ac9..03964c02 100644
--- a/app/static/js/opaque.js
+++ b/app/static/js/opaque.js
@@ -10,14 +10,18 @@ function sendNewJobFormData(newJobFormElement, progressModalElement, request) {
progressModal.options.dismissible = false;
progressModalElement.querySelector(".title").innerHTML = newJobFormElement.title.value;
request.upload.addEventListener("progress", function(event) {
- progressModalElement.querySelector(".loaded").innerHTML = event.loaded.toString();
- progressModalElement.querySelector(".total").innerHTML = event.total.toString();
- progressModalElement.querySelector(".determinate").style.width = ((event.loaded / event.total) * 100).toString() + "%";
+ progressInPercent = Math.floor(100 * event.loaded / event.total).toString() + "%";
+ progressModalElement.querySelector(".progress-in-percent").innerHTML = progressInPercent;
+ progressModalElement.querySelector(".determinate").style.width = progressInPercent;
});
request.addEventListener("load", function(event) {
newJobFormElement.reset();
location.reload();
});
+ request.addEventListener("abort", function(event) {
+ progressModalElement.querySelector(".progress-in-percent").innerHTML = "0%";
+ progressModalElement.querySelector(".determinate").style.width = "0%";
+ });
progressModal.open();
request.open("POST", window.location.href);
diff --git a/app/templates/services/nlp.html.j2 b/app/templates/services/nlp.html.j2
index 8fcf30aa..6502df7c 100644
--- a/app/templates/services/nlp.html.j2
+++ b/app/templates/services/nlp.html.j2
@@ -124,11 +124,11 @@
<div id="progress-modal" class="modal">
<div class="modal-content">
- <h4 class="title"></h4>
- <p>Uploading files... <span class="loaded"></span>/<span class="total"></span></p>
+ <h4><i class="material-icons prefix">file_upload</i> Uploading files for <span class="title"></span></h4>
<div class="progress">
<div class="determinate" style="width: 0%"></div>
</div>
+ <p><span class="progress-in-percent"></span> uploaded</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn red cancel">Cancel</a>
diff --git a/app/templates/services/ocr.html.j2 b/app/templates/services/ocr.html.j2
index 9368e880..4531a12b 100644
--- a/app/templates/services/ocr.html.j2
+++ b/app/templates/services/ocr.html.j2
@@ -141,11 +141,11 @@
<div id="progress-modal" class="modal">
<div class="modal-content">
- <h4 class="title"></h4>
- <p>Uploading files... <span class="loaded"></span>/<span class="total"></span></p>
+ <h4><i class="material-icons prefix">file_upload</i> Uploading files for <span class="title"></span></h4>
<div class="progress">
<div class="determinate" style="width: 0%"></div>
</div>
+ <p><span class="progress-in-percent"></span> uploaded</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn red cancel">Cancel</a>
--
GitLab