tothbt/court-pilot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: add english and hungarian translations

Browse Source
This commit is contained in:
tothbt
2026-08-29 11:42:16 +02:00
parent ab32f01e07
commit 0c1a9f86d6
13 changed files with 285 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/fullname-pipe.ts
+11 -3
View File
@@ -1,16 +1,24 @@
import { Pipe, PipeTransform } from '@angular/core';
import { inject, Pipe, PipeTransform } from '@angular/core';
import { Umpire } from 'db';
import { TranslationService } from './i18n/translation.service';
@Pipe({
name: 'fullname',
standalone: true
standalone: true,
pure: false
})
export class FullnamePipe implements PipeTransform {
readonly translationService = inject(TranslationService);
transform(value: Umpire | undefined, ...args: unknown[]): string {
if (typeof value === 'undefined') {
return '';
}
// TODO: in case of multilang, change here
if (this.translationService.language() === 'en') {
return value.firstName + ' ' + value.lastName;
}
return value.lastName + ' ' + value.firstName;
}
}
src/app/i18n/translation.pipe.ts
+16
View File
@@ -0,0 +1,16 @@
import { Pipe, PipeTransform, inject } from '@angular/core';
import { TranslationKey, TranslationParams } from './translations';
import { TranslationService } from './translation.service';
@Pipe({
name: 'translate',
standalone: true,
pure: false
})
export class TranslatePipe implements PipeTransform {
private readonly translationService = inject(TranslationService);
transform(key: TranslationKey, params: TranslationParams = {}): string {
return this.translationService.translate(key, params);
}
}
src/app/i18n/translation.service.ts
+47
View File
@@ -0,0 +1,47 @@
import { Injectable, signal } from '@angular/core';
import {
translations,
Language,
TranslationKey,
TranslationParams
} from './translations';
@Injectable({
providedIn: 'root'
})
export class TranslationService {
private readonly storageKey = 'language';
readonly language = signal<Language>(this.getInitialLanguage());
setLanguage(language: Language): void {
this.language.set(language);
localStorage.setItem(this.storageKey, language);
}
translate(key: TranslationKey, params: TranslationParams = {}): string {
let text: string = translations[this.language()][key];
for (const [param, value] of Object.entries(params)) {
text = text.replaceAll(`{${param}}`, String(value));
}
return text;
}
private getInitialLanguage(): Language {
const stored = localStorage.getItem(this.storageKey);
if (stored && stored in translations) {
return stored as Language;
}
const browserLanguage = navigator.language.split('-')[0] as Language;
if (browserLanguage in translations) {
return browserLanguage;
}
return 'en';
}
}
src/app/i18n/translations.ts
+86
View File
@@ -0,0 +1,86 @@
import { language, male, settings } from 'ionicons/icons';
import { noop } from 'rxjs';
export const translations = {
en: {
courts: 'Courts',
numberOfCourts: 'Number of Courts',
showAlerts: 'Show alerts on quick buttons',
serviceJudge: 'Service Judge',
language: 'Language',
settings: 'Settings',
courtOfficials: 'Court Officials',
add: 'Add',
noCourtOfficials: 'No court officials',
newCourtOfficial: 'New Court Official',
cancel: 'Cancel',
save: 'Save',
firstName: 'First Name',
lastName: 'Last Name',
country: 'Country',
gender: 'Gender',
male: 'Male',
female: 'Female',
confirmation: 'Confirmation',
confirmDeleteUmpire: 'Do you really want to delete this court official?',
no: 'No',
yes: 'Yes',
umpires: 'Umpires',
serviceJudges: 'Service Judges',
notOnDuty: 'Not on Duty',
shortCourtName: 'C',
court: 'Court',
umpire: 'Umpire',
removeUmpireFromCourt:
'Are you sure you want to remove them from the court?',
removeUmpiresFromCourt:
'Are you sure you want to remove them from the court?',
courtConfirm: 'Court {courtNo}',
sendUmpireToCourt: 'Are you sure you want to send them to the court?',
sendUmpiresToCourt: 'Are you sure you want to send them to the court?',
sendUmpireMessage: '{umpire}',
sendUmpiresMessage: '{umpire} - {serviceJudge}'
},
hu: {
courts: 'Pályák',
numberOfCourts: 'Pályák száma',
showAlerts: 'Figyelmeztetések megjelenítése a gyors gomboknál',
serviceJudge: 'Adogatásbíró',
language: 'Nyelv',
settings: 'Beállítások',
courtOfficials: 'Tisztségviselők',
add: 'Hozzáadás',
noCourtOfficials: 'Nincsenek tisztségviselők',
newCourtOfficial: 'Új Tisztségviselő',
cancel: 'Mégse',
save: 'Mentés',
firstName: 'Keresztnév',
lastName: 'Vezetéknév',
country: 'Ország',
gender: 'Nem',
male: 'Férfi',
female: 'Nő',
confirmation: 'Megerősítés',
confirmDeleteUmpire: 'Biztosan törölni szeretnéd ezt a tisztségviselőt?',
no: 'Nem',
yes: 'Igen',
umpires: 'Játékeveztők',
serviceJudges: 'Adogatásbírók',
notOnDuty: 'Pihenő',
shortCourtName: 'P',
court: 'Pálya',
umpire: 'Játékeveztő',
removeUmpireFromCourt: 'Biztos leveszed őt a pályáról?',
removeUmpiresFromCourt: 'Biztos leveszed őket a pályáról?',
courtConfirm: 'Pálya {courtNo}',
sendUmpireToCourt: 'Biztos pályára küldöd őt?',
sendUmpiresToCourt: 'Biztos pályára küldöd őket?',
sendUmpireMessage: '{umpire}',
sendUmpiresMessage: '{umpire} - {serviceJudge}'
}
} as const;
export type Language = keyof typeof translations;
export type TranslationKey = keyof typeof translations.en;
export type TranslationParams = Record<string, string | number>;
src/app/tab1/tab1.page.html
+9 -9
View File
@@ -1,33 +1,33 @@
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title> Pályák </ion-title>
<ion-title> {{ 'courts' | translate }} </ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" cdkDropListGroup>
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Pályák</ion-title>
<ion-title size="large">{{ 'courts' | translate }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-grid [fixed]="'fixed'" class="bottom-lists">
<ion-row>
<ion-col [size]="1" class="ion-display-none ion-display-xl-block">
<ion-item [lines]="'none'">Pálya</ion-item>
<ion-item [lines]="'none'">{{ 'court' | translate }}</ion-item>
</ion-col>
<ion-col [size]="1" class="ion-display-xl-none">
<ion-item [lines]="'none'">P</ion-item>
<ion-item [lines]="'none'">{{ 'shortCourtName' | translate }}</ion-item>
</ion-col>
<ion-col>
<ion-item [lines]="'none'">
<ion-label class="ion-text-center"> Játékvezető </ion-label>
<ion-label class="ion-text-center"> {{ 'umpire' | translate }} </ion-label>
</ion-item>
</ion-col>
@if (serviceJudgeEnabled()) {
<ion-col>
<ion-item [lines]="'none'">
<ion-label class="ion-text-center"> Adogatásbíró </ion-label>
<ion-label class="ion-text-center"> {{ 'serviceJudge' | translate }} </ion-label>
</ion-item>
</ion-col>
}
@@ -119,19 +119,19 @@
<ion-row>
<ion-col [size]="!serviceJudgeEnabled() ? 6 : 4">
<ion-item color="primary">
<ion-label class="ion-text-center"> Játékvezetők </ion-label>
<ion-label class="ion-text-center"> {{ 'umpires' | translate }} </ion-label>
</ion-item>
</ion-col>
@if (serviceJudgeEnabled()) {
<ion-col [size]="4">
<ion-item color="primary">
<ion-label class="ion-text-center"> Adogatásbírók </ion-label>
<ion-label class="ion-text-center"> {{ 'serviceJudges' | translate }} </ion-label>
</ion-item>
</ion-col>
}
<ion-col [size]="!serviceJudgeEnabled() ? 6 : 4">
<ion-item color="medium">
<ion-label class="ion-text-center"> Pihenők </ion-label>
<ion-label class="ion-text-center"> {{ 'notOnDuty' | translate }} </ion-label>
</ion-item>
</ion-col>
</ion-row>
src/app/tab1/tab1.page.ts
+39 -11
View File
@@ -32,6 +32,8 @@ import { CourtUmpireService } from '../services/court.umpire.service';
import { CourtServiceJudgeService } from '../services/court.service.judge.service';
import { addIcons } from 'ionicons';
import { enterOutline, exitOutline } from 'ionicons/icons';
import { TranslatePipe } from '../i18n/translation.pipe';
import { TranslationService } from '../i18n/translation.service';
@Component({
selector: 'app-tab1',
@@ -56,7 +58,8 @@ import { enterOutline, exitOutline } from 'ionicons/icons';
CdkDrag,
CommonModule,
CdkDragPlaceholder,
CdkDropListGroup
CdkDropListGroup,
TranslatePipe
]
})
export class Tab1Page {
@@ -70,6 +73,7 @@ export class Tab1Page {
readonly waitingServiceJudgeService = inject(WaitingServiceJudgesService);
readonly courtUmpireService = inject(CourtUmpireService);
readonly courtServiceJudgeService = inject(CourtServiceJudgeService);
readonly translationService = inject(TranslationService);
private alertController = inject(AlertController);
private fullnamePipe = inject(FullnamePipe);
@@ -398,17 +402,27 @@ export class Tab1Page {
}
const alert = await this.alertController.create({
header: `Pálya ${courtNo}`,
subHeader: `Biztos leveszed ${serviceJudge ? 'őket' : 'őt'} a pályáról?`,
header: this.translationService.translate('courtConfirm', {
courtNo
}),
subHeader: this.translationService.translate(
serviceJudge ? 'removeUmpiresFromCourt' : 'removeUmpireFromCourt'
),
cssClass: 'wide',
message: `${this.fullnamePipe.transform(umpire)} ${serviceJudge ? '- ' : ''} ${this.fullnamePipe.transform(serviceJudge)}`,
message: `${this.fullnamePipe.transform(umpire)}${
serviceJudge ? ' - ' : ''
}${this.fullnamePipe.transform(serviceJudge)}`,
buttons: [
{
text: 'Nem',
text: this.translationService.translate('no'),
role: 'cancel'
},
{
text: 'Igen',
text: this.translationService.translate('yes'),
role: 'confirm',
handler: () => {
if (this.serviceJudgeEnabled()) {
@@ -478,17 +492,31 @@ export class Tab1Page {
}
const alert = await this.alertController.create({
header: `Pálya ${courtNo}`,
header: this.translationService.translate('court', {
courtNo
}),
cssClass: 'wide',
subHeader: `Biztos pályára küldöd ${serviceJudge ? 'őket' : 'őt'}?`,
message: `${this.fullnamePipe.transform(umpire)} ${serviceJudge ? ' - ' : ''} ${this.fullnamePipe.transform(serviceJudge)}`,
subHeader: this.translationService.translate(
serviceJudge ? 'sendUmpiresToCourt' : 'sendUmpireToCourt'
),
message: this.translationService.translate(
serviceJudge ? 'sendUmpiresMessage' : 'sendUmpireMessage',
{
umpire: this.fullnamePipe.transform(umpire),
serviceJudge: this.fullnamePipe.transform(serviceJudge)
}
),
buttons: [
{
text: 'Nem',
text: this.translationService.translate('no'),
role: 'cancel'
},
{
text: 'Igen',
text: this.translationService.translate('yes'),
role: 'confirm',
handler: () => {
if (this.serviceJudgeEnabled() && serviceJudge) {
src/app/tab2/tab2.page.html
+19 -14
View File
@@ -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
+21 -15
View File
@@ -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
src/app/tab3/tab3.page.html
+16 -4
View File
@@ -1,6 +1,6 @@
<ion-header>
<ion-toolbar>
<ion-title>Beállítások</ion-title>
<ion-title>{{ 'settings' | translate }}</ion-title>
</ion-toolbar>
</ion-header>
@@ -11,11 +11,23 @@
@if (settings(); as currentSettings) {
<ion-list>
<ion-item>
<ion-select
[label]="'language' | translate"
[value]="translationService.language()"
(ionChange)="updateLanguage($event)"
interface="popover">
<ion-select-option value="en"> English </ion-select-option>
<ion-select-option value="hu"> Magyar </ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-toggle
[checked]="currentSettings.withServiceJudge"
(ionChange)="updateWithServiceJudge($event)">
Adogatásbíró
{{ 'serviceJudge' | translate }}
</ion-toggle>
</ion-item>
@@ -23,13 +35,13 @@
<ion-toggle
[checked]="currentSettings.showAlert"
(ionChange)="updateShowAlert($event)">
Figyelmeztetések megjelenítése a gyors gomboknál
{{ 'showAlerts' | translate }}
</ion-toggle>
</ion-item>
<ion-item>
<ion-input
label="Pályák száma"
[label]="'numberOfCourts' | translate"
type="number"
min="1"
labelPlacement="floating"
src/app/tab3/tab3.page.ts
+15 -3
View File
@@ -10,13 +10,18 @@ import {
IonInput,
IonGrid,
IonCol,
IonRow
IonRow,
IonSelect,
IonSelectOption
} from '@ionic/angular/standalone';
import { SettingsService } from '../services/settings-service';
import { CourtUmpireService } from '../services/court.umpire.service';
import { CourtServiceJudgeService } from '../services/court.service.judge.service';
import { CourtServiceJudge } from 'db';
import { WaitingServiceJudgesService } from '../services/waiting-service-judges.service';
import { TranslationService } from '../i18n/translation.service';
import { Language } from '../i18n/translations';
import { TranslatePipe } from '../i18n/translation.pipe';
@Component({
selector: 'app-tab3',
@@ -33,7 +38,10 @@ import { WaitingServiceJudgesService } from '../services/waiting-service-judges.
IonHeader,
IonToolbar,
IonTitle,
IonContent
IonContent,
IonSelect,
IonSelectOption,
TranslatePipe
]
})
export class Tab3Page {
@@ -41,6 +49,7 @@ export class Tab3Page {
readonly courtUmpireService = inject(CourtUmpireService);
readonly courtServiceJudgeService = inject(CourtServiceJudgeService);
readonly waitingServiceJudgeService = inject(WaitingServiceJudgesService);
readonly translationService = inject(TranslationService);
readonly settings = this.settingsService.settings;
@@ -78,7 +87,6 @@ export class Tab3Page {
this.courtServiceJudgeService.delete(csj.id);
});
this.waitingServiceJudgeService.waitingServiceJudges().map((wsj) => {
this.waitingServiceJudgeService.remove(wsj.id);
});
@@ -90,4 +98,8 @@ export class Tab3Page {
showAlert: event.detail.checked
});
}
updateLanguage(event: CustomEvent): void {
this.translationService.setLanguage(event.detail.value as Language);
}
}
src/app/tabs/tabs.page.html
+3 -3
View File
@@ -2,17 +2,17 @@
<ion-tab-bar slot="bottom">
<ion-tab-button tab="pilot" href="/tabs/pilot">
<ion-icon aria-hidden="true" name="grid-outline"></ion-icon>
<ion-label>Pályák</ion-label>
<ion-label>{{ 'courts' | translate }}</ion-label>
</ion-tab-button>
<ion-tab-button tab="umpires" href="/tabs/umpires">
<ion-icon aria-hidden="true" name="people-outline"></ion-icon>
<ion-label>Játékvezetők</ion-label>
<ion-label>{{ 'courtOfficials' | translate }}</ion-label>
</ion-tab-button>
<ion-tab-button tab="settings" href="/tabs/settings">
<ion-icon aria-hidden="true" name="settings-outline"></ion-icon>
<ion-label>Beállítások</ion-label>
<ion-label>{{ 'settings' | translate }}</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
src/app/tabs/tabs.page.ts
+2 -1
View File
@@ -8,12 +8,13 @@ import {
} from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { gridOutline, peopleOutline, settingsOutline } from 'ionicons/icons';
import { TranslatePipe } from '../i18n/translation.pipe';
@Component({
selector: 'app-tabs',
templateUrl: 'tabs.page.html',
styleUrls: ['tabs.page.scss'],
imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel]
imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, TranslatePipe]
})
export class TabsPage {
public environmentInjector = inject(EnvironmentInjector);
tsconfig.json
+1 -1
View File
@@ -18,7 +18,7 @@
"importHelpers": true,
"target": "es2022",
"module": "es2020",
"lib": ["es2018", "dom"],
"lib": ["es2021", "dom"],
"skipLibCheck": true,
"useDefineForClassFields": false
},