Bump Socket.IO Version and update to new List and Display logic for live data

web/app/models.py

@@ -547,9 +547,11 @@ class Corpus(db.Model):
                 'id': self.id,
                 'user_id': self.user_id,
                 'creation_date': self.creation_date.timestamp(),
+                'current_nr_of_tokens': self.current_nr_of_tokens,
                 'description': self.description,
                 'status': self.status,
                 'last_edited_date': self.last_edited_date.timestamp(),
+                'max_nr_of_tokens': self.max_nr_of_tokens,
                 'title': self.title,
                 'files': {file.id: file.to_dict() for file in self.files}}
 

web/app/static/js/nopaque/RessorceLists.js

@@ -0,0 +1,492 @@
+class RessourceList {
+  /* A wrapper class for the list.js list.
+   * This class is not meant to be used directly, instead it should be used as
+   * a base class 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.list.list.innerHTML = `<tr class="show-if-only-child">
+                                  <td colspan="3">
+                                    <span class="card-title"><i class="left material-icons" style="font-size: inherit;">file_download</i>Nothing here...</span>
+                                    <p>No ressource available (yet).</p>
+                                  </td>
+                                </tr>`;
+  }
+
+  eventHandler(eventType, payload) {
+    switch (eventType) {
+      case 'init':
+        this.init(payload);
+        break;
+      case 'patch':
+        this.patch(payload);
+        break;
+      default:
+        console.error(`Unknown event type: ${eventType}`);
+        break;
+    }
+  }
+
+  init(ressources) {
+    this.list.clear();
+    this.add(Object.values(ressources));
+    this.list.sort('id', {order: 'desc'});
+  }
+
+  patch(patch) {
+    /*
+     * It's not possible to generalize a patch Handler for all type of
+     * ressources. So this method is meant to be an interface.
+     */
+    console.error('patch method not implemented!');
+  }
+
+  add(values) {
+    let ressources = Array.isArray(values) ? values : [values];
+    if (typeof this.preprocessRessource === 'function') {
+      ressources = ressources.map(ressource => this.preprocessRessource(ressource));
+    }
+    // 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) {
+    this.list.remove('id', id);
+  }
+
+  replace(id, valueName, newValue) {
+      this.list.get('id', id)[0].values({[valueName]: newValue});
+  }
+}
+RessourceList.options = {page: 5, pagination: [{innerWindow: 4, outerWindow: 1}]};
+
+
+class CorpusList extends RessourceList {
+  constructor(listElement, options = {}) {
+    super(listElement, {...CorpusList.options, ...options});
+    this.corpora = undefined;
+    this.user.eventListeners.corpus.addEventListener((eventType, payload) => this.eventHandler(eventType, payload));
+    listElement.addEventListener('click', event => this.onclick(event));
+  }
+
+  init(corpora) {
+    this.corpora = corpora;
+    super.init(corpora);
+  }
+
+  onclick(event) {
+    let ressourceElement = event.target.closest('tr');
+    if (ressourceElement === null) {return;}
+    let corpusId = ressourceElement.dataset.id;
+    let actionButtonElement = event.target.closest('.action-button');
+    let action = (actionButtonElement === null) ? 'view' : actionButtonElement.dataset.action;
+    switch (action) {
+      case 'analyse':
+        window.location.href = this.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>${this.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="${this.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 = this.corpora[corpusId].url;
+        break;
+      default:
+        console.error(`Unknown action: ${action}`);
+        break;
+    }
+  }
+
+  patch(patch) {
+    let id, match, re, valueName;
+    for (let operation of patch) {
+      switch(operation.op) {
+        case 'add':
+          // Matches the only paths that should be handled here: /corpora/{corpusId}
+          re = /^\/corpora\/(\d+)$/;
+          if (re.test(operation.path)) {this.add(operation.value);}
+          break;
+        case 'remove':
+          // See case 'add' ;)
+          re = /^\/corpora\/(\d+)$/;
+          if (re.test(operation.path)) {
+            [match, id] = operation.path.match(re);
+            this.remove(id);
+          }
+          break;
+        case 'replace':
+          // Matches the only paths that should be handled here: /corpora/{corpusId}/{status || description || title}
+          re = /^\/corpora\/(\d+)\/(status|description|title)$/;
+          if (re.test(operation.path)) {
+            [match, id, valueName] = operation.path.match(re);
+            this.replace(id, valueName, operation.value);
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  preprocessRessource(corpus) {
+    return {id: corpus.id,
+            status: corpus.status,
+            description: corpus.description,
+            title: corpus.title};
+  }
+}
+CorpusList.options = {
+  item: `<tr>
+           <td><a class="btn-floating disabled"><i class="material-icons">book</i></a></td>
+           <td><b class="title"></b><br><i class="description"></i></td>
+           <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="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']
+};
+
+
+class CorpusFileList extends RessourceList {
+  constructor(listElement, options = {}) {
+    super(listElement, {...CorpusFileList.options, ...options});
+    this.corpus = undefined;
+    this.user.eventListeners.corpus.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), listElement.dataset.corpusId);
+    listElement.addEventListener('click', event => this.onclick(event));
+  }
+
+  init(corpus) {
+    this.corpus = corpus;
+    super.init(this.corpus.files);
+  }
+
+  onclick(event) {
+    let ressourceElement = event.target.closest('tr');
+    if (ressourceElement === null) {return;}
+    let corpusFileId = ressourceElement.dataset.id;
+    let actionButtonElement = event.target.closest('.action-button');
+    if (actionButtonElement === null) {return;}
+    let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
+    switch (action) {
+      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 file <b>${this.corpus.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="${this.corpus.files[corpusFileId].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 'download':
+        window.location.href = this.corpus.files[corpusFileId].download_url;
+        break;
+      case 'view':
+        window.location.href = this.corpus.files[corpusFileId].url;
+        break;
+      default:
+        console.error(`Unknown action: "${action}"`);
+        break;
+    }
+  }
+
+  patch(patch) {
+    let re;
+    for (let operation of patch) {
+      switch(operation.op) {
+        case 'add':
+          // Matches the only paths that should be handled here: /corpora/{this.corpus.id}/files/{corpusFileId}
+          re = new RegExp('^/corpora/' + this.corpus.id + '/files/(\\d+)$');
+          if (re.test(operation.path)) {this.add(operation.value);}
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  preprocessRessource(corpusFile) {
+    return {id: corpusFile.id, author: corpusFile.author, filename: corpusFile.filename, 'publishing-year': corpusFile.publishing_year, title: corpusFile.title};
+  }
+}
+CorpusFileList.options = {
+  item: `<tr>
+           <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 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 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']}, 'author', 'filename', 'publishing-year', 'title']
+};
+
+
+class JobList extends RessourceList {
+  constructor(listElement, options = {}) {
+    super(listElement, {...JobList.options, ...options});
+    this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload));
+    listElement.addEventListener('click', event => this.onclick(event));
+  }
+
+  onclick(event) {
+    let ressourceElement = event.target.closest('tr');
+    if (ressourceElement === null) {return;}
+    let jobId = ressourceElement.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) {
+    let id, match, re, valueName;
+    for (let operation of patch) {
+      switch(operation.op) {
+        case 'add':
+          // Matches the only paths that should be handled here: /jobs/{jobId}
+          re = /^\/jobs\/(\d+)$/;
+          if (re.test(operation.path)) {this.add(operation.value);}
+          break;
+        case 'remove':
+          // See case add ;)
+          re = /^\/jobs\/(\d+)$/;
+          if (re.test(operation.path)) {
+            [match, id] = operation.path.match(re);
+            this.remove(id);
+          }
+          break;
+        case 'replace':
+          // Matches the only paths that should be handled here: /jobs/{jobId}/{service || status || description || title}
+          re = /^\/jobs\/(\d+)\/(status|description|title)$/;
+          if (re.test(operation.path)) {
+            [match, id, valueName] = operation.path.match(re);
+            this.replace(id, valueName, operation.value);
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  preprocessRessource(job) {
+    return {id: job.id,
+            service: job.service,
+            status: job.status,
+            description: job.description,
+            title: job.title};
+  }
+}
+JobList.options = {
+  item: `<tr>
+           <td><a class="btn-floating disabled"><i class="material-icons service"></i></a></td>
+           <td><b class="title"></b><br><i class="description"></i></td>
+           <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="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']
+};
+
+
+class JobInputList extends RessourceList {
+  constructor(listElement, options = {}) {
+    super(listElement, {...JobInputList.options, ...options});
+    this.job = undefined;
+    this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), listElement.dataset.jobId);
+    listElement.addEventListener('click', event => this.onclick(event));
+  }
+
+  init(job) {
+    this.job = job;
+    super.init(this.job.inputs);
+  }
+
+  onclick(event) {
+    let ressourceElement = event.target.closest('tr');
+    if (ressourceElement === null) {return;}
+    let jobInputId = ressourceElement.dataset.id;
+    let actionButtonElement = event.target.closest('.action-button');
+    if (actionButtonElement === null) {return;}
+    let action = actionButtonElement.dataset.action;
+    switch (action) {
+      case 'download':
+        window.location.href = this.job.inputs[jobInputId].download_url;
+        break;
+      default:
+        console.error(`Unknown action: "${action}"`);
+        break;
+    }
+  }
+
+  preprocessRessource(jobInput) {
+    return {id: jobInput.id, filename: jobInput.filename};
+  }
+}
+JobInputList.options = {
+  item: `<tr>
+           <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>
+           </td>
+         </tr>`,
+  valueNames: [{data: ['id']}, 'filename']
+};
+
+
+class JobResultList extends RessourceList {
+  constructor(listElement, options = {}) {
+    super(listElement, {...JobResultList.options, ...options});
+    this.job = undefined;
+    this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), listElement.dataset.jobId);
+    listElement.addEventListener('click', event => this.onclick(event));
+  }
+
+  init(job) {
+    this.job = job;
+    super.init(this.job.results);
+  }
+
+  onclick(event) {
+    let ressourceElement = event.target.closest('tr');
+    if (ressourceElement === null) {return;}
+    let jobResultId = ressourceElement.dataset.id;
+    let actionButtonElement = event.target.closest('.action-button');
+    if (actionButtonElement === null) {return;}
+    let action = actionButtonElement.dataset.action;
+    switch (action) {
+      case 'download':
+        window.location.href = this.job.results[jobResultId].download_url;
+        break;
+      default:
+        console.error(`Unknown action: "${action}"`);
+        break;
+    }
+  }
+
+  patch(patch) {
+    let re;
+    for (let operation of patch) {
+      switch(operation.op) {
+        case 'add':
+          // Matches the only paths that should be handled here: /jobs/{this.job.id}/results/{jobResultId}
+          re = new RegExp('^/jobs/' + this.job.id + '/results/(\\d+)$');
+          if (re.test(operation.path)) {this.add(operation.value);}
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  preprocessRessource(jobResult) {
+    let description;
+    if (jobResult.filename.endsWith('.pdf.zip')) {
+      description = 'PDF files with text layer';
+    } else if (jobResult.filename.endsWith('.txt.zip')) {
+      description = 'Raw text files';
+    } else if (jobResult.filename.endsWith('.vrt.zip')) {
+      description = 'VRT compliant files including the NLP data';
+    } else if (jobResult.filename.endsWith('.xml.zip')) {
+      description = 'TEI compliant files';
+    } else if (jobResult.filename.endsWith('.poco.zip')) {
+      description = 'HOCR and image files for post correction (PoCo)';
+    } else {
+      description = 'All result files created during this job';
+    }
+    return {id: jobResult.id, description: description, filename: jobResult.filename};
+  }
+}
+JobResultList.options = {
+  item: `<tr>
+           <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>
+           </td>
+         </tr>`,
+  valueNames: [{data: ['id']}, 'description', 'filename']
+};
+
+
+class QueryResultList extends RessourceList {
+  constructor(listElement, options = {}) {
+    super(listElement, {...QueryResultList.options, ...options});
+    this.user.eventListeners.queryResult.addEventListener((eventType, payload) => this.eventHandler(eventType, payload));
+  }
+}
+QueryResultList.options = {
+  item: `<tr>
+           <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 tooltipped waves-effect waves-light" data-action="analyse" data-position="top" data-tooltip="Analyse"><i class="material-icons">search</i></a>
+           </td>
+         </tr>`,
+  valueNames: [{data: ['id']}, 'corpus_title', 'description', 'query', 'title']
+};

web/app/static/js/nopaque/RessourceDisplays.js

@@ -0,0 +1,215 @@
+class RessourceDisplay {
+  constructor(displayElement) {
+    if (displayElement.dataset.userId) {
+      if (displayElement.dataset.userId in nopaque.appClient.users) {
+        this.user = nopaque.appClient.users[displayElement.dataset.userId];
+      } else {
+        console.error(`User not found: ${displayElement.dataset.userId}`);
+        return;
+      }
+    } else {
+      this.user = nopaque.appClient.users.self;
+    }
+    this.displayElement = displayElement;
+  }
+
+  eventHandler(eventType, payload) {
+    switch (eventType) {
+      case 'init':
+        this.init(payload);
+        break;
+      case 'patch':
+        this.patch(payload);
+        break;
+      default:
+        console.log(`Unknown event type: ${eventType}`);
+        break;
+    }
+  }
+
+  init() {console.error('init method not implemented!');}
+
+  patch() {console.error('patch method not implemented!');}
+
+  setElement(element, value) {
+    switch (element.tagName) {
+      case 'INPUT':
+        element.value = value;
+        M.updateTextFields();
+        break;
+      default:
+        element.innerText = value;
+        break;
+    }
+  }
+}
+
+
+class CorpusDisplay extends RessourceDisplay {
+  constructor(displayElement) {
+    super(displayElement);
+    this.corpus = undefined;
+    this.user.eventListeners.corpus.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), displayElement.dataset.corpusId);
+  }
+
+  init(corpus) {
+    this.corpus = corpus;
+    this.setCreationDate(this.corpus.creation_date);
+    this.setDescription(this.corpus.description);
+    this.setLastEditedDate(this.corpus.last_edited_date);
+    this.setStatus(this.corpus.status);
+    this.setTitle(this.corpus.title);
+    this.setTokenRatio(this.corpus.current_nr_of_tokens, this.corpus.max_nr_of_tokens);
+  }
+
+  patch(patch) {
+    let re;
+    for (let operation of patch) {
+      switch(operation.op) {
+        case 'replace':
+          // Matches: /jobs/{this.job.id}/status
+          re = new RegExp('^/corpora/' + this.corpus.id + '/last_edited_date');
+          if (re.test(operation.path)) {this.setLastEditedDate(operation.value); break;}
+          // Matches: /jobs/{this.job.id}/status
+          re = new RegExp('^/corpora/' + this.corpus.id + '/status$');
+          if (re.test(operation.path)) {this.setStatus(operation.value); break;}
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  setTitle(title) {
+    for (let element of this.displayElement.querySelectorAll('.corpus-title')) {this.setElement(element, title);}
+  }
+
+  setTokenRatio(currentNrOfTokens, maxNrOfTokens) {
+    let tokenRatio = `${currentNrOfTokens}/${maxNrOfTokens}`;
+    for (let element of this.displayElement.querySelectorAll('.corpus-token-ratio')) {this.setElement(element, tokenRatio);}
+  }
+
+  setDescription(description) {
+    for (let element of this.displayElement.querySelectorAll('.corpus-description')) {this.setElement(element, description);}
+  }
+
+  setStatus(status) {
+    for (let element of this.displayElement.querySelectorAll('.corpus-status')) {this.setElement(element, status);}
+    for (let element of this.displayElement.querySelectorAll('.status')) {element.dataset.status = status;}
+    for (let element of this.displayElement.querySelectorAll('.status-spinner')) {
+      if (['complete', 'failed', 'unprepared'].includes(status)) {
+        element.classList.add('hide');
+      } else {
+        element.classList.remove('hide');
+      }
+    }
+    for (let element of this.displayElement.querySelectorAll('.build-corpus-trigger')) {
+      if (['complete', 'failed'].includes(status)) {
+        element.classList.remove('hide');
+      } else {
+        element.classList.add('hide');
+      }
+    }
+  }
+
+  setCreationDate(creationDateTimestamp) {
+    let creationDate = new Date(creationDateTimestamp * 1000).toLocaleString("en-US");
+    for (let element of this.displayElement.querySelectorAll('.corpus-creation-date')) {this.setElement(element, creationDate);}
+  }
+
+  setLastEditedDate(endDateTimestamp) {
+    let endDate = new Date(endDateTimestamp * 1000).toLocaleString("en-US");
+    for (let element of this.displayElement.querySelectorAll('.corpus-end-date')) {this.setElement(element, endDate);}
+  }
+}
+
+
+
+class JobDisplay extends RessourceDisplay {
+  constructor(displayElement) {
+    super(displayElement);
+    this.job = undefined;
+    this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), displayElement.dataset.jobId);
+  }
+
+  init(job) {
+    this.job = job;
+    this.setCreationDate(this.job.creation_date);
+    this.setEndDate(this.job.creation_date);
+    this.setDescription(this.job.description);
+    this.setService(this.job.service);
+    this.setServiceArgs(this.job.service_args);
+    this.setServiceVersion(this.job.service_version);
+    this.setStatus(this.job.status);
+    this.setTitle(this.job.title);
+  }
+
+  patch(patch) {
+    let re;
+    for (let operation of patch) {
+      switch(operation.op) {
+        case 'replace':
+          // Matches: /jobs/{this.job.id}/status
+          re = new RegExp('^/jobs/' + this.job.id + '/end_date');
+          if (re.test(operation.path)) {this.setEndDate(operation.value); break;}
+          // Matches: /jobs/{this.job.id}/status
+          re = new RegExp('^/jobs/' + this.job.id + '/status$');
+          if (re.test(operation.path)) {this.setStatus(operation.value); break;}
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  setTitle(title) {
+    for (let element of this.displayElement.querySelectorAll('.job-title')) {this.setElement(element, title);}
+  }
+
+  setDescription(description) {
+    for (let element of this.displayElement.querySelectorAll('.job-description')) {this.setElement(element, description);}
+  }
+
+  setStatus(status) {
+    for (let element of this.displayElement.querySelectorAll('.job-status')) {
+      this.setElement(element, status);
+    }
+    for (let element of this.displayElement.querySelectorAll('.status')) {element.dataset.status = status;}
+    for (let element of this.displayElement.querySelectorAll('.status-spinner')) {
+      if (['complete', 'failed'].includes(status)) {
+        element.classList.add('hide');
+      } else {
+        element.classList.remove('hide');
+      }
+    }
+    for (let element of this.displayElement.querySelectorAll('.restart-job-trigger')) {
+      if (['complete', 'failed'].includes(status)) {
+        element.classList.remove('hide');
+      } else {
+        element.classList.add('hide');
+      }
+    }
+  }
+
+  setCreationDate(creationDateTimestamp) {
+    let creationDate = new Date(creationDateTimestamp * 1000).toLocaleString("en-US");
+    for (let element of this.displayElement.querySelectorAll('.job-creation-date')) {this.setElement(element, creationDate);}
+  }
+
+  setEndDate(endDateTimestamp) {
+    let endDate = new Date(endDateTimestamp * 1000).toLocaleString("en-US");
+    for (let element of this.displayElement.querySelectorAll('.job-end-date')) {this.setElement(element, endDate);}
+  }
+
+  setService(service) {
+    for (let element of this.displayElement.querySelectorAll('.job-service')) {this.setElement(element, service);}
+  }
+
+  setServiceArgs(serviceArgs) {
+    for (let element of this.displayElement.querySelectorAll('.job-service-args')) {this.setElement(element, serviceArgs);}
+  }
+
+  setServiceVersion(serviceVersion) {
+    for (let element of this.displayElement.querySelectorAll('.job-service-version')) {this.setElement(element, serviceVersion);}
+  }
+}

web/app/static/js/nopaque/index.js

@@ -0,0 +1,244 @@
+class AppClient {
+  constructor(currentUserId) {
+    this.socket = io({transports: ['websocket']});
+    this.users = {};
+    this.users.self = this.loadUser(currentUserId);
+  }
+
+  loadUser(userId) {
+    if (userId in this.users) {return this.users[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 = {
+      corpus: {
+        addEventListener(listener, corpusId='*') {
+          if (corpusId in this) {this[corpusId].push(listener);} else {this[corpusId] = [listener];}
+        }
+      },
+      job: {
+        addEventListener(listener, jobId='*') {
+          if (jobId in this) {this[jobId].push(listener);} else {this[jobId] = [listener];}
+        }
+      },
+      queryResult: {
+        addEventListener(listener, queryResultId='*') {
+          if (queryResultId in this) {this[queryResultId].push(listener);} else {this[queryResultId] = [listener];}
+        }
+      }
+    };
+  }
+
+  init(data) {
+    this.data = data;
+
+    if (Object.keys(this.data.corpora).length > 0) {
+      //for (listener of this.eventListeners.corporaInit) {listener(this.data.corpora);}
+      for (let [corpusId, eventListeners] of Object.entries(this.eventListeners.corpus)) {
+        if (corpusId === '*') {
+          for (let eventListener of eventListeners) {eventListener('init', this.data.corpora);}
+        } else {
+          if (corpusId in this.data.corpora) {
+            for (let eventListener of eventListeners) {eventListener('init', this.data.corpora[corpusId]);}
+          }
+        }
+      }
+    }
+
+    if (Object.keys(this.data.jobs).length > 0) {
+      //for (listener of this.eventListeners.jobsInit) {listener(this.data.jobs);}
+      for (let [jobId, eventListeners] of Object.entries(this.eventListeners.job)) {
+        if (jobId === '*') {
+          for (let eventListener of eventListeners) {eventListener('init', this.data.jobs);}
+        } else {
+          if (jobId in this.data.jobs) {
+            for (let eventListener of eventListeners) {eventListener('init', this.data.jobs[jobId]);}
+          }
+        }
+      }
+    }
+
+    if (Object.keys(this.data.query_results).length > 0) {
+      //for (listener of this.eventListeners.queryResultsInit) {listener(this.data.query_results);}
+      for (let [queryResultId, eventListeners] of Object.entries(this.eventListeners.queryResult)) {
+        if (queryResultId === '*') {
+          for (let eventListener of eventListeners) {eventListener('init', this.data.query_results);}
+        } else {
+          if (queryResultId in this.data.query_results) {
+            for (let eventListener of eventListeners) {eventListener('init', this.data.query_results[queryResultId]);}
+          }
+        }
+      }
+    }
+  }
+
+  patch(patch) {
+    this.data = jsonpatch.apply_patch(this.data, patch);
+
+    let corporaPatch = patch.filter(operation => operation.path.startsWith("/corpora"));
+    if (corporaPatch.length > 0) {
+      for (let [corpusId, eventListeners] of Object.entries(this.eventListeners.corpus)) {
+        if (corpusId === '*') {
+          for (let eventListener of eventListeners) {eventListener('patch', corporaPatch);}
+        } else {
+          let corpusPatch = corporaPatch.filter(operation => operation.path.startsWith(`/corpora/${corpusId}`));
+          if (corpusPatch.length > 0) {
+            for (let eventListener of eventListeners) {eventListener('patch', corpusPatch);}
+          }
+        }
+      }
+    }
+
+    let jobsPatch = patch.filter(operation => operation.path.startsWith("/jobs"));
+    if (jobsPatch.length > 0) {
+      for (let [jobId, eventListeners] of Object.entries(this.eventListeners.job)) {
+        if (jobId === '*') {
+          for (let eventListener of eventListeners) {eventListener('patch', jobsPatch);}
+        } else {
+          let jobPatch = jobsPatch.filter(operation => operation.path.startsWith(`/jobs/${jobId}`));
+          if (jobPatch.length > 0) {
+            for (let eventListener of eventListeners) {eventListener('patch', jobPatch);}
+          }
+        }
+      }
+    }
+
+    let queryResultsPatch = patch.filter(operation => operation.path.startsWith("/query_results"));
+    if (queryResultsPatch.length > 0) {
+      for (let [queryResultId, eventListeners] of Object.entries(this.eventListeners.queryResult)) {
+        if (queryResultId === '*') {
+          for (let eventListener of eventListeners) {eventListener('patch', queryResultsPatch);}
+        } else {
+          let queryResultPatch = queryResultsPatch.filter(operation => operation.path.startsWith(`/query_results/${queryResultId}`));
+          if (queryResultPatch.length > 0) {
+            for (let eventListener of eventListeners) {eventListener('patch', queryResultPatch);}
+          }
+        }
+      }
+    }
+
+    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');
+      }
+    }
+  }
+}
+
+
+/*
+ * The nopaque object is used as a namespace for nopaque specific functions and
+ * variables.
+ */
+var nopaque = {};
+
+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();});
+};
+
+nopaque.Forms = {};
+nopaque.Forms.init = function() {
+  var abortRequestElement, parentElement, progressElement, progressModal,
+      progressModalElement, request, submitElement;
+
+  for (let form of document.querySelectorAll(".nopaque-submit-form")) {
+    submitElement = form.querySelector('button[type="submit"]');
+    submitElement.addEventListener("click", function() {
+      for (let selectElement of form.querySelectorAll('select')) {
+        if (selectElement.value === "") {
+          parentElement = selectElement.closest(".input-field");
+          parentElement.querySelector(".select-dropdown").classList.add("invalid");
+          for (let helperTextElement of parentElement.querySelectorAll(".helper-text")) {
+            helperTextElement.remove();
+          }
+          parentElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">Please select an option.</span>`);
+        }
+      }
+    });
+
+    request = new XMLHttpRequest();
+    if (form.dataset.hasOwnProperty("progressModal")) {
+      progressModalElement = document.getElementById(form.dataset.progressModal);
+      progressModal = M.Modal.getInstance(progressModalElement);
+      progressModal.options.dismissible = false;
+      abortRequestElement = progressModalElement.querySelector(".abort-request");
+      abortRequestElement.addEventListener("click", function() {request.abort();});
+      progressElement = progressModalElement.querySelector(".determinate");
+    }
+    form.addEventListener("submit", function(event) {
+      event.preventDefault();
+      var formData;
+
+      formData = new FormData(form);
+      // Initialize progress modal
+      if (progressModalElement) {
+        progressElement.style.width = "0%";
+        progressModal.open();
+      }
+      request.open("POST", window.location.href);
+      request.send(formData);
+    });
+    request.addEventListener("load", function(event) {
+      var fieldElement;
+
+      if (request.status === 201) {
+        window.location.href = JSON.parse(this.responseText).redirect_url;
+      }
+      if (request.status === 400) {
+        for (let [field, errors] of Object.entries(JSON.parse(this.responseText))) {
+          fieldElement = form.querySelector(`input[name$="${field}"]`).closest(".input-field");
+          for (let error of errors) {
+            fieldElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">${error}</span>`);
+          }
+        }
+        if (progressModalElement) {
+          progressModal.close();
+        }
+      }
+      if (request.status === 500) {
+        location.reload();
+      }
+    });
+    if (progressModalElement) {
+      request.upload.addEventListener("progress", function(event) {
+        progressElement.style.width = Math.floor(100 * event.loaded / event.total).toString() + "%";
+      });
+    }
+  }
+}

web/app/templates/corpora/corpus.html.j2

@@ -2,85 +2,93 @@
 {% from '_colors.html.j2' import colors %}
 
 {% set scheme_primary_color = colors.corpus_analysis_darken %}
-{% set scheme_secondary_color = colors.corpus_analysis %}
+{% set scheme_secondary_color = colors.corpus_analysis_lighten %}
+{% block main_attribs %} style="background-color: {{ scheme_secondary_color }};"{% endblock main_attribs %}
 
 {% block nav_content %}
 {% include 'corpora/_breadcrumbs.html.j2' %}
 {% endblock nav_content %}
 
-{% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}
-
 {% block page_content %}
 <div class="container">
   <div class="row">
-    <div class="col s12">
+    <div class="col s12" data-corpus-id="{{ corpus.id }}" data-user-id="{{ corpus.creator.id }}" id="corpus-display">
-      <h1 id="title">{{ corpus.title }}</h1>
+      <div class="row">
-      <p id="description">{{ corpus.description }}</p>
+        <div class="col s8 m9 l10">
-    </div>
+          <h1 id="title"><span class="corpus-title"></span></h1>
-
+        </div>
-    <div class="col s12 m4">
+        <div class="col s4 m3 l2 right-align">
-      <span class="chip status white-text hide" id="status"></span>
+          <p>&nbsp;</p>
-      <div class="active preloader-wrapper small hide status-spinner" id="progress-indicator">
+          <p>&nbsp;</p>
-        <div class="spinner-layer spinner-blue-only">
+          <span class="chip status white-text"></span>
-          <div class="circle-clipper left">
+          <div class="active preloader-wrapper small status-spinner">
-            <div class="circle"></div>
+            <div class="spinner-layer spinner-blue-only">
-          </div>
+              <div class="circle-clipper left">
-          <div class="gap-patch">
+                <div class="circle"></div>
-            <div class="circle"></div>
+              </div>
-          </div>
+              <div class="gap-patch">
-          <div class="circle-clipper right">
+                <div class="circle"></div>
-            <div class="circle"></div>
+              </div>
+              <div class="circle-clipper right">
+                <div class="circle"></div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="col s12 m8">
       <div class="card">
-        <div class="card-content">
+        <div class="card-content" style="border-top: 10px solid {{ scheme_primary_color }}">
           <span class="card-title">Chronometrics</span>
           <div class="row">
             <div class="col s12 m6">
               <div class="input-field">
-                <input disabled value="{{ corpus.creation_date.strftime('%d/%m/%Y, %H:%M:%S %p') }}" id="creation-date" type="text" class="validate">
+                <input class="corpus-creation-date validate" disabled id="corpus-creation-date" type="text">
-                <label for="creation-date">Creation date</label>
+                <label for="corpus-creation-date">Creation date</label>
               </div>
             </div>
             <div class="col s12 m6">
               <div class="input-field">
-                <input disabled value="{{ corpus.last_edited_date.strftime('%d/%m/%Y, %H:%M:%S %p') }}" id="last_edited_date" type="text" class="validate">
+                <input class="corpus-last-edited-date validate" disabled id="corpus-last-edited-date" type="text">
-                <label for="creation-date">Last edited</label>
+                <label for="corpus-last-edited-date">Last edited</label>
               </div>
             </div>
             <div class="col s12 m6">
               <div class="input-field">
-                <input disabled value="{{ corpus.current_nr_of_tokens }} / {{ corpus.max_nr_of_tokens }}" id="nr_of_tokens" type="text" class="validate">
+                <input class="corpus-token-ratio validate" disabled id="corpus-token-ratio" type="text">
-                <label for="creation-date">Nr. of tokens used
+                <label for="corpus-token-ratio">Nr. of tokens used <sup><i class="material-icons tooltipped tiny" data-position="bottom" data-tooltip="Current number of tokens in this corpus. Updates after every analyze session.">help</i></sup></label>
-                  <i class="material-icons tooltipped" data-position="bottom" data-tooltip="Current number of tokens in this corpus. Updates after every analyze session.">help</i>
-                </label>
               </div>
             </div>
           </div>
         </div>
         <div class="card-action right-align">
-          <a href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}" class="btn disabled hide waves-effect waves-light" id="analyze"><i class="material-icons left">search</i>Analyze</a>
+          <a class="btn disabled hide waves-effect waves-light" href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}"><i class="material-icons left">search</i>Analyze</a>
-          <a href="{{ url_for('corpora.prepare_corpus', corpus_id=corpus.id) }}" class="btn disabled hide waves-effect waves-light" id="build"><i class="material-icons left">build</i>Build</a>
+          <a class="btn disabled hide waves-effect waves-light" href="{{ url_for('corpora.prepare_corpus', corpus_id=corpus.id) }}"><i class="material-icons left">build</i>Build</a>
-          <a class="btn hide waves-effect waves-light download" id="corpus_create_zip"><i class="material-icons left">import_export</i>Export Corpus</a>
+          <a class="btn hide waves-effect waves-light" id="corpus-export"><i class="material-icons left">import_export</i>Export Corpus</a>
-          <a data-target="delete-corpus-modal" class="btn modal-trigger red waves-effect waves-light"><i class="material-icons left">delete</i>Delete</a>
+          <a class="btn modal-trigger red waves-effect waves-light" data-target="delete-corpus-modal"><i class="material-icons left">delete</i>Delete</a>
+        </div>
+      </div>
+
+      <div id="delete-corpus-modal" class="modal">
+        <div class="modal-content">
+          <h4>Confirm corpus deletion</h4>
+          <p>Do you really want to delete the corpus <span class="corpus-title"></span>? All files will be permanently deleted!</p>
+        </div>
+        <div class="modal-footer">
+          <a class="btn modal-close waves-effect waves-light" href="#!">Cancel</a>
+          <a class="btn modal-close red waves-effect waves-light" href="{{ url_for('corpora.delete_corpus', corpus_id=corpus.id) }}"><i class="material-icons left">delete</i>Delete</a>
         </div>
       </div>
     </div>
 
