update nopaque forms

app/static/js/nopaque/main.js

@@ -5,72 +5,151 @@
 var nopaque = {};
 
 nopaque.Forms = {};
-nopaque.Forms.init = function() {
+nopaque.Forms.autoInit = () => {
-  var abortRequestElement, parentElement, progressElement, progressModal,
+  const nopaqueSubmitForms = document.querySelectorAll('.nopaque-submit-form');
-      progressModalElement, request, submitElement;
+  let nopaqueSubmitForm;
 
-  for (let form of document.querySelectorAll(".nopaque-submit-form")) {
+  for (nopaqueSubmitForm of nopaqueSubmitForms) {
-    submitElement = form.querySelector('button[type="submit"]');
+    nopaqueSubmitForm.addEventListener('submit', (event) => {
-    submitElement.addEventListener("click", function() {
+      event.preventDefault();
-      for (let selectElement of form.querySelectorAll('select')) {
+
-        if (selectElement.value === "") {
+      const request = new XMLHttpRequest();
-          parentElement = selectElement.closest(".input-field");
+      const selectElements = nopaqueSubmitForm.querySelectorAll('select');
-          parentElement.querySelector(".select-dropdown").classList.add("invalid");
+      let abortElement;
-          for (let helperTextElement of parentElement.querySelectorAll(".helper-text")) {
+      let helperTextElement;
+      let helperTextElements;
+      let inputFieldElement;
+      let modal;
+      let modalElement;
+      let progressElement;
+      let selectElement;
+      let tmp;
+
+      // Check if select elements are filled out properly
+      for (selectElement of selectElements) {
+        if (selectElement.value === '') {
+          inputFieldElement = selectElement.closest('.input-field');
+          inputFieldElement.querySelector('.select-dropdown').classList.add('invalid');
+          helperTextElements = inputFieldElement.querySelectorAll('.helper-text');
+          for (helperTextElement of helperTextElements) {
             helperTextElement.remove();
           }
-          parentElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">Please select an option.</span>`);
+          inputFieldElement.insertAdjacentHTML(
+            'beforeend',
+            '<span class="helper-text error-color-text">Please select an option.</span>'
+          );
+          return;
         }
       }
+
+      // Setup modal
+      tmp = document.createElement('div');
+      tmp.innerHTML = `
+        <div class="modal">
+          <div class="modal-content">
+            <h4><i class="material-icons left">file_upload</i>Uploading files...</h4>
+            <div class="progress">
+              <div class="determinate" style="width: 0%"></div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <a href="#!" class="btn red waves-effect waves-light abort">Cancel</a>
+          </div>
+        </div>
+      `.trim();
+      modalElement = document.querySelector('#modals').appendChild(tmp.firstChild);
+      modal = M.Modal.init(
+        modalElement,
+        {
+          dismissible: false,
+          onCloseEnd: () => {
+            modal.destroy();
+            modalElement.remove();
+          }
+        }
+      );
+      modal.open();
+
+      // Setup abort handling
+      abortElement = modalElement.querySelector('.abort');
+      abortElement.addEventListener('click', event => {request.abort();});
+      request.addEventListener('abort', event => {
+        request.abort();
+        modal.close();
       });
 
-    request = new XMLHttpRequest();
+      // Setup load handling (after the request completed)
-    if (form.dataset.hasOwnProperty("progressModal")) {
+      request.addEventListener('load', event => {
-      progressModalElement = document.getElementById(form.dataset.progressModal);
+        const response = JSON.parse(request.responseText);
-      progressModal = M.Modal.getInstance(progressModalElement);
+        let inputError;
-      progressModal.options.dismissible = false;
+        let inputErrors;
-      abortRequestElement = progressModalElement.querySelector(".abort-request");
+        let inputFieldElement;
-      abortRequestElement.addEventListener("click", function() {request.abort();});
+        let inputName;
-      progressElement = progressModalElement.querySelector(".determinate");
-    }
-    form.addEventListener("submit", function(event) {
-      event.preventDefault();
-      var formData;
-
-      formData = new FormData(form);
-      // Initialize progress modal
-      if (progressModalElement) {
-        progressElement.style.width = "0%";
-        progressModal.open();
-      }
-      request.open("POST", window.location.href);
-      request.send(formData);
-    });
-    request.addEventListener("load", function(event) {
-      var fieldElement;
 
         if (request.status === 201) {
-        window.location.href = JSON.parse(this.responseText).redirect_url;
+          window.location.href = response.redirect_url;
         }
         if (request.status === 400) {
-        for (let [field, errors] of Object.entries(JSON.parse(this.responseText))) {
+          for ([inputName, inputErrors] of Object.entries(response)) {
-          fieldElement = form.querySelector(`input[name$="${field}"]`).closest(".input-field");
+            inputFieldElement = nopaqueSubmitForm.querySelector(`input[name="${inputName}"], select[name="${inputName}"]`).closest('.input-field');
-          for (let error of errors) {
+            for (inputError of inputErrors) {
-            fieldElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">${error}</span>`);
+              inputFieldElement.insertAdjacentHTML(
+                'beforeend',
+                `<span class="helper-text red-text">${inputError}</span>`
+              );
             }
           }
-        if (progressModalElement) {
-          progressModal.close();
-        }
         }
         if (request.status === 500) {
           location.reload();
         }
+        modal.close();
       });
-    if (progressModalElement) {
+
-      request.upload.addEventListener("progress", function(event) {
+      // Setup progress handling
-        progressElement.style.width = Math.floor(100 * event.loaded / event.total).toString() + "%";
+      progressElement = modalElement.querySelector('.progress > .determinate');
+      request.upload.addEventListener('progress', event => {
+        const progress = Math.floor(100 * event.loaded / event.total);
+        progressElement.style.width = `${progress}%`;
       });
+
+      request.open('POST', window.location.href);
+      request.send(new FormData(nopaqueSubmitForm));
+    });
+  }
+}
+
+
+nopaque.RessourceList = {};
+nopaque.RessourceList.autoInit = () => {
+  const nopaqueRessourceListElements = document.querySelectorAll('.nopaque-ressource-list[data-ressource-type]:not(.no-autoinit)');
+  let nopaqueRessourceListElement;
+
+  for (nopaqueRessourceListElement of nopaqueRessourceListElements) {
+    switch (nopaqueRessourceListElement.dataset.ressourceType) {
+      case 'Corpus':
+        new CorpusList(nopaqueRessourceListElement);
+        break;
+      case 'CorpusFile':
+        new CorpusFileList(nopaqueRessourceListElement);
+        break;
+      case 'Job':
+        new JobList(nopaqueRessourceListElement);
+        break;
+      case 'JobInput':
+        new JobInputList(nopaqueRessourceListElement);
+        break;
+      case 'JobResult':
+        new JobResultList(nopaqueRessourceListElement);
+        break;
+      case 'QueryResult':
+        new QueryResultList(nopaqueRessourceListElement);
+        break;
+      case 'User':
+        new UserList(nopaqueRessourceListElement);
+        break;
+      default:
+        break;
     }
   }
 }

app/templates/_scripts.html.j2

@@ -40,33 +40,7 @@
   app.addEventListener('users.patch', patch => jobStatusNotifier.usersPatchHandler(patch));
   app.getUserById(currentUserId).then(user => {}, error => {throw JSON.stringify(error)});
   {% endif %}
-  nopaque.Forms.init();
+  nopaque.Forms.autoInit();
-  for (let nopaqueRessourceListElement of document.querySelectorAll('.nopaque-ressource-list[data-ressource-type]:not(.no-autoinit)')) {
+  nopaque.RessourceList.autoInit();
-    switch (nopaqueRessourceListElement.dataset.ressourceType) {
-      case 'Corpus':
-        new CorpusList(nopaqueRessourceListElement);
-        break;
-      case 'CorpusFile':
-        new CorpusFileList(nopaqueRessourceListElement);
-        break;
-      case 'Job':
-        new JobList(nopaqueRessourceListElement);
-        break;
-      case 'JobInput':
-        new JobInputList(nopaqueRessourceListElement);
-        break;
-      case 'JobResult':
-        new JobResultList(nopaqueRessourceListElement);
-        break;
-      case 'QueryResult':
-        new QueryResultList(nopaqueRessourceListElement);
-        break;
-      case 'User':
-        new UserList(nopaqueRessourceListElement);
-        break;
-      default:
-        break;
-    }
-  }
   for (let flashedMessage of {{ get_flashed_messages(with_categories=True)|tojson }}) {app.flash(flashedMessage[1], flashedMessage[0]);}
 </script>

app/templates/services/nlp.html.j2

@@ -127,7 +127,7 @@
 {% block scripts %}
 {{ super() }}
 <script>
-  var versionField = document.querySelector('#add-nlp-job-form-version');
+  let versionField = document.querySelector('#add-job-form-version');
   versionField.addEventListener('change', (event) => {
     let url = new URL(window.location.href);
     url.search = `?version=${event.target.value}`;

app/templates/services/ocr.html.j2

@@ -154,7 +154,7 @@
 {% block scripts %}
 {{ super() }}
 <script>
-  var versionField = document.querySelector('#add-ocr-job-form-version');
+  let versionField = document.querySelector('#add-job-form-version');
   versionField.addEventListener('change', (event) => {
     let url = new URL(window.location.href);
     url.search = `?version=${event.target.value}`;