feat: implement table assignment and distribution for tournament matches

2026-05-17 23:55:39 +02:00
parent 6c7ae6860b
commit 697e67d46e
16 changed files with 426 additions and 22 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -204,7 +204,9 @@
        v-model="infoDialog.isOpen"
        :title="infoDialog.title"
        :message="infoDialog.message"
-        :details="infoDialog.details"
+      :details="infoDialog.details"
+      :detailsHtml="infoDialog.detailsHtml"
+      :size="infoDialog.size"
        :type="infoDialog.type"
    />
    
@@ -345,7 +347,15 @@ export default {
        },
        // Dialog Helper Methods
        async showInfo(title, message, details = '', type = 'info') {
-            this.infoDialog = buildInfoConfig({ title, message, details, type });
+            // If details looks like HTML (e.g., a table), pass it as detailsHtml so InfoDialog renders it
+            const looksLikeHtml = typeof details === 'string' && /<\s*\w+[^>]*>/.test(details);
+            console.debug('[App.showInfo] looksLikeHtml=', looksLikeHtml, 'title=', title, 'message=', message, 'detailsLength=', typeof details === 'string' ? details.length : 0);
+            if (looksLikeHtml) {
+              // For HTML details (tables), use a wider dialog
+              this.infoDialog = buildInfoConfig({ title, message, details: '', detailsHtml: details, type, size: 'medium' });
+            } else {
+              this.infoDialog = buildInfoConfig({ title, message, details, type });
+            }
        },
        
        async showConfirm(title, message, details = '', type = 'info', options = {}) {
--- a/frontend/src/components/InfoDialog.vue
+++ b/frontend/src/components/InfoDialog.vue
@@ -180,12 +180,25 @@ export default {
  line-height: 1.5;
 }

-.info-details :deep(table) {
+.info-details ::v-deep table {
  color: #000;
  text-align: left;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.info-details ::v-deep table thead th {
+  padding: 6px 8px;
+  border-bottom: 1px solid #e9ecef;
+  text-align: left;
 }

-.info-details :deep(tr:nth-child(even)) {
+.info-details ::v-deep table tbody td {
+  padding: 6px 8px;
+  border-bottom: 1px solid #f1f3f5;
+}
+
+.info-details ::v-deep table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
 }

--- a/frontend/src/components/tournament/TournamentConfigTab.vue
+++ b/frontend/src/components/tournament/TournamentConfigTab.vue
@@ -17,7 +17,8 @@
                    {{ $t('tournaments.numberOfTables') }}:
                    <input type="number" :value="numberOfTables" @input="$emit('update:numberOfTables', $event.target.value ? parseInt($event.target.value, 10) : null)" min="1" />
                </label>
-            <button @click="$emit('generate-pdf')" class="btn-primary" style="margin-top: 1rem;">{{ $t('tournaments.exportPDF') }}</button>
+                <button @click="$emit('generate-pdf')" class="btn-primary" style="margin-top: 1rem;">{{ $t('tournaments.exportPDF') }}</button>
+                <!-- 'Freie Tische verteilen' removed from Konfiguration tab -->
        </div>
        <label class="checkbox-item">
            <input type="checkbox" :checked="isGroupTournament" @change="$emit('update:isGroupTournament', $event.target.checked)" />
@@ -203,6 +204,16 @@ export default {
    components: {
        TournamentClassList
    },
+    methods: {
+        async onDistributeTables() {
+            try {
+                await apiClient.post('/tournament/matches/distribute', { clubId: this.clubId, tournamentId: this.tournamentId });
+                this.stageConfig.success = this.$t('tournaments.tablesDistributed') || 'Tische wurden verteilt.';
+            } catch (err) {
+                this.stageConfig.error = err?.response?.data?.error || err.message || String(err);
+            }
+        },
+    },
    props: {
        clubId: {
            type: [Number, String],
--- a/frontend/src/components/tournament/TournamentResultsTab.vue
+++ b/frontend/src/components/tournament/TournamentResultsTab.vue
@@ -8,13 +8,19 @@
            @update:modelValue="$emit('update:selectedViewClass', $event)"
        />
        <section v-if="filteredGroupMatches.length" class="group-matches">
-            <h4>{{ $t('tournaments.groupMatches') }}</h4>
+            <div style="display:flex; align-items:center; justify-content:space-between;">
+                <h4>{{ $t('tournaments.groupMatches') }}</h4>
+                <div>
+                    <button v-if="numberOfTables" @click="onDistributeTables" class="btn-secondary">{{ $t('tournaments.distributeTables') }}</button>
+                </div>
+            </div>
            <table>
                <thead>
                    <tr>
                        <th>{{ $t('tournaments.round') }}</th>
                        <th>{{ $t('tournaments.group') }}</th>
                        <th>{{ $t('tournaments.encounter') }}</th>
+                        <th>Tisch</th>
                        <th>{{ $t('tournaments.result') }}</th>
                        <th>{{ $t('tournaments.sets') }}</th>
                        <th>{{ $t('tournaments.action') }}</th>
@@ -44,6 +50,17 @@
                                {{ getMatchPlayerNames(m).name1 }} – {{ getMatchPlayerNames(m).name2 }}
                            </template>
                        </td>
+                        <td>
+                            <template v-if="numberOfTables">
+                                <select @click.stop @change.stop="onSetMatchTable(m, $event.target.value)" :value="m.tableNumber || ''">
+                                    <option value="">-</option>
+                                    <option v-for="n in numberOfTables" :key="n" :value="n">{{ n }}</option>
+                                </select>
+                            </template>
+                            <template v-else>
+                                -
+                            </template>
+                        </td>
                        <td>
                            <template v-if="m.result === 'BYE'">
                                BYE
@@ -124,6 +141,7 @@
                        <th>{{ $t('tournaments.class') }}</th>
                        <th>{{ $t('tournaments.round') }}</th>
                        <th>{{ $t('tournaments.encounter') }}</th>
+                        <th>Tisch</th>
                        <th>{{ $t('tournaments.result') }}</th>
                        <th>{{ $t('tournaments.sets') }}</th>
                        <th>{{ $t('tournaments.action') }}</th>
@@ -146,6 +164,17 @@
                                {{ getMatchPlayerNames(m).name1 }} – {{ getMatchPlayerNames(m).name2 }}
                            </template>
                        </td>
+                        <td>
+                            <template v-if="numberOfTables">
+                                <select @click.stop @change.stop="onSetMatchTable(m, $event.target.value)" :value="m.tableNumber || ''">
+                                    <option value="">-</option>
+                                    <option v-for="n in numberOfTables" :key="n" :value="n">{{ n }}</option>
+                                </select>
+                            </template>
+                            <template v-else>
+                                -
+                            </template>
+                        </td>
                        <td>
                            <template v-if="!m.isFinished">
                                <template v-for="r in m.tournamentResults" :key="r.set">
@@ -248,10 +277,17 @@
    stroke: currentColor;
 }
 .inline-delete:focus{ outline: none; box-shadow: 0 0 0 3px rgba(211,47,47,0.12); border-radius:3px; }
+
+/* Highlight for running matches (ensure high specificity) */
+.match-live:not(.match-finished) td {
+    background: #fff3cd !important;
+    color: #5a3500 !important;
+}
 </style>

 <script>
 import TournamentClassSelector from './TournamentClassSelector.vue';
+import apiClient from '../../apiClient';

 export default {
    name: 'TournamentResultsTab',
@@ -315,6 +351,15 @@ export default {
            type: Array,
            required: true
        },
+        clubId: {
+            type: [Number, String],
+            required: false,
+            default: null,
+        },
+        numberOfTables: {
+            type: [Number, null],
+            default: null,
+        },
        pairings: {
            type: Array,
            required: true
@@ -400,8 +445,72 @@ export default {
        'start-matches',
        'start-knockout',
        'reset-knockout'
+        ,'tables-distributed'
    ],
    methods: {
+        // Simple HTML escape to avoid injecting unsafe markup into the dialog
+        // We keep it minimal and safe for names/numbers
+        
+        escapeHtml(str) {
+            if (str == null) return '';
+            return String(str)
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#39;');
+        },
+
+        async onDistributeTables() {
+            if (!this.clubId || !this.selectedDate) return;
+            try {
+                const resp = await apiClient.post('/tournament/matches/distribute', { clubId: this.clubId, tournamentId: this.selectedDate });
+                const updated = resp?.data?.updated || [];
+
+                if (updated.length === 0) {
+                    // Keine passenden Spiele gefunden
+                    const msg = resp?.data?.message || (this.$t ? this.$t('tournaments.noAssignableMatches') : 'Keine Spiele verfügbar, bei denen beide Spieler frei sind.');
+                    if (this.$root && this.$root.showInfo) this.$root.showInfo(this.$t('tournaments.distributeTablesResult') || 'Tischverteilung', msg);
+                } else {
+                    // Baue eine lesbare Liste der zugewiesenen Paarungen
+                    // Generate an HTML table for better readability
+                    const rows = updated.map(m => {
+                        const local = (this.groupMatches || []).concat(this.knockoutMatches || []).find(x => x.id === m.id) || m;
+                        const names = this.getMatchPlayerNames(local);
+                        const tbl = m.tableNumber || (local.tableNumber || '-');
+                        return `<tr><td>${this.escapeHtml(names.name1)}</td><td>–</td><td>${this.escapeHtml(names.name2)}</td><td style="text-align:right">${this.escapeHtml(String(tbl))}</td></tr>`;
+                    }).join('');
+                    const tableHtml = `
+                        <table style="width:100%;border-collapse:collapse;">
+                          <thead><tr><th style="text-align:left">Spieler A</th><th></th><th style="text-align:left">Spieler B</th><th style="text-align:right">Tisch</th></tr></thead>
+                          <tbody>${rows}</tbody>
+                        </table>
+                    `;
+                    if (this.$root && this.$root.showInfo) this.$root.showInfo(this.$t('tournaments.distributeTablesResult') || 'Tischverteilung', this.$t('tournaments.tablesDistributed') || 'Tische wurden verteilt.', tableHtml);
+                }
+                // Debug log and emit updated matches so parent can update UI immediately
+                console.debug('[TournamentResultsTab.onDistributeTables] updatedCount=', Array.isArray(updated) ? updated.length : 0, 'updatedIds=', (updated || []).map(u => u.id));
+                this.$emit('tables-distributed', updated);
+            } catch (err) {
+                const msg = err?.response?.data?.error || err.message || String(err);
+                if (this.$root && this.$root.showInfo) {
+                    this.$root.showInfo(this.$t('messages.error') || 'Fehler', msg, '', 'error');
+                }
+            }
+        },
+        async onSetMatchTable(match, value) {
+            if (!this.clubId || !this.selectedDate || !match) return;
+            const tableNumber = value === '' ? null : Number(value);
+            try {
+                await apiClient.put(`/tournament/match/${this.clubId}/${this.selectedDate}/${match.id}/table`, { tableNumber });
+                this.$emit('tables-distributed');
+            } catch (err) {
+                const msg = err?.response?.data?.error || err.message || String(err);
+                if (this.$root && this.$root.showInfo) {
+                    this.$root.showInfo(this.$t('messages.error') || 'Fehler', msg, '', 'error');
+                }
+            }
+        },
        async onDeleteSet(match, set) {
            const title = this.$t ? this.$t('tournaments.confirmDeleteSetTitle') : null;
            const message = this.$t ? this.$t('tournaments.confirmDeleteSet') : 'Satz wirklich löschen?';
--- a/frontend/src/utils/dialogUtils.js
+++ b/frontend/src/utils/dialogUtils.js
@@ -35,6 +35,7 @@ export function buildInfoConfig({
  title = 'Information',
  message = '',
  details = '',
+  detailsHtml = '',
  type = 'info',
  size = 'small',
  closeOnOverlay = true,
@@ -53,6 +54,8 @@ export function buildInfoConfig({
    title: sanitizeText(title, defaultTitle, 120),
    message: sanitizeText(message, '', 600),
    details: sanitizeText(details, '', 1200),
+    // detailsHtml is intentionally not sanitized here to allow HTML tables; callers must ensure safety.
+    detailsHtml: typeof detailsHtml === 'string' ? detailsHtml : '',
    type: safeType,
    size,
    closeOnOverlay,
--- a/frontend/src/views/TournamentTab.vue
+++ b/frontend/src/views/TournamentTab.vue
@@ -182,9 +182,11 @@
            />

            <!-- Tab: Ergebnisse -->
-            <TournamentResultsTab
+                <TournamentResultsTab
                v-if="activeTab === 'results'"
                :selected-date="selectedDate"
+                :club-id="currentClub"
+                :number-of-tables="currentNumberOfTables"
                :selected-view-class="selectedViewClass"
                :tournament-classes="tournamentClasses"
                :group-matches="groupMatches"
@@ -213,6 +215,7 @@
                @start-matches="startMatches"
                @start-knockout="startKnockout"
                @reset-knockout="resetKnockout"
+                @tables-distributed="handleTablesDistributed"
            />

            <!-- Tab: Platzierungen -->
@@ -240,6 +243,7 @@
        :title="infoDialog.title"
        :message="infoDialog.message"
        :details="infoDialog.details"
+        :detailsHtml="infoDialog.detailsHtml"
        :type="infoDialog.type"
    />
    
@@ -1398,6 +1402,30 @@ export default {
            }
        },

+        async handleTablesDistributed(updated) {
+            console.debug('[TournamentTab.handleTablesDistributed] updatedCount=', Array.isArray(updated) ? updated.length : 0);
+            try {
+                // Wenn updated mitgegeben wurde, aktualisiere lokale Matches sofort (tableNumber + isActive)
+                if (Array.isArray(updated) && updated.length > 0) {
+                    const map = new Map(updated.map(u => [Number(u.id), u]));
+                    this.matches = this.matches.map(m => {
+                        const found = map.get(Number(m.id));
+                        if (found) {
+                            console.debug('[TournamentTab] apply update to match', m.id, '-> tableNumber=', found.tableNumber || found.table_number);
+                            return { ...m, tableNumber: found.tableNumber || found.table_number || m.tableNumber, isActive: true };
+                        }
+                        return m;
+                    });
+                    // Force re-render so CSS highlight applies
+                    this.$forceUpdate();
+                }
+            } catch (err) {
+                console.error('[handleTablesDistributed] Error updating local matches:', err);
+            }
+            // Lade die Turnierdaten zur endgültigen Synchronisation
+            try { await this.loadTournamentData(); } catch (e) { /* ignore */ }
+        },
+
        getPlayerName(p) {
            // Unterstütze sowohl interne (mit member) als auch externe Teilnehmer
            if (p.member) {
@@ -1712,12 +1740,27 @@ export default {
        },

        async finishMatch(match) {
-            await apiClient.post('/tournament/match/finish', {
-                clubId: this.currentClub,
-                tournamentId: this.selectedDate,
-                matchId: match.id
-            });
-            await this.loadTournamentData();
+            try {
+                await apiClient.post('/tournament/match/finish', {
+                    clubId: this.currentClub,
+                    tournamentId: this.selectedDate,
+                    matchId: match.id
+                });
+                await this.loadTournamentData();
+
+                // Nach dem Neuladen die aktualisierte Match‑Info holen und anzeigen (inkl. Tisch)
+                const updated = (this.matches || []).find(m => m.id === match.id) || match;
+                const names = this.getMatchPlayerNames(updated);
+                const table = (updated && updated.tableNumber != null) ? updated.tableNumber : (match.tableNumber != null ? match.tableNumber : '-');
+                const title = this.$t ? this.$t('messages.info') : 'Info';
+                const body = `${names.name1} – ${names.name2}\n${this.$t ? this.$t('tournaments.numberOfTables') : 'Tisch'}: ${table}`;
+                if (this.$root && this.$root.showInfo) {
+                    this.$root.showInfo(title, body);
+                }
+            } catch (err) {
+                const message = safeErrorMessage(err, 'Fehler beim Abschließen des Matches.');
+                await this.showInfo('Fehler', message, '', 'error');
+            }
        },

        async setMatchActive(match, isActive) {
@@ -4044,14 +4087,14 @@ tbody tr:hover:not(.active-match) {
    color: #828a91 !important;
 }

-/* Laufende Spiele farblich hervorheben - nur wenn nicht abgeschlossen */
+/* Laufende Spiele farblich hervorheben - nur wenn nicht abgeschlossen (orange wie vorher) */
 .match-live:not(.match-finished) {
-    background-color: #d4edda !important;
-    border-left: 4px solid #28a745 !important;
+    background-color: #fff3cd !important; /* helles Orange/Gelb */
+    border-left: 4px solid #ff9800 !important; /* oranger Rand */
 }

 .match-live:not(.match-finished) td {
-    color: #155724;
+    color: #8a4f28; /* dunkles Orange/Braun für Lesbarkeit */
    font-weight: 500;
 }