Ajout d'un loading pour chaque catégorie
des stats
This commit is contained in:
Sébastien André
@@ -1,137 +1,157 @@
|
|||||||
<div *ngIf="allDatasLoaded() else loading">
|
<!-- <div *ngIf="allDatasLoaded() else loading"> -->
|
||||||
<div>
|
|
||||||
<label>Total jumps</label>
|
|
||||||
Total Total
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paragraph">
|
<div>
|
||||||
<label>Total cutaways</label>
|
<label>Total jumps</label>
|
||||||
</div>
|
Total Total
|
||||||
|
|
||||||
<div class="paragraph">
|
|
||||||
<label>Last jump</label>
|
|
||||||
Date and location
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paragraph">
|
|
||||||
<label>Jumps in the last month</label>
|
|
||||||
<table mat-table [dataSource]="dsJumpForLastMonthByDz">
|
|
||||||
<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>
|
|
||||||
<table mat-table [dataSource]="dsJumpForLastMonthByJumpType">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paragraph">
|
|
||||||
<label>Jumps in the last year</label>
|
|
||||||
<table mat-table [dataSource]="dsJumpForLastYearByDz">
|
|
||||||
<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>
|
|
||||||
<table mat-table [dataSource]="dsJumpForLastYearByJumpType">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paragraph">
|
|
||||||
<label>By DZ</label>
|
|
||||||
<table mat-table [dataSource]="dsNbJumpByDz">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paragraph">
|
|
||||||
<label>By aircraft</label>
|
|
||||||
<table mat-table [dataSource]="dsNbJumpByAircraft">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paragraph">
|
|
||||||
<label>By gear</label>
|
|
||||||
<table mat-table [dataSource]="dsNbJumpByGear">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paragraph">
|
|
||||||
<label>By jump type</label>
|
|
||||||
<table mat-table [dataSource]="dsNbJumpByType">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paragraph">
|
|
||||||
<label>By year</label>
|
|
||||||
<table mat-table [dataSource]="dsNbJumpByYear">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ng-template #loading>
|
<div class="paragraph">
|
||||||
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
|
<label>Total cutaways</label>
|
||||||
</ng-template>
|
</div>
|
||||||
|
|
||||||
|
<div class="paragraph">
|
||||||
|
<label>Last jump</label>
|
||||||
|
Date and location
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="paragraph">
|
||||||
|
<label>Jumps in the last month</label>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="paragraph">
|
||||||
|
<label>Jumps in the last year</label>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="paragraph">
|
||||||
|
<label>By DZ</label>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="paragraph">
|
||||||
|
<label>By aircraft</label>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="paragraph">
|
||||||
|
<label>By gear</label>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="paragraph">
|
||||||
|
<label>By jump type</label>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="paragraph">
|
||||||
|
<label>By year</label>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user