-    <div class="col s12"></div>
+    <div class="col s12" id="corpus-files" data-corpus-id="{{ corpus.id }}" data-user-id="{{ corpus.creator.id }}">
-
-    <div class="col s12">
       <div class="card">
-        <div class="card-content" id="corpus-files" style="overflow: hidden;">
+        <div class="card-content">
           <span class="card-title" id="files">Corpus files</span>
           <div class="input-field">
             <i class="material-icons prefix">search</i>
-            <input id="search-results" class="search" type="search"></input>
+            <input class="search" id="search-corpus-files" type="search"></input>
-            <label for="search-results">Search results</label>
+            <label for="search-corpus-files">Search corpus files</label>
           </div>
           <table class="highlight responsive-table">
             <thead>
@@ -89,18 +97,10 @@
                 <th class="sort" data-sort="author">Author</th>
                 <th class="sort" data-sort="title">Title</th>
                 <th class="sort" data-sort="publishing-year">Publishing year</th>
-                <th>{# Actions #}</th>
+                <th>Actions</th>
               </tr>
             </thead>
-            <tbody class="list">
+            <tbody class="list"></tbody>
-              {% if corpus_files|length == 0 %}
-              <tr class="show-if-only-child">
-                <td colspan="5">
-                  <span class="card-title"><i class="material-icons left">book</i>Nothing here...</span>
-                  <p>Corpus is empty. Add texts using the option below.</p>
-                </td>
-              </tr>
-              {% endif %}
           </table>
           <ul class="pagination"></ul>
         </div>
@@ -111,140 +111,14 @@
     </div>
   </div>
 </div>
-
-<!-- Modals -->
-<div id="delete-corpus-modal" class="modal">
-  <div class="modal-content">
-    <h4>Confirm corpus deletion</h4>
-    <p>Do you really want to delete the corpus {{ corpus.title }}? 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 href="{{ url_for('corpora.delete_corpus', corpus_id=corpus.id) }}" class="btn modal-close red waves-effect waves-light"><i class="material-icons left">delete</i>Delete</a>
-  </div>
-</div>
 {% endblock page_content %}
 
 {% block scripts %}
 {{ super() }}
-<script type="module">
+<script>
-import {
+  nopaque.appClient.loadUser({{ corpus.creator.id }});
-  RessourceList
+  let corpusDisplay = new CorpusDisplay(document.querySelector('#corpus-display'));
-} from '../../static/js/nopaque.lists.js';
+  let corpusFileList = new CorpusFileList(document.querySelector('#corpus-files'));
-
+  //let jobInputList = new CorpusFileList(document.querySelector('#job-inputs'));
-class InformationUpdater {
-  constructor(corpusId, foreignCorpusFlag) {
-    this.corpusId = corpusId;
-    this.foreignCorpusFlag = foreignCorpusFlag;
-
-    if (this.foreignCorpusFlag) {
-      nopaque.foreignCorporaSubscribers.push(this);
-    } else {
-      nopaque.corporaSubscribers.push(this);
-    }
-  }
-
-  _init() {
-    let corpus;
-
-    corpus = (this.foreignCorpusFlag ? nopaque.foreignUser.corpora[this.corpusId]
-                                     : nopaque.user.corpora[this.corpusId]);
-
-    // Status
-    this.setStatus(corpus.status);
-  }
-
-  _update(patch) {
-    let pathArray;
-
-    for (let operation of patch) {
-      /* "/corpora/{corpusId}/valueName" -> ["{corpusId}", ...] */
-      pathArray = operation.path.split("/").slice(2);
-      if (pathArray[0] != this.corpusId) {continue;}
-      switch(operation.op) {
-        case "add":
-          location.reload();
-          break;
-        case "delete":
-          location.reload();
-          break;
-        case "replace":
-          if (pathArray[1] === "status") {
-            this.setStatus(operation.value);
-          }
-          break;
-        default:
-          break;
-      }
-    }
-  }
-
-  setStatus(status) {
-    let analyzeElement, buildElement, numFiles, progressIndicatorElement, statusElement;
-
-    numFiles = Object.keys((this.foreignCorpusFlag ? nopaque.foreignUser.corpora[this.corpusId] : nopaque.user.corpora[this.corpusId]).files).length;
-
-    progressIndicatorElement = document.getElementById("progress-indicator");
-    if (["queued", "running", "start analysis", "stop analysis"].includes(status)) {
-      progressIndicatorElement.classList.remove("hide");
-    } else {
-      progressIndicatorElement.classList.add("hide");
-    }
-
-    statusElement = document.getElementById("status");
-    statusElement.dataset.status = status;
-    statusElement.classList.remove("hide");
-
-    analyzeElement = document.getElementById("analyze");
-    if (["analysing", "prepared", "start analysis"].includes(status)) {
-      analyzeElement.classList.remove("disabled", "hide");
-    } else {
-      analyzeElement.classList.add("disabled", "hide");
-    }
-
-    buildElement = document.getElementById("build");
-    if (status === "unprepared" && numFiles > 0) {
-      buildElement.classList.remove("disabled", "hide");
-    } else {
-      buildElement.classList.add("disabled", "hide");
-    }
-
-    let downloadBtn = document.querySelector('#corpus_create_zip');
-    if (status === "prepared") {
-      downloadBtn.classList.toggle('hide', false);
-    } else {
-      downloadBtn.classList.toggle('hide', true);
-    }
-  }
-}
-
-{% if corpus.creator == current_user %}
-var informationUpdater = new InformationUpdater({{ corpus.id }}, false);
-{% else %}
-var informationUpdater = new InformationUpdater({{ corpus.id }}, true);
-nopaque.socket.emit("foreign_user_data_stream_init", {{ corpus.user_id }});
-{% endif %}
-
-let corpusFilesList = new RessourceList("corpus-files", null, "CorpusFile");
-corpusFilesList._add({{ corpus_files|tojson|safe }});
-
-// Events to handle full corpus download
-let downloadBtn = document.querySelector('#corpus_create_zip');
-downloadBtn.addEventListener('click', () => {
-  nopaque.flash('Compressing your corpus', 'corpus')
-  nopaque.socket.emit('corpus_create_zip', {{ corpus.id }});
-  downloadBtn.classList.toggle('disabled', true);
-});
-document.addEventListener('DOMContentLoaded', () => {
-  nopaque.socket.on('corpus_zip_created', () => {
-    nopaque.flash('Downloading your corpus', 'corpus');
-    downloadBtn.classList.toggle('disabled', false);
-    // Little trick to call the download view after ziping has finished
-    let fakeBtn = document.createElement('a');
-    fakeBtn.href = '{{ url_for('corpora.export_corpus',
-                               corpus_id=corpus.id) }}';
-    fakeBtn.click();
-  });
-});
 </script>
 {% endblock scripts %}

