Show img in diary too

.gitignore

@@ -5,3 +5,4 @@ backend/node_modules
 frontend/.env
 backend/.env
 
+backend/images/*

backend/controllers/memberController.js

@@ -53,7 +53,6 @@ const getMemberImage = async (req, res) => {
     try {
         const { clubId, memberId } = req.params;
         const { authcode: userToken } = req.headers;
-        console.log('-------------------->', clubId, memberId, userToken);
         const result = await MemberService.getMemberImage(userToken, clubId, memberId);
         if (result.status === 200) {
             res.sendFile(result.imagePath);

backend/server.js

@@ -33,7 +33,7 @@ app.use(express.json());
 
 app.use('/api/auth', authRoutes);
 app.use('/api/clubs', clubRoutes);
-app.use('/api/clubmembers', memberRoutes);
+app.use('/api/clubmembers', memberRoutes); 
 app.use('/api/diary', diaryRoutes);
 app.use('/api/participants', participantRoutes);
 app.use('/api/activities', activityRoutes);

backend/services/memberService.js

@@ -17,18 +17,34 @@ class MemberService {
             where: {
                 clubId: clubId,
                 approved: false,
-                userId: user.id 
+                userId: user.id
             }
         });
     }
 
-    async getClubMembers(userToken, clubId) {
+    getClubMembers(userToken, clubId) {
         console.log('[getClubMembers] - Check access');
-        await checkAccess(userToken, clubId);
+        checkAccess(userToken, clubId);
         console.log('[getClubMembers] - Find members');
-        const members = await Member.findAll({ where: { clubId: clubId }});
-        console.log('[getClubMembers] - return members');
-        return members;
+        return Member.findAll({ where: { clubId: clubId } })
+            .then(members => {
+                return members.map(member => {
+                    const imagePath = path.join('images', 'members', `${member.id}.jpg`);
+                    const hasImage = fs.existsSync(imagePath);
+                    return {
+                        ...member.toJSON(),
+                        hasImage: hasImage
+                    };
+                });
+            })
+            .then(membersWithImageStatus => {
+                console.log('[getClubMembers] - return members');
+                return membersWithImageStatus;
+            })
+            .catch(error => {
+                console.error('[getClubMembers] - Error:', error);
+                throw error;
+            });
     }
 
     async setClubMember(userToken, clubId, memberId, firstName, lastName, street, city, birthdate, phone, email, active = true) {

frontend/src/views/DiaryView.vue

@@ -96,10 +96,11 @@
                     <h3>Teilnehmer</h3>
                     <ul>
                         <li v-for="member in sortedMembers()" :key="member.id">
-                                <input type="checkbox" :value="member.id" @change="toggleParticipant(member.id)"
-                                    :checked="isParticipant(member.id)">
-                                <span @click="openNotesModal(member)" class="clickable">{{ member.firstName }} {{
-                                    member.lastName }}</span>
+                            <input type="checkbox" :value="member.id" @change="toggleParticipant(member.id)"
+                                :checked="isParticipant(member.id)">
+                            <span @click="openNotesModal(member)" class="clickable">{{ member.firstName }} {{
+                                member.lastName }}</span>
+                            <span @click="showPic(member)" class="img-icon" v-if="member.hasImage">&#x1F5BC;</span>
                         </li>
                     </ul>
                     <h3>Aktivitäten</h3>
@@ -147,6 +148,9 @@
                 </div>
             </div>
         </div>
+        <div v-if="showImage" class="memberImage">
+            <img :src="imageUrl" @click="closeImage" />
+        </div>
     </div>
 </template>
 
@@ -189,6 +193,8 @@ export default {
             },
             predefinedActivities: [],
             showDropdown: false,
+            showImage: false,
+            imageUrl: '',
         };
     },
     watch: {
@@ -647,7 +653,26 @@ export default {
                 }
                 return firstNameComparison;
             });
-        }
+        },
+        async showPic(member) {
+            this.loadMemberImage(member);
+            this.showImage = true;
+        },
+        closeImage() {
+            this.showImage = false;
+            this.imageUrl = '';
+        },
+        async loadMemberImage(member) {
+            try {
+                const response = await apiClient.get(`/clubmembers/${this.currentClub}/image/${member.id}`, {
+                    responseType: 'blob',
+                });
+                this.imageUrl = URL.createObjectURL(response.data);
+            } catch (error) {
+                console.error("Failed to load member image:", error);
+                this.imageUrl = null; 
+            }
+        },
     },
     async mounted() {
         await this.init();
@@ -838,4 +863,24 @@ input[type="number"] {
 .modal-right {
     flex: 1;
 }
+
+.img-icon {
+    cursor: pointer;
+}
+
+.memberImage {
+    position: fixed;
+    max-width: 500px;
+    max-height: 500px;
+    top: calc(50% - 250px);
+    left: calc(50% - 250px);
+    border: 2px solid #555;
+    box-shadow: 4px 4px 3px #aaa;
+    overflow: hidden;
+    padding: 3px;
+}
+.memberImage > img {
+    max-width: 100%;
+    max-height: 100%;
+}
 </style>

frontend/src/views/MembersView.vue

@@ -272,7 +272,7 @@ export default {
                 member.imageUrl = imageUrl;
             } catch (error) {
                 console.error("Failed to load member image:", error);
-                member.imageUrl = null; // Fallback, falls das Bild nicht geladen werden kann
+                member.imageUrl = null; 
             }
         },
     }