From 07c4e31510f1c0262f84cb8c6ee2664b606d70b6 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Tue, 17 Sep 2019 10:56:56 +0200
Subject: [PATCH] Use modals instead of toasts for progress indication.

---
 app/static/js/opaque.js            | 46 ++++++++++++++++--------------
 app/templates/services/nlp.html.j2 | 17 ++++++++++-
 app/templates/services/ocr.html.j2 | 17 ++++++++++-
 3 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/app/static/js/opaque.js b/app/static/js/opaque.js
index 0e23679d..8f4842eb 100644
--- a/app/static/js/opaque.js
+++ b/app/static/js/opaque.js
@@ -1,30 +1,32 @@
-function sendNewJobFormData(form, progress) {
-  var XHR = new XMLHttpRequest();
-  var FD = new FormData(form);
-  XHR.upload.addEventListener("progress", function(event) {
-    progress.querySelector(".determinate").style.width = ((event.loaded / event.total) * 100).toString() + "%";
+function sendNewJobFormData(newJobFormElement, progressModalElement) {
+  var formData;
+  var progress;
+  var progressModal;
+  var request;
+
+  formData = new FormData(newJobFormElement);
+  progressModal = M.Modal.getInstance(progressModalElement);
+  request = new XMLHttpRequest();
+
+  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() + "%";
   });
-  XHR.addEventListener("loadend", function(event) {
-    form.reset();
+  request.addEventListener("loadend", function(event) {
+    newJobFormElement.reset();
     location.reload();
   });
-  XHR.open("POST", window.location.href);
-  XHR.send(FD);
+
+  progressModal.open();
+  request.open("POST", window.location.href);
+  request.send(formData);
 }
-function initNewJobForm(newJobFormElement) {
+function initNewJobForm(newJobFormElement, progressModalElement) {
   newJobFormElement.addEventListener("submit", function(event) {
     event.preventDefault();
-    var toast = M.toast(
-      {html: `<div class="row">
-                <div class="col s12">${this.title.value}</div>
-                <div class="col s12">
-                  <div class="progress">
-                    <div class="determinate" style="width: 0%"></div>
-                  </div>
-                </div>
-              </div>`,
-       displayLength: Infinity}
-    );
-    sendNewJobFormData(this, toast.el.querySelector(".progress"));
+    sendNewJobFormData(newJobFormElement, progressModalElement);
   });
 }
diff --git a/app/templates/services/nlp.html.j2 b/app/templates/services/nlp.html.j2
index a86a94a3..9437a4f4 100644
--- a/app/templates/services/nlp.html.j2
+++ b/app/templates/services/nlp.html.j2
@@ -121,7 +121,22 @@
     </form>
   </div>
 </div>
+
+<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>
+    <div class="progress">
+      <div class="determinate" style="width: 0%"></div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <a href="#!" class="modal-close waves-effect waves-green btn-flat disabled">Cancel</a>
+  </div>
+</div>
+
 <script>
-  initNewJobForm(document.getElementById("new-nlp-job-form"));
+  initNewJobForm(document.getElementById("new-nlp-job-form"),
+                 document.getElementById("progress-modal"));
 </script>
 {% endblock %}
diff --git a/app/templates/services/ocr.html.j2 b/app/templates/services/ocr.html.j2
index f3c7013d..58aba95c 100644
--- a/app/templates/services/ocr.html.j2
+++ b/app/templates/services/ocr.html.j2
@@ -138,7 +138,22 @@
     </form>
   </div>
 </div>
+
+<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>
+    <div class="progress">
+      <div class="determinate" style="width: 0%"></div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <a href="#!" class="modal-close waves-effect waves-green btn-flat disabled">Cancel</a>
+  </div>
+</div>
+
 <script>
-  initNewJobForm(document.getElementById("new-ocr-job-form"));
+  initNewJobForm(document.getElementById("new-ocr-job-form"),
+                 document.getElementById("progress-modal"));
 </script>
 {% endblock %}
-- 
GitLab