Add admin view on foreign jobs.

app/templates/admin/admin_user_page.html.j2

@@ -21,50 +21,41 @@
     </div>
   </div>
 </div>
+<script type="text/javascript">
+  var selected_user_id = {{selected_user.id|tojson|safe}}
+  socket.emit('connect_admin', selected_user_id);
+</script>
 <div class="col s12 m6">
-  <div class="card large">
-    <div class="card-content">
-      <span class="card-title">User Jobs</span>
-      <div id="users">
-        <div class="input-field">
-          <i class="material-icons prefix">search</i>
-          <input id="search-corpus" class="search" type="text"></input>
-          <label for="search-corpus">Search jobs</label>
+  <div id="job-list">
+    <div class="card">
+      <div class="card-content">
+        <div class="row">
+          <div class="col s12">
+            <div class="input-field">
+              <i class="material-icons prefix">search</i>
+              <input id="search-job" class="search" type="text"></input>
+              <label for="search-job">Search job</label>
+            </div>
+          </div>
+          <div class="col s12">
+            <ul class="pagination"></ul>
+          </div>
         </div>
-        <div class="collection list">
-          {% for job in selected_user.jobs.all() %}
-            {% if job.service == 'nlp' %}
-              {% set service_color = 'blue' %}
-              {% set service_icon = 'format_textdirection_l_to_r' %}
-            {% elif job.service =='ocr' %}
-              {% set service_color = 'green' %}
-              {% set service_icon = 'find_in_page' %}
-            {% else %}
-              {% set service_color = 'red' %}
-              {% set service_icon = 'help' %}
-            {% endif %}
-            {% if job.status == 'pending' %}
-              {% set badge_color = 'amber' %}
-            {% elif job.status =='running' %}
-              {% set badge_color = 'indigo' %}
-            {% elif job.status =='complete' %}
-              {% set badge_color = 'teal' %}
-            {% else %}
-              {% set badge_color = 'red' %}
-            {% endif %}
-            <a href="{{ url_for('main.job', job_id=job.id) }}" class="collection-item avatar">
-                <i class="material-icons circle {{ service_color }}">{{ service_icon }}</i>
-                <span class="new badge {{ badge_color }}" data-badge-caption="">{{ job.status }}</span>
-                <span class="title">{{ job.title }}</span>
-                <p>{{ job.description }}</p>
-            </a>
-          {% endfor %}
-        </div>
-        <ul class="pagination"></ul>
       </div>
     </div>
+    <div class="collection list"></div>
   </div>
 </div>
+<script>
+  var jobList = new JobList("job-list", {
+    item: '<div><span class="title"></span><span class="description"></span></div>',
+    page: 4,
+    pagination: true,
+    valueNames: ["description", "title", {data: ["id"]}]
+  });
+  jobList.on("filterComplete", List.updatePagination);
+  jobList.on("searchComplete", List.updatePagination);
+</script>
 <div class="col s12">
   <div class="card large">
     <div class="card-content">

app/templates/base.html.j2

@@ -26,6 +26,7 @@
       var jobsSubscribers = [];
       var socket = io();
 
+
       socket.on('init-corpora', function(msg) {
         var subscriber;
 
@@ -64,6 +65,46 @@
         console.log(msg);
       });
     </script>
+    <script>
+      var foreignCorpora;
+      var foreignCorporaSubscribers = [];
+      var foreignJobs;
+      var foreignJobsSubscribers = [];
+
+
+      socket.on('init-foreign-corpora', function(msg) {
+        var subscriber;
+
+        foreignCorpora = JSON.parse(msg);
+        for (subscriber of foreignCorporaSubscribers) {subscriber._init();}
+      });
+
+
+      socket.on('init-foreign-jobs', function(msg) {
+        var subscriber;
+
+        foreignJobs = JSON.parse(msg);
+        for (subscriber of foreignJobsSubscribers) {subscriber._init();}
+      });
+
+
+      socket.on('update-foreign-corpora', function(msg) {
+        var patch, patchedCorpora, subscriber;
+
+        patch = JSON.parse(msg);
+        foreignCorpora = jsonpatch.apply_patch(foreignCorpora, patch);
+        for (subscriber of foreignCorporaSubscribers) {subscriber._update(patch);}
+      });
+
+
+      socket.on('update-foreign-jobs', function(msg) {
+        var patch, patchedJobs, subscriber;
+
+        patch = JSON.parse(msg);
+        foreignJobs = jsonpatch.apply_patch(foreignJobs, patch);
+        for (subscriber of foreignJobsSubscribers) {subscriber._update(patch);}
+      });
+    </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   </head>
   <body>