pigallery2/src/frontend/app/ui/settings/jobs/progress/job-progress.settings.component.html

<div class="row clickable" *ngIf="!IsRunning"
     (click)="openModal(template)">
  <div class="col-md-2 col-12" i18n>
    Last run:
  </div>
  <div class="col-md-4 col-12" title="Run between" i18n-title>
    <span class="oi oi-clock" aria-hidden="true"></span>
    {{progress.time.start | date:'medium'}} -  {{progress.time.end | date:'mediumTime'}}
  </div>
  <div class="col-md-3 col-6" title="processed+skipped/all" i18n-title>
    <span class="oi oi-check" aria-hidden="true"></span>
    {{progress.steps.processed}}+{{progress.steps.skipped}}/{{progress.steps.all}}
  </div>
  <div class="col-md-3 col-6" title="Status" i18n-title>
    <span class="oi oi-pulse" aria-hidden="true"></span>
    {{JobProgressStates[progress.state]}}
  </div>
</div>
<div *ngIf="IsRunning" class="clickable" (click)="openModal(template)">

  <div class="form-group row">
    <div class="col-md-12">
      <input
        *ngIf="progress.state === JobProgressStates.running" type="text" class="form-control" disabled
        [ngModel]="progress.logs[progress.logs.length-1].comment" name="details">
      <input
        *ngIf="progress.state === JobProgressStates.cancelling" type="text" class="form-control" disabled
        value="Cancelling: {{progress.logs[progress.logs.length-1].comment}}"
        i18n-value name="details">
    </div>
  </div>


  <div class="form-group row progress-row ">
    <div class="col-6 col-md-2 col-lg-1 text-md-right order-md-0" title="time elapsed"
         i18n-title>{{TimeElapsed| duration:':'}}</div>
    <div class="col-6 col-md-2 col-lg-1 order-md-2 text-right text-md-left" title="time left"
         i18n-title>{{TimeAll| duration:':'}}</div>
    <div class="progress col-md-8 col-lg-10 order-md-1"
         title="processed:{{progress.steps.processed}}+ skipped:{{progress.steps.skipped}} / all:{{progress.steps.all}}">
      <div
        *ngIf="progress.steps.all >0"
        class="progress-bar clickable d-inline-block progress-bar-success {{progress.state === JobProgressStates.cancelling ? 'bg-secondary' : ''}}"
        role="progressbar"
        aria-valuenow="2"
        aria-valuemin="0"
        aria-valuemax="100"
        style="min-width: 2em;"
        [style.width.%]="((progress.steps.processed+progress.steps.skipped)/progress.steps.all)*100">
        {{progress.steps.processed}}+{{progress.steps.skipped}}/{{progress.steps.all}}
      </div>
      <div
        *ngIf="progress.steps.all === 0"
        class="progress-bar d-inline-block progress-bar-success  progress-bar-striped progress-bar-animated  {{progress.state === JobProgressStates.cancelling ? 'bg-secondary' : ''}}"
        role="progressbar" aria-valuenow="100"
        aria-valuemin="0" aria-valuemax="100" style="width: 100%">
      </div>
    </div>
  </div>
</div>


<!-- Modal -->
<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">{{Name}}</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="row">
      <div class="col-sm-4">Processed: {{progress.steps.processed}}</div>
      <div class="col-sm-4">Skipped: {{progress.steps.skipped}}</div>
      <div class="col-sm-4">All: {{progress.steps.all}}</div>
    </div>
    <div class="row  mt-3 mb-3">
      <div class="progress col-12">
        <div
          *ngIf="progress.steps.all >0"
          class="progress-bar clickable d-inline-block progress-bar-success {{progress.state !== JobProgressStates.running ? 'bg-secondary' : ''}}"
          role="progressbar"
          aria-valuenow="2"
          aria-valuemin="0"
          aria-valuemax="100"
          style="min-width: 2em;"
          [style.width.%]="((progress.steps.processed+progress.steps.skipped)/progress.steps.all)*100">
          {{((progress.steps.processed + progress.steps.skipped) / progress.steps.all) * 100 | number:'1.1-2'}}%
        </div>
        <div
          *ngIf="progress.steps.all === 0"
          class="progress-bar d-inline-block progress-bar-success  progress-bar-striped progress-bar-animated  {{progress.state !== JobProgressStates.running ? 'bg-secondary' : ''}}"
          role="progressbar" aria-valuenow="100"
          aria-valuemin="0" aria-valuemax="100" style="width: 100%">
        </div>
      </div>
    </div>
    <div class="card bg-light">
      <div class="card-header" i18n>
        Logs
      </div>
      <div class="card-body text-secondary">
        <ng-container *ngFor="let log of progress.logs; let i = index;">
          <p class="card-text" *ngIf="(i==0 && log.id > 0) || ( i> 0 && progress.logs[i-1].id+1!=log.id)">
            ...
          </p>
          <p class="card-text">
            #{{log.id}} [{{log.timestamp | date:'medium'}}] {{log.comment}}
          </p>
        </ng-container>
      </div>
    </div>
  </div>
</ng-template>