web/app/templates/jobs/job.html.j2

@@ -2,112 +2,132 @@
 {% from '_colors.html.j2' import colors %}
 
 {% if job.service == 'file-setup' %}
-  {% set border_color = colors.file_setup_darken %}
+  {% set scheme_primary_color = colors.file_setup_darken %}
-  {% set main_class = 'file-setup-color lighten' %}
+  {% set scheme_secondary_color = colors.file_setup_lighten %}
-  {% set scheme_color = colors.file_setup_darken %}
 {% elif job.service == 'nlp' %}
-  {% set border_color = colors.nlp_darken %}
+  {% set scheme_primary_color = colors.nlp_darken %}
-  {% set main_class = 'nlp-color lighten' %}
+  {% set scheme_secondary_color = colors.nlp_lighten %}
-  {% set scheme_color = colors.nlp_darken %}
 {% elif job.service == 'ocr' %}
-  {% set border_color = colors.ocr_darken %}
+  {% set scheme_primary_color = colors.ocr_darken %}
-  {% set main_class = 'ocr-color lighten' %}
+  {% set scheme_secondary_color = colors.ocr_lighten %}
-  {% set scheme_color = colors.ocr_darken %}
 {% endif %}
+{% block main_attribs %} style="background-color: {{ scheme_secondary_color }};"{% endblock main_attribs %}
 
 {% block nav_content %}
 {% include 'jobs/_breadcrumbs.html.j2' %}
 {% endblock nav_content %}
 
