refactoring

2025-11-25 22:12:43 +01:00
parent de7bcf881a
commit e2a3d54198
12 changed files with 1458 additions and 2842 deletions
--- a/web/js/map.js
+++ b/web/js/map.js
@ -0,0 +1,70 @@
+// Map initialization and marker management
+
+function initMap() {
+    AppState.map = L.map('map').setView([51.1657, 10.4515], 6);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors',
+        maxZoom: 19,
+    }).addTo(AppState.map);
+
+    // Try to get user's location
+    if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(
+            (position) => {
+                const lat = position.coords.latitude;
+                const lon = position.coords.longitude;
+
+                // Add user location marker
+                const userIcon = L.divIcon({
+                    html: '<div style="width: 16px; height: 16px; background: #0ea5e9; border: 3px solid white; border-radius: 50%; box-shadow: 0 0 10px rgba(14, 165, 233, 0.6);"></div>',
+                    className: '',
+                    iconSize: [16, 16],
+                    iconAnchor: [8, 8]
+                });
+
+                L.marker([lat, lon], { icon: userIcon })
+                    .addTo(AppState.map)
+                    .bindPopup('<div style="background: #1a1a1a; color: #e0e0e0; padding: 8px;"><strong>Dein Standort</strong></div>');
+
+                console.log('User location:', lat, lon);
+            },
+            (error) => {
+                console.log('Geolocation error:', error.message);
+            }
+        );
+    }
+}
+
+function clearMarkers() {
+    AppState.markers.forEach(marker => AppState.map.removeLayer(marker));
+    AppState.markers = [];
+}
+
+function addMarker(listing) {
+    if (!listing.lat || !listing.lon) return;
+
+    const marker = L.marker([listing.lat, listing.lon]).addTo(AppState.map);
+
+    const imageHtml = listing.image
+        ? `<img src="${listing.image}" style="width: 100%; max-height: 150px; object-fit: cover; margin: 8px 0;" alt="${listing.title}">`
+        : '';
+
+    const popupContent = `
+        <div style="min-width: 200px; 8px;">
+            <strong style="font-size: 14px;">${listing.title}</strong><br>
+            ${imageHtml}
+            <span style="color: #0066cc; font-weight: bold; font-size: 16px;">${listing.price} €</span><br>
+            <span style="color: #666; font-size: 12px;">${listing.address}</span><br>
+            <a href="${listing.url}" target="_blank" style="color: #0066cc; text-decoration: none; font-weight: 600;">Link öffnen →</a>
+        </div>
+    `;
+    marker.bindPopup(popupContent);
+
+    marker.on('click', () => {
+        AppState.selectedListingId = listing.id;
+        highlightSelectedListing();
+    });
+
+    AppState.markers.push(marker);
+}