up

public/assets/js/app.js

@@ -61,7 +61,11 @@ document.addEventListener('DOMContentLoaded', () => {
     ageSelect: document.getElementById('ageSelect'),
     btnSearch: document.getElementById('btnSearch'),
     btnGeo: document.getElementById('btnGeo'),
+    modal: document.getElementById('eventModal'),
+    modalBody: document.getElementById('eventModalBody'),
+    modalTitle: document.getElementById('eventModalTitle'),
   };
+  const searchState = { active: false };
 
   const fmtDate = (iso) => {
     const d = new Date(iso);
@@ -107,8 +111,8 @@ document.addEventListener('DOMContentLoaded', () => {
         <div class="event__tags">${tags}</div>
         ${contact}
         <div class="flex gap-12">
-          <button class="btn ghost">Details</button>
-          ${!guest ? '<button class="btn">Teilnehmen</button>' : '<button class="btn">Anmelden</button>'}
+          <button class="btn ghost" data-event-detail="${item.id}">Details</button>
+          ${guest ? '' : '<button class="btn">Teilnehmen</button>'}
         </div>
       </div>
     </article>`;
@@ -131,7 +135,7 @@ document.addEventListener('DOMContentLoaded', () => {
     let filtered = events.filter(matchesFilter);
     filtered.sort((a,b) => new Date(a.startsAt) - new Date(b.startsAt));
 
-    if (state.geo) {
+    if (state.geo && !searchState.active) {
       const withCoords = filtered.filter(ev => ev.lat !== null && ev.lng !== null);
       withCoords.forEach(ev => { ev._distance = haversine(state.geo.lat, state.geo.lng, ev.lat, ev.lng); });
       withCoords.sort((a,b) => (a._distance || Infinity) - (b._distance || Infinity));
@@ -144,11 +148,29 @@ document.addEventListener('DOMContentLoaded', () => {
         }
         return copy;
       });
-    } else {
+    } else if (!searchState.active) {
       filtered = filtered.slice(0,5);
     }
 
     el.list.innerHTML = filtered.map(renderCard).join('') || '<p class="muted">Keine Events gefunden.</p>';
+
+    // wire detail buttons
+    el.list.querySelectorAll('[data-event-detail]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const id = parseInt(btn.getAttribute('data-event-detail'), 10);
+        const ev = events.find(e => e.id === id);
+        if (!ev || !el.modal || !el.modalBody || !el.modalTitle) return;
+        el.modalTitle.textContent = ev.title;
+        el.modalBody.innerHTML = `
+          <div class="muted small">${fmtDate(ev.startsAt)} · ${ev.region || ev.city || ''}</div>
+          <p class="muted">${ev.teaser}</p>
+          ${ev.locationLabel ? `<p><strong>Ort:</strong> ${ev.locationLabel}</p>` : ''}
+          <p><strong>Kinder:</strong> ${ev.allowKids ? 'Mit Kindern' : 'Ohne Kinder'}</p>
+          <p><strong>Sichtbarkeit:</strong> ${ev.visibility === 'public' ? 'Öffentlich' : 'Nur Mitglieder'}</p>
+        `;
+        el.modal.classList.add('open');
+      });
+    });
   };
 
   if (el.chips.length > 0) {
@@ -169,6 +191,8 @@ document.addEventListener('DOMContentLoaded', () => {
       state.region = (el.locInput?.value || '').trim().toLowerCase();
       state.topic = el.topicSelect?.value || 'all';
       state.age = el.ageSelect?.value || '';
+      state.query = state.region; // keep simple search for now
+      searchState.active = true;
       renderEvents();
     });
   }
@@ -182,6 +206,7 @@ document.addEventListener('DOMContentLoaded', () => {
       navigator.geolocation.getCurrentPosition(
         (pos) => {
           state.geo = { lat: pos.coords.latitude, lng: pos.coords.longitude };
+          searchState.active = false;
           renderEvents();
         },
         () => alert('Standort konnte nicht ermittelt werden.')
@@ -189,5 +214,11 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
+  // Close modal
+  document.querySelectorAll('[data-event-modal-close]').forEach(btn => {
+    btn.addEventListener('click', () => el.modal?.classList.remove('open'));
+  });
+  el.modal?.addEventListener('click', (e) => { if (e.target === el.modal) el.modal.classList.remove('open'); });
+
   renderEvents();
 });