list component changes

src/app/list/list.component.html

@@ -1,21 +1,25 @@
 <div *ngIf="isNear">
-
+  <h1>
+    Posizione {{locationParams}} non trovata
+  </h1>
+  <div *ngFor="let locations of locations, let i = index">
+    <h3>
+      <a href="location/{{locations.location}}">{{locations.location}}</a>
+    </h3>
+    <h4>Distance: {{distance[i]}}</h4>
+  </div>
 </div>
 
-<div *ngIf="!isNear && location">
+<div *ngIf="!isNear && location && location.waypoints">
   <h1>
     {{location.location}}
   </h1>
-  <div *ngFor="let waypoinst of location.waypoints">
+  {{location.waypoints[0].name}}
+  <div *ngFor="let waypoinst of location.waypoints, let i = index">
     <h3>
-      {{waypoinst.name}}
+      <a class="link link-primary" href="location/{{location.location}}/{{waypoinst.id}}"> {{waypoinst.name}}</a>
     </h3>
-    <h4>Distance: {{getDistance(waypoinst.lat, location.lon)}}</h4>
+    <h4>Distance: {{distance[i]}}</h4>
   </div>
 
 </div>
-
-
-<h1></h1>
-
-<h3></h3>

src/app/list/list.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, SimpleChanges, OnChanges} from '@angular/core';
 import {Locations} from "../interface/data";
 import {ReadjsonService} from "../service/readjson.service";
 import {ActivatedRoute} from "@angular/router";
@@ -9,8 +9,8 @@ import {positionService} from "../service/position.service";
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.css']
 })
-export class ListComponent implements OnInit {
-  private locationParams: string | undefined
+export class ListComponent implements OnInit, OnChanges {
+  locationParams: string | undefined
   locations: Partial<Locations>[] | undefined;
   location: Partial<Locations> | undefined;
 
@@ -18,7 +18,8 @@ export class ListComponent implements OnInit {
 
   isNear: boolean = true;
 
-  distance: number = 0;
+  distance: number[] = [];
+
 
   constructor(private route: ActivatedRoute, private readjsonService: ReadjsonService, private positionService: positionService) {
   }
@@ -30,15 +31,28 @@ export class ListComponent implements OnInit {
     this.readjsonService.getLocations().subscribe(locations => {
       this.locations = locations;
       if (this.locationParams != null) {
-        this.readjsonService.getLocation(this.locationParams).subscribe(location => {
+        this.readjsonService.getLocation(this.locationParams ?? "").subscribe(async location => {
           this.location = location;
-          this.checkDataPopulated();
+          this.readjsonService.getWaypoints(this.locationParams ?? "").subscribe(waypoints => {
+            if (this.location) {
+              this.location.waypoints = waypoints ?? []
+            }
+          });
+          await this.checkDataPopulated();
         });
       }
     });
-    this.setDistance();
+
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['positionCord'] && (changes['positionCord'])) {
+      console.log("onChanges")
+      this.setDistance();
+    }
+  }
+
+
   private checkDataPopulated(): void {
     if (this.locations && this.location) {
       console.log("Dati popolati correttamente:", this.locations, this.location);
@@ -47,6 +61,7 @@ export class ListComponent implements OnInit {
           this.location = this.locations[i];
           console.log("Location trovata:", this.location);
           this.isNear = false;
+          this.setDistance();
           break;
         }
       }
@@ -54,10 +69,20 @@ export class ListComponent implements OnInit {
   }
 
   private setDistance(): void {
-    if (this.location && this.isNear) {
-      this.distance = this.positionService.getDistanceBetweenCoordinates(this.location.lat, this.location.lon, this.positionCord.lat, this.positionCord.lon);
-      console.log("Distanza: " + this.distance + " km");
-    }
+
+    const intervalId = setInterval(() => {
+      if (this.location) {
+        if (this.location?.waypoints) {
+          console.log("setDistance"+this.location);
+          for (let i = 0; i < this.location.waypoints.length; i++) {
+            console.log("for")
+            this.distance.push(this.positionService.getDistanceBetweenCoordinates(this.location.waypoints[i].lat, this.location?.lon, this.positionCord.lat, this.positionCord.lon));
+          }
+          clearInterval(intervalId);
+        }
+        console.log("ciao" + this.distance[0])
+      }}, 1000);
+    //da aggiungere il cambiamento in tutti i punti, forse fatto ma sono stanco
   }
 
   getDistance(latLocation: number | undefined, lonLocation: number | undefined): any {
@@ -71,4 +96,5 @@ export class ListComponent implements OnInit {
     }, 1000);
   }
 
+
 }

src/app/service/position.service.ts

@@ -46,7 +46,7 @@ export class positionService{
     return deg * (Math.PI / 180)
   }
 
-  async getLocation() {
+  async getLocation(): Promise<any> {
     console.log('get location');
     return new Promise((resolve, reject) => {
       if (navigator.geolocation) {
@@ -65,4 +65,5 @@ export class positionService{
     });
   }
 
+
 }

src/app/service/readjson.service.ts

@@ -40,17 +40,32 @@ export class ReadjsonService{
   }
 
 
-  getWaypoints(location: string, id: number): Observable<waypoint[]> {
+  getWaypoint(location: string, id: number): Observable<waypoint[]> {
     return this.locations.pipe(
       map((locations) => {
         const foundLocation: Locations | undefined = locations.find((loc: Locations) => loc.location === location);
         if (foundLocation?.waypoints) {
           return foundLocation ? foundLocation.waypoints.filter((way: waypoint) => way.id === id) : [];
         } else {
-          return [];
+          return []
         }
       }),
       tap(data => console.log("data requested", data))
     );
   }
+
+  getWaypoints(location: string): Observable<waypoint[]> {
+    return this.locations.pipe(
+      map((locations) => {
+        const foundLocation: Locations | undefined = locations.find((loc: Locations) => loc.location === location);
+        if (foundLocation?.waypoints) {
+          return foundLocation ? foundLocation.waypoints : [];
+        } else {
+          return []
+        }
+      }),
+      tap(data => console.log("data requested", data))
+    );
+  }
+
 }

src/app/service/translate.service.ts

@@ -5,9 +5,7 @@ import {Injectable} from "@angular/core";
   providedIn: 'root'
 })
 export class TranslateService {
-  constructor(private deepLService: DeepLService) {
-
-  }
+  constructor(private deepLService: DeepLService) {}
 
   async getData(input: string, lang: string): Promise<string> {
     const response = await this.deepLService.translate(input, lang).toPromise();