Merge branch 'development' of gitlab.ub.uni-bielefeld.de:sfb1288inf/opaque into development

app/static/js/CorpusList.js

@@ -37,6 +37,7 @@ class CorpusList extends List {
               corpusStatusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS));
               corpusStatusElement.classList.add(CorpusList.STATUS_COLORS[operation.value] || CorpusList.STATUS_COLORS['default']);
               corpusStatusElement.innerHTML = operation.value;
+              item.values({status: operation.value});
               break;
             default:
               break;
@@ -106,13 +107,15 @@ class CorpusList extends List {
      * Add an entry to the List.js datastructure and immediatly replace the
      * generic DOM element with our own one created above.
     */
-    this.add([{description: corpus.description, id: corpus.id, title: corpus.title}],
+    this.add([{description: corpus.description, id: corpus.id,
+               status: corpus.status, title: corpus.title}],
              function(items) {items[0].elm = rowElement;});
   }
 }
 CorpusList.DEFAULT_OPTIONS = {item: `<div>
-                                       <span class="title"></span>
                                        <span class="description"></span>
+                                       <td class="status"></td>
+                                       <span class="title"></span>
                                      </div>`,
                               page: 4,
                               pagination: {innerWindow: 8, outerWindow: 1},

app/static/js/JobList.js

@@ -37,6 +37,7 @@ class JobList extends List {
               jobStatusElement.classList.remove(...Object.values(JobList.STATUS_COLORS));
               jobStatusElement.classList.add(JobList.STATUS_COLORS[operation.value] || JobList.STATUS_COLORS['default']);
               jobStatusElement.innerHTML = operation.value;
+              item.values({status: operation.value});
               break;
             default:
               break;
@@ -106,17 +107,21 @@ class JobList extends List {
      * Add an entry to the List.js datastructure and immediatly replace the
      * generic DOM element with our own one created above.
     */
-    this.add([{description: job.description, id: job.id, title: job.title}],
+    this.add([{description: job.description, id: job.id,
+               service: `/service=${job.service}`, status: job.status,
+               title: job.title}],
              function(items) {items[0].elm = rowElement;});
   }
 }
-JobList.DEFAULT_OPTIONS = {item: `<div>
-                                    <span class="title"></span>
-                                    <span class="description"></span>
-                                  </div>`,
+JobList.DEFAULT_OPTIONS = {item: `<tr>
+                                    <td class="description"></td>
+                                    <td class="service"></td>
+                                    <td class="status"></td>
+                                    <td class="title"></td>
+                                  </tr>`,
                            page: 4,
                            pagination: {innerWindow: 8, outerWindow: 1},
-                           valueNames: ["description", "title", {data: ["id"]}]};
+                           valueNames: ["description", "service", "status", "title", {data: ["id"]}]};
 JobList.SERVICE_ICONS = {"merge_images": "burst_mode",
                          "nlp": "format_textdirection_l_to_r",
                          "ocr": "find_in_page",

app/static/js/nopaque.js

@@ -0,0 +1,104 @@
+var socket = io();
+
+var corpora;
+var corporaSubscribers = [];
+var jobs;
+var jobsSubscribers = [];
+
+var foreignCorpora;
+var foreignCorporaSubscribers = [];
+var foreignJobs;
+var foreignJobsSubscribers = [];
+
+
+function toast(message) {
+  var toast;
+  var toastActionElement;
+
+  toast = M.toast({"html": `<span>${message}</span>
+                            <button class="btn-flat toast-action red-text" data-action="close">
+                              <i class="material-icons">close</i>
+                            </button>`});
+  toastActionElement = toast.el.querySelector(`.toast-action[data-action="close"]`);
+  if (toastActionElement) {
+    toastActionElement.addEventListener("click", function() {
+      toast.dismiss();
+    });
+  }
+}
+
+
+socket.on('init-corpora', function(msg) {
+  corpora = JSON.parse(msg);
+  for (let subscriber of corporaSubscribers) {subscriber._init(corpora);}
+});
+
+
+socket.on('init-jobs', function(msg) {
+  jobs = JSON.parse(msg);
+  for (let subscriber of jobsSubscribers) {subscriber._init(jobs);}
+});
+
+
+socket.on('update-corpora', function(msg) {
+  var patch;
+
+  patch = JSON.parse(msg);
+  corpora = jsonpatch.apply_patch(corpora, patch);
+  for (let subscriber of corporaSubscribers) {subscriber._update(patch);}
+});
+
+
+socket.on('update-jobs', function(msg) {
+  var patch;
+
+  patch = JSON.parse(msg);
+  jobs = jsonpatch.apply_patch(jobs, patch);
+  for (let subscriber of jobsSubscribers) {subscriber._update(patch);}
+});
+
+
+socket.on('init-foreign-corpora', function(msg) {
+  foreignCorpora = JSON.parse(msg);
+  for (let subscriber of foreignCorporaSubscribers) {subscriber._init(foreignCorpora);}
+});
+
+
+socket.on('init-foreign-jobs', function(msg) {
+  foreignJobs = JSON.parse(msg);
+  for (let subscriber of foreignJobsSubscribers) {subscriber._init(foreignJobs);}
+});
+
+
+socket.on('update-foreign-corpora', function(msg) {
+  var patch;
+
+  patch = JSON.parse(msg);
+  foreignCorpora = jsonpatch.apply_patch(foreignCorpora, patch);
+  for (let subscriber of foreignCorporaSubscribers) {subscriber._update(patch);}
+});
+
+
+socket.on('update-foreign-jobs', function(msg) {
+  var patch;
+
+  patch = JSON.parse(msg);
+  foreignJobs = jsonpatch.apply_patch(foreignJobs, patch);
+  for (let subscriber of foreignJobsSubscribers) {subscriber._update(patch);}
+});
+
+
+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"),
+                  {"alignment": "right", "constrainWidth": false, "coverTrigger": false});
+  for (let entry of document.querySelectorAll("#slide-out a:not(.subheader)")) {
+    if (entry.href === window.location.href) {
+      entry.parentNode.classList.add("active");
+    }
+  }
+  socket.emit("subscribe_user_ressources");
+});

