104 prowadzenie do celu (#105)

* REQUEST DENIED PROBLEM

* Point Trace

* Marker Click and Button Trace

* Marker Click and Button Trace2

* Changes + Route refreshing

* Changes+

src/app/map-location/map-location-list/map-location-list.component.css

@@ -17,6 +17,9 @@
   grid-template-areas:
     "photo-wrap audio-list"
     "info-wrap audio-list";
+
+
+
 }
 
 .photo-wrap {
@@ -109,3 +112,5 @@
   }
 
 }
+
+

src/app/map-location/map-location-modal/map-location-modal.component.html

@@ -20,5 +20,8 @@
       </p>
     </div>
   </div>
+  <div  class="route-button-container">
+    <button (click)="onCalculateRoute()">Trace</button>
+  </div>
   <button (click)="tmpOnClick()">snackbar</button>
 </div>

src/app/map-location/map-location-modal/map-location-modal.component.ts

@@ -9,6 +9,7 @@ import {ScreenSizeService} from "../../shared/screen-size.service";
 import {maxPageSize} from "../../shared/http.config";
 import {SnackbarService} from "../../shared/snackbar/snackbar.service";
 import {SnackbarType} from "../../shared/snackbar/snackbar-type";
+import {MapService} from "../../shared/map/map.service";
 
 @Component({
   selector: 'app-modal',
@@ -34,6 +35,7 @@ export class MapLocationModalComponent implements OnInit {
   constructor(
               private mapLocationService: MapLocationService,
               private audioService: AudioService,
+              private mapService: MapService,
               private sanitizer: DomSanitizer,
               private screenSizeService: ScreenSizeService,
               private snackbarService: SnackbarService) {
@@ -100,4 +102,15 @@ export class MapLocationModalComponent implements OnInit {
   tmpOnClick() {
     this.snackbarService.displaySnackbar("This is my message to the world", SnackbarType.DARK);
   }
+
+  onCalculateRoute() {
+
+    const selectedLocation: MapLocation = {
+      name: this.mapLocation.name,
+      id: this.mapLocation.id,
+      coordinates: this.mapLocation.coordinates
+    };
+
+    this.mapService.mapLocationDetailsEventEmitter.emit(selectedLocation);
+  }
 }

src/app/shared/map/map.component.html

@@ -20,6 +20,8 @@
 
     </app-map-location-info-window>
   </map-info-window>
+
+  <map-directions-renderer></map-directions-renderer>
 </google-map>
 
 <!--

src/app/shared/map/map.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, OnDestroy, ViewChild, HostListener} from '@angular/core';
+import {Component, OnInit, OnDestroy, ViewChild, HostListener, AfterViewInit} from '@angular/core';
 import { GoogleMapsModule, MapInfoWindow, MapMarker, MapDirectionsRenderer } from "@angular/google-maps";
 import { CommonModule } from "@angular/common";
 import { MapService } from "./map.service";
@@ -25,7 +25,7 @@ import {ScreenSizeService} from "../screen-size.service";
   templateUrl: './map.component.html',
   styleUrls: ['./map.component.css']
 })
-export class MapComponent implements OnInit, OnDestroy {
+export class MapComponent implements OnInit,AfterViewInit ,OnDestroy {
 
   cursorLatLng: google.maps.LatLngLiteral | undefined;
   center: google.maps.LatLngLiteral = {
@@ -55,14 +55,22 @@ export class MapComponent implements OnInit, OnDestroy {
   userMarker: google.maps.Marker | undefined;
   locationTrackingInterval: any;
 
+  directionsService: google.maps.DirectionsService;
+  directionsRenderer: google.maps.DirectionsRenderer;
+
+  routeUpdateInterval: any;
+  selectedDestination: google.maps.LatLngLiteral;
+
+
   constructor(
     private sidePanelService: SidePanelService,
     private mapService: MapService,
     private mapLocationService: MapLocationService,
     private router: Router,
     private screenSizeService: ScreenSizeService
   ) {
-
+    this.directionsService = new google.maps.DirectionsService();
+    this.directionsRenderer = new google.maps.DirectionsRenderer();
   }
 
   ngOnInit(): void {
@@ -83,6 +91,14 @@ export class MapComponent implements OnInit, OnDestroy {
       this.handleRouteSelected(mapLocations);
     });
 
+    this.mapService.mapLocationDetailsEventEmitter.subscribe(mapLocation =>{
+      let trace: google.maps.LatLngLiteral = {
+        lat: mapLocation.coordinates.coordinates[0],
+        lng: mapLocation.coordinates.coordinates[1]
+      };
+      this.calculateRoute(trace)
+    })
+
     this.mapService.closeInfoWindow.subscribe(()=> {
       if(this.infoWindow != undefined) {
         this.infoWindow.close();
@@ -108,14 +124,84 @@ export class MapComponent implements OnInit, OnDestroy {
 
   }
 
+
+  ngAfterViewInit(): void {
+    if (!this.map && !this.map.googleMap) {
+      console.error('Map is not ready,check the initialization');
+      return;
+    }
+
+    this.directionsRenderer.setMap(this.map.googleMap);
+  }
+
+
+
+
+
+
+  calculateRoute(destination: google.maps.LatLngLiteral) {
+    if (this.directionsService && this.map && this.map.googleMap) {
+      const start = { lat: this.userMarker.getPosition().lat(), lng: this.userMarker.getPosition().lng() };
+
+      this.directionsService.route(
+        {
+          origin: start,
+          destination: destination,
+          travelMode: google.maps.TravelMode.WALKING,
+        },
+        (response, status) => {
+          if (status === google.maps.DirectionsStatus.OK) {
+            this.directionsRenderer.setOptions({
+              suppressMarkers: true,
+              preserveViewport: true,   //keeping actual user zoom on map
+              polylineOptions: {
+                strokeColor: "#0000FF",
+                strokeOpacity: 0.5,
+                strokeWeight: 4
+              }
+            });
+            this.directionsRenderer.setDirections(response)
+
+
+            this.startRouteUpdateInterval(destination);
+          } else {
+            console.error('Trace error: ' + status);
+          }
+        }
+      );
+    }
+  }
+
+  updateRoute() {
+    if (!this.selectedDestination) return;
+    console.log("Trace update");
+    this.calculateRoute(this.selectedDestination);
+  }
+
+  startRouteUpdateInterval(destination: google.maps.LatLngLiteral) {
+    this.clearRouteUpdateInterval();
+
+    this.selectedDestination = destination;
+    this.routeUpdateInterval = setInterval(() => {
+      this.updateRoute();
+    }, 15000); // 15 sec actualization
+  }
+
+  clearRouteUpdateInterval() {
+    if (this.routeUpdateInterval) {
+      clearInterval(this.routeUpdateInterval);
+      this.routeUpdateInterval = null;
+    }
+  }
+
   ngOnDestroy(): void {
     this.stopLocationTracking();
   }
 
   startLocationTracking() {
     this.locationTrackingInterval = setInterval(() => {
       this.getCurrentLocation(false); // Update location without centering
-    }, 5000); // Aktualizacja co 5 sekund
+    }, 5000); // 5 sec actualization
   }
 
   stopLocationTracking() {
@@ -213,6 +299,8 @@ export class MapComponent implements OnInit, OnDestroy {
 
 
     }
+
+
   }
 
   //helpers

src/app/shared/map/map.service.ts

@@ -8,4 +8,6 @@ export class MapService  {
   centerOnMapLocation = new EventEmitter<MapLocation>();
   mapLocationDetailsEventEmitter = new EventEmitter<MapLocation>();
   closeInfoWindow = new EventEmitter();
+
+
 }