feat: add english and hungarian translations

src/app/tab2/tab2.page.html

@@ -1,10 +1,10 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title> Játékvezetők </ion-title>
+    <ion-title> {{ 'courtOfficials' | translate }} </ion-title>
     <ion-buttons [slot]="'end'">
       <ion-button [color]="'primary'" [fill]="'solid'" id="open-modal">
         <ion-icon slot="start" name="add"></ion-icon>
-        Hozzáadás
+        {{ 'add' | translate }}
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
@@ -32,7 +32,7 @@
             </ion-button>
           </ion-item>
           } @empty {
-          <ion-item> Nincsenek játékvezetők </ion-item>
+          <ion-item> {{ 'noCourtOfficials' | translate }} </ion-item>
           }
         </ion-list>
       </ion-col>
@@ -44,15 +44,17 @@
       <ion-header>
         <ion-toolbar>
           <ion-buttons slot="start">
-            <ion-button (click)="cancel()">Mégse</ion-button>
+            <ion-button (click)="cancel()"
+              >{{ 'cancel' | translate }}</ion-button
+            >
           </ion-buttons>
-          <ion-title>Új játékvezető</ion-title>
+          <ion-title>{{ 'newCourtOfficial' | translate }}</ion-title>
           <ion-buttons slot="end">
             <ion-button
               [disabled]="!isValidUmpire()"
               (click)="confirm()"
               [strong]="true">
-              Mentés
+              {{ 'save' | translate }}
             </ion-button>
           </ion-buttons>
         </ion-toolbar>
@@ -61,33 +63,36 @@
         <ion-list>
           <ion-item>
             <ion-input
-              label="Vezetéknév"
+              [label]="'lastName' | translate"
               labelPlacement="stacked"
               type="text"
-              placeholder="Vezetéknév"
+              placeholder="{{ 'lastName' | translate }}"
               [(ngModel)]="lastName" />
           </ion-item>
           <ion-item>
             <ion-input
-              label="Keresztnév"
+              [label]="'firstName' | translate"
               labelPlacement="stacked"
               type="text"
-              placeholder="Keresztnév"
+              placeholder="{{ 'firstName' | translate }}"
               [(ngModel)]="firstName" />
           </ion-item>
           <ion-item>
             <ion-input
-              label="Ország"
+              [label]="'country' | translate"
               labelPlacement="stacked"
               type="text"
-              placeholder="Ország"
+              placeholder="{{ 'country' | translate }}"
               [(ngModel)]="country" />
           </ion-item>
           <ion-item>
-            <ion-select label="Nem" placeholder="Válassz" [(ngModel)]="gender">
+            <ion-select
+              [label]="'gender' | translate"
+              placeholder="{{ 'gender' | translate }}"
+              [(ngModel)]="gender">
               @for (item of genders; track item.code) {
               <ion-select-option [value]="item.code">
-                {{item.label}}
+                {{item.label | translate }}
               </ion-select-option>
               }
             </ion-select>

src/app/tab2/tab2.page.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, inject, ViewChild } from '@angular/core';
 import {
   IonHeader,
   IonToolbar,
@@ -26,6 +26,9 @@ import { add, trash } from 'ionicons/icons';
 import { OverlayEventDetail } from '@ionic/core/components';
 import { FormsModule } from '@angular/forms';
 import { FullnamePipe } from '../fullname-pipe';
+import { TranslatePipe } from '../i18n/translation.pipe';
+import { TranslationKey } from '../i18n/translations';
+import { TranslationService } from '../i18n/translation.service';
 
 @Component({
   selector: 'app-tab2',
@@ -51,12 +54,19 @@ import { FullnamePipe } from '../fullname-pipe';
     IonSelect,
     IonSelectOption,
     IonList,
-    FullnamePipe
+    FullnamePipe,
+    TranslatePipe
   ]
 })
 export class Tab2Page {
+  readonly translationService = inject(TranslationService);
+
   @ViewChild(IonModal) modal!: IonModal;
 
+  public readonly umpireService = inject(UmpireService);
+  public readonly fullnamePipe = inject(FullnamePipe);
+  public readonly alertController = inject(AlertController);
+
   public readonly umpires = this.umpireService.umpires;
 
   public lastName: string = '';
@@ -64,16 +74,12 @@ export class Tab2Page {
   public country: string = '';
   public gender: string = '';
 
-  public genders = [
-    { label: 'gender.male', code: 'M' },
-    { label: 'gender.female', code: 'W' }
+  public genders: { label: TranslationKey; code: string }[] = [
+    { label: 'male', code: 'M' },
+    { label: 'female', code: 'W' }
   ];
 
-  constructor(
-    private umpireService: UmpireService,
-    private alertController: AlertController,
-    private fullnamePipe: FullnamePipe
-  ) {
+  constructor() {
     addIcons({ add, trash });
   }
 
@@ -112,18 +118,18 @@ export class Tab2Page {
     return this.lastName !== '' && this.firstName !== '';
   }
 
-  public async showDeleteConfirmation(umpire: Umpire) {
+  public async showDeleteConfirmation(umpire: Umpire): Promise<void> {
     const alert = await this.alertController.create({
-      header: 'Megerősítés',
-      subHeader: 'Biztos törlöd a következő játékvezetőt?',
+      header: this.translationService.translate('confirmation'),
+      subHeader: this.translationService.translate('confirmDeleteUmpire'),
       message: this.fullnamePipe.transform(umpire),
       buttons: [
         {
-          text: 'Nem',
+          text: this.translationService.translate('no'),
           role: 'cancel'
         },
         {
-          text: 'Igen',
+          text: this.translationService.translate('yes'),
           role: 'confirm',
           handler: () => {
             // TODO: also remove from first tab