-{% block main_attribs %} class="{{ main_class }}"{% endblock main_attribs %}
-
 {% block page_content %}
 <div class="container">
   <div class="row">
-    <div class="col s12">
+    <div class="col s12" data-job-id="{{ job.id }}" data-user-id="{{ job.creator.id }}" id="job-display">
-      <h1>[{{ job.service }}] {{ job.title }}</h1>
+      <div class="row">
-    </div>
+        <div class="col s8 m9 l10">
+          <h1 id="title">[<span class="job-service"></span>] <span class="job-title"></span></h1>
+        </div>
+        <div class="col s4 m3 l2 right-align">
+          <p>&nbsp;</p>
+          <p>&nbsp;</p>
+          <span class="chip status white-text"></span>
+          <div class="active preloader-wrapper small status-spinner">
+            <div class="spinner-layer spinner-blue-only">
+              <div class="circle-clipper left">
+                <div class="circle"></div>
+              </div>
+              <div class="gap-patch">
+                <div class="circle"></div>
+              </div>
+              <div class="circle-clipper right">
+                <div class="circle"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
-    <div class="col s12">
+      <div class="card" style="border-top: 10px solid {{ scheme_primary_color }}">
-      <div class="card" style="border-top: 10px solid {{border_color}}">
         <div class="card-content">
           <div class="row">
