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: `