New view to add and update the equipment

Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.html

@@ -30,7 +30,15 @@
     </mat-form-field>
     <p>
         <mat-form-field>
-            <input
+            <mat-label>{{ "NewJump_Equipment" | translate }}</mat-label>
+            <mat-select [(value)]="selectedEquipment">
+                @for (equipment of listOfEquipment; track equipment) {
+                    <mat-option [value]="equipment.value">{{
+                        equipment.viewValue
+                    }}</mat-option>
+                }
+            </mat-select>
+            <!-- <input
                 type="text"
                 matInput
                 placeholder="equipment"
@@ -38,7 +46,7 @@
                 [(ngModel)]="jump.equipment"
                 name="equipment"
                 type="text"
-            />
+            /> -->
         </mat-form-field>
     </p>
     <br />

Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.ts

@@ -7,6 +7,7 @@ import { MatFormFieldModule } from "@angular/material/form-field";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { MatInputModule } from "@angular/material/input";
 import { MatButtonModule } from "@angular/material/button";
+import { MatSelectModule } from "@angular/material/select";
 
 import { AddAction } from "../../models/add-action.enum";
 import { JumpResp } from "../../models/jump";
@@ -14,6 +15,11 @@ import { JumpResp } from "../../models/jump";
 import { JumpService } from "../../services/jump.service";
 import { ServiceComm } from "../../services/service-comm.service";
 
+interface Equipment {
+    value: string;
+    viewValue: string;
+}
+
 @Component({
     selector: "app-jump-infos",
     templateUrl: "./jump-infos.component.html",
@@ -26,11 +32,21 @@ import { ServiceComm } from "../../services/service-comm.service";
         ReactiveFormsModule,
         MatInputModule,
         MatButtonModule,
+        MatSelectModule,
     ],
 })
 export class JumpInfosComponent implements OnInit {
     public editMode: boolean;
     public jump: JumpResp;
+    public selectedEquipment: string = "";
+    public listOfEquipment: Array<Equipment> = [
+        { value: "", viewValue: "<None>" },
+        { value: "Freak 6", viewValue: "Freak 6" },
+        { value: "ATC 4", viewValue: "ATC 4" },
+        { value: "ATC 2", viewValue: "ATC 2" },
+        { value: "Havok", viewValue: "Havok" },
+        { value: "Hawk", viewValue: "Hawk" },
+    ];
 
     constructor(
         @Inject(MAT_DIALOG_DATA) public data: any,

Front/skydivelogs-app/src/app/new-jump/new-jump.component.html

@@ -153,23 +153,14 @@
                 }
             </mat-form-field>
             <mat-form-field>
-                <input
+                <mat-label>{{ "NewJump_Equipment" | translate }}</mat-label>
-                    matInput
+                <mat-select [(value)]="selectedEquipment">
-                    placeholder="{{ 'NewJump_Equipment' | translate }}"
+                    @for (equipment of listOfEquipment; track equipment) {
-                    [(ngModel)]="equipment"
+                        <mat-option [value]="equipment.value">{{
-                    name="equipment"
+                            equipment.viewValue
-                    type="text"
+                        }}</mat-option>
-                />
-                @if (exitAltitude) {
-                    <button
-                        matSuffix
-                        mat-icon-button
-                        aria-label="Clear"
-                        (click)="equipment = undefined"
-                    >
-                        <mat-icon svgIcon="close"></mat-icon>
-                    </button>
                     }
+                </mat-select>
             </mat-form-field>
             <mat-checkbox [(ngModel)]="withCutaway" name="withCutaway">{{
                 "NewJump_Cutaway" | translate

Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts

@@ -18,6 +18,7 @@ import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { MatInputModule } from "@angular/material/input";
 import { MatButtonModule } from "@angular/material/button";
+import { MatSelectModule } from "@angular/material/select";
 
 import { JumpTypeResp } from "../../models/jumpType";
 import { AircraftResp } from "../../models/aircraft";
@@ -48,6 +49,11 @@ class PickDateAdapter extends NativeDateAdapter {
     }
 }
 
+interface Equipment {
+    value: string;
+    viewValue: string;
+}
+
 @Component({
     selector: "app-new-jump",
     templateUrl: "./new-jump.component.html",
@@ -72,6 +78,7 @@ class PickDateAdapter extends NativeDateAdapter {
         ReactiveFormsModule,
         MatInputModule,
         MatButtonModule,
+        MatSelectModule,
     ],
 })
 export class NewJumpComponent implements OnInit {
@@ -96,7 +103,15 @@ export class NewJumpComponent implements OnInit {
     private pendingAddRequest: boolean;
     private listOfDropZone: Array<DropZoneResp>;
     public maxDate: Date;
-    public equipment: string;
+    public selectedEquipment: string = "";
+    public listOfEquipment: Array<Equipment> = [
+        { value: "", viewValue: "<None>" },
+        { value: "Freak 6", viewValue: "Freak 6" },
+        { value: "ATC 4", viewValue: "ATC 4" },
+        { value: "ATC 2", viewValue: "ATC 2" },
+        { value: "Havok", viewValue: "Havok" },
+        { value: "Hawk", viewValue: "Hawk" },
+    ];
 
     constructor(
         private serviceComm: ServiceComm,
@@ -143,12 +158,12 @@ export class NewJumpComponent implements OnInit {
                     this.countOfJumps,
                     this.comments,
                     this.isSpecial === undefined ? false : this.isSpecial,
-                    this.equipment,
+                    this.selectedEquipment,
                 )
                 .subscribe(() => {
                     this.statsService.resetStats();
                     this.comments = undefined;
-                    this.equipment = undefined;
+                    this.selectedEquipment = "";
                     this.withCutaway = false;
                     this.isSpecial = false;
 
@@ -236,7 +251,7 @@ export class NewJumpComponent implements OnInit {
 
         this.listOfFilteredDropZone = this.listOfDropZone;
         this.comments = undefined;
-        this.equipment = undefined;
+        this.selectedEquipment = "";
 
         this.withCutaway = false;
         this.isSpecial = false;