Rework list handling

web/app/events.py

@@ -33,38 +33,24 @@ def disconnect():
     connected_sessions.remove(request.sid)
 
 
-@socketio.on('user_data_stream_init')
+@socketio.on('start_user_session')
 @socketio_login_required
-def user_data_stream_init():
-    socketio.start_background_task(user_data_stream,
+def start_user_session(user_id):
+    if not (current_user.id == user_id or current_user.is_administrator):
+        return
+    socketio.start_background_task(user_session,
                                    current_app._get_current_object(),
-                                   current_user.id, request.sid)
+                                   user_id, request.sid)
 
 
-@socketio.on('foreign_user_data_stream_init')
-@socketio_login_required
-@socketio_admin_required
-def foreign_user_data_stream_init(user_id):
-    socketio.start_background_task(user_data_stream,
-                                   current_app._get_current_object(),
-                                   user_id, request.sid, foreign=True)
-
-
-def user_data_stream(app, user_id, session_id, foreign=False):
+def user_session(app, user_id, session_id):
     '''
-    ' Sends initial corpus and job lists to the client. Afterwards it checks
-    ' every 3 seconds if changes to the initial values appeared. If changes are
-    ' detected, a RFC 6902 compliant JSON patch gets send.
-    '
-    ' NOTE: The initial values are send as a init events.
-    '       The JSON patches are send as update events.
+    ' Sends initial user data to the client. Afterwards it checks every 3s if
+    ' changes to the initial values appeared. If changes are detected, a
+    ' RFC 6902 compliant JSON patch gets send.
     '''
-    if foreign:
-        init_event = 'foreign_user_data_stream_init'
-        update_event = 'foreign_user_data_stream_update'
-    else:
-        init_event = 'user_data_stream_init'
-        update_event = 'user_data_stream_update'
+    init_event = 'user_{}_init'.format(user_id)
+    patch_event = 'user_{}_patch'.format(user_id)
     with app.app_context():
         # Gather current values from database.
         user = User.query.get(user_id)
@@ -80,7 +66,7 @@ def user_data_stream(app, user_id, session_id, foreign=False):
                                                        new_user_dict)
             # In case there are patches, send them to the client.
             if user_patch:
