Fix: Lokalisierung für "Generate Start Numbers" Button

Problem

Der Button "Generate Start Numbers" auf der Event Management Seite hatte keine deutsche Übersetzung.

Ursache

Die Übersetzungen waren zwar in den separaten Namespace-Dateien vorhanden: - client/src/locales/de/eventManagement.json ✅ - client/src/locales/en/eventManagement.json ✅

ABER: Die i18n-Konfiguration (client/src/i18n/index.ts) verwendet die großen Haupt-Dateien: - client/src/i18n/locales/de.json ❌ (fehlend) - client/src/i18n/locales/en.json ❌ (fehlend)

i18n-Struktur im Projekt

Tatsächlich verwendete Konfiguration:

// client/src/i18n/index.ts
import en from './locales/en.json'  // ← Große Haupt-Datei
import de from './locales/de.json'  // ← Große Haupt-Datei

const resources = {
  en: { translation: en },
  de: { translation: de }
}

Nicht verwendete Dateien (zur Referenz):

client/src/locales/
  ├── de/
  │   └── eventManagement.json  ← Nicht geladen!
  └── en/
      └── eventManagement.json  ← Nicht geladen!

Diese separaten Namespace-Dateien existieren, werden aber nicht von der i18n-Konfiguration importiert.

Lösung

Übersetzungen zu den tatsächlich verwendeten Haupt-JSON-Dateien hinzugefügt:

Deutsche Übersetzung (de.json)

"eventManagement": {
  "generateStartNumbers": "Startnummern generieren",
  "generatingStartNumbers": "Startnummern werden generiert...",
  "startNumbersGenerated": "Startnummern wurden erfolgreich generiert.",
  "startNumbersGenerationError": "Fehler beim Generieren der Startnummern.",
  "title": "Veranstaltungsverwaltung",
  // ... rest of translations
}

Englische Übersetzung (en.json)

"eventManagement": {
  "generateStartNumbers": "Generate Start Numbers",
  "generatingStartNumbers": "Generating start numbers...",
  "startNumbersGenerated": "Start numbers generated successfully.",
  "startNumbersGenerationError": "Error generating start numbers.",
  "title": "Event Management",
  // ... rest of translations
}

Button-Implementierung (bereits korrekt)

Der Button in EventManagement.tsx verwendete bereits die richtige Lokalisierung:

<button
  onClick={handleGenerateStartNumbers}
  disabled={isGeneratingNumbers}
  className="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg"
>
  {isGeneratingNumbers ? (
    <>
      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
      <span>{t('eventManagement.generatingStartNumbers')}</span>
    </>
  ) : (
    <span>{t('eventManagement.generateStartNumbers')}</span>
  )}
</button>

Hinweis: Doppelte eventManagement Einträge

Beide Haupt-JSON-Dateien (de.json und en.json) enthielten zwei eventManagement Blöcke:

Block 1 (Zeile ~84):

"eventManagement": {
  "title": "Veranstaltungsverwaltung",
  "subtitle": "3-Schritte-Workflow: Setup → Wettkampf → Ergebnisse",
  "eventSetup": { ... }
}

Block 2 (Zeile ~568): ← Dieser wird verwendet!

"eventManagement": {
  "title": "Veranstaltungsverwaltung",
  "subtitle": "Details und Statistiken der aktuellen Veranstaltung verwalten",
  "form": { ... },
  "statistics": { ... }
}

Lösung: Übersetzungen wurden zum zweiten Block (Zeile ~568) hinzugefügt, da dieser für die Event Management Seite verwendet wird.

Warum gibt es zwei eventManagement Blöcke?

Vermutung: Historische Gründe oder unterschiedliche Verwendungszwecke: - Block 1: Workflow-orientierte Übersetzungen (Setup → Competition → Results) - Block 2: Detail-Seite Übersetzungen (Event Management Page)

Empfehlung für die Zukunft: Diese Blöcke konsolidieren oder klar unterscheiden (z.B. eventManagement vs. eventManagementWorkflow).

Betroffene Dateien

