Ajout du cache sur les appels pour les stats
Et appel à l'API sur l'affichage de l'onglet
This commit is contained in:
Sébastien André
@@ -2,12 +2,12 @@ import { Component, OnInit } from "@angular/core";
|
||||
import { Router } from "@angular/router";
|
||||
|
||||
import { User } from "../models/user";
|
||||
import { RefData } from "../models/ref-data.enum";
|
||||
import { CacheApiKey } from "../models/cache-api-key.enum";
|
||||
|
||||
import { AuthenticationService } from "../services/authentication.service";
|
||||
import { ServiceComm } from "../services/service-comm.service";
|
||||
import { ConfigurationHelper } from "../services/configuration-helper";
|
||||
import { ServiceRefData } from "../services/service-ref-data.service";
|
||||
import { ServiceCacheApi } from "../services/service-cache-api.service";
|
||||
import { AircraftService } from "../services/aircraft.service";
|
||||
import { GearService } from "../services/gear.service";
|
||||
import { JumpTypeService } from "../services/jump-type.service";
|
||||
@@ -26,7 +26,7 @@ export class AppComponent implements OnInit {
|
||||
constructor(private router: Router,
|
||||
private authenticationService: AuthenticationService,
|
||||
private serviceComm: ServiceComm,
|
||||
private serviceRefData : ServiceRefData,
|
||||
private serviceCacheApi : ServiceCacheApi,
|
||||
private serviceApiAircraft : AircraftService,
|
||||
private serviceApiJumpType : JumpTypeService,
|
||||
private serviceApiDropzone : DropzoneService,
|
||||
@@ -58,7 +58,7 @@ export class AppComponent implements OnInit {
|
||||
}
|
||||
|
||||
logout() {
|
||||
this.serviceRefData.delete(RefData.Dropzone);
|
||||
this.serviceCacheApi.delete(CacheApiKey.Dropzone);
|
||||
this.authenticationService.logout();
|
||||
this.router.navigate(["/login"], { skipLocationChange: true });
|
||||
}
|
||||
|
||||
@@ -35,7 +35,7 @@ import { RequestCache } from "../services/request-cache.service";
|
||||
import { AuthGuardService } from "../services/auth-guard.service";
|
||||
import { ImageService } from "../services/image.service";
|
||||
import { ConfigurationHelper } from "../services/configuration-helper";
|
||||
import { ServiceRefData } from "../services/service-ref-data.service";
|
||||
import { ServiceCacheApi } from "../services/service-cache-api.service";
|
||||
|
||||
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
|
||||
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
|
||||
@@ -183,7 +183,7 @@ export function initConfig(configService: ConfigurationHelper) {
|
||||
RequestCache,
|
||||
ConfigurationHelper,
|
||||
DatePipe,
|
||||
ServiceRefData,
|
||||
ServiceCacheApi,
|
||||
{ provide: APP_INITIALIZER, useFactory: initConfig, deps: [ConfigurationHelper], multi: true },
|
||||
{ provide: HTTP_INTERCEPTORS, useClass: JwtAuthInterceptor, multi: true },
|
||||
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
|
||||
|
||||
@@ -33,10 +33,6 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mat-tab-group {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.containerFlex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@@ -11,126 +11,146 @@
|
||||
|
||||
<div class="paragraph">
|
||||
<label class="left130">Last jump</label>
|
||||
<span>: {{ lastJump }}</span>
|
||||
<span>: {{ lastJump | date: 'yyyy-MM-dd' }}</span>
|
||||
</div>
|
||||
|
||||
<mat-tab-group mat-align-tabs="left" animationDuration="0ms">
|
||||
<div class="paragraph" style="margin-top: 20px;">
|
||||
<mat-icon aria-hidden="false" aria-label="Force the refresh of the stats" style="cursor: pointer;"
|
||||
(click)='refreshStats()'>cached</mat-icon>
|
||||
</div>
|
||||
|
||||
<mat-tab-group mat-align-tabs="left" animationDuration="0ms"
|
||||
(selectedTabChange)="onTabChanged($event);">
|
||||
<mat-tab label="Jumps in the last month">
|
||||
<div class="containerFlex">
|
||||
<fieldset class="contentFlex">
|
||||
<legend>By DZ</legend>
|
||||
<table mat-table [dataSource]="dsJumpForLastMonthByDz">
|
||||
<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>
|
||||
</fieldset>
|
||||
<fieldset class="contentFlex">
|
||||
<legend>By jump type</legend>
|
||||
<table mat-table [dataSource]="dsJumpForLastMonthByJumpType">
|
||||
<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>
|
||||
</fieldset>
|
||||
</div>
|
||||
<ng-template matTabContent>
|
||||
<div class="containerFlex">
|
||||
<fieldset class="contentFlex">
|
||||
<legend>By DZ</legend>
|
||||
<table mat-table [dataSource]="dsJumpForLastMonthByDz">
|
||||
<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>
|
||||
</fieldset>
|
||||
<fieldset class="contentFlex">
|
||||
<legend>By jump type</legend>
|
||||
<table mat-table [dataSource]="dsJumpForLastMonthByJumpType">
|
||||
<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>
|
||||
</fieldset>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="Jumps in the last year">
|
||||
<div class="containerFlex">
|
||||
<fieldset class="contentFlex">
|
||||
<legend>By DZ</legend>
|
||||
<table mat-table [dataSource]="dsJumpForLastYearByDz">
|
||||
<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>
|
||||
</fieldset>
|
||||
<fieldset class="contentFlex">
|
||||
<legend>By jump type</legend>
|
||||
<table mat-table [dataSource]="dsJumpForLastYearByJumpType">
|
||||
<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>
|
||||
</fieldset>
|
||||
</div>
|
||||
<ng-template matTabContent>
|
||||
<div class="containerFlex">
|
||||
<fieldset class="contentFlex">
|
||||
<legend>By DZ</legend>
|
||||
<table mat-table [dataSource]="dsJumpForLastYearByDz">
|
||||
<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>
|
||||
</fieldset>
|
||||
<fieldset class="contentFlex">
|
||||
<legend>By jump type</legend>
|
||||
<table mat-table [dataSource]="dsJumpForLastYearByJumpType">
|
||||
<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>
|
||||
</fieldset>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
|
||||
<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>
|
||||
<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 matTabContent>
|
||||
<table mat-table [dataSource]="dsNbJumpByDz">
|
||||
<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>
|
||||
</mat-tab>
|
||||
|
||||
<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>
|
||||
<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 matTabContent>
|
||||
<table mat-table [dataSource]="dsNbJumpByAircraft">
|
||||
<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>
|
||||
</mat-tab>
|
||||
|
||||
<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>
|
||||
<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 matTabContent>
|
||||
<table mat-table [dataSource]="dsNbJumpByGear">
|
||||
<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>
|
||||
</mat-tab>
|
||||
|
||||
<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>
|
||||
<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 matTabContent>
|
||||
<table mat-table [dataSource]="dsNbJumpByType">
|
||||
<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>
|
||||
</mat-tab>
|
||||
|
||||
<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>
|
||||
<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 matTabContent>
|
||||
<table mat-table [dataSource]="dsNbJumpByYear">
|
||||
<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>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,10 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { MatTabChangeEvent, MatTabGroup } from '@angular/material/tabs';
|
||||
import { ServiceComm } from '../../services/service-comm.service';
|
||||
import { StatsService } from '../../services/stats.service';
|
||||
import {
|
||||
StatsByDzResp,
|
||||
StatsByAircraftResp,
|
||||
StatsByGearResp,
|
||||
StatsByJumpTypeResp,
|
||||
StatsByYearResp,
|
||||
StatType
|
||||
} from '../../models/stats';
|
||||
import { StatsByDzResp, StatsByAircraftResp, StatsByGearResp,
|
||||
StatsByJumpTypeResp, StatsByYearResp } from '../../models/stats';
|
||||
|
||||
@Component({
|
||||
selector: 'app-summary',
|
||||
@@ -29,86 +24,91 @@ export class SummaryComponent implements OnInit {
|
||||
public dsJumpForLastMonthByJumpType: MatTableDataSource<StatsByJumpTypeResp>;
|
||||
|
||||
public displayedColumns: Array<string> = ['label', 'nb'];
|
||||
private _shownStats: Map<StatType, boolean>;
|
||||
public StatType = StatType;
|
||||
|
||||
public totalJumps: number;
|
||||
public totalCutaways: number;
|
||||
public lastJump: string;
|
||||
|
||||
constructor(
|
||||
private _serviceApi: StatsService,
|
||||
private _serviceComm: ServiceComm
|
||||
) { }
|
||||
@ViewChild(MatTabGroup) tabGroup: MatTabGroup;
|
||||
|
||||
constructor(private serviceApi: StatsService,
|
||||
private serviceComm: ServiceComm) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.initShownStats();
|
||||
this.serviceComm.UpdatedComponentTitle('Summary');
|
||||
|
||||
this._serviceComm.UpdatedComponentTitle('Summary');
|
||||
this.serviceApi.getSimpleSummary()
|
||||
.subscribe(data => {
|
||||
this.totalJumps = data.totalJumps;
|
||||
this.totalCutaways = data.totalCutaways;
|
||||
this.lastJump = data.lastJump.jumpDate + ' (' + data.lastJump.dropZone.name + ')';
|
||||
});
|
||||
|
||||
const statsResult = this._serviceApi.getStatsOfJumps();
|
||||
|
||||
statsResult.simpleSummary.subscribe(data => {
|
||||
this.totalJumps = data.totalJumps;
|
||||
this.totalCutaways = data.totalCutaways;
|
||||
this.lastJump = data.lastJump.jumpDate + ' (' + data.lastJump.dropZone.name + ')';
|
||||
});
|
||||
|
||||
statsResult.statsByDz.subscribe(data => {
|
||||
this.dsNbJumpByDz = new MatTableDataSource(data);
|
||||
});
|
||||
statsResult.statsByAircraft.subscribe(data => {
|
||||
this.dsNbJumpByAircraft = new MatTableDataSource(data);
|
||||
});
|
||||
statsResult.statsByGear.subscribe(data => {
|
||||
this.dsNbJumpByGear = new MatTableDataSource(data);
|
||||
});
|
||||
statsResult.statsByJumpType.subscribe(data => {
|
||||
this.dsNbJumpByType = new MatTableDataSource(data);
|
||||
});
|
||||
statsResult.statsByYear.subscribe(data => {
|
||||
this.dsNbJumpByYear = new MatTableDataSource(data);
|
||||
});
|
||||
|
||||
statsResult.statsForLastYear.subscribe(data => {
|
||||
this.dsJumpForLastYearByDz = new MatTableDataSource(data.byDz);
|
||||
this.dsJumpForLastYearByJumpType = new MatTableDataSource(
|
||||
data.byJumpType
|
||||
);
|
||||
});
|
||||
statsResult.statsForLastMonth.subscribe(data => {
|
||||
this.dsJumpForLastMonthByDz = new MatTableDataSource(data.byDz);
|
||||
this.dsJumpForLastMonthByJumpType = new MatTableDataSource(
|
||||
data.byJumpType
|
||||
);
|
||||
});
|
||||
this.serviceApi.getStatsOfLastMonth()
|
||||
.subscribe(data => {
|
||||
this.dsJumpForLastMonthByDz = new MatTableDataSource(data.byDz);
|
||||
this.dsJumpForLastMonthByJumpType = new MatTableDataSource(
|
||||
data.byJumpType
|
||||
);
|
||||
});
|
||||
|
||||
this.tabGroup.selectedIndex = 0;
|
||||
}
|
||||
|
||||
public showStats(statsToShow: StatType) {
|
||||
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);
|
||||
public refreshStats() {
|
||||
this.serviceApi.deleteAllCache();
|
||||
this.tabGroup.selectedIndex = 0;
|
||||
}
|
||||
|
||||
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);
|
||||
public onTabChanged(event: MatTabChangeEvent) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.serviceApi.getStatsOfLastMonth()
|
||||
.subscribe(data => {
|
||||
this.dsJumpForLastMonthByDz = new MatTableDataSource(data.byDz);
|
||||
this.dsJumpForLastMonthByJumpType = new MatTableDataSource(
|
||||
data.byJumpType
|
||||
);
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
this.serviceApi.getStatsOfLastYear()
|
||||
.subscribe(data => {
|
||||
this.dsJumpForLastYearByDz = new MatTableDataSource(data.byDz);
|
||||
this.dsJumpForLastYearByJumpType = new MatTableDataSource(
|
||||
data.byJumpType
|
||||
);
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
this.serviceApi.getStatsByDz()
|
||||
.subscribe(data => {
|
||||
this.dsNbJumpByDz = new MatTableDataSource(data);
|
||||
});
|
||||
break;
|
||||
case 3:
|
||||
this.serviceApi.getStatsByAircraft()
|
||||
.subscribe(data => {
|
||||
this.dsNbJumpByAircraft = new MatTableDataSource(data);
|
||||
});
|
||||
break;
|
||||
case 4:
|
||||
this.serviceApi.getStatsByGear()
|
||||
.subscribe(data => {
|
||||
this.dsNbJumpByGear = new MatTableDataSource(data);
|
||||
});
|
||||
break;
|
||||
case 5:
|
||||
this.serviceApi.getStatsByJumpType()
|
||||
.subscribe(data => {
|
||||
this.dsNbJumpByType = new MatTableDataSource(data);
|
||||
});
|
||||
break;
|
||||
case 6:
|
||||
this.serviceApi.getStatsByYear()
|
||||
.subscribe(data => {
|
||||
this.dsNbJumpByYear = new MatTableDataSource(data);
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user