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

Add group deletion functionality and socket event emissions for real-time updates

Browse Source 
This commit introduces the ability to delete groups in the groupController, along with the necessary backend service updates. It also adds socket event emissions for group and activity changes, ensuring real-time updates are sent to clients when groups are deleted. The frontend is updated to include a delete button in the DiaryView, allowing users to remove groups easily. Additionally, the groupRoutes and socketService are modified to support these new features, enhancing the overall interactivity of the application.
This commit is contained in:
Torsten Schulz (local)
2025-11-13 18:48:51 +01:00
parent 2b06a8dd10
commit 9b8dcd8561
8 changed files with 326 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/services/socketService.js
View File

@@ -166,6 +166,28 @@ export const onMemberChanged = (callback) => {
}
};
export const onGroupChanged = (callback) => {
if (socket) {
socket.on('group:changed', (data) => {
console.log('📡 [Socket] group:changed empfangen:', data);
callback(data);
});
} else {
console.warn('⚠️ [Socket] onGroupChanged: Socket nicht verbunden');
}
};
export const onTournamentChanged = (callback) => {
if (socket) {
socket.on('tournament:changed', (data) => {
console.log('📡 [Socket] tournament:changed empfangen:', data);
callback(data);
});
} else {
console.warn('⚠️ [Socket] onTournamentChanged: Socket nicht verbunden');
}
};
// Event-Listener entfernen
export const offParticipantAdded = (callback) => {
if (socket) {
@@ -245,3 +267,15 @@ export const offMemberChanged = (callback) => {
}
};
export const offGroupChanged = (callback) => {
if (socket) {
socket.off('group:changed', callback);
}
};
export const offTournamentChanged = (callback) => {
if (socket) {
socket.off('tournament:changed', callback);
}
};

77
frontend/src/views/DiaryView.vue
View File

@@ -96,6 +96,10 @@
<input v-else type="text" v-model="group.lead" @blur="saveGroup(group)"
@keyup.enter="saveGroup(group)" @keyup.esc="cancelEditGroup"
style="display: inline;width:10em" />
<button v-if="editingGroupId !== group.id" @click="deleteGroup(group.id)"
class="trash-btn"
style="margin-left: 10px;"
title="Gruppe löschen">🗑️</button>
</li>
</ul>
</div>
@@ -104,11 +108,11 @@
<div class="groups">
<div>
<label for="groupCount">Anzahl Gruppen:</label>
<input type="number" id="groupCount" v-model="newGroupCount" min="2" max="10" required />
<input type="number" id="groupCount" v-model="newGroupCount" :min="groups.length > 0 ? 1 : 2" max="10" required />
</div>
<div>
<label>&nbsp;</label>
<button type="submit" @click="createGroups">Gruppen erstellen</button>
<button type="submit" @click="createGroups">{{ groups.length > 0 ? 'Gruppe hinzufügen' : 'Gruppen erstellen' }}</button>
</div>
</div>
</div>
@@ -689,6 +693,7 @@ import {
onActivityMemberRemoved,
onActivityChanged,
onMemberChanged,
onGroupChanged,
offParticipantAdded,
offParticipantRemoved,
offParticipantUpdated,
@@ -700,7 +705,8 @@ import {
offActivityMemberAdded,
offActivityMemberRemoved,
offActivityChanged,
offMemberChanged
offMemberChanged,
offGroupChanged
} from '../services/socketService.js';
export default {
@@ -1215,6 +1221,8 @@ export default {
try {
const response = await apiClient.get(`/group/${this.currentClub}/${this.date.id}`);
this.groups = response.data;
// Setze newGroupCount basierend auf vorhandenen Gruppen
this.newGroupCount = this.groups.length > 0 ? 1 : 2;
} catch (error) {
// ignore
}
@@ -1807,6 +1815,13 @@ export default {
},
async createGroups() {
try {
// Validierung: Wenn keine Gruppen existieren, müssen mindestens 2 erstellt werden
if (this.groups.length === 0 && this.newGroupCount < 2) {
this.showInfo('Fehler', 'Beim ersten Erstellen müssen mindestens 2 Gruppen erstellt werden!', '', 'error');
this.newGroupCount = 2;
return;
}
// Bestimme Startnummer basierend auf vorhandenen Gruppen
const existingNumbers = (this.groups || [])
.map(g => parseInt((g.name || '').trim(), 10))
@@ -1824,8 +1839,14 @@ export default {
}
await apiClient.post('/group', form);
}
const countCreated = this.newGroupCount;
await this.loadGroups();
this.showInfo('Erfolg', `${this.newGroupCount} Gruppen wurden erfolgreich erstellt!`, '', 'success');
// Setze newGroupCount zurück: 1 wenn bereits Gruppen existieren, 2 wenn keine
this.newGroupCount = this.groups.length > 0 ? 1 : 2;
const message = countCreated === 1
? '1 Gruppe wurde erfolgreich hinzugefügt!'
: `${countCreated} Gruppen wurden erfolgreich erstellt!`;
this.showInfo('Erfolg', message, '', 'success');
} catch (error) {
console.error('Fehler beim Erstellen der Gruppen:', error);
this.showInfo('Fehler', 'Fehler beim Erstellen der Gruppen', '', 'error');
@@ -1887,6 +1908,32 @@ export default {
cancelEditGroup() {
this.editingGroupId = null;
},
async deleteGroup(groupId) {
try {
const group = this.groups.find(g => g.id === groupId);
if (!group) {
return;
}
const confirmed = confirm(`Möchten Sie die Gruppe "${group.name}" wirklich löschen?`);
if (!confirmed) {
return;
}
await apiClient.delete(`/group/${groupId}`, {
data: {
clubid: this.currentClub,
dateid: this.date.id
}
});
await this.loadGroups();
this.showInfo('Erfolg', 'Gruppe wurde erfolgreich gelöscht!', '', 'success');
} catch (error) {
console.error('Fehler beim Löschen der Gruppe:', error);
this.showInfo('Fehler', 'Fehler beim Löschen der Gruppe', '', 'error');
}
},
async openTagInfos(member) {
if (!member) {
return;
@@ -2610,6 +2657,9 @@ export default {
// Event-Handler für Member-Änderungen
onMemberChanged(this.handleMemberChanged);
// Event-Handler für Gruppen-Änderungen
onGroupChanged(this.handleGroupChanged);
console.log('✅ [DiaryView] Alle Event-Handler registriert');
},
@@ -2626,6 +2676,7 @@ export default {
offActivityMemberRemoved(this.handleActivityMemberRemoved);
offActivityChanged(this.handleActivityChanged);
offMemberChanged(this.handleMemberChanged);
offGroupChanged(this.handleGroupChanged);
},
async handleParticipantAdded(data) {
@@ -2831,6 +2882,24 @@ export default {
console.log('⚠️ [DiaryView] Club stimmt nicht überein - Event Club:', data.clubId, 'Aktueller Club:', this.currentClub);
}
},
async handleGroupChanged(data) {
console.log('📡 [DiaryView] handleGroupChanged aufgerufen:', data);
// Nur aktualisieren, wenn das aktuelle Datum betroffen ist
if (this.date && this.date !== 'new' && String(this.date.id) === String(data.dateId)) {
console.log('✅ [DiaryView] Datum stimmt überein, lade Gruppenliste neu');
try {
await this.loadGroups();
console.log('✅ [DiaryView] Gruppenliste neu geladen');
// Force Vue update
this.$forceUpdate();
} catch (error) {
console.error('❌ [DiaryView] Fehler beim Neuladen der Gruppenliste:', error);
}
} else {
console.log('⚠️ [DiaryView] Datum stimmt nicht überein - Event dateId:', data.dateId, 'Aktuelles Datum:', this.date?.id);
}
},
},
async mounted() {
await this.init();

111
frontend/src/views/TournamentsView.vue
View File

@@ -30,7 +30,7 @@
</div>
<div v-show="showParticipants" class="participants-content">
<ul>
<li v-for="participant in participants" :key="participant.id">
<li v-for="participant in sortedParticipants" :key="participant.id">
{{ participant.member?.firstName || 'Unbekannt' }}
{{ participant.member?.lastName || '' }}
<template v-if="isGroupTournament">
@@ -72,6 +72,7 @@
</ul>
<div class="add-participant">
<select v-model="selectedMember">
<option :value="null">-- Teilnehmer auswählen --</option>
<option v-for="member in clubMembers" :key="member.id" :value="member.id">
{{ member.firstName }}
{{ member.lastName }}
@@ -674,6 +675,7 @@ import apiClient from '../apiClient.js';
import InfoDialog from '../components/InfoDialog.vue';
import ConfirmDialog from '../components/ConfirmDialog.vue';
import { buildInfoConfig, buildConfirmConfig, safeErrorMessage } from '../utils/dialogUtils.js';
import { connectSocket, disconnectSocket, onTournamentChanged, offTournamentChanged } from '../services/socketService.js';
export default {
name: 'TournamentsView',
data() {
@@ -720,6 +722,22 @@ export default {
computed: {
...mapGetters(['isAuthenticated', 'currentClub']),
sortedParticipants() {
if (!this.participants || this.participants.length === 0) {
return [];
}
return [...this.participants].sort((a, b) => {
const firstNameA = (a.member?.firstName || '').toLowerCase();
const firstNameB = (b.member?.firstName || '').toLowerCase();
if (firstNameA !== firstNameB) {
return firstNameA.localeCompare(firstNameB, 'de');
}
const lastNameA = (a.member?.lastName || '').toLowerCase();
const lastNameB = (b.member?.lastName || '').toLowerCase();
return lastNameA.localeCompare(lastNameB, 'de');
});
},
knockoutMatches() {
return this.matches.filter(m => m.round !== 'group');
},
@@ -883,12 +901,35 @@ export default {
const m = await apiClient.get(
`/clubmembers/get/${this.currentClub}/false`
);
this.clubMembers = m.data;
// Sortiere alphabetisch: zuerst nach Vorname, dann nach Nachname
const sorted = (m.data || []).sort((a, b) => {
const firstNameA = (a.firstName || '').toLowerCase();
const firstNameB = (b.firstName || '').toLowerCase();
if (firstNameA !== firstNameB) {
return firstNameA.localeCompare(firstNameB, 'de');
}
const lastNameA = (a.lastName || '').toLowerCase();
const lastNameB = (b.lastName || '').toLowerCase();
return lastNameA.localeCompare(lastNameB, 'de');
});
this.clubMembers = sorted;
},
mounted() {
// Lade Turniere beim Start
this.loadTournaments();
// Socket.IO verbinden
try {
if (this.currentClub) {
connectSocket(this.currentClub);
onTournamentChanged(this.handleTournamentChanged);
} else {
console.warn('⚠️ [TournamentsView] currentClub nicht gesetzt, Socket-Verbindung übersprungen');
}
} catch (error) {
console.error('❌ [TournamentsView] Fehler beim Verbinden mit Socket:', error);
}
// Event-Listener für das Entfernen des Highlights
document.addEventListener('click', (e) => {
// Entferne Highlight nur wenn nicht auf eine Matrix-Zelle geklickt wird
@@ -902,6 +943,11 @@ export default {
this.clearHighlight();
});
},
beforeUnmount() {
// Socket-Listener entfernen
offTournamentChanged(this.handleTournamentChanged);
disconnectSocket();
},
methods: {
// Dialog Helper Methods
async showInfo(title, message, details = '', type = 'info') {
@@ -1010,6 +1056,39 @@ export default {
this.showKnockout = this.matches.some(m => m.round !== 'group');
},
async handleTournamentChanged(data) {
console.log('📡 [TournamentsView] handleTournamentChanged aufgerufen:', data);
if (!data || !data.tournamentId) {
console.warn('⚠️ [TournamentsView] Ungültige Daten im Event:', data);
return;
}
// Nur aktualisieren, wenn das aktuelle Turnier betroffen ist
if (this.selectedDate && this.selectedDate !== 'new' && String(this.selectedDate) === String(data.tournamentId)) {
console.log('✅ [TournamentsView] Turnier stimmt überein, lade Daten neu');
try {
await this.loadTournamentData();
console.log('✅ [TournamentsView] Turnier-Daten neu geladen');
// Force Vue update
this.$forceUpdate();
} catch (error) {
console.error('❌ [TournamentsView] Fehler beim Neuladen der Turnier-Daten:', error);
}
} else {
// Wenn ein neues Turnier erstellt wurde, lade die Turnierliste neu
if (data.tournamentId && this.selectedDate === 'new') {
console.log('📡 [TournamentsView] Neues Turnier erstellt, lade Turnierliste neu');
try {
const d = await apiClient.get(`/tournament/${this.currentClub}`);
this.dates = d.data;
} catch (error) {
console.error('❌ [TournamentsView] Fehler beim Neuladen der Turnierliste:', error);
}
} else {
console.log('⚠️ [TournamentsView] Turnier stimmt nicht überein - Event tournamentId:', data.tournamentId, 'Aktuelles Turnier:', this.selectedDate);
}
}
},
getPlayerName(p) {
return p.member.firstName + ' ' + p.member.lastName;
@@ -1020,6 +1099,30 @@ export default {
const d = await apiClient.get(`/tournament/${this.currentClub}`);
this.dates = d.data;
// Lade Mitgliederliste, falls noch nicht geladen
if (!this.clubMembers || this.clubMembers.length === 0) {
try {
const m = await apiClient.get(
`/clubmembers/get/${this.currentClub}/false`
);
// Sortiere alphabetisch: zuerst nach Vorname, dann nach Nachname
const sorted = (m.data || []).sort((a, b) => {
const firstNameA = (a.firstName || '').toLowerCase();
const firstNameB = (b.firstName || '').toLowerCase();
if (firstNameA !== firstNameB) {
return firstNameA.localeCompare(firstNameB, 'de');
}
const lastNameA = (a.lastName || '').toLowerCase();
const lastNameB = (b.lastName || '').toLowerCase();
return lastNameA.localeCompare(lastNameB, 'de');
});
this.clubMembers = sorted;
} catch (error) {
console.error('Fehler beim Laden der Mitgliederliste:', error);
this.clubMembers = [];
}
}
// Prüfe, ob es einen Trainingstag heute gibt
await this.checkTrainingToday();
} catch (error) {
@@ -1074,6 +1177,10 @@ export default {
},
async addParticipant() {
if (!this.selectedMember) {
await this.showInfo('Fehler', 'Bitte wählen Sie einen Teilnehmer aus!', '', 'error');
return;
}
const oldMap = this.participants.reduce((map, p) => {
map[p.id] = p.groupNumber
return map