-            <div class="col s8 m9 l10">
-              <span class="card-title title">{{ job.title }}</span>
-            </div>
-
-            <div class="col s4 m3 l2 right-align">
-              <span class="chip status white-text"></span>
-              <div class="active preloader-wrapper small status-spinner" id="progress-indicator">
-                <div class="spinner-layer spinner-blue-only">
-                  <div class="circle-clipper left">
-                    <div class="circle"></div>
-                  </div>
-                  <div class="gap-patch">
-                    <div class="circle"></div>
-                  </div>
-                  <div class="circle-clipper right">
-                    <div class="circle"></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
             <div class="col s12">
-              <p class="description">{{ job.description }}</p>
-            </div>
-
-            <div class="col s12">&nbsp;</div>
-
-            <div class="col s12 m6">
               <div class="input-field">
-                <input disabled id="creation-date" type="text" value="{{ job.creation_date.strftime('%d/%m/%Y, %H:%M:%S %p') }}">
+                <input class="job-description" disabled id="job-description" type="text">
-                <label for="creation-date">Creation date</label>
+                <label for="job-description">Description</label>
               </div>
             </div>
 
             <div class="col s12 m6">
               <div class="input-field">
-                <input class="end-date" disabled id="end-date" type="text" value="">
+                <input class="job-creation-date" disabled id="job-creation-date" type="text">
-                <label for="end-date">End date</label>
+                <label for="job-creation-date">Creation date</label>
+              </div>
+            </div>
+
+            <div class="col s12 m6">
+              <div class="input-field">
+                <input class="job-end-date" disabled id="job-end-date" type="text">
+                <label for="job-end-date">End date</label>
               </div>
             </div>
 
             <div class="col s12 m4">
               <div class="input-field">
