torsten/trainingstagebuch
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor localization handling in SeasonSelector and TeamManagementView to utilize the new i18n import method. Update German localization by removing escaped characters from placeholders for improved clarity and consistency in rendering. Ensure all translation calls are updated to use the new method for better maintainability.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-11-21 13:51:14 +01:00
parent 9592459348
commit bfa908ac9a
5 changed files with 78 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/SeasonSelector.vue
View File

@@ -66,7 +66,7 @@
<script>
import { ref, computed, onMounted, watch } from 'vue';
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import i18n from '../i18n';
import apiClient from '../apiClient.js';
import InfoDialog from './InfoDialog.vue';
@@ -90,7 +90,7 @@ export default {
emits: ['update:modelValue', 'season-change'],
setup(props, { emit }) {
const store = useStore();
const { t } = useI18n();
const t = (key, params) => i18n.global.t(key, params);
// Dialog States
const infoDialog = ref({

2
frontend/src/i18n/index.js
View File

@@ -107,7 +107,7 @@ const i18n = createI18n({
'fil': fil,
},
legacy: true, // Use Options API mode (required for $t in templates with Options API)
// globalInjection is not needed with legacy: true
// globalInjection is automatically enabled with legacy: true
});
/**

10
frontend/src/i18n/locales/de.json
View File

@@ -882,19 +882,19 @@
"bulkMode": "Bulk-Import-Modus (alle Mitglieder auf einmal übertragen)",
"bulkModeHint": "Wenn aktiviert, werden alle Mitglieder in einem Request als Array übertragen.",
"importTemplate": "Template aus vollständigem Beispiel importieren",
"importTemplatePlaceholder": "Fügen Sie hier ein vollständiges Beispiel-Template ein, z.B.:\n__BRACE_OPEN__\n __QUOTE__members__QUOTE__: [\n __BRACE_OPEN__\n __QUOTE__firstName__QUOTE__: __QUOTE__Max__QUOTE__,\n __QUOTE__lastName__QUOTE__: __QUOTE__Mustermann__QUOTE__,\n __QUOTE__email__QUOTE__: __QUOTE__max@example.com__QUOTE__\n __BRACE_CLOSE__\n ]\n__BRACE_CLOSE__",
"importTemplatePlaceholder": "Fügen Sie hier ein vollständiges Beispiel-Template ein, z.B.:\nLBRACE\n DQUOTEmembersDQUOTE: [\n LBRACE\n DQUOTEfirstNameDQUOTE: DQUOTEMaxDQUOTE,\n DQUOTElastNameDQUOTE: DQUOTEMustermannDQUOTE,\n DQUOTEemailDQUOTE: DQUOTEmaxATexample.comDQUOTE\n RBRACE\n ]\nRBRACE",
"analyzeAndImport": "Template analysieren und importieren",
"importTemplateHint": "Fügen Sie ein vollständiges Beispiel-Template (mit Beispiel-Mitgliedern) ein. Das System erkennt automatisch das Mitglied-Template und das Bulk-Wrapper-Template.",
"bulkWrapperTemplate": "Bulk-Wrapper-Template (optional)",
"bulkWrapperWhat": "Was ist ein Bulk-Wrapper-Template?",
"bulkWrapperDescription": "Optional können Sie die äußere Struktur definieren, in die die Mitglieder-Array eingefügt wird. Verwenden Sie __PLACEHOLDER_MEMBERS__ als Platzhalter für das Array der Mitglieder.",
"bulkWrapperDescription": "Optional können Sie die äußere Struktur definieren, in die die Mitglieder-Array eingefügt wird. Verwenden Sie PLACEHOLDER_MEMBERS als Platzhalter für das Array der Mitglieder.",
"example": "Beispiel",
"bulkWrapperNote": "Hinweis: Wenn kein Wrapper-Template angegeben wird, wird automatisch ein members-Array verwendet.",
"availablePlaceholders": "Verfügbare Platzhalter",
"membersArray": "Mitglieder-Array",
"transferTemplate": "Übertragungs-Template",
"templateWhat": "Was ist ein Template?",
"templateDescription": "Das Template definiert das Format, in dem die Mitgliederdaten an das externe System übertragen werden. Verwenden Sie Platzhalter wie __PLACEHOLDER_FIRSTNAME__, um die Daten automatisch zu ersetzen.",
"templateDescription": "Das Template definiert das Format, in dem die Mitgliederdaten an das externe System übertragen werden. Verwenden Sie Platzhalter wie PLACEHOLDER_FIRSTNAME, um die Daten automatisch zu ersetzen.",
"exampleJson": "Beispiel für JSON-Format (empfohlen)",
"exampleXml": "Beispiel für XML-Format",
"exampleFormData": "Beispiel für Form-Data Format",
@@ -1201,8 +1201,8 @@
"pending": "Ausstehend",
"notAppeared": "Nicht angetreten",
"bothTeamsAppeared": "Beide Mannschaften angetreten",
"homeTeamNotAppeared": "Heimmannschaft ({team}) nicht angetreten",
"guestTeamNotAppeared": "Gastmannschaft ({team}) nicht angetreten",
"homeTeamNotAppeared": "Heimmannschaft {team} nicht angetreten",
"guestTeamNotAppeared": "Gastmannschaft {team} nicht angetreten",
"playSystem": "Spielsystem",
"pinInput": "PIN-Eingabe",
"homePin": "PIN Heimverein",

15
frontend/src/views/MemberTransferSettingsView.vue
View File

@@ -374,8 +374,8 @@ address={{address}}`;
try {
const text = this.$t('memberTransfer.bulkWrapperDescription');
if (typeof text === 'string') {
// Ersetze __PLACEHOLDER_MEMBERS__ durch {{members}}
return text.replace(/__PLACEHOLDER_MEMBERS__/g, '{{members}}');
// Ersetze PLACEHOLDER_MEMBERS durch {{members}}
return text.replace(/PLACEHOLDER_MEMBERS/g, '{{members}}');
}
return 'Optional können Sie die äußere Struktur definieren, in die die Mitglieder-Array eingefügt wird. Verwenden Sie {{members}} als Platzhalter für das Array der Mitglieder.';
} catch (e) {
@@ -394,8 +394,8 @@ address={{address}}`;
try {
const text = this.$t('memberTransfer.templateDescription');
if (typeof text === 'string') {
// Ersetze __PLACEHOLDER_FIRSTNAME__ durch {{firstName}}
return text.replace(/__PLACEHOLDER_FIRSTNAME__/g, '{{firstName}}');
// Ersetze PLACEHOLDER_FIRSTNAME durch {{firstName}}
return text.replace(/PLACEHOLDER_FIRSTNAME/g, '{{firstName}}');
}
return 'Das Template definiert das Format, in dem die Mitgliederdaten an das externe System übertragen werden. Verwenden Sie Platzhalter wie {{firstName}}, um die Daten automatisch zu ersetzen.';
} catch (e) {
@@ -416,9 +416,10 @@ address={{address}}`;
if (typeof text === 'string') {
// Ersetze die Platzhalter durch geschweifte Klammern und Anführungszeichen
return text
.replace(/__BRACE_OPEN__/g, '{')
.replace(/__BRACE_CLOSE__/g, '}')
.replace(/__QUOTE__/g, '"');
.replace(/LBRACE/g, '{')
.replace(/RBRACE/g, '}')
.replace(/DQUOTE/g, '"')
.replace(/AT/g, '@');
}
return `Fügen Sie hier ein vollständiges Beispiel-Template ein, z.B.:\n{\n "members": [\n {\n "firstName": "Max",\n "lastName": "Mustermann",\n "email": "max@example.com"\n }\n ]\n}`;
} catch (e) {

121
frontend/src/views/TeamManagementView.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<h2>{{ $t('teamManagement.title') }}</h2>
<h2>{{ t('teamManagement.title') }}</h2>
<SeasonSelector
v-model="selectedSeasonId"
@@ -11,24 +11,24 @@
<!-- Automatische Jobs Info -->
<div v-if="schedulerJobs.rating_updates || schedulerJobs.match_results" class="scheduler-jobs-info">
<div class="job-info" v-if="schedulerJobs.rating_updates?.lastRun">
<span class="job-label">🔄 {{ $t('teamManagement.ratingUpdates') }}:</span>
<span class="job-label">🔄 {{ t('teamManagement.ratingUpdates') }}:</span>
<span class="job-details">
{{ $t('teamManagement.lastRun') }}: {{ formatJobDate(schedulerJobs.rating_updates.lastRun) }}
{{ t('teamManagement.lastRun') }}: {{ formatJobDate(schedulerJobs.rating_updates.lastRun) }}
<span v-if="schedulerJobs.rating_updates.updatedCount !== null" class="job-count">
({{ schedulerJobs.rating_updates.updatedCount }} {{ $t('teamManagement.updated') }})
({{ schedulerJobs.rating_updates.updatedCount }} {{ t('teamManagement.updated') }})
</span>
<span v-if="!schedulerJobs.rating_updates.success" class="job-error">⚠️ {{ $t('teamManagement.error') }}</span>
<span v-if="!schedulerJobs.rating_updates.success" class="job-error">⚠️ {{ t('teamManagement.error') }}</span>
</span>
</div>
<div class="job-info" v-if="schedulerJobs.match_results?.lastRun">
<div class="job-header">
<span class="job-label">📊 {{ $t('teamManagement.matchResults') }}:</span>
<span class="job-label">📊 {{ t('teamManagement.matchResults') }}:</span>
<span class="job-details">
{{ $t('teamManagement.lastRun') }}: {{ formatJobDate(schedulerJobs.match_results.lastRun) }}
{{ t('teamManagement.lastRun') }}: {{ formatJobDate(schedulerJobs.match_results.lastRun) }}
<span v-if="schedulerJobs.match_results.fetchedCount !== null" class="job-count">
({{ schedulerJobs.match_results.fetchedCount }} {{ $t('teamManagement.fetched') }})
({{ schedulerJobs.match_results.fetchedCount }} {{ t('teamManagement.fetched') }})
</span>
<span v-if="!schedulerJobs.match_results.success" class="job-error">⚠️ {{ $t('teamManagement.error') }}</span>
<span v-if="!schedulerJobs.match_results.success" class="job-error">⚠️ {{ t('teamManagement.error') }}</span>
</span>
</div>
<div v-if="schedulerJobs.match_results.teamDetails && schedulerJobs.match_results.teamDetails.length > 0" class="team-details">
@@ -45,9 +45,9 @@
<div class="toggle-new-team">
<span @click="toggleNewTeam">
<span class="add">{{ teamFormIsOpen ? '-' : '+' }}</span>
{{ teamToEdit === null ? $t('teamManagement.newTeam') : $t('teamManagement.editTeam') }}
{{ teamToEdit === null ? t('teamManagement.newTeam') : t('teamManagement.editTeam') }}
</span>
<button v-if="teamToEdit !== null" @click="resetToNewTeam">{{ $t('teamManagement.createNewTeam') }}</button>
<button v-if="teamToEdit !== null" @click="resetToNewTeam">{{ t('teamManagement.createNewTeam') }}</button>
</div>
<div v-if="teamFormIsOpen" class="new-team-form">
@@ -55,14 +55,14 @@
<!-- Linke Spalte: Grundeinstellungen -->
<div class="basic-settings">
<label>
<span>{{ $t('teamManagement.teamName') }}:</span>
<input type="text" v-model="newTeamName" :placeholder="$t('teamManagement.teamNamePlaceholder')">
<span>{{ t('teamManagement.teamName') }}:</span>
<input type="text" v-model="newTeamName" :placeholder="t('teamManagement.teamNamePlaceholder')">
</label>
<label>
<span>{{ $t('teamManagement.league') }}:</span>
<span>{{ t('teamManagement.league') }}:</span>
<select v-model="newLeagueId">
<option value="">{{ $t('teamManagement.noLeague') }}</option>
<option value="">{{ t('teamManagement.noLeague') }}</option>
<option v-for="league in filteredLeagues" :key="league.id" :value="league.id">
{{ league.name }}
</option>
@@ -71,39 +71,39 @@
<div class="form-actions">
<button @click="addNewTeam" :disabled="!newTeamName.trim()">
{{ teamToEdit ? $t('teamManagement.change') : $t('teamManagement.createAndEdit') }}
{{ teamToEdit ? t('teamManagement.change') : t('teamManagement.createAndEdit') }}
</button>
<button @click="resetNewTeam" v-if="teamToEdit === null" class="cancel-action">
{{ $t('teamManagement.clearFields') }}
{{ t('teamManagement.clearFields') }}
</button>
<button @click="resetToNewTeam" v-if="teamToEdit !== null" class="cancel-action">
{{ $t('teamManagement.createNewTeam') }}
{{ t('teamManagement.createNewTeam') }}
</button>
</div>
<!-- Spieler-Statistik -->
<div v-if="teamToEdit && teamToEdit.leagueId" class="player-stats">
<div class="stats-header">
<span class="section-title">📊 {{ $t('teamManagement.playerStats') }}</span>
<span class="section-title">📊 {{ t('teamManagement.playerStats') }}</span>
<button @click="refreshPlayerStats" :disabled="loadingStats" class="btn-sm">
{{ loadingStats ? '⏳' : '🔄' }}
</button>
</div>
<div v-if="loadingStats" class="loading-stats">{{ $t('teamManagement.loadingStats') }}</div>
<div v-if="loadingStats" class="loading-stats">{{ t('teamManagement.loadingStats') }}</div>
<div v-else-if="playerStats.length === 0" class="no-stats">
{{ $t('teamManagement.noPlayerStats') }}
{{ t('teamManagement.noPlayerStats') }}
</div>
<table v-else class="stats-table">
<thead>
<tr>
<th>{{ $t('teamManagement.player') }}</th>
<th :title="$t('teamManagement.qttr')">(Q)TTR</th>
<th :title="$t('teamManagement.seasonFull')">{{ $t('teamManagement.season') }}</th>
<th :title="isSecondHalf ? $t('teamManagement.secondHalfFull') : $t('teamManagement.firstHalfFull')">
{{ isSecondHalf ? $t('teamManagement.secondHalf') : $t('teamManagement.firstHalf') }}
<th>{{ t('teamManagement.player') }}</th>
<th :title="t('teamManagement.qttr')">(Q)TTR</th>
<th :title="t('teamManagement.seasonFull')">{{ t('teamManagement.season') }}</th>
<th :title="isSecondHalf ? t('teamManagement.secondHalfFull') : t('teamManagement.firstHalfFull')">
{{ isSecondHalf ? t('teamManagement.secondHalf') : t('teamManagement.firstHalf') }}
</th>
</tr>
</thead>
@@ -128,40 +128,40 @@
<div v-if="teamToEdit" class="advanced-settings">
<!-- Upload-Buttons -->
<div class="upload-actions compact">
<span class="section-title">📋 {{ $t('teamManagement.documents') }}</span>
<span class="section-title">📋 {{ t('teamManagement.documents') }}</span>
<div class="upload-buttons-compact">
<button @click="uploadCodeList" class="btn-upload-sm">
📋 {{ $t('teamManagement.codeList') }}
📋 {{ t('teamManagement.codeList') }}
</button>
<button @click="uploadPinList" class="btn-upload-sm">
🔐 {{ $t('teamManagement.pinList') }}
🔐 {{ t('teamManagement.pinList') }}
</button>
</div>
</div>
<!-- Automatische Jobs Info für dieses Team -->
<div v-if="getTeamJobInfo(teamToEdit)" class="team-job-info compact">
<span class="section-title">🔄 {{ $t('teamManagement.automaticJobs') }}</span>
<span class="section-title">🔄 {{ t('teamManagement.automaticJobs') }}</span>
<div v-if="getTeamJobInfo(teamToEdit).lastRun" class="team-job-details">
<div class="team-job-item">
<span class="team-job-label">{{ $t('teamManagement.lastUpdated') }}:</span>
<span class="team-job-label">{{ t('teamManagement.lastUpdated') }}:</span>
<span class="team-job-value">{{ formatJobDate(getTeamJobInfo(teamToEdit).lastRun) }}</span>
</div>
<div v-if="getTeamJobInfo(teamToEdit).success !== null" class="team-job-item">
<span class="team-job-label">{{ $t('teamManagement.status') }}:</span>
<span v-if="getTeamJobInfo(teamToEdit).success" class="team-job-status success">✓ {{ $t('teamManagement.successful') }}</span>
<span v-else class="team-job-status error">✗ {{ $t('teamManagement.error') }}</span>
<span class="team-job-label">{{ t('teamManagement.status') }}:</span>
<span v-if="getTeamJobInfo(teamToEdit).success" class="team-job-status success">✓ {{ t('teamManagement.successful') }}</span>
<span v-else class="team-job-status error">✗ {{ t('teamManagement.error') }}</span>
</div>
</div>
<div v-else class="team-job-details">
<span class="team-job-no-data">{{ $t('teamManagement.noAutomaticUpdate') }}</span>
<span class="team-job-no-data">{{ t('teamManagement.noAutomaticUpdate') }}</span>
</div>
</div>
<!-- MyTischtennis URL Konfiguration -->
<div class="mytischtennis-config compact">
<div class="mytischtennis-header-compact">
<span class="section-title">🏓 {{ $t('teamManagement.myTischtennis') }}</span>
<span class="section-title">🏓 {{ t('teamManagement.myTischtennis') }}</span>
<div class="status-inline">
<span v-if="getMyTischtennisStatus(teamToEdit).complete" class="badge-sm complete">✓</span>
<span v-else-if="getMyTischtennisStatus(teamToEdit).partial" class="badge-sm partial">⚠</span>
@@ -182,7 +182,7 @@
type="text"
v-model="myTischtennisUrl"
@keyup.enter="parseMyTischtennisUrl"
:placeholder="$t('teamManagement.myTischtennisUrlPlaceholder')"
:placeholder="t('teamManagement.myTischtennisUrlPlaceholder')"
class="compact-url-input"
:disabled="parsingUrl"
>
@@ -198,10 +198,10 @@
</div>
<div class="teams-list">
<h3>{{ $t('teamManagement.teams') }} ({{ teams.length }}) - {{ $t('teamManagement.season') }} {{ currentSeason?.season || $t('teamManagement.seasonUnknown') }}</h3>
<h3>{{ t('teamManagement.teams') }} ({{ teams.length }}) - {{ t('teamManagement.season') }} {{ currentSeason?.season || t('teamManagement.seasonUnknown') }}</h3>
<div v-if="teams.length === 0" class="no-teams">
<p>{{ $t('teamManagement.noTeamsYet') }}</p>
<p>{{ t('teamManagement.noTeamsYet') }}</p>
</div>
<div v-else class="teams-grid">
@@ -214,10 +214,10 @@
<div class="team-header">
<h4>{{ team.name }}</h4>
<div class="team-actions">
<button @click.stop="editTeam(team)" class="btn-edit" :title="$t('teamManagement.edit')">
<button @click.stop="editTeam(team)" class="btn-edit" :title="t('teamManagement.edit')">
✏️
</button>
<button @click.stop="deleteTeam(team)" class="btn-delete" :title="$t('teamManagement.delete')">
<button @click.stop="deleteTeam(team)" class="btn-delete" :title="t('teamManagement.delete')">
🗑️
</button>
</div>
@@ -225,17 +225,17 @@
<div class="team-info">
<div class="info-row">
<span class="label">{{ $t('teamManagement.league') }}:</span>
<span class="label">{{ t('teamManagement.league') }}:</span>
<span class="value">
{{ team.league ? team.league.name : $t('teamManagement.noAssignment') }}
{{ team.league ? team.league.name : t('teamManagement.noAssignment') }}
</span>
</div>
<div class="info-row">
<span class="label">{{ $t('teamManagement.season') }}:</span>
<span class="value">{{ team.season?.season || $t('teamManagement.unknown') }}</span>
<span class="label">{{ t('teamManagement.season') }}:</span>
<span class="value">{{ team.season?.season || t('teamManagement.unknown') }}</span>
</div>
<div class="info-row">
<span class="label">{{ $t('teamManagement.created') }}:</span>
<span class="label">{{ t('teamManagement.created') }}:</span>
<span class="value">{{ formatDate(team.createdAt) }}</span>
</div>
@@ -243,13 +243,13 @@
<div class="info-row mytischtennis-status">
<span class="label">🏓 MyTischtennis:</span>
<span v-if="getMyTischtennisStatus(team).complete" class="status-badge complete" :title="getMyTischtennisStatus(team).tooltip">
✓ {{ $t('teamManagement.fullyConfigured') }}
✓ {{ t('teamManagement.fullyConfigured') }}
</span>
<span v-else-if="getMyTischtennisStatus(team).partial" class="status-badge partial" :title="getMyTischtennisStatus(team).tooltip">
⚠ {{ $t('teamManagement.partiallyConfigured') }}
⚠ {{ t('teamManagement.partiallyConfigured') }}
</span>
<span v-else class="status-badge missing" :title="getMyTischtennisStatus(team).tooltip">
✗ {{ $t('teamManagement.notConfigured') }}
✗ {{ t('teamManagement.notConfigured') }}
</span>
</div>
@@ -263,20 +263,20 @@
{{ getTeamJobInfo(team).success ? '✓' : '✗' }}
</span>
</span>
<span v-else class="team-job-no-data">{{ $t('teamManagement.never') }}</span>
<span v-else class="team-job-no-data">{{ t('teamManagement.never') }}</span>
</span>
</div>
</div>
<!-- PDF-Dokumente Icons -->
<div class="team-documents">
<div class="documents-label">{{ $t('teamManagement.documents') }}:</div>
<div class="documents-label">{{ t('teamManagement.documents') }}:</div>
<div class="document-icons">
<button
v-if="getTeamDocuments(team.id, 'code_list').length > 0"
@click.stop="showPDFDialog(team.id, 'code_list')"
class="document-icon code-list-icon"
:title="$t('teamManagement.showCodeList')"
:title="t('teamManagement.showCodeList')"
>
📋
</button>
@@ -284,7 +284,7 @@
v-if="getTeamDocuments(team.id, 'pin_list').length > 0"
@click.stop="showPDFDialog(team.id, 'pin_list')"
class="document-icon pin-list-icon"
:title="$t('teamManagement.showPinList')"
:title="t('teamManagement.showPinList')"
>
🔐
</button>
@@ -343,6 +343,7 @@ import { useStore } from 'vuex';
import SeasonSelector from '../components/SeasonSelector.vue';
import apiClient from '../apiClient.js';
import { getSafeErrorMessage, getSafeMessage } from '../utils/errorMessages.js';
import i18n from '../i18n';
import InfoDialog from '../components/InfoDialog.vue';
import ConfirmDialog from '../components/ConfirmDialog.vue';
@@ -357,6 +358,7 @@ export default {
ConfirmDialog},
setup() {
const store = useStore();
const t = (key, params) => i18n.global.t(key, params);
// Dialog States
const infoDialog = ref({
@@ -590,7 +592,7 @@ export default {
};
const formatJobDate = (dateString) => {
if (!dateString) return 'Nie';
if (!dateString) return t('myTischtennisAccount.never');
const date = new Date(dateString);
const now = new Date();
const diffMs = now - date;
@@ -598,11 +600,11 @@ export default {
const diffHours = Math.floor(diffMs / 3600000);
const diffDays = Math.floor(diffMs / 86400000);
if (diffMins < 1) return 'gerade eben';
if (diffMins < 60) return `vor ${diffMins} Min.`;
if (diffHours < 24) return `vor ${diffHours} Std.`;
if (diffDays === 1) return 'gestern';
if (diffDays < 7) return `vor ${diffDays} Tagen`;
if (diffMins < 1) return t('myTischtennisAccount.justNow');
if (diffMins < 60) return t('myTischtennisAccount.minutesAgo', { count: diffMins });
if (diffHours < 24) return t('myTischtennisAccount.hoursAgo', { count: diffHours });
if (diffDays === 1) return t('myTischtennisAccount.yesterday');
if (diffDays < 7) return t('myTischtennisAccount.daysAgo', { count: diffDays });
// Format: DD.MM.YYYY HH:MM
return date.toLocaleDateString('de-DE', {
@@ -1276,6 +1278,7 @@ export default {
};
return {
t,
infoDialog,
confirmDialog,
showInfo,