Added dayplanning

frontend/src/views/DiaryView.vue

@@ -19,11 +19,11 @@
                 </div>
                 <div>
                     <label for="trainingStart">Trainingsbeginn:</label>
-                    <input type="time" id="trainingStart" v-model="trainingStart" />
+                    <input type="time" step="300" id="trainingStart" v-model="trainingStart" />
                 </div>
                 <div>
                     <label for="trainingEnd">Trainingsende:</label>
-                    <input type="time" id="trainingEnd" v-model="trainingEnd" />
+                    <input type="time" step="300" id="trainingEnd" v-model="trainingEnd" />
                 </div>
                 <button type="submit">Datum anlegen</button>
             </form>
@@ -33,11 +33,11 @@
             <form @submit.prevent="updateTrainingTimes">
                 <div>
                     <label for="editTrainingStart">Trainingsbeginn:</label>
-                    <input type="time" id="editTrainingStart" v-model="trainingStart" />
+                    <input type="time" step="300" id="editTrainingStart" v-model="trainingStart" />
                 </div>
                 <div>
                     <label for="editTrainingEnd">Trainingsende:</label>
-                    <input type="time" id="editTrainingEnd" v-model="trainingEnd" />
+                    <input type="time" step="300" id="editTrainingEnd" v-model="trainingEnd" />
                 </div>
                 <button type="submit">Zeiten aktualisieren</button>
             </form>
@@ -45,6 +45,52 @@
 
         <div v-if="date !== 'new' && date !== null">
             <div class="columns">
+                <div class="column">
+                    <h3>Trainingsplan</h3>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th></th> 
+                                <th>Uhrzeit</th>
+                                <th>Aktivität</th>
+                                <th>Länge / Gesamtzeit (Min)</th>
+                            </tr>
+                        </thead>
+                        <tbody ref="sortableList">
+                            <tr v-for="(planItem, index) in trainingPlan" :key="planItem.id">
+                                <td class="drag-handle">☰</td>
+                                <td>{{ calculatePlanItemTime(index) }}</td>
+                                <td>{{ planItem.predefinedActivity.name }}</td>
+                                <td>
+                                    <span @click="removePlanItem(planItem.id)" class="add-plan-item">-</span>
+                                    {{ planItem.duration }}
+                                </td>
+                            </tr>
+                            <tr>
+                                <td></td>
+                                <td>{{ calculateNextTime }}</td>
+                                <td>
+                                    <input type="text" v-model="newPlanItem.activity" @input="handleActivityInput"
+                                        placeholder="Aktivität eingeben" />
+                                    <div v-if="showDropdown" class="dropdown">
+                                        <div v-for="activity in filteredPredefinedActivities" :key="activity.id"
+                                            @click="selectPredefinedActivity(activity)">
+                                            {{ activity.name }} ({{ activity.durationText || '' }} / {{
+                                                activity.duration }} Minuten)
+                                        </div>
+                                    </div>
+                                </td>
+                                <td>
+                                    <input type="text" v-model="newPlanItem.durationInput" @input="calculateDuration"
+                                        placeholder="z.B. 2x7 oder 3*5" style="width:10em" />
+                                    <input type="number" v-model="newPlanItem.duration" placeholder="Minuten" />
+                                    <span class="add-plan-item" @click="addPlanItem">+</span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
                 <div class="column">
                     <h3>Teilnehmer</h3>
                     <ul>
@@ -52,13 +98,11 @@
                             <label>
                                 <input type="checkbox" :value="member.id" @change="toggleParticipant(member.id)"
                                     :checked="isParticipant(member.id)">
-                                {{ member.firstName }} {{ member.lastName }}
+                                <span @click="openNotesModal(member)" class="clickable">{{ member.firstName }} {{
+                                    member.lastName }}</span>
                             </label>
-                            <button @click="openNotesModal(member)">Notizen</button>
                         </li>
                     </ul>
-                </div>
-                <div class="column">
                     <h3>Aktivitäten</h3>
                     <textarea v-model="newActivity"></textarea>
                     <button @click="addActivity">Aktivität hinzufügen</button>
@@ -100,6 +144,7 @@
 import { mapGetters } from 'vuex';
 import apiClient from '../apiClient.js';
 import Multiselect from 'vue-multiselect';
