xycyxc

partials/landing/account/dashboard.php

@@ -511,6 +511,10 @@ $eventsPast = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
             <input id="evRegion" name="region" class="input">
           </div>
         </div>
+        <div class="flex gap-8" style="flex-wrap:wrap; align-items:center;">
+          <button class="btn ghost" type="button" id="btnAddrToMap">Adresse auf Karte setzen</button>
+          <span class="muted small">Hält Karte und Adresse synchron.</span>
+        </div>
         <input type="hidden" id="evLat" name="lat">
         <input type="hidden" id="evLng" name="lng">
         <div class="stack gap-6">
@@ -573,9 +577,14 @@ $eventsPast = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
   const mapWrapper = document.getElementById('mapWrapper');
   const mapContainer = document.getElementById('mapContainer');
   const btnMapSearch = document.getElementById('btnMapSearch');
+  const btnAddrToMap = document.getElementById('btnAddrToMap');
   const mapSearch = document.getElementById('mapSearch');
   const latInput = document.getElementById('evLat');
   const lngInput = document.getElementById('evLng');
+  const streetInput = document.getElementById('evStreet');
+  const zipInput = document.getElementById('evZip');
+  const cityInput = document.getElementById('evCity');
+  const regionInput = document.getElementById('evRegion');
   let map, marker;
 
   function ensureLeaflet(callback) {
@@ -590,6 +599,71 @@ $eventsPast = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
     document.body.appendChild(script);
   }
 
+  function updateAddressFields(addr) {
+    if (!addr) return;
+    if (streetInput) {
+      const street = [addr.road || '', addr.house_number || ''].filter(Boolean).join(' ').trim();
+      if (street) streetInput.value = street;
+    }
+    if (zipInput && addr.postcode) zipInput.value = addr.postcode;
+    if (cityInput && (addr.city || addr.town || addr.village)) cityInput.value = addr.city || addr.town || addr.village;
+    if (regionInput && (addr.suburb || addr.state || addr.county)) regionInput.value = addr.suburb || addr.state || addr.county;
+  }
+
+  function setLatLngInputs(latlng) {
+    latInput.value = latlng.lat.toFixed(7);
+    lngInput.value = latlng.lng.toFixed(7);
+  }
+
+  function setMarker(latlng, center = true) {
+    if (!map) return;
+    if (marker) {
+      marker.setLatLng(latlng);
+    } else {
+      marker = L.marker(latlng, { draggable: true }).addTo(map);
+      marker.on('dragend', () => {
+        const ll = marker.getLatLng();
+        setLatLngInputs(ll);
+        reverseGeocode(ll.lat, ll.lng);
+      });
+    }
+    setLatLngInputs(latlng);
+    if (center) {
+      map.setView(latlng, Math.max(map.getZoom(), 14));
+    }
+  }
+
+  function reverseGeocode(lat, lng) {
+    fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${encodeURIComponent(lat)}&lon=${encodeURIComponent(lng)}`, {
+      headers: { 'Accept-Language': 'de', 'User-Agent': 'papa-kind-treff/1.0' },
+    })
+      .then(r => r.json())
+      .then(data => updateAddressFields(data.address))
+      .catch(() => {});
+  }
+
+  function geocodeAndPlace(query) {
+    fetch('https://nominatim.openstreetmap.org/search?format=jsonv2&limit=1&q=' + encodeURIComponent(query), {
+      headers: { 'Accept-Language': 'de', 'User-Agent': 'papa-kind-treff/1.0' },
+    })
+      .then(r => r.json())
+      .then(data => {
+        if (Array.isArray(data) && data[0]) {
+          const lat = parseFloat(data[0].lat);
+          const lng = parseFloat(data[0].lon);
+          ensureLeaflet(() => {
+            mapWrapper.hidden = false;
+            initMap();
+            if (!Number.isNaN(lat) && !Number.isNaN(lng)) {
+              setMarker({ lat, lng });
+              updateAddressFields(data[0].address);
+            }
+          });
+        }
+      })
+      .catch(() => {});
+  }
+
   function initMap() {
     if (map) { map.invalidateSize(); return; }
     map = L.map(mapContainer).setView([51.1657, 10.4515], 6);
@@ -598,22 +672,10 @@ $eventsPast = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
       attribution: '&copy; OpenStreetMap',
     }).addTo(map);
 
-    const setMarker = (latlng) => {
+    map.on('click', (e) => {
-      if (marker) {
+      setMarker(e.latlng);
-        marker.setLatLng(latlng);
+      reverseGeocode(e.latlng.lat, e.latlng.lng);
-      } else {
-        marker = L.marker(latlng, { draggable: true }).addTo(map);
-        marker.on('dragend', () => {
-          const ll = marker.getLatLng();
-          latInput.value = ll.lat.toFixed(7);
-          lngInput.value = ll.lng.toFixed(7);
     });
-      }
-      latInput.value = latlng.lat.toFixed(7);
-      lngInput.value = latlng.lng.toFixed(7);
-    };
-
-    map.on('click', (e) => setMarker(e.latlng));
 
     const lat = parseFloat(latInput.value);
     const lng = parseFloat(lngInput.value);
@@ -633,29 +695,17 @@ $eventsPast = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
   btnMapSearch?.addEventListener('click', () => {
     const q = (mapSearch?.value || '').trim();
     if (!q) return;
-    fetch('https://nominatim.openstreetmap.org/search?format=jsonv2&limit=1&q=' + encodeURIComponent(q), {
+    geocodeAndPlace(q);
-      headers: { 'Accept-Language': 'de', 'User-Agent': 'papa-kind-treff/1.0' },
-    })
-      .then(r => r.json())
-      .then(data => {
-        if (Array.isArray(data) && data[0]) {
-          const lat = parseFloat(data[0].lat);
-          const lng = parseFloat(data[0].lon);
-          ensureLeaflet(() => {
-            mapWrapper.hidden = false;
-            initMap();
-            if (!Number.isNaN(lat) && !Number.isNaN(lng)) {
-              map.setView([lat, lng], 15);
-              if (window.L) {
-                if (!marker) marker = L.marker([lat, lng], { draggable: true }).addTo(map);
-                marker.setLatLng([lat, lng]);
-                latInput.value = lat.toFixed(7);
-                lngInput.value = lng.toFixed(7);
-              }
-            }
   });
-        }
+
-      })
+  btnAddrToMap?.addEventListener('click', () => {
-      .catch(() => {});
+    const parts = [
+      streetInput?.value || '',
+      zipInput?.value || '',
+      cityInput?.value || '',
+      regionInput?.value || '',
+    ].map(v => v.trim()).filter(Boolean);
+    if (!parts.length) return;
+    geocodeAndPlace(parts.join(', '));
   });
 </script>