Ajouter un loader sur l'ajout des sauts
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
@@ -42,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);
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user