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

Autcomplete ajouté sur les dropdown list

Browse Source 
du formulaire d'ajout de sauts
This commit is contained in:
Sébastien André
2019-11-25 11:20:50 +01:00
parent ec5fac8826
commit 41eecd2a68
3 changed files with 99 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,24 +1,24 @@
import { BrowserModule } from "@angular/platform-browser"; import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from "@angular/core"; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router"; import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http"; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from "./app.component"; import { AppComponent } from './app.component';
import { SummaryComponent } from "./summary/summary.component"; import { SummaryComponent } from './summary/summary.component';
import { ListOfJumpsComponent } from "./list-of-jumps/list-of-jumps.component"; import { ListOfJumpsComponent } from './list-of-jumps/list-of-jumps.component';
import { ListOfDzsComponent } from "./list-of-dzs/list-of-dzs.component"; import { ListOfDzsComponent } from './list-of-dzs/list-of-dzs.component';
import { NewJumpComponent } from "./new-jump/new-jump.component"; import { NewJumpComponent } from './new-jump/new-jump.component';
import { ListOfAircraftsComponent } from "./list-of-aircrafts/list-of-aircrafts.component"; import { ListOfAircraftsComponent } from './list-of-aircrafts/list-of-aircrafts.component';
import { ListOfJumpTypesComponent } from "./list-of-jump-types/list-of-jump-types.component"; import { ListOfJumpTypesComponent } from './list-of-jump-types/list-of-jump-types.component';
import { ListOfGearsComponent } from "./list-of-gears/list-of-gears.component"; import { ListOfGearsComponent } from './list-of-gears/list-of-gears.component';
import { DateService } from "../services/date.service"; import { DateService } from '../services/date.service';
import { ServiceApiGet } from "../services/service-api-get.service"; import { ServiceApiGet } from '../services/service-api-get.service';
import { ServiceApiPost } from "../services/service-api-post.service"; import { ServiceApiPost } from '../services/service-api-post.service';
import { ServiceComm } from "../services/service-comm.service"; import { ServiceComm } from '../services/service-comm.service';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from "@angular/forms"; import { FormsModule } from '@angular/forms';
import { import {
MatPaginatorModule, MatPaginatorModule,
MatTableModule, MatTableModule,
@@ -30,19 +30,20 @@ import {
MatNativeDateModule, MatNativeDateModule,
MatInputModule, MatInputModule,
MatButtonModule, MatButtonModule,
MatIconModule MatIconModule,
} from "@angular/material"; MatAutocompleteModule
import { RequestCache } from "../services/request-cache.service"; } from '@angular/material';
import { CachingInterceptor } from "../services/caching-interceptor.service"; import { RequestCache } from '../services/request-cache.service';
import { CachingInterceptor } from '../services/caching-interceptor.service';
const appRoutes: Routes = [ const appRoutes: Routes = [
{ path: "summary", component: SummaryComponent }, { path: 'summary', component: SummaryComponent },
{ path: "jumps", component: ListOfJumpsComponent }, { path: 'jumps', component: ListOfJumpsComponent },
{ path: "dzs", component: ListOfDzsComponent }, { path: 'dzs', component: ListOfDzsComponent },
{ path: "newjump", component: NewJumpComponent }, { path: 'newjump', component: NewJumpComponent },
{ path: "aircrafts", component: ListOfAircraftsComponent }, { path: 'aircrafts', component: ListOfAircraftsComponent },
{ path: "jumpTypes", component: ListOfJumpTypesComponent }, { path: 'jumpTypes', component: ListOfJumpTypesComponent },
{ path: "gears", component: ListOfGearsComponent } { path: 'gears', component: ListOfGearsComponent }
]; ];
@NgModule({ @NgModule({
@@ -74,7 +75,8 @@ const appRoutes: Routes = [
MatNativeDateModule, MatNativeDateModule,
MatInputModule, MatInputModule,
MatButtonModule, MatButtonModule,
MatIconModule MatIconModule,
MatAutocompleteModule
], ],
exports: [HttpClientModule], exports: [HttpClientModule],
providers: [ providers: [

43
Front/skydivelogs-app/src/app/new-jump/new-jump.component.html
View File

@@ -1,38 +1,57 @@
<form class="example-container" (ngSubmit)="onFormSubmit()"> <form class="example-container" (ngSubmit)="onFormSubmit()">
<mat-form-field> <mat-form-field>
<mat-label>Choose the jump type</mat-label> <mat-label>Choose the jump type</mat-label>
<mat-select [(ngModel)]="selectedJumpType" name="selectedJumpType"> <input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType" name="selectedJumpType">
<mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType.id"> <mat-autocomplete #autoJumpType="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
{{jumpType.name}} {{jumpType.name}}
</mat-option> </mat-option>
</mat-select> </mat-autocomplete>
<button mat-button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedJumpType=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label>Choose the aircraft</mat-label> <mat-label>Choose the aircraft</mat-label>
<mat-select [(ngModel)]="selectedAircraft" name="selectedAircraft"> <input type="text" matInput [matAutocomplete]="autoAircraft" [(ngModel)]="selectedAircraft" name="selectedAircraft">
<mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft.id"> <mat-autocomplete #autoAircraft="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft">
{{aircraft.name}} {{aircraft.name}}
</mat-option> </mat-option>
</mat-select> </mat-autocomplete>
<button mat-button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedAircraft=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label>Choose the DZ</mat-label> <mat-label>Choose the DZ</mat-label>
<mat-select [(ngModel)]="selectedDz" name="selectedDz"> <input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedDz" name="selectedDz">
<mat-option *ngFor="let dropZone of listOfDropZone" [value]="dropZone.id"> <mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let dropZone of listOfDropZone" [value]="dropZone">
{{dropZone.name}} {{dropZone.name}}
</mat-option> </mat-option>
</mat-select> </mat-autocomplete>
<button mat-button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="selectedDz=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label>Choose the used gear</mat-label> <mat-label>Choose the used gear</mat-label>
<mat-select [(ngModel)]="selectedGear" name="selectedGear"> <input type="text" matInput [matAutocomplete]="autoGear" [(ngModel)]="selectedGear" name="selectedGear">
<mat-option *ngFor="let gear of listOfGear" [value]="gear.id"> <mat-autocomplete #autoGear="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let gear of listOfGear" [value]="gear">
{{gear.name}} {{gear.name}}
</mat-option> </mat-option>
</mat-select> </mat-autocomplete>
<button mat-button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedGear=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field> </mat-form-field>
<mat-checkbox [(ngModel)]="withCutaway" name="withCutaway">With a cutaway ?</mat-checkbox> <mat-checkbox [(ngModel)]="withCutaway" name="withCutaway">With a cutaway ?</mat-checkbox>

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

@@ -1,18 +1,18 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from '@angular/core';
import { ServiceComm } from "../../services/service-comm.service"; import { ServiceComm } from '../../services/service-comm.service';
import { ServiceApiGet } from "../../services/service-api-get.service"; import { ServiceApiGet } from '../../services/service-api-get.service';
import { ServiceApiPost } from "../../services/service-api-post.service"; import { ServiceApiPost } from '../../services/service-api-post.service';
import { JumpTypeResp } from "../../models/jumpType"; import { JumpTypeResp } from '../../models/jumpType';
import { AircraftResp } from "../../models/aircraft"; import { AircraftResp } from '../../models/aircraft';
import { DropZoneResp } from "../../models/dropzone"; import { DropZoneResp } from '../../models/dropzone';
import { DateService } from "../../services/date.service"; import { DateService } from '../../services/date.service';
import { GearResp } from "../../models/gear"; import { GearResp } from '../../models/gear';
import { isNumber } from "util"; import { isNumber } from 'util';
@Component({ @Component({
selector: "app-new-jump", selector: 'app-new-jump',
templateUrl: "./new-jump.component.html", templateUrl: './new-jump.component.html',
styleUrls: ["./new-jump.component.css"] styleUrls: ['./new-jump.component.css']
}) })
export class NewJumpComponent implements OnInit { export class NewJumpComponent implements OnInit {
beginDate: Date; beginDate: Date;
@@ -20,10 +20,10 @@ export class NewJumpComponent implements OnInit {
exitAltitude: number; exitAltitude: number;
deployAltitude: number; deployAltitude: number;
countOfJumps: number; countOfJumps: number;
selectedDz: number; selectedDz: DropZoneResp;
selectedGear: number; selectedGear: GearResp;
selectedAircraft: number; selectedAircraft: AircraftResp;
selectedJumpType: number; selectedJumpType: JumpTypeResp;
withCutaway: boolean; withCutaway: boolean;
listOfJumpType: Array<JumpTypeResp>; listOfJumpType: Array<JumpTypeResp>;
listOfAircraft: Array<AircraftResp>; listOfAircraft: Array<AircraftResp>;
@@ -38,7 +38,7 @@ export class NewJumpComponent implements OnInit {
) { } ) { }
ngOnInit() { ngOnInit() {
this.serviceComm.updatedComponentTitle("Add a new jump"); this.serviceComm.updatedComponentTitle('Add a new jump');
this.endDate = new Date(); this.endDate = new Date();
@@ -53,10 +53,10 @@ export class NewJumpComponent implements OnInit {
onFormSubmit() { onFormSubmit() {
this.serviceApiPost.AddListOfJump( this.serviceApiPost.AddListOfJump(
this.selectedJumpType, this.selectedJumpType.id,
this.selectedAircraft, this.selectedAircraft.id,
this.selectedDz, this.selectedDz.id,
this.selectedGear, this.selectedGear.id,
this.withCutaway, this.withCutaway,
this.beginDate, this.beginDate,
this.endDate, this.endDate,
@@ -68,13 +68,13 @@ export class NewJumpComponent implements OnInit {
public isValidatedForm(): boolean { public isValidatedForm(): boolean {
return ( return (
this.selectedDz != undefined && this.selectedDz !== undefined &&
this.selectedGear != undefined && this.selectedGear !== undefined &&
this.selectedAircraft != undefined && this.selectedAircraft !== undefined &&
this.selectedJumpType != undefined && this.selectedJumpType !== undefined &&
this.exitAltitude != undefined && isNumber(this.exitAltitude) && this.exitAltitude !== undefined && isNumber(this.exitAltitude) &&
this.deployAltitude != undefined && isNumber(this.deployAltitude) && this.deployAltitude !== undefined && isNumber(this.deployAltitude) &&
this.countOfJumps != undefined && isNumber(this.countOfJumps) this.countOfJumps !== undefined && isNumber(this.countOfJumps)
); );
} }
@@ -104,4 +104,9 @@ export class NewJumpComponent implements OnInit {
this.listOfGear = data; this.listOfGear = data;
}); });
} }
displayFn(data?: JumpTypeResp): string | undefined {
return data ? data.name : undefined;
}
} }