Ajouter un loader sur l'ajout des sauts

This commit is contained in:
Sébastien André
2020-02-03 12:26:25 +01:00
parent 72f0b13f34
commit 2d6b8f8b5f
3 changed files with 44 additions and 26 deletions

View File

@@ -1,6 +1,6 @@
.hamburger__icon {
position: relative;
z-index: 50;
/* z-index: 101; */
height: 1rem;
margin-right: 1rem;
cursor: pointer;
@@ -19,7 +19,7 @@
position: absolute;
width: 200px;
overflow: hidden;
z-index: 50;
z-index: 101;
background-color: grey;
height: 650px;
padding: 5px;

View File

@@ -1,4 +1,4 @@
<form class="formNewJumps" (ngSubmit)="onFormSubmit()">
<form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="allDatasLoaded() else loading">
<mat-form-field>
<mat-label>Choose the jump type</mat-label>
<input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType" name="selectedJumpType">
@@ -97,3 +97,7 @@
<br />
<button class="btn btn-primary" *ngIf="isValidatedForm()">Submit</button>
</form>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>

View File

@@ -1,21 +1,21 @@
import { Component, OnInit } from '@angular/core';
import { JumpTypeResp } from '../../models/jumpType';
import { AircraftResp } from '../../models/aircraft';
import { DropZoneResp } from '../../models/dropzone';
import { DateService } from '../../services/date.service';
import { GearResp } from '../../models/gear';
import { ServiceComm } from '../../services/service-comm.service';
import { DropzoneService } from '../../services/dropzone.service';
import { AircraftService } from '../../services/aircraft.service';
import { JumpService } from '../../services/jump.service';
import { JumpTypeService } from '../../services/jump-type.service';
import { GearService } from '../../services/gear.service';
import { isNumber } from 'util';
import { Component, OnInit } from "@angular/core";
import { JumpTypeResp } from "../../models/jumpType";
import { AircraftResp } from "../../models/aircraft";
import { DropZoneResp } from "../../models/dropzone";
import { DateService } from "../../services/date.service";
import { GearResp } from "../../models/gear";
import { ServiceComm } from "../../services/service-comm.service";
import { DropzoneService } from "../../services/dropzone.service";
import { AircraftService } from "../../services/aircraft.service";
import { JumpService } from "../../services/jump.service";
import { JumpTypeService } from "../../services/jump-type.service";
import { GearService } from "../../services/gear.service";
import { isNumber } from "util";
@Component({
selector: 'app-new-jump',
templateUrl: './new-jump.component.html',
styleUrls: ['./new-jump.component.css']
selector: "app-new-jump",
templateUrl: "./new-jump.component.html",
styleUrls: ["./new-jump.component.css"]
})
export class NewJumpComponent implements OnInit {
beginDate: Date;
@@ -33,6 +33,7 @@ export class NewJumpComponent implements OnInit {
private listOfDropZone: Array<DropZoneResp>;
listOfFilteredDropZone: Array<DropZoneResp>;
listOfGear: Array<GearResp>;
private countDatasLoaded: number;
constructor(
private serviceComm: ServiceComm,
@@ -45,7 +46,7 @@ export class NewJumpComponent implements OnInit {
) {}
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);
@@ -78,15 +79,20 @@ export class NewJumpComponent implements OnInit {
this.selectedGear !== undefined &&
this.selectedAircraft !== undefined &&
this.selectedJumpType !== undefined &&
this.exitAltitude !== undefined && isNumber(this.exitAltitude) &&
this.deployAltitude !== undefined && isNumber(this.deployAltitude) &&
this.countOfJumps !== undefined && isNumber(this.countOfJumps)
this.exitAltitude !== undefined &&
isNumber(this.exitAltitude) &&
this.deployAltitude !== undefined &&
isNumber(this.deployAltitude) &&
this.countOfJumps !== undefined &&
isNumber(this.countOfJumps)
);
}
private getListOfJumpTypes() {
this.serviceJumpType.getListOfJumpTypes().subscribe(data => {
this.listOfJumpType = data;
this.countDatasLoaded = 1;
this.getListOfAircrafts();
this.getListOfDropZones();
this.getListOfGears();
@@ -96,6 +102,7 @@ export class NewJumpComponent implements OnInit {
private getListOfAircrafts() {
this.serviceAircraft.getListOfAircrafts().subscribe(data => {
this.listOfAircraft = data;
this.countDatasLoaded++;
});
}
@@ -104,16 +111,17 @@ export class NewJumpComponent implements OnInit {
data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0));
this.listOfDropZone = data;
this.listOfFilteredDropZone = data;
this.countDatasLoaded++;
});
}
private getListOfGears() {
this.serviceGear.getListOfGears().subscribe(data => {
this.listOfGear = data;
this.countDatasLoaded++;
});
}
public displayFn(data?: JumpTypeResp): string | undefined {
return data ? data.name : undefined;
}
@@ -122,6 +130,12 @@ export class NewJumpComponent implements OnInit {
const filterValue = event.toLowerCase();
this.listOfFilteredDropZone = this.listOfDropZone;
this.listOfFilteredDropZone = this.listOfFilteredDropZone.filter(option => option.name.toLowerCase().includes(filterValue));
this.listOfFilteredDropZone = this.listOfFilteredDropZone.filter(option =>
option.name.toLowerCase().includes(filterValue)
);
}
public allDatasLoaded(): boolean {
return this.countDatasLoaded == 4;
}
}