-                <input disabled id="service" type="text" value="{{ job.service }}">
+                <input class="job-service" disabled id="job-service" type="text">
-                <label for="service">Service</label>
+                <label for="job-service">Service</label>
               </div>
             </div>
 
             <div class="col s12 m4">
               <div class="input-field">
-                <input disabled id="service-args" type="text" value="{{ job.service_args|e }}">
+                <input class="job-service-args" disabled id="job-service-args" type="text">
-                <label for="service-args">Service arguments</label>
+                <label for="job-service-args">Service arguments</label>
               </div>
             </div>
 
             <div class="col s12 m4">
               <div class="input-field">
-                <input disabled id="service-version" type="text" value="{{ job.service_version }}">
+                <input class="job-service-version" disabled id="job-service-version" type="text">
-                <label for="service-version">Service version</label>
+                <label for="job-service-version">Service version</label>
               </div>
             </div>
           </div>
         </div>
         <div class="card-action right-align">
-          {% if current_user.is_administrator() and job.status == 'failed' %}
+          {% if current_user.is_administrator()  %}
-          <a href="{{ url_for('jobs.restart', job_id=job.id) }}" class="btn waves-effect waves-light"><i class="material-icons left">repeat</i>Restart</a>
+          <a class="btn hide modal-trigger restart-job-trigger waves-effect waves-light" data-target="restart-job-modal"><i class="material-icons left">repeat</i>Restart</a>
           {% endif %}
           <!-- <a href="#" class="btn disabled waves-effect waves-light"><i class="material-icons left">settings</i>Export Parameters</a> -->
