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

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);}
  }
}