app/templates/admin/user.html.j2

@@ -35,10 +35,21 @@
     <div class="card-content" id="corpora">
       <div class="input-field">
         <i class="material-icons prefix">search</i>
-        <input id="search-corpus" class="search" type="text"></input>
+        <input id="search-corpus" class="search" type="search"></input>
         <label for="search-corpus">Search corpus</label>
       </div>
       <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th>
+              <span class="sort" data-sort="title">Title</span>
+              <span class="sort" data-sort="description">Description</span>
+            </th>
+            <th><span class="sort" data-sort="status">Status</span></th>
+            <th></th>
+          </tr>
+        </thead>
         <tbody class="list"></tbody>
       </table>
       <ul class="pagination"></ul>
@@ -52,10 +63,21 @@
     <div class="card-content" id="jobs">
       <div class="input-field">
         <i class="material-icons prefix">search</i>
-        <input id="search-job" class="search" type="text"></input>
+        <input id="search-job" class="search" type="search"></input>
         <label for="search-job">Search job</label>
       </div>
       <table>
+        <thead>
+          <tr>
+            <th><span class="sort" data-sort="service">Service</span></th>
+            <th>
+              <span class="sort" data-sort="title">Title</span>
+              <span class="sort" data-sort="description">Description</span>
+            </th>
+            <th><span class="sort" data-sort="status">Status</span></th>
+            <th></th>
+          </tr>
+        </thead>
         <tbody class="list"></tbody>
       </table>
       <ul class="pagination"></ul>
@@ -78,9 +100,8 @@
 
 
 <script>
-  socket.emit('subscribe_foreign_user_ressources', {{ user.id }});
-
   var corpusList = new CorpusList("corpora", foreignCorporaSubscribers);
   var jobList = new JobList("jobs", foreignJobsSubscribers);
+  socket.emit("subscribe_foreign_user_ressources", {{ user.id }});
 </script>
 {% endblock %}

app/templates/base.html.j2

@@ -2,111 +2,27 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {% if title %}
     <title>nopaque – {{ title }}</title>
     {% else %}
     <title>nopaque</title>
     {% endif %}
-    <link href="{{ url_for('static', filename='images/favicon.png') }}" rel="icon" type="image/png">
-    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='fonts/Material_design_icons/material-icons.css') }}">
-    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/Materialize/materialize.min.css') }}" media="screen,projection"/>
-    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}" media="screen,projection"/>
+    <link rel="icon" href="{{ url_for('static', filename='images/favicon.png') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='fonts/Material_design_icons/material-icons.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/Materialize/materialize.min.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}">
     <script src="{{ url_for('static', filename='js/JSONPatch.js/jsonpatch.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/Dark_Reader/darkreader.js') }}"></script>
     <script src="{{ url_for('static', filename='js/List.js/list.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/Socket.IO/socket.io.slim.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/nopaque.js') }}"></script>
     <script src="{{ url_for('static', filename='js/add_job.js') }}"></script>
     <script src="{{ url_for('static', filename='js/CorpusList.js') }}"></script>
     <script src="{{ url_for('static', filename='js/JobList.js') }}"></script>
