async domInit()

in source/webapp/src/lib/js/imageCard.js [352:425]

• 69 lines of code
• 7 McCabe index (conditional complexity)

  async domInit(badge = false) {
    if (this.domInitialized()) {
      return;
    }
    const image = this.getProxyByBaseName(this.basename);
    const original = await ImageCard.fileExists(SO0050.Ingest.Bucket, this.key);
    const proxy = (image || {}).key && await ImageCard.fileExists(SO0050.Proxy.Bucket, image.key);
    const imageUrl = this.getSignedThumbnail();

    const actions = [];
    if (!original) {
      actions.push('not-found');
    } else if (!proxy) {
      actions.push('restore');
    } else {
      actions.push('preview');
      if (!this.hasAnalyzed()) {
        actions.push('metadata');
      }
    }

    const dom = `
    <div class="col-sm-4 mt-4">
      <div class="card" id="card-${this.uuid}">
        <!-- loading icon -->
        <div
          id="indicator-${this.uuid}"
          class="spinner-grow text-light indicator collapse"
          style="animation: spinner-grow 1.2s linear infinite;"
          role="status">
          <span class="sr-only">Loading...</span>
        </div>

        <div class="overlay-container">
          <img
            class="card-img-top"
            src="${imageUrl}"
            alt="thumbnail"
            style="max-height: 200px; object-fit: contain; background-color: rgb(0,0,0);"
          >
          <div class="state-status-overlay mb-2 small pl-2 pr-2">
            ${this.domCreateIngestOverlayStatus()}
            ${this.domCreateAnalysisOverlayStatus()}
            ${this.domCreateLabelingOverlayStatus()}
          </div>
          ${this.domCreateOverlayActions(actions)}
        </div>
        <div class="card-body small">
          <h6 class="card-title text-truncate lead">${this.basename}</h6>
          <dl class="row small">
            <dt class="col-sm-3 text-truncate">Name</dt><dd class="col-sm-9 text-truncate" data-field="name">${this.basename}</dd>
            <dt class="col-sm-3 text-truncate">ID</dt><dd class="col-sm-9 text-truncate" data-field="uuid">${this.uuid}</dd>
            <dt class="col-sm-3 text-truncate">LastModified</dt><dd class="col-sm-9 text-truncate" data-field="ingestDate">${this.lastModifiedISOFormat || '--'}</dd>
          </dl>
          <div class="float-right">
            <a href="#" class="overlay-action">
              <i class="far fa-trash-alt fa-lg" style="color: #111"
                alt="Remove asset"
                data-action="remove"
                data-toggle="tooltip"
                data-placement="bottom"
                title="Remove asset and delete database records">
              </i>
            </a>
          </div>
        </div>
      </div>
    </div>
    `;

    this.element = $(dom);

    await this.domRegisterEvents();
  }