community

public/assets/js/app.js

@@ -51,12 +51,17 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Events from backend (injected on page); fallback to empty
   const events = Array.isArray(window.__events) ? window.__events : [];
+  const threads = Array.isArray(window.__threads) ? window.__threads : [];
 
   const el = {
     sliderTrack: document.getElementById('eventSlider'),
     sliderViewport: document.querySelector('.slider__viewport'),
     sliderPrev: document.querySelector('[data-slider-prev]'),
     sliderNext: document.querySelector('[data-slider-next]'),
+    threadSliderTrack: document.getElementById('threadSlider'),
+    threadSliderViewport: document.getElementById('threadSlider')?.closest('.slider__viewport') || null,
+    threadSliderPrev: document.querySelector('[data-thread-slider-prev]'),
+    threadSliderNext: document.querySelector('[data-thread-slider-next]'),
     modal: document.getElementById('eventModal'),
     modalBody: document.getElementById('eventModalBody'),
     modalTitle: document.getElementById('eventModalTitle'),
@@ -118,14 +123,42 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   };
 
-  const scrollSlider = (dir) => {
-    if (!el.sliderViewport) return;
-    const amount = dir === 'next' ? 320 : -320;
-    el.sliderViewport.scrollBy({ left: amount, behavior: 'smooth' });
+  const renderThreadCard = (item) => {
+    const preview = item.body.length > 170 ? `${item.body.slice(0, 170)}…` : item.body;
+    return `
+    <article class="card thread-card-small">
+      <div class="muted small">${fmtDate(item.createdAt)}</div>
+      <h3>${item.title}</h3>
+      <p class="muted clamp-4">${preview}</p>
+      <div class="event__meta">
+        <span>${item.displayName}</span>
+        <span>Antworten: ${item.answers}</span>
+      </div>
+      <div class="flex gap-8" style="margin-top:8px;">
+        <a class="btn ghost" href="/community_thread?id=${item.id}">Beitrag öffnen</a>
+      </div>
+    </article>`;
   };
 
-  el.sliderPrev?.addEventListener('click', () => scrollSlider('prev'));
-  el.sliderNext?.addEventListener('click', () => scrollSlider('next'));
+  const renderThreadSlider = () => {
+    if (!el.threadSliderTrack) return;
+    if (!threads.length) {
+      el.threadSliderTrack.innerHTML = '<p class="muted">Noch keine Community-Beiträge vorhanden.</p>';
+      return;
+    }
+    el.threadSliderTrack.innerHTML = threads.map(renderThreadCard).join('');
+  };
+
+  const scrollSlider = (viewport, dir) => {
+    if (!viewport) return;
+    const amount = dir === 'next' ? 320 : -320;
+    viewport.scrollBy({ left: amount, behavior: 'smooth' });
+  };
+
+  el.sliderPrev?.addEventListener('click', () => scrollSlider(el.sliderViewport, 'prev'));
+  el.sliderNext?.addEventListener('click', () => scrollSlider(el.sliderViewport, 'next'));
+  el.threadSliderPrev?.addEventListener('click', () => scrollSlider(el.threadSliderViewport, 'prev'));
+  el.threadSliderNext?.addEventListener('click', () => scrollSlider(el.threadSliderViewport, 'next'));
 
   // Quick search with geocoding
   const geocode = async (query) => {
@@ -183,4 +216,5 @@ document.addEventListener('DOMContentLoaded', () => {
   el.modal?.addEventListener('click', (e) => { if (e.target === el.modal) el.modal.classList.remove('open'); });
 
   renderSlider();
+  renderThreadSlider();
 });