From 9455b543c1f5913f0416868dd8448bb5826aeb06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?= <sebastien.andre@arolla.fr>
Date: Sun, 5 Apr 2020 13:32:52 +0200
Subject: [PATCH] =?UTF-8?q?Changement=20de=20style=20de=20la=20page=20des?=
 =?UTF-8?q?=20stats=20r=C3=A9sum=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/login/login.component.html        |  19 --
 .../src/app/summary/summary.component.html    | 237 +++++++-----------
 .../skydivelogs-app/src/assets/css/styles.css |   4 +-
 3 files changed, 99 insertions(+), 161 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/login/login.component.html b/Front/skydivelogs-app/src/app/login/login.component.html
index 70ec34c..396f1ad 100644
--- a/Front/skydivelogs-app/src/app/login/login.component.html
+++ b/Front/skydivelogs-app/src/app/login/login.component.html
@@ -1,22 +1,3 @@
-<!-- <div class="col-md-4 offset-md-4 mt-5">
-  <div class="card">
-    <h4 class="card-header">Login to the Skydive log</h4>
-    <div class="card-body">
-
-      <mat-tab-group mat-align-tabs="center" animationDuration="0ms">
-        <mat-tab label="Login with a user">
-          <app-login-user></app-login-user>
-        </mat-tab>
-        <mat-tab label="Create and login a user">
-          <app-create-user></app-create-user>
-        </mat-tab>
-      </mat-tab-group>
-
-    </div>
-  </div>
-</div> -->
-
-
 <mat-card style="max-width: 500px;">
   <mat-card-header>
     <mat-card-title>Login to the Skydive log</mat-card-title>
diff --git a/Front/skydivelogs-app/src/app/summary/summary.component.html b/Front/skydivelogs-app/src/app/summary/summary.component.html
index ee17df2..4869ec8 100644
--- a/Front/skydivelogs-app/src/app/summary/summary.component.html
+++ b/Front/skydivelogs-app/src/app/summary/summary.component.html
@@ -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>
diff --git a/Front/skydivelogs-app/src/assets/css/styles.css b/Front/skydivelogs-app/src/assets/css/styles.css
index d68e059..7666b2b 100644
--- a/Front/skydivelogs-app/src/assets/css/styles.css
+++ b/Front/skydivelogs-app/src/assets/css/styles.css
@@ -1,4 +1,4 @@
-@import 'bootstrap-4.3.1.min.css';
+/* @import 'bootstrap-4.3.1.min.css'; */
 
 html,
 body {
@@ -6,7 +6,7 @@ body {
 }
 
 body {
-  /* font-family: Roboto, "Helvetica Neue", sans-serif; */
+  font-family: Roboto, "Helvetica Neue", sans-serif;
   margin: 10px;
   color: #424242;
   min-height: 665px;