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

2025-11-03 20:02:47 +00:00 · 2022-09-07 14:53:51 +02:00
parent f46544451e ceef272d06
commit 7fe183bf2a
114 changed files with 3774 additions and 3316 deletions
--- a/app/static/css/helpers.scss
+++ b/app/static/css/helpers.scss
@@ -0,0 +1,31 @@
+/*
+ * Spacing
+ */
+$spacing-shortcuts: ("margin": "mg", "padding": "pd");
+$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l");
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto);
+
+@each $spacing-shortcut-name, $spacing-shortcut-value in $spacing-shortcuts {
+  @each $spacing-name, $spacing-value in $spacing-values {
+    // All directions
+    .#{$spacing-shortcut-value}-#{$spacing-name} {
+      #{$spacing-shortcut-name}: $spacing-value !important;
+    }
+    // Horizontal axis
+    .#{$spacing-shortcut-value}x-#{$spacing-name} {
+      #{$spacing-shortcut-name}-left: $spacing-value !important;
+      #{$spacing-shortcut-name}-right: $spacing-value !important;
+    }
+    // Vertical axis
+    .#{$spacing-shortcut-value}y-#{$spacing-name} {
+      #{$spacing-shortcut-name}-top: $spacing-value !important;
+      #{$spacing-shortcut-name}-bottom: $spacing-value !important;
+    }
+    // Cardinal directions
+    @each $spacing-direction-name, $spacing-direction-value in $spacing-directions {
+      .#{$spacing-shortcut-value}#{$spacing-direction-value}-#{$spacing-name} {
+        #{$spacing-shortcut-name}-#{$spacing-direction-name}: $spacing-value !important;
+      }
+    }
+  }
+}
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -49,5 +49,14 @@ h1 .nopaque-icons, h2 .nopaque-icons, h3 .nopaque-icons, h4 .nopaque-icons, .tab
 .nopaque-icons.service-icon[data-service="spacy-nlp-pipeline"]:empty:before {content: "G";}
 .nopaque-icons.service-icon[data-service="corpus-analysis"]:empty:before {content: "H";}

-.hoverable {cursor: pointer;}
+.clickable {
+  cursor: pointer !important;
+  pointer-events: all !important;
+}
 .chip.s-attr .chip.p-attr {background-color: inherit;}
