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

Fixed group activities and added collapsing for general settings

Browse Source
This commit is contained in:
Torsten Schulz
2024-11-06 09:20:39 +01:00
parent d451ba494c
commit 5bdc5c8216
6 changed files with 95 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,8 @@
<label>Datum:
<select v-model="date" @change="handleDateChange">
<option value="new">Neu anlegen</option>
<option v-for="entry in dates" :key="entry.id" :value="entry">{{ entry.date }} </option>
<option v-for="entry in dates" :key="entry.id" :value="entry">{{ getFormattedDate(entry.date) }}
</option>
</select>
</label>
</div>
@@ -28,9 +29,11 @@
<button type="submit">Datum anlegen</button>
</form>
</div>
<div v-if="!showForm && date !== null && date !== 'new'">
<h3>Trainingszeiten bearbeiten</h3>
<form @submit.prevent="updateTrainingTimes">
<h3>Trainingszeiten bearbeiten <span @click="toggleShowGeneralData" class="clickable">{{ showGeneralData ?
'-' : '+' }}</span></h3>
<form @submit.prevent="updateTrainingTimes" v-if="showGeneralData">
<div>
<label for="editTrainingStart">Trainingsbeginn:</label>
<input type="time" step="300" id="editTrainingStart" v-model="trainingStart" />
@@ -45,16 +48,25 @@
<div v-if="date !== 'new' && date !== null" style="overflow:hidden">
<div class="columns">
<div class="column">
<h3>Gruppenverwaltung</h3>
<div>
<h3 v-if="showGeneralData">Gruppenverwaltung</h3>
<div v-if="showGeneralData">
<h4>Vorhandene Gruppen</h4>
<ul>
<li v-for="group in groups" :key="group.id">
{{ group.name }} (Leiter: {{ group.lead }})
<span v-if="editingGroupId !== group.id" @click="editGroup(group.id)">{{ group.name
}}</span>
<input v-else type="text" v-model="group.name" @blur="saveGroup(group)"
@keyup.enter="saveGroup(group)" @keyup.esc="cancelEditGroup"
style="display: inline;width:10em" />
<span v-if="editingGroupId !== group.id" @click="editGroup(group.id)"> (Leiter: {{
group.lead }}) </span>
<input v-else type="text" v-model="group.lead" @blur="saveGroup(group)"
@keyup.enter="saveGroup(group)" @keyup.esc="cancelEditGroup"
style="display: inline;width:10em" />
</li>
</ul>
</div>
<div>
<div v-if="showGeneralData">
<h4>Neue Gruppe erstellen</h4>
<div class="groups">
<div>
@@ -93,7 +105,8 @@
item.activity }}</span>
</td>
<td>{{ item.groupActivity ? item.groupActivity.name : '' }}</td>
<td><span v-if="item.durationText">{{ item.durationText }} / </span>{{ item.duration }}</td>
<td><span v-if="item.durationText">{{ item.durationText }} / </span>{{
item.duration }}</td>
<td><button @click="removePlanItem(item.id)">Entfernen</button></td>
</tr>
<template v-for="groupItem in item.groupActivities">
@@ -153,6 +166,7 @@
<span @click="openNotesModal(member)" class="clickable">{{ member.firstName }} {{
member.lastName }}</span>
<span @click="showPic(member)" class="img-icon" v-if="member.hasImage">&#x1F5BC;</span>
<span>&#x2139;</span>
</li>
</ul>
<h3>Aktivitäten</h3>
@@ -225,6 +239,8 @@ export default {
addNewItem: false,
addNewGroupActivity: false,
addNewTimeblock: false,
showGeneralData: false,
editingGroupId: null,
};
},
watch: {
@@ -287,6 +303,7 @@ export default {
this.initializeSortable();
await this.loadGroups();
this.showGeneralData = false;
} else {
this.newDate = '';
this.trainingStart = '';
@@ -597,7 +614,7 @@ export default {
durationText: this.newPlanItem.durationText,
orderId: this.trainingPlan.length
});
} else if (this.addNewGroupActivity) {//clubId, diaryDateActivityId, groupId, activity
} else if (this.addNewGroupActivity) {
await apiClient.post(`/diary-date-activities/group`, {
clubId: this.currentClub,
diaryDateId: this.date.id,
@@ -607,6 +624,7 @@ export default {
}
this.addNewTimeblock = false;
this.addNewItem = false;
this.addNewGroupActivity = false;
this.newPlanItem = { activity: '', duration: '', durationText: '', groupId: '' };
this.trainingPlan = await apiClient.get(`/diary-date-activities/${this.currentClub}/${this.date.id}`).then(response => response.data);
} catch (error) {
@@ -816,6 +834,33 @@ export default {
this.addNewItem = false;
this.addNewTimeblock = false;
},
toggleShowGeneralData() {
this.showGeneralData = !this.showGeneralData;
},
getFormattedDate(date) {
console.log(date, typeof date);
return (new Date(date)).toLocaleDateString('de-DE', { year: 'numeric', month: '2-digit', day: '2-digit'});
},
editGroup(groupId) {
this.editingGroupId = groupId;
},
async saveGroup(group) {
try {
await apiClient.put(`/group/${group.id}`, {
name: group.name,
lead: group.lead,
clubid: this.currentClub,
dateid: this.date.id,
});
this.editingGroupId = null;
} catch (error) {
console.error('Fehler beim Speichern der Gruppendaten:', error);
alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
}
},
cancelEditGroup() {
this.editingGroupId = null;
},
},
async mounted() {
await this.init();