-          <a data-target="delete-job-modal" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete</a>
+          <a class="btn modal-trigger red waves-effect waves-light" data-target="delete-job-modal"><i class="material-icons left">delete</i>Delete</a>
         </div>
       </div>
+
+      <div id="delete-job-modal" class="modal">
+        <div class="modal-content">
+          <h4>Confirm deletion</h4>
+          <p>Do you really want to delete the job <span class="job-title"></span>? All associated 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="{{ url_for('jobs.delete_job', job_id=job.id) }}"><i class="material-icons left">delete</i>Delete</a>
+        </div>
+      </div>
+
+      {% if current_user.is_administrator() %}
+      <div id="restart-job-modal" class="modal">
+        <div class="modal-content">
+          <h4>Confirm restart</h4>
+          <p>Do you really want to restart the job <span class="job-title"></span>? All log and result 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="{{ url_for('jobs.restart', job_id=job.id) }}"><i class="material-icons left">restart</i>Restart</a>
+        </div>
+      </div>
+      {% endif %}
     </div>
 
-    <div class="col s12">
+    <div class="col s12" id="job-inputs" data-job-id="{{ job.id }}" data-user-id="{{ job.creator.id }}">
       <div class="card">
-        <div class="card-content" id="inputs">
+        <div class="card-content">
           <div class="row">
             <div class="col s12 m2">
               <span class="card-title"><i class="left material-icons" style="font-size: inherit;">input</i>Inputs</span>
@@ -118,11 +138,10 @@
                 <thead>
                   <tr>
                     <th class="sort" data-sort="filename">Filename</th>
