Changement de style de la page des
stats résumées
This commit is contained in:
Sébastien André
@@ -13,149 +13,106 @@
|
||||
<span>: {{ lastJump }}</span>
|
||||
</div>
|
||||
|
||||
<div style="clear: both; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 15px;">
|
||||
<label (click)="showStats(1)" [ngClass]="statsToShow(1) ? 'labelTab selected': 'labelTab'">Jumps in the last
|
||||
month</label>
|
||||
<label (click)="showStats(2)" [ngClass]="statsToShow(2) ? 'labelTab selected': 'labelTab'">Jumps in the last
|
||||
year</label>
|
||||
<label (click)="showStats(3)" [ngClass]="statsToShow(3) ? 'labelTab selected': 'labelTab'">By DZ</label>
|
||||
<label (click)="showStats(4)" [ngClass]="statsToShow(4) ? 'labelTab selected': 'labelTab'">By aircraft</label>
|
||||
<label (click)="showStats(5)" [ngClass]="statsToShow(5) ? 'labelTab selected': 'labelTab'">By gear</label>
|
||||
<label (click)="showStats(6)" [ngClass]="statsToShow(6) ? 'labelTab selected': 'labelTab'">By jump type</label>
|
||||
<label (click)="showStats(7)" [ngClass]="statsToShow(7) ? 'labelTab selected': 'labelTab'">By year</label>
|
||||
</div>
|
||||
<mat-tab-group mat-align-tabs="left" animationDuration="0ms">
|
||||
<mat-tab label="Jumps in the last month">
|
||||
<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>
|
||||
</mat-tab>
|
||||
|
||||
<div *ngIf="statsToShow(1)">
|
||||
<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>
|
||||
<mat-tab label="Jumps in the last year">
|
||||
<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>
|
||||
</mat-tab>
|
||||
|
||||
<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>
|
||||
<mat-tab label="By DZ">
|
||||
<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>
|
||||
</mat-tab>
|
||||
|
||||
<div *ngIf="statsToShow(2)">
|
||||
<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>
|
||||
<mat-tab label="By aircraft">
|
||||
<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>
|
||||
</mat-tab>
|
||||
|
||||
<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>
|
||||
<mat-tab label="By gear">
|
||||
<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>
|
||||
</mat-tab>
|
||||
|
||||
<div *ngIf="statsToShow(3)">
|
||||
<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>
|
||||
<mat-tab label="By jump type">
|
||||
<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>
|
||||
</mat-tab>
|
||||
|
||||
<div *ngIf="statsToShow(4)">
|
||||
<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 *ngIf="statsToShow(5)">
|
||||
<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 *ngIf="statsToShow(6)">
|
||||
<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 *ngIf="statsToShow(7)">
|
||||
<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>
|
||||
<mat-tab label="By year">
|
||||
<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>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
Reference in New Issue
Block a user