Some changes

frontend/src/views/DiaryView.vue

@@ -5,7 +5,7 @@
             <label>Datum:
                 <select v-model="date" @change="handleDateChange">
                     <option value="new">Neu anlegen</option>
-                    <option v-for="date in dates" :key="date" :value="date">{{ date }}</option>
+                    <option v-for="entry in dates" :key="entry.id" :value="entry">{{ entry.date }} </option>
                 </select>
             </label>
         </div>
@@ -42,6 +42,34 @@
                 <button type="submit">Zeiten aktualisieren</button>
             </form>
         </div>
+
+        <!-- Teilnehmer und Aktivitäten -->
+        <div v-if="date !== 'new' && date !== null">
+            <div class="columns">
+                <div class="column">
+                    <h3>Teilnehmer</h3>
+                    <ul>
+                        <li v-for="member in members" :key="member.id">
+                            <label>
+                                <input type="checkbox" :value="member.id" @change="toggleParticipant(member.id)"
+                                    :checked="isParticipant(member.id)">
+                                {{ member.firstName }} {{ member.lastName }}
+                            </label>
+                        </li>
+                    </ul>
+                </div>
+                <div class="column">
+                    <h3>Aktivitäten</h3>
+                    <textarea v-model="newActivity"></textarea>
+                    <button @click="addActivity">Aktivität hinzufügen</button>
+                    <ul>
+                        <li v-for="activity in activities" :key="activity.id">
+                            {{ activity.description }}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -59,6 +87,10 @@ export default {
             newDate: '',
             trainingStart: '',
             trainingEnd: '',
+            members: [],
+            participants: [],
+            newActivity: '',
+            activities: [],
         };
     },
     computed: {
@@ -68,28 +100,31 @@ export default {
         async init() {
             if (this.isAuthenticated && this.currentClub) {
                 const response = await apiClient.get(`/diary/${this.currentClub}`);
-                this.dates = response.data.map(entry => entry.date);
+                this.dates = response.data.map(entry => ({ id: entry.id, date: entry.date }));
             }
         },
         async handleDateChange() {
             this.showForm = this.date === 'new';
             if (this.date && this.date !== 'new') {
-                const selectedDate = this.dates.find(d => d === this.date);
-                if (selectedDate) {
-                    const response = await apiClient.get(`/diary/${this.currentClub}`);
-                    const dateData = response.data.find(entry => entry.date === this.date);
-                    this.trainingStart = dateData.trainingStart;
-                    this.trainingEnd = dateData.trainingEnd;
-                }
+                const dateId = this.date.id;
+                const response = await apiClient.get(`/diary/${this.currentClub}`);
+                const dateData = response.data.find(entry => entry.id === dateId);
+                this.trainingStart = dateData.trainingStart;
+                this.trainingEnd = dateData.trainingEnd;
+
+                await this.loadMembers();
+                await this.loadParticipants(dateId);
+                await this.loadActivities(dateId); 
             } else {
                 this.newDate = '';
                 this.trainingStart = '';
                 this.trainingEnd = '';
+                this.participants = [];
             }
         },
         setCurrentDate() {
             const today = new Date().toISOString().split('T')[0];
-            this.newDate = today; 
+            this.newDate = today;
         },
         async createDate() {
             try {
@@ -98,8 +133,8 @@ export default {
                     trainingStart: this.trainingStart || null,
                     trainingEnd: this.trainingEnd || null,
                 });
-                this.dates.push(response.data.date);
-                this.date = response.data.date;
+                this.dates.push({ id: response.data.id, date: response.data.date });
+                this.date = { id: response.data.id, date: response.data.date };
                 this.showForm = false;
                 this.newDate = '';
                 this.trainingStart = '';
@@ -112,8 +147,9 @@ export default {
         },
         async updateTrainingTimes() {
             try {
+                const dateId = this.date.id; 
                 const response = await apiClient.put(`/diary/${this.currentClub}`, {
-                    date: this.date,
+                    dateId,
                     trainingStart: this.trainingStart || null,
                     trainingEnd: this.trainingEnd || null,
                 });
@@ -124,6 +160,49 @@ export default {
                 alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
             }
         },
+        async loadMembers() {
+            const response = await apiClient.get(`/clubmembers/${this.currentClub}`);
+            this.members = response.data;
+        },
+        async loadParticipants(dateId) {
+            const response = await apiClient.get(`/participants/${dateId}`);
+            this.participants = response.data.map(participant => participant.memberId);
+        },
+        isParticipant(memberId) {
+            return this.participants.includes(memberId);
+        },
+        async toggleParticipant(memberId) {
+            const isParticipant = this.isParticipant(memberId);
+            const dateId = this.date.id; 
+            if (isParticipant) {
+                await apiClient.post('/participants/remove', {
+                    diaryDateId: dateId,
+                    memberId
+                });
+                this.participants = this.participants.filter(id => id !== memberId);
+            } else {
+                await apiClient.post('/participants/add', {
+                    diaryDateId: dateId,
+                    memberId
+                });
+                this.participants.push(memberId);
+            }
+        },
+        async loadActivities(dateId) {
+            const response = await apiClient.get(`/activities/${dateId}`);
+            this.activities = response.data;
+        },
+        async addActivity() {
+            const dateId = this.date.id; 
+            if (this.newActivity) {
+                const response = await apiClient.post('/activities/add', {
+                    diaryDateId: dateId,
+                    description: this.newActivity
+                });
+                this.activities.push(response.data);
+                this.newActivity = '';
+            }
+        }
     },
     async mounted() {
         await this.init();
@@ -155,4 +234,24 @@ button[type="button"] {
 button:hover {
     background-color: #45a049;
 }
+
+.columns {
+    display: flex;
+    justify-content: space-between;
+}
+
+.column {
+    flex: 0 0 45%;
+}
+
+textarea {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+
 </style>