Chore: Sprint32-36 Zwischenstand — alle Änderungen aus dieser Session committen

backend/static/js/pages/adoption.js

@@ -17,6 +17,8 @@ window.Page_adoption = (() => {
   let _activeTab  = 'hunde';
   let _data       = null;   // { animals, shelters, has_petfinder }
   let _loading    = false;
+  let _communityData = null;   // [] listings from /adoption/community
+  let _myListings    = null;   // [] eigene Inserate
 
   // ----------------------------------------------------------
   // INIT
@@ -90,6 +92,12 @@ window.Page_adoption = (() => {
                        border-bottom:2px solid transparent;font-size:var(--text-sm)">
           ${UI.icon('house-line')} Tierheime
         </button>
+        <button class="adp-tab" data-tab="community"
+                style="padding:var(--space-2) var(--space-3);background:none;border:none;
+                       cursor:pointer;color:var(--c-text-secondary);
+                       border-bottom:2px solid transparent;font-size:var(--text-sm)">
+          ${UI.icon('heart')} Weitervermittlung
+        </button>
       </div>
 
       <!-- Inhalt -->
@@ -213,12 +221,43 @@ window.Page_adoption = (() => {
     }
   }
 
+  async function _loadCommunity() {
+    const content = _container.querySelector('#adp-content');
+    if (content) content.innerHTML = UI.skeleton(4);
+    try {
+      const url = _lat && _lon
+        ? `/adoption/community?lat=${_lat}&lon=${_lon}`
+        : '/adoption/community';
+      _communityData = await API.get(url);
+      if (_appState?.user) {
+        try {
+          _myListings = await API.get('/adoption/community/my');
+        } catch {
+          _myListings = [];
+        }
+      }
+      _renderCommunity(content);
+    } catch {
+      if (content) content.innerHTML = UI.emptyState({
+        icon: 'warning',
+        title: 'Weitervermittlungs-Inserate konnten nicht geladen werden',
+        text: 'Bitte versuche es erneut.',
+      });
+    }
+  }
+
   // ----------------------------------------------------------
   // INHALT RENDERN (je nach Tab)
   // ----------------------------------------------------------
   function _renderContent() {
     const content = _container.querySelector('#adp-content');
     if (!content) return;
+
+    if (_activeTab === 'community') {
+      _loadCommunity();
+      return;
+    }
+
     if (!_data) { _showNoLocation(); return; }
 
     if (_activeTab === 'hunde') _renderHunde(content);
@@ -455,6 +494,442 @@ window.Page_adoption = (() => {
     `;
   }
 
+  // ------------------------------------------------------------------
+  // TAB: WEITERVERMITTLUNG (Community)
+  // ------------------------------------------------------------------
+  function _renderCommunity(content) {
+    if (!content) return;
+
+    const listings = _communityData || [];
+    const isLoggedIn = !!_appState?.user;
+
+    const fabHtml = isLoggedIn ? `
+      <button id="adp-fab-create"
+              style="position:fixed;bottom:calc(var(--nav-height,64px) + var(--space-4));right:var(--space-4);
+                     z-index:100;width:56px;height:56px;border-radius:50%;
+                     background:var(--c-primary);color:#fff;border:none;cursor:pointer;
+                     box-shadow:0 4px 16px rgba(0,0,0,0.2);
+                     display:flex;align-items:center;justify-content:center;font-size:1.5rem"
+              title="Hund zur Vermittlung anbieten"
+              aria-label="Hund zur Vermittlung anbieten">
+        ${UI.icon('plus')}
+      </button>
+    ` : '';
+
+    if (!listings.length) {
+      content.innerHTML = `
+        <div style="text-align:center;padding:var(--space-8) var(--space-4)">
+          <div style="font-size:2.5rem;margin-bottom:var(--space-3)">🐾</div>
+          <h3 style="margin-bottom:var(--space-2)">Noch keine Hunde zur Weitervermittlung</h3>
+          <p style="color:var(--c-text-secondary);margin-bottom:var(--space-5);max-width:320px;margin-inline:auto">
+            Hier können Halter Hunde privat zur Weitervermittlung anbieten —
+            zum Beispiel bei Umzug, Krankheit oder Allergie.
+          </p>
+          ${isLoggedIn ? `
+            <button class="btn btn-primary" id="adp-empty-create">
+              ${UI.icon('plus')} Hund zur Vermittlung anbieten
+            </button>
+          ` : `
+            <p style="font-size:var(--text-sm);color:var(--c-text-secondary)">
+              Bitte anmelden, um ein Inserat zu erstellen.
+            </p>
+          `}
+        </div>
+        ${fabHtml}
+      `;
+      content.querySelector('#adp-empty-create')?.addEventListener('click', _openCreateModal);
+      content.querySelector('#adp-fab-create')?.addEventListener('click', _openCreateModal);
+      return;
+    }
+
+    // Eigene Inserate trennen
+    const myIds = new Set((_myListings || []).map(l => l.id));
+
+    content.innerHTML = `
+      <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-3)">
+        ${listings.length} Inserat${listings.length !== 1 ? 'e' : ''} zur Weitervermittlung
+      </p>
+      <div class="adp-grid"
+           style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3)">
+        ${listings.map(l => _communityCard(l)).join('')}
+      </div>
+
+      ${isLoggedIn && _myListings && _myListings.length ? `
+        <div id="adp-my-listings" style="margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--c-border)">
+          <h4 style="margin-bottom:var(--space-3)">Meine Inserate</h4>
+          <div style="display:flex;flex-direction:column;gap:var(--space-2)">
+            ${_myListings.map(l => _myListingRow(l)).join('')}
+          </div>
+        </div>
+      ` : ''}
+
+      ${fabHtml}
+    `;
+
+    // Interest-Button Events
+    content.querySelectorAll('[data-adp-interest]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const id        = btn.dataset.adpInterest;
+        const interested = btn.dataset.adpInterested === 'true';
+        _handleInterest(id, interested, btn);
+      });
+    });
+
+    // FAB
+    content.querySelector('#adp-fab-create')?.addEventListener('click', _openCreateModal);
+
+    // Meine Inserate: Status-Dropdown + Löschen
+    content.querySelectorAll('[data-adp-status-change]').forEach(sel => {
+      sel.addEventListener('change', async () => {
+        const id = sel.dataset.adpStatusChange;
+        try {
+          await API.patch(`/adoption/community/${id}`, { status: sel.value });
+          UI.toast.success('Status aktualisiert.');
+          _loadCommunity();
+        } catch {
+          UI.toast.error('Status konnte nicht aktualisiert werden.');
+        }
+      });
+    });
+
+    content.querySelectorAll('[data-adp-delete]').forEach(btn => {
+      btn.addEventListener('click', async () => {
+        if (!window.confirm('Inserat wirklich löschen?')) return;
+        try {
+          await API.del(`/adoption/community/${btn.dataset.adpDelete}`);
+          UI.toast.success('Inserat gelöscht.');
+          _communityData = null;
+          _myListings    = null;
+          _loadCommunity();
+        } catch {
+          UI.toast.error('Löschen fehlgeschlagen.');
+        }
+      });
+    });
+  }
+
+  function _communityCard(l) {
+    const foto = l.foto_url
+      ? `<img src="${_esc(l.foto_url)}" alt="${_esc(l.name)}"
+              style="width:100%;height:100%;object-fit:cover"
+              onerror="this.parentElement.innerHTML='<div style=&quot;display:flex;align-items:center;justify-content:center;height:100%;font-size:2.5rem&quot;>🐾</div>'">`
+      : '<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:2.5rem">🐾</div>';
+
+    const isActive    = !l.status || l.status === 'active';
+    const statusLabel = l.status === 'reserved' ? 'Reserviert'
+                      : l.status === 'adopted'  ? 'Vermittelt'
+                      : '';
+
+    const alterLabel = l.alter_kategorie === 'welpe'  ? 'Welpe <6Mo'
+                     : l.alter_kategorie === 'jung'   ? 'Jung 6Mo–2J'
+                     : l.alter_kategorie === 'adult'  ? 'Adult 2–8J'
+                     : l.alter_kategorie === 'senior' ? 'Senior >8J'
+                     : '';
+
+    const genderIcon = l.geschlecht === 'maennlich' ? '♂'
+                     : l.geschlecht === 'weiblich'  ? '♀'
+                     : '';
+
+    const distTxt = l.distanz_km != null ? `${l.distanz_km} km` : '';
+    const ort     = [l.plz, l.ort].filter(Boolean).join(' ');
+
+    const interestBtn = l.user_interested
+      ? `<button class="btn btn-secondary btn-sm" style="width:100%;font-size:var(--text-xs)"
+                 data-adp-interest="${_esc(l.id)}" data-adp-interested="true">
+           ✓ Bereits gemeldet
+         </button>`
+      : `<button class="btn btn-primary btn-sm" style="width:100%;font-size:var(--text-xs)"
+                 data-adp-interest="${_esc(l.id)}" data-adp-interested="false"
+                 ${!isActive ? 'disabled' : ''}>
+           Interesse bekunden
+         </button>`;
+
+    return `
+      <div style="border-radius:var(--radius-md);overflow:hidden;
+                  background:var(--c-bg-card,var(--c-surface-2));
+                  box-shadow:0 1px 4px rgba(0,0,0,0.08);
+                  display:flex;flex-direction:column;position:relative">
+        <!-- Foto -->
+        <div style="height:140px;overflow:hidden;background:var(--c-surface-3);position:relative">
+          ${foto}
+          ${!isActive ? `
+            <div style="position:absolute;inset:0;background:rgba(0,0,0,0.45);
+                        display:flex;align-items:center;justify-content:center">
+              <span style="color:#fff;font-weight:700;font-size:var(--text-sm);
+                           background:rgba(0,0,0,0.6);padding:4px 12px;border-radius:999px">
+                ${_esc(statusLabel)}
+              </span>
+            </div>
+          ` : ''}
+        </div>
+        <!-- Body -->
+        <div style="padding:var(--space-2) var(--space-2) var(--space-3);flex:1;display:flex;flex-direction:column;gap:var(--space-1)">
+          <div style="font-weight:600;font-size:var(--text-sm);
+                      white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
+            ${_esc(l.name)}
+          </div>
+          ${l.rasse ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
+                                   white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
+            ${_esc(l.rasse)}
+          </div>` : ''}
+          <!-- Badges -->
+          <div style="display:flex;gap:4px;flex-wrap:wrap">
+            ${alterLabel ? `<span style="font-size:10px;background:var(--c-surface-3);
+                                         border-radius:999px;padding:1px 6px;color:var(--c-text-secondary)">
+              ${_esc(alterLabel)}
+            </span>` : ''}
+            ${genderIcon ? `<span style="font-size:10px;background:var(--c-surface-3);
+                                          border-radius:999px;padding:1px 6px;color:var(--c-text-secondary)">
+              ${genderIcon}
+            </span>` : ''}
+            ${distTxt ? `<span style="font-size:10px;background:var(--c-primary-light,#ede9fe);
+                                      border-radius:999px;padding:1px 6px;color:var(--c-primary)">
+              ${_esc(distTxt)}
+            </span>` : ''}
+          </div>
+          ${ort ? `<div style="font-size:10px;color:var(--c-text-muted)">${_esc(ort)}</div>` : ''}
+          ${l.beschreibung ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
+                                          overflow:hidden;display:-webkit-box;
+                                          -webkit-line-clamp:2;-webkit-box-orient:vertical">
+            ${_esc(l.beschreibung)}
+          </div>` : ''}
+          ${l.interesse_count ? `<div style="font-size:10px;color:var(--c-text-muted)">
+            ❤️ ${l.interesse_count} Interessent${l.interesse_count !== 1 ? 'en' : ''}
+          </div>` : ''}
+          <div style="margin-top:auto;padding-top:var(--space-1)">
+            ${interestBtn}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  function _myListingRow(l) {
+    const statusOptions = [
+      { value: 'active',   label: 'Aktiv' },
+      { value: 'reserved', label: 'Reserviert' },
+      { value: 'adopted',  label: 'Vermittelt' },
+    ];
+    return `
+      <div style="display:flex;align-items:center;gap:var(--space-2);
+                  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
+                  background:var(--c-surface-2);border:1px solid var(--c-border)">
+        <div style="flex:1;min-width:0">
+          <div style="font-weight:600;font-size:var(--text-sm);
+                      white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
+            ${_esc(l.name)}
+          </div>
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
+            ${l.interesse_count || 0} Interessent${(l.interesse_count || 0) !== 1 ? 'en' : ''}
+          </div>
+        </div>
+        <select class="form-control" style="width:auto;font-size:var(--text-xs)"
+                data-adp-status-change="${_esc(l.id)}">
+          ${statusOptions.map(o => `
+            <option value="${o.value}" ${l.status === o.value ? 'selected' : ''}>${o.label}</option>
+          `).join('')}
+        </select>
+        <button class="btn btn-danger btn-sm" style="font-size:var(--text-xs);white-space:nowrap"
+                data-adp-delete="${_esc(l.id)}">
+          ${UI.icon('trash')} Löschen
+        </button>
+      </div>
+    `;
+  }
+
+  // ------------------------------------------------------------------
+  // INTERESSE BEKUNDEN / ZURÜCKZIEHEN
+  // ------------------------------------------------------------------
+  async function _handleInterest(id, isInterested, btn) {
+    if (!_appState?.user) {
+      UI.toast.error('Bitte anmelden um Interesse zu bekunden.');
+      return;
+    }
+
+    if (isInterested) {
+      // Interesse zurückziehen
+      try {
+        btn.disabled = true;
+        await API.del(`/adoption/community/${id}/interest`);
+        UI.toast.success('Interesse zurückgezogen.');
+        _communityData = null;
+        _myListings    = null;
+        _loadCommunity();
+      } catch {
+        UI.toast.error('Fehler beim Zurückziehen des Interesses.');
+        btn.disabled = false;
+      }
+      return;
+    }
+
+    // Interesse bekunden — Modal mit optionaler Nachricht
+    const body = `
+      <form id="adp-interest-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
+        <p style="color:var(--c-text-secondary);font-size:var(--text-sm)">
+          Du kannst optional eine Nachricht an den Anbieter schicken.
+        </p>
+        <div class="form-group">
+          <label class="form-label">Nachricht (optional)</label>
+          <textarea class="form-control" name="nachricht" rows="3"
+                    placeholder="Stell dich kurz vor und erzähle, warum dieser Hund zu dir passt…"></textarea>
+        </div>
+      </form>
+    `;
+    const footer = `
+      <div style="display:flex;gap:var(--space-2);width:100%">
+        <button type="submit" form="adp-interest-form" class="btn btn-primary flex-1" id="adp-interest-submit">
+          ${UI.icon('heart')} Interesse bekunden
+        </button>
+        <button type="button" class="btn btn-secondary" onclick="UI.modal.close()">Abbrechen</button>
+      </div>
+    `;
+
+    UI.modal.open({ title: 'Interesse bekunden', body, footer });
+
+    document.getElementById('adp-interest-form')?.addEventListener('submit', async e => {
+      e.preventDefault();
+      const submitBtn = document.getElementById('adp-interest-submit');
+      const fd        = new FormData(e.target);
+      const payload   = { nachricht: fd.get('nachricht') || null };
+      if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = '…'; }
+      try {
+        await API.post(`/adoption/community/${id}/interest`, payload);
+        UI.modal.close();
+        UI.toast.success('Interesse gemeldet!');
+        _communityData = null;
+        _myListings    = null;
+        _loadCommunity();
+      } catch {
+        UI.toast.error('Fehler beim Melden des Interesses.');
+        if (submitBtn) { submitBtn.disabled = false; submitBtn.innerHTML = `${UI.icon('heart')} Interesse bekunden`; }
+      }
+    });
+  }
+
+  // ------------------------------------------------------------------
+  // INSERAT ERSTELLEN — Modal
+  // ------------------------------------------------------------------
+  function _openCreateModal() {
+    if (!_appState?.user) {
+      UI.toast.error('Bitte anmelden um ein Inserat zu erstellen.');
+      return;
+    }
+
+    const body = `
+      <form id="adp-create-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
+        <div class="form-group">
+          <label class="form-label">Name <span style="color:var(--c-danger)">*</span></label>
+          <input class="form-control" name="name" required placeholder="z.B. Bello">
+        </div>
+        <div class="form-group">
+          <label class="form-label">Rasse (optional)</label>
+          <input class="form-control" name="rasse" placeholder="z.B. Labrador Mischling">
+        </div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)">
+          <div class="form-group">
+            <label class="form-label">Alter</label>
+            <select class="form-control" name="alter_kategorie">
+              <option value="">Unbekannt</option>
+              <option value="welpe">Welpe &lt;6Mo</option>
+              <option value="jung">Jung 6Mo–2J</option>
+              <option value="adult">Adult 2–8J</option>
+              <option value="senior">Senior &gt;8J</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label class="form-label">Geschlecht</label>
+            <select class="form-control" name="geschlecht">
+              <option value="">Unbekannt</option>
+              <option value="maennlich">Männlich</option>
+              <option value="weiblich">Weiblich</option>
+            </select>
+          </div>
+        </div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)">
+          <div class="form-group">
+            <label class="form-label">PLZ</label>
+            <input class="form-control" name="plz" inputmode="numeric" maxlength="5"
+                   placeholder="z.B. 80331" value="${_esc(_lat ? '' : '')}">
+          </div>
+          <div class="form-group">
+            <label class="form-label">Ort</label>
+            <input class="form-control" name="ort" placeholder="z.B. München">
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Beschreibung <span style="color:var(--c-danger)">*</span></label>
+          <textarea class="form-control" name="beschreibung" rows="4" required minlength="80"
+                    placeholder="Erzähle, warum du deinen Hund abgeben musst, und was ihn besonders macht…"></textarea>
+          <div style="font-size:10px;color:var(--c-text-muted);margin-top:2px">Mindestens 80 Zeichen</div>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Hintergrund (optional)</label>
+          <textarea class="form-control" name="hintergrund" rows="2"
+                    placeholder="Warum suchst du ein neues Zuhause? (Krankheit, Umzug, Allergie…)"></textarea>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Foto (optional)</label>
+          <input class="form-control" type="file" name="foto" accept="image/*" id="adp-create-foto">
+        </div>
+      </form>
+    `;
+
+    const footer = `
+      <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
+        <button type="submit" form="adp-create-form" class="btn btn-primary" style="width:100%" id="adp-create-submit">
+          ${UI.icon('plus')} Inserat erstellen
+        </button>
+        <button type="button" class="btn btn-secondary" onclick="UI.modal.close()">Abbrechen</button>
+      </div>
+    `;
+
+    UI.modal.open({ title: 'Hund zur Vermittlung anbieten', body, footer });
+
+    document.getElementById('adp-create-form')?.addEventListener('submit', async e => {
+      e.preventDefault();
+      const submitBtn = document.getElementById('adp-create-submit');
+      const fd        = new FormData(e.target);
+
+      // Mindestlänge Beschreibung manuell prüfen (minlength gilt nur für text)
+      const beschreibung = (fd.get('beschreibung') || '').trim();
+      if (beschreibung.length < 80) {
+        UI.toast.error('Beschreibung muss mindestens 80 Zeichen lang sein.');
+        return;
+      }
+
+      // FormData für multipart aufbauen
+      const postData = new FormData();
+      postData.append('name',            fd.get('name') || '');
+      postData.append('rasse',           fd.get('rasse') || '');
+      postData.append('alter_kategorie', fd.get('alter_kategorie') || '');
+      postData.append('geschlecht',      fd.get('geschlecht') || '');
+      postData.append('plz',             fd.get('plz') || '');
+      postData.append('ort',             fd.get('ort') || '');
+      postData.append('beschreibung',    beschreibung);
+      postData.append('hintergrund',     fd.get('hintergrund') || '');
+      if (_lat) postData.append('lat', _lat);
+      if (_lon) postData.append('lon', _lon);
+      const fotoFile = document.getElementById('adp-create-foto')?.files?.[0];
+      if (fotoFile) postData.append('foto', fotoFile);
+
+      if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = '…'; }
+      try {
+        await API.upload('/adoption/community', postData);
+        UI.modal.close();
+        UI.toast.success('Inserat erstellt!');
+        _communityData = null;
+        _myListings    = null;
+        _loadCommunity();
+      } catch (err) {
+        UI.toast.error(err.message || 'Inserat konnte nicht erstellt werden.');
+        if (submitBtn) {
+          submitBtn.disabled = false;
+          submitBtn.innerHTML = `${UI.icon('plus')} Inserat erstellen`;
+        }
+      }
+    });
+  }
+
   // ----------------------------------------------------------
   // HILFSFUNKTIONEN
   // ----------------------------------------------------------