task-list.component.html

<div class="content">
  <div class="list is-hoverable">
    <a *ngFor="let task of analysis.tasks" class="list-item" [class.is-active]="task.token === token">
      <div *ngIf="!task.info.startedAt" (click)="open(task.token)">
        <p>
          <span class="is-capitalized"><i class="fa" [class.fa-capsules]="task.info.target === 'drug'" [class.fa-crosshairs]="task.info.target === 'drug-target'"></i> {{task.info.algorithm}}</span>
          <span class="icon is-pulled-right"><i class="fas fa-pause" aria-hidden="true"></i></span>
        </p>
        <p>
          <small>Queue position: {{task.stats.queuePosition}}/{{task.stats.queueLength}}</small>
        </p>
      </div>
      <div *ngIf="!task.info.done && !task.info.failed && task.info.startedAt" (click)="open(task.token)">
        <p>
          <span class="is-capitalized"><i class="fa" [class.fa-capsules]="task.info.target === 'drug'" [class.fa-crosshairs]="task.info.target === 'drug-target'"></i> {{task.info.algorithm}}</span>
          <span class="icon is-pulled-right"><i class="fas fa-spinner fa-spin" aria-hidden="true"></i></span>
        </p>
        <p>
          <small>Started {{task.info.startedAt | date :'short'}}</small>
        </p>
        <progress class="progress is-success" [value]="task.info.progress * 100" max="100">Test</progress>

      </div>
      <div *ngIf="task.info.done" (click)="open(task.token)">
        <p>
          <span class="is-capitalized"><i class="fa" [class.fa-capsules]="task.info.target === 'drug'" [class.fa-crosshairs]="task.info.target === 'drug-target'"></i> {{task.info.algorithm}}</span>
          <span class="icon is-pulled-right"><i class="fas fa-check" aria-hidden="true"></i></span>
        </p>
        <p>
          <small>Finished {{task.info.finishedAt | date :'short'}}</small>
        </p>
      </div>
      <div *ngIf="task.info.failed && task.info.finishedAt == null">
        <p>
          <span class="is-capitalized"><i class="fa" [class.fa-capsules]="task.info.target === 'drug'" [class.fa-crosshairs]="task.info.target === 'drug-target'"></i> {{task.info.algorithm}}</span>
          <span class="icon is-pulled-right"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i></span>
        </p>
        <p class="has-text-danger">
          <small>{{task.info.status}}</small>
        </p>
      </div>
    </a>
  </div>
</div>