diff --git a/src/app/fullname-pipe.spec.ts b/src/app/fullname-pipe.spec.ts
new file mode 100644
index 0000000..26270f1
--- /dev/null
+++ b/src/app/fullname-pipe.spec.ts
@@ -0,0 +1,8 @@
+import { FullnamePipe } from './fullname-pipe';
+
+describe('FullnamePipePipe', () => {
+ it('create an instance', () => {
+ const pipe = new FullnamePipe();
+ expect(pipe).toBeTruthy();
+ });
+});
diff --git a/src/app/fullname-pipe.ts b/src/app/fullname-pipe.ts
new file mode 100644
index 0000000..a57e9e5
--- /dev/null
+++ b/src/app/fullname-pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Umpire } from 'db';
+
+@Pipe({
+ name: 'fullname',
+ standalone: true
+})
+export class FullnamePipe implements PipeTransform {
+ transform(value: Umpire, ...args: unknown[]): string {
+ // TODO: in case of multilang, change here
+ return value.lastName + ' ' + value.firstName;
+ }
+}
diff --git a/src/app/tab2/tab2.page.html b/src/app/tab2/tab2.page.html
index 38b153e..d9dc70c 100644
--- a/src/app/tab2/tab2.page.html
+++ b/src/app/tab2/tab2.page.html
@@ -1,17 +1,99 @@
-
- Tab 2
-
+ Játékvezetők
+
+
+
+ Hozzáadás
+
+
- Tab 2
+ Játékvezetők
-
+
+
+
+
+ @for (umpire of umpires(); track umpire.id) {
+
+ {{ umpire | fullname }}
+
+
+
+
+ } @empty {
+ Nincsenek játékvezetők
+ }
+
+
+
+
+
+
+
+
+
+
+ Mégse
+
+ Új játékvezető
+
+
+ Mentés
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @for (item of genders; track item.code) {
+
+ {{item.label}}
+
+ }
+
+
+
+
+
+
diff --git a/src/app/tab2/tab2.page.ts b/src/app/tab2/tab2.page.ts
index 559aad5..ae4bf39 100644
--- a/src/app/tab2/tab2.page.ts
+++ b/src/app/tab2/tab2.page.ts
@@ -1,15 +1,142 @@
-import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { Component, ViewChild } from '@angular/core';
+import {
+ IonHeader,
+ IonToolbar,
+ IonTitle,
+ IonContent,
+ IonButtons,
+ IonButton,
+ IonIcon,
+ IonModal,
+ IonItem,
+ IonInput,
+ IonSelect,
+ IonSelectOption,
+ IonList,
+ IonGrid,
+ IonRow,
+ IonCol,
+ IonLabel,
+ AlertController
+} from '@ionic/angular/standalone';
+import { UmpireService } from '../services/umpire.service';
+import { Umpire } from 'db';
+import { addIcons } from 'ionicons';
+import { add, trash } from 'ionicons/icons';
+import { OverlayEventDetail } from '@ionic/core/components';
+import { FormsModule } from '@angular/forms';
+import { FullnamePipe } from '../fullname-pipe';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss'],
- imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+ providers: [FullnamePipe],
+ imports: [
+ IonLabel,
+ IonCol,
+ IonRow,
+ IonGrid,
+ IonInput,
+ IonItem,
+ IonModal,
+ IonIcon,
+ IonButton,
+ IonButtons,
+ IonHeader,
+ IonToolbar,
+ IonTitle,
+ IonContent,
+ FormsModule,
+ IonSelect,
+ IonSelectOption,
+ IonList,
+ FullnamePipe
+ ]
})
export class Tab2Page {
+ @ViewChild(IonModal) modal!: IonModal;
- constructor() {}
+ public readonly umpires = this.umpireService.umpires;
+ public lastName: string = '';
+ public firstName: string = '';
+ public country: string = '';
+ public gender: string = '';
+
+ public genders = [
+ { label: 'gender.male', code: 'M' },
+ { label: 'gender.female', code: 'W' }
+ ];
+
+ constructor(
+ private umpireService: UmpireService,
+ private alertController: AlertController,
+ private fullnamePipe: FullnamePipe
+ ) {
+ addIcons({ add, trash });
+ }
+
+ public async onWillDismiss(event: CustomEvent) {
+ if (event.detail.role !== 'confirm') {
+ return;
+ }
+
+ const newUmpire: Umpire = event.detail.data;
+
+ await this.umpireService.create({
+ firstName: newUmpire.firstName,
+ lastName: newUmpire.lastName,
+ country: newUmpire.country,
+ gender: newUmpire.gender
+ });
+ }
+
+ cancel() {
+ this.modal.dismiss(null, 'cancel');
+ }
+
+ confirm() {
+ this.modal.dismiss(
+ {
+ lastName: this.lastName,
+ firstName: this.firstName,
+ country: this.country,
+ gender: this.gender
+ },
+ 'confirm'
+ );
+ }
+
+ isValidUmpire(): boolean {
+ return this.lastName !== '' && this.firstName !== '';
+ }
+
+ public async showDeleteConfirmation(umpire: Umpire) {
+ const alert = await this.alertController.create({
+ header: 'Megerősítés',
+ subHeader: 'Biztos törlöd a következő játékvezetőt?',
+ message: this.fullnamePipe.transform(umpire),
+ buttons: [
+ {
+ text: 'Nem',
+ role: 'cancel'
+ },
+ {
+ text: 'Igen',
+ role: 'confirm',
+ handler: () => {
+ // TODO: also remove from first tab
+ this.removeUmpire(umpire);
+ }
+ }
+ ]
+ });
+
+ await alert.present();
+ }
+
+ private removeUmpire(umpire: Umpire): void {
+ this.umpireService.delete(umpire.id);
+ }
}
diff --git a/src/app/tabs/tabs.page.html b/src/app/tabs/tabs.page.html
index 007cdb6..6b27a1a 100644
--- a/src/app/tabs/tabs.page.html
+++ b/src/app/tabs/tabs.page.html
@@ -2,12 +2,12 @@
- Tab 1
+ Pályák
- Tab 2
+ Játékvezetők