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

Fügt die Möglichkeit hinzu, Bilder vordefinierter Aktivitäten in DiaryView.vue anzuzeigen. Implementiert die Methode showActivityImage zur Anzeige des Bildes und aktualisiert das Styling für die Bildsymbole.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-09-15 23:58:48 +02:00
parent 4307fa7d82
commit 02732a01da
1 changed files with 25 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -129,6 +129,10 @@
{{ (item.predefinedActivity && item.predefinedActivity.code && item.predefinedActivity.code.trim() !== '')
? item.predefinedActivity.code
: (item.predefinedActivity ? item.predefinedActivity.name : item.activity) }}
<span v-if="item.predefinedActivity && item.predefinedActivity.imageLink"
@click.stop="showActivityImage(item.predefinedActivity.imageLink)"
class="image-icon"
title="Bild anzeigen">🖼️</span>
</span>
</td>
<td>{{ item.groupActivity ? item.groupActivity.name : '' }}</td>
@@ -160,6 +164,10 @@
{{ (groupItem.groupPredefinedActivity && groupItem.groupPredefinedActivity.code && groupItem.groupPredefinedActivity.code.trim() !== '')
? groupItem.groupPredefinedActivity.code
: groupItem.groupPredefinedActivity.name }}
<span v-if="groupItem.groupPredefinedActivity && groupItem.groupPredefinedActivity.imageLink"
@click.stop="showActivityImage(groupItem.groupPredefinedActivity.imageLink)"
class="image-icon"
title="Bild anzeigen">🖼️</span>
</span>
</td>
<td>{{ groupItem.groupsGroupActivity.name }}</td>
@@ -1054,6 +1062,11 @@ export default {
this.showImage = false;
this.imageUrl = '';
},
showActivityImage(imageLink) {
this.imageUrl = imageLink;
this.showImage = true;
},
async loadMemberImage(member) {
try {
const response = await apiClient.get(`/clubmembers/image/${this.currentClub}/${member.id}`, {
@@ -1825,4 +1838,16 @@ img {
.person-btn {
margin-right: 0.5rem;
}
.image-icon {
margin-left: 8px;
cursor: pointer;
font-size: 16px;
opacity: 0.7;
transition: opacity 0.2s;
}
.image-icon:hover {
opacity: 1;
}
</style>