+import Sortable from 'sortablejs';
 
 export default {
     name: 'DiaryView',
@@ -125,22 +170,39 @@ export default {
             availableTags: [],
             previousActivityTags: [],
             previousMemberTags: [],
+            trainingPlan: [],
+            newPlanItem: {
+                activity: '',
+                duration: '',
+                durationText: '',
+            },
+            predefinedActivities: [],
+            showDropdown: false,
         };
     },
     watch: {
-        selectedMemberTags(newTags, oldTags) {
+        selectedMemberTags(newTags) {
             this.updateMemberTags(newTags);
         },
-        selectedMemberNotes(newNotes, oldNotes) {
-            const removedNotes = oldNotes.filter(note => !newNotes.includes(note));
-            removedNotes.forEach(note => this.removeMemberNote(note.content));
-        },
-        selectedActivityTags(newTags, oldTags) {
+        selectedActivityTags(newTags) {
             this.updateActivityTags(newTags);
         },
     },
     computed: {
         ...mapGetters(['isAuthenticated', 'currentClub']),
+        calculateNextTime() {
+            let lastTime = this.trainingStart;
+            for (let item of this.trainingPlan) {
+                lastTime = this.addDurationToTime(lastTime, item.duration);
+            }
+            return lastTime;
+        },
+        filteredPredefinedActivities() {
+            const input = this.newPlanItem.activity.toLowerCase();
+            return this.predefinedActivities.filter(activity =>
+                activity.name.toLowerCase().includes(input)
+            );
+        },
     },
     methods: {
         async init() {
@@ -148,16 +210,7 @@ export default {
                 const response = await apiClient.get(`/diary/${this.currentClub}`);
                 this.dates = response.data.map(entry => ({ id: entry.id, date: entry.date }));
                 this.loadTags();
-            }
-        },
-        handleEnterKey(event) {
-            const newTagName = event.target.value.trim();
-            if (newTagName) {
-                if (this.showNotesModal) {
-                    this.addNewTagForMember(newTagName);
-                } else {
-                    this.addNewTag(newTagName);
-                }
+                this.loadPredefinedActivities();
             }
         },
         async handleDateChange() {
@@ -172,11 +225,16 @@ export default {
                     id: tag.id,
                     name: tag.name
                 }));
-                this.previousActivityTags = [...this.selectedActivityTags];  // Hier setzen
+                this.previousActivityTags = [...this.selectedActivityTags]; // Hier setzen
 
                 await this.loadMembers();
                 await this.loadParticipants(dateId);
                 await this.loadActivities(dateId);
+                this.trainingPlan = await apiClient
+                    .get(`/diary-date-activities/${this.currentClub}/${this.date.id}`)
+                    .then(response => response.data);
+
+                this.initializeSortable();
             } else {
                 this.newDate = '';
                 this.trainingStart = '';
@@ -184,9 +242,12 @@ export default {
                 this.participants = [];
             }
         },
-        setCurrentDate() {
-            const today = new Date().toISOString().split('T')[0];
-            this.newDate = today;
+        initializeSortable() {
+            const el = this.$refs.sortableList;
+            Sortable.create(el, {
+                handle: ".drag-handle",
+                onEnd: this.onDragEnd,
+            });
         },
         async createDate() {
             try {
@@ -202,7 +263,6 @@ export default {
                 this.trainingStart = '';
                 this.trainingEnd = '';
             } catch (error) {
-                console.error('Fehler beim Erstellen des Datums:', error);
                 alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
             }
         },
@@ -236,6 +296,14 @@ export default {
             const response = await apiClient.get('/tags');
             this.availableTags = response.data;
         },
+        async loadPredefinedActivities() {
+            try {
+                const response = await apiClient.get('/predefined-activities');
+                this.predefinedActivities = response.data;
+            } catch (error) {
+                console.error('Fehler beim Laden der vordefinierten Aktivitäten:', error);
+            }
+        },
         isParticipant(memberId) {
             return this.participants.includes(memberId);
         },
@@ -284,7 +352,7 @@ export default {
                     params: { diaryDateId, memberId }
                 });
                 this.selectedMemberTags = tagsResponse.data.map(tag => ({
-                    id: tag.tag.id, 
+                    id: tag.tag.id,
                     name: tag.tag.name
                 }));
             } catch (error) {
@@ -294,7 +362,7 @@ export default {
         },
         async addMemberNote() {
             if (this.newNoteContent) {
-                const response = await apiClient.post(`/diarymember/${this.currentClub}/notes`, {
+                const response = await apiClient.post(`/diarymember/${this.currentClub}/note`, {
                     memberId: this.selectedMember.id,
                     diaryDateId: this.date.id,
                     content: this.newNoteContent
@@ -305,8 +373,8 @@ export default {
             }
         },
         async deleteNote(noteId) {
-            const response = await apiClient.delete(`/diarymember/note/${noteId}`, {
-                data: { clubId: this.currentClub }
+            const response = await apiClient.delete(`/diarymember/${this.currentClub}/note/${noteId}`, {
+                clubId: this.currentClub
             });
             this.notes = response.data;
         },
@@ -362,7 +430,6 @@ export default {
             }
         },
         async updateActivityTags(selectedTags) {
-            console.log('test');
             try {
                 for (let tag of selectedTags) {
                     if (!this.previousActivityTags.includes(tag)) {
@@ -426,8 +493,102 @@ export default {
                 alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
             }
         },
+        handleActivityInput() {
+            if (this.newPlanItem.activity) {
+                this.showDropdown = true;
+            } else {
+                this.showDropdown = false;
+            }
+        },
+        selectPredefinedActivity(activity) {
+            this.newPlanItem.activity = activity.name;
+            this.newPlanItem.durationText = activity.durationText;
+            this.newPlanItem.duration = activity.duration || '';
+            this.showDropdown = false;
+        },
+        async addPlanItem() {
+            try {
+                await apiClient.post(`/diary-date-activities/${this.currentClub}`, {
+                    diaryDateId: this.date.id,
+                    activity: this.newPlanItem.activity,
+                    duration: this.newPlanItem.duration,
+                    durationText: this.newPlanItem.durationText,
+                    orderId: this.trainingPlan.length
+                });
+                this.newPlanItem = { activity: '', duration: '', durationText: '' };
+                this.trainingPlan = await apiClient.get(`/diary-date-activities/${this.currentClub}/${this.date.id}`).then(response => response.data);
+            } catch (error) {
+                console.error('Fehler beim Hinzufügen des Planungsitems:', error);
+                alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
+            }
+        },
+        async removePlanItem(planItemId) {
+            try {
+                await apiClient.delete(`/diary-date-activities/${this.currentClub}`, {
+                    params: { planItemId }
+                });
+                this.planItems = this.planItems.filter(item => item.id !== planItemId);
+            } catch (error) {
+                console.error('Fehler beim Entfernen des Planungsitems:', error);
+            }
+        },
+        calculatePlanItemTime(index) {
+            let time = this.trainingStart;
+            for (let i = 0; i < index; i++) {
+                time = this.addDurationToTime(time, this.trainingPlan[i].duration);
+            }
+            return time;
+        },
+        addDurationToTime(startTime, duration) {
+            let [hours, minutes] = startTime.split(':').map(Number);
+            minutes += Number(duration);
+            if (minutes >= 60) {
+                hours += Math.floor(minutes / 60);
+                minutes = minutes % 60;
+            }
+            hours = hours % 24;
+            return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+        },
+        calculateDuration() {
+            const input = this.newPlanItem.durationInput;
+            let calculatedDuration = 0;
+            const multiplyPattern = /(\d+)\s*[x*]\s*(\d+)/i;
+            const match = input.match(multiplyPattern);
+            if (match) {
+                const [, num1, num2] = match;
+                calculatedDuration = parseInt(num1) * parseInt(num2);
+            } else if (!isNaN(input)) {
+                calculatedDuration = parseInt(input);
+            }
+            calculatedDuration = Math.ceil(calculatedDuration / 5) * 5;
+            if (!this.newPlanItem.durationText || this.newPlanItem.durationText === input) {
+                this.newPlanItem.duration = calculatedDuration;
+                this.newPlanItem = { ...this.newPlanItem, duration: calculatedDuration };
+            }
+        },
+        async removePlanItem(planItemId) {
+            try {
+                await apiClient.delete(`/diary-date-activities/${this.currentClub}/${planItemId}`);
+                this.trainingPlan = this.trainingPlan.filter(item => item.id !== planItemId);
+            } catch (error) {
+                console.error('Fehler beim Entfernen des Planungsitems:', error);
+                alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
+            }
+        },
+        async onDragEnd(evt) {
+            const movedItem = this.trainingPlan[evt.oldIndex];
+            try {
+                await apiClient.put(`/diary-date-activities/${this.currentClub}/${movedItem.id}/order`, {
+                    orderId: evt.newIndex
+                });
+            } catch (error) {
+                console.error('Fehler beim Aktualisieren der Reihenfolge:', error);
+                alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
+            }
+        },
     },
     async mounted() {
+
         await this.init();
     }
 };
@@ -532,4 +693,78 @@ li {
     margin-bottom: 10px;
     width: 100%;
 }
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th,
+td {
+    padding: 8px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+}
+
+input[type="text"] {
+    width: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+input[type="time"] {
+    width: 7em;
+}
+
+input[type="number"] {
+    width: 5em;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+.dropdown {
+    border: 1px solid #ccc;
+    max-height: 200px;
+    overflow-y: auto;
+    position: absolute;
+    background-color: white;
+    z-index: 1000;
+    width: calc(100% - 20px);
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.dropdown div {
+    padding: 8px;
+    cursor: pointer;
+}
+
+.dropdown div:hover {
+    background-color: #f0f0f0;
+}
+
+.clickable {
+    cursor: pointer;
+    color: #45a049;
+}
+
+.add-plan-item {
+    border: 1px solid black;
+    cursor: pointer;
+    display: inline-block;
+    width: 1.2em;
+    height: 1.2em;
+    text-align: center;
+    line-height: 1.2em;
+    font-weight: bold;
+    margin-left: 5px;
+}
+
+.add-plan-item:hover {
+    background-color: #45a049;
+    color: white;
+}
+
+.drag-handle {
+    cursor: pointer;
+}
 </style>