analysis-window.component.html

<div *ngIf="token">
  <div class="card analysis" *ngIf="task && task.info.done">
    <header class="card-header">
      <p class="card-header-title">
        <span class="icon">
          <i class="fas fa-flask" aria-hidden="true"></i>
        </span>
        Analysis Results
      </p>
      <a (click)="close()" class="card-header-icon" aria-label="close">
        <span class="icon">
          <i class="fas fa-times" aria-hidden="true"></i>
        </span>
      </a>
    </header>

    <div class="card-content">
      <div class="content">
        <div class="card-image">
          <div class="network center" #network>
            <button class="button is-loading center">Loading</button>
          </div>
        </div>
        <footer class="card-footer toolbar">
          <div class="field has-addons">
            <p class="control">
              <button class="button is-rounded is-success is-rounded" [disabled]="true">
            <span class="icon">
              <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
            </span>
                <span>
              Export Results
            </span>
              </button>
            </p>
            <p class="control">
              <button class="button is-primary is-rounded" [disabled]="true">
            <span class="icon">
              <i class="fas fa-camera" aria-hidden="true"></i>
            </span>
                <span>
              Screenshot
            </span>
              </button>
            </p>
            <p class="control">
              <button class="button is-danger is-rounded" (click)="analysis.removeTask(token)">
            <span class="icon">
              <i class="fas fa-trash" aria-hidden="true"></i>
            </span>
                <span>
              Delete Analysis
            </span>
              </button>
            </p>
          </div>
          <div class="field has-addons footer-toggle-buttons">
            <p class="control">
              <button class="button is-rounded" [class.is-primary]="showDrugs" (click)="toggleDrugs(true)">
                <span class="icon is-small">
                  <i class="fas fa-capsules"></i>
                </span>
                <span>Drugs On</span>
              </button>
            </p>
            <p class="control">
              <button class="button is-rounded" [class.is-primary]="!showDrugs" (click)="toggleDrugs(false)">
                <span>Off</span>
              </button>
            </p>
          </div>
        </footer>
      </div>
    </div>

    <div class="card analysis" *ngIf="task && !task.info.startedAt">
      <header class="card-header">
        <p class="card-header-title">
        <span class="icon">
          <i class="fas fa-cog" aria-hidden="true"></i>
        </span>
          Analysis Queued...
        </p>
        <a (click)="close()" class="card-header-icon" aria-label="close">
        <span class="icon">
          <i class="fas fa-times" aria-hidden="true"></i>
        </span>
        </a>
      </header>
      <div class="card-content">
        <div class="content">
          The analysis is queued
          <!--TODO: Display queue information-->
        </div>
      </div>
      <footer class="card-footer">
      </footer>
    </div>

    <div class="card analysis" *ngIf="task && task.info.startedAt && !task.info.done">
      <header class="card-header">
        <p class="card-header-title">
        <span class="icon">
          <i class="fas fa-cog fa-spin" aria-hidden="true"></i>
        </span>
          Analysis in Progress...
        </p>
        <a (click)="close()" class="card-header-icon" aria-label="close">
        <span class="icon">
          <i class="fas fa-times" aria-hidden="true"></i>
        </span>
        </a>
      </header>
      <div class="card-content">
        <div class="content">
          The analysis is in progress
          <!--TODO: Display analysis progress-->
        </div>
      </div>
      <footer class="card-footer">
      </footer>
    </div>

    <div class="card analysis" *ngIf="!task">
      <header class="card-header">
        <p class="card-header-title">
        <span class="icon">
          <i class="fas fa-question" aria-hidden="true"></i>
        </span>
          Analysis not found
        </p>
        <a (click)="close()" class="card-header-icon" aria-label="more options">
        <span class="icon">
          <i class="fas fa-times" aria-hidden="true"></i>
        </span>
        </a>
      </header>
      <div class="card-content">
        <div class="content">
        <span class="notification is-danger">
          The analysis you were looking for is either gone or never existed.
        </span>
        </div>
      </div>
      <footer class="card-footer">
      </footer>
    </div>
  </div>
</div>