Add Socket.IO integration for real-time updates in diary features
This commit introduces Socket.IO to the backend and frontend, enabling real-time communication for diary-related events. Key updates include the addition of socket event emissions for diary date updates, tag additions/removals, and activity member changes in the backend controllers. The frontend DiaryView component has been enhanced to connect to the socket server and handle incoming events, ensuring that users receive immediate feedback on changes. Additionally, new dependencies for Socket.IO have been added to both the backend and frontend package files, improving the overall interactivity and responsiveness of the application.
This commit is contained in:
Torsten Schulz (local)
225
frontend/src/services/socketService.js
Normal file
225
frontend/src/services/socketService.js
Normal file
@@ -0,0 +1,225 @@
|
||||
import { io } from 'socket.io-client';
|
||||
import { backendBaseUrl } from '../apiClient.js';
|
||||
|
||||
let socket = null;
|
||||
|
||||
export const connectSocket = (clubId) => {
|
||||
if (socket && socket.connected) {
|
||||
// Wenn bereits verbunden, verlasse den alten Club-Raum und trete dem neuen bei
|
||||
if (socket.currentClubId) {
|
||||
socket.emit('leave-club', socket.currentClubId);
|
||||
}
|
||||
} else {
|
||||
// Neue Verbindung erstellen
|
||||
// Verwende backendBaseUrl direkt, Socket.IO erkennt automatisch den Port
|
||||
socket = io(backendBaseUrl, {
|
||||
transports: ['websocket', 'polling'],
|
||||
reconnection: true,
|
||||
reconnectionDelay: 1000,
|
||||
reconnectionAttempts: 5
|
||||
});
|
||||
|
||||
socket.on('connect', () => {
|
||||
console.log('🔌 Socket.IO verbunden:', socket.id);
|
||||
// Wenn bereits ein Club ausgewählt war, trete dem Raum bei
|
||||
if (socket.currentClubId) {
|
||||
socket.emit('join-club', socket.currentClubId);
|
||||
console.log(`👤 Club ${socket.currentClubId} beigetreten (nach Reconnect)`);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
console.log('🔌 Socket.IO getrennt');
|
||||
});
|
||||
|
||||
socket.on('connect_error', (error) => {
|
||||
console.error('❌ Socket.IO Verbindungsfehler:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Club-Raum beitreten
|
||||
if (clubId) {
|
||||
socket.emit('join-club', clubId);
|
||||
socket.currentClubId = clubId;
|
||||
console.log(`👤 Club ${clubId} beigetreten`);
|
||||
}
|
||||
|
||||
return socket;
|
||||
};
|
||||
|
||||
export const disconnectSocket = () => {
|
||||
if (socket) {
|
||||
if (socket.currentClubId) {
|
||||
socket.emit('leave-club', socket.currentClubId);
|
||||
}
|
||||
socket.disconnect();
|
||||
socket = null;
|
||||
console.log('🔌 Socket.IO getrennt');
|
||||
}
|
||||
};
|
||||
|
||||
export const getSocket = () => {
|
||||
return socket;
|
||||
};
|
||||
|
||||
// Event-Listener registrieren
|
||||
export const onParticipantAdded = (callback) => {
|
||||
if (socket) {
|
||||
socket.on('participant:added', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const onParticipantRemoved = (callback) => {
|
||||
if (socket) {
|
||||
socket.on('participant:removed', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const onParticipantUpdated = (callback) => {
|
||||
if (socket) {
|
||||
socket.on('participant:updated', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const onDiaryNoteAdded = (callback) => {
|
||||
if (socket) {
|
||||
socket.on('diary:note:added', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const onDiaryNoteUpdated = (callback) => {
|
||||
if (socket) {
|
||||
socket.on('diary:note:updated', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const onDiaryNoteDeleted = (callback) => {
|
||||
if (socket) {
|
||||
socket.on('diary:note:deleted', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const onDiaryTagAdded = (callback) => {
|
||||
if (socket) {
|
||||
socket.on('diary:tag:added', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const onDiaryTagRemoved = (callback) => {
|
||||
if (socket) {
|
||||
socket.on('diary:tag:removed', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const onDiaryDateUpdated = (callback) => {
|
||||
if (socket) {
|
||||
socket.on('diary:date:updated', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const onActivityMemberAdded = (callback) => {
|
||||
if (socket) {
|
||||
socket.on('activity:member:added', (data) => {
|
||||
console.log('📡 [Socket] activity:member:added empfangen:', data);
|
||||
callback(data);
|
||||
});
|
||||
} else {
|
||||
console.warn('⚠️ [Socket] onActivityMemberAdded: Socket nicht verbunden');
|
||||
}
|
||||
};
|
||||
|
||||
export const onActivityMemberRemoved = (callback) => {
|
||||
if (socket) {
|
||||
socket.on('activity:member:removed', (data) => {
|
||||
console.log('📡 [Socket] activity:member:removed empfangen:', data);
|
||||
callback(data);
|
||||
});
|
||||
} else {
|
||||
console.warn('⚠️ [Socket] onActivityMemberRemoved: Socket nicht verbunden');
|
||||
}
|
||||
};
|
||||
|
||||
export const onActivityChanged = (callback) => {
|
||||
if (socket) {
|
||||
socket.on('activity:changed', (data) => {
|
||||
console.log('📡 [Socket] activity:changed empfangen:', data);
|
||||
callback(data);
|
||||
});
|
||||
} else {
|
||||
console.warn('⚠️ [Socket] onActivityChanged: Socket nicht verbunden');
|
||||
}
|
||||
};
|
||||
|
||||
// Event-Listener entfernen
|
||||
export const offParticipantAdded = (callback) => {
|
||||
if (socket) {
|
||||
socket.off('participant:added', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const offParticipantRemoved = (callback) => {
|
||||
if (socket) {
|
||||
socket.off('participant:removed', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const offParticipantUpdated = (callback) => {
|
||||
if (socket) {
|
||||
socket.off('participant:updated', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const offDiaryNoteAdded = (callback) => {
|
||||
if (socket) {
|
||||
socket.off('diary:note:added', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const offDiaryNoteUpdated = (callback) => {
|
||||
if (socket) {
|
||||
socket.off('diary:note:updated', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const offDiaryNoteDeleted = (callback) => {
|
||||
if (socket) {
|
||||
socket.off('diary:note:deleted', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const offDiaryTagAdded = (callback) => {
|
||||
if (socket) {
|
||||
socket.off('diary:tag:added', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const offDiaryTagRemoved = (callback) => {
|
||||
if (socket) {
|
||||
socket.off('diary:tag:removed', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const offDiaryDateUpdated = (callback) => {
|
||||
if (socket) {
|
||||
socket.off('diary:date:updated', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const offActivityMemberAdded = (callback) => {
|
||||
if (socket) {
|
||||
socket.off('activity:member:added', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const offActivityMemberRemoved = (callback) => {
|
||||
if (socket) {
|
||||
socket.off('activity:member:removed', callback);
|
||||
}
|
||||
};
|
||||
|
||||
export const offActivityChanged = (callback) => {
|
||||
if (socket) {
|
||||
socket.off('activity:changed', callback);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -110,23 +110,25 @@
|
||||
<span v-if="item.isTimeblock"><i>Zeitblock</i></span>
|
||||
<span v-else-if="editingActivityId === item.id">
|
||||
<div
|
||||
style="display: flex; gap: 5px; align-items: center; position: relative;">
|
||||
<input type="text" v-model="editingActivityText"
|
||||
@input="onEditInputChangeText(item)"
|
||||
@keyup.enter="saveActivityEdit(item)"
|
||||
@keyup.esc="cancelActivityEdit" ref="activityInput"
|
||||
style="flex: 1;" />
|
||||
style="display: flex; gap: 5px; align-items: center;">
|
||||
<div style="flex: 1; position: relative;">
|
||||
<input type="text" v-model="editingActivityText"
|
||||
@input="onEditInputChangeText(item)"
|
||||
@keyup.enter="saveActivityEdit(item)"
|
||||
@keyup.esc="cancelActivityEdit" ref="activityInput"
|
||||
style="width: 100%;" />
|
||||
<div v-if="editShowDropdown && editSearchForId === item.id && editSearchResults.length"
|
||||
class="dropdown" style="max-height: 9.5em;">
|
||||
<div v-for="s in editSearchResults" :key="s.id"
|
||||
@click="chooseEditSuggestion(s, item)">
|
||||
<span v-if="s.code && s.code.trim() !== ''"><strong>[{{ s.code }}]</strong> </span>{{ s.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="saveActivityEdit(item)" class="btn-primary"
|
||||
style="padding: 2px 8px; font-size: 12px;">✓</button>
|
||||
<button @click="cancelActivityEdit" class="btn-secondary"
|
||||
style="padding: 2px 8px; font-size: 12px;">✗</button>
|
||||
<div v-if="editShowDropdown && editSearchForId === item.id && editSearchResults.length"
|
||||
class="dropdown" style="max-height: 9.5em;">
|
||||
<div v-for="s in editSearchResults" :key="s.id"
|
||||
@click="chooseEditSuggestion(s, item)">
|
||||
<span v-if="s.code && s.code.trim() !== ''"><strong>[{{ s.code }}]</strong> </span>{{ s.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<span v-else @click="startActivityEdit(item)"
|
||||
@@ -209,14 +211,16 @@
|
||||
<option v-for="group in groups" :key="group.id" :value="String(group.id)">
|
||||
{{ group.name }}</option>
|
||||
</select>
|
||||
<input type="text" v-model="newPlanItem.activity" placeholder="Aktivität"
|
||||
@input="onNewItemInputChange" style="flex: 1;" />
|
||||
<div v-if="newItemShowDropdown && newItemSearchResults.length"
|
||||
class="dropdown" style="max-height: 9.5em;">
|
||||
<div v-for="s in newItemSearchResults" :key="s.id"
|
||||
@click="chooseNewItemSuggestion(s)">
|
||||
<span v-if="s.code && s.code.trim() !== ''"><strong>[{{ s.code
|
||||
}}]</strong> </span>{{ s.name }}
|
||||
<div style="flex: 1; position: relative;">
|
||||
<input type="text" v-model="newPlanItem.activity" placeholder="Aktivität"
|
||||
@input="onNewItemInputChange" style="width: 100%;" />
|
||||
<div v-if="newItemShowDropdown && newItemSearchResults.length"
|
||||
class="dropdown" style="max-height: 9.5em;">
|
||||
<div v-for="s in newItemSearchResults" :key="s.id"
|
||||
@click="chooseNewItemSuggestion(s)">
|
||||
<span v-if="s.code && s.code.trim() !== ''"><strong>[{{ s.code
|
||||
}}]</strong> </span>{{ s.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -295,7 +299,7 @@
|
||||
@click="addGroupActivity">Gruppen-Aktivität</button>
|
||||
</td>
|
||||
<td v-if="addNewItem || addNewGroupActivity">
|
||||
<div v-if="addtype === 'activity'" style="position: relative; display: flex; align-items: center; gap: 0.5rem;">
|
||||
<div v-if="addtype === 'activity'" style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-palette"
|
||||
@@ -305,16 +309,18 @@
|
||||
>
|
||||
🎨
|
||||
</button>
|
||||
<input type="text" v-model="newPlanItem.activity"
|
||||
placeholder="Aktivität / Zeitblock" required
|
||||
@input="onNewItemInputChange"
|
||||
style="flex: 1;" />
|
||||
<div v-if="newItemShowDropdown && newItemSearchResults.length"
|
||||
class="dropdown" style="max-height: 9.5em;">
|
||||
<div v-for="s in newItemSearchResults" :key="s.id"
|
||||
@click="chooseNewItemSuggestion(s)">
|
||||
<span v-if="s.code && s.code.trim() !== ''"><strong>[{{ s.code
|
||||
}}]</strong> </span>{{ s.name }}
|
||||
<div style="flex: 1; position: relative;">
|
||||
<input type="text" v-model="newPlanItem.activity"
|
||||
placeholder="Aktivität / Zeitblock" required
|
||||
@input="onNewItemInputChange"
|
||||
style="width: 100%;" />
|
||||
<div v-if="newItemShowDropdown && newItemSearchResults.length"
|
||||
class="dropdown" style="max-height: 9.5em;">
|
||||
<div v-for="s in newItemSearchResults" :key="s.id"
|
||||
@click="chooseNewItemSuggestion(s)">
|
||||
<span v-if="s.code && s.code.trim() !== ''"><strong>[{{ s.code
|
||||
}}]</strong> </span>{{ s.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -327,12 +333,16 @@
|
||||
<option v-for="group in groups" :key="group.id" :value="String(group.id)">
|
||||
{{ group.name }}</option>
|
||||
</select>
|
||||
<div v-if="newItemShowDropdown && newItemSearchResults.length"
|
||||
class="dropdown" style="max-height: 9.5em;">
|
||||
<div v-for="s in newItemSearchResults" :key="s.id"
|
||||
@click="chooseNewItemSuggestion(s)">
|
||||
<span v-if="s.code && s.code.trim() !== ''"><strong>[{{ s.code
|
||||
}}]</strong> </span>{{ s.name }}
|
||||
<div style="flex: 1; position: relative;">
|
||||
<input type="text" v-model="newPlanItem.activity" placeholder="Aktivität"
|
||||
@input="onNewItemInputChange" style="width: 100%;" />
|
||||
<div v-if="newItemShowDropdown && newItemSearchResults.length"
|
||||
class="dropdown" style="max-height: 9.5em;">
|
||||
<div v-for="s in newItemSearchResults" :key="s.id"
|
||||
@click="chooseNewItemSuggestion(s)">
|
||||
<span v-if="s.code && s.code.trim() !== ''"><strong>[{{ s.code
|
||||
}}]</strong> </span>{{ s.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -555,6 +565,32 @@ import MemberActivityStatsDialog from '../components/MemberActivityStatsDialog.v
|
||||
import AccidentFormDialog from '../components/AccidentFormDialog.vue';
|
||||
import QuickAddMemberDialog from '../components/QuickAddMemberDialog.vue';
|
||||
import MemberGalleryDialog from '../components/MemberGalleryDialog.vue';
|
||||
import {
|
||||
connectSocket,
|
||||
disconnectSocket,
|
||||
onParticipantAdded,
|
||||
onParticipantRemoved,
|
||||
onParticipantUpdated,
|
||||
onDiaryNoteAdded,
|
||||
onDiaryNoteDeleted,
|
||||
onDiaryTagAdded,
|
||||
onDiaryTagRemoved,
|
||||
onDiaryDateUpdated,
|
||||
onActivityMemberAdded,
|
||||
onActivityMemberRemoved,
|
||||
onActivityChanged,
|
||||
offParticipantAdded,
|
||||
offParticipantRemoved,
|
||||
offParticipantUpdated,
|
||||
offDiaryNoteAdded,
|
||||
offDiaryNoteDeleted,
|
||||
offDiaryTagAdded,
|
||||
offDiaryTagRemoved,
|
||||
offDiaryDateUpdated,
|
||||
offActivityMemberAdded,
|
||||
offActivityMemberRemoved,
|
||||
offActivityChanged
|
||||
} from '../services/socketService.js';
|
||||
|
||||
export default {
|
||||
name: 'DiaryView',
|
||||
@@ -698,6 +734,14 @@ export default {
|
||||
selectedActivityTags(newTags) {
|
||||
this.updateActivityTags(newTags);
|
||||
},
|
||||
currentClub(newClubId, oldClubId) {
|
||||
// Wenn Club wechselt, Socket neu verbinden
|
||||
if (newClubId && newClubId !== oldClubId) {
|
||||
this.removeSocketListeners();
|
||||
connectSocket(newClubId);
|
||||
this.setupSocketListeners();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isAuthenticated', 'currentClub', 'currentClubName']),
|
||||
@@ -1992,9 +2036,7 @@ export default {
|
||||
|
||||
// Suche nach existierender Aktivität mit diesem Code
|
||||
const searchResults = await this.searchPredefinedActivities(code);
|
||||
const existing = searchResults.find(a =>
|
||||
a.code && a.code.trim().toLowerCase() === code.toLowerCase()
|
||||
);
|
||||
const existing = searchResults.find(a => a.code && a.code.trim().toLowerCase() === code.toLowerCase());
|
||||
|
||||
let activityToUse;
|
||||
|
||||
@@ -2004,9 +2046,9 @@ export default {
|
||||
} else {
|
||||
// Erstelle neue PredefinedActivity
|
||||
const newActivity = {
|
||||
name: result.name || result.fields?.name || '',
|
||||
name: result.name || (result.fields && result.fields.name) || '',
|
||||
code: code,
|
||||
description: result.description || result.fields?.description || '',
|
||||
description: result.description || (result.fields && result.fields.description) || '',
|
||||
drawingData: result.drawingData || null
|
||||
};
|
||||
|
||||
@@ -2389,9 +2431,209 @@ export default {
|
||||
this.showInfo('Fehler', 'Fehler beim Erstellen des Mitglieds', getSafeErrorMessage(error), 'error');
|
||||
}
|
||||
},
|
||||
|
||||
// Socket.IO Event-Handler
|
||||
setupSocketListeners() {
|
||||
// Event-Handler für Teilnehmer-Änderungen
|
||||
onParticipantAdded(this.handleParticipantAdded);
|
||||
onParticipantRemoved(this.handleParticipantRemoved);
|
||||
onParticipantUpdated(this.handleParticipantUpdated);
|
||||
|
||||
// Event-Handler für Tagebuch-Änderungen
|
||||
onDiaryNoteAdded(this.handleDiaryNoteAdded);
|
||||
onDiaryNoteDeleted(this.handleDiaryNoteDeleted);
|
||||
onDiaryTagAdded(this.handleDiaryTagAdded);
|
||||
onDiaryTagRemoved(this.handleDiaryTagRemoved);
|
||||
onDiaryDateUpdated(this.handleDiaryDateUpdated);
|
||||
|
||||
// Event-Handler für Aktivitäts-Änderungen
|
||||
console.log('🔧 [DiaryView] Registriere Activity-Event-Handler');
|
||||
onActivityMemberAdded(this.handleActivityMemberAdded);
|
||||
onActivityMemberRemoved(this.handleActivityMemberRemoved);
|
||||
onActivityChanged(this.handleActivityChanged);
|
||||
console.log('✅ [DiaryView] Alle Event-Handler registriert');
|
||||
},
|
||||
|
||||
removeSocketListeners() {
|
||||
offParticipantAdded(this.handleParticipantAdded);
|
||||
offParticipantRemoved(this.handleParticipantRemoved);
|
||||
offParticipantUpdated(this.handleParticipantUpdated);
|
||||
offDiaryNoteAdded(this.handleDiaryNoteAdded);
|
||||
offDiaryNoteDeleted(this.handleDiaryNoteDeleted);
|
||||
offDiaryTagAdded(this.handleDiaryTagAdded);
|
||||
offDiaryTagRemoved(this.handleDiaryTagRemoved);
|
||||
offDiaryDateUpdated(this.handleDiaryDateUpdated);
|
||||
offActivityMemberAdded(this.handleActivityMemberAdded);
|
||||
offActivityMemberRemoved(this.handleActivityMemberRemoved);
|
||||
offActivityChanged(this.handleActivityChanged);
|
||||
},
|
||||
|
||||
async handleParticipantAdded(data) {
|
||||
// Nur aktualisieren, wenn das aktuelle Datum betroffen ist
|
||||
if (this.date && this.date !== 'new' && this.date.id === data.dateId) {
|
||||
console.log('📡 Teilnehmer hinzugefügt (Socket):', data);
|
||||
// Lade Teilnehmer neu
|
||||
await this.loadParticipants(data.dateId);
|
||||
}
|
||||
},
|
||||
|
||||
async handleParticipantRemoved(data) {
|
||||
// Nur aktualisieren, wenn das aktuelle Datum betroffen ist
|
||||
if (this.date && this.date !== 'new' && this.date.id === data.dateId) {
|
||||
console.log('📡 Teilnehmer entfernt (Socket):', data);
|
||||
// Entferne aus participants-Array
|
||||
this.participants = this.participants.filter(memberId => memberId !== data.participantId);
|
||||
// Entferne aus Maps
|
||||
delete this.participantMapByMemberId[data.participantId];
|
||||
delete this.memberGroupsMap[data.participantId];
|
||||
}
|
||||
},
|
||||
|
||||
async handleParticipantUpdated(data) {
|
||||
// Nur aktualisieren, wenn das aktuelle Datum betroffen ist
|
||||
if (this.date && this.date !== 'new' && this.date.id === data.dateId) {
|
||||
console.log('📡 Teilnehmer aktualisiert (Socket):', data);
|
||||
// Aktualisiere groupId in memberGroupsMap
|
||||
const groupValue = (data.participant.groupId !== null && data.participant.groupId !== undefined)
|
||||
? String(data.participant.groupId)
|
||||
: '';
|
||||
this.memberGroupsMap = {
|
||||
...this.memberGroupsMap,
|
||||
[data.participant.memberId]: groupValue
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
async handleDiaryNoteAdded(data) {
|
||||
// Nur aktualisieren, wenn das aktuelle Datum betroffen ist
|
||||
if (this.date && this.date !== 'new' && this.date.id === data.dateId) {
|
||||
console.log('📡 Tagebuch-Notiz hinzugefügt (Socket):', data);
|
||||
// Lade Notizen neu, falls das betroffene Mitglied ausgewählt ist
|
||||
if (this.selectedMember && data.note.memberId === this.selectedMember.id) {
|
||||
try {
|
||||
const notesResponse = await apiClient.get(`/notes?diaryDateId=${this.date.id}&memberId=${this.selectedMember.id}`);
|
||||
this.notes = notesResponse.data;
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Notizen:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async handleDiaryNoteDeleted(data) {
|
||||
// Nur aktualisieren, wenn das aktuelle Datum betroffen ist
|
||||
if (this.date && this.date !== 'new' && this.date.id === data.dateId) {
|
||||
console.log('📡 Tagebuch-Notiz gelöscht (Socket):', data);
|
||||
// Entferne Notiz aus notes-Array
|
||||
this.notes = this.notes.filter(note => note.id !== data.noteId);
|
||||
}
|
||||
},
|
||||
|
||||
async handleDiaryTagAdded(data) {
|
||||
// Nur aktualisieren, wenn das aktuelle Datum betroffen ist
|
||||
if (this.date && this.date !== 'new' && this.date.id === data.dateId) {
|
||||
console.log('📡 Tagebuch-Tag hinzugefügt (Socket):', data);
|
||||
// Lade Tags neu
|
||||
await this.loadTags();
|
||||
// Aktualisiere selectedActivityTags
|
||||
if (data.tag && !this.selectedActivityTags.find(t => t.id === data.tag.id)) {
|
||||
this.selectedActivityTags.push({
|
||||
id: data.tag.id,
|
||||
name: data.tag.name
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async handleDiaryTagRemoved(data) {
|
||||
// Nur aktualisieren, wenn das aktuelle Datum betroffen ist
|
||||
if (this.date && this.date !== 'new' && this.date.id === data.dateId) {
|
||||
console.log('📡 Tagebuch-Tag entfernt (Socket):', data);
|
||||
// Entferne Tag aus selectedActivityTags
|
||||
this.selectedActivityTags = this.selectedActivityTags.filter(t => t.id !== data.tagId);
|
||||
}
|
||||
},
|
||||
|
||||
async handleDiaryDateUpdated(data) {
|
||||
// Nur aktualisieren, wenn das aktuelle Datum betroffen ist
|
||||
if (this.date && this.date !== 'new' && this.date.id === data.dateId) {
|
||||
console.log('📡 Tagebuch-Datum aktualisiert (Socket):', data);
|
||||
// Aktualisiere Trainingszeiten
|
||||
if (data.updates.trainingStart !== undefined) {
|
||||
this.trainingStart = data.updates.trainingStart;
|
||||
}
|
||||
if (data.updates.trainingEnd !== undefined) {
|
||||
this.trainingEnd = data.updates.trainingEnd;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async handleActivityMemberAdded(data) {
|
||||
console.log('📡 [DiaryView] handleActivityMemberAdded aufgerufen:', data);
|
||||
console.log('📡 [DiaryView] Aktuelles Datum:', this.date?.id, 'Event dateId:', data.dateId);
|
||||
// Nur aktualisieren, wenn das aktuelle Datum betroffen ist
|
||||
if (this.date && this.date !== 'new' && this.date.id === data.dateId) {
|
||||
console.log('✅ [DiaryView] Datum stimmt überein, lade Training Plan neu');
|
||||
// Lade Training Plan neu
|
||||
try {
|
||||
this.trainingPlan = await apiClient.get(`/diary-date-activities/${this.currentClub}/${this.date.id}`).then(response => response.data);
|
||||
this.calculateIntermediateTimes();
|
||||
console.log('✅ [DiaryView] Training Plan neu geladen');
|
||||
} catch (error) {
|
||||
console.error('❌ [DiaryView] Fehler beim Neuladen des Trainingsplans:', error);
|
||||
}
|
||||
} else {
|
||||
console.log('⚠️ [DiaryView] Datum stimmt nicht überein oder kein Datum ausgewählt');
|
||||
}
|
||||
},
|
||||
|
||||
async handleActivityMemberRemoved(data) {
|
||||
console.log('📡 [DiaryView] handleActivityMemberRemoved aufgerufen:', data);
|
||||
console.log('📡 [DiaryView] Aktuelles Datum:', this.date?.id, 'Event dateId:', data.dateId);
|
||||
// Nur aktualisieren, wenn das aktuelle Datum betroffen ist
|
||||
if (this.date && this.date !== 'new' && this.date.id === data.dateId) {
|
||||
console.log('✅ [DiaryView] Datum stimmt überein, lade Training Plan neu');
|
||||
// Lade Training Plan neu
|
||||
try {
|
||||
this.trainingPlan = await apiClient.get(`/diary-date-activities/${this.currentClub}/${this.date.id}`).then(response => response.data);
|
||||
this.calculateIntermediateTimes();
|
||||
console.log('✅ [DiaryView] Training Plan neu geladen');
|
||||
} catch (error) {
|
||||
console.error('❌ [DiaryView] Fehler beim Neuladen des Trainingsplans:', error);
|
||||
}
|
||||
} else {
|
||||
console.log('⚠️ [DiaryView] Datum stimmt nicht überein oder kein Datum ausgewählt');
|
||||
}
|
||||
},
|
||||
|
||||
async handleActivityChanged(data) {
|
||||
console.log('📡 [DiaryView] handleActivityChanged aufgerufen:', data);
|
||||
console.log('📡 [DiaryView] Aktuelles Datum:', this.date?.id, 'Event dateId:', data.dateId);
|
||||
// Nur aktualisieren, wenn das aktuelle Datum betroffen ist
|
||||
if (this.date && this.date !== 'new' && this.date.id === data.dateId) {
|
||||
console.log('✅ [DiaryView] Datum stimmt überein, lade Training Plan neu');
|
||||
// Lade Training Plan neu
|
||||
try {
|
||||
this.trainingPlan = await apiClient.get(`/diary-date-activities/${this.currentClub}/${this.date.id}`).then(response => response.data);
|
||||
this.calculateIntermediateTimes();
|
||||
console.log('✅ [DiaryView] Training Plan neu geladen');
|
||||
} catch (error) {
|
||||
console.error('❌ [DiaryView] Fehler beim Neuladen des Trainingsplans:', error);
|
||||
}
|
||||
} else {
|
||||
console.log('⚠️ [DiaryView] Datum stimmt nicht überein oder kein Datum ausgewählt');
|
||||
}
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
await this.init();
|
||||
|
||||
// Socket.IO verbinden
|
||||
if (this.currentClub) {
|
||||
connectSocket(this.currentClub);
|
||||
this.setupSocketListeners();
|
||||
}
|
||||
|
||||
// Versuche, Audio erst bei Nutzerinteraktion zu initialisieren (Autoplay-Policy)
|
||||
const tryInit = () => {
|
||||
if (!this.bellSound) this.bellSound = new Audio('/sound/bell-123742.mp3');
|
||||
@@ -2405,6 +2647,12 @@ export default {
|
||||
if (this.timeChecker) {
|
||||
clearInterval(this.timeChecker);
|
||||
}
|
||||
|
||||
// Socket.IO Event-Listener entfernen
|
||||
this.removeSocketListeners();
|
||||
|
||||
// Socket.IO trennen
|
||||
disconnectSocket();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -2670,9 +2918,12 @@ input[type="number"] {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 2px;
|
||||
background-color: white;
|
||||
z-index: 9999;
|
||||
width: calc(100% - 20px);
|
||||
width: 100%;
|
||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user