diff --git a/backend/controllers/memberController.js b/backend/controllers/memberController.js
index cdf56c9..23b20cb 100644
--- a/backend/controllers/memberController.js
+++ b/backend/controllers/memberController.js
@@ -120,7 +120,8 @@ const generateMemberGallery = async (req, res) => {
try {
const { clubId } = req.params;
const { authcode: userToken } = req.headers;
- const result = await MemberService.generateMemberGallery(userToken, clubId);
+ const size = parseInt(req.query.size) || 200; // Default: 200x200
+ const result = await MemberService.generateMemberGallery(userToken, clubId, size);
if (result.status === 200) {
res.setHeader('Content-Type', 'image/png');
res.setHeader('Cache-Control', 'no-store');
diff --git a/backend/services/memberService.js b/backend/services/memberService.js
index e3f157f..bf817a7 100644
--- a/backend/services/memberService.js
+++ b/backend/services/memberService.js
@@ -1070,10 +1070,14 @@ class MemberService {
}
}
- async generateMemberGallery(userToken, clubId) {
+ async generateMemberGallery(userToken, clubId, size = 200) {
try {
await checkAccess(userToken, clubId);
+ // Validiere und setze tileDimension (nur 100, 150, 200 erlaubt)
+ const validSizes = [100, 150, 200];
+ const tileDimension = validSizes.includes(size) ? size : 200;
+
const members = await Member.findAll({
where: {
clubId,
@@ -1130,8 +1134,6 @@ class MemberService {
error: 'Keine aktiven Mitglieder mit Bildern gefunden'
};
}
-
- const tileDimension = 200;
// Maximale Breite für die Galerie (Dialog-Breite 900px - 32px Padding = 868px)
const maxGalleryWidth = 868;
// Berechne maximale Anzahl Spalten, die in die Breite passen
diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index d727b45..49ff314 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -510,6 +510,14 @@
@close="closeGalleryDialog"
>
+
+
+
+
Galerie wird erstellt…
![Mitglieder-Galerie]()
@@ -667,6 +675,7 @@ export default {
galleryLoading: false,
galleryImageUrl: null,
galleryError: '',
+ gallerySize: 200,
editShowDropdown: false,
editSearchResults: [],
editSearchForId: null,
@@ -786,16 +795,22 @@ export default {
}
},
async openGalleryDialog() {
+ if (!this.currentClub || this.galleryLoading) {
+ return;
+ }
+ this.showGalleryDialog = true;
+ await this.loadGallery();
+ },
+ async loadGallery() {
if (!this.currentClub || this.galleryLoading) {
return;
}
this.galleryLoading = true;
this.galleryError = '';
try {
- const response = await apiClient.get(`/clubmembers/gallery/${this.currentClub}`, { responseType: 'blob' });
+ const response = await apiClient.get(`/clubmembers/gallery/${this.currentClub}?size=${this.gallerySize}`, { responseType: 'blob' });
this.revokeGalleryImage();
this.galleryImageUrl = URL.createObjectURL(response.data);
- this.showGalleryDialog = true;
} catch (error) {
console.error('Fehler beim Erstellen der Mitglieder-Galerie:', error);
this.galleryError = error?.response?.data?.error || 'Galerie konnte nicht erstellt werden.';
@@ -804,6 +819,9 @@ export default {
this.galleryLoading = false;
}
},
+ async regenerateGallery() {
+ await this.loadGallery();
+ },
closeGalleryDialog() {
this.showGalleryDialog = false;
this.revokeGalleryImage();
@@ -2474,6 +2492,7 @@ h3 {
.gallery-dialog-content {
display: flex;
+ flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 0;
@@ -2482,6 +2501,36 @@ h3 {
overflow: auto;
}
+.gallery-controls {
+ width: 100%;
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--border-color, #ddd);
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ background: #f9f9f9;
+ flex-shrink: 0;
+}
+
+.gallery-controls label {
+ font-weight: 500;
+ color: var(--text-color, #333);
+}
+
+.gallery-controls select {
+ padding: 6px 12px;
+ border: 1px solid var(--border-color, #ddd);
+ border-radius: 4px;
+ font-size: 14px;
+ background: white;
+ cursor: pointer;
+}
+
+.gallery-controls select:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
.gallery-image-wrapper {
width: 100%;
display: flex;