Change js structure for displays

app/static/js/resource-displays/corpus-display.js

@@ -0,0 +1,105 @@
+ResourceDisplays.CorpusDisplay = class CorpusDisplay extends ResourceDisplays.BaseDisplay {
+  constructor(displayElement) {
+    super(displayElement);
+    this.corpusId = displayElement.dataset.corpusId;
+    this.displayElement
+      .querySelector('.action-button[data-action="build-request"]')
+      .addEventListener('click', (event) => {
+        requests.corpora.entity.build(this.corpusId);
+      });
+  }
+
+  init(user) {
+    let corpus = user.corpora[this.corpusId];
+    this.setCreationDate(corpus.creation_date);
+    this.setDescription(corpus.description);
+    this.setStatus(corpus.status);
+    this.setTitle(corpus.title);
+    this.setNumTokens(corpus.num_tokens);
+  }
+
+  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 'remove': {
+          let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}$`);
+          if (re.test(operation.path)) {
+            window.location.href = '/dashboard#corpora';
+          }
+          break;
+        }
+        case 'replace': {
+          re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/num_tokens`);
+          if (re.test(operation.path)) {
+            this.setNumTokens(operation.value);
+            break;
+          }
+          re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/status$`);
+          if (re.test(operation.path)) {
+            this.setStatus(operation.value);
+            break;
+          }
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+    }
+  }
+
+  setTitle(title) {
+    this.setElements(this.displayElement.querySelectorAll('.corpus-title'), title);
+  }
+
+  setNumTokens(numTokens) {
+    this.setElements(
+      this.displayElement.querySelectorAll('.corpus-token-ratio'),
+      `${numTokens}/${app.data.users[this.userId].corpora[this.corpusId].max_num_tokens}`
+    );
+  }
+
+  setDescription(description) {
+    this.setElements(this.displayElement.querySelectorAll('.corpus-description'), description);
+  }
+
+  setStatus(status) {
+    let elements = this.displayElement.querySelectorAll('.action-button[data-action="analyze"]');
+    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('.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 (let element of elements) {
+      element.dataset.status = status;
+    }
+    elements = this.displayElement.querySelectorAll('.corpus-status-spinner');
+    for (let element of elements) {
+      if (['SUBMITTED', 'QUEUED', 'BUILDING', 'STARTING_ANALYSIS_SESSION', 'CANCELING_ANALYSIS_SESSION'].includes(status)) {
+        element.classList.remove('hide');
+      } else {
+        element.classList.add('hide');
+      }
+    }
+  }
+
+  setCreationDate(creationDate) {
+    this.setElements(
+      this.displayElement.querySelectorAll('.corpus-creation-date'),
+      new Date(creationDate).toLocaleString("en-US")
+    );
+  }
+}

app/static/js/resource-displays/index.js

@@ -0,0 +1,46 @@
+var ResourceDisplays = {};
+
+ResourceDisplays.BaseDisplay = class BaseDisplay {
+  constructor(displayElement) {
+    this.displayElement = displayElement;
+    this.userId = this.displayElement.dataset.userId;
+    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';}
+
+  onPatch(patch) {throw 'Not implemented';}
+
+  setElement(element, value) {
+    switch (element.tagName) {
+      case 'INPUT': {
+        element.value = value;
+        M.updateTextFields();
+        break;
+      }
+      default: {
+        element.innerText = value;
+        break;
+      }
+    }
+  }
+
+  setElements(elements, value) {
+    for (let element of elements) {
+      this.setElement(element, value);
+    }
+  }
+};

app/static/js/resource-displays/job-display.js

@@ -0,0 +1,126 @@
+ResourceDisplays.JobDisplay = class JobDisplay extends ResourceDisplays.BaseDisplay {
+  constructor(displayElement) {
+    super(displayElement);
+    this.jobId = this.displayElement.dataset.jobId;
+  }
+
+  init(user) {
+    let job = user.jobs[this.jobId];
+    this.setCreationDate(job.creation_date);
+    this.setEndDate(job.creation_date);
+    this.setDescription(job.description);
+    this.setService(job.service);
+    this.setServiceArgs(job.service_args);
+    this.setServiceVersion(job.service_version);
+    this.setStatus(job.status);
+    this.setTitle(job.title);
+  }
+
+  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 '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;
+          }
+          re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/status$`);
+          if (re.test(operation.path)) {
+            this.setStatus(operation.value);
+            break;
+          }
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+    }
+  }
+
+  setTitle(title) {
+    this.setElements(this.displayElement.querySelectorAll('.job-title'), title);
+  }
+
+  setDescription(description) {
+    this.setElements(this.displayElement.querySelectorAll('.job-description'), description);
+  }
+
+  setStatus(status) {
+    let elements = this.displayElement.querySelectorAll('.job-status');
+    for (let element of elements) {
+      element.dataset.status = status;
+    }
+    elements = this.displayElement.querySelectorAll('.job-status-spinner');
+    for (let element of elements) {
+      if (['COMPLETED', 'FAILED'].includes(status)) {
+        element.classList.add('hide');
+      } else {
+        element.classList.remove('hide');
+      }
+    }
+    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) {
+    this.setElements(
+      this.displayElement.querySelectorAll('.job-creation-date'),
+      new Date(creationDate).toLocaleString('en-US')
+    );
+  }
+
+  setEndDate(endDate) {
+    this.setElements(
+      this.displayElement.querySelectorAll('.job-end-date'),
+      new Date(endDate).toLocaleString('en-US')
+    );
+  }
+
+  setService(service) {
+    this.setElements(this.displayElement.querySelectorAll('.job-service'), service);
+  }
+
+  setServiceArgs(serviceArgs) {
+    this.setElements(
+      this.displayElement.querySelectorAll('.job-service-args'),
+      JSON.stringify(serviceArgs)
+    );
+  }
+
+  setServiceVersion(serviceVersion) {
+    this.setElements(this.displayElement.querySelectorAll('.job-service-version'), serviceVersion);
+  }
+}