Fix the page view
This commit is contained in:
Sébastien ANDRE
2023-06-19 20:37:49 +02:00
parent 7155ad1eae
commit d937938832
11 changed files with 132 additions and 40 deletions

View File

@@ -23,8 +23,9 @@
],
"styles": [
"src/assets/css/styles-app-loading.scss",
"@angular/material/prebuilt-themes/pink-bluegrey.css",
"src/assets/css/styles.css"
"src/assets/css/styles.css",
"src/assets/css/new-theme.scss",
"@angular/material/prebuilt-themes/pink-bluegrey.css"
],
"scripts": [],
"vendorChunk": true,

View File

@@ -11,7 +11,7 @@
</mat-form-field>
</p>
<button mat-button color="warn" type="submit">
<button mat-icon-button color="warn" type="submit">
<mat-icon>file_upload</mat-icon>
Upload image
</button>

View File

@@ -13,7 +13,7 @@
{{jumpType.name}}
</mat-option>
</mat-autocomplete>
<button mat-button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
<button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedJumpType=undefined">
<mat-icon>close</mat-icon>
</button>
@@ -28,7 +28,7 @@
{{aircraft.name}}
</mat-option>
</mat-autocomplete>
<button mat-button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
<button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedAircraft=undefined">
<mat-icon>close</mat-icon>
</button>
@@ -45,7 +45,7 @@
favorite</mat-icon>
</mat-option>
</mat-autocomplete>
<button mat-button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="resetDz()">
<button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="resetDz()">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
@@ -58,7 +58,7 @@
{{gear.name}} ({{gear.mainCanopy}})
</mat-option>
</mat-autocomplete>
<button mat-button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
<button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedGear=undefined">
<mat-icon>close</mat-icon>
</button>
@@ -82,14 +82,14 @@
<mat-form-field>
<input matInput placeholder="{{ 'NewJump_ExitAlt' | translate }}" [(ngModel)]="exitAltitude" name="exitAltitude" type="number">
<button mat-button *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear"
<button *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear"
(click)="exitAltitude=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="{{ 'NewJump_DeployAlt' | translate }}" [(ngModel)]="deployAltitude" name="deployAltitude" type="number">
<button mat-button *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear"
<button *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear"
(click)="deployAltitude=undefined">
<mat-icon>close</mat-icon>
</button>
@@ -97,7 +97,7 @@
<mat-form-field>
<input matInput placeholder="{{ 'NewJump_Count' | translate }}" [(ngModel)]="countOfJumps" name="countOfJumps" type="number">
<button mat-button *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear"
<button *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear"
(click)="countOfJumps=undefined">
<mat-icon>close</mat-icon>
</button>
@@ -105,7 +105,7 @@
<mat-form-field>
<textarea matInput placeholder="{{ 'NewJump_Comments' | translate }}" [(ngModel)]="comments" name="comments" type="text"></textarea>
<button mat-button *ngIf="comments" matSuffix mat-icon-button aria-label="Clear"
<button *ngIf="comments" matSuffix mat-icon-button aria-label="Clear"
(click)="comments=undefined">
<mat-icon>close</mat-icon>
</button>

View File

@@ -1,12 +1,48 @@
<div class="content">
<form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="notLoadingToDisplay() else loading">
<form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="notLoadingToDisplay() else loading">
<mat-form-field>
<mat-label>{{ 'NewTunnelFlight_ChooseTunnel' | translate }}</mat-label>
<input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedTunnel"
(ngModelChange)="onChangeTunnel($event)" name="selectedTunnel">
<mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayNameFn">
<mat-option *ngFor="let tunnel of listOfFilteredTunnel" [value]="tunnel">
{{tunnel.name}}
</mat-option>
</mat-autocomplete>
<button *ngIf="selectedTunnel" matSuffix mat-icon-button aria-label="Clear" (click)="resetTunnel()">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<br />
<button mat-raised-button color="accent" *ngIf="isValidatedForm()">{{ 'NewJump_Submit' | translate }}</button>
</form>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
<mat-form-field>
<input matInput [matDatepicker]="flightDateDp" [(ngModel)]="flightDate" name="flightDate" disabled>
<mat-datepicker-toggle matSuffix [for]="flightDateDp"></mat-datepicker-toggle>
<mat-datepicker #flightDateDp disabled="false"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="{{ 'NewTunnelFlight_Minutes' | translate }}" [(ngModel)]="minutesOfFlight"
name="minutesOfFlight" type="number">
<button *ngIf="minutesOfFlight" matSuffix mat-icon-button aria-label="Clear" (click)="minutesOfFlight=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="{{ 'NewTunnelFlight_Comments' | translate }}" [(ngModel)]="comments"
name="comments" type="text"></textarea>
<button *ngIf="comments" matSuffix mat-icon-button aria-label="Clear" (click)="comments=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<br />
<button mat-raised-button color="accent" *ngIf="isValidatedForm()">{{ 'NewTunnelFlight_Submit' | translate
}}</button>
</form>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div>

View File