-                socketio.emit(update_event, user_patch.to_string(),
+                socketio.emit(patch_event, user_patch.to_string(),
                               room=session_id)
             # Set new values as references for the next iteration.
             user_dict = new_user_dict

web/app/static/css/nopaque.css

@@ -8,6 +8,10 @@ main {
   margin-top: 48px;
 }
 
+table.ressource-list tr {
+  cursor: pointer;
+}
+
 .parallax-container .parallax {
   z-index: auto;
 }

web/app/static/js/nopaque.js

@@ -1,96 +1,138 @@
+class AppClient {
+  constructor(currentUserId) {
+    this.socket = io({transports: ['websocket']});
+    this.users = {};
+    this.users.self = this.loadUser(currentUserId);
+  }
+
+  loadUser(userId) {
+    let user = new User();
+    this.users[userId] = user;
+    this.socket.on(`user_${userId}_init`, msg => user.init(JSON.parse(msg)));
+    this.socket.on(`user_${userId}_patch`, msg => user.patch(JSON.parse(msg)));
+    this.socket.emit('start_user_session', userId);
+    return user;
+  }
+}
+
+
+class User {
+  constructor() {
+    this.data = undefined;
+    this.eventListeners = {
+      corporaInit: [],
+      corporaPatch: [],
+      jobsInit: [],
+      jobsPatch: [],
+      queryResultsInit: [],
+      queryResultsPatch: []
+    };
+  }
+
+  init(data) {
+    this.data = data;
+
+    let listener;
+    for (listener of this.eventListeners.corporaInit) {
+      listener(this.data.corpora);
+    }
+    for (listener of this.eventListeners.jobsInit) {
+      listener(this.data.jobs);
+    }
+    for (listener of this.eventListeners.queryResultsInit) {
+      listener(this.data.query_results);
+    }
+  }
+
+  patch(patch) {
+    this.data = jsonpatch.apply_patch(this.data, patch);
+
+    let corporaPatch = patch.filter(operation => operation.path.startsWith("/corpora"));
+    let jobsPatch = patch.filter(operation => operation.path.startsWith("/jobs"));
+    let queryResultsPatch = patch.filter(operation => operation.path.startsWith("/query_results"));
+
+    for (let listener of this.eventListeners.corporaPatch) {
+      if (corporaPatch.length > 0) {listener(corporaPatch);}
+    }
+    for (let listener of this.eventListeners.jobsPatch) {
+      if (jobsPatch.length > 0) {listener(jobsPatch);}
+    }
+    for (let listener of this.eventListeners.queryResultsPatch) {
+      if (queryResultsPatch.length > 0) {listener(queryResultsPatch);}
+    }
+
+    for (let operation of jobsPatch) {
+      if (operation.op !== 'replace') {continue;}
+      // Matches the only path that should be handled here: /jobs/{jobId}/status
+      if (/^\/jobs\/(\d+)\/status$/.test(operation.path)) {
+        let [match, jobId] = operation.path.match(/^\/jobs\/(\d+)\/status$/);
+        if (this.data.settings.job_status_site_notifications === "end" && !["complete", "failed"].includes(operation.value)) {continue;}
+        nopaque.flash(`[<a href="/jobs/${jobId}">${this.data.jobs[jobId].title}</a>] New status: ${operation.value}`, "job");
+      }
+    }
+  }
+
+  addEventListener(type, listener) {
+    switch (type) {
+      case 'corporaInit':
+        this.eventListeners.corporaInit.push(listener);
+        if (this.data !== undefined) {listener(this.data.corpora);}
+        break;
+      case 'corporaPatch':
+        this.eventListeners.corporaPatch.push(listener);
+        break;
+      case 'jobsInit':
+        this.eventListeners.jobsInit.push(listener);
+        if (this.data !== undefined) {listener(this.data.jobs);}
+        break;
+      case 'jobsPatch':
+        this.eventListeners.jobsPatch.push(listener);
+        break;
+      case 'queryResultsInit':
+        this.eventListeners.queryResultsInit.push(listener);
+        if (this.data !== undefined) {listener(this.data.query_results);}
+        break;
+      case 'queryResultsPatch':
+        this.eventListeners.queryResultsPatch.push(listener);
+        break;
+      default:
+        console.error(`Unknown event type: ${type}`);
+    }
+  }
+}
+
+
 /*
  * The nopaque object is used as a namespace for nopaque specific functions and
  * variables.
  */
 var nopaque = {};
 
-// User data
-nopaque.user = {};
-nopaque.user.settings = {};
-nopaque.user.settings.darkMode = undefined;
-nopaque.corporaSubscribers = [];
-nopaque.jobsSubscribers = [];
-nopaque.queryResultsSubscribers = [];
+nopaque.flash = function(message, category) {
+  let toast;
+  let toastActionElement;
 
-// Foreign user (user inspected with admin credentials) data
-nopaque.foreignUser = {};
-nopaque.foreignUser.isAuthenticated = undefined;
-nopaque.foreignUser.settings = {};
-nopaque.foreignUser.settings.darkMode = undefined;
-nopaque.foreignCorporaSubscribers = [];
-nopaque.foreignJobsSubscribers = [];
-nopaque.foreignQueryResultsSubscribers = [];
+  switch (category) {
+    case "corpus":
+      message = `<i class="left material-icons">book</i>${message}`;
+      break;
+    case "error":
+      message = `<i class="left material-icons red-text">error</i>${message}`;
+      break;
+    case "job":
+      message = `<i class="left material-icons">work</i>${message}`;
+      break;
+    default:
+      message = `<i class="left material-icons">notifications</i>${message}`;
+  }
 
-// nopaque functions
-nopaque.socket = io({transports: ['websocket']});
-// Add event handlers
-nopaque.socket.on("user_data_stream_init", function(msg) {
-  nopaque.user = JSON.parse(msg);
-  for (let subscriber of nopaque.corporaSubscribers) {
-    subscriber.init(nopaque.user.corpora);
-  }
-  for (let subscriber of nopaque.jobsSubscribers) {
-    subscriber.init(nopaque.user.jobs);
-  }
-  for (let subscriber of nopaque.queryResultsSubscribers) {
-    subscriber.init(nopaque.user.query_results);
-  }
-});
-
-nopaque.socket.on("user_data_stream_update", function(msg) {
-  var patch;
-
-  patch = JSON.parse(msg);
-  nopaque.user = jsonpatch.apply_patch(nopaque.user, patch);
-  corpora_patch = patch.filter(operation => operation.path.startsWith("/corpora"));
-  jobs_patch = patch.filter(operation => operation.path.startsWith("/jobs"));
-  query_results_patch = patch.filter(operation => operation.path.startsWith("/query_results"));
-  for (let subscriber of nopaque.corporaSubscribers) {
-    subscriber.update(corpora_patch);
-  }
-  for (let subscriber of nopaque.jobsSubscribers) {
-    subscriber.update(jobs_patch);
-  }
-  for (let subscriber of nopaque.queryResultsSubscribers) {
-    subscriber.update(query_results_patch);
-  }
-  if (["all", "end"].includes(nopaque.user.settings.job_status_site_notifications)) {
-    for (operation of jobs_patch) {
-      /* "/jobs/{jobId}/..." -> ["{jobId}", ...] */
-      pathArray = operation.path.split("/").slice(2);
-      if (operation.op === "replace" && pathArray[1] === "status") {
-        if (nopaque.user.settings.job_status_site_notifications === "end" && !["complete", "failed"].includes(operation.value)) {continue;}
-        nopaque.flash(`[<a href="/jobs/${pathArray[0]}">${nopaque.user.jobs[pathArray[0]].title}</a>] New status: ${operation.value}`, "job");
-      }
-    }
-  }
-});
-
-nopaque.socket.on("foreign_user_data_stream_init", function(msg) {
-  nopaque.foreignUser = JSON.parse(msg);
-  for (let subscriber of nopaque.foreignCorporaSubscribers) {
-    subscriber.init(nopaque.foreignUser.corpora);
-  }
-  for (let subscriber of nopaque.foreignJobsSubscribers) {
-    subscriber.init(nopaque.foreignUser.jobs);
-  }
-  for (let subscriber of nopaque.foreignQueryResultsSubscribers) {
-    subscriber.init(nopaque.foreignUser.query_results);
-  }
-});
-
-nopaque.socket.on("foreign_user_data_stream_update", function(msg) {
-  var patch;
-
-  patch = JSON.parse(msg);
-  nopaque.foreignUser = jsonpatch.apply_patch(nopaque.foreignUser, patch);
-  corpora_patch = patch.filter(operation => operation.path.startsWith("/corpora"));
-  jobs_patch = patch.filter(operation => operation.path.startsWith("/jobs"));
-  query_results_patch = patch.filter(operation => operation.path.startsWith("/query_results"));
-  for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber.update(corpora_patch);}
-  for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber.update(jobs_patch);}
-  for (let subscriber of nopaque.foreignQueryResultsSubscribers) {subscriber.update(query_results_patch);}
-});
+  toast = M.toast({html: `<span>${message}</span>
+                          <button data-action="close" class="btn-flat toast-action white-text">
+                            <i class="material-icons">close</i>
+                          </button>`});
+  toastActionElement = toast.el.querySelector('.toast-action[data-action="close"]');
+  toastActionElement.addEventListener('click', () => {toast.dismiss();});
+};
 
 nopaque.Forms = {};
 nopaque.Forms.init = function() {
@@ -163,30 +205,3 @@ nopaque.Forms.init = function() {
     }
   }
 }
