From 862714596d184397d8776281061c8b8fa74523e1 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:40:35 +0100
Subject: [PATCH] Affichage en version "tab"

---
 Front/skydivelogs-app/src/app/app.module.ts   |   4 +-
 .../src/app/summary/summary.component.html    | 262 +++++++++---------
 .../src/app/summary/summary.component.ts      |  22 +-
 3 files changed, 143 insertions(+), 145 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/app.module.ts b/Front/skydivelogs-app/src/app/app.module.ts
index 3d0af83..71b3b26 100644
--- a/Front/skydivelogs-app/src/app/app.module.ts
+++ b/Front/skydivelogs-app/src/app/app.module.ts
@@ -42,6 +42,7 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
 
 import { RequestCache } from '../services/request-cache.service';
 import { CachingInterceptor } from '../services/caching-interceptor.service';
@@ -94,7 +95,8 @@ const appRoutes: Routes = [
     MatButtonModule,
     MatIconModule,
     MatAutocompleteModule,
-    MatProgressSpinnerModule
+    MatProgressSpinnerModule,
+    MatTabsModule
   ],
   exports: [HttpClientModule],
   providers: [
diff --git a/Front/skydivelogs-app/src/app/summary/summary.component.html b/Front/skydivelogs-app/src/app/summary/summary.component.html
index c6b1afe..f2fea97 100644
--- a/Front/skydivelogs-app/src/app/summary/summary.component.html
+++ b/Front/skydivelogs-app/src/app/summary/summary.component.html
@@ -14,144 +14,140 @@
   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>
+<mat-tab-group mat-stretch-tabs>
+  <mat-tab label="Jumps in the last month">
+    <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>
+    <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>
+  </mat-tab>
 
-<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>
+  <mat-tab label="Jumps in the last year">
+    <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>
+    <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>
+  </mat-tab>
 
-<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>
+  <mat-tab label="By DZ">
+    <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>
+  </mat-tab>
 
-<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>
+  <mat-tab label="By aircraft">
+    <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>
+  </mat-tab>
 
-<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>
+  <mat-tab label="By gear">
+    <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>
+  </mat-tab>
 
-<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>
+  <mat-tab label="By jump type">
+    <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>
+  </mat-tab>
 
-<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>
+  <mat-tab label="By year">
+    <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>
+  </mat-tab>
+</mat-tab-group>
diff --git a/Front/skydivelogs-app/src/app/summary/summary.component.ts b/Front/skydivelogs-app/src/app/summary/summary.component.ts
index 448d175..7ddadc4 100644
--- a/Front/skydivelogs-app/src/app/summary/summary.component.ts
+++ b/Front/skydivelogs-app/src/app/summary/summary.component.ts
@@ -1,19 +1,19 @@
-import { Component, OnInit } from "@angular/core";
-import { MatTableDataSource } from "@angular/material/table";
-import { ServiceComm } from "../../services/service-comm.service";
-import { StatsService } from "../../services/stats.service";
+import { Component, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { ServiceComm } from '../../services/service-comm.service';
+import { StatsService } from '../../services/stats.service';
 import {
   StatsByDzResp,
   StatsByAircraftResp,
   StatsByGearResp,
   StatsByJumpTypeResp,
   StatsByYearResp
-} from "../../models/stats";
+} from '../../models/stats';
 
 @Component({
-  selector: "app-summary",
-  templateUrl: "./summary.component.html",
-  styleUrls: ["./summary.component.css"]
+  selector: 'app-summary',
+  templateUrl: './summary.component.html',
+  styleUrls: ['./summary.component.css']
 })
 export class SummaryComponent implements OnInit {
   public dsNbJumpByDz: MatTableDataSource<StatsByDzResp>;
@@ -27,16 +27,16 @@ export class SummaryComponent implements OnInit {
   public dsJumpForLastMonthByJumpType: MatTableDataSource<StatsByJumpTypeResp>;
 
   private countDatasLoaded: number;
-  public displayedColumns: Array<string> = ["label", "nb"];
+  public displayedColumns: Array<string> = ['label', 'nb'];
 
   constructor(
     private serviceApi: StatsService,
     private serviceComm: ServiceComm
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.countDatasLoaded = 0;
-    this.serviceComm.UpdatedComponentTitle("Summary");
+    this.serviceComm.UpdatedComponentTitle('Summary');
 
     const statsResult = this.serviceApi.getStatsOfJumps();