Commit Graph

46 Commits

Author SHA1 Message Date
39f133eadf feat(frontend): Add consent management UI components
- Add ConsentCheckboxes component with workshop and social media consents
- Add UploadSuccessDialog with group ID display and copy functionality
- Integrate consent validation into MultiUploadPage
- Extend batchUpload utility to send consent data
- Add GDPR compliance notices and contact information
- Block uploads without required workshop consent
2025-11-09 21:11:01 +01:00
57ce0ff2aa feat: Slideshow optimization with intelligent preloading and chronological sorting
- Add intelligent image preloading (useImagePreloader hook)
- Eliminate duplicate image display issue
- Remove visible loading delays in slideshow
- Implement chronological group sorting (year → upload date)
- Add cache management with LRU strategy (max 10 images)
- Add 3s timeout for slow connections with graceful fallback
- Add debug logging in development mode

Performance improvements:
- 0ms load time for pre-cached images (vs 200-1500ms before)
- Seamless transitions with no visual artifacts
- Better UX on production servers with slower internet

Fixes:
- Fixed: Duplicate image display in slideshow (network latency)
- Fixed: Flickering transitions between images
- Fixed: Random group order replaced with chronological

Files changed:
- NEW: frontend/src/hooks/useImagePreloader.js
- MODIFIED: frontend/src/Components/Pages/SlideshowPage.js
- UPDATED: README.md, CHANGELOG.md, docs/FEATURE_PLAN-preload-image.md
2025-11-09 13:23:27 +01:00
1b4629cca3 changed admin, Link to gitea, LoadingLogo 2025-11-09 11:55:31 +01:00
008adf3f27 feat(frontend): Ersetze Lottie-Animation durch custom 3D SVG Logo-Animation
- Lottie-react Bibliothek durch native CSS 3D Transforms ersetzt
- Hobbyhimmel Logo (Hammer & Wolke) als animiertes Loading-Icon
- Wolke rotiert um Y-Achse (4s)
- Hammer rotiert um Y-Achse UND eigene Diagonalachse (3s)
- 15° X-Neigung für dynamischeren 3D-Effekt
- Nested Transform-Hierarchie mit transform-box: fill-box
- Upload-Erfolgsmeldung als grünes Banner unter Animation
- Nutzer muss Upload-Bestätigung mit Button bestätigen
- Loading-Animation bleibt während Erfolgsmeldung sichtbar
2025-11-08 20:58:23 +01:00
ddc7e787b3 feat(frontend): Update footer with version info and attribution
- Display app version dynamically from window._env_.APP_VERSION
- Credit original author (vallezw) with link to original repo
- Credit extended version (lotzm) with link to Gitea repo
- Update package.json version to 1.1.0

Footer styling:
- Position fixed at bottom-right corner of viewport
- Unobtrusive design with small font size (11px)
- Semi-transparent background with subtle shadow
- Stays visible while scrolling
- Hover effect on links for better UX

Changes:
- frontend/package.json: version 0.1.0 → 1.1.0
- Footer.js: Dynamic version display, attribution links
- Footer.css: Fixed positioning, responsive styling
2025-11-08 16:22:04 +01:00
3a2efd97c3 refactor: Move deletion log into ModerationGroupsPage
- Create DeletionLogSection component
- Integrate deletion log at bottom of moderation page
- Remove standalone DeletionLogPage and route
- Remove admin nav link (log now in moderation)
- Keep /api/admin routes for backend API access
- Update nginx configs (remove /admin frontend route)
2025-11-08 12:55:55 +01:00
0f430af877 fix(frontend): Disable exhaustive-deps warning for DeletionLogPage useEffect 2025-11-08 12:43:34 +01:00
e7da188967 feat(frontend+nginx): Add DeletionLogPage and admin routes
- Create DeletionLogPage with statistics cards and deletion history table
- Add admin navigation link to Navbar
- Configure nginx for /admin and /api/admin routes (dev+prod)
- Add password protection for admin routes
- Support toggle between last 10 and all deletions
2025-11-08 12:38:14 +01:00
15fc02235f feat(frontend): Add countdown and improve approval feedback
Phase 4 Progress - Tasks 7 & 8 Complete

Countdown Display (Task 7):
- getDaysUntilDeletion() helper in ImageGalleryCard
- Countdown widget for unapproved groups
- Shows ' Wird gelöscht in: X Tagen'
- Only visible for pending groups in moderation mode
- Yellow warning style with border accent
- CSS: .deletion-countdown with responsive design