Geändert:

  • client/src/i18n/locales/de.json - Zeile 568: generateStartNumbers Übersetzungen hinzugefügt
  • client/src/i18n/locales/en.json - Zeile 568: generateStartNumbers Übersetzungen hinzugefügt

Nicht geändert (bereits vorhanden):

  • client/src/locales/de/eventManagement.json - Übersetzungen waren bereits da
  • client/src/locales/en/eventManagement.json - Übersetzungen waren bereits da
  • client/src/pages/EventManagement.tsx - Button-Code war bereits korrekt

Testen

Manueller Test:

  1. Öffne Event Management Seite
  2. Wechsle Sprache zu Deutsch
  3. ✅ Button zeigt: "Startnummern generieren"
  4. Klicke auf Button
  5. ✅ Loading-Status zeigt: "Startnummern werden generiert..."
  6. Nach Erfolg:
  7. ✅ Toast zeigt: "Startnummern wurden erfolgreich generiert."

Sprach-Wechsel:

  1. Wechsle zu Englisch
  2. ✅ Button zeigt: "Generate Start Numbers"
  3. ✅ Loading: "Generating start numbers..."
  4. ✅ Success: "Start numbers generated successfully."

Lessons Learned

1. i18n-Konfiguration prüfen

Nicht davon ausgehen, dass alle Übersetzungsdateien geladen werden. Immer prüfen: 

// Was wird tatsächlich importiert?
import translations from './locales/XX.json'

2. Namespace-Dateien vs. Haupt-Dateien

Das Projekt hat zwei Übersetzungsstrukturen: - Separate Namespace-Dateien: locales/de/eventManagement.json (nicht verwendet) - Haupt-JSON-Dateien: i18n/locales/de.json (tatsächlich verwendet)

Empfehlung: Entweder eine Struktur verwenden oder beide synchron halten.

3. Doppelte Keys finden

Bei großen JSON-Dateien können doppelte Keys existieren. Tools zum Finden: 

# JSON-Datei parsen und auf Duplikate prüfen
jq -r 'paths(scalars) as $p | "\($p | join("."))"' de.json | sort | uniq -d

4. Zukunftssichere Lösung

Für neue Übersetzungen: 1. Prüfen, welche Dateien von i18n importiert werden 2. Übersetzungen dort hinzufügen 3. Optional: Auch separate Namespace-Dateien aktualisieren (für Konsistenz)

Migration-Empfehlung (für später)

Um die Verwirrung zu vermeiden, könnte man die i18n-Konfiguration umstellen:

Option A: Namespaces verwenden

// i18n/index.ts
import eventManagementDE from '../locales/de/eventManagement.json'
import eventManagementEN from '../locales/en/eventManagement.json'

const resources = {
  en: { eventManagement: eventManagementEN },
  de: { eventManagement: eventManagementDE }
}

Dann im Code: 

const { t } = useTranslation('eventManagement')
t('generateStartNumbers') // Statt t('eventManagement.generateStartNumbers')

Option B: Haupt-Dateien beibehalten

Die separaten Namespace-Dateien entfernen oder nur als Referenz behalten.

Option C: Build-Prozess

Ein Build-Script erstellen, das alle Namespace-Dateien in die Haupt-Dateien merged: 

# merge-translations.js
const de = {};
const en = {};

// Read all namespace files
de.eventManagement = require('./locales/de/eventManagement.json');
en.eventManagement = require('./locales/en/eventManagement.json');

// Write merged files
fs.writeFileSync('./i18n/locales/de.json', JSON.stringify(de, null, 2));
fs.writeFileSync('./i18n/locales/en.json', JSON.stringify(en, null, 2));

Zusammenfassung

✅ Problem: Fehlende Lokalisierung für "Generate Start Numbers" Button ✅ Ursache: Übersetzungen waren in separaten Namespace-Dateien, aber nicht in den Haupt-JSON-Dateien ✅ Lösung: Übersetzungen zu den tatsächlich verwendeten Haupt-JSON-Dateien hinzugefügt ✅ Ergebnis: Button ist jetzt vollständig lokalisiert (DE/EN)

Die Übersetzungen funktionieren jetzt in beiden Sprachen korrekt!