From 292c24b38fd02dfcceaa8f1acd249edb1daf9296 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Tue, 18 Feb 2020 14:39:05 +0100
Subject: [PATCH] Simplify nopaque.js

---
 app/static/js/nopaque.js           | 52 +++++++++++-------------------
 app/templates/jobs/job.html.j2     |  2 +-
 app/templates/nopaque.html.j2      |  7 +++-
 app/templates/services/ocr.html.j2 |  8 ++---
 4 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/app/static/js/nopaque.js b/app/static/js/nopaque.js
index 629a4434..01406fac 100644
--- a/app/static/js/nopaque.js
+++ b/app/static/js/nopaque.js
@@ -19,25 +19,20 @@ nopaque.foreignJobsSubscribers = [];
 
 
 // nopaque functions
-nopaque.forms = {};
-nopaque.forms.init = function() {
-  var abortRequestElement, parentElement, progressElement, progressModal,
-      progressModalElement, request, submitElement;
+nopaque.Workarounds = {};
+nopaque.Workarounds.apply = function() {
+  // Disable all option elements with no value
+  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.init = function() {
-  var slideOutElement, tocElement;
-
-  slideOutElement = document.getElementById("slide-out");
-  for (let entry of slideOutElement.querySelectorAll("a:not(.subheader)")) {
+nopaque.Navigation = {};
+nopaque.Navigation.init = function() {
+  /* ### Initialize sidenav-main ### */
+  for (let entry of document.querySelectorAll("#sidenav-main a")) {
     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.navigation.init();
+  nopaque.Forms.init();
+  nopaque.Navigation.init();
   nopaque.socket.emit("user_ressources_init");
 });
diff --git a/app/templates/jobs/job.html.j2 b/app/templates/jobs/job.html.j2
index b0e10fe1..faef08ee 100644
--- a/app/templates/jobs/job.html.j2
+++ b/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>
 
diff --git a/app/templates/nopaque.html.j2 b/app/templates/nopaque.html.j2
index 9b11b5df..7e4554d3 100644
--- a/app/templates/nopaque.html.j2
+++ b/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 %}
diff --git a/app/templates/services/ocr.html.j2 b/app/templates/services/ocr.html.j2
index 5fc4f4c6..d09d0a34 100644
--- a/app/templates/services/ocr.html.j2
+++ b/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>