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

Ajout de loading sur le chargement

Browse Source 
de l'application + lors du chargement
des composants
This commit is contained in:
Sébastien André
2020-01-20 14:58:55 +01:00
parent ee0b08b967
commit 243b8a2ba4
17 changed files with 147 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,7 +37,8 @@ import {
MatInputModule,
MatButtonModule,
MatIconModule,
MatAutocompleteModule
MatAutocompleteModule,
MatProgressSpinnerModule
} from '@angular/material';
import { RequestCache } from '../services/request-cache.service';
@@ -90,7 +91,8 @@ const appRoutes: Routes = [
MatInputModule,
MatButtonModule,
MatIconModule,
MatAutocompleteModule
MatAutocompleteModule,
MatProgressSpinnerModule
],
exports: [HttpClientModule],
providers: [

14
Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html
View File

@@ -1,7 +1,7 @@
<button (click)="add()">Add a aircraft</button>
<app-new-aircraft *ngIf="showAddForm === true"></app-new-aircraft>
<div *ngIf="dataSourceTable != null else loading" class="table-container">
<button (click)="add()">Add a aircraft</button>
<app-new-aircraft *ngIf="showAddForm === true"></app-new-aircraft>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
@@ -16,6 +16,10 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [length]="resultsLength" [pageSize]="5"></mat-paginator>
</div>
<mat-paginator [length]="resultsLength" [pageSize]="5"></mat-paginator>
<ng-template #loading>Waiting...</ng-template>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>

10
Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts
View File

@@ -30,10 +30,12 @@ export class ListOfAircraftsComponent implements OnInit {
private getListOfAircrafts() {
this.serviceApi.getListOfAircrafts().subscribe(data => {
data.sort((a, b) => (b.name < a.name) ? 1 : -1);
this.dataSourceTable = new MatTableDataSource<AircraftResp>(data);
this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
setTimeout(() => {
data.sort((a, b) => (b.name < a.name) ? 1 : -1);
this.dataSourceTable = new MatTableDataSource<AircraftResp>(data);
this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
}, 2000);
});
}

14
Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
View File

@@ -1,7 +1,7 @@
<button (click)="add()">Add a aircraft</button>
<app-new-drop-zone *ngIf="showAddForm === true"></app-new-drop-zone>
<div *ngIf="dataSourceTable != null else loading" class="table-container">
<button (click)="add()">Add a aircraft</button>
<app-new-drop-zone *ngIf="showAddForm === true"></app-new-drop-zone>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="isfavorite">
<th mat-header-cell *matHeaderCellDef></th>
@@ -52,7 +52,11 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
</div>
<mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
<ng-template #loading>Waiting...</ng-template>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>

10
Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts
View File

@@ -41,10 +41,12 @@ export class ListOfDzsComponent implements OnInit {
private getListOfDropZones() {
this.serviceApiGet.getListOfDropZones().subscribe(data => {
data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0));
this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
setTimeout(() => {
data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0));
this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
}, 2000);
});
}

13
Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html
View File

@@ -1,7 +1,7 @@
<button (click)="add()">Add a aircraft</button>
<app-new-gear *ngIf="showAddForm === true"></app-new-gear>
<div *ngIf="dataSourceTable != null else loading" class="table-container">
<button (click)="add()">Add a aircraft</button>
<app-new-gear *ngIf="showAddForm === true"></app-new-gear>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
@@ -41,6 +41,9 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
<ng-template #loading>Waiting...</ng-template>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>

8
Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts
View File

@@ -44,9 +44,11 @@ export class ListOfGearsComponent implements OnInit {
getListOfGears() {
this.serviceApi.getListOfGears().subscribe(data => {
this.dataSourceTable = new MatTableDataSource<GearResp>(data);
this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
setTimeout(() => {
this.dataSourceTable = new MatTableDataSource<GearResp>(data);
this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
}, 2000);
});
}

13
Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html
View File

@@ -1,7 +1,7 @@
<button (click)="add()">Add a aircraft</button>
<app-new-jump-type *ngIf="showAddForm === true"></app-new-jump-type>
<div *ngIf="dataSourceTable != null else loading" class="table-container">
<button (click)="add()">Add a aircraft</button>
<app-new-jump-type *ngIf="showAddForm === true"></app-new-jump-type>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
@@ -16,6 +16,9 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
</div>
<mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
<ng-template #loading>Waiting...</ng-template>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>

10
Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts
View File

@@ -30,10 +30,12 @@ export class ListOfJumpTypesComponent implements OnInit {
getListOfJumpTypes() {
this.serviceApi.getListOfJumpTypes().subscribe(data => {
data.sort((a, b) => (b.name < a.name) ? 1 : -1);
this.dataSourceTable = new MatTableDataSource<JumpTypeResp>(data);
this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
setTimeout(() => {
data.sort((a, b) => (b.name < a.name) ? 1 : -1);
this.dataSourceTable = new MatTableDataSource<JumpTypeResp>(data);
this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
}, 2000);
});
}

7
Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
View File

@@ -30,6 +30,9 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
<ng-template #loading>Waiting...</ng-template>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>

10
Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts
View File

@@ -39,10 +39,12 @@ export class ListOfJumpsComponent implements OnInit {
getListOfJumps() {
this.listOfJumps = this.serviceApi.getListOfJumps();
this.listOfJumps.subscribe(data => {
data.sort((a, b) => b.jumpDate.getTime() - a.jumpDate.getTime());
this.dataSourceTable = new MatTableDataSource<JumpResp>(data);
this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
setTimeout(() => {
data.sort((a, b) => b.jumpDate.getTime() - a.jumpDate.getTime());
this.dataSourceTable = new MatTableDataSource<JumpResp>(data);
this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
}, 2000);
});
}
}