From 598545c9d2dc2985044758a1e1c3e6a04668a375 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?=
 <Sebastien.ANDRE@external.loccitane.com>
Date: Mon, 17 Feb 2020 14:19:01 +0100
Subject: [PATCH] =?UTF-8?q?Ajout=20d'un=20loading=20pour=20chaque=20cat?=
 =?UTF-8?q?=C3=A9gorie=20des=20stats?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/summary/summary.component.html    | 288 ++++++++++--------
 1 file changed, 154 insertions(+), 134 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/summary/summary.component.html b/Front/skydivelogs-app/src/app/summary/summary.component.html
index fdfddcb..c6b1afe 100644
--- a/Front/skydivelogs-app/src/app/summary/summary.component.html
+++ b/Front/skydivelogs-app/src/app/summary/summary.component.html
@@ -1,137 +1,157 @@
-<div *ngIf="allDatasLoaded() else loading">
-  <div>
-    <label>Total jumps</label>
-    Total Total
-  </div>
+<!-- <div *ngIf="allDatasLoaded() else loading"> -->
 
-  <div class="paragraph">
-    <label>Total cutaways</label>
-  </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">
-      <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>
+  <label>Total jumps</label>
+  Total Total
 </div>
 
-<ng-template #loading>
-  <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-</ng-template>
+<div class="paragraph">
+  <label>Total cutaways</label>
+</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>