first commit

2026-08-27 17:29:18 -04:00
commit 2405dda41b
44 changed files with 11368 additions and 0 deletions
@@ -0,0 +1,243 @@
+import { Component, OnInit, OnDestroy, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import * as L from 'leaflet';
+import { RouteState } from '../../../core/route-state/route';
+import { OrsService } from '../../../core/services/ors.service';
+import { RouteAssignedResponse } from '../../../core/models/route.model';
+
+@Component({
+  standalone: true,
+  selector: 'app-assigned-route-detail',
+  imports: [CommonModule],
+  templateUrl: './assigned-route-detail.component.html',
+  styleUrl: './assigned-route-detail.component.css'
+})
+export class AssignedRouteDetailComponent implements OnInit, OnDestroy, AfterViewInit {
+  private map!: L.Map;
+  private tileLayer!: L.TileLayer;
+  private routeGlow?: L.Layer;
+  private routeLine?: L.Layer;
+  private arrowLayer?: L.Layer;
+  private markers: L.Marker[] = [];
+  private sub?: Subscription;
+  private destroyed = false;
+  routeData: RouteAssignedResponse | null = null;
+  isLoading = false;
+  error: string | null = null;
+
+  constructor(
+    private router: Router,
+    private routeState: RouteState,
+    private orsService: OrsService,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngOnInit() {
+    this.sub = this.routeState.selectedRoute$.subscribe((route: RouteAssignedResponse | null) => {
+      this.routeData = route;
+      if (route && this.map) {
+        this.loadAndShowRoute(route);
+      } else if (!route) {
+        this.error = 'No hay ruta seleccionada';
+      }
+      this.cdr.detectChanges();
+    });
+  }
+
+  ngAfterViewInit() {
+    this.initMap();
+    if (this.routeData) {
+      this.loadAndShowRoute(this.routeData);
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroyed = true;
+    this.sub?.unsubscribe();
+    this.clearRoute();
+    if (this.map) {
+      this.map.remove();
+    }
+  }
+
+  private initMap() {
+    this.map = L.map('map').setView([18.4861, -69.9312], 13);
+
+    this.tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '© OpenStreetMap contributors'
+    }).addTo(this.map);
+  }
+
+  private async loadAndShowRoute(route: RouteAssignedResponse) {
+    this.clearRoute();
+    this.isLoading = true;
+    this.error = null;
+    this.cdr.detectChanges();
+
+    const json = route.json;
+    const origin: [number, number] = [Number(json.longitud_usuario), Number(json.latitud_usuario)];
+    const destination: [number, number] = [Number(json.longitud_pdv), Number(json.latitud_pdv)];
+
+    this.centerMapOnPoints(origin, destination);
+
+    try {
+      const geojson = await this.orsService.processPairs(
+        [{ pdv_id: json.pdv_id, origin, destination }],
+        1,
+        true
+      );
+
+      if (this.destroyed) return;
+
+      if (geojson[0] && !geojson[0].error) {
+        this.showRouteOnMap(geojson[0], origin, destination, json);
+      } else {
+        this.showFallbackRoute(origin, destination, json);
+      }
+    } catch {
+      this.showFallbackRoute(origin, destination, json);
+    } finally {
+      this.isLoading = false;
+      this.cdr.detectChanges();
+    }
+  }
+
+  private centerMapOnPoints(origin: [number, number], destination: [number, number]) {
+    const bounds = L.latLngBounds([
+      L.latLng(origin[1], origin[0]),
+      L.latLng(destination[1], destination[0])
+    ]);
+    this.map.fitBounds(bounds.pad(0.3));
+  }
+
+  private extractCoords(geojson: any): L.LatLngExpression[] {
+    if (geojson.type === 'FeatureCollection' && geojson.features?.length) {
+      return geojson.features[0].geometry.coordinates.map(
+        (c: number[]) => [c[1], c[0]] as L.LatLngExpression
+      );
+    }
+    if (geojson.type === 'LineString') {
+      return geojson.coordinates.map(
+        (c: number[]) => [c[1], c[0]] as L.LatLngExpression
+      );
+    }
+    return [];
+  }
+
+  private showRouteOnMap(geojson: any, origin: [number, number], destination: [number, number], json: any) {
+    const coords = this.extractCoords(geojson);
+    if (!coords.length) {
+      this.showFallbackRoute(origin, destination, json);
+      return;
+    }
+
+    const distance = geojson.features?.[0]?.properties?.summary?.distance
+      ? (geojson.features[0].properties.summary.distance / 1000).toFixed(2) : 'N/A';
+    const duration = geojson.features?.[0]?.properties?.summary?.duration
+      ? (geojson.features[0].properties.summary.duration / 60).toFixed(0) : 'N/A';
+
+    this.routeGlow = L.polyline(coords, {
+      color: '#6CC24A',
+      weight: 12,
+      opacity: 0.35,
+      lineCap: 'round',
+      lineJoin: 'round'
+    }).addTo(this.map);
+
+    this.routeLine = L.polyline(coords, {
+      color: '#6CC24A',
+      weight: 6,
+      opacity: 0.95,
+      lineCap: 'round',
+      lineJoin: 'round'
+    }).addTo(this.map);
+
+    this.arrowLayer = L.polyline(coords, {
+      color: '#ffffff',
+      weight: 4,
+      opacity: 0.7,
+      dashArray: '2, 16',
+      dashOffset: '0',
+      lineCap: 'round'
+    }).addTo(this.map);
+
+    this.routeLine.bindPopup(
+      `<strong style="color:#4F758B">${json.nombre_usuario} → ${json.nombre_pdv}</strong><br>Distancia: ${distance} km<br>Duración: ${duration} min`
+    );
+
+    this.addMarkers(origin, destination, json, distance, duration);
+    const group = new L.FeatureGroup([
+      ...(this.routeGlow ? [this.routeGlow] : []),
+      ...(this.routeLine ? [this.routeLine] : []),
+      ...this.markers
+    ]);
+    this.map.fitBounds(group.getBounds().pad(0.1));
+  }
+
+  private showFallbackRoute(origin: [number, number], destination: [number, number], json: any) {
+    this.routeLine = L.polyline(
+      [[origin[1], origin[0]], [destination[1], destination[0]]],
+      { color: '#FF6A13', weight: 5, dashArray: '12, 10', opacity: 0.9 }
+    ).addTo(this.map);
+
+    this.addMarkers(origin, destination, json, 'N/A', 'N/A');
+    const group = new L.FeatureGroup([this.routeLine, ...this.markers]);
+    this.map.fitBounds(group.getBounds().pad(0.1));
+  }
+
+  private addMarkers(
+    origin: [number, number],
+    destination: [number, number],
+    json: any,
+    distance: string,
+    duration: string
+  ) {
+    const startIcon = L.divIcon({
+      className: 'custom-marker marker-start',
+      html: '<div class="marker-inner">A</div>',
+      iconSize: [30, 30],
+      iconAnchor: [15, 15],
+      popupAnchor: [0, -18]
+    });
+
+    const endIcon = L.divIcon({
+      className: 'custom-marker marker-end',
+      html: '<div class="marker-inner">B</div>',
+      iconSize: [30, 30],
+      iconAnchor: [15, 15],
+      popupAnchor: [0, -18]
+    });
+
+    this.markers.push(
+      L.marker([origin[1], origin[0]], { icon: startIcon })
+        .addTo(this.map)
+        .bindPopup(`<strong>Origen:</strong> ${json.nombre_usuario}`),
+      L.marker([destination[1], destination[0]], { icon: endIcon })
+        .addTo(this.map)
+        .bindPopup(`<strong>Destino:</strong> ${json.nombre_pdv}<br><strong>Distancia:</strong> ${distance} km<br><strong>Duración:</strong> ${duration} min`)
+    );
+  }
+
+  private clearRoute() {
+    if (this.routeGlow) {
+      this.map.removeLayer(this.routeGlow);
+      this.routeGlow = undefined;
+    }
+    if (this.routeLine) {
+      this.map.removeLayer(this.routeLine);
+      this.routeLine = undefined;
+    }
+    if (this.arrowLayer) {
+      this.map.removeLayer(this.arrowLayer);
+      this.arrowLayer = undefined;
+    }
+    this.markers.forEach(m => this.map.removeLayer(m));
+    this.markers = [];
+  }
+
+  goBack() {
+    this.router.navigate(['/home']);
+  }
+}