SkydiveLogs/Front/skydivelogs-app/src/app/summary/summary.component.html

<!-- <div *ngIf="allDatasLoaded() else loading"> -->

<div>
  <label>Total jumps</label>
  Total Total
</div>

<div class="paragraph">
  <label>Total cutaways</label>
</div>

<div class="paragraph">
  <label>Last jump</label>
  Date and location
</div>

<mat-tab-group mat-stretch-tabs>
  <mat-tab label="Jumps in the last month">
    <table mat-table [dataSource]="dsJumpForLastMonthByDz"
      *ngIf="dsJumpForLastMonthByDz != null else loadingDsJumpForLastMonthByDz">
      <ng-container matColumnDef="label">
        <td mat-cell *matCellDef="let element">{{element.label}}</td>
      </ng-container>
      <ng-container matColumnDef="nb">
        <td mat-cell *matCellDef="let element">{{element.nb}}</td>
      </ng-container>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <ng-template #loadingDsJumpForLastMonthByDz>
      <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
    </ng-template>

    <table mat-table [dataSource]="dsJumpForLastMonthByJumpType"
      *ngIf="dsJumpForLastMonthByJumpType != null else loadingDsJumpForLastMonthByJumpType">
      <ng-container matColumnDef="label">
        <td mat-cell *matCellDef="let element">{{element.label}}</td>
      </ng-container>
      <ng-container matColumnDef="nb">
        <td mat-cell *matCellDef="let element">{{element.nb}}</td>
      </ng-container>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <ng-template #loadingDsJumpForLastMonthByJumpType>
      <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
    </ng-template>
  </mat-tab>

  <mat-tab label="Jumps in the last year">
    <table mat-table [dataSource]="dsJumpForLastYearByDz"
      *ngIf="dsJumpForLastYearByDz != null else loadingDsJumpForLastYearByDz">
      <ng-container matColumnDef="label">
        <td mat-cell *matCellDef="let element">{{element.label}}</td>
      </ng-container>
      <ng-container matColumnDef="nb">
        <td mat-cell *matCellDef="let element">{{element.nb}}</td>
      </ng-container>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <ng-template #loadingDsJumpForLastYearByDz>
      <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
    </ng-template>

    <table mat-table [dataSource]="dsJumpForLastYearByJumpType"
      *ngIf="dsJumpForLastYearByJumpType != null else loadingDsJumpForLastYearByJumpType">
      <ng-container matColumnDef="label">
        <td mat-cell *matCellDef="let element">{{element.label}}</td>
      </ng-container>
      <ng-container matColumnDef="nb">
        <td mat-cell *matCellDef="let element">{{element.nb}}</td>
      </ng-container>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <ng-template #loadingDsJumpForLastYearByJumpType>
      <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
    </ng-template>
  </mat-tab>

  <mat-tab label="By DZ">
    <table mat-table [dataSource]="dsNbJumpByDz" *ngIf="dsNbJumpByDz != null else loadingDsNbJumpByDz">
      <ng-container matColumnDef="label">
        <td mat-cell *matCellDef="let element">{{element.label}}</td>
      </ng-container>
      <ng-container matColumnDef="nb">
        <td mat-cell *matCellDef="let element">{{element.nb}}</td>
      </ng-container>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <ng-template #loadingDsNbJumpByDz>
      <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
    </ng-template>
  </mat-tab>

  <mat-tab label="By aircraft">
    <table mat-table [dataSource]="dsNbJumpByAircraft"
      *ngIf="dsNbJumpByAircraft != null else loadingDsNbJumpByAircraft">
      <ng-container matColumnDef="label">
        <td mat-cell *matCellDef="let element">{{element.label}}</td>
      </ng-container>
      <ng-container matColumnDef="nb">
        <td mat-cell *matCellDef="let element">{{element.nb}}</td>
      </ng-container>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <ng-template #loadingDsNbJumpByAircraft>
      <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
    </ng-template>
  </mat-tab>

  <mat-tab label="By gear">
    <table mat-table [dataSource]="dsNbJumpByGear" *ngIf="dsNbJumpByGear != null else loadingDsNbJumpByGear">
      <ng-container matColumnDef="label">
        <td mat-cell *matCellDef="let element">{{element.label}}</td>
      </ng-container>
      <ng-container matColumnDef="nb">
        <td mat-cell *matCellDef="let element">{{element.nb}}</td>
      </ng-container>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <ng-template #loadingDsNbJumpByGear>
      <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
    </ng-template>
  </mat-tab>

  <mat-tab label="By jump type">
    <table mat-table [dataSource]="dsNbJumpByType" *ngIf="dsNbJumpByType != null else loadingDsNbJumpByType">
      <ng-container matColumnDef="label">
        <td mat-cell *matCellDef="let element">{{element.label}}</td>
      </ng-container>
      <ng-container matColumnDef="nb">
        <td mat-cell *matCellDef="let element">{{element.nb}}</td>
      </ng-container>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <ng-template #loadingDsNbJumpByType>
      <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
    </ng-template>
  </mat-tab>

  <mat-tab label="By year">
    <table mat-table [dataSource]="dsNbJumpByYear" *ngIf="dsNbJumpByYear != null else loadingDsNbJumpByYear">
      <ng-container matColumnDef="label">
        <td mat-cell *matCellDef="let element">{{element.label}}</td>
      </ng-container>
      <ng-container matColumnDef="nb">
        <td mat-cell *matCellDef="let element">{{element.nb}}</td>
      </ng-container>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <ng-template #loadingDsNbJumpByYear>
      <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
    </ng-template>
  </mat-tab>
</mat-tab-group>