diff --git a/app/static/js/opaque.js b/app/static/js/opaque.js index 0e23679d5f99f8bf485f57d102922d0f617ba11b..8f4842ebd82c2e04b0d21407f96fb40c4806552a 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 a86a94a3bc56595092d1984a53f2766f431323e9..9437a4f44a7abfda217c6ffba30cbe126659ecae 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 f3c7013d7c7907998a7023b96d9657a4b036cb1a..58aba95c9e5b1562cda5ca837fcfb6a8d0f80438 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 %}