sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sébastien André
2020-02-20 12:31:34 +01:00
parent 862714596d
commit 0342b18d0d
5 changed files with 188 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Front/skydivelogs-app/src/app/app.module.ts
View File

@@ -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,
MatTabsModule
MatProgressSpinnerModule
],
exports: [HttpClientModule],
providers: [

7
Front/skydivelogs-app/src/app/summary/summary.component.css
View File

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

267
Front/skydivelogs-app/src/app/summary/summary.component.html
View File

@@ -1,5 +1,3 @@
<!-- <div *ngIf="allDatasLoaded() else loading"> -->
<div>
<label>Total jumps</label>
Total Total
@@ -14,140 +12,147 @@
Date and location
</div>
<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>
<div style="display: flex; flex-direction: row; flex-wrap: wrap;">
<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>
<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 *ngIf="statsToShow(1)">
<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 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]="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]="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 *ngIf="statsToShow(2)">
<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="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>
<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>
<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 *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>
</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 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 *ngIf="statsToShow(4)">
<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 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 *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>
</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 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>
<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>
</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>
<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>
</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>

45
Front/skydivelogs-app/src/app/summary/summary.component.ts
View File

@@ -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 {
return this.countDatasLoaded === 7;
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);
}
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);
}
}