Update to Angular v19 and fixing (#3)

Reviewed-on: #3
Co-authored-by: sandre <perso@sebastienandre.com>
Co-committed-by: sandre <perso@sebastienandre.com>

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

@@ -1,52 +1,85 @@
-import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { AircraftService } from '../../services/aircraft.service';
-import { ServiceComm } from '../../services/service-comm.service';
-import { AddAction } from '../../models/add-action.enum';
+import { Component, OnInit } from "@angular/core";
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from "@angular/forms";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatButtonModule } from "@angular/material/button";
+
+import { AddAction } from "../../models/add-action.enum";
+
+import { AircraftService } from "../../services/aircraft.service";
+import { ServiceComm } from "../../services/service-comm.service";
 
 @Component({
-    selector: 'app-new-aircraft',
-    templateUrl: './new-aircraft.component.html',
-    styleUrls: ['./new-aircraft.component.css'],
-    standalone: false
+  selector: "app-new-aircraft",
+  templateUrl: "./new-aircraft.component.html",
+  styleUrls: ["./new-aircraft.component.css"],
+  imports: [
+    TranslateModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatButtonModule,
+  ],
 })
 export class NewAircraftComponent implements OnInit {
   public addForm: FormGroup;
   public imageError: string;
   private selectedFile: string;
 
-  constructor(private serviceComm: ServiceComm,
-              private serviceApi: AircraftService) {
+  constructor(
+    private serviceComm: ServiceComm,
+    private serviceApi: AircraftService,
+    private translateService: TranslateService,
+  ) {
     this.addForm = new FormGroup(
       {
-        aircraftName: new FormControl('', Validators.required)
+        aircraftName: new FormControl("", Validators.required),
       },
-      { updateOn: 'blur' }
+      { updateOn: "blur" },
     );
   }
 
-  ngOnInit() { }
+  ngOnInit() {
+    this.serviceComm.forceTranslateTitle.subscribe((data) => {
+      if (data === true) {
+        this.updateTitle();
+      }
+    });
+
+    this.updateTitle();
+  }
 
   onSubmit(formData) {
     if (formData.invalid) {
       return;
     }
 
-    this.serviceApi.addAircraft(formData.aircraftName, this.selectedFile)
-                   .subscribe(() => {
-                    this.serviceComm.refreshData(AddAction.Aircraft);
-                   });
+    this.serviceApi
+      .addAircraft(formData.aircraftName, this.selectedFile)
+      .subscribe(() => {
+        this.serviceComm.refreshData(AddAction.Aircraft);
+      });
   }
 
   public onFileChanged(fileInput: any) {
-    const file = fileInput.dataTransfer ? fileInput.dataTransfer.files[0] : fileInput.target.files[0];
-    const allowed_types = ['image/png', 'image/jpeg'];
+    const file = fileInput.dataTransfer
+      ? fileInput.dataTransfer.files[0]
+      : fileInput.target.files[0];
+    const allowed_types = ["image/png", "image/jpeg"];
     const max_size = 20971520;
 
     if (!allowed_types.includes(file.type)) {
-      this.imageError = 'Only Images are allowed ( JPG | PNG )';
+      this.imageError = "Only Images are allowed ( JPG | PNG )";
     } else if (file.size > max_size) {
-      this.imageError = 'Maximum size allowed is ' + max_size / 1000 + 'Mb';
+      this.imageError = "Maximum size allowed is " + max_size / 1000 + "Mb";
     } else {
       const reader = new FileReader();
       reader.onload = this.checkAndExtractDataToBase64.bind(this);
@@ -61,17 +94,23 @@ export class NewAircraftComponent implements OnInit {
     const image = new Image();
     image.src = e.target.result;
     image.onload = (rs) => {
-      const img_height = rs.currentTarget['height'];
-      const img_width = rs.currentTarget['width'];
+      const img_height = rs.currentTarget["height"];
+      const img_width = rs.currentTarget["width"];
 
       if (img_height > max_height && img_width > max_width) {
         this.imageError =
-          'Maximum dimentions allowed ' + max_height + '*' + max_width + 'px';
+          "Maximum dimentions allowed " + max_height + "*" + max_width + "px";
       } else {
         const imgBase64Path = e.target.result;
         this.selectedFile = imgBase64Path;
-        this.imageError = 'OK';
+        this.imageError = "OK";
       }
     };
   }
+
+  private updateTitle() {
+    this.translateService.get("NewAircraft_Title").subscribe((data) => {
+      this.serviceComm.updatedComponentTitle(data);
+    });
+  }
 }