-    <script>
-      {% if current_user.is_dark == True %}
-      DarkReader.enable({
-        brightness: 100,
-        contrast: 100,
-        sepia: 0
-      });
-      {% else %}
-      DarkReader.disable();
-      {% endif %}
-    </script>
-    <script>
-      var corpora;
-      var corporaSubscribers = [];
-      var jobs;
-      var jobsSubscribers = [];
-      var socket = io();
-
-      socket.on('init-corpora', function(msg) {
-        corpora = JSON.parse(msg);
-        for (let subscriber of corporaSubscribers) {subscriber._init(corpora);}
-      });
-      socket.on('init-jobs', function(msg) {
-        jobs = JSON.parse(msg);
-        for (let subscriber of jobsSubscribers) {subscriber._init(jobs);}
-      });
-      socket.on('update-corpora', function(msg) {
-        var patch;
-
-        patch = JSON.parse(msg);
-        corpora = jsonpatch.apply_patch(corpora, patch);
-        for (let subscriber of corporaSubscribers) {subscriber._update(patch);}
-      });
-      socket.on('update-jobs', function(msg) {
-        var patch;
-
-        patch = JSON.parse(msg);
-        jobs = jsonpatch.apply_patch(jobs, patch);
-        for (let subscriber of jobsSubscribers) {subscriber._update(patch);}
-      });
-      socket.on('message', function(msg) {
-        console.log(msg);
-      });
-    </script>
-    <script>
-      var foreignCorpora;
-      var foreignCorporaSubscribers = [];
-      var foreignJobs;
-      var foreignJobsSubscribers = [];
-
-      socket.on('init-foreign-corpora', function(msg) {
-        foreignCorpora = JSON.parse(msg);
-        for (let subscriber of foreignCorporaSubscribers) {subscriber._init(foreignCorpora);}
-      });
-      socket.on('init-foreign-jobs', function(msg) {
-        foreignJobs = JSON.parse(msg);
-        for (let subscriber of foreignJobsSubscribers) {subscriber._init(foreignJobs);}
-      });
-      socket.on('update-foreign-corpora', function(msg) {
-        var patch;
-
-        patch = JSON.parse(msg);
-        foreignCorpora = jsonpatch.apply_patch(foreignCorpora, patch);
-        for (let subscriber of foreignCorporaSubscribers) {subscriber._update(patch);}
-      });
-      socket.on('update-foreign-jobs', function(msg) {
-        var patch;
-
-        patch = JSON.parse(msg);
-        foreignJobs = jsonpatch.apply_patch(foreignJobs, patch);
-        for (let subscriber of foreignJobsSubscribers) {subscriber._update(patch);}
-      });
-    </script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   </head>
   <body>
     <header>
-      <div id="nav-notifications-dropdown" class="dropdown-content grey-text text-darken-4">
-        <p>Notifications</p>
-      </div>
-      <ul id="nav-account-dropdown" class="dropdown-content">
-        {% if current_user.is_authenticated %}
-        <li><a href="{{ url_for('profile.index') }}"><i class="material-icons">settings</i>Settings</a></li>
-        <li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">power_settings_new</i>Log out</a></li>
-        {% else %}
-        <li><a href="{{ url_for('auth.login') }}"><i class="material-icons">person</i>Log in</a></li>
-        <li><a href="{{ url_for('auth.register') }}"><i class="material-icons">person_add</i>Register</a></li>
-        {% endif %}
-      </ul>
       <div class="navbar-fixed">
         <nav>
           <div class="nav-wrapper">
@@ -128,6 +44,20 @@
         </nav>
       </div>
 
+      <!-- Dropdown menus for the navbar -->
+      <div id="nav-notifications-dropdown" class="dropdown-content grey-text text-darken-4">
+        <p>Notifications</p>
+      </div>
+      <ul id="nav-account-dropdown" class="dropdown-content">
+        {% if current_user.is_authenticated %}
+        <li><a href="{{ url_for('profile.index') }}"><i class="material-icons">settings</i>Settings</a></li>
+        <li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">power_settings_new</i>Log out</a></li>
+        {% else %}
+        <li><a href="{{ url_for('auth.login') }}"><i class="material-icons">person</i>Log in</a></li>
+        <li><a href="{{ url_for('auth.register') }}"><i class="material-icons">person_add</i>Register</a></li>
+        {% endif %}
+      </ul>
+
       <ul id="slide-out" 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>
@@ -168,45 +98,16 @@
         </div>
       </div>
     </footer>