-
-
-nopaque.flash = function(message, category) {
-  let toast;
-  let toastActionElement;
-
-  switch (category) {
-    case "corpus":
-      message = `<i class="left material-icons">book</i>${message}`;
-      break;
-    case "error":
-      message = `<i class="left material-icons red-text">error</i>${message}`;
-      break;
-    case "job":
-      message = `<i class="left material-icons">work</i>${message}`;
-      break;
-    default:
-      message = `<i class="left material-icons">notifications</i>${message}`;
-  }
-
-  toast = M.toast({html: `<span>${message}</span>
-                          <button data-action="close" class="btn-flat toast-action white-text">
-                            <i class="material-icons">close</i>
-                          </button>`});
-  toastActionElement = toast.el.querySelector('.toast-action[data-action="close"]');
-  toastActionElement.addEventListener('click', () => {toast.dismiss();});
-}

web/app/static/js/nopaque.lists.js

@@ -1,6 +1,33 @@
 class RessourceList {
-  constructor(idOrElement, options = {}) {
-    this.list = new List(idOrElement, {...RessourceList.options, ...options});
+  /* A wrapper class for the list.js list.
+   * This class is not meant to be used directly, instead it should be used as
+   * a template for concrete ressource list implementations.
+   */
+  constructor(listElement, options = {}) {
+    if (listElement.dataset.userId) {
+      if (listElement.dataset.userId in nopaque.appClient.users) {
+        this.user = nopaque.appClient.users[listElement.dataset.userId];
+      } else {
+        console.error(`User not found: ${listElement.dataset.userId}`);
+        return;
+      }
+    } else {
+      this.user = nopaque.appClient.users.self;
+    }
+    this.list = new List(listElement, {...RessourceList.options, ...options});
+    this.valueNames = ['id'];
+    for (let element of this.list.valueNames) {
+      switch (typeof element) {
+        case 'object':
+          if (element.hasOwnProperty('name')) {this.valueNames.push(element.name);}
+          break;
+        case 'string':
+          this.valueNames.push(element);
+          break;
+        default:
+          console.error(`Unknown value name definition: ${element}`);
+      }
+    }
   }
 
   init(ressources) {
@@ -9,38 +36,27 @@ class RessourceList {
     this.list.sort('id', {order: 'desc'});
   }
 
-
-  update(patch) {
-    let item, pathArray;
-
-    for (let operation of patch) {
+  patch(patch) {
     /*
-       * '/{ressourceName}/{ressourceId}/{valueName}' -> ['{ressourceId}', {valueName}]
-       * Example: '/jobs/1/status' -> ['1', 'status']
+     * It's not possible to generalize a patch Handler for all type of
+     * ressources. So this method is meant to be an interface.
      */
-      let [id, valueName] = operation.path.split("/").slice(2);
-      switch(operation.op) {
-        case 'add':
-          this.add(operation.value);
-          break;
-        case 'remove':
-          this.remove(id);
-          break;
-        case 'replace':
-          this.replace(id, valueName, operation.value);
-          break;
-        default:
-          break;
-      }
-    }
+    console.error('patch method not implemented!');
   }
 
   add(values) {
-    /* WORKAROUND: Set a callback function ('() => {return;}') to force List.js
-                   perform the add method asynchronous.
-     * https://listjs.com/api/#add
-     */
-    this.list.add(values, () => {return;});
+    let ressources = Array.isArray(values) ? values : [values];
+    // Discard ressource values, that are not defined to be used in the list.
+    ressources = ressources.map(ressource => {
+      let cleanedRessource = {};
+      for (let [valueName, value] of Object.entries(ressource)) {
+        if (this.valueNames.includes(valueName)) {cleanedRessource[valueName] = value;}
+      }
+      return cleanedRessource;
+    });
+    // Set a callback function ('() => {return;}') to force List.js perform the
+    // add method asynchronous: https://listjs.com/api/#add
+    this.list.add(ressources, () => {return;});
   }
 
   remove(id) {
@@ -48,35 +64,84 @@ class RessourceList {
   }
 
   replace(id, valueName, newValue) {
-    if (!this.list.valuesNames.includes(valueName)) {return;}
-    let item = this.list.get('id', id);
+    if (this.valueNames.includes(valueName)) {
+      let item = this.list.get('id', id)[0];
       item.values({[valueName]: newValue});
     }
+  }
 }
-
-
 RessourceList.options = {page: 5, pagination: [{innerWindow: 4, outerWindow: 1}]};
 
 
 class CorpusList extends RessourceList {
-  constructor(listElementId, options = {}) {
-    let listElement = document.querySelector(`#${listElementId}`);
+  constructor(listElement, options = {}) {
     super(listElement, {...CorpusList.options, ...options});
-    listElement.addEventListener('click', (event) => {
-      let actionButtonElement = event.target.closest('.action-button');
-      if (actionButtonElement === null) {return;}
+    this.user.addEventListener('corporaInit', corpora => this.init(corpora));
+    this.user.addEventListener('corporaPatch', patch => this.patch(patch));
+    listElement.addEventListener('click', (event) => {this.onclick(event)});
+  }
+
+  onclick(event) {
     let corpusId = event.target.closest('tr').dataset.id;
-      let action = actionButtonElement.dataset.action;
+    let actionButtonElement = event.target.closest('.action-button');
+    let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
     switch (action) {
       case 'analyse':
         window.location.href = nopaque.user.corpora[corpusId].analysis_url;
+      case 'delete':
+        let deleteModalHTML = `<div class="modal">
+                                 <div class="modal-content">
+                                   <h4>Confirm corpus deletion</h4>
+                                   <p>Do you really want to delete the corpus <b>${nopaque.user.corpora[corpusId].title}</b>? All files will be permanently deleted!</p>
+                                 </div>
+                                 <div class="modal-footer">
+                                   <a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
+                                   <a class="btn modal-close red waves-effect waves-light" href="${nopaque.user.corpora[corpusId].url}/delete"><i class="material-icons left">delete</i>Delete</a>
+                                 </div>
+                               </div>`;
+        let deleteModalParentElement = document.querySelector('main');
+        deleteModalParentElement.insertAdjacentHTML('beforeend', deleteModalHTML);
+        let deleteModalElement = deleteModalParentElement.lastChild;
+        let deleteModal = M.Modal.init(deleteModalElement, {onCloseEnd: () => {deleteModal.destroy(); deleteModalElement.remove();}});
+        deleteModal.open();
+        break;
+      case 'view':
+        // TODO: handle unprepared corpora
+        window.location.href = nopaque.user.corpora[corpusId].url;
+        break;
+      default:
+        console.error(`Unknown action: ${action}`);
+        break;
+    }
+  }
+
+  patch(patch) {
+    for (let operation of patch) {
+      switch(operation.op) {
+        case 'add':
+          // Matches the only paths that should be handled here: /corpora/{corpusId}
+          if (/^\/corpora\/(\d+)$/.test(operation.path)) {this.add(operation.value);}
+          break;
+        case 'remove':
+          // See case 'add' ;)
+          if (/^\/corpora\/(\d+)$/.test(operation.path)) {
+            let [match, id] = operation.path.match(/^\/corpora\/(\d+)$/);
+            this.remove(corpusId);
+          }
+          break;
+        case 'replace':
+          // Matches the only paths that should be handled here: /corpora/{corpusId}/{status || description || title}
+          if (/^\/corpora\/(\d+)\/(status|description|title)$/.test(operation.path)) {
+            let [match, id, valueName] = operation.path.match(/^\/corpora\/(\d+)\/(status|description|title)$/);
+            this.replace(id, valueName, operation.value);
+          }
+          break;
+        default:
+          break;
+      }
     }
-    });
-    nopaque.corporaSubscribers.push(this);
   }
 }
-
-
 CorpusList.options = {
   item: `<tr>
            <td><a class="btn-floating disabled"><i class="material-icons">book</i></a></td>
@@ -84,23 +149,80 @@ CorpusList.options = {
            <td><span class="badge new status" data-badge-caption=""></span></td>
            <td class="right-align">
              <a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
-             <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="edit" data-position="top" data-tooltip="Edit"><i class="material-icons">edit</i></a>
              <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="analyse" data-position="top" data-tooltip="Analyse"><i class="material-icons">search</i></a>
+             <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
            </td>
          </tr>`,
-  valueNames: [{data: ['id']}, {name: "status", attr: "data-status"}, 'description', 'title']
+  valueNames: [{data: ['id']}, {name: 'status', attr: 'data-status'}, 'description', 'title']
 };
 
 
 class JobList extends RessourceList {
-  constructor(listElementId, options = {}) {
-    let listElement = document.querySelector(`#${listElementId}`);
+  constructor(listElement, options = {}) {
     super(listElement, {...JobList.options, ...options});
-    nopaque.jobsSubscribers.push(this);
+    this.user.addEventListener('jobsInit', jobs => this.init(jobs));
+    this.user.addEventListener('jobsPatch', patch => this.patch(patch));
+    listElement.addEventListener('click', (event) => {this.onclick(event)});
+  }
+
+  onclick(event) {
+    let jobId = event.target.closest('tr').dataset.id;
+    let actionButtonElement = event.target.closest('.action-button');
+    let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
+    switch (action) {
+      case 'delete':
+        let deleteModalHTML = `<div class="modal">
+                                 <div class="modal-content">
+                                   <h4>Confirm job deletion</h4>
+                                   <p>Do you really want to delete the job <b>${this.user.data.jobs[jobId].title}</b>? All files will be permanently deleted!</p>
+                                 </div>
+                                 <div class="modal-footer">
+                                   <a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
+                                   <a class="btn modal-close red waves-effect waves-light" href="${this.user.data.jobs[jobId].url}/delete"><i class="material-icons left">delete</i>Delete</a>
+                                 </div>
+                               </div>`;
+        let deleteModalParentElement = document.querySelector('main');
+        deleteModalParentElement.insertAdjacentHTML('beforeend', deleteModalHTML);
+        let deleteModalElement = deleteModalParentElement.lastChild;
+        let deleteModal = M.Modal.init(deleteModalElement, {onCloseEnd: () => {deleteModal.destroy(); deleteModalElement.remove();}});
+        deleteModal.open();
+        break;
+      case 'view':
+        window.location.href = this.user.data.jobs[jobId].url;
+        break;
+      default:
+        console.error(`Unknown action: "${action}"`);
+        break;
+    }
+  }
+
+  patch(patch) {
+    for (let operation of patch) {
+      switch(operation.op) {
+        case 'add':
+          // Matches the only paths that should be handled here: /jobs/{jobId}
+          if (/^\/jobs\/(\d+)$/.test(operation.path)) {this.add(operation.value);}
+          break;
+        case 'remove':
+          // See case add ;)
+          if (/^\/jobs\/(\d+)$/.test(operation.path)) {
+            let [match, id] = operation.path.match(/^\/jobs\/(\d+)$/);
+            this.remove(jobId);
+          }
+          break;
+        case 'replace':
+          // Matches the only paths that should be handled here: /jobs/{jobId}/{service || status || description || title}
+          if (/^\/jobs\/(\d+)\/(service|status|description|title)$/.test(operation.path)) {
+            let [match, id, valueName] = operation.path.match(/^\/jobs\/(\d+)\/(service|status|description|title)$/);
+            this.replace(id, valueName, operation.value);
+          }
+          break;
+        default:
+          break;
+      }
+    }
   }
 }
-
-
 JobList.options = {
   item: `<tr>
            <td><a class="btn-floating disabled"><i class="material-icons service"></i></a></td>
@@ -111,19 +233,17 @@ JobList.options = {
              <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
            </td>
          </tr>`,
-  valueNames: [{data: ['id']}, {name: 'service', attr: 'data-service'}, {name: "status", attr: "data-status"}, 'description', 'title']
+  valueNames: [{data: ['id']}, {name: 'service', attr: 'data-service'}, {name: 'status', attr: 'data-status'}, 'description', 'title']
 };
 
 
 class QueryResultList extends RessourceList {
-  constructor(listElementId, options = {}) {
-    let listElement = document.querySelector(`#${listElementId}`);
+  constructor(listElement, options = {}) {
     super(listElement, {...QueryResultList.options, ...options});
-    nopaque.queryResultsSubscribers.push(this);
+    this.user.addEventListener('queryResultsInit', queryResults => this.init(queryResults));
+    this.user.addEventListener('queryResultsPatch', patch => this.init(patch));
   }
 }
-
-
 QueryResultList.options = {
   item: `<tr>
            <td><b class="title"></b><br><i class="description"></i><br></td>
@@ -136,5 +256,3 @@ QueryResultList.options = {
          </tr>`,
   valueNames: [{data: ['id']}, 'corpus_title', 'description', 'query', 'title']
 };
-
-export { CorpusList, JobList, QueryResultList };

web/app/templates/admin/user.html.j2

@@ -36,16 +36,16 @@
       </div>
     </div>
 
-<div class="col s12 l6">
+<div class="col s12 l6" id="corpora" data-user-id="{{ user.id }}">
   <h3>Corpora</h3>
   <div class="card">
-    <div class="card-content" id="corpora">
+    <div class="card-content">
       <div class="input-field">
         <i class="material-icons prefix">search</i>
         <input id="search-corpus" class="search" type="search"></input>
         <label for="search-corpus">Search corpus</label>
       </div>
-      <table class="highlight">
+      <table class="highlight ressource-list">
         <thead>
           <tr>
             <th></th>
@@ -64,16 +64,16 @@
   </div>
 </div>
 
-<div class="col s12 l6">
+<div class="col s12 l6" id="jobs" data-user-id="{{ user.id }}">
   <h3>Jobs</h3>
   <div class="card">
-    <div class="card-content" id="jobs">
+    <div class="card-content">
       <div class="input-field">
         <i class="material-icons prefix">search</i>
         <input id="search-job" class="search" type="search"></input>
         <label for="search-job">Search job</label>
       </div>
-      <table class="highlight">
+      <table class="highlight ressource-list">
         <thead>
           <tr>
             <th><span class="sort" data-sort="service">Service</span></th>
@@ -109,10 +109,9 @@
 
 {% block scripts %}
 {{ super() }}
-<script type="module">
-  import {RessourceList} from '{{ url_for('static', filename='js/nopaque.lists.js') }}';
-  let corpusList = new RessourceList("corpora", nopaque.foreignCorporaSubscribers, "Corpus");
-  let jobList = new RessourceList("jobs", nopaque.foreignJobsSubscribers, "Job");
-  nopaque.socket.emit("foreign_user_data_stream_init", {{ user.id }});
+<script>
+  nopaque.appClient.loadUser({{ user.id }});
+  let corpusList = new CorpusList(document.querySelector('#corpora'));
+  let jobList = new JobList(document.querySelector('#jobs'));
 </script>
 {% endblock scripts %}

web/app/templates/main/dashboard.html.j2

@@ -29,7 +29,7 @@
                 <input id="search-corpus" class="search" type="search"></input>
                 <label for="search-corpus">Search corpus</label>
               </div>
-              <table class="highlight">
+              <table class="highlight ressource-list">
                 <thead>
                   <tr>
                     <th></th>
@@ -102,7 +102,7 @@
             <input id="search-job" class="search" type="search"></input>
             <label for="search-job">Search job</label>
           </div>
-          <table class="highlight">
+          <table class="highlight ressource-list">
             <thead>
               <tr>
                 <th><span class="sort" data-sort="service">Service</span></th>
@@ -175,10 +175,9 @@
 
 {% block scripts %}
 {{ super() }}
-<script type="module">
-  import {CorpusList, JobList, QueryResultList} from '../../static/js/nopaque.lists.js';
-  let corpusList = new CorpusList("corpora");
-  let jobList = new JobList("jobs");
-  let queryResultList = new QueryResultList("query-results");
+<script>
+  let corpusList = new CorpusList(document.querySelector('#corpora'));
+  let jobList = new JobList(document.querySelector('#jobs'));
+  let queryResultList = new QueryResultList(document.querySelector('#query-results'));
 </script>
 {% endblock scripts %}

web/app/templates/nopaque.html.j2

@@ -244,28 +244,29 @@
 
 {% block scripts %}
 {{ super() }}
+{% if current_user.setting_dark_mode %}
 <script src="{{ url_for('static', filename='js/darkreader.js') }}"></script>
+<script>
+  DarkReader.enable({brightness: 150, contrast: 100, sepia: 0});
+</script>
+{% endif %}
 <script src="{{ url_for('static', filename='js/jsonpatch.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/list.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/socket.io.slim.js') }}"></script>
 <script src="{{ url_for('static', filename='js/nopaque.js') }}"></script>
+<script src="{{ url_for('static', filename='js/nopaque.lists.js') }}"></script>
 <script>
-  {% if current_user.setting_dark_mode %}
-  DarkReader.enable({brightness: 150, contrast: 100, sepia: 0});
-  {% endif %}
   // Disable all option elements with no value
-  for (let optionElement of document.querySelectorAll('option[value=""]')) {
-    optionElement.disabled = true;
-  }
+  for (let optionElement of document.querySelectorAll('option[value=""]')) {optionElement.disabled = true;}
   M.AutoInit();
   M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="email"], input[data-length][type="password"], input[data-length][type="text"], textarea[data-length]'));
   M.Dropdown.init(document.querySelectorAll('#nav-more-dropdown-trigger'), {alignment: 'right', constrainWidth: false, coverTrigger: false});
   nopaque.Forms.init();
+  for (let flashedMessage of {{ get_flashed_messages(with_categories=True)|tojson }}) {nopaque.flash(flashedMessage[1], flashedMessage[0]);}
+</script>
+<script>
   {% if current_user.is_authenticated %}
-  nopaque.socket.emit('user_data_stream_init');
+  nopaque.appClient = new AppClient({{ current_user.id }});
   {% endif %}
-  for (let flashedMessage of {{ get_flashed_messages(with_categories=True)|tojson }}) {
-    nopaque.flash(flashedMessage[1], flashedMessage[0]);
-  }
 </script>
 {% endblock scripts %}