+```
+
+### Warum separate Uploads für Gallery?
+
+Events nutzen den Gallery-Upload, weil:
+- Beide brauchen WebP-Konvertierung
+- Beide nutzen gleichen Storage
+- Vermeidet Code-Duplikation
+- Gallery kann eigenständige Bildergalerie haben
+
+## 🎨 Admin-Panel Features
+
+### Events-Verwaltung:
+- ✅ Event erstellen (mit Bild-Upload)
+- ✅ Events auflisten
+- ✅ Events löschen
+- ✅ Reihenfolge ändern (Drag & Drop)
+- ✅ Events veröffentlichen/verstecken (isPublished)
+
+### Gallery-Verwaltung: (NEU!)
+- ✅ Bild hochladen
+- ✅ Gallery auflisten
+- ✅ Bilder löschen
+- ✅ Reihenfolge ändern (Drag & Drop)
+- ✅ Bilder veröffentlichen/verstecken (isPublished)
+
+### Publish:
+- Git-Integration (für statische Seiten-Updates)
+- Commit & Push zu Repository
+
+## 🚀 Deployment-Prozess
+
+### Was passiert beim Deploy?
+
+1. **Woodpecker CI** triggered bei Push zu `main`
+2. **Frontend Deploy** (gallus-pub):
+ - Build Astro SSG
+ - Deploy zu Fly.io
+
+3. **Backend Deploy** (gallus-cms-backend):
+ - Docker Build:
+ ```dockerfile
+ # Backend-Code kompilieren
+ npm run build → dist/
+
+ # Migrierte Bilder einpacken
+ COPY backend/data/images → /app/migration-images
+
+ # Migration-Script kopieren
+ COPY migrate-production.js → /app/
+ ```
+ - Deploy zu Fly.io
+ - **Volume bleibt erhalten** (SQLite DB + hochgeladene Bilder)
+
+4. **Nach erstem Deploy**: Migration ausführen
+ ```bash
+ fly ssh console -a gallus-cms-backend
+ node migrate-production.js
+ ```
+ - Kopiert Bilder: `/app/migration-images/` → `/app/data/images/`
+ - Befüllt DB mit Event/Gallery-Einträgen
+
+## 🔍 Troubleshooting
+
+### "Bilder werden nicht angezeigt"
+
+**Prüfe:**
+1. Backend logs: `fly logs -a gallus-cms-backend`
+2. Bild existiert: `fly ssh console -a gallus-cms-backend`
+ ```bash
+ ls -la /app/data/images/gallery/
+ ```
+3. DB-Eintrag korrekt:
+ ```bash
+ sqlite3 /app/data/gallus_cms.db
+ SELECT * FROM gallery_images;
+ ```
+4. Static-Route funktioniert:
+ ```bash
+ curl https://cms.gallus-pub.ch/static/images/gallery/xyz.webp
+ ```
+
+### "SQLite locked" Fehler
+
+- Nur ein Writer zur Zeit erlaubt
+- Bei hohem Traffic: Wechsel zu PostgreSQL empfohlen
+- Für Gallus Pub: ausreichend (wenig Writes)
+
+### "Volume voll"
+
+```bash
+fly volumes list -a gallus-cms-backend
+fly volumes extend Gallery verwalten
+
+
+
+
+ Neues Gallery-Bild
+ + + + +
+
+ Liste
+
+
+
+
+
+
+ Veröffentlichen
@@ -92,9 +114,11 @@ const title = 'Admin'; document.getElementById('auth-status').textContent = `Angemeldet als ${me.user?.giteaUsername || 'Admin'}`; // UI-Bereiche für eingeloggte Nutzer einblenden document.getElementById('sec-events').style.display = ''; + document.getElementById('sec-gallery').style.display = ''; document.getElementById('sec-publish').style.display = ''; // Direkt Events laden und auf Sektion fokussieren await loadEvents(); + await loadGallery(); document.getElementById('sec-events').scrollIntoView({ behavior: 'smooth' }); } catch (e) { const el = document.getElementById('auth-status'); @@ -288,6 +312,131 @@ const title = 'Admin'; } catch(e){ msg.textContent = 'Fehler: '+e.message } }); + // ========== Gallery Management ========== + let galReorderMode = false; + let lastGallery = []; + + async function loadGallery() { + const listEl = document.getElementById('gallery-list'); + listEl.innerHTML = 'Lade...
';
+ try {
+ const data = await api('/api/gallery');
+ listEl.innerHTML = '';
+ lastGallery = (data.images || []).slice();
+ let renderList = lastGallery.slice();
+
+ if (galReorderMode) {
+ renderList.sort((a,b) => (a.displayOrder??0) - (b.displayOrder??0));
+ }
+
+ renderList.forEach((img, idx) => {
+ const card = document.createElement('div');
+ card.className = 'card';
+ card.setAttribute('draggable', String(galReorderMode));
+ card.dataset.id = img.id;
+ card.dataset.displayOrder = String(img.displayOrder ?? idx);
+ card.innerHTML = `
+
+
+ ${img.altText}
+ ${galReorderMode ? '⇅ Ziehen' : ''}
+ URL: ${img.imageUrl}
+
+
+
`;
+ listEl.appendChild(card);
+ });
+
+ listEl.querySelectorAll('.btn-del-gal').forEach(btn => {
+ btn.addEventListener('click', async () => {
+ const id = btn.getAttribute('data-id');
+ if (!id) return;
+ if (!confirm('Bild wirklich löschen?')) return;
+ try {
+ await api(`/api/gallery/${id}`, { method: 'DELETE' });
+ await loadGallery();
+ } catch(e){ alert('Fehler: '+e.message); }
+ })
+ })
+
+ if (galReorderMode) {
+ enableGalleryDragAndDrop(listEl);
+ }
+ } catch (e) {
+ listEl.innerHTML = 'Fehler beim Laden
';
+ console.error(e);
+ }
+ }
+
+ function enableGalleryDragAndDrop(container){
+ let draggingEl = null;
+ container.querySelectorAll('.card').forEach(card => {
+ card.addEventListener('dragstart', (e) => {
+ draggingEl = card; card.classList.add('dragging');
+ e.dataTransfer.setData('text/plain', card.dataset.id || '');
+ });
+ card.addEventListener('dragend', () => { draggingEl = null; card.classList.remove('dragging'); });
+ card.addEventListener('dragover', (e) => { e.preventDefault(); });
+ card.addEventListener('drop', (e) => {
+ e.preventDefault();
+ const target = card;
+ if (!draggingEl || draggingEl === target) return;
+ const cards = Array.from(container.querySelectorAll('.card'));
+ const draggingIdx = cards.indexOf(draggingEl);
+ const targetIdx = cards.indexOf(target);
+ if (draggingIdx < targetIdx) {
+ target.after(draggingEl);
+ } else {
+ target.before(draggingEl);
+ }
+ });
+ });
+ }
+
+ document.getElementById('btn-create-gal').addEventListener('click', async () => {
+ const file = document.getElementById('gal-file').files[0];
+ const alt = document.getElementById('gal-alt').value.trim();
+ const msg = document.getElementById('gal-create-msg');
+
+ if (!file) {
+ msg.textContent = 'Bitte wähle ein Bild aus';
+ return;
+ }
+
+ msg.textContent = 'Lade Bild hoch...';
+ try {
+ const up = await uploadImage(file, alt || 'Gallery Image');
+ msg.textContent = 'Bild hochgeladen';
+ document.getElementById('gal-file').value = '';
+ document.getElementById('gal-alt').value = '';
+ await loadGallery();
+ } catch(e){
+ msg.textContent = 'Fehler: '+e.message
+ }
+ });
+
+ document.getElementById('btn-toggle-gal-reorder').addEventListener('click', async () => {
+ galReorderMode = !galReorderMode;
+ document.getElementById('btn-save-gal-order').style.display = galReorderMode ? '' : 'none';
+ await loadGallery();
+ });
+
+ document.getElementById('btn-save-gal-order').addEventListener('click', async () => {
+ const container = document.getElementById('gallery-list');
+ const cards = Array.from(container.querySelectorAll('.card'));
+ const orders = cards.map((c, idx) => ({ id: c.dataset.id, displayOrder: idx }));
+ const msg = document.getElementById('gal-order-msg');
+ msg.textContent = 'Speichere Reihenfolge...';
+ try {
+ await api('/api/gallery/reorder', { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ orders }) });
+ msg.textContent = 'Reihenfolge gespeichert';
+ galReorderMode = false;
+ document.getElementById('btn-save-gal-order').style.display = 'none';
+ await loadGallery();
+ } catch(e){ msg.textContent = 'Fehler: '+e.message }
+ });
+
refreshAuth();