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

Affichage en version "tab"

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,6 +42,7 @@ import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table'; import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { RequestCache } from '../services/request-cache.service'; import { RequestCache } from '../services/request-cache.service';
import { CachingInterceptor } from '../services/caching-interceptor.service'; import { CachingInterceptor } from '../services/caching-interceptor.service';
@@ -94,7 +95,8 @@ const appRoutes: Routes = [
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,
MatAutocompleteModule, MatAutocompleteModule,
MatProgressSpinnerModule MatProgressSpinnerModule,
MatTabsModule
], ],
exports: [HttpClientModule], exports: [HttpClientModule],
providers: [ providers: [

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

@@ -14,144 +14,140 @@
Date and location Date and location
</div> </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" <table mat-table [dataSource]="dsJumpForLastMonthByDz"
*ngIf="dsJumpForLastMonthByDz != null else loadingDsJumpForLastMonthByDz"> *ngIf="dsJumpForLastMonthByDz != null else loadingDsJumpForLastMonthByDz">
<ng-container matColumnDef="label"> <ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td> <td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="nb"> <ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td> <td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<ng-template #loadingDsJumpForLastMonthByDz> <ng-template #loadingDsJumpForLastMonthByDz>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner> <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template> </ng-template>
<table mat-table [dataSource]="dsJumpForLastMonthByJumpType" <table mat-table [dataSource]="dsJumpForLastMonthByJumpType"
*ngIf="dsJumpForLastMonthByJumpType != null else loadingDsJumpForLastMonthByJumpType"> *ngIf="dsJumpForLastMonthByJumpType != null else loadingDsJumpForLastMonthByJumpType">
<ng-container matColumnDef="label"> <ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td> <td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="nb"> <ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td> <td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<ng-template #loadingDsJumpForLastMonthByJumpType> <ng-template #loadingDsJumpForLastMonthByJumpType>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner> <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template> </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"
<table mat-table [dataSource]="dsJumpForLastYearByDz" *ngIf="dsJumpForLastYearByDz != null else loadingDsJumpForLastYearByDz">
*ngIf="dsJumpForLastYearByDz != null else loadingDsJumpForLastYearByDz"> <ng-container matColumnDef="label">
<ng-container matColumnDef="label"> <td mat-cell *matCellDef="let element">{{element.label}}</td>
<td mat-cell *matCellDef="let element">{{element.label}}</td> </ng-container>
</ng-container> <ng-container matColumnDef="nb">
<ng-container matColumnDef="nb"> <td mat-cell *matCellDef="let element">{{element.nb}}</td>
<td mat-cell *matCellDef="let element">{{element.nb}}</td> </ng-container>
</ng-container> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table>
</table> <ng-template #loadingDsJumpForLastYearByDz>
<ng-template #loadingDsJumpForLastYearByDz> <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner> </ng-template>
</ng-template>
<table mat-table [dataSource]="dsJumpForLastYearByJumpType" <table mat-table [dataSource]="dsJumpForLastYearByJumpType"
*ngIf="dsJumpForLastYearByJumpType != null else loadingDsJumpForLastYearByJumpType"> *ngIf="dsJumpForLastYearByJumpType != null else loadingDsJumpForLastYearByJumpType">
<ng-container matColumnDef="label"> <ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td> <td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="nb"> <ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td> <td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<ng-template #loadingDsJumpForLastYearByJumpType> <ng-template #loadingDsJumpForLastYearByJumpType>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner> <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template> </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">
<table mat-table [dataSource]="dsNbJumpByDz" *ngIf="dsNbJumpByDz != null else loadingDsNbJumpByDz"> <ng-container matColumnDef="label">
<ng-container matColumnDef="label"> <td mat-cell *matCellDef="let element">{{element.label}}</td>
<td mat-cell *matCellDef="let element">{{element.label}}</td> </ng-container>
</ng-container> <ng-container matColumnDef="nb">
<ng-container matColumnDef="nb"> <td mat-cell *matCellDef="let element">{{element.nb}}</td>
<td mat-cell *matCellDef="let element">{{element.nb}}</td> </ng-container>
</ng-container> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table>
</table> <ng-template #loadingDsNbJumpByDz>
<ng-template #loadingDsNbJumpByDz> <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner> </ng-template>
</ng-template> </mat-tab>
</div>
<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"> <ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td> <td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="nb"> <ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td> <td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<ng-template #loadingDsNbJumpByAircraft> <ng-template #loadingDsNbJumpByAircraft>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner> <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template> </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">
<table mat-table [dataSource]="dsNbJumpByGear" *ngIf="dsNbJumpByGear != null else loadingDsNbJumpByGear"> <ng-container matColumnDef="label">
<ng-container matColumnDef="label"> <td mat-cell *matCellDef="let element">{{element.label}}</td>
<td mat-cell *matCellDef="let element">{{element.label}}</td> </ng-container>
</ng-container> <ng-container matColumnDef="nb">
<ng-container matColumnDef="nb"> <td mat-cell *matCellDef="let element">{{element.nb}}</td>
<td mat-cell *matCellDef="let element">{{element.nb}}</td> </ng-container>
</ng-container> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table>
</table> <ng-template #loadingDsNbJumpByGear>
<ng-template #loadingDsNbJumpByGear> <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner> </ng-template>
</ng-template> </mat-tab>
</div>
<div class="paragraph"> <mat-tab label="By jump type">
<label>By jump type</label> <table mat-table [dataSource]="dsNbJumpByType" *ngIf="dsNbJumpByType != null else loadingDsNbJumpByType">
<table mat-table [dataSource]="dsNbJumpByType" *ngIf="dsNbJumpByType != null else loadingDsNbJumpByType"> <ng-container matColumnDef="label">
<ng-container matColumnDef="label"> <td mat-cell *matCellDef="let element">{{element.label}}</td>
<td mat-cell *matCellDef="let element">{{element.label}}</td> </ng-container>
</ng-container> <ng-container matColumnDef="nb">
<ng-container matColumnDef="nb"> <td mat-cell *matCellDef="let element">{{element.nb}}</td>
<td mat-cell *matCellDef="let element">{{element.nb}}</td> </ng-container>
</ng-container> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table>
</table> <ng-template #loadingDsNbJumpByType>
<ng-template #loadingDsNbJumpByType> <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner> </ng-template>
</ng-template> </mat-tab>
</div>
<div class="paragraph"> <mat-tab label="By year">
<label>By year</label> <table mat-table [dataSource]="dsNbJumpByYear" *ngIf="dsNbJumpByYear != null else loadingDsNbJumpByYear">
<table mat-table [dataSource]="dsNbJumpByYear" *ngIf="dsNbJumpByYear != null else loadingDsNbJumpByYear"> <ng-container matColumnDef="label">
<ng-container matColumnDef="label"> <td mat-cell *matCellDef="let element">{{element.label}}</td>
<td mat-cell *matCellDef="let element">{{element.label}}</td> </ng-container>
</ng-container> <ng-container matColumnDef="nb">
<ng-container matColumnDef="nb"> <td mat-cell *matCellDef="let element">{{element.nb}}</td>
<td mat-cell *matCellDef="let element">{{element.nb}}</td> </ng-container>
</ng-container> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table>
</table> <ng-template #loadingDsNbJumpByYear>
<ng-template #loadingDsNbJumpByYear> <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner> </ng-template>
</ng-template> </mat-tab>
</div> </mat-tab-group>

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

@@ -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 { import {
StatsByDzResp, StatsByDzResp,
StatsByAircraftResp, StatsByAircraftResp,
StatsByGearResp, StatsByGearResp,
StatsByJumpTypeResp, StatsByJumpTypeResp,
StatsByYearResp StatsByYearResp
} from "../../models/stats"; } from '../../models/stats';
@Component({ @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 { export class SummaryComponent implements OnInit {
public dsNbJumpByDz: MatTableDataSource<StatsByDzResp>; public dsNbJumpByDz: MatTableDataSource<StatsByDzResp>;
@@ -27,16 +27,16 @@ export class SummaryComponent implements OnInit {
public dsJumpForLastMonthByJumpType: MatTableDataSource<StatsByJumpTypeResp>; public dsJumpForLastMonthByJumpType: MatTableDataSource<StatsByJumpTypeResp>;
private countDatasLoaded: number; private countDatasLoaded: number;
public displayedColumns: Array<string> = ["label", "nb"]; public displayedColumns: Array<string> = ['label', 'nb'];
constructor( constructor(
private serviceApi: StatsService, private serviceApi: StatsService,
private serviceComm: ServiceComm private serviceComm: ServiceComm
) {} ) { }
ngOnInit() { ngOnInit() {
this.countDatasLoaded = 0; this.countDatasLoaded = 0;
this.serviceComm.UpdatedComponentTitle("Summary"); this.serviceComm.UpdatedComponentTitle('Summary');
const statsResult = this.serviceApi.getStatsOfJumps(); const statsResult = this.serviceApi.getStatsOfJumps();