Approval Button Improvements (Task 8):
- Upgraded from alert() to SweetAlert2
- Success message with auto-close (2s)
- Error handling with detailed messages
- Optimistic UI updates (groups move between sections)
- Different messages for approve/unapprove actions

Files modified:
- ImageGalleryCard.js: Countdown logic and display
- ImageGallery.css: Countdown styling
- ModerationGroupsPage.js: SweetAlert2 integration

Tasks completed:  4.7,  4.8
2025-11-08 12:28:58 +01:00
07b436cc4d feat: Complete image description feature implementation
Features:
- Add image description field (max 200 chars) for individual images
- Replace 'Sort' button with 'Edit' button in image gallery cards
- Enable edit mode with text fields for each image in moderation
- Display descriptions in slideshow and public views
- Integrate description saving with main save button

Frontend changes:
- ImageGalleryCard: Add edit mode UI with textarea and character counter
- ModerationGroupImagesPage: Integrate description editing into main save flow
- Fix keyboard event propagation in textarea (spacebar issue)
- Remove separate 'Save Descriptions' button
- Add ESLint fixes for useCallback dependencies

Backend changes:
- Fix route order: batch-description route must come before :imageId route
- Ensure batch description update API works correctly

Build optimizations:
- Add .dockerignore to exclude development data (182MB reduction)
- Fix Dockerfile: Remove non-existent frontend/conf directory
- Reduce backend image size from 437MB to 247MB

Fixes:
- Fix route matching issue with batch-description endpoint
- Prevent keyboard events from triggering drag-and-drop
- Clean up unused functions and ESLint warnings
2025-11-07 23:20:50 +01:00
8323cec156 feat: Add image descriptions to Slideshow and Public views
- Slideshow: Display imageDescription below image (centered overlay)
- PublicGroupImagesPage: Show descriptions in single-image mode
- ImageGalleryCard: Support description display in single-image mode