@@ -36,11 +36,11 @@ class PickDateAdapter extends NativeDateAdapter {
]
})
export class NewTunnelFlightComponent implements OnInit {
public beginDate: Date;
public endDate: Date;
public flightDate: Date;
public minutesOfFlight: number;
public selectedTunnel: TunnelResp;
public listOfTunnel: Array<TunnelResp>;
public listOfFilteredTunnel: Array<TunnelResp>;
public resetForm: boolean;
public comments: string;
private countDatasLoaded: number;
@@ -49,7 +49,6 @@ export class NewTunnelFlightComponent implements OnInit {
constructor(private serviceComm: ServiceComm,
private serviceTunnel: TunnelService,
private serviceTunnelFlight: TunnelFlightService,
private dateService: DateService,
private translateService: TranslateService,
private statsService: StatsService) { }
@@ -70,7 +69,7 @@ export class NewTunnelFlightComponent implements OnInit {
this.pendingAddRequest = true;
this.serviceTunnelFlight.addFlight(this.selectedTunnel.id,
this.beginDate,
this.flightDate,
this.minutesOfFlight,
this.comments)
.subscribe(() => {
@@ -95,12 +94,14 @@ export class NewTunnelFlightComponent implements OnInit {
this.serviceTunnel.getListOfTunnels().subscribe((data) => {
data.sort((a, b) => a.name.localeCompare(b.name));
this.listOfTunnel = data;
this.listOfFilteredTunnel = data;
this.countDatasLoaded++;
});
}
public notLoadingToDisplay(): boolean {
return !(this.pendingAddRequest || this.countDatasLoaded !== 1);
// return !(this.pendingAddRequest || this.countDatasLoaded > 1);
return true;
}
private updateTitle() {
@@ -110,12 +111,29 @@ export class NewTunnelFlightComponent implements OnInit {
}
private initForm() {
this.endDate = new Date();
this.endDate.setHours(0, 0, 0, 0);
this.beginDate = this.dateService.AddDays(this.endDate, -1);
this.flightDate = new Date();
this.flightDate.setHours(0, 0, 0, 0);
this.minutesOfFlight = 1;
this.selectedTunnel = undefined;
this.comments = undefined;
}
public resetTunnel() {
this.selectedTunnel = undefined;
this.onChangeTunnel('');
}
public onChangeTunnel(event: any) {
let filterValue: string;
if (event.id === undefined) {
filterValue = event.toLowerCase();
this.listOfFilteredTunnel = this.listOfTunnel;
this.listOfFilteredTunnel = this.listOfFilteredTunnel.filter((option) =>
option.name.toLowerCase().includes(filterValue)
);
}
}
}

View File

@@ -6,7 +6,7 @@
src: url(../font/Material-Icons-Fallback.woff2) format('woff2');
}
.material-icons {
/* .material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
@@ -20,4 +20,29 @@
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
} */
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}

View File

@@ -1,10 +1,11 @@
// https://theme-builder-1623190217839.web.app/
@use '@angular/material' as mat;
// @use '@angular/material' as mat;
@import "Material-Icons";
@import "Roboto";
/*
// Be sure that you only ever include this mixin once!
@include mat.core();
@@ -113,4 +114,5 @@
.dark-theme {
@include mat.all-component-colors($mat-dark-theme);
}
}
*/

View File

@@ -36,7 +36,7 @@
"ListJumpTypes_Title" : "List of jump types",
"ListGears_Title" : "List of gears",
"ListAircrafts_Title" : "List of aircrafts",
"NewTunnelFlight_Title" : "Nouveaux tunnel flights",
"NewTunnelFlight_Title" : "New tunnel flights",
"App_Footer" : "Web software to log your skydive jumps - v",
"App_Nav_Summary" : "Summary",
@@ -111,5 +111,10 @@
"NewJump_DeployAlt" : "Deploy altitude",
"NewJump_Count" : "Count of jumps",
"NewJump_Comments" : "Comments",
"NewJump_Submit" : "Submit"
"NewJump_Submit" : "Submit",
"NewTunnelFlight_ChooseTunnel": "Choose the tunnel",
"NewTunnelFlight_Minutes": "Minutes of the flight",
"NewTunnelFlight_Comments": "Comments",
"NewTunnelFlight_Submit": "Submit"
}

View File

@@ -101,15 +101,20 @@
"NewJump_GoToJump" : "Voir les sauts",
"NewJump_ResetForm" : "Reset du formulaire après l'ajout",
"NewJump_ChooseJumpType" : "Choisir un type de saut",
"NewJump_ChooseAircraft" : "Choisir un avion largueur",
"NewJump_ChooseDz" : "Choisir un centre",
"NewJump_ChooseGear" : "Choisir un piège",
"NewJump_ChooseJumpType" : "Choisir le type de saut",
"NewJump_ChooseAircraft" : "Choisir l'avion largueur",
"NewJump_ChooseDz" : "Choisir le centre",
"NewJump_ChooseGear" : "Choisir le piège",
"NewJump_Cutaway" : "Libération ?",
"NewJump_Special" : "Saut spécial ?",
"NewJump_ExitAlt" : "Altitude de sortie",
"NewJump_DeployAlt" : "Altitude d'ouverture",
"NewJump_Count" : "Nombre de sauts",
"NewJump_Comments" : "Commentaires",
"NewJump_Submit" : "Ajouter"
"NewJump_Submit" : "Ajouter",
"NewTunnelFlight_ChooseTunnel": "Choisir le tunnel",
"NewTunnelFlight_Minutes": "Temps de vol(minutes)",
"NewTunnelFlight_Comments": "Commentaires",
"NewTunnelFlight_Submit": "Ajouter"
}

View File

@@ -8,9 +8,8 @@ import { BaseService } from "./base.service";
@Injectable()
export class TunnelFlightService extends BaseService {
private datePipe: DatePipe;
constructor(private http: HttpClient) {
constructor(private http: HttpClient,
private datePipe: DatePipe) {
super();
}