Affichage en version "tab"

This commit is contained in:
Sébastien André
2020-02-17 14:40:35 +01:00
parent 598545c9d2
commit 862714596d
3 changed files with 143 additions and 145 deletions

View File

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

View File

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

View File

@@ -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,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();