bizmatch-project/bizmatch/src/app/pages/details/base-details.component.ts

import { Component } from '@angular/core';
import { Control, DomEvent, DomUtil, icon, Icon, latLng, Layer, Map, MapOptions, Marker, tileLayer } from 'leaflet';
import { BusinessListing, CommercialPropertyListing } from '../../../../../bizmatch-server/src/models/db.model';
@Component({
  selector: 'app-base-details',
  template: ``,
  standalone: true,
  imports: [],
})
export abstract class BaseDetailsComponent {
  // Leaflet-Map-Einstellungen
  mapOptions: MapOptions;
  mapLayers: Layer[] = [];
  mapCenter: any;
  mapZoom: number = 13; // Standardzoomlevel
  protected listing: BusinessListing | CommercialPropertyListing;
  constructor() {
    this.mapOptions = {
      layers: [
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '© OpenStreetMap contributors',
        }),
      ],
      zoom: this.mapZoom,
      center: latLng(0, 0), // Platzhalter, wird später gesetzt
    };
  }
  protected configureMap() {
    const latitude = this.listing.location.latitude;
    const longitude = this.listing.location.longitude;

    if (latitude !== null && latitude !== undefined &&
        longitude !== null && longitude !== undefined) {
      this.mapCenter = latLng(latitude, longitude);

      // Build address string from available location data
      const addressParts = [];
      if (this.listing.location.housenumber) addressParts.push(this.listing.location.housenumber);
      if (this.listing.location.street) addressParts.push(this.listing.location.street);
      if (this.listing.location.name) addressParts.push(this.listing.location.name);
      else if (this.listing.location.county) addressParts.push(this.listing.location.county);
      if (this.listing.location.state) addressParts.push(this.listing.location.state);
      if (this.listing.location.zipCode) addressParts.push(this.listing.location.zipCode);

      const fullAddress = addressParts.join(', ');

      const marker = new Marker([latitude, longitude], {
        icon: icon({
          ...Icon.Default.prototype.options,
          iconUrl: 'assets/leaflet/marker-icon.png',
          iconRetinaUrl: 'assets/leaflet/marker-icon-2x.png',
          shadowUrl: 'assets/leaflet/marker-shadow.png',
        }),
      });

      // Add popup to marker with address
      if (fullAddress) {
        marker.bindPopup(`
          <div style="padding: 8px;">
            <strong>Location:</strong><br/>
            ${fullAddress}
          </div>
        `);
      }

      this.mapLayers = [
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; OpenStreetMap contributors',
        }),
        marker
      ];
      this.mapOptions = {
        ...this.mapOptions,
        center: this.mapCenter,
        zoom: this.mapZoom,
      };
    }
  }
  onMapReady(map: Map) {
    // Build comprehensive address for the control
    const addressParts = [];
    if (this.listing.location.housenumber) addressParts.push(this.listing.location.housenumber);
    if (this.listing.location.street) addressParts.push(this.listing.location.street);
    if (this.listing.location.name) addressParts.push(this.listing.location.name);
    else if (this.listing.location.county) addressParts.push(this.listing.location.county);
    if (this.listing.location.state) addressParts.push(this.listing.location.state);
    if (this.listing.location.zipCode) addressParts.push(this.listing.location.zipCode);

    if (addressParts.length > 0) {
      const addressControl = new Control({ position: 'topright' });

      addressControl.onAdd = () => {
        const container = DomUtil.create('div', 'address-control bg-white p-2 rounded shadow');
        const address = addressParts.join(', ');
        container.innerHTML = `
          <div style="max-width: 250px;">
            ${address}<br/>
            <a href="#" id="view-full-map" style="color: #2563eb; text-decoration: underline;">View larger map</a>
          </div>
        `;

        // Verhindere, dass die Karte durch das Klicken des Links bewegt wird
        DomEvent.disableClickPropagation(container);

        // Füge einen Event Listener für den Link hinzu
        const link = container.querySelector('#view-full-map') as HTMLElement;
        if (link) {
          DomEvent.on(link, 'click', (e: Event) => {
            e.preventDefault();
            this.openFullMap();
          });
        }

        return container;
      };

      addressControl.addTo(map);
    }
  }
  openFullMap() {
    const latitude = this.listing.location.latitude;
    const longitude = this.listing.location.longitude;
    const address = `${this.listing.location.housenumber} ${this.listing.location.street}, ${this.listing.location.name ? this.listing.location.name : this.listing.location.county}, ${this.listing.location.state}`;
    const url = `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=15/${latitude}/${longitude}`;

    window.open(url, '_blank');
  }
}