From 6a4ad05c35b5cd742eba4af66c7167c5a63fda32 Mon Sep 17 00:00:00 2001 From: Patrick Jentsch Date: Fri, 24 Jan 2020 10:27:11 +0100 Subject: [PATCH] Integrate job list javascript in nopaque.js --- app/static/js/add_job.js | 54 ---------------- app/static/js/nopaque.js | 68 ++++++++++++++++----- app/templates/services/merge_images.html.j2 | 10 +-- app/templates/services/nlp.html.j2 | 10 +-- app/templates/services/ocr.html.j2 | 12 +--- 5 files changed, 60 insertions(+), 94 deletions(-) delete mode 100644 app/static/js/add_job.js diff --git a/app/static/js/add_job.js b/app/static/js/add_job.js deleted file mode 100644 index 29dae6e8..00000000 --- a/app/static/js/add_job.js +++ /dev/null @@ -1,54 +0,0 @@ -function SubmitAddJobForm(newJobFormElement, progressModalElement, request) { - var formData = new FormData(newJobFormElement); - var progressModal = M.Modal.getInstance(progressModalElement); - - progressModal.options.dismissible = false; - progressModalElement.querySelector(".title").innerHTML = newJobFormElement.title.value; - - request.addEventListener("abort", function(event) { - progressModalElement.querySelector(".progress-in-percent").innerHTML = "0%"; - progressModalElement.querySelector(".determinate").style.width = "0%"; - }); - request.addEventListener("load", function(event) { - if (request.status === 201) { - window.location.href = JSON.parse(this.responseText)['redirect_url']; - } - if (request.status === 400) { - progressModal.close(); - progressModalElement.querySelector(".progress-in-percent").innerHTML = "0%"; - progressModalElement.querySelector(".determinate").style.width = "0%"; - for (let [field, errors] of Object.entries(JSON.parse(this.responseText))) { - let fieldElement = document.getElementById(field).closest('.input-field'); - for (let error of errors) { - fieldElement.insertAdjacentHTML('beforeend', '' + error + ''); - } - } - } - if (request.status === 500) { - location.reload(); - } - }); - request.upload.addEventListener("progress", function(event) { - progressInPercent = Math.floor(100 * event.loaded / event.total).toString() + "%"; - progressModalElement.querySelector(".progress-in-percent").innerHTML = progressInPercent; - progressModalElement.querySelector(".determinate").style.width = progressInPercent; - }); - - progressModal.open(); - request.open("POST", window.location.href); - request.send(formData); -} - -function initAddJobForm(addJobFormElement, progressModalElement) { - var request; - - request = new XMLHttpRequest(); - - addJobFormElement.addEventListener("submit", function(event) { - event.preventDefault(); - SubmitAddJobForm(addJobFormElement, progressModalElement, request); - }); - progressModalElement.querySelector(".cancel").addEventListener("click", function(event) { - request.abort(); - }); -} diff --git a/app/static/js/nopaque.js b/app/static/js/nopaque.js index 89afcea0..0dbbe6db 100644 --- a/app/static/js/nopaque.js +++ b/app/static/js/nopaque.js @@ -18,24 +18,64 @@ nopaque["foreignJobsSubscribers"] = []; // nopaque functions nopaque["forms"] = {}; nopaque["forms"]["init"] = function() { - for (let form of document.querySelectorAll(".nopaque-form")) { + var abortRequestElement, progressElement, progressModal, + progressModalElement, request; + + for (let form of document.querySelectorAll(".nopaque-job-form")) { + request = new XMLHttpRequest(); + if (form.dataset.hasOwnProperty('progressModal')) { + progressModalElement = document.getElementById(form.dataset.progressModal); + progressModal = M.Modal.getInstance(progressModalElement); + progressModal.options.dismissible = false; + abortRequestElement = progressModalElement.querySelector(".abort-request"); + // just use request.abort? + abortRequestElement.addEventListener("click", function() {request.abort();}); + progressElement = progressModalElement.querySelector(".determinate"); + } form.addEventListener("submit", function(event) { event.preventDefault(); - if (form.dataset.hasOwnProperty('loadingModal')) { - let loadingModalElement = document.getElementById(form.dataset.loadingModal); - M.Modal.getInstance(loadingModalElement).open(); + var formData, progressModalTitleElement; + + formData = new FormData(form); + // Initialize progress modal + if (progressModalElement) { + progressModalTitleElement = progressModalElement.querySelector(".title"); + progressModalTitleElement.innerText = formData.get("title"); + progressElement.style.width = "0%"; + progressModal.open(); } - let data = {}; - for (let input of form.querySelectorAll("input")) { - if (input.type === "file") { - file = input.files[0]; - data[`${input.name}-wrapper`] = {"bytes": file, "name": file.name}; - } else { - data[input.name] = input.value; + request.open("POST", window.location.href); + request.send(formData); + }); + request.addEventListener("load", function(event) { + var errorElement, fieldElement; + + if (request.status === 201) { + window.location.href = JSON.parse(this.responseText)['redirect_url']; + } + if (request.status === 400) { + for (let [field, errors] of Object.entries(JSON.parse(this.responseText))) { + fieldElement = form.querySelector(`input[name="${field}"]`).closest(".input-field"); + for (let error of errors) { + errorElement = document.createElement("span"); + errorElement.classList.add("helper-text", "red-text"); + errorElement.innerText = error; + fieldElement.appendChild(errorElement); + } + } + if (progressModalElement) { + progressModal.close(); } } - nopaque.socket.emit(`submit-${form.id}`, data); + if (request.status === 500) { + location.reload(); + } }); + if (progressModalElement) { + request.upload.addEventListener("progress", function(event) { + progressElement.style.width = Math.floor(100 * event.loaded / event.total).toString() + "%"; + }); + } } } @@ -131,9 +171,7 @@ nopaque.socket.on('update-foreign-jobs', function(msg) { document.addEventListener("DOMContentLoaded", function() { M.AutoInit(); M.CharacterCounter.init(document.querySelectorAll(`input[data-length][type="text"]`)); - M.Dropdown.init(document.getElementById("nav-notifications"), - {"alignment": "right", "constrainWidth": false, "coverTrigger": false}); - M.Dropdown.init(document.getElementById("nav-account"), + M.Dropdown.init(document.querySelectorAll('#nav-notifications, #nav-account'), {"alignment": "right", "constrainWidth": false, "coverTrigger": false}); nopaque.forms.init(); nopaque.navigation.init(); diff --git a/app/templates/services/merge_images.html.j2 b/app/templates/services/merge_images.html.j2 index 816712c7..5bf8acc6 100644 --- a/app/templates/services/merge_images.html.j2 +++ b/app/templates/services/merge_images.html.j2 @@ -37,7 +37,7 @@
-
+
{{ add_job_form.hidden_tag() }}
@@ -100,15 +100,9 @@
-

uploaded

- Cancel + Cancel
- - {% endblock %} diff --git a/app/templates/services/nlp.html.j2 b/app/templates/services/nlp.html.j2 index ba0be5e9..7bb26327 100644 --- a/app/templates/services/nlp.html.j2 +++ b/app/templates/services/nlp.html.j2 @@ -53,7 +53,7 @@
- +
{{ add_job_form.hidden_tag() }}
@@ -128,15 +128,9 @@
-

uploaded

- Cancel + Cancel
- - {% endblock %} diff --git a/app/templates/services/ocr.html.j2 b/app/templates/services/ocr.html.j2 index 2ddba650..93cf8f00 100644 --- a/app/templates/services/ocr.html.j2 +++ b/app/templates/services/ocr.html.j2 @@ -54,7 +54,7 @@
- +
{{ add_job_form.hidden_tag() }}
@@ -212,19 +212,13 @@ - - {% endblock %}