+
+
+.width-25 {width: 25%;}
+.width-50 {width: 50%;}
+.width-75 {width: 75%;}
+.width-100 {width: 100%;}
--- a/app/static/js/App.js
+++ b/app/static/js/App.js
@@ -1,78 +1,111 @@
 class App {
  constructor() {
-    this.data = {users: {}};
-    this.eventListeners = {'users.patch': []};
-    this.promises = {users: {}};
+    this.data = {
+      promises: {getUser: {}, subscribeUser: {}},
+      users: {},
+    };
    this.socket = io({transports: ['websocket'], upgrade: false});
-    this.socket.on('users.patch', patch => this.usersPatchHandler(patch));
+    this.socket.on('PATCH', (patch) => {this.onPatch(patch);});
  }

-  get users() {
-    return this.data.users;
-  }
-
-  addEventListener(type, listener) {
-    if (!(type in this.eventListeners)) {
-      throw `Unknown event type: ${type}`;
+  getUser(userId) {
+    if (userId in this.data.promises.getUser) {
+      return this.data.promises.getUser[userId];
    }
-    this.eventListeners[type].push(listener);
+
+    this.data.promises.getUser[userId] = new Promise((resolve, reject) => {
+      fetch(`/users/${userId}?backrefs=true&relationships=true`, {headers: {Accept: 'application/json'}})
+        .then(
+          (response) => {return response.json();},
+          (response) => {
+            if (response.status === 403) {this.flash('Forbidden', 'error');}
+            if (response.status === 404) {this.flash('Not Found', 'error');}
+            reject(response);
+          }
+        )
+        .then(
+          (user) => {
+            this.data.users[userId] = user;
+            resolve(this.data.users[userId]);
+          },
+          (error) => {
+            console.error(error, 'error');
+            reject(error);
+          }
+        );
+    });
+
+    return this.data.promises.getUser[userId];
  }

-  flash(message, category) {
-    let iconPrefix;
-    let toast;
-    let toastCloseActionElement;
-
-    switch (category) {
-      case 'corpus':
-        iconPrefix = '<i class="left material-icons">book</i>';
-        break;
-      case 'error':
-        iconPrefix = '<i class="error-color-text left material-icons">error</i>';
-        break;
-      case 'job':
-        iconPrefix = '<i class="left nopaque-icons">J</i>';
-        break;
-      default:
-        iconPrefix = '<i class="left material-icons">notifications</i>';
-        break;
+  subscribeUser(userId) {
+    if (userId in this.data.promises.subscribeUser) {
+      return this.data.promises.subscribeUser[userId];
    }
-    toast = M.toast(
-      {
-        html: `
-          <span>${iconPrefix}${message}</span>
-          <button class="btn-flat toast-action white-text" data-action="close">
-            <i class="material-icons">close</i>
-          </button>
-        `.trim()
-      }
-    );
-    toastCloseActionElement = toast.el.querySelector('.toast-action[data-action="close"]');
-    toastCloseActionElement.addEventListener('click', () => {toast.dismiss();});
-  }

-  getUserById(userId) {
-    if (userId in this.promises.users) {
-      return this.promises.users[userId];
-    }
-    this.promises.users[userId] = new Promise((resolve, reject) => {
-      this.socket.emit('users.user.get', userId, response => {
+    this.data.promises.subscribeUser[userId] = new Promise((resolve, reject) => {
+      this.socket.emit('SUBSCRIBE /users/<user_id>', userId, (response) => {
        if (response.code === 200) {
-          this.data.users[userId] = response.payload;
-          resolve(this.data.users[userId]);
+          resolve(response);
        } else {
          reject(response);
        }
      });
    });
-    return this.promises.users[userId];
+
+    return this.data.promises.subscribeUser[userId];
  }

-  usersPatchHandler(patch) {
-    let listener;
+  flash(message, category) {
+    let iconPrefix = '';
+    switch (category) {
+      case 'corpus': {
+        iconPrefix = '<i class="left material-icons">book</i>';
+        break;
+      }
+      case 'error': {
+        iconPrefix = '<i class="error-color-text left material-icons">error</i>';
+        break;
+      }
+      case 'job': {
+        iconPrefix = '<i class="left nopaque-icons">J</i>';
+        break;
+      }
+      default: {
+        iconPrefix = '<i class="left material-icons">notifications</i>';
+        break;
+      }
+    }
+    let toast = M.toast(
+      {
+        html: `
+          <span>${iconPrefix}${message}</span>
+          <button class="action-button btn-flat toast-action white-text" data-action="close">
+            <i class="material-icons">close</i>
+          </button>
+        `.trim()
+      }
+    );
+    let toastCloseActionElement = toast.el.querySelector('.action-button[data-action="close"]');
+    toastCloseActionElement.addEventListener('click', () => {toast.dismiss();});
+  }
+  
+  onPatch(patch) {
+    // Filter Patch to only include operations on users that are initialized
+    let regExp = new RegExp(`^/users/(${Object.keys(this.data.users).join('|')})`);
+    let filteredPatch = patch.filter(operation => regExp.test(operation.path));

-    this.data = jsonpatch.applyPatch(this.data, patch).newDocument;
-    //this.data = jsonpatch.apply_patch(this.data, patch);
-    for (listener of this.eventListeners['users.patch']) {listener(patch);}
+    // Handle job status updates
+    let subRegExp = new RegExp(`^/users/([A-Za-z0-9]*)/jobs/([A-Za-z0-9]*)/status$`);
+    let subFilteredPatch = filteredPatch
+      .filter((operation) => {return operation.op === 'replace';})
+      .filter((operation) => {return subRegExp.test(operation.path);});
+    for (let operation of subFilteredPatch) {
+      let [match, userId, jobId] = operation.path.match(subRegExp);
+      this.flash(`[<a href="/jobs/${jobId}">${this.data.users[userId].jobs[jobId].title}</a>] New status: <span class="job-status-text" data-job-status="${operation.value}"></span>`, 'job');
+    }
+
+    // Apply Patch
+    jsonpatch.applyPatch(this.data, filteredPatch);
  }
 }
--- a/app/static/js/Forms/CreateCorpusFileForm.js
+++ b/app/static/js/Forms/CreateCorpusFileForm.js
@@ -0,0 +1,18 @@
+class CreateCorpusFileForm extends Form {
+  static autoInit() {
+    let createCorpusFileFormElements = document.querySelectorAll('.create-corpus-file-form');
+    for (let createCorpusFileFormElement of createCorpusFileFormElements) {
+      new CreateCorpusFileForm(createCorpusFileFormElement);
+    }
+  }
+
+  constructor(formElement) {
+    super(formElement);
+
+    this.addEventListener('requestLoad', (event) => {
+      if (event.target.status === 201) {
+        window.location.href = event.target.getResponseHeader('Location');
+      }
+    });
+  }
+}
--- a/app/static/js/Forms/CreateJobForm.js
+++ b/app/static/js/Forms/CreateJobForm.js
@@ -0,0 +1,25 @@
+class CreateJobForm extends Form {
+  static autoInit() {
+    let createJobFormElements = document.querySelectorAll('.create-job-form');
+    for (let createJobFormElement of createJobFormElements) {
+      new CreateJobForm(createJobFormElement);
+    }
+  }
+
+  constructor(formElement) {
+    super(formElement);
+
+    let versionField = this.formElement.querySelector('#create-job-form-version');
+    versionField.addEventListener('change', (event) => {
+      let url = new URL(window.location.href);
+      url.search = `?version=${event.target.value}`;
+      window.location.href = url.toString();
+    });
+
+    this.addEventListener('requestLoad', (event) => {
+      if (event.target.status === 201) {
+        window.location.href = event.target.getResponseHeader('Location');
+      }
+    });
+  }
+}
--- a/app/static/js/Forms/Form.js
+++ b/app/static/js/Forms/Form.js
@@ -0,0 +1,141 @@
+class Form {
+  static autoInit() {
+    CreateCorpusFileForm.autoInit();
+    CreateJobForm.autoInit();
+  }
+
+  constructor(formElement) {
+    this.formElement = formElement;
+    this.eventListeners = {
+      'requestLoad': []
+    };
+    this.afterRequestListeners = [];
+
+    for (let selectElement of this.formElement.querySelectorAll('select')) {
+      selectElement.removeAttribute('required');
+    }
+
+    this.formElement.addEventListener('submit', (event) => {
+      event.preventDefault();
+      this.submit(event);
+    });
+  }
+
+  addEventListener(eventType, listener) {
+    if (eventType in this.eventListeners) {
+      this.eventListeners[eventType].push(listener);
+    } else {
+      throw `Unknown event type ${eventType}`;
+    }
+  }
+
+  submit(event) {
+    let request = new XMLHttpRequest();
+    let modalElement = Utils.elementFromString(
+      `
+        <div class="modal">
+          <div class="modal-content">
+            <h4><i class="material-icons left">file_upload</i>Submitting...</h4>
+            <div class="progress">
+              <div class="determinate" style="width: 0%"></div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <a class="action-button btn red waves-effect waves-light modal-close" data-action="cancel">Cancel</a>
+          </div>
+        </div>
+      `
+    );
+    document.querySelector('#modals').appendChild(modalElement);
+    let modal = M.Modal.init(
+      modalElement,
+      {
+        dismissible: false,
+        onCloseEnd: () => {
+          modal.destroy();
+          modalElement.remove();
+        }
+      }
+    );
+    modal.open();
+
+    // Remove all previous helper text elements that indicate errors
+    let errorHelperTextElements = this.formElement
+      .querySelectorAll('.helper-text[data-helper-text-type="error"]');
+    for (let errorHelperTextElement of errorHelperTextElements) {
+      errorHelperTextElement.remove();
+    }
+
+    // Check if select elements are filled out properly
+    for (let selectElement of this.formElement.querySelectorAll('select')) {
+      if (selectElement.value === '') {
+        let inputFieldElement = selectElement.closest('.input-field');
+        let errorHelperTextElement = Utils.elementFromString(
+          '<span class="helper-text error-color-text" data-helper-text-type="error">Please select an option.</span>'
+        );
+        inputFieldElement.appendChild(errorHelperTextElement);
+        inputFieldElement.querySelector('.select-dropdown').classList.add('invalid');
+        modal.close();
+        return;
+      }
+    }
+
+    // Setup abort handling
+    let cancelElement = modalElement.querySelector('.action-button[data-action="cancel"]');
+    cancelElement.addEventListener('click', (event) => {request.abort();});
+
+    // Setup load handling (after the request completed)
+    request.addEventListener('load', (event) => {
+      for (let listener of this.eventListeners['requestLoad']) {
+        listener(event);
+      }
+      if (request.status === 400) {
+        let responseJson = JSON.parse(request.responseText);
+        console.log(responseJson);
+        for (let [inputName, inputErrors] of Object.entries(responseJson.errors)) {
+          let inputFieldElement = this.formElement
+            .querySelector(`input[name$="${inputName}"], select[name$="${inputName}"]`)
+            .closest('.input-field');
+          for (let inputError of inputErrors) {
+            let errorHelperTextElement = Utils.elementFromString(
+              `<span class="helper-text error-color-text" data-helper-type="error">${inputError}</span>`
+            );
+            inputFieldElement.appendChild(errorHelperTextElement);
+          }
+        }
+      }
+      if (request.status === 500) {
+        app.flash('Internal Server Error', 'error');
+      }
+      modal.close();
+    });
+
+    // Setup progress handling
+    let progressBarElement = modalElement.querySelector('.progress > .determinate');
+    request.upload.addEventListener('progress', (event) => {
+      let progress = Math.floor(100 * event.loaded / event.total);
+      progressBarElement.style.width = `${progress}%`;
+    });
+
+    request.open(this.formElement.method, this.formElement.action);
+    request.setRequestHeader('Accept', 'application/json');
+    let formData = new FormData(this.formElement);
+    switch (this.formElement.enctype) {
+      case 'application/x-www-form-urlencoded':
+        let urlSearchParams = new URLSearchParams(formData);
+        request.send(urlSearchParams);
+        break;
+      case 'multipart/form-data': {
+        request.send(formData);
+        break;
+      }
+      case 'text/plain': {
+        throw 'enctype "text/plain" is not supported';
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+}
--- a/app/static/js/JobStatusNotifier.js
+++ b/app/static/js/JobStatusNotifier.js
@@ -1,22 +0,0 @@
-class JobStatusNotifier {
-  constructor(userId) {
-    this.userId = userId;
-  }
-
-  usersPatchHandler(patch) {
-    let filteredPatch;
-    let jobId;
-    let match;
-    let operation;
-    let re;
-
-    re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)/status$`)
-    filteredPatch = patch
-      .filter(operation => operation.op === 'replace')
-      .filter(operation => re.test(operation.path));
-    for (operation of filteredPatch) {
-      [match, jobId] = operation.path.match(re);
-      app.flash(`[<a href="/jobs/${jobId}">${app.users[this.userId].jobs[jobId].title}</a>] New status: <span class="job-status-text" data-job-status="${operation.value}"></span>`, 'job');
-    }
-  }
-}
--- a/app/static/js/RessourceDisplays/CorpusDisplay.js
+++ b/app/static/js/RessourceDisplays/CorpusDisplay.js
@@ -2,12 +2,20 @@ class CorpusDisplay extends RessourceDisplay {
  constructor(displayElement) {
    super(displayElement);
    this.corpusId = displayElement.dataset.corpusId;
+    this.displayElement
+      .querySelector('.action-button[data-action="build-request"]')
+      .addEventListener('click', (event) => {
+        Utils.buildCorpusRequest(this.userId, this.corpusId);
+      });
+    this.displayElement
+      .querySelector('.action-button[data-action="delete-request"]')
+      .addEventListener('click', (event) => {
+        Utils.deleteCorpusRequest(this.userId, this.corpusId);
+      });
  }

  init(user) {
-    let corpus;
-
-    corpus = user.corpora[this.corpusId];
+    let corpus = user.corpora[this.corpusId];
    this.setCreationDate(corpus.creation_date);
    this.setDescription(corpus.description);
    this.setLastEditedDate(corpus.last_edited_date);
@@ -16,17 +24,20 @@ class CorpusDisplay extends RessourceDisplay {
    this.setNumTokens(corpus.num_tokens);
  }

-  usersPatchHandler(patch) {
-    let filteredPatch;
-    let operation;
-    let re;
-
-    re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}`);
-    filteredPatch = patch.filter(operation => re.test(operation.path));
-    for (operation of filteredPatch) {
+  onPatch(patch) {
+    let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}`);
+    let filteredPatch = patch.filter(operation => re.test(operation.path));
+    for (let operation of filteredPatch) {
      switch(operation.op) {
-        case 'replace':
-          re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/last_edited_date$`);
+        case 'remove': {
+          let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}$`);
+          if (re.test(operation.path)) {
+            window.location.href = '/dashboard#corpora';
+          }
+          break;
+        }
+        case 'replace': {
+          let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/last_edited_date$`);
          if (re.test(operation.path)) {
            this.setLastEditedDate(operation.value);
            break;
@@ -42,8 +53,10 @@ class CorpusDisplay extends RessourceDisplay {
            break;
          }
          break;
-        default:
+        }
+        default: {
          break;
+        }
      }
    }
  }
@@ -55,7 +68,7 @@ class CorpusDisplay extends RessourceDisplay {
  setNumTokens(numTokens) {
    this.setElements(
      this.displayElement.querySelectorAll('.corpus-token-ratio'),
-      `${numTokens}/${app.users[this.userId].corpora[this.corpusId].max_num_tokens}`
+      `${numTokens}/${app.data.users[this.userId].corpora[this.corpusId].max_num_tokens}`
    );
  }

@@ -64,31 +77,28 @@ class CorpusDisplay extends RessourceDisplay {
  }

  setStatus(status) {
-    let element;
-    let elements;
-
-    elements = this.displayElement.querySelectorAll('.corpus-analyse-trigger')
-    for (element of elements) {
+    let elements = this.displayElement.querySelectorAll('.corpus-analyse-trigger')
+    for (let element of elements) {
      if (['BUILT', 'STARTING_ANALYSIS_SESSION', 'RUNNING_ANALYSIS_SESSION', 'CANCELING_ANALYSIS_SESSION'].includes(status)) {
        element.classList.remove('disabled');
      } else {
        element.classList.add('disabled');
      }
    }
-    elements = this.displayElement.querySelectorAll('.corpus-build-trigger');
-    for (element of elements) {
-      if (['UNPREPARED', 'FAILED'].includes(status) && Object.values(app.users[this.userId].corpora[this.corpusId].files).length > 0) {
+    elements = this.displayElement.querySelectorAll('.action-button[data-action="build-request"]');
+    for (let element of elements) {
+      if (['UNPREPARED', 'FAILED'].includes(status) && Object.values(app.data.users[this.userId].corpora[this.corpusId].files).length > 0) {
        element.classList.remove('disabled');
      } else {
        element.classList.add('disabled');
      }
    }
    elements = this.displayElement.querySelectorAll('.corpus-status');
-    for (element of elements) {
+    for (let element of elements) {
      element.dataset.corpusStatus = status;
    }
    elements = this.displayElement.querySelectorAll('.corpus-status-spinner');
-    for (element of elements) {
+    for (let element of elements) {
      if (['SUBMITTED', 'QUEUED', 'BUILDING', 'STARTING_ANALYSIS_SESSION', 'CANCELING_ANALYSIS_SESSION'].includes(status)) {
        element.classList.remove('hide');
      } else {
--- a/app/static/js/RessourceDisplays/JobDisplay.js
+++ b/app/static/js/RessourceDisplays/JobDisplay.js
@@ -2,12 +2,25 @@ class JobDisplay extends RessourceDisplay {
  constructor(displayElement) {
    super(displayElement);
    this.jobId = this.displayElement.dataset.jobId;
+    this.displayElement
+      .querySelector('.action-button[data-action="delete-request"]')
+      .addEventListener('click', (event) => {
+        Utils.deleteJobRequest(this.userId, this.jobId);
+      });
+    this.displayElement
+      .querySelector('.action-button[data-action="get-log-request"]')
+      .addEventListener('click', (event) => {
+        Utils.getJobLogRequest(this.userId, this.jobId);
+      });
+    this.displayElement
+      .querySelector('.action-button[data-action="restart-request"]')
+      .addEventListener('click', (event) => {
+        Utils.restartJobRequest(this.userId, this.jobId);
+      });
  }

  init(user) {
-    let job;
-
-    job = user.jobs[this.jobId];
+    let job = user.jobs[this.jobId];
    this.setCreationDate(job.creation_date);
    this.setEndDate(job.creation_date);
    this.setDescription(job.description);
@@ -18,17 +31,20 @@ class JobDisplay extends RessourceDisplay {
    this.setTitle(job.title);
  }

-  usersPatchHandler(patch) {
-    let filteredPatch;
-    let operation;
-    let re;
-
-    re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}`);
-    filteredPatch = patch.filter(operation => re.test(operation.path));
-    for (operation of filteredPatch) {
+  onPatch(patch) {
+    let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}`);
+    let filteredPatch = patch.filter(operation => re.test(operation.path));
+    for (let operation of filteredPatch) {
      switch(operation.op) {
-        case 'replace':
-          re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/end_date$`);
+        case 'remove': {
+          let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}$`);
+          if (re.test(operation.path)) {
+            window.location.href = '/dashboard#jobs';
+          }
+          break;
+        }
+        case 'replace': {
+          let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/end_date$`);
          if (re.test(operation.path)) {
            this.setEndDate(operation.value);
            break;
@@ -39,8 +55,10 @@ class JobDisplay extends RessourceDisplay {
            break;
          }
          break;
-        default:
+        }
+        default: {
          break;
+        }
      }
    }
  }
@@ -54,29 +72,42 @@ class JobDisplay extends RessourceDisplay {
  }

  setStatus(status) {
-    let element;
-    let elements;
-
-    elements = this.displayElement.querySelectorAll('.job-status');
-    for (element of elements) {
+    let elements = this.displayElement.querySelectorAll('.job-status');
+    for (let element of elements) {
      element.dataset.jobStatus = status;
    }
    elements = this.displayElement.querySelectorAll('.job-status-spinner');
-    for (element of elements) {
+    for (let element of elements) {
      if (['COMPLETED', 'FAILED'].includes(status)) {
        element.classList.add('hide');
      } else {
        element.classList.remove('hide');
      }
    }
-    elements = this.displayElement.querySelectorAll('.job-restart-trigger');
-    for (element of elements) {
+    elements = this.displayElement.querySelectorAll('.job-log-trigger');
+    for (let element of elements) {
      if (['COMPLETED', 'FAILED'].includes(status)) {
        element.classList.remove('hide');
      } else {
        element.classList.add('hide');
      }
    }
+    elements = this.displayElement.querySelectorAll('.action-button[data-action="get-log-request"]');
+    for (let element of elements) {
+      if (['COMPLETED', 'FAILED'].includes(status)) {
+        element.classList.remove('disabled');
+      } else {
+        element.classList.add('disabled');
+      }
+    }
+    elements = this.displayElement.querySelectorAll('.action-button[data-action="restart-request"]');
+    for (let element of elements) {
+      if (status === 'FAILED') {
+        element.classList.remove('disabled');
+      } else {
+        element.classList.add('disabled');
+      }
+    }
  }

  setCreationDate(creationDate) {
--- a/app/static/js/RessourceDisplays/RessourceDisplay.js
+++ b/app/static/js/RessourceDisplays/RessourceDisplay.js
@@ -2,30 +2,42 @@ class RessourceDisplay {
  constructor(displayElement) {
    this.displayElement = displayElement;
    this.userId = this.displayElement.dataset.userId;
-    app.addEventListener('users.patch', patch => this.usersPatchHandler(patch));
-    app.getUserById(this.userId).then(user => this.init(user));
+    this.isInitialized = false;
+    if (this.userId) {
+      app.subscribeUser(this.userId)
+        .then((response) => {
+          app.socket.on('PATCH', (patch) => {
+            if (this.isInitialized) {this.onPatch(patch);}
+          });
+        });
+      app.getUser(this.userId)
+        .then((user) => {
+          this.init(user);
+          this.isInitialized = true;
+        });
+    }
  }

  init(user) {throw 'Not implemented';}

-  usersPatchHandler(patch) {throw 'Not implemented';}
+  onPatch(patch) {throw 'Not implemented';}

  setElement(element, value) {
    switch (element.tagName) {
-      case 'INPUT':
+      case 'INPUT': {
        element.value = value;
        M.updateTextFields();
        break;
-      default:
+      }
+      default: {
        element.innerText = value;
        break;
+      }
    }
  }

  setElements(elements, value) {
-    let element;
-
-    for (element of elements) {
+    for (let element of elements) {
      this.setElement(element, value);
    }
  }
--- a/app/static/js/RessourceLists/CorpusFileList.js
+++ b/app/static/js/RessourceLists/CorpusFileList.js
@@ -1,19 +1,47 @@
 class CorpusFileList extends RessourceList {
+  static autoInit() {
+    for (let corpusFileListElement of document.querySelectorAll('.corpus-file-list:not(.no-autoinit)')) {
+      new CorpusFileList(corpusFileListElement);
+    }
+  }
+
  static options = {
+    initialHtmlGenerator: (id) => {
+      return `
+        <div class="input-field">
+          <i class="material-icons prefix">search</i>
+          <input id="${id}-search" class="search" type="search"></input>
+          <label for="${id}-search">Search corpus file</label>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th>Filename</th>
+              <th>Author</th>
+              <th>Title</th>
+              <th>Publishing year</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody class="list"></tbody>
+        </table>
+        <ul class="pagination"></ul>
+      `.trim();
+    },
    item: `
-      <tr class="hoverable">
+      <tr class="clickable hoverable">
        <td><span class="filename"></span></td>
        <td><span class="author"></span></td>
        <td><span class="title"></span></td>
        <td><span class="publishing-year"></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 nopaque-service-color darken waves-effect waves-light" data-action="download" data-position="top" data-service="corpus-analysis" data-tooltip="View"><i class="material-icons">file_download</i></a>
-          <a class="action-button btn-floating tooltipped nopaque-service-color darken waves-effect waves-light" data-action="view" data-position="top" data-service="corpus-analysis" data-tooltip="View"><i class="material-icons">send</i></a>
+          <a class="action-button btn-floating red waves-effect waves-light" data-action="delete"><i class="material-icons">delete</i></a>
+          <a class="action-button btn-floating service-color darken waves-effect waves-light" data-action="download" data-service="corpus-analysis"><i class="material-icons">file_download</i></a>
+          <a class="action-button btn-floating service-color darken waves-effect waves-light" data-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
        </td>
      </tr>
    `.trim(),
-    ressourceMapper: corpusFile => {
+    ressourceMapper: (corpusFile) => {
      return {
        'id': corpusFile.id,
        'author': corpusFile.author,
@@ -23,7 +51,7 @@ class CorpusFileList extends RessourceList {
        'title': corpusFile.title
      };
    },
-    sortValueName: 'creation-date',
+    sortArgs: ['creation-date', {order: 'desc'}],
    valueNames: [
      {data: ['id']},
      {data: ['creation-date']},
@@ -34,7 +62,6 @@ class CorpusFileList extends RessourceList {
    ]
  };

-
  constructor(listElement, options = {}) {
    super(listElement, {...CorpusFileList.options, ...options});
    this.corpusId = listElement.dataset.corpusId;
@@ -44,92 +71,59 @@ class CorpusFileList extends RessourceList {
    this._init(user.corpora[this.corpusId].files);
  }

-  onclick(event) {
-    let action;
-    let actionButtonElement;
-    let corpusFileElement;
-    let corpusFileId;
-    let deleteModal;
-    let deleteModalElement;
-    let tmp;
-
-    corpusFileElement = event.target.closest('tr[data-id]');
-    if (corpusFileElement === null) {return;}
-    corpusFileId = corpusFileElement.dataset.id;
-    actionButtonElement = event.target.closest('.action-button[data-action]');
-    action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
+  onClick(event) {
+    let actionButtonElement = event.target.closest('.action-button');
+    let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
+    let corpusFileElement = event.target.closest('tr');
+    let corpusFileId = corpusFileElement.dataset.id;
    switch (action) {
-      case 'delete':
-        tmp = document.createElement('div');
-        tmp.innerHTML = `
-          <div class="modal">
-            <div class="modal-content">
-              <h4>Confirm corpus deletion</h4>
-              <p>Do you really want to delete the corpus file <b>${app.users[this.userId].corpora[this.corpusId].files[corpusFileId].filename}</b>? It 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="/corpora/${this.corpusId}/files/${corpusFileId}/delete"><i class="material-icons left">delete</i>Delete</a>
-            </div>
-          </div>
-        `.trim();
-        deleteModalElement = document.querySelector('#modals').appendChild(tmp.firstChild);
-        deleteModal = M.Modal.init(
-          deleteModalElement,
-          {
-            onCloseEnd: () => {
-              deleteModal.destroy();
-              deleteModalElement.remove();
-            }
-          }
-        );
-        deleteModal.open();
+      case 'delete': {
+        Utils.deleteCorpusFileRequest(this.userId, this.corpusId, corpusFileId);
        break;
-      case 'download':
+      }
+      case 'download': {
        window.location.href = `/corpora/${this.corpusId}/files/${corpusFileId}/download`;
        break;
-      case 'view':
+      }
+      case 'view': {
        window.location.href = `/corpora/${this.corpusId}/files/${corpusFileId}`;
        break;
-      default:
+      }
+      default: {
        break;
+      }
    }
  }

-  usersPatchHandler(patch) {
-    let corpusFileId;
-    let filteredPatch;
-    let match;
-    let operation;
-    let re;
-    let valueName;
-
-    re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)`);
-    filteredPatch = patch.filter(operation => re.test(operation.path));
-    for (operation of filteredPatch) {
+  onPatch(patch) {
+    let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)`);
+    let filteredPatch = patch.filter(operation => re.test(operation.path));
+    for (let operation of filteredPatch) {
      switch(operation.op) {
-        case 'add':
-          re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)$`);
-          if (re.test(operation.path)) {
-            this.add(operation.value);
-          }
+        case 'add': {
+          let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)$`);
+          if (re.test(operation.path)) {this.add(operation.value);}
          break;
-        case 'remove':
-          re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)$`);
+        }
+        case 'remove': {
+          let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)$`);
          if (re.test(operation.path)) {
-            [match, corpusFileId] = operation.path.match(re);
+            let [match, corpusFileId] = operation.path.match(re);
            this.remove(corpusFileId);
          }
          break;
-        case 'replace':
-          re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)/(author|filename|publishing_year|title)$`);
+        }
+        case 'replace': {
+          let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)/(author|filename|publishing_year|title)$`);
          if (re.test(operation.path)) {
-            [match, corpusFileId, valueName] = operation.path.match(re);
+            let [match, corpusFileId, valueName] = operation.path.match(re);
            this.replace(corpusFileId, valueName.replace('_', '-'), operation.value);
          }
          break;
-        default:
+        }
+        default: {
          break;
+        }
      }
    }
  }
--- a/app/static/js/RessourceLists/CorpusList.js
+++ b/app/static/js/RessourceLists/CorpusList.js
@@ -1,17 +1,44 @@
 class CorpusList extends RessourceList {
+  static autoInit() {
+    for (let corpusListElement of document.querySelectorAll('.corpus-list:not(.no-autoinit)')) {
+      new CorpusList(corpusListElement);
+    }
+  }
+
  static options = {
+    initialHtmlGenerator: (id) => {
+      return `
+        <div class="input-field">
+          <i class="material-icons prefix">search</i>
+          <input id="${id}-search" class="search" type="search"></input>
+          <label for="${id}-search">Search corpus</label>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th></th>
+              <th>Title and Description</th>
+              <th>Status</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody class="list"></tbody>
+        </table>
+        <ul class="pagination"></ul>
+      `.trim();
+    },
    item: `
-      <tr class="hoverable">
+      <tr class="clickable hoverable">
        <td><a class="btn-floating disabled"><i class="material-icons service-color darken" data-service="corpus-analysis">book</i></a></td>
        <td><b class="title"></b><br><i class="description"></i></td>
        <td><span class="status badge new corpus-status-color corpus-status-text" 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 nopaque-service-color darken tooltipped waves-effect waves-light" data-action="view" data-position="top" data-service="corpus-analysis" data-tooltip="View"><i class="material-icons">send</i></a>
+          <a class="action-button btn-floating red waves-effect waves-light" data-action="delete-request"><i class="material-icons">delete</i></a>
+          <a class="action-button btn-floating service-color darken waves-effect waves-light" data-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
        </td>
      </tr>
    `.trim(),
-    ressourceMapper: corpus => {
+    ressourceMapper: (corpus) => {
      return {
        'id': corpus.id,
        'creation-date': corpus.creation_date,
@@ -20,7 +47,7 @@ class CorpusList extends RessourceList {
        'title': corpus.title
      };
    },
-    sortValueName: 'creation-date',
+    sortArgs: ['creation-date', {order: 'desc'}],
    valueNames: [
      {data: ['id']},
      {data: ['creation-date']},
@@ -30,96 +57,63 @@ class CorpusList extends RessourceList {
    ]
  };

-
  constructor(listElement, options = {}) {
    super(listElement, {...CorpusList.options, ...options});
  }

  init(user) {
-    super._init(user.corpora);
+    this._init(user.corpora);
  }

-  onclick(event) {
-    let action;
-    let actionButtonElement;
-    let corpusElement;
-    let corpusId;
-    let deleteModal;
-    let deleteModalElement;
-    let tmp;
-
-    corpusElement = event.target.closest('tr[data-id]');
-    if (corpusElement === null) {return;}
-    corpusId = corpusElement.dataset.id;
-    actionButtonElement = event.target.closest('.action-button[data-action]');
-    action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
+  onClick(event) {
+    let actionButtonElement = event.target.closest('.action-button');
+    let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
+    let corpusElement = event.target.closest('tr');
+    let corpusId = corpusElement.dataset.id;
    switch (action) {
-      case 'delete':
-        tmp = document.createElement('div');
-        tmp.innerHTML = `
-          <div class="modal">
-            <div class="modal-content">
-              <h4>Confirm corpus deletion</h4>
-              <p>Do you really want to delete the corpus <b>${app.users[this.userId].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="/corpora/${corpusId}/delete"><i class="material-icons left">delete</i>Delete</a>
-            </div>
-          </div>
-        `.trim();
-        deleteModalElement = document.querySelector('#modals').appendChild(tmp.firstChild);
-        deleteModal = M.Modal.init(
-          deleteModalElement,
-          {
-            onCloseEnd: () => {
-              deleteModal.destroy();
-              deleteModalElement.remove();
-            }
-          }
-        );
-        deleteModal.open();
+      case 'delete-request': {
+        Utils.deleteCorpusRequest(this.userId, corpusId);
        break;
-      case 'view':
+      }
+      case 'view': {
        window.location.href = `/corpora/${corpusId}`;
        break;
-      default:
+      }
+      default: {
        break;
+      }
    }
  }

-  usersPatchHandler(patch) {
-    let corpusId;
-    let filteredPatch;
-    let match;
-    let operation;
-    let re;
-    let valueName;
-
-    re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)`);
-    filteredPatch = patch.filter(operation => re.test(operation.path));
-    for (operation of filteredPatch) {
+  onPatch(patch) {
+    let re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)`);
+    let filteredPatch = patch.filter(operation => re.test(operation.path));
+    for (let operation of filteredPatch) {
      switch(operation.op) {
-        case 'add':
-          re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)$`);
+        case 'add': {
+          let re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)$`);
          if (re.test(operation.path)) {this.add(operation.value);}
          break;
-        case 'remove':
-          re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)$`);
+        }
+        case 'remove': {
+          let re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)$`);
          if (re.test(operation.path)) {
-            [match, corpusId] = operation.path.match(re);
+            let [match, corpusId] = operation.path.match(re);
            this.remove(corpusId);
          }
          break;
-        case 'replace':
-          re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)/(status|description|title)$`);
+        }
+        case 'replace': {
+          let re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)/(status|description|title)$`);
          if (re.test(operation.path)) {
-            [match, corpusId, valueName] = operation.path.match(re);
+            let [match, corpusId, valueName] = operation.path.match(re);
            this.replace(corpusId, valueName, operation.value);
          }
          break;
-        default:
+        }
+        default: {
          break;
+        }
      }
    }
  }
--- a/app/static/js/RessourceLists/JobInputList.js
+++ b/app/static/js/RessourceLists/JobInputList.js
@@ -1,21 +1,46 @@
 class JobInputList extends RessourceList {
+  static autoInit() {
+    for (let jobInputListElement of document.querySelectorAll('.job-input-list:not(.no-autoinit)')) {
+      new JobInputList(jobInputListElement);
+    }
+  }
+
  static options = {
+    initialHtmlGenerator: (id) => {
+      return `
+        <div class="input-field">
+          <i class="material-icons prefix">search</i>
+          <input id="${id}-search" class="search" type="search"></input>
+          <label for="${id}-search">Search job input</label>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th>Filename</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody class="list"></tbody>
+        </table>
+        <ul class="pagination"></ul>
+      `.trim();
+    },
    item: `
-      <tr class="hoverable">
+      <tr class="clickable hoverable">
        <td><span class="filename"></span></td>
        <td class="right-align">
-          <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="download" data-position="top" data-tooltip="View"><i class="material-icons">file_download</i></a>
+          <a class="action-button btn-floating waves-effect waves-light" data-action="download"><i class="material-icons">file_download</i></a>
        </td>
      </tr>
    `.trim(),
-    ressourceMapper: jobInput => {
+    ressourceMapper: (jobInput) => {
      return {
        'id': jobInput.id,
        'creation-date': jobInput.creation_date,
        'filename': jobInput.filename
      };
    },
-    sortValueName: 'creation-date',
+    sortArgs: ['filename', {order: 'asc'}],
    valueNames: [
      {data: ['id']},
      {data: ['creation-date']},
@@ -23,7 +48,6 @@ class JobInputList extends RessourceList {
    ]
  };

-
  constructor(listElement, options = {}) {
    super(listElement, {...JobInputList.options, ...options});
    this.jobId = listElement.dataset.jobId;
@@ -33,26 +57,21 @@ class JobInputList extends RessourceList {
    this._init(user.jobs[this.jobId].inputs);
  }

-  onclick(event) {
-    let jobInputElement;
-    let jobInputId;
-    let action;
-    let actionButtonElement;
-
-    jobInputElement = event.target.closest('tr[data-id]');
-    if (jobInputElement === null) {return;}
-    jobInputId = jobInputElement.dataset.id;
-    actionButtonElement = event.target.closest('.action-button[data-action]');
-    if (actionButtonElement === null) {return;}
-    action = actionButtonElement.dataset.action;
+  onClick(event) {
+    let actionButtonElement = event.target.closest('.action-button');
+    let action = actionButtonElement === null ? 'download' : actionButtonElement.dataset.action;
+    let jobInputElement = event.target.closest('tr');
+    let jobInputId = jobInputElement.dataset.id;
    switch (action) {
-      case 'download':
+      case 'download': {
        window.location.href = `/jobs/${this.jobId}/inputs/${jobInputId}/download`;
        break;
-      default:
+      }
+      default: {
        break;
+      }
    }
  }

-  usersPatchHandler(patch) {return;}
+  onPatch(patch) {return;}
 }
--- a/app/static/js/RessourceLists/JobList.js
+++ b/app/static/js/RessourceLists/JobList.js
@@ -1,17 +1,44 @@
 class JobList extends RessourceList {
+  static autoInit() {
+    for (let jobListElement of document.querySelectorAll('.job-list:not(.no-autoinit)')) {
+      new JobList(jobListElement);
+    }
+  }
+
  static options = {
+    initialHtmlGenerator: (id) => {
+      return `
+        <div class="input-field">
+          <i class="material-icons prefix">search</i>
+          <input id="${id}-search" class="search" type="search"></input>
+          <label for="${id}-search">Search job</label>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th>Service</th>
+              <th>Title and Description</th>
+              <th>Status</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody class="list"></tbody>
+        </table>
+        <ul class="pagination"></ul>
+      `.trim();
+    },
    item: `
-      <tr class="hoverable service-color lighten">
+      <tr class="clickable hoverable service-color lighten">
        <td><a class="btn-floating disabled"><i class="service-1 nopaque-icons service-color darken service-icon"></i></a></td>
        <td><b class="title"></b><br><i class="description"></i></td>
        <td><span class="status badge new job-status-color job-status-text" 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="service-2 action-button btn-floating nopaque-service-color darken tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
+          <a class="action-button btn-floating red waves-effect waves-light" data-action="delete-request"><i class="material-icons">delete</i></a>
+          <a class="action-button btn-floating service-color darken waves-effect waves-light service-2" data-action="view"><i class="material-icons">send</i></a>
        </td>
      </tr>
    `.trim(),
-    ressourceMapper: job => {
+    ressourceMapper: (job) => {
      return {
        'id': job.id,
        'creation-date': job.creation_date,
@@ -23,7 +50,7 @@ class JobList extends RessourceList {
        'title': job.title
      };
    },
-    sortValueName: 'creation-date',
+    sortArgs: ['creation-date', {order: 'desc'}],
    valueNames: [
      {data: ['id']},
      {data: ['creation-date']},
@@ -36,7 +63,6 @@ class JobList extends RessourceList {
    ]
  };

-
  constructor(listElement, options = {}) {
    super(listElement, {...JobList.options, ...options});
  }
@@ -45,89 +71,55 @@ class JobList extends RessourceList {
    this._init(user.jobs);
  }

-  onclick(event) {
-    let action;
-    let actionButtonElement;
-    let deleteModal;
-    let deleteModalElement;
-    let jobElement;
-    let jobId;
-    let tmp;
-
-    jobElement = event.target.closest('tr[data-id]');
-    if (jobElement === null) {return;}
-    jobId = jobElement.dataset.id;
-    actionButtonElement = event.target.closest('.action-button[data-action]');
-    action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
+  onClick(event) {
+    let actionButtonElement = event.target.closest('.action-button');
+    let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
+    let jobElement = event.target.closest('tr');
+    let jobId = jobElement.dataset.id;
    switch (action) {
-      case 'delete':
-        tmp = document.createElement('div');
-        tmp.innerHTML = `
-          <div class="modal">
-            <div class="modal-content">
-              <h4>Confirm job deletion</h4>
-              <p>Do you really want to delete the job <b>${app.users[this.userId].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="/jobs/${jobId}/delete"><i class="material-icons left">delete</i>Delete</a>
-            </div>
-          </div>
-        `.trim();
-        deleteModalElement = document.querySelector('#modals').appendChild(tmp.firstChild);
-        deleteModal = M.Modal.init(
-          deleteModalElement,
-          {
-            onCloseEnd: () => {
-              deleteModal.destroy();
-              deleteModalElement.remove();
-            }
-          }
-        );
-        deleteModal.open();
+      case 'delete-request': {
+        Utils.deleteJobRequest(this.userId, jobId);
        break;
-      case 'view':
+      }
+      case 'view': {
        window.location.href = `/jobs/${jobId}`;
        break;
-      default:
+      }
+      default: {
        break;
+      }
    }
  }

-  usersPatchHandler(patch) {
-    let filteredPatch;
-    let jobId;
-    let match;
-    let operation;
-    let re;
-    let valueName;
-
-    re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)`);
-    filteredPatch = patch.filter(operation => re.test(operation.path));
-    for (operation of filteredPatch) {
+  onPatch(patch) {
+    let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)`);
+    let filteredPatch = patch.filter(operation => re.test(operation.path));
+    for (let operation of filteredPatch) {
      switch(operation.op) {
-        case 'add':
-          re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)$`);
-          if (re.test(operation.path)) {
-            this.add(operation.value);
-          }
+        case 'add': {
+          let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)$`);
+          if (re.test(operation.path)) {this.add(operation.value);}
          break;
-        case 'remove':
-          re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)$`);
+        }
+        case 'remove': {
+          let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)$`);
          if (re.test(operation.path)) {
-            [match, jobId] = operation.path.match(re);
+            let [match, jobId] = operation.path.match(re);
            this.remove(jobId);
          }
          break;
-        case 'replace':
-          re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)/(service|status|description|title)$`);
+        }
+        case 'replace': {
+          let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)/(service|status|description|title)$`);
          if (re.test(operation.path)) {
-            [match, jobId, valueName] = operation.path.match(re);
+            let [match, jobId, valueName] = operation.path.match(re);
            this.replace(jobId, valueName, operation.value);
          }
          break;
-        default:
+        }
+        default: {
          break;
+        }
      }
    }
  }
--- a/app/static/js/RessourceLists/JobResultList.js
+++ b/app/static/js/RessourceLists/JobResultList.js
@@ -1,15 +1,41 @@
 class JobResultList extends RessourceList {
+  static autoInit() {
+    for (let jobResultListElement of document.querySelectorAll('.job-result-list:not(.no-autoinit)')) {
+      new JobResultList(jobResultListElement);
+    }
+  }
+
  static options = {
+    initialHtmlGenerator: (id) => {
+      return `
+        <div class="input-field">
+          <i class="material-icons prefix">search</i>
+          <input id="${id}-search" class="search" type="search"></input>
+          <label for="${id}-search">Search job result</label>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th>Description</th>
+              <th>Filename</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody class="list"></tbody>
+        </table>
+        <ul class="pagination"></ul>
+      `.trim();
+    },
    item: `
-      <tr class="hoverable">
+      <tr class="clickable hoverable">
        <td><span class="description"></span></td>
        <td><span class="filename"></span></td>
        <td class="right-align">
-          <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="download" data-position="top" data-tooltip="View"><i class="material-icons">file_download</i></a>
+          <a class="action-button btn-floating waves-effect waves-light" data-action="download"><i class="material-icons">file_download</i></a>
        </td>
      </tr>
    `.trim(),
-    ressourceMapper: jobResult => {
+    ressourceMapper: (jobResult) => {
      return {
        'id': jobResult.id,
        'creation-date': jobResult.creation_date,
@@ -17,7 +43,7 @@ class JobResultList extends RessourceList {
        'filename': jobResult.filename
      };
    },
-    sortValueName: 'creation-date',
+    sortArgs: ['filename', {order: 'asc'}],
    valueNames: [
      {data: ['id']},
      {data: ['creation-date']},
@@ -26,7 +52,6 @@ class JobResultList extends RessourceList {
    ]
  };

-
  constructor(listElement, options = {}) {
    super(listElement, {...JobResultList.options, ...options});
    this.jobId = listElement.dataset.jobId;
@@ -36,44 +61,35 @@ class JobResultList extends RessourceList {
    super._init(user.jobs[this.jobId].results);
  }

-  onclick(event) {
-    let action;
-    let actionButtonElement;
-    let jobResultElement;
-    let jobResultId;
-
-    jobResultElement = event.target.closest('tr[data-id]');
-    if (jobResultElement === null) {return;}
-    jobResultId = jobResultElement.dataset.id;
-    actionButtonElement = event.target.closest('.action-button[data-action]');
-    if (actionButtonElement === null) {return;}
-    action = actionButtonElement.dataset.action;
+  onClick(event) {
+    let actionButtonElement = event.target.closest('.action-button');
+    let action = actionButtonElement === null ? 'download' : actionButtonElement.dataset.action;
+    let jobResultElement = event.target.closest('tr');
+    let jobResultId = jobResultElement.dataset.id;
    switch (action) {
-      case 'download':
+      case 'download': {
        window.location.href = `/jobs/${this.jobId}/results/${jobResultId}/download`;
        break;
-      default:
+      }
+      default: {
        break;
+      }
    }
  }

-  usersPatchHandler(patch) {
-    let filteredPatch;
-    let operation;
-    let re;
-
-    re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/results/([A-Za-z0-9]*)`);
-    filteredPatch = patch.filter(operation => re.test(operation.path));
-    for (operation of filteredPatch) {
+  onPatch(patch) {
+    let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/results/([A-Za-z0-9]*)`);
+    let filteredPatch = patch.filter(operation => re.test(operation.path));
+    for (let operation of filteredPatch) {
      switch(operation.op) {
-        case 'add':
-          re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/results/([A-Za-z0-9]*)$`);
-          if (re.test(operation.path)) {
-            this.add(operation.value);
-          }
+        case 'add': {
+          let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/results/([A-Za-z0-9]*)$`);
+          if (re.test(operation.path)) {this.add(operation.value);}
          break;
-        default:
+        }
+        default: {
          break;
+        }
      }
    }
  }
--- a/app/static/js/RessourceLists/QueryResultList.js
+++ b/app/static/js/RessourceLists/QueryResultList.js
@@ -1,12 +1,18 @@
 class QueryResultList extends RessourceList {
+  static autoInit() {
+    for (let queryResultListElement of document.querySelectorAll('.query-result-list:not(.no-autoinit)')) {
+      new QueryResultList(queryResultListElement);
+    }
+  }
+
  static options = {
    item: `
      <tr class="hoverable">
        <td><b class="title"></b><br><i class="description"></i><br></td>
        <td><span class="corpus-title"></span><br><span class="query"></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="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
+          <a class="action-button btn-floating red waves-effect waves-light" data-action="delete"><i class="material-icons">delete</i></a>
+          <a class="action-button btn-floating waves-effect waves-light" data-action="view"><i class="material-icons">send</i></a>
        </td>
      </tr>
    `.trim(),
@@ -20,7 +26,7 @@ class QueryResultList extends RessourceList {
        'title': queryResult.title
      };
    },
-    sortValueName: 'creation-date',
+    sortArgs: ['creation-date', {order: 'desc'}],
    valueNames: [
      {data: ['id']},
      {data: ['creation-date']},
@@ -31,7 +37,6 @@ class QueryResultList extends RessourceList {
    ]
  };

-
  constructor(listElement, options = {}) {
    super(listElement, {...QueryResultList.options, ...options});
  }
@@ -89,7 +94,7 @@ class QueryResultList extends RessourceList {
    }
  }

-  usersPatchHandler(patch) {
+  onPATCH(patch) {
    let filteredPatch;
    let match;
    let operation;
--- a/app/static/js/RessourceLists/RessourceList.js
+++ b/app/static/js/RessourceLists/RessourceList.js
@@ -3,45 +3,22 @@ class RessourceList {
   * This class is not meant to be used directly, instead it should be used as
   * a base class for concrete ressource list implementations.
   */
-  static autoInit() {
-    const nopaqueRessourceListElements = document.querySelectorAll('.nopaque-ressource-list[data-ressource-type]:not(.no-autoinit)');
-    let nopaqueRessourceListElement;

-    for (nopaqueRessourceListElement of nopaqueRessourceListElements) {
-      switch (nopaqueRessourceListElement.dataset.ressourceType) {
-        case 'Corpus':
-          new CorpusList(nopaqueRessourceListElement);
-          break;
-        case 'CorpusFile':
-          new CorpusFileList(nopaqueRessourceListElement);
-          break;
-        case 'Job':
-          new JobList(nopaqueRessourceListElement);
-          break;
-        case 'JobInput':
-          new JobInputList(nopaqueRessourceListElement);
-          break;
-        case 'JobResult':
-          new JobResultList(nopaqueRessourceListElement);
-          break;
-        case 'QueryResult':
-          new QueryResultList(nopaqueRessourceListElement);
-          break;
-        case 'User':
-          new UserList(nopaqueRessourceListElement);
-          break;
-        default:
-          break;
-      }
-    }
+  static autoInit() {
+    CorpusList.autoInit();
+    CorpusFileList.autoInit();
+    JobList.autoInit();
+    JobInputList.autoInit();
+    JobResultList.autoInit();
+    QueryResultList.autoInit();
+    UserList.autoInit();
  }
+
  static options = {page: 5, pagination: {innerWindow: 4, outerWindow: 1}};

-
  constructor(listElement, options = {}) {
-    let i;
-
    if (!(listElement.hasAttribute('id'))) {
+      let i;
      for (i = 0; true; i++) {
        if (document.querySelector(`#ressource-list-${i}`)) {continue;}
        listElement.id = `ressource-list-${i}`;
@@ -56,9 +33,14 @@ class RessourceList {
      this.ressourceMapper = options.ressourceMapper;
      delete options.ressourceMapper;
    }
-    if ('sortValueName' in options) {
-      this.sortValueName = options.sortValueName;
-      delete options.sortValueName;
+    if ('initialHtmlGenerator' in options) {
+      this.initialHtmlGenerator = options.initialHtmlGenerator;
+      listElement.innerHTML = this.initialHtmlGenerator(listElement.id);
+      delete options.initialHtmlGenerator;
+    }
+    if ('sortArgs' in options) {
+      this.sortArgs = options.sortArgs;
+      delete options.sortArgs;
    }
    this.listjs = new List(listElement, {...RessourceList.options, ...options});
    this.listjs.list.innerHTML = `
@@ -87,47 +69,54 @@ class RessourceList {
        </td>
      </tr>
    `.trim();
-    this.listjs.list.style.cursor = 'pointer';
    this.userId = this.listjs.listContainer.dataset.userId;
-    this.listjs.list.addEventListener('click', event => this.onclick(event));
+    this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
+    this.isInitialized = false;
    if (this.userId) {
-      app.addEventListener('users.patch', patch => this.usersPatchHandler(patch));
-      app.getUserById(this.userId).then(
-        user => this.init(user),
-        error => {throw JSON.stringify(error);}
-      );
+      app.subscribeUser(this.userId)
+        .then((response) => {
+          app.socket.on('PATCH', (patch) => {
+            if (this.isInitialized) {this.onPatch(patch);}
+          });
+        });
+      app.getUser(this.userId)
+        .then((user) => {
+          this.init(user);
+          this.isInitialized = true;
+        });
    }
  }

  _init(ressources) {
    this.listjs.clear();
    this.add(Object.values(ressources));
-    let emptyListElementHTML = `
-      <tr class="show-if-only-child">
-        <td colspan="100%">
-          <span class="card-title"><i class="left material-icons" style="font-size: inherit;">file_download</i>Nothing here...</span>
-          <p>No ressource available.</p>
-        </td>
-      </tr>
-    `.trim();
-    this.listjs.list.insertAdjacentHTML('afterbegin', emptyListElementHTML);
+    this.listjs.list.insertAdjacentHTML(
+      'afterbegin',
+      `
+        <tr class="show-if-only-child">
+          <td colspan="100%">
+            <span class="card-title"><i class="left material-icons" style="font-size: inherit;">file_download</i>Nothing here...</span>
+            <p>No ressource available.</p>
+          </td>
+        </tr>
+      `.trim()
+    );
  }

  init(user) {throw 'Not implemented';}

-  onclick(event) {throw 'Not implemented';}
+  onClick(event) {throw 'Not implemented';}

-  usersPatchHandler(patch) {throw 'Not implemented';}
+  onPatch(patch) {throw 'Not implemented';}

  add(ressources) {
    let values = Array.isArray(ressources) ? ressources : [ressources];
-
    if ('ressourceMapper' in this) {
-      values = values.map(value => this.ressourceMapper(value));
+      values = values.map((value) => {return this.ressourceMapper(value);});
    }
    this.listjs.add(values, () => {
-      if ('sortValueName' in this) {
-        this.listjs.sort(this.sortValueName, {order: 'desc'});
+      if ('sortArgs' in this) {
+        this.listjs.sort(...this.sortArgs);
      }
    });
  }
@@ -137,6 +126,6 @@ class RessourceList {
  }

  replace(id, valueName, newValue) {
-      this.listjs.get('id', id)[0].values({[valueName]: newValue});
+    this.listjs.get('id', id)[0].values({[valueName]: newValue});
  }
 }
--- a/app/static/js/RessourceLists/UserList.js
+++ b/app/static/js/RessourceLists/UserList.js
@@ -1,31 +1,60 @@
 class UserList extends RessourceList {
+  static autoInit() {
+    for (let userListElement of document.querySelectorAll('.user-list:not(.no-autoinit)')) {
+      new UserList(userListElement);
+    }
+  }
+
  static options = {
+    initialHtmlGenerator: (id) => {
+      return `
+        <div class="input-field">
+          <i class="material-icons prefix">search</i>
+          <input id="${id}-search" class="search" type="search"></input>
+          <label for="${id}-search">Search user</label>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th>Id</th>
+              <th>Username</th>
+              <th>Email</th>
+              <th>Last seen</th>
+              <th>Role</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody class="list"></tbody>
+        </table>
+        <ul class="pagination"></ul>
+      `.trim();
+    },
    item: `
-      <tr class="hoverable">
+      <tr class="clickable hoverable">
        <td><span class="id-1"></span></td>
        <td><span class="username"></span></td>
        <td><span class="email"></span></td>
        <td><span class="last-seen"></span></td>
        <td><span class="role"></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="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
+          <a class="action-button btn-floating red waves-effect waves-light" data-action="delete"><i class="material-icons">delete</i></a>
+          <a class="action-button btn-floating waves-effect waves-light" data-action="edit"><i class="material-icons">edit</i></a>
+          <a class="action-button btn-floating waves-effect waves-light" data-action="view"><i class="material-icons">send</i></a>
        </td>
      </tr>
    `.trim(),
-    ressourceMapper: user => {
+    ressourceMapper: (user) => {
      return {
        'id': user.id,
        'id-1': user.id,
        'username': user.username,
        'email': user.email,
-        'last-seen': new Date(user.last_seen).toLocaleString("en-US"),
+        'last-seen': new Date(user.last_seen).toLocaleString('en-US'),
        'member-since': user.member_since,
        'role': user.role.name
      };
    },
-    sortValueName: 'member-since',
+    sortArgs: ['member-since', {order: 'desc'}],
    valueNames: [
      {data: ['id']},
      {data: ['member-since']},
@@ -37,8 +66,6 @@ class UserList extends RessourceList {
    ]
  };

-
-
  constructor(listElement, options = {}) {
    super(listElement, {...UserList.options, ...options});
  }
@@ -47,55 +74,28 @@ class UserList extends RessourceList {
    super._init(Object.values(users));
  }

-  onclick(event) {
-    let action;
-    let actionButtonElement;
-    let deleteModal;
-    let deleteModalElement;
-    let tmp;
-    let userElement;
-    let userId;
-
-    userElement = event.target.closest('tr[data-id]');
-    if (userElement === null) {return;}
-    userId = userElement.dataset.id;
-    actionButtonElement = event.target.closest('.action-button[data-action]');
-    action = (actionButtonElement === null) ? 'view' : actionButtonElement.dataset.action;
+  onClick(event) {
+    let actionButtonElement = event.target.closest('.action-button');
+    let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
+    let userElement = event.target.closest('tr');
+    let userId = userElement.dataset.id;
    switch (action) {
-      case 'delete':
-        tmp = document.createElement('div');
-        tmp.innerHTML = `
-          <div class="modal">
-            <div class="modal-content">
-              <h4>Confirm user deletion</h4>
-              <p>Do you really want to delete user <b>${userId}</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="/admin/users/${userId}/delete"><i class="material-icons left">delete</i>Delete</a>
-            </div>
-          </div>
-        `.trim();
-        deleteModalElement = document.querySelector('#modals').appendChild(tmp.firstChild);
-        deleteModal = M.Modal.init(
-          deleteModalElement,
-          {
-            onCloseEnd: () => {
-              deleteModal.destroy();
-              deleteModalElement.remove();
-            }
-          }
-        );
-        deleteModal.open();
+      case 'delete': {
+        Utils.deleteUserRequest(userId);
+        if (userId === currentUserId) {window.location.href = '/';}
        break;
-      case 'edit':
+      }
+      case 'edit': {
        window.location.href = `/admin/users/${userId}/edit`;
        break;
-      case 'view':
+      }
+      case 'view': {
        window.location.href = `/admin/users/${userId}`;
        break;
-      default:
+      }
+      default: {
        break;
+      }
    }
  }
 }
--- a/app/static/js/UploadForm.js
+++ b/app/static/js/UploadForm.js
@@ -1,125 +0,0 @@
-class UploadForm {
-  static autoInit() {
-    const nopaqueSubmitForms = document.querySelectorAll('.nopaque-upload-form');
-    let nopaqueSubmitForm;
-
-    for (nopaqueSubmitForm of nopaqueSubmitForms) {
-      new UploadForm(nopaqueSubmitForm);
-    }
-  }
-
-
-  constructor(formElement) {
-    this.formElement = formElement;
-    this.request = new XMLHttpRequest();
-
-    this.formElement.addEventListener('submit', (event) => {
-      event.preventDefault();
-      this.submit();
-    });
-  }
-
-  submit() {
-    const selectElements = this.formElement.querySelectorAll('select');
-    let abortElement;
-    let helperTextElement;
-    let helperTextElements;
-    let inputFieldElement;
-    let modal;
-    let modalElement;
-    let progressElement;
-    let selectElement;
-    let tmp;
-
-    // Check if select elements are filled out properly
-    for (selectElement of selectElements) {
-      if (selectElement.value === '') {
-        inputFieldElement = selectElement.closest('.input-field');
-        inputFieldElement.querySelector('.select-dropdown').classList.add('invalid');
-        helperTextElements = inputFieldElement.querySelectorAll('.helper-text');
-        for (helperTextElement of helperTextElements) {
-          helperTextElement.remove();
-        }
-        inputFieldElement.insertAdjacentHTML(
-          'beforeend',
-          '<span class="helper-text error-color-text">Please select an option.</span>'
-        );
-        return;
-      }
-    }
-
-    // Setup modal
-    tmp = document.createElement('div');
-    tmp.innerHTML = `
-      <div class="modal">
-        <div class="modal-content">
-          <h4><i class="material-icons left">file_upload</i>Uploading files...</h4>
-          <div class="progress">
-            <div class="determinate" style="width: 0%"></div>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <a href="#!" class="btn red waves-effect waves-light abort">Cancel</a>
-        </div>
-      </div>
-    `.trim();
-    modalElement = document.querySelector('#modals').appendChild(tmp.firstChild);
-    modal = M.Modal.init(
-      modalElement,
-      {
-        dismissible: false,
-        onCloseEnd: () => {
-          modal.destroy();
-          modalElement.remove();
-        }
-      }
-    );
-    modal.open();
-
-    // Setup abort handling
-    abortElement = modalElement.querySelector('.abort');
-    abortElement.addEventListener('click', event => {this.request.abort();});
-    this.request.addEventListener('abort', event => {
-      this.request.abort();
-      modal.close();
-    });
-
-    // Setup load handling (after the request completed)
-    this.request.addEventListener('load', event => {
-      const response = JSON.parse(this.request.responseText);
-      let inputError;
-      let inputErrors;
-      let inputFieldElement;
-      let inputName;
-
-      if (this.request.status === 201) {
-        window.location.href = response.redirect_url;
-      }
-      if (this.request.status === 400) {
-        for ([inputName, inputErrors] of Object.entries(response)) {
-          inputFieldElement = this.formElement.querySelector(`input[name="${inputName}"], select[name="${inputName}"]`).closest('.input-field');
-          for (inputError of inputErrors) {
-            inputFieldElement.insertAdjacentHTML(
-              'beforeend',
-              `<span class="helper-text red-text">${inputError}</span>`
-            );
-          }
-        }
-      }
-      if (this.request.status === 500) {
-        location.reload();
-      }
-      modal.close();
-    });
-
-    // Setup progress handling
-    progressElement = modalElement.querySelector('.progress > .determinate');
-    this.request.upload.addEventListener('progress', event => {
-      const progress = Math.floor(100 * event.loaded / event.total);
-      progressElement.style.width = `${progress}%`;
-    });
-
-    this.request.open('POST', window.location.href);
-    this.request.send(new FormData(this.formElement));
-  }
-}
--- a/app/static/js/Utils.js
+++ b/app/static/js/Utils.js
@@ -0,0 +1,326 @@
+class Utils {
+  static elementFromString(string) {
+    let tmpElement = document.createElement('div');
+    tmpElement.innerHTML = string.trim();
+    return tmpElement.firstChild;
+  }
+
+  static buildCorpusRequest(userId, corpusId) {
+    return new Promise((resolve, reject) => {
+      let corpus = app.data.users[userId].corpora[corpusId];
+
+      fetch(`/corpora/${corpus.id}/build`, {method: 'POST', headers: {Accept: 'application/json'}})
+        .then(
+          (response) => {
+            app.flash(`Corpus "${corpus.title}" marked for building`, 'corpus');
+            resolve(response);
+          },
+          (response) => {
+            if (response.status === 403) {app.flash('Forbidden', 'error');}
+            if (response.status === 404) {app.flash('Not Found', 'error');}
+            if (response.status === 409) {app.flash('Conflict', 'error');}
+            reject(response);
+          }
+        );
+    });
+  }
+
+  static deleteCorpusRequest(userId, corpusId) {
+    return new Promise((resolve, reject) => {
+      let corpus = app.data.users[userId].corpora[corpusId];
+
+      let modalElement = Utils.elementFromString(
+        `
+          <div class="modal">
+            <div class="modal-content">
+              <h4>Confirm job deletion</h4>
+              <p>Do you really want to delete the job <b>${corpus.title}</b>? All files will be permanently deleted!</p>
+            </div>
+            <div class="modal-footer">
+              <a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
+              <a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
+            </div>
+          </div>
+        `
+      );
+      document.querySelector('#modals').appendChild(modalElement);
+      let modal = M.Modal.init(
+        modalElement,
+        {
+          dismissible: false,
+          onCloseEnd: () => {
+            modal.destroy();
+            modalElement.remove();
+          }
+        }
+      );
+      
+      let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
+      confirmElement.addEventListener('click', (event) => {
+        let corpusTitle = corpus.title;
+        fetch(`/corpora/${corpus.id}`, {method: 'DELETE', headers: {Accept: 'application/json'}})
+          .then(
+            (response) => {
+              app.flash(`Corpus "${corpusTitle}" marked for deletion`, 'corpus');
+              resolve(response);
+            },
+            (response) => {
+              if (response.status === 403) {app.flash('Forbidden', 'error');}
+              if (response.status === 404) {app.flash('Not Found', 'error');}
+              reject(response);
+            }
+          );
+      });
+      modal.open();
+    });
+  }
+
+  static deleteCorpusFileRequest(userId, corpusId, corpusFileId) {
+    return new Promise((resolve, reject) => {
+      let corpus = app.data.users[userId].corpora[corpusId];
+      let corpusFile = corpus.files[corpusFileId];
+
+      let modalElement = Utils.elementFromString(
+        `
+          <div class="modal">
+            <div class="modal-content">
+              <h4>Confirm job deletion</h4>
+              <p>Do you really want to delete the job <b>${corpusFile.title}</b>? All files will be permanently deleted!</p>
+            </div>
+            <div class="modal-footer">
+              <a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
+              <a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
+            </div>
+          </div>
+        `
+      );
+      document.querySelector('#modals').appendChild(modalElement);
+      let modal = M.Modal.init(
+        modalElement,
+        {
+          dismissible: false,
+          onCloseEnd: () => {
+            modal.destroy();
+            modalElement.remove();
+          }
+        }
+      );
+
+      let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
+      confirmElement.addEventListener('click', (event) => {
+        let corpusFileTitle = corpusFile.title;
+        fetch(`/corpora/${corpusId}/files/${corpusFileId}`, {method: 'DELETE', headers: {Accept: 'application/json'}})
+          .then(
+            (response) => {
+              app.flash(`Corpus file "${corpusFileTitle}" marked for deletion`, 'corpus');
+              resolve(response);
+            },
+            (response) => {
+              if (response.status === 403) {app.flash('Forbidden', 'error');}
+              if (response.status === 404) {app.flash('Not Found', 'error');}
+              reject(response);
+            }
+          );
+      });
+      modal.open();
+    });
+  }
+
+  static deleteJobRequest(userId, jobId) {
+    return new Promise((resolve, reject) => {
+      let job = app.data.users[userId].jobs[jobId];
+
+      let modalElement = Utils.elementFromString(
+        `
+          <div class="modal">
+            <div class="modal-content">
+              <h4>Confirm job deletion</h4>
+              <p>Do you really want to delete the job <b>${job.title}</b>? All files will be permanently deleted!</p>
+            </div>
+            <div class="modal-footer">
+              <a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
+              <a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
+            </div>
+          </div>
+        `
+      );
+      document.querySelector('#modals').appendChild(modalElement);
+      let modal = M.Modal.init(
+        modalElement,
+        {
+          dismissible: false,
+          onCloseEnd: () => {
+            modal.destroy();
+            modalElement.remove();
+          }
+        }
+      );
+
+      let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
+      confirmElement.addEventListener('click', (event) => {
+        let jobTitle = job.title;
+        fetch(`/jobs/${job.id}`, {method: 'DELETE', headers: {Accept: 'application/json'}})
+          .then(
+            (response) => {
+              app.flash(`Job "${jobTitle}" marked for deletion`, 'job');
+              resolve(response);
+            },
+            (response) => {
+              if (response.status === 403) {app.flash('Forbidden', 'error');}
+              if (response.status === 404) {app.flash('Not Found', 'error');}
+              reject(response);
+            }
+          );
+      });
+      modal.open();
+    });
+  }
+
+  static getJobLogRequest(userId, jobId) {
+    return new Promise((resolve, reject) => {
+      let job = app.data.users[userId].jobs[jobId];
+
+      fetch(`/jobs/${job.id}/log`, {method: 'GET', headers: {Accept: 'application/json, text/plain'}})
+        .then(
+          (response) => {
+            resolve(response);
+            return response.text();
+          },
+          (response) => {
+            if (response.status === 403) {app.flash('Forbidden', 'error');}
+            if (response.status === 404) {app.flash('Not Found', 'error');}
+            reject(response);
+          }
+        )
+        .then(
+          (text) => {
+            let modalElement = Utils.elementFromString(
+              `
+                <div class="modal">
+                  <div class="modal-content">
+                    <h4>Job logs</h4>
+                    <pre><code>${text}</code></pre>
+                  </div>
+                  <div class="modal-footer">
+                    <a class="btn modal-close waves-effect waves-light">Close</a>
+                  </div>
+                </div>
+              `
+            );
+            document.querySelector('#modals').appendChild(modalElement);
+            let modal = M.Modal.init(
+              modalElement,
+              {
+                onCloseEnd: () => {
+                  modal.destroy();
+                  modalElement.remove();
+                }
+              }
+            );
+            modal.open();
+          }
+        );
+    });
+  }
+
+  static restartJobRequest(userId, jobId) {
+    return new Promise((resolve, reject) => {
+      let job = app.data.users[userId].jobs[jobId];
+
+      let modalElement = Utils.elementFromString(
+        `
+          <div class="modal">
+            <div class="modal-content">
+              <h4>Confirm job restart</h4>
+              <p>Do you really want to restart the job <b>${job.title}</b>? All log and result files will be permanently deleted.</p>
+            </div>
+            <div class="modal-footer">
+              <a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
+              <a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Restart</a>
+            </div>
+          </div>
+        `
+      );
+      document.querySelector('#modals').appendChild(modalElement);
+      let modal = M.Modal.init(
+        modalElement,
+        {
+          dismissible: false,
+          onCloseEnd: () => {
+            modal.destroy();
+            modalElement.remove();
+          }
+        }
+      );
+
+      let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
+      confirmElement.addEventListener('click', (event) => {
+        let jobTitle = job.title;
+        fetch(`/jobs/${job.id}/restart`, {method: 'POST', headers: {Accept: 'application/json'}})
+          .then(
+            (response) => {
+              app.flash(`Job "${jobTitle}" restarted.`, 'job');
+              resolve(response);
+            },
+            (response) => {
+              if (response.status === 403) {app.flash('Forbidden', 'error');}
+              if (response.status === 404) {app.flash('Not Found', 'error');}
+              if (response.status === 409) {app.flash('Conflict', 'error');}
+              reject(response);
+            }
+          );
+      });
+      modal.open();
+    });
+  }
+
+  static deleteUserRequest(userId) {
+    return new Promise((resolve, reject) => {
+      let user = app.data.users[userId];
+
+      let modalElement = Utils.elementFromString(
+        `
+          <div class="modal">
+            <div class="modal-content">
+              <h4>Confirm job deletion</h4>
+              <p>Do you really want to delete the user <b>${user.username}</b>? All files will be permanently deleted!</p>
+            </div>
+            <div class="modal-footer">
+              <a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
+              <a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
+            </div>
+          </div>
+        `
+      );
+      document.querySelector('#modals').appendChild(modalElement);
+      let modal = M.Modal.init(
+        modalElement,
+        {
+          dismissible: false,
+          onCloseEnd: () => {
+            modal.destroy();
+            modalElement.remove();
+          }
+        }
+      );
+
+      let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
+      confirmElement.addEventListener('click', (event) => {
+        let userName = user.username;
+        fetch(`/users/${user.id}`, {method: 'DELETE', headers: {Accept: 'application/json'}})
+          .then(
+            (response) => {
+              app.flash(`User "${userName}" marked for deletion`);
+              resolve(response);
+            },
+            (response) => {
+              if (response.status === 403) {app.flash('Forbidden', 'error');}
+              if (response.status === 404) {app.flash('Not Found', 'error');}
+              reject(response);
+            }
+          );
+      });
+      modal.open();
+    });
+  }
+}