-
-    <script>
-      socket.emit('subscribe_user_ressources');
-    </script>
     <script src="{{ url_for('static', filename='js/Materialize/materialize.min.js') }}"></script>
     <script>
-      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"),
-        {"alignment": "right", "constrainWidth": false, "coverTrigger": false}
-      );
-      // Highlight current navigation entry
-      var entry;
-      for (entry of document.querySelectorAll("#slide-out a:not(.subheader)")) {
-        if (entry.href === window.location.href) {
-          entry.parentNode.classList.add("active");
-        }
-      }
-      var toast;
-      var toastActionElement;
-      {% for message in get_flashed_messages() %}
-      toast = M.toast({"html": `<span>{{ message }}</span><button class="btn-flat toast-action red-text" data-action="close"><i class="material-icons">close</i></button>`});
-      toastActionElement = toast.el.querySelector(".toast-action[data-action='close']");
-      if (toastActionElement) {
-        toastActionElement.addEventListener("click", function() {
-          toast.dismiss();
-        });
-      }
-      {% endfor %}
-      for (toastActionElement of document.querySelectorAll(".toast-action[data-action='close']")) {
-        toastActionElement.addEventListener("click", function(event) {
-          M.Toast.getInstance(toastActionElement.parentElement).dismiss();
-        });
-      }
+      document.addEventListener("DOMContentLoaded", function() {
+        {% if current_user.is_authenticated and current_user.is_dark %}
+        DarkReader.enable({"brightness": 100, "contrast": 100, "sepia": 0});
+        {% endif %}
+        {% for flashed_message in get_flashed_messages() %}
+        toast("{{ flashed_message }}");
+        {% endfor %}
+      });
     </script>
   </body>
 </html>

app/templates/main/dashboard.html.j2

@@ -8,10 +8,21 @@
     <div class="card-content" id="corpora">
       <div class="input-field">
         <i class="material-icons prefix">search</i>
-        <input id="search-corpus" class="search" type="text"></input>
+        <input id="search-corpus" class="search" type="search"></input>
         <label for="search-corpus">Search corpus</label>
       </div>
       <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th>
+              <span class="sort" data-sort="title">Title</span>
+              <span class="sort" data-sort="description">Description</span>
+            </th>
+            <th><span class="sort" data-sort="status">Status</span></th>
+            <th></th>
+          </tr>
+        </thead>
         <tbody class="list"></tbody>
       </table>
       <ul class="pagination"></ul>
@@ -29,10 +40,21 @@
     <div class="card-content" id="jobs">
       <div class="input-field">
         <i class="material-icons prefix">search</i>
-        <input id="search-job" class="search" type="text"></input>
+        <input id="search-job" class="search" type="search"></input>
         <label for="search-job">Search job</label>
       </div>
       <table>
+        <thead>
+          <tr>
+            <th><span class="sort" data-sort="service">Service</span></th>
+            <th>
+              <span class="sort" data-sort="title">Title</span>
+              <span class="sort" data-sort="description">Description</span>
+            </th>
+            <th><span class="sort" data-sort="status">Status</span></th>
+            <th></th>
+          </tr>
+        </thead>
         <tbody class="list"></tbody>
       </table>
       <ul class="pagination"></ul>
@@ -45,12 +67,17 @@
 
 <div id="new-job-modal" class="modal">
   <div class="modal-content">
-    <h4>Job types</h4>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
-    <ul>
-      <li><a href="{{ url_for('services.service', service='merge_images') }}"><i class="material-icons">burst_mode</i>Merge images</a></li>
-      <li><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
-      <li><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
+    <h4>Select a service</h4>
+    <ul class="collection">
+      <a href="{{ url_for('services.service', service='merge_images') }}" class="collection-item">
+        <i class="material-icons left">burst_mode</i>Merge images
+      </a>
+      <a href="{{ url_for('services.service', service='nlp') }}" class="collection-item">
+        <i class="material-icons left">format_textdirection_l_to_r</i>Natural Language Processing
+      </a>
+      <a href="{{ url_for('services.service', service='ocr') }}" class="collection-item">
+        <i class="material-icons left">find_in_page</i>Optical Character Recognition
+      </a>
     </ul>
   </div>
   <div class="modal-footer">
@@ -64,9 +91,5 @@
 
   // Init job list
   var jobList = new JobList("jobs", jobsSubscribers);
-
-  document.addEventListener('DOMContentLoaded', function() {
-    M.Dropdown.init(document.getElementById("new-job"), {"coverTrigger": false});
-  });
 </script>
 {% endblock %}