-                    <th>{# Actions #}</th>
+                    <th>Actions</th>
                   </tr>
                 </thead>
-                <tbody class="list">
+                <tbody class="list"></tbody>
-                </tbody>
               </table>
               <ul class="pagination"></ul>
             </div>
@@ -131,7 +150,7 @@
       </div>
     </div>
 
-    <div class="col s12">
+    <div class="col s12" id="job-results" data-job-id="{{ job.id }}" data-user-id="{{ job.creator.id }}">
       <div class="card">
         <div class="card-content">
           <div class="row">
@@ -143,24 +162,14 @@
               <table class="highlight responsive-table">
                 <thead>
                   <tr>
-                    <th>Result Type</th>
+                    <th>Description</th>
-                    <th>Archive Name</th>
+                    <th>Filename</th>
-                    <th>{# Actions #}</th>
+                    <th>Actions</th>
                   </tr>
                 </thead>
-                <tbody class="results">
+                <tbody class="list"></tbody>
-                  <tr class="show-if-only-child">
-                    <td colspan="3">
-                      <span class="card-title">
-                        <i class="left material-icons" style="font-size: inherit;">file_download</i>Nothing here...
-                      </span>
-                      <p>
-                        No results available (yet). Is the job already completed?
-                      </p>
-                    </td>
-                  </tr>
-                </tbody>
               </table>
+              <ul class="pagination"></ul>
             </div>
           </div>
         </div>
@@ -168,158 +177,14 @@
     </div>
   </div>
 </div>
-
-<!-- Modals -->
-<div id="delete-job-modal" class="modal">
-  <div class="modal-content">
-    <h4>Confirm deletion</h4>
-    <p>Do you really want to delete the job {{ job.title }}? All associated 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="{{ url_for('jobs.delete_job', job_id=job.id) }}"><i class="material-icons left">delete</i>Delete</a>
-  </div>
-</div>
 {% endblock page_content %}
 
 {% block scripts %}
 {{ super() }}
-<script type="module">
+<script>
-import {RessourceList} from '../../static/js/nopaque.lists.js';
+  nopaque.appClient.loadUser({{ job.creator.id }});
-class InformationUpdater {
+  let jobDisplay = new JobDisplay(document.querySelector('#job-display'));
-  constructor(jobId, foreignJobFlag) {
+  let jobInputList = new JobInputList(document.querySelector('#job-inputs'));
-    this.jobId = jobId;
+  let jobResultList = new JobResultList(document.querySelector('#job-results'));
-    this.foreignJobFlag = foreignJobFlag;
-
-    if (this.foreignJobFlag) {
-      nopaque.foreignJobsSubscribers.push(this);
-    } else {
-      nopaque.jobsSubscribers.push(this);
-    }
-  }
-
-  _init() {
-    let job;
-
-    job = (this.foreignJobFlag ? nopaque.foreignUser.jobs[this.jobId]
-                               : nopaque.user.jobs[this.jobId]);
-    // Results
-    this.addResults(job.results);
-    // End date
-    this.setEndDate(job.end_date);
-    // Status
-    this.setStatus(job.status);
-  }
-
-  _update(patch) {
-    let pathArray;
-
-    for (let operation of patch) {
-      /* "/jobs/{jobId}/..." -> ["{jobId}", ...] */
-      pathArray = operation.path.split("/").slice(2);
-      if (pathArray[0] != this.jobId) {continue;}
-      switch(operation.op) {
-        case "add":
-          if (pathArray[1] === "results") {
-            this.addResults([operation.value]);
-          }
-          break;
-        case "delete":
-          location.reload();
-          break;
-        case "replace":
-          if (pathArray[1] === "end_date") {
-            this.setEndDate(operation.value);
-          } else if (pathArray[1] === "status") {
-            this.setStatus(operation.value);
-          }
-          break;
-        default:
-          break;
-      }
-    }
-  }
-
-  addResults(results) {
-    let resultsArray, resultsElements, resultsHTML, resultType;
-    resultsArray = Object.values(results);
-    resultsArray.sort(function (a, b) {
-      if (a.filename < b.filename) {return -1;}
-      if (a.filename > b.filename) {return 1;}
-      return 0;
-    });
-    resultsHTML = ``;
-    for (let result of resultsArray) {
-      if (result.filename.endsWith(".pdf.zip")) {
-        resultType = "PDF file with text layer";
-      } else if (result.filename.endsWith(".txt.zip")) {
-        resultType = "Raw text files";
-      } else if (result.filename.endsWith(".vrt.zip")) {
-        resultType = "VRT(XML dialect) files holding the NLP data";
-      } else if (result.filename.endsWith(".xml.zip")) {
-        resultType = "XML files";
-      } else if (result.filename.endsWith(".poco.zip")) {
-        resultType = "HCOR und image files needed for Post correction(PoCo)";
-      } else {
-        resultType = "All result files created during this job";
-      }
-      resultsHTML += `
-                      <tr>
-                        <td>${resultType}</td>
-                        <td>${result.filename}</td>
-                        <td class="right-align">
-                          <a class="btn-floating tooltipped waves-effect waves-light"
-                             download href="/jobs/${result.job_id}/results/${result.id}/download"
-                             data-position="top"
-                             data-tooltip="Download">
-                            <i class="material-icons">file_download</i>
-                          </a>
-                        </td>
-                      </tr>
-                     `;
-    };
-    resultsHTML += `
-                    </tbody>
-                    </table>
-                   `;
-    resultsElements = document.querySelectorAll(".results");
-    for (let resultsElement of resultsElements) {
-      resultsElement.innerHTML += resultsHTML;
-    }
-  }
-
-  setEndDate(timestamp) {
-    let endDate;
-
-    if (timestamp === null) {
-      endDate = "N.a.";
-    } else {
-      endDate = new Date(timestamp * 1000).toLocaleString("en-US");
-    }
-    document.getElementById("end-date").value = endDate;
-    M.updateTextFields();
-  }
-
-  setStatus(status) {
-    let progressIndicator, statusElements;
-    if (status === "complete" || status === "failed") {
-      progressIndicator = document.getElementById("progress-indicator");
-      progressIndicator.classList.add("hide");
-    }
-    statusElements = document.querySelectorAll(".status");
-    for (let statusElement of statusElements) {
-      statusElement.dataset.status = status;
-    }
-  }
-}
-
-{% if job.creator == current_user %}
-var informationUpdater = new InformationUpdater({{ job.id }}, false);
-{% else %}
-var informationUpdater = new InformationUpdater({{ job.id }}, true);
-nopaque.socket.emit("foreign_user_data_stream_init", {{ job.user_id }});
-{% endif %}
-let jobInputsList = new RessourceList("inputs", null, "JobInput");
-jobInputsList._add({{ job_inputs|tojson|safe }});
 </script>
 {% endblock scripts %}

web/app/templates/nopaque.html.j2

@@ -252,9 +252,10 @@
 {% 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/socket.io.min.js') }}"></script>
-<script src="{{ url_for('static', filename='js/nopaque.js') }}"></script>
+<script src="{{ url_for('static', filename='js/nopaque/index.js') }}"></script>
-<script src="{{ url_for('static', filename='js/nopaque.lists.js') }}"></script>
+<script src="{{ url_for('static', filename='js/nopaque/RessourceDisplays.js') }}"></script>
+<script src="{{ url_for('static', filename='js/nopaque/RessorceLists.js') }}"></script>
 <script>
   // Disable all option elements with no value
   for (let optionElement of document.querySelectorAll('option[value=""]')) {optionElement.disabled = true;}

web/requirements.txt

@@ -1,5 +1,4 @@
 cqi
-dnspython==1.16.0
 docker
 eventlet
 Flask
@@ -7,7 +6,7 @@ Flask-Login
 Flask-Mail
 Flask-Migrate
 Flask-Paranoid
-Flask-SocketIO
+Flask-SocketIO~=5.0.0
 Flask-SQLAlchemy
 Flask-WTF
 jsonpatch