Affichage en version "tab"

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: [

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

@@ -14,8 +14,8 @@
   Date and location
 </div>
 
-<div class="paragraph">
+<mat-tab-group mat-stretch-tabs>
-  <label>Jumps in the last month</label>
+  <mat-tab label="Jumps in the last month">
     <table mat-table [dataSource]="dsJumpForLastMonthByDz"
       *ngIf="dsJumpForLastMonthByDz != null else loadingDsJumpForLastMonthByDz">
       <ng-container matColumnDef="label">
@@ -43,10 +43,9 @@
     <ng-template #loadingDsJumpForLastMonthByJumpType>
       <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
     </ng-template>
-</div>
+  </mat-tab>
 
-<div class="paragraph">
+  <mat-tab label="Jumps in the last year">
-  <label>Jumps in the last year</label>
     <table mat-table [dataSource]="dsJumpForLastYearByDz"
       *ngIf="dsJumpForLastYearByDz != null else loadingDsJumpForLastYearByDz">
       <ng-container matColumnDef="label">
@@ -74,10 +73,9 @@
     <ng-template #loadingDsJumpForLastYearByJumpType>
       <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
     </ng-template>
-</div>
+  </mat-tab>
 
-<div class="paragraph">
+  <mat-tab label="By DZ">
-  <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>
@@ -90,11 +88,11 @@
     <ng-template #loadingDsNbJumpByDz>
       <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
     </ng-template>
-</div>
+  </mat-tab>
 
-<div class="paragraph">
+  <mat-tab label="By aircraft">
-  <label>By aircraft</label>
+    <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>
@@ -106,10 +104,9 @@
     <ng-template #loadingDsNbJumpByAircraft>
       <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
     </ng-template>
-</div>
+  </mat-tab>
 
-<div class="paragraph">
+  <mat-tab label="By gear">
-  <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>
@@ -122,10 +119,9 @@
     <ng-template #loadingDsNbJumpByGear>
       <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
     </ng-template>
-</div>
+  </mat-tab>
 
-<div class="paragraph">
+  <mat-tab label="By jump type">
-  <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>
@@ -138,10 +134,9 @@
     <ng-template #loadingDsNbJumpByType>
       <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
     </ng-template>
-</div>
+  </mat-tab>
 
-<div class="paragraph">
+  <mat-tab label="By year">
-  <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>
@@ -154,4 +149,5 @@
     <ng-template #loadingDsNbJumpByYear>
       <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
     </ng-template>
-</div>
+  </mat-tab>
+</mat-tab-group>

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

@@ -1,19 +1,19 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
-import { MatTableDataSource } from "@angular/material/table";
+import { MatTableDataSource } from '@angular/material/table';
-import { ServiceComm } from "../../services/service-comm.service";
+import { ServiceComm } from '../../services/service-comm.service';
-import { StatsService } from "../../services/stats.service";
+import { StatsService } from '../../services/stats.service';
 import {
   StatsByDzResp,
   StatsByAircraftResp,
   StatsByGearResp,
   StatsByJumpTypeResp,
   StatsByYearResp
-} from "../../models/stats";
+} from '../../models/stats';
 
 @Component({
-  selector: "app-summary",
+  selector: 'app-summary',
-  templateUrl: "./summary.component.html",
+  templateUrl: './summary.component.html',
-  styleUrls: ["./summary.component.css"]
+  styleUrls: ['./summary.component.css']
 })
 export class SummaryComponent implements OnInit {
   public dsNbJumpByDz: MatTableDataSource<StatsByDzResp>;
@@ -27,7 +27,7 @@ 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,
@@ -36,7 +36,7 @@ export class SummaryComponent implements OnInit {
 
   ngOnInit() {
     this.countDatasLoaded = 0;
-    this.serviceComm.UpdatedComponentTitle("Summary");
+    this.serviceComm.UpdatedComponentTitle('Summary');
 
     const statsResult = this.serviceApi.getStatsOfJumps();