Changement de style de la page des

stats résumées

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>

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

@@ -13,21 +13,9 @@
   <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>
-
-<div *ngIf="statsToShow(1)">
-  <table mat-table [dataSource]="dsJumpForLastMonthByDz"
-    *ngIf="dsJumpForLastMonthByDz != null else loadingDsJumpForLastMonthByDz">
+<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>
@@ -36,12 +24,7 @@
       </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">
+    <table mat-table [dataSource]="dsJumpForLastMonthByJumpType">
       <ng-container matColumnDef="label">
         <td mat-cell *matCellDef="let element">{{element.label}}</td>
       </ng-container>
@@ -50,14 +33,10 @@
       </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>
 
-<div *ngIf="statsToShow(2)">
-  <table mat-table [dataSource]="dsJumpForLastYearByDz"
-    *ngIf="dsJumpForLastYearByDz != null else loadingDsJumpForLastYearByDz">
+  <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>
@@ -66,12 +45,7 @@
       </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">
+    <table mat-table [dataSource]="dsJumpForLastYearByJumpType">
       <ng-container matColumnDef="label">
         <td mat-cell *matCellDef="let element">{{element.label}}</td>
       </ng-container>
@@ -80,13 +54,10 @@
       </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>
 
-<div *ngIf="statsToShow(3)">
-  <table mat-table [dataSource]="dsNbJumpByDz" *ngIf="dsNbJumpByDz != null else loadingDsNbJumpByDz">
+  <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>
@@ -95,13 +66,10 @@
       </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>
 
-<div *ngIf="statsToShow(4)">
-  <table mat-table [dataSource]="dsNbJumpByAircraft" *ngIf="dsNbJumpByAircraft != null else loadingDsNbJumpByAircraft">
+  <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>
@@ -110,13 +78,10 @@
       </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>
+  </mat-tab>
 
-<div *ngIf="statsToShow(5)">
-  <table mat-table [dataSource]="dsNbJumpByGear" *ngIf="dsNbJumpByGear != null else loadingDsNbJumpByGear">
+  <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>
@@ -125,13 +90,10 @@
       </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>
+  </mat-tab>
 
-<div *ngIf="statsToShow(6)">
-  <table mat-table [dataSource]="dsNbJumpByType" *ngIf="dsNbJumpByType != null else loadingDsNbJumpByType">
+  <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>
@@ -140,13 +102,10 @@
       </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>
+  </mat-tab>
 
-<div *ngIf="statsToShow(7)">
-  <table mat-table [dataSource]="dsNbJumpByYear" *ngIf="dsNbJumpByYear != null else loadingDsNbJumpByYear">
+  <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>
@@ -155,7 +114,5 @@
       </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>
+</mat-tab-group>

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;