Phase 5-6 complete: Slideshow + Public Display Integration
2025-11-07 18:36:57 +01:00
292d25f5b4 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
2025-11-07 18:34:16 +01:00
9fd4dff2f5 Add drag-and-drop reordering to upload preview
- Enable image reordering in MultiUploadPage before upload
- Add handleReorder callback to update local state
- Users can now sort preview images via drag-and-drop
- Upload order follows the sorted preview order
- No API call needed (pure local state management)
2025-11-07 17:37:57 +01:00
2678ad9b12 🚀 Refactor: Saubere Docker-Struktur mit getrennten dev/prod Umgebungen
- Neue Docker-Struktur: docker/{dev,prod}/ für klare Trennung
- Entfernt: docker-compose.override.yml (problematisch)
- Hinzugefügt: ./dev.sh und ./prod.sh Scripts für einfache Bedienung
- Container-spezifische Konfigurationen in docker/{dev,prod}/*/config/
- Aktualisierte READMEs für neue Struktur
- Backend-Daten in .gitignore hinzugefügt
- Bereinigt: Veraltete Dockerfiles und Konfigurationsdateien

Jetzt: Wartungsfreundlich, keine Verwirrung zwischen Umgebungen
2025-11-05 23:00:25 +01:00
7ea95341c0 🐛 Fix: Bildvorschau beim Upload wieder funktionsfähig
- Problem: getImageSrc() konnte nicht mit Blob-URLs von ausgewählten Upload-Dateien umgehen
- Lösung: Direkte Behandlung von Blob-URLs in ImageGalleryCard für Upload-Preview
- Erweitert: imageUtils.js um Blob-URL Unterstützung
- Hinzugefügt: Eindeutige IDs für Preview-Objekte in MultiUploadPage

Fixes #upload-preview-missing
2025-11-05 19:50:14 +01:00
8332a78c1e fix: resolve reordering API routing issue
🔧 Problem identified and fixed:
- nginx proxy was routing /api/groups to /groups (removing /api prefix)
- Backend route was registered under /api/groups instead of /groups
- Changed backend route registration from '/api/groups' to '/groups'
- Tested API endpoint: curl to /api/groups/qion_-lT1/reorder now works
- Removed debug console.log statements for cleaner production code

 Drag-and-drop reordering now functional in ModerationGroupImagesPage
 API requests properly routed through nginx proxy to backend
 Error 'Reihenfolge konnte nicht geändert werden' resolved
2025-11-03 21:39:44 +01:00
e20b1e433d feat: complete drag-and-drop reordering integration
 Phase 2 Complete - Frontend Integration:
- Fixed service imports and exports in reorderService.js
- Added HTTP request helper to replace missing sendRequest
- Integrated reordering in ModerationGroupImagesPage (Admin-only)
- Disabled reordering in PublicGroupImagesPage (Public users)
- Added optimistic updates with error rollback
- Added success/error notifications via SweetAlert2
- Fixed useCallback dependency warnings

 Reordering Features:
- Drag handles always visible for touch devices
- Mobile-friendly drag zones and visual feedback
- Loading states during API calls
- Automatic slideshow integration via upload_order
- Complete error handling and validation

Next: End-to-end testing across browsers and devices
2025-11-03 21:16:40 +01:00
7564525c7e feat: implement drag-and-drop reordering infrastructure
Phase 1 (Backend API):
 GroupRepository.updateImageOrder() with SQL transactions
 PUT /api/groups/:groupId/reorder API route with validation
 Manual testing: Reordering verified working (group qion_-lT1)
 Error handling: Invalid IDs, missing groups, empty arrays

Phase 2 (Frontend DnD):
 @dnd-kit/core packages installed
 ReorderService.js for API communication
 useReordering.js custom hook with optimistic updates
 ImageGalleryCard.js extended with drag handles & sortable
 ImageGallery.js with DndContext and SortableContext
 CSS styles for drag states, handles, touch-friendly mobile

Next: Integration with ModerationGroupImagesPage
2025-11-03 21:06:39 +01:00
04dca26d00 FIX: Wenn kein Name angegeben ist, wird nun auch nichts angezeigt, anstelle von null 2025-11-01 11:43:17 +01:00
aec9db2a76 feat(frontend): integrate preview images in gallery components
- Add imageUtils.js helper with getImageSrc() and getGroupPreviewSrc()
- Update ImageGalleryCard to use preview images for galleries
- Update ModerationGroupsPage to show preview images in modal
- Update ModerationGroupImagesPage to use preview images
- Update PublicGroupImagesPage to pass all image fields
- SlideshowPage continues using original images (full quality)
- Update nginx.dev.conf with /api/previews and /api/download routes
- Update start-dev.sh to generate correct nginx config
- Fix GroupRepository.getAllGroupsWithModerationInfo() to return full image data
- Remove obsolete version from docker-compose.override.yml
- Update TODO.md: mark frontend cleanup as completed

Performance: Gallery load times reduced by ~96% (100KB vs 3MB per image)
2025-10-31 18:20:50 +01:00
80ffcfd210 docs: complete migration documentation and finalize dev environment
- Add comprehensive CHANGELOG.md with all upgrade phases and results
- Update TODO.md to mark framework upgrades as completed
- Update UPGRADE_PLAN with actual timelines and detailed phase results
- Finalize docker-compose.override.yml and Dockerfile.dev for dev workflow
- Update package-lock.json after dependency changes

All 4 phases completed successfully:
- Backend: Node 14 → 24
- Frontend: React 17 → 18.3.1, Router v5 → v6, MUI v4 → v5
- Dev environment with HMR fully functional
- Integration smoke tests passed
2025-10-29 23:11:37 +01:00
bf115453f1 chore(frontend): fix ESLint warnings - remove unused handlers/imports 2025-10-29 21:54:58 +01:00
a44a85be73 chore(frontend): remove @mui/styles, replace react-lottie with lottie-react and remove legacy-peer-deps in Dockerfile 2025-10-29 21:49:09 +01:00
5b4855a5f5 refactor(frontend): migrate SlideshowPage to MUI sx 2025-10-29 21:41:02 +01:00
182dcb228c refactor(frontend): migrate MultiUploadPage to MUI sx 2025-10-29 21:34:16 +01:00
494c09e062 refactor(frontend): migrate MultiImageDropzone to MUI sx 2025-10-29 21:31:02 +01:00
4aac9dae4e refactor(frontend): migrate DescriptionInput to MUI sx 2025-10-29 21:26:51 +01:00
8535e8fafe refactor(frontend): migrate UploadProgress to MUI sx (remove makeStyles) 2025-10-29 21:18:44 +01:00
5c6f0ce061 feat(frontend): migrate to MUI v5 (phase 4 step 1)
- Replace @material-ui/core -> @mui/material
- Replace @material-ui/icons -> @mui/icons-material
- Switch makeStyles imports to @mui/styles (compat)
- Add @mui/material, @mui/icons-material, @mui/styles, @emotion/react, @emotion/styled to package.json

Notes: Kept makeStyles via @mui/styles for incremental migration; next: replace makeStyles usage with sx/styled where needed.
2025-10-29 20:10:33 +01:00
5ba463427b feat(frontend): upgrade react-router-dom 5→6 (Phase 3)
- Update package.json: react-router-dom ^5.2.0→^6.28.0
- Migrate App.js: Switch→Routes, component→element props, path="*" for 404
- Migrate 5 pages: useHistory→useNavigate, history.push()→navigate()
  - GroupsOverviewPage.js (4x navigate)
  - ModerationGroupsPage.js (1x navigate)
  - ModerationGroupImagesPage.js (2x navigate)
  - PublicGroupImagesPage.js (import updated)
  - SlideshowPage.js (4x navigate + keyboard handler)
- Regenerate package-lock.json with react-router v6

 Tested: Production build 254.46 KB gzip (+1.17 KB)
 Manual test: Navigation, moderation routing, slideshow ESC - all working

Phase 3 complete: Modern react-router v6 with improved routing API.
2025-10-28 22:59:59 +01:00
93534587d2 feat(frontend): upgrade React 17→18 + react-scripts 4→5 (Phase 2)
- Update package.json: react/react-dom ^17→^18.3.1, react-scripts 4→5.0.1
- Migrate to React 18 Root API in src/index.js (createRoot)
- Add --legacy-peer-deps to Dockerfile for MUI v4 compatibility
- Regenerate package-lock.json with legacy peer deps flag

 Tested: Production build 253.28 KB gzip, containers running
 Manual test: Upload, Moderation, Public View, Slideshow - all working

Phase 2 complete: Frontend on React 18 with concurrent rendering.
2025-10-28 21:30:14 +01:00
9406b725c1 removed old css in ImageGallery.css 2025-10-28 20:04:42 +01:00
a0d74f795a feat: Complete frontend refactoring and development environment setup
Major Frontend Refactoring:
- Replace ImagePreviewGallery with unified ImageGallery/ImageGalleryCard components
  - Support 4 display modes: group, moderation, preview, single-image
  - Add hidePreview prop to conditionally hide group preview images
  - Unified grid layout with responsive 3/2/1 column design

- Remove 15+ legacy files and components
  - Delete UploadedImagePage, SocialMedia components, old upload components
  - Remove unused CSS files (GroupCard.css, Image.css/scss)
  - Clean up /upload/:image_url route from App.js

- Fix image preview functionality in MultiUploadPage
  - Convert File objects to blob URLs with URL.createObjectURL()
  - Add proper memory cleanup with URL.revokeObjectURL()

- Improve page navigation and layout
  - Fix GroupsOverviewPage to route to /groups/:groupId detail page
  - Adjust PublicGroupImagesPage spacing and layout
  - Fix ModerationGroupsPage duplicate stats section

CSS Refactoring:
- Rename GroupCard.css → ImageGallery.css with updated class names
- Maintain backward compatibility with legacy class names
- Fix grid stretching with fixed 3-column layout

Development Environment:
- Add docker-compose.override.yml for local development
- Create Dockerfile.dev with hot-reload support
- Add start-dev.sh and nginx.dev.conf
- Update README.dev.md with development setup instructions

Production Build:
- Fix frontend/Dockerfile multi-stage build (as → AS)
- Update prod.sh to explicitly use docker-compose.yml (ignore override)
- Resolve node:18-alpine image corruption issue
- Backend Dockerfile improvements for Node 14 compatibility

Documentation:
- Update TODO.md marking completed frontend tasks
- Clean up docs/images directory
- Update README.md with current project status

All changes tested and verified in both development and production environments.
2025-10-27 22:22:52 +01:00
237c776ddc CSS Cleanup 2025-10-26 11:52:14 +01:00
aec0be8982 tut wieder 2025-10-20 21:18:44 +02:00
f6c02259dd GroupsOverviewPage.js wieder hergestellt 2025-10-20 21:10:59 +02:00
d29aaa05cd removed old files 2025-10-20 20:07:45 +02:00
c7f75a4bd8 Renaming GroupImagePage -> ModerationGroupImagesPage.js 2025-10-20 19:47:06 +02:00
0c0547b4f5 css 2025-10-20 19:19:21 +02:00
bf4ff75ce5 CSS Anpassungen, noch nicht gut 2025-10-19 21:59:37 +02:00
e06625ba97 FIX: Fixed different navbar Style 2025-10-19 20:50:12 +02:00
2a8cedd512 CSS Style Anpassungen 2025-10-19 20:34:51 +02:00
16f53a129a FIX: Speichern funktioniert nun 2025-10-19 20:06:09 +02:00
8d2d27c71d speichern ohne funktion 2025-10-19 19:56:13 +02:00
566eb3aed6 IMP: Editierfunktion für Gruppen ergänzt 2025-10-19 18:15:34 +02:00
48bf6f2074 Initial Commit 2025-10-15 21:33:00 +02:00