219 lines
8.7 KiB
PHP
219 lines
8.7 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
|
|
$app = app();
|
|
$pdo = $app->pdo();
|
|
$q = trim((string)($_GET['q'] ?? ''));
|
|
$loc = trim((string)($_GET['loc'] ?? ''));
|
|
$radius = isset($_GET['radius']) ? (float)$_GET['radius'] : 5.0;
|
|
$radius = ($radius > 0) ? $radius : 5.0;
|
|
$lat = isset($_GET['lat']) && $_GET['lat'] !== '' ? (float)$_GET['lat'] : null;
|
|
$lng = isset($_GET['lng']) && $_GET['lng'] !== '' ? (float)$_GET['lng'] : null;
|
|
$results = [];
|
|
|
|
function geocode_loc(string $loc): array
|
|
{
|
|
$url = 'https://nominatim.openstreetmap.org/search?' . http_build_query([
|
|
'format' => 'jsonv2',
|
|
'limit' => 1,
|
|
'q' => $loc,
|
|
]);
|
|
$ctx = stream_context_create([
|
|
'http' => [
|
|
'method' => 'GET',
|
|
'header' => "User-Agent: papa-kind-treff/1.0\r\nAccept-Language: de\r\n",
|
|
'timeout' => 6,
|
|
],
|
|
]);
|
|
$resp = @file_get_contents($url, false, $ctx);
|
|
if ($resp === false) return [null, null];
|
|
$json = json_decode($resp, true);
|
|
if (!is_array($json) || empty($json[0]['lat']) || empty($json[0]['lon'])) return [null, null];
|
|
return [round((float)$json[0]['lat'], 6), round((float)$json[0]['lon'], 6)];
|
|
}
|
|
|
|
if ($pdo && ($q !== '' || $loc !== '' || ($lat !== null && $lng !== null))) {
|
|
if ($lat === null && $lng === null && $loc !== '') {
|
|
[$lat, $lng] = geocode_loc($loc);
|
|
}
|
|
$geo = ($lat !== null && $lng !== null) ? ['lat' => $lat, 'lng' => $lng, 'radius' => $radius] : null;
|
|
$search = new \App\Search($pdo);
|
|
$results = $search->searchEvents($q, 100, $geo);
|
|
}
|
|
?>
|
|
<main class="section">
|
|
<div class="container">
|
|
<p class="eyebrow">Suche</p>
|
|
<h1>Events finden</h1>
|
|
<form method="get" class="form-grid single" style="margin: 14px 0; gap:12px; align-items:end;" id="searchForm">
|
|
<div class="stack gap-6">
|
|
<label class="label" for="q">Suchbegriff (Titel, Ort, Beschreibung)</label>
|
|
<input id="q" name="q" class="input" value="<?= htmlspecialchars($q, ENT_QUOTES) ?>" placeholder="z. B. Berlin oder Spielplatz">
|
|
</div>
|
|
<div class="stack gap-6">
|
|
<label class="label" for="loc">Ort oder PLZ (optional)</label>
|
|
<div class="flex gap-8" style="align-items:center;">
|
|
<input id="loc" name="loc" class="input" value="<?= htmlspecialchars($loc, ENT_QUOTES) ?>" placeholder="z. B. 10437 oder Berlin" style="flex:1;">
|
|
<button class="btn ghost" type="button" id="btnGeo">📍</button>
|
|
<button class="btn ghost" type="button" id="btnMap">Karte</button>
|
|
</div>
|
|
<input type="hidden" id="lat" name="lat" value="<?= $lat !== null ? htmlspecialchars((string)$lat, ENT_QUOTES) : '' ?>">
|
|
<input type="hidden" id="lng" name="lng" value="<?= $lng !== null ? htmlspecialchars((string)$lng, ENT_QUOTES) : '' ?>">
|
|
</div>
|
|
<div class="stack gap-6" id="radiusWrap">
|
|
<label class="label" for="radius">Umkreis (km)</label>
|
|
<select id="radius" name="radius" class="select">
|
|
<?php foreach ([1,2,5,10,15,25] as $r): ?>
|
|
<option value="<?= $r ?>" <?= ((float)$radius === (float)$r) ? 'selected' : '' ?>><?= $r ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
<button class="btn" type="submit">Suchen</button>
|
|
</form>
|
|
<div id="mapWrapper" class="map-wrapper" hidden>
|
|
<div class="stack gap-6">
|
|
<p class="muted small">Karte anklicken, um Standort zu wählen. Ziehen/Zoomen möglich.</p>
|
|
<div id="mapContainer" class="map-container" style="height: 320px; border:1px solid #e5e7eb; border-radius:8px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if ($q === '' && $loc === '' && $lat === null && $lng === null): ?>
|
|
<p class="muted">Bitte gib einen Suchbegriff oder einen Ort ein.</p>
|
|
<?php else: ?>
|
|
<h3 style="margin-top: 16px;"><?= count($results) ?> Ergebnis(se)<?= $q !== '' ? ' für „' . htmlspecialchars($q, ENT_QUOTES) . '“' : '' ?></h3>
|
|
<?php if (!$results): ?>
|
|
<p class="muted">Keine passenden Events gefunden.</p>
|
|
<?php else: ?>
|
|
<div class="stack gap-12" style="margin-top: 12px;">
|
|
<?php foreach ($results as $ev): ?>
|
|
<article class="card">
|
|
<div class="event__body">
|
|
<div class="event__meta">
|
|
<span><?= htmlspecialchars($ev['starts_at'], ENT_QUOTES) ?></span>
|
|
<span>📍 <?= htmlspecialchars($ev['region'] ?: $ev['city'], ENT_QUOTES) ?></span>
|
|
<span><?= $ev['visibility'] === 'public' ? 'Öffentlich' : 'Mitglieder' ?></span>
|
|
<span class="badge"><?= ((int)$ev['allow_kids'] === 1) ? 'Mit Kindern' : 'Ohne Kinder' ?></span>
|
|
<?php if (isset($ev['distance_km'])): ?>
|
|
<span class="badge"><?= number_format((float)$ev['distance_km'], 1) ?> km</span>
|
|
<?php endif; ?>
|
|
</div>
|
|
<h3><?= htmlspecialchars($ev['title'], ENT_QUOTES) ?></h3>
|
|
<p class="muted"><?= htmlspecialchars($ev['teaser_public'], ENT_QUOTES) ?></p>
|
|
<?php if (!empty($ev['location_label'])): ?>
|
|
<p class="muted small"><strong>Ort:</strong> <?= htmlspecialchars($ev['location_label'], ENT_QUOTES) ?></p>
|
|
<?php endif; ?>
|
|
<details>
|
|
<summary style="cursor:pointer;">Details anzeigen</summary>
|
|
<p><?= nl2br(htmlspecialchars($ev['description'], ENT_QUOTES)) ?></p>
|
|
</details>
|
|
</div>
|
|
</article>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
(function(){
|
|
const locInput = document.getElementById('loc');
|
|
const latInput = document.getElementById('lat');
|
|
const lngInput = document.getElementById('lng');
|
|
const radiusWrap = document.getElementById('radiusWrap');
|
|
const radiusSelect = document.getElementById('radius');
|
|
const btnGeo = document.getElementById('btnGeo');
|
|
const btnMap = document.getElementById('btnMap');
|
|
const mapWrapper = document.getElementById('mapWrapper');
|
|
const mapContainer = document.getElementById('mapContainer');
|
|
let map, marker;
|
|
|
|
function toggleRadius(show) {
|
|
if (!radiusWrap) return;
|
|
radiusWrap.hidden = !show;
|
|
if (radiusSelect) radiusSelect.disabled = !show;
|
|
}
|
|
|
|
function clearGeo() {
|
|
if (latInput) latInput.value = '';
|
|
if (lngInput) lngInput.value = '';
|
|
toggleRadius(false);
|
|
}
|
|
|
|
function ensureLeaflet(cb) {
|
|
if (window.L) { cb(); return; }
|
|
const css = document.createElement('link');
|
|
css.rel = 'stylesheet';
|
|
css.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
|
|
document.head.appendChild(css);
|
|
const s = document.createElement('script');
|
|
s.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
|
|
s.onload = cb;
|
|
document.body.appendChild(s);
|
|
}
|
|
|
|
function setMarker(latlng) {
|
|
if (!map) return;
|
|
if (marker) {
|
|
marker.setLatLng(latlng);
|
|
} else {
|
|
marker = L.marker(latlng, { draggable:true }).addTo(map);
|
|
marker.on('dragend', () => {
|
|
const ll = marker.getLatLng();
|
|
latInput.value = ll.lat.toFixed(6);
|
|
lngInput.value = ll.lng.toFixed(6);
|
|
});
|
|
}
|
|
latInput.value = latlng.lat.toFixed(6);
|
|
lngInput.value = latlng.lng.toFixed(6);
|
|
map.setView(latlng, 13);
|
|
toggleRadius(true);
|
|
}
|
|
|
|
function initMap() {
|
|
if (map) { map.invalidateSize(); return; }
|
|
map = L.map(mapContainer).setView([51.1657, 10.4515], 5);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map);
|
|
map.on('click', (e) => setMarker(e.latlng));
|
|
const lat = parseFloat(latInput.value);
|
|
const lng = parseFloat(lngInput.value);
|
|
if (!Number.isNaN(lat) && !Number.isNaN(lng)) {
|
|
setMarker({ lat, lng });
|
|
}
|
|
}
|
|
|
|
locInput?.addEventListener('input', () => {
|
|
if (!locInput.value.trim()) {
|
|
clearGeo();
|
|
}
|
|
});
|
|
|
|
btnGeo?.addEventListener('click', () => {
|
|
if (!navigator.geolocation) {
|
|
alert('Geolocation wird nicht unterstützt.');
|
|
return;
|
|
}
|
|
navigator.geolocation.getCurrentPosition((pos) => {
|
|
const lat = pos.coords.latitude;
|
|
const lng = pos.coords.longitude;
|
|
latInput.value = lat.toFixed(6);
|
|
lngInput.value = lng.toFixed(6);
|
|
if (locInput && !locInput.value.trim()) locInput.value = 'Mein Standort';
|
|
toggleRadius(true);
|
|
}, () => alert('Standort konnte nicht ermittelt werden.'));
|
|
});
|
|
|
|
btnMap?.addEventListener('click', () => {
|
|
if (!mapWrapper) return;
|
|
mapWrapper.hidden = !mapWrapper.hidden;
|
|
if (!mapWrapper.hidden) {
|
|
ensureLeaflet(() => setTimeout(() => initMap(), 50));
|
|
}
|
|
});
|
|
|
|
// Init radius visibility based on current state
|
|
if (!latInput?.value || !lngInput?.value) {
|
|
toggleRadius(false);
|
|
}
|
|
})();
|
|
</script>
|