indent_size à 4

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.css

@@ -1,18 +1,17 @@
 .formNewJumps {
     display: flex;
     flex-direction: column;
-  
+
     min-width: 150px;
     max-width: 500px;
     width: 100%;
-  }
-  
-  .content {
+}
+
+.content {
     min-height: 90vh;
     display: flex;
     justify-content: left;
     flex-direction: column;
     align-items: initial;
     padding-top: 25px;
-  }
-  
+}

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.html

@@ -1,149 +1,153 @@
 <div class="content">
-  <div>
-    <button
-      mat-raised-button
-      color="accent"
-      [routerLink]="['/tunnelFlights']"
-      [routerLinkActive]="['active']"
-      skipLocationChange
-      >
-      {{ "NewTunnelFlight_GoToJump" | translate }}
-    </button>
-  </div>
-
-  @if (notLoadingToDisplay()) {
-    <form
-      class="formNewJumps"
-      (ngSubmit)="onFormSubmit()"
-      >
-      <mat-form-field>
-        <mat-label>{{ "NewTunnelFlight_ChooseJumpType" | translate }}</mat-label>
-        <input
-          type="text"
-          matInput
-          [matAutocomplete]="autoJumpType"
-          [(ngModel)]="selectedJumpType"
-          name="selectedJumpType"
-          />
-        <mat-autocomplete
-          #autoJumpType="matAutocomplete"
-          [displayWith]="displayNameFn"
-          >
-          @for (jumpType of listOfJumpType; track jumpType) {
-            <mat-option [value]="jumpType">
-              {{ jumpType.name }}
-            </mat-option>
-          }
-        </mat-autocomplete>
-        @if (selectedJumpType) {
-          <button
-            matSuffix
-            mat-icon-button
-            aria-label="Clear"
-            (click)="selectedJumpType = undefined"
-            >
-            <mat-icon>close</mat-icon>
-          </button>
-        }
-      </mat-form-field>
-      <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"
-          >
-          @for (tunnel of listOfFilteredTunnel; track tunnel) {
-            <mat-option
-              [value]="tunnel"
-              >
-              {{ tunnel.name }}
-            </mat-option>
-          }
-        </mat-autocomplete>
-        @if (selectedTunnel) {
-          <button
-            matSuffix
-            mat-icon-button
-            aria-label="Clear"
-            (click)="resetTunnel()"
-            >
-            <mat-icon>close</mat-icon>
-          </button>
-        }
-      </mat-form-field>
-      <mat-form-field>
-        <mat-label>{{ "NewTunnelFlight_Date_Lbl" | translate }}</mat-label>
-        <input
-          matInput
-          [max]="maxDate"
-          [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>
-        <mat-label>{{ "NewTunnelFlight_Minutes_Lbl" | translate }}</mat-label>
-        <input
-          matInput
-          placeholder="{{ 'NewTunnelFlight_Minutes' | translate }}"
-          [(ngModel)]="minutesOfFlight"
-          name="minutesOfFlight"
-          type="number"
-          />
-        @if (minutesOfFlight) {
-          <button
-            matSuffix
-            mat-icon-button
-            aria-label="Clear"
-            (click)="minutesOfFlight = undefined"
-            >
-            <mat-icon>close</mat-icon>
-          </button>
-        }
-      </mat-form-field>
-      <mat-form-field>
-        <mat-label>{{ "NewTunnelFlight_Comments_Lbl" | translate }}</mat-label>
-        <textarea
-          matInput
-          placeholder="{{ 'NewTunnelFlight_Comments' | translate }}"
-          [(ngModel)]="comments"
-          name="comments"
-          type="text"
-        ></textarea>
-        @if (comments) {
-          <button
-            matSuffix
-            mat-icon-button
-            aria-label="Clear"
-            (click)="comments = undefined"
-            >
-            <mat-icon>close</mat-icon>
-          </button>
-        }
-      </mat-form-field>
-      <br />
-      @if (isValidatedForm()) {
-        <button mat-raised-button color="accent">
-          {{ "NewTunnelFlight_Submit" | translate }}
+    <div>
+        <button
+            mat-raised-button
+            color="accent"
+            [routerLink]="['/tunnelFlights']"
+            [routerLinkActive]="['active']"
+            skipLocationChange
+        >
+            {{ "NewTunnelFlight_GoToJump" | translate }}
         </button>
-      }
-    </form>
-  } @else {
-    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  }
+    </div>
 
+    @if (notLoadingToDisplay()) {
+        <form class="formNewJumps" (ngSubmit)="onFormSubmit()">
+            <mat-form-field>
+                <mat-label>{{
+                    "NewTunnelFlight_ChooseJumpType" | translate
+                }}</mat-label>
+                <input
+                    type="text"
+                    matInput
+                    [matAutocomplete]="autoJumpType"
+                    [(ngModel)]="selectedJumpType"
+                    name="selectedJumpType"
+                />
+                <mat-autocomplete
+                    #autoJumpType="matAutocomplete"
+                    [displayWith]="displayNameFn"
+                >
+                    @for (jumpType of listOfJumpType; track jumpType) {
+                        <mat-option [value]="jumpType">
+                            {{ jumpType.name }}
+                        </mat-option>
+                    }
+                </mat-autocomplete>
+                @if (selectedJumpType) {
+                    <button
+                        matSuffix
+                        mat-icon-button
+                        aria-label="Clear"
+                        (click)="selectedJumpType = undefined"
+                    >
+                        <mat-icon>close</mat-icon>
+                    </button>
+                }
+            </mat-form-field>
+            <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"
+                >
+                    @for (tunnel of listOfFilteredTunnel; track tunnel) {
+                        <mat-option [value]="tunnel">
+                            {{ tunnel.name }}
+                        </mat-option>
+                    }
+                </mat-autocomplete>
+                @if (selectedTunnel) {
+                    <button
+                        matSuffix
+                        mat-icon-button
+                        aria-label="Clear"
+                        (click)="resetTunnel()"
+                    >
+                        <mat-icon>close</mat-icon>
+                    </button>
+                }
+            </mat-form-field>
+            <mat-form-field>
+                <mat-label>{{
+                    "NewTunnelFlight_Date_Lbl" | translate
+                }}</mat-label>
+                <input
+                    matInput
+                    [max]="maxDate"
+                    [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>
+                <mat-label>{{
+                    "NewTunnelFlight_Minutes_Lbl" | translate
+                }}</mat-label>
+                <input
+                    matInput
+                    placeholder="{{ 'NewTunnelFlight_Minutes' | translate }}"
+                    [(ngModel)]="minutesOfFlight"
+                    name="minutesOfFlight"
+                    type="number"
+                />
+                @if (minutesOfFlight) {
+                    <button
+                        matSuffix
+                        mat-icon-button
+                        aria-label="Clear"
+                        (click)="minutesOfFlight = undefined"
+                    >
+                        <mat-icon>close</mat-icon>
+                    </button>
+                }
+            </mat-form-field>
+            <mat-form-field>
+                <mat-label>{{
+                    "NewTunnelFlight_Comments_Lbl" | translate
+                }}</mat-label>
+                <textarea
+                    matInput
+                    placeholder="{{ 'NewTunnelFlight_Comments' | translate }}"
+                    [(ngModel)]="comments"
+                    name="comments"
+                    type="text"
+                ></textarea>
+                @if (comments) {
+                    <button
+                        matSuffix
+                        mat-icon-button
+                        aria-label="Clear"
+                        (click)="comments = undefined"
+                    >
+                        <mat-icon>close</mat-icon>
+                    </button>
+                }
+            </mat-form-field>
+            <br />
+            @if (isValidatedForm()) {
+                <button mat-raised-button color="accent">
+                    {{ "NewTunnelFlight_Submit" | translate }}
+                </button>
+            }
+        </form>
+    } @else {
+        <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
+    }
 </div>

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.ts

@@ -2,9 +2,9 @@ import { Component, OnInit } from "@angular/core";
 import { RouterLink, RouterModule } from "@angular/router";
 import { formatDate } from "@angular/common";
 import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  NativeDateAdapter,
+    DateAdapter,
+    MAT_DATE_FORMATS,
+    NativeDateAdapter,
 } from "@angular/material/core";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
 
@@ -28,169 +28,169 @@ import { JumpTypeService } from "../../services/jump-type.service";
 import { DateService } from "../../services/date.service";
 
 export const PICK_FORMATS = {
-  parse: { dateInput: "yy MM dd" },
-  display: {
-    dateInput: "yyyy-MM-dd",
-    monthYearLabel: "yyyy MMM",
-    dateA11yLabel: "yyyy MM dd",
-    monthYearA11yLabel: "yyyy MMMM",
-  },
+    parse: { dateInput: "yy MM dd" },
+    display: {
+        dateInput: "yyyy-MM-dd",
+        monthYearLabel: "yyyy MMM",
+        dateA11yLabel: "yyyy MM dd",
+        monthYearA11yLabel: "yyyy MMMM",
+    },
 };
 class PickDateAdapter extends NativeDateAdapter {
-  override format(date: Date, displayFormat: Object): string {
-    return formatDate(date, displayFormat.toString(), "en");
-  }
+    override format(date: Date, displayFormat: Object): string {
+        return formatDate(date, displayFormat.toString(), "en");
+    }
 }
 
 @Component({
-  selector: "app-new-tunnel-flight",
-  templateUrl: "./new-tunnel-flight.component.html",
-  styleUrls: ["./new-tunnel-flight.component.css"],
-  providers: [
-    { provide: DateAdapter, useClass: PickDateAdapter },
-    { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS },
-  ],
-  imports: [
-    TranslateModule,
-    RouterModule,
-    RouterLink,
-    FormsModule,
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    MatAutocompleteModule,
-    MatInputModule,
-    MatButtonModule,
-    MatIconModule,
-    MatFormFieldModule,
-    MatOptionModule,
-    MatDatepickerModule,
-    MatProgressSpinnerModule
-],
+    selector: "app-new-tunnel-flight",
+    templateUrl: "./new-tunnel-flight.component.html",
+    styleUrls: ["./new-tunnel-flight.component.css"],
+    providers: [
+        { provide: DateAdapter, useClass: PickDateAdapter },
+        { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS },
+    ],
+    imports: [
+        TranslateModule,
+        RouterModule,
+        RouterLink,
+        FormsModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatAutocompleteModule,
+        MatInputModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatOptionModule,
+        MatDatepickerModule,
+        MatProgressSpinnerModule,
+    ],
 })
 export class NewTunnelFlightComponent implements OnInit {
-  public flightDate: Date;
-  public minutesOfFlight: number;
-  public selectedTunnel: TunnelResp;
-  public selectedJumpType: JumpTypeResp;
-  public listOfTunnel: Array<TunnelResp>;
-  public listOfFilteredTunnel: Array<TunnelResp>;
-  public resetForm: boolean;
-  public comments: string;
-  private countDatasLoaded: number;
-  private pendingAddRequest: boolean;
-  public listOfJumpType: Array<JumpTypeResp>;
-  public maxDate: Date;
+    public flightDate: Date;
+    public minutesOfFlight: number;
+    public selectedTunnel: TunnelResp;
+    public selectedJumpType: JumpTypeResp;
+    public listOfTunnel: Array<TunnelResp>;
+    public listOfFilteredTunnel: Array<TunnelResp>;
+    public resetForm: boolean;
+    public comments: string;
+    private countDatasLoaded: number;
+    private pendingAddRequest: boolean;
+    public listOfJumpType: Array<JumpTypeResp>;
+    public maxDate: Date;
 
-  constructor(
-    private serviceComm: ServiceComm,
-    private serviceTunnel: TunnelService,
-    private serviceTunnelFlight: TunnelFlightService,
-    private serviceJumpType: JumpTypeService,
-    private translateService: TranslateService,
-    private dateService: DateService
-  ) {}
+    constructor(
+        private serviceComm: ServiceComm,
+        private serviceTunnel: TunnelService,
+        private serviceTunnelFlight: TunnelFlightService,
+        private serviceJumpType: JumpTypeService,
+        private translateService: TranslateService,
+        private dateService: DateService,
+    ) {}
 
-  ngOnInit() {
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
+    ngOnInit() {
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
         this.updateTitle();
-      }
-    });
-    this.updateTitle();
 
-    this.maxDate = this.dateService.addDays(new Date(), 1);
-    this.countDatasLoaded = 0;
-    this.pendingAddRequest = false;
-    this.initForm();
-    this.getListOfTunnels();
-    this.getListOfJumpTypes();
-  }
-
-  public onFormSubmit() {
-    this.pendingAddRequest = true;
-
-    this.serviceTunnelFlight
-      .addFlight(
-        this.selectedTunnel.id,
-        this.selectedJumpType.id,
-        this.flightDate,
-        this.minutesOfFlight,
-        this.comments
-      )
-      .subscribe(() => {
-        this.comments = undefined;
-
-        if (this.resetForm === true) {
-          this.initForm();
-        }
+        this.maxDate = this.dateService.addDays(new Date(), 1);
+        this.countDatasLoaded = 0;
         this.pendingAddRequest = false;
-      });
-  }
-
-  public isValidatedForm(): boolean {
-    return (
-      this.selectedTunnel !== undefined &&
-      this.selectedTunnel.id !== undefined &&
-      this.minutesOfFlight !== undefined &&
-      typeof this.minutesOfFlight === "number"
-    );
-  }
-
-  private getListOfTunnels() {
-    this.serviceTunnel.getListOfTunnels().subscribe((data) => {
-      data.sort((a, b) => a.name.localeCompare(b.name));
-      this.listOfTunnel = data;
-      this.listOfFilteredTunnel = data;
-      this.countDatasLoaded++;
-    });
-  }
-
-  private getListOfJumpTypes() {
-    this.serviceJumpType.getListOfJumpTypesForTunnel().subscribe((data) => {
-      data.sort((a, b) => a.name.localeCompare(b.name));
-      this.listOfJumpType = data;
-      this.countDatasLoaded++;
-    });
-  }
-
-  public notLoadingToDisplay(): boolean {
-    return !(this.pendingAddRequest || this.countDatasLoaded !== 2);
-  }
-
-  private updateTitle() {
-    this.translateService.get("NewTunnelFlight_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
-
-  private initForm() {
-    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)
-      );
+        this.initForm();
+        this.getListOfTunnels();
+        this.getListOfJumpTypes();
     }
-  }
 
-  public displayNameFn(data?: any): string | undefined {
-    return data ? data.name : undefined;
-  }
+    public onFormSubmit() {
+        this.pendingAddRequest = true;
+
+        this.serviceTunnelFlight
+            .addFlight(
+                this.selectedTunnel.id,
+                this.selectedJumpType.id,
+                this.flightDate,
+                this.minutesOfFlight,
+                this.comments,
+            )
+            .subscribe(() => {
+                this.comments = undefined;
+
+                if (this.resetForm === true) {
+                    this.initForm();
+                }
+                this.pendingAddRequest = false;
+            });
+    }
+
+    public isValidatedForm(): boolean {
+        return (
+            this.selectedTunnel !== undefined &&
+            this.selectedTunnel.id !== undefined &&
+            this.minutesOfFlight !== undefined &&
+            typeof this.minutesOfFlight === "number"
+        );
+    }
+
+    private getListOfTunnels() {
+        this.serviceTunnel.getListOfTunnels().subscribe((data) => {
+            data.sort((a, b) => a.name.localeCompare(b.name));
+            this.listOfTunnel = data;
+            this.listOfFilteredTunnel = data;
+            this.countDatasLoaded++;
+        });
+    }
+
+    private getListOfJumpTypes() {
+        this.serviceJumpType.getListOfJumpTypesForTunnel().subscribe((data) => {
+            data.sort((a, b) => a.name.localeCompare(b.name));
+            this.listOfJumpType = data;
+            this.countDatasLoaded++;
+        });
+    }
+
+    public notLoadingToDisplay(): boolean {
+        return !(this.pendingAddRequest || this.countDatasLoaded !== 2);
+    }
+
+    private updateTitle() {
+        this.translateService.get("NewTunnelFlight_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
+
+    private initForm() {
+        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),
+            );
+        }
+    }
+
+    public displayNameFn(data?: any): string | undefined {
+        return data ? data.name : undefined;
+    }
 }