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

Ajout d'un loading sur la page Summary

Browse Source
This commit is contained in:
Sébastien André
2020-02-14 10:20:48 +01:00
parent d77067b57e
commit a1adc417bb
4 changed files with 110 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Back/skydiveLogs-api/skydiveLogs-api.csproj.user
View File

@@ -10,5 +10,6 @@
<WebStackScaffolding_LayoutPageFile />
<WebStackScaffolding_IsAsyncSelected>False</WebStackScaffolding_IsAsyncSelected>
<NameOfLastUsedPublishProfile>skydiveLogsApi - Web Deploy</NameOfLastUsedPublishProfile>
<ShowAllFiles>false</ShowAllFiles>
</PropertyGroup>
</Project>

6
Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts
View File

@@ -43,10 +43,10 @@ export class NewJumpComponent implements OnInit {
private serviceDropzone: DropzoneService,
private serviceGear: GearService,
private dateService: DateService
) {}
) { }
ngOnInit() {
this.serviceComm.UpdatedComponentTitle("Add a new jump");
this.serviceComm.UpdatedComponentTitle('Add a new jump');
this.endDate = new Date();
this.beginDate = this.dateService.AddDays(new Date(), -1);
@@ -136,6 +136,6 @@ export class NewJumpComponent implements OnInit {
}
public allDatasLoaded(): boolean {
return this.countDatasLoaded == 4;
return this.countDatasLoaded === 4;
}
}

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

@@ -1,91 +1,97 @@
<div>
<label>Total jumps</label>
Total Total
<div *ngIf="allDatasLoaded() else loading">
<div>
<label>Total jumps</label>
Total Total
</div>
<div class="paragraph">
<label>Total cutaways</label>
</div>
<div class="paragraph">
<label>Last jump</label>
Date and location
</div>
<div class="paragraph">
<label>Jumps in the last month</label>
</div>
<div class="paragraph">
<label>Jumps in the last year</label>
</div>
<div class="paragraph">
<label>By DZ</label>
<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>
</div>
<div class="paragraph">
<label>By aircraft</label>
<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>
</div>
<div class="paragraph">
<label>By gear</label>
<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>
</div>
<div class="paragraph">
<label>By jump type</label>
<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>
</div>
<div class="paragraph">
<label>By year</label>
<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>
</div>
</div>
<div class="paragraph">
<label>Total cutaways</label>
</div>
<div class="paragraph">
<label>Last jump</label>
Date and location
</div>
<div class="paragraph">
<label>Jumps in the last month</label>
</div>
<div class="paragraph">
<label>Jumps in the last year</label>
</div>
<div class="paragraph">
<label>By DZ</label>
<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>
</div>
<div class="paragraph">
<label>By aircraft</label>
<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>
</div>
<div class="paragraph">
<label>By gear</label>
<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>
</div>
<div class="paragraph">
<label>By jump type</label>
<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>
</div>
<div class="paragraph">
<label>By year</label>
<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>
</div>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>

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

@@ -15,6 +15,7 @@ export class SummaryComponent implements OnInit {
public dsNbJumpByGear;
public dsNbJumpByType;
public dsNbJumpByYear;
private countDatasLoaded: number;
constructor(
private serviceApi: StatsService,
@@ -22,24 +23,34 @@ export class SummaryComponent implements OnInit {
) { }
ngOnInit() {
this.countDatasLoaded = 0;
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++;
});
}
public allDatasLoaded(): boolean {
return this.countDatasLoaded === 5;
}
}