From 292d25f5b462dd2ce2dadad8d3780afc3a235b14 Mon Sep 17 00:00:00 2001 From: "matthias.lotz" Date: Fri, 7 Nov 2025 18:34:16 +0100 Subject: [PATCH] feat: Implement image descriptions - Backend & Core Frontend - Database: Add image_description column to images table - Repository: Add updateImageDescription & updateBatchImageDescriptions methods - API: Add PATCH endpoints for single and batch description updates - Upload: Support descriptions in batch upload - Frontend: ImageGalleryCard with Edit mode and textarea - Frontend: MultiUploadPage with description input - Frontend: ModerationGroupImagesPage with description editing - CSS: Styles for edit mode, textarea, and character counter Phase 1-4 complete: Backend + Core Frontend + Upload + Moderation --- TODO.md | 1 + backend/src/database/DatabaseManager.js | 11 + backend/src/database/schema.sql | 1 + backend/src/repositories/GroupRepository.js | 70 +- backend/src/routes/batchUpload.js | 35 +- backend/src/routes/groups.js | 94 +++ backend/src/utils/groupFormatter.js | 3 +- docs/FEATURE_PLAN-image-description.md | 730 ++++++++++++++++++ .../ComponentUtils/Css/ImageGallery.css | 62 ++ .../Components/ComponentUtils/ImageGallery.js | 22 +- .../ComponentUtils/ImageGalleryCard.js | 62 +- .../Pages/ModerationGroupImagesPage.js | 81 +- .../src/Components/Pages/MultiUploadPage.js | 30 +- frontend/src/Utils/batchUpload.js | 7 +- 14 files changed, 1180 insertions(+), 29 deletions(-) create mode 100644 docs/FEATURE_PLAN-image-description.md diff --git a/TODO.md b/TODO.md index e1ae82e..cb11347 100644 --- a/TODO.md +++ b/TODO.md @@ -52,6 +52,7 @@ Neue Struktur: Datenbank in src/data/db und bilder in src/data/images [x] Erweiterung der Benutzeroberfläche um eine Editierfunktion für bestehende Einträge in ModerationPage.js [x] In der angezeigten Gruppen soll statt Bilder ansehen Gruppe editieren stehen [x] Diese bestehende Ansicht (Bilder ansehen) soll als eigene Seite implementiert werden + [ ] Ergänzung der Möglichkeit eine Beschreibung zu den Bildern hinzuzufügen [ ] Erweiterung der ModerationPage um reine Datenbankeditor der sqlite Datenbank. diff --git a/backend/src/database/DatabaseManager.js b/backend/src/database/DatabaseManager.js index b0eeee1..861f4c0 100644 --- a/backend/src/database/DatabaseManager.js +++ b/backend/src/database/DatabaseManager.js @@ -104,6 +104,17 @@ class DatabaseManager { } } + // Migration: Füge image_description Feld zur images Tabelle hinzu (falls nicht vorhanden) + try { + await this.run('ALTER TABLE images ADD COLUMN image_description TEXT'); + console.log('✓ image_description Feld zur images Tabelle hinzugefügt'); + } catch (error) { + // Feld existiert bereits - das ist okay + if (!error.message.includes('duplicate column')) { + console.warn('Migration Warnung:', error.message); + } + } + // Erstelle Indizes await this.run('CREATE INDEX IF NOT EXISTS idx_groups_group_id ON groups(group_id)'); await this.run('CREATE INDEX IF NOT EXISTS idx_groups_year ON groups(year)'); diff --git a/backend/src/database/schema.sql b/backend/src/database/schema.sql index 964856e..efd03f5 100644 --- a/backend/src/database/schema.sql +++ b/backend/src/database/schema.sql @@ -25,6 +25,7 @@ CREATE TABLE IF NOT EXISTS images ( file_size INTEGER, mime_type TEXT, preview_path TEXT, -- Path to preview/thumbnail image (added in migration 003) + image_description TEXT, -- Optional description for each image (added in migration 004) created_at DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (group_id) REFERENCES groups(group_id) ON DELETE CASCADE ); diff --git a/backend/src/repositories/GroupRepository.js b/backend/src/repositories/GroupRepository.js index c7333d4..34b9475 100644 --- a/backend/src/repositories/GroupRepository.js +++ b/backend/src/repositories/GroupRepository.js @@ -23,8 +23,8 @@ class GroupRepository { if (groupData.images && groupData.images.length > 0) { for (const image of groupData.images) { await db.run(` - INSERT INTO images (group_id, file_name, original_name, file_path, upload_order, file_size, mime_type, preview_path) - VALUES (?, ?, ?, ?, ?, ?, ?, ?) + INSERT INTO images (group_id, file_name, original_name, file_path, upload_order, file_size, mime_type, preview_path, image_description) + VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?) `, [ groupData.groupId, image.fileName, @@ -33,7 +33,8 @@ class GroupRepository { image.uploadOrder, image.fileSize || null, image.mimeType || null, - image.previewPath || null + image.previewPath || null, + image.imageDescription || null ]); } } @@ -66,13 +67,15 @@ class GroupRepository { name: group.name, uploadDate: group.upload_date, images: images.map(img => ({ + id: img.id, fileName: img.file_name, originalName: img.original_name, filePath: img.file_path, previewPath: img.preview_path, uploadOrder: img.upload_order, fileSize: img.file_size, - mimeType: img.mime_type + mimeType: img.mime_type, + imageDescription: img.image_description })), imageCount: images.length }; @@ -375,6 +378,65 @@ class GroupRepository { }; }); } + + // Aktualisiere die Beschreibung eines einzelnen Bildes + async updateImageDescription(imageId, groupId, description) { + // Validierung: Max 200 Zeichen + if (description && description.length > 200) { + throw new Error('Image description must not exceed 200 characters'); + } + + const result = await dbManager.run(` + UPDATE images + SET image_description = ? + WHERE id = ? AND group_id = ? + `, [description || null, imageId, groupId]); + + return result.changes > 0; + } + + // Batch-Update für mehrere Bildbeschreibungen + async updateBatchImageDescriptions(groupId, descriptions) { + if (!Array.isArray(descriptions) || descriptions.length === 0) { + throw new Error('Descriptions array is required and cannot be empty'); + } + + return await dbManager.transaction(async (db) => { + let updateCount = 0; + + for (const desc of descriptions) { + const { imageId, description } = desc; + + // Validierung: Max 200 Zeichen + if (description && description.length > 200) { + throw new Error(`Image description for image ${imageId} must not exceed 200 characters`); + } + + // Prüfe ob Bild zur Gruppe gehört + const image = await db.get(` + SELECT id FROM images WHERE id = ? AND group_id = ? + `, [imageId, groupId]); + + if (!image) { + throw new Error(`Image with ID ${imageId} not found in group ${groupId}`); + } + + // Update Beschreibung + const result = await db.run(` + UPDATE images + SET image_description = ? + WHERE id = ? AND group_id = ? + `, [description || null, imageId, groupId]); + + updateCount += result.changes; + } + + return { + groupId: groupId, + updatedImages: updateCount + }; + }); + } } module.exports = new GroupRepository(); \ No newline at end of file diff --git a/backend/src/routes/batchUpload.js b/backend/src/routes/batchUpload.js index 39bdd43..5b15e75 100644 --- a/backend/src/routes/batchUpload.js +++ b/backend/src/routes/batchUpload.js @@ -23,11 +23,14 @@ router.post(endpoints.UPLOAD_BATCH, async (req, res) => { // Metadaten aus dem Request body let metadata = {}; + let descriptions = []; try { metadata = req.body.metadata ? JSON.parse(req.body.metadata) : {}; + descriptions = req.body.descriptions ? JSON.parse(req.body.descriptions) : []; } catch (e) { - console.error('Error parsing metadata:', e); + console.error('Error parsing metadata/descriptions:', e); metadata = { description: req.body.description || "" }; + descriptions = []; } // Erstelle neue Upload-Gruppe mit erweiterten Metadaten @@ -105,14 +108,28 @@ router.post(endpoints.UPLOAD_BATCH, async (req, res) => { description: group.description, name: group.name, uploadDate: group.uploadDate, - images: processedFiles.map((file, index) => ({ - fileName: file.fileName, - originalName: file.originalName, - filePath: `/upload/${file.fileName}`, - uploadOrder: index + 1, - fileSize: file.size, - mimeType: files[index].mimetype - })) + images: processedFiles.map((file, index) => { + // Finde passende Beschreibung für dieses Bild (match by fileName or originalName) + const descObj = descriptions.find(d => + d.fileName === file.originalName || d.fileName === file.fileName + ); + const imageDescription = descObj ? descObj.description : null; + + // Validierung: Max 200 Zeichen + if (imageDescription && imageDescription.length > 200) { + console.warn(`Image description for ${file.originalName} exceeds 200 characters, truncating`); + } + + return { + fileName: file.fileName, + originalName: file.originalName, + filePath: `/upload/${file.fileName}`, + uploadOrder: index + 1, + fileSize: file.size, + mimeType: files[index].mimetype, + imageDescription: imageDescription ? imageDescription.slice(0, 200) : null + }; + }) }); console.log(`Successfully saved group ${group.groupId} with ${files.length} images to database`); diff --git a/backend/src/routes/groups.js b/backend/src/routes/groups.js index 73f7177..86afe56 100644 --- a/backend/src/routes/groups.js +++ b/backend/src/routes/groups.js @@ -214,6 +214,100 @@ router.delete('/groups/:groupId/images/:imageId', async (req, res) => { } }); +// Einzelne Bildbeschreibung aktualisieren +router.patch('/groups/:groupId/images/:imageId', async (req, res) => { + try { + const { groupId, imageId } = req.params; + const { image_description } = req.body; + + // Validierung: Max 200 Zeichen + if (image_description && image_description.length > 200) { + return res.status(400).json({ + error: 'Invalid request', + message: 'Bildbeschreibung darf maximal 200 Zeichen lang sein' + }); + } + + const updated = await GroupRepository.updateImageDescription( + parseInt(imageId), + groupId, + image_description + ); + + if (!updated) { + return res.status(404).json({ + error: 'Image not found', + message: `Bild mit ID ${imageId} in Gruppe ${groupId} wurde nicht gefunden` + }); + } + + res.json({ + success: true, + message: 'Bildbeschreibung erfolgreich aktualisiert', + groupId: groupId, + imageId: parseInt(imageId), + imageDescription: image_description + }); + + } catch (error) { + console.error('Error updating image description:', error); + res.status(500).json({ + error: 'Internal server error', + message: 'Fehler beim Aktualisieren der Bildbeschreibung', + details: error.message + }); + } +}); + +// Batch-Update für mehrere Bildbeschreibungen +router.patch('/groups/:groupId/images/batch-description', async (req, res) => { + try { + const { groupId } = req.params; + const { descriptions } = req.body; + + // Validierung + if (!Array.isArray(descriptions) || descriptions.length === 0) { + return res.status(400).json({ + error: 'Invalid request', + message: 'descriptions muss ein nicht-leeres Array sein' + }); + } + + // Validiere jede Beschreibung + for (const desc of descriptions) { + if (!desc.imageId || typeof desc.imageId !== 'number') { + return res.status(400).json({ + error: 'Invalid request', + message: 'Jede Beschreibung muss eine gültige imageId enthalten' + }); + } + if (desc.description && desc.description.length > 200) { + return res.status(400).json({ + error: 'Invalid request', + message: `Bildbeschreibung für Bild ${desc.imageId} darf maximal 200 Zeichen lang sein` + }); + } + } + + const result = await GroupRepository.updateBatchImageDescriptions(groupId, descriptions); + + res.json({ + success: true, + message: `${result.updatedImages} Bildbeschreibungen erfolgreich aktualisiert`, + groupId: groupId, + updatedImages: result.updatedImages + }); + + } catch (error) { + console.error('Error batch updating image descriptions:', error); + res.status(500).json({ + error: 'Internal server error', + message: 'Fehler beim Aktualisieren der Bildbeschreibungen', + details: error.message + }); + } +}); + // Gruppe löschen router.delete(endpoints.DELETE_GROUP, async (req, res) => { try { diff --git a/backend/src/utils/groupFormatter.js b/backend/src/utils/groupFormatter.js index 8ec5a02..910f120 100644 --- a/backend/src/utils/groupFormatter.js +++ b/backend/src/utils/groupFormatter.js @@ -32,7 +32,8 @@ function formatGroupDetail(groupRow, images) { previewPath: img.preview_path || null, uploadOrder: img.upload_order, fileSize: img.file_size || null, - mimeType: img.mime_type || null + mimeType: img.mime_type || null, + imageDescription: img.image_description || null })), imageCount: images.length }; diff --git a/docs/FEATURE_PLAN-image-description.md b/docs/FEATURE_PLAN-image-description.md new file mode 100644 index 0000000..55169fa --- /dev/null +++ b/docs/FEATURE_PLAN-image-description.md @@ -0,0 +1,730 @@ +# Feature Plan: Image Description (Bildbeschreibung) + +**Branch:** `feature/ImageDescription` +**Datum:** 7. November 2025 +**Status:** 🔄 In Planung + +--- + +## 📋 Übersicht + +Implementierung einer individuellen Bildbeschreibung für jedes hochgeladene Bild. Benutzer können optional einen kurzen Text (max. 200 Zeichen) für jedes Bild hinzufügen, der dann in der Slideshow und in der GroupsOverviewPage angezeigt wird. + +### Hauptänderungen + +1. **Button-Änderung:** "Sort" Button wird durch "Edit" Button ersetzt in `ImageGalleryCard.js` +2. **Edit-Modus:** Aktiviert Textfelder unter jedem Bild zur Eingabe von Bildbeschreibungen +3. **Datenbank-Erweiterung:** Neues Feld `image_description` in der `images` Tabelle +4. **Backend-API:** Neue Endpoints zum Speichern und Abrufen von Bildbeschreibungen +5. **Frontend-Integration:** Edit-Modus in `MultiUploadPage.js` und `ModerationGroupImagesPage.js` +6. **Slideshow-Integration:** Anzeige der Bildbeschreibungen während der Slideshow +7. **Groups-Overview:** Anzeige von Bildbeschreibungen in der öffentlichen Übersicht + +--- + +## 🎯 Anforderungen + +### Funktionale Anforderungen + +- ✅ Benutzer können für jedes Bild eine optionale Beschreibung eingeben +- ✅ Maximale Länge: 200 Zeichen +- ✅ Edit-Button ersetzt Sort-Button in Preview-Modus +- ✅ Edit-Modus zeigt Textfelder unter allen Bildern gleichzeitig +- ✅ Vorbefüllung mit Original-Dateinamen als Platzhalter +- ✅ Funktioniert in `MultiUploadPage.js` und `ModerationGroupImagesPage.js` +- ✅ NICHT in `GroupsOverviewPage.js` (nur Anzeige, kein Edit) +- ✅ Bildbeschreibungen werden in Slideshow angezeigt +- ✅ Bildbeschreibungen werden in GroupsOverviewPage angezeigt +- ✅ Speicherung in Datenbank (persistente Speicherung) + +### Nicht-Funktionale Anforderungen + +- ✅ Performance: Keine merkbare Verzögerung beim Laden von Bildern +- ✅ UX: Intuitive Bedienung des Edit-Modus +- ✅ Mobile-Optimierung: Touch-freundliche Textfelder +- ✅ Validierung: Client- und Server-seitige Längenbegrenzung +- ✅ Backward-Kompatibilität: Bestehende Bilder ohne Beschreibung funktionieren weiterhin + +--- + +## 🗄️ Datenbank-Schema Änderungen + +### Migration: `004_add_image_description.sql` + +```sql +-- Add image_description column to images table +ALTER TABLE images ADD COLUMN image_description TEXT; + +-- Create index for better performance when filtering/searching +CREATE INDEX IF NOT EXISTS idx_images_description ON images(image_description); +``` + +### Aktualisiertes Schema (`images` Tabelle) + +```sql +CREATE TABLE images ( + id INTEGER PRIMARY KEY AUTOINCREMENT, + group_id TEXT NOT NULL, + file_name TEXT NOT NULL, + original_name TEXT NOT NULL, + file_path TEXT NOT NULL, + upload_order INTEGER NOT NULL, + file_size INTEGER, + mime_type TEXT, + preview_path TEXT, + image_description TEXT, -- ← NEU: Optional, max 200 Zeichen + created_at DATETIME DEFAULT CURRENT_TIMESTAMP, + FOREIGN KEY (group_id) REFERENCES groups(group_id) ON DELETE CASCADE +); +``` + +--- + +## 🔧 Backend-Änderungen + +### 1. Datenbank-Migration + +**Datei:** `backend/src/database/migrations/004_add_image_description.sql` + +- Fügt `image_description` Spalte zur `images` Tabelle hinzu +- Erstellt Index für Performance-Optimierung + +### 2. API-Erweiterungen + +#### A) Bestehende Endpoints erweitern + +**`POST /api/upload/batch`** +- Akzeptiert `imageDescriptions` Array im Request Body +- Format: `[{ fileName: string, description: string }, ...]` +- Speichert Beschreibungen beim Upload + +**`GET /api/groups/:groupId`** +- Gibt `image_description` für jedes Bild zurück +- Backward-kompatibel (null/leer für alte Bilder) + +**`GET /moderation/groups/:groupId`** +- Gibt `image_description` für jedes Bild zurück + +#### B) Neue Endpoints + +**`PATCH /groups/:groupId/images/:imageId`** +- Aktualisiert `image_description` für einzelnes Bild +- Payload: `{ image_description: string }` +- Validierung: Max 200 Zeichen + +**`PATCH /groups/:groupId/images/batch-description`** +- Aktualisiert mehrere Bildbeschreibungen auf einmal +- Payload: `{ descriptions: [{ imageId: number, description: string }, ...] }` +- Effizienter als einzelne Requests + +### 3. Repository & Service Layer + +**`GroupRepository.js`** - Neue Methoden: +```javascript +async updateImageDescription(imageId, description) +async updateBatchImageDescriptions(groupId, descriptions) +async getImagesByGroupId(groupId) // Erweitert um image_description +``` + +**`DatabaseManager.js`** - Query-Erweiterungen: +- `SELECT` Queries inkludieren `image_description` +- `INSERT` Queries akzeptieren `image_description` +- `UPDATE` Queries für Beschreibungs-Updates + +--- + +## 🎨 Frontend-Änderungen + +### 1. ImageGalleryCard.js + +**Änderung:** Button "Sort" → "Edit" + +```javascript +// ALT (Zeile 174-179): + + +// NEU: + +``` + +**Neue Props:** +- `onEditMode`: Callback-Funktion zum Aktivieren des Edit-Modus +- `isEditMode`: Boolean für aktuellen Edit-Status +- `imageDescription`: String mit Bildbeschreibung +- `onDescriptionChange`: Callback für Beschreibungsänderungen + +**Edit-Modus UI:** +```jsx +{isEditMode && mode === 'preview' && ( +
+