Simplify nopaque.js

app/static/js/nopaque.js

@@ -19,25 +19,20 @@ nopaque.foreignJobsSubscribers = [];
 
 
 // nopaque functions
-nopaque.forms = {};
+nopaque.Workarounds = {};
-nopaque.forms.init = function() {
+nopaque.Workarounds.apply = function() {
-  var abortRequestElement, parentElement, progressElement, progressModal,
+  // Disable all option elements with no value
-      progressModalElement, request, submitElement;
+  for (let optionElement of document.querySelectorAll('option[value=""]')) {
+    optionElement.disabled = true;
+  }
+}
+
+nopaque.Forms = {};
+nopaque.Forms.init = function() {
+  var abortRequestElement, progressElement, progressModal,
+      progressModalElement, request;
 
   for (let form of document.querySelectorAll(".nopaque-job-form")) {
-    submitElement = form.querySelector('button[type="submit"]');
-    submitElement.addEventListener("click", function() {
-      for (let selectElement of form.querySelectorAll('select')) {
-        if (selectElement.value === "") {
-          parentElement = selectElement.closest(".input-field");
-          for (let helperTextElement of parentElement.querySelectorAll(".helper-text")) {
-            helperTextElement.remove();
-          }
-          parentElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">Please select an option.</span>`);
-        }
-      }
-    })
-
     request = new XMLHttpRequest();
     if (form.dataset.hasOwnProperty("progressModal")) {
       progressModalElement = document.getElementById(form.dataset.progressModal);
@@ -91,24 +86,14 @@ nopaque.forms.init = function() {
   }
 }
 
-nopaque.navigation = {};
+nopaque.Navigation = {};
-nopaque.navigation.init = function() {
+nopaque.Navigation.init = function() {
-  var slideOutElement, tocElement;
+  /* ### Initialize sidenav-main ### */
-
+  for (let entry of document.querySelectorAll("#sidenav-main a")) {
-  slideOutElement = document.getElementById("slide-out");
-  for (let entry of slideOutElement.querySelectorAll("a:not(.subheader)")) {
     if (entry.href === window.location.href) {
       entry.parentNode.classList.add("active");
     }
   }
-  tocElement = document.getElementById("roadmap");
-  if (tocElement) {
-    for (let entry of tocElement.querySelectorAll("a")) {
-      if (entry.href === window.location.href) {
-        entry.classList.add("active");
-      }
-    }
-  }
 }
 
 
@@ -223,11 +208,12 @@ nopaque.socket.on("match_context", function(message) {
 });
 
 document.addEventListener("DOMContentLoaded", function() {
+  nopaque.Workarounds.apply();
   M.AutoInit();
   M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="text"]'));
   M.Dropdown.init(document.querySelectorAll("#nav-notifications, #nav-account"),
                   {alignment: "right", constrainWidth: false, coverTrigger: false});
-  nopaque.forms.init();
+  nopaque.Forms.init();
-  nopaque.navigation.init();
+  nopaque.Navigation.init();
   nopaque.socket.emit("user_ressources_init");
 });

app/templates/jobs/job.html.j2

@@ -138,7 +138,7 @@
   </div>
   <div class="modal-footer">
     <a href="#!" class="modal-close waves-effect waves-green btn cancel">Cancel</a>
-    <a class="modal-close waves-effect waves-green btn red" href="{{ url_for('jobs.delete_job', job_id=job.id) }}">Confirm<i class="material-icons right">send</i></a>
+    <a class="modal-close waves-effect waves-green btn red" href="{{ url_for('jobs.delete_job', job_id=job.id) }}">Delete<i class="material-icons right">send</i></a>
   </div>
 </div>
 

app/templates/nopaque.html.j2

@@ -56,7 +56,7 @@
         {% endif %}
       </ul>
 
-      <ul id="slide-out" class="sidenav sidenav-fixed">
+      <ul id="sidenav-main" class="sidenav sidenav-fixed">
         <li><a href="{{ url_for('main.index') }}"><i class="material-icons">opacity</i>nopaque</a></li>
         <li><a href="#"><i class="material-icons">linear_scale</i>Workflow</a></li>
         <li><a href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a></li>
@@ -128,6 +128,11 @@
               <li><a href="{{ url_for('services.service', service='corpus_analysis') }}">Corpus analysis</a></li>
             </ul>
           </div>
+          <script>
+          for (let entry of document.querySelectorAll(`#roadmap a`)) {
+            if (entry.href === window.location.href) {entry.classList.add("active");}
+          }
+          </script>
           {% endif %}
         </div>
       {% if not full_width %}

app/templates/services/ocr.html.j2

@@ -42,7 +42,7 @@
           <div class="col s12 m4">
             <div class="input-field">
               <i class="material-icons prefix">title</i>
-              {{ add_job_form.title(data_length='32') }}
+              {{ add_job_form.title(class="validate", data_length='32') }}
               {{ add_job_form.title.label }}
               {% for error in add_job_form.title.errors %}
                 <span class="helper-text red-text">{{ error }}</span>
@@ -52,7 +52,7 @@
           <div class="col s12 m8">
             <div class="input-field">
               <i class="material-icons prefix">description</i>
-              {{ add_job_form.description(data_length='255') }}
+              {{ add_job_form.description(class="validate", data_length='255') }}
               {{ add_job_form.description.label }}
               {% for error in add_job_form.description.errors %}
                 <span class="helper-text red-text">{{ error }}</span>
@@ -76,7 +76,7 @@
           <div class="col s12 m4">
             <div class="input-field">
               <i class="material-icons prefix">language</i>
-              {{ add_job_form.language() }}
+              {{ add_job_form.language(class="validate") }}
               {{ add_job_form.language.label }}
               {% for error in add_job_form.language.errors %}
                 <span class="helper-text red-text">{{ error }}</span>
@@ -86,7 +86,7 @@
           <div class="col s12 m3">
             <div class="input-field">
               <i class="material-icons prefix">apps</i>
-              {{ add_job_form.version() }}
+              {{ add_job_form.version(class="validate") }}
               {{ add_job_form.version.label }}
               {% for error in add_job_form.version.errors %}
                 <span class="helper-text red-text">{{ error }}</span>