un peu d'estétique sur la page de résumé

Front/skydivelogs-app/src/app/app.module.ts

@@ -42,7 +42,6 @@ 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';
@@ -95,8 +94,7 @@ const appRoutes: Routes = [
     MatButtonModule,
     MatIconModule,
     MatAutocompleteModule,
-    MatProgressSpinnerModule,
+    MatProgressSpinnerModule
-    MatTabsModule
   ],
   exports: [HttpClientModule],
   providers: [

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

@@ -5,3 +5,10 @@
 .paragraph {
   margin-top: 30px;
 }
+
+.labelTab {
+  margin: 5px;
+  cursor: pointer;
+  text-decoration: underline;
+  font-weight: bold;
+}

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

@@ -1,5 +1,3 @@
-<!-- <div *ngIf="allDatasLoaded() else loading"> -->
-
 <div>
   <label>Total jumps</label>
   Total Total
@@ -14,8 +12,17 @@
   Date and location
 </div>
 
-<mat-tab-group mat-stretch-tabs>
+<div style="display: flex; flex-direction: row; flex-wrap: wrap;">
-  <mat-tab label="Jumps in the last month">
+  <label (click)="showStats(1)" class="labelTab">Jumps in the last month</label>
+  <label (click)="showStats(2)" class="labelTab">Jumps in the last year</label>
+  <label (click)="showStats(3)" class="labelTab">By DZ</label>
+  <label (click)="showStats(4)" class="labelTab">By aircraft</label>
+  <label (click)="showStats(5)" class="labelTab">By gear</label>
+  <label (click)="showStats(6)" class="labelTab">By jump type</label>
+  <label (click)="showStats(7)" class="labelTab">By year</label>
+</div>
+
+<div *ngIf="statsToShow(1)">
   <table mat-table [dataSource]="dsJumpForLastMonthByDz"
     *ngIf="dsJumpForLastMonthByDz != null else loadingDsJumpForLastMonthByDz">
     <ng-container matColumnDef="label">
@@ -43,9 +50,9 @@
   <ng-template #loadingDsJumpForLastMonthByJumpType>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
   </ng-template>
-  </mat-tab>
+</div>
 
-  <mat-tab label="Jumps in the last year">
+<div *ngIf="statsToShow(2)">
   <table mat-table [dataSource]="dsJumpForLastYearByDz"
     *ngIf="dsJumpForLastYearByDz != null else loadingDsJumpForLastYearByDz">
     <ng-container matColumnDef="label">
@@ -73,9 +80,9 @@
   <ng-template #loadingDsJumpForLastYearByJumpType>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
   </ng-template>
-  </mat-tab>
+</div>
 
-  <mat-tab label="By DZ">
+<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>
@@ -88,11 +95,10 @@
   <ng-template #loadingDsNbJumpByDz>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
   </ng-template>
-  </mat-tab>
+</div>
 
-  <mat-tab label="By aircraft">
+<div *ngIf="statsToShow(4)">
-    <table mat-table [dataSource]="dsNbJumpByAircraft"
+  <table mat-table [dataSource]="dsNbJumpByAircraft" *ngIf="dsNbJumpByAircraft != null else loadingDsNbJumpByAircraft">
-      *ngIf="dsNbJumpByAircraft != null else loadingDsNbJumpByAircraft">
     <ng-container matColumnDef="label">
       <td mat-cell *matCellDef="let element">{{element.label}}</td>
     </ng-container>
@@ -104,9 +110,9 @@
   <ng-template #loadingDsNbJumpByAircraft>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
   </ng-template>
-  </mat-tab>
+</div>
 
-  <mat-tab label="By gear">
+<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>
@@ -119,9 +125,9 @@
   <ng-template #loadingDsNbJumpByGear>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
   </ng-template>
-  </mat-tab>
+</div>
 
-  <mat-tab label="By jump type">
+<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>
@@ -134,9 +140,9 @@
   <ng-template #loadingDsNbJumpByType>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
   </ng-template>
-  </mat-tab>
+</div>
 
-  <mat-tab label="By year">
+<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>
@@ -149,5 +155,4 @@
   <ng-template #loadingDsNbJumpByYear>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
   </ng-template>
-  </mat-tab>
+</div>
-</mat-tab-group>

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

@@ -7,7 +7,8 @@ import {
   StatsByAircraftResp,
   StatsByGearResp,
   StatsByJumpTypeResp,
-  StatsByYearResp
+  StatsByYearResp,
+  StatType
 } from '../../models/stats';
 
 @Component({
@@ -15,6 +16,7 @@ import {
   templateUrl: './summary.component.html',
   styleUrls: ['./summary.component.css']
 })
+
 export class SummaryComponent implements OnInit {
   public dsNbJumpByDz: MatTableDataSource<StatsByDzResp>;
   public dsNbJumpByAircraft: MatTableDataSource<StatsByAircraftResp>;
@@ -26,8 +28,9 @@ export class SummaryComponent implements OnInit {
   public dsJumpForLastMonthByDz: MatTableDataSource<StatsByDzResp>;
   public dsJumpForLastMonthByJumpType: MatTableDataSource<StatsByJumpTypeResp>;
 
-  private countDatasLoaded: number;
   public displayedColumns: Array<string> = ['label', 'nb'];
+  private _shownStats: Map<StatType, boolean>;
+  public StatType = StatType;
 
   constructor(
     private serviceApi: StatsService,
@@ -35,30 +38,26 @@ export class SummaryComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.countDatasLoaded = 0;
+    this.initShownStats();
+
     this.serviceComm.UpdatedComponentTitle('Summary');
 
     const statsResult = this.serviceApi.getStatsOfJumps();
 
     statsResult.statsByDz.subscribe(data => {
       this.dsNbJumpByDz = new MatTableDataSource(data);
-      this.countDatasLoaded++;
     });
     statsResult.statsByAircraft.subscribe(data => {
       this.dsNbJumpByAircraft = new MatTableDataSource(data);
-      this.countDatasLoaded++;
     });
     statsResult.statsByGear.subscribe(data => {
       this.dsNbJumpByGear = new MatTableDataSource(data);
-      this.countDatasLoaded++;
     });
     statsResult.statsByJumpType.subscribe(data => {
       this.dsNbJumpByType = new MatTableDataSource(data);
-      this.countDatasLoaded++;
     });
     statsResult.statsByYear.subscribe(data => {
       this.dsNbJumpByYear = new MatTableDataSource(data);
-      this.countDatasLoaded++;
     });
 
     statsResult.statsForLastYear.subscribe(data => {
@@ -66,18 +65,40 @@ export class SummaryComponent implements OnInit {
       this.dsJumpForLastYearByJumpType = new MatTableDataSource(
         data.byJumpType
       );
-      this.countDatasLoaded++;
     });
     statsResult.statsForLastMonth.subscribe(data => {
       this.dsJumpForLastMonthByDz = new MatTableDataSource(data.byDz);
       this.dsJumpForLastMonthByJumpType = new MatTableDataSource(
         data.byJumpType
       );
-      this.countDatasLoaded++;
     });
   }
 
-  public allDatasLoaded(): boolean {
+  public showStats(statsToShow: StatType) {
-    return this.countDatasLoaded === 7;
+    this._shownStats.set(StatType.ForLastMonth, false);
+    this._shownStats.set(StatType.ForLastYear, false);
+    this._shownStats.set(StatType.ByDz, false);
+    this._shownStats.set(StatType.ByAircraft, false);
+    this._shownStats.set(StatType.ByGear, false);
+    this._shownStats.set(StatType.ByJumpType, false);
+    this._shownStats.set(StatType.ByYear, false);
+
+    this._shownStats.set(statsToShow, true);
+  }
+
+  private initShownStats() {
+    this._shownStats = new Map<StatType, boolean>();
+
+    this._shownStats.set(StatType.ForLastMonth, false);
+    this._shownStats.set(StatType.ForLastYear, false);
+    this._shownStats.set(StatType.ByDz, false);
+    this._shownStats.set(StatType.ByAircraft, false);
+    this._shownStats.set(StatType.ByGear, false);
+    this._shownStats.set(StatType.ByJumpType, false);
+    this._shownStats.set(StatType.ByYear, true);
+  }
+
+  public statsToShow(statsToShow: StatType): boolean {
+    return this._shownStats.get(statsToShow);
   }
 }

Front/skydivelogs-app/src/models/stats.ts

@@ -1,4 +1,14 @@
-import { Observable } from "rxjs";
+import { Observable } from 'rxjs';
+
+export enum StatType {
+  ForLastMonth = 1,
+  ForLastYear = 2,
+  ByDz = 3,
+  ByAircraft = 4,
+  ByGear = 5,
+  ByJumpType = 6,
+  ByYear = 7,
+}
 
 export class StatsResp {
   public statsByDz: Observable<Array<StatsByDzResp>>;