Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	src/app/detail/detail.component.ts

src/app/app-routing.module.ts

@@ -8,8 +8,8 @@ import {ListComponent} from "./list/list.component";
 @NgModule({
   imports: [RouterModule.forRoot([
     {path: 'home', component: HomeComponent},
-    {path: ':location', component: ListComponent},
-    {path: ':location/detail/:id', component: DetailComponent},
+    {path: 'location/:location', component: ListComponent},
+    {path: 'location/:location/:id', component: DetailComponent},
     {path: '**', redirectTo: 'home'}
   ])],
   exports: [RouterModule],

src/app/detail/detail.component.html

@@ -8,7 +8,7 @@
       height="300"
       frameborder="0" style="border:0"
       referrerpolicy="no-referrer-when-downgrade"
-      [src]='embed | safe'
+      [src]='embed | safe '
       allowfullscreen>
     </iframe>
   </div>

src/app/detail/detail.component.ts

@@ -1,81 +1,53 @@
-import {Location} from "@angular/common";
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
-import {CalculateDistanceService} from "../service/calculateDistance.service";
-
-import * as QRCode from 'qrcode';
+import {positionService} from "../service/position.service";
 
 @Component({
   selector: 'app-detail',
   templateUrl: './detail.component.html',
   styleUrls: ['./detail.component.css']
 })
-
 export class DetailComponent implements OnInit {
-
   private location: string | undefined;
   private id: number | undefined;
 
-  constructor(private route: ActivatedRoute, private calculateDistanceService: CalculateDistanceService) {}
+  test = {
+    name: 'SPAI',
+    cordinates: '46.15187077044123,8.799829438699243',
+    lat: 46.15187077044123,
+    lng: 8.799829438699243,
+    description: "Lorem ipsum"
+  }
 
-  ngOnInit(): void {
-    // Ascoltare i parametri passati nell'url
+  embed = `https://www.google.com/maps/embed/v1/place?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&q=${this.test.lat},${this.test.lng}`
+
+  cord: any;
+
+  showNav = true;
+  distance: number | undefined;
+  displayedDistance = 0;
+
+  constructor(private route: ActivatedRoute , private positionService: positionService) {}
+
+  async ngOnInit(){
     this.route.params.subscribe(params => {
       this.location = params['location'];
       this.id = params['id'];
     })
     console.log(this.location);
     console.log(this.id);
-    // Recupera la posizione dell'utente
-    this.getLocation();
+    console.log(this.embed);
+    this.cord = await this.positionService.getLocation();
+    this.checkDistanceTimer();
   }
 
-  // Definizione della destinazione del viaggio (sostituire con dati reali)
-  test = {
-    name: 'SPAI',
-    cordinates: '46.175248719308,8.79395345868349',
-    lat: 46.175248719308,
-    lng: 8.79395345868349,
-    description: "Lorem ipsum"
-  }
-
-  cord = {
-    lat: 0,
-    lng: 0
-  }
-
-  showNav = false;
-  distance: number | undefined;
-  displayedDistance = 0;
-  embed: string = ``;
-
-  // Recupera la posizione dell'utente
-  getLocation() {
-    console.log(this.embed)
-    console.log("get location");
-    if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition((position) => {
-        this.showNav = true;
-        this.cord.lat = position.coords.latitude;
-        this.cord.lng = position.coords.longitude;
-        console.log(this.cord);
-        this.embed = `https://www.google.com/maps/embed/v1/directions?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&origin=${this.cord.lat},${this.cord.lng}&destination=${this.test.lat},${this.test.lng}&mode=walking`
-        this.checkDistanceTimer();
-      })
-    } else {
-      alert("Geolocation non è supportato dal tuo browser.");
-    }
-  }
-
-  // Verifica la distanza tra la posizione dell'utente e la destinazione
   checkDistanceTimer() {
-    let lat1 = this.cord.lat;
-    let lon1 = this.cord.lng;
-    let lat2 = this.test.lat;
-    let lon2 = this.test.lng;
+    //set interval
+    let lat2 = this.test.cordinates.split(",")[0];
+    let lon2 = this.test.cordinates.split(",")[1];
     let intervalID = setInterval(() => {
       if (this.showNav) {
-        this.distance = this.calculateDistanceService.getDistanceBetweenCoordinates(lat1, lon1, +lat2, +lon2);
+        this.distance = this.positionService.getDistanceBetweenCoordinates(this.cord.lat, this.cord.lat, +lat2, +lon2);
         console.log(this.distance);
         if (this.distance == 0) {
           this.showNav = false;
@@ -90,13 +62,4 @@ export class DetailComponent implements OnInit {
       }
     }, 1000);
   }
-
-  generateQRCode(): void {
-    alert("QR Code generato")
-    // Generate a QR code of the current URL and set it as the QR code image
-    QRCode.toDataURL("", {errorCorrectionLevel: 'H'}, (err, url) => {
-      //this.qrCodeImage = url;
-      console.log(url);
-    });
-  }
 }

src/app/interface/cord.ts

@@ -0,0 +1,4 @@
+export interface Cord {
+  lat: number;
+  lon: number;
+}

src/app/list/list.component.html

@@ -1 +1,22 @@
-<p>list works!</p>
+<div *ngIf="isNear">
+
+</div>
+
+<div *ngIf="!isNear && location">
+  <h1>
+    {{location.location}}
+  </h1>
+  <div *ngFor="let waypoinst of location.waypoints">
+    <h3>
+      {{waypoinst.name}}
+    </h3>
+
+
+  </div>
+
+</div>
+
+
+<h1></h1>
+
+<h3></h3>

src/app/list/list.component.ts

@@ -1,4 +1,8 @@
 import {Component, OnInit} from '@angular/core';
+import {Locations} from "../interface/data";
+import {ReadjsonService} from "../service/readjson.service";
+import {Observable} from "rxjs";
+import {ActivatedRoute} from "@angular/router";
 
 @Component({
   selector: 'app-list',
@@ -6,8 +10,45 @@ import {Component, OnInit} from '@angular/core';
   styleUrls: ['./list.component.css']
 })
 export class ListComponent implements OnInit {
+  private locationParams: string | undefined
+  locations: Partial<Locations>[] | undefined;
+  location: Partial<Locations> | undefined;
 
+  isNear: boolean = true;
+
+
+  constructor(private route: ActivatedRoute ,private readjsonService: ReadjsonService) {}
 
   ngOnInit(): void {
+    this.route.params.subscribe(params => {
+      this.locationParams = params['location'];
+    });
+
+    this.readjsonService.getLocations().subscribe(locations => {
+      this.locations = locations;
+      this.checkDataPopulated();
+    });
+
+    if (this.locationParams != null) {
+      this.readjsonService.getLocation(this.locationParams).subscribe(location => {
+        this.location = location;
+        this.checkDataPopulated();
+      });
+    }
   }
+
+  private checkDataPopulated(): void {
+    if (this.locations && this.location) {
+      console.log("Dati popolati correttamente:", this.locations, this.location);
+      for (let i = 0; i < this.locations.length; i++) {
+        if (this.locations[i].location === this.locationParams) {
+          this.location = this.locations[i];
+          console.log("Location trovata:", this.location);
+          this.isNear= false;
+          break;
+        }
+      }
+    }
+  }
+
 }

src/app/service/calculateDistance.service.ts

@@ -1,25 +0,0 @@
-import {Injectable} from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CalculateDistanceService{
-  getDistanceBetweenCoordinates(lat1: number, lon1: number, lat2: number, lon2: number) {
-    const earthRadius = 6371; // Radius of the earth in km
-    const dLat = this.deg2rad(lat2 - lat1);  // deg2rad below
-    const dLon = this.deg2rad(lon2 - lon1);
-    const a =
-      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
-      Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
-      Math.sin(dLon / 2) * Math.sin(dLon / 2)
-    ;
-    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-    // Distance in km
-    return earthRadius * c;
-  }
-
-  deg2rad(deg: number) {
-    return deg * (Math.PI / 180)
-  }
-
-}

src/app/service/position.service.ts

@@ -0,0 +1,52 @@
+import {Injectable} from '@angular/core';
+import{Cord} from "../interface/cord";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class positionService{
+  cord: Cord = { lat: 0, lon: 0 };
+
+  getDistanceBetweenCoordinates(lat1: number | undefined, lon1: number | undefined, lat2: number, lon2: number) {
+    if (lat1 === undefined || lon1 === undefined) {
+      console.log('lat1 or lon1 is undefined')
+      return 0;
+    }else{
+      const earthRadius = 6371; // Radius of the earth in km
+      const dLat = this.deg2rad(lat2 - lat1);  // deg2rad below
+      const dLon = this.deg2rad(lon2 - lon1);
+      const a =
+        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+        Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
+        Math.sin(dLon / 2) * Math.sin(dLon / 2)
+      ;
+      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+      // Distance in km
+      return earthRadius * c;
+    }
+  }
+
+  deg2rad(deg: number) {
+    return deg * (Math.PI / 180)
+  }
+
+  async getLocation() {
+    console.log('get location');
+    return new Promise((resolve, reject) => {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition((position) => {
+          const lat = position.coords.latitude;
+          const lon = position.coords.longitude;
+          this.cord = { lat, lon };
+          console.log(this.cord);
+          resolve(this.cord);
+        }, (error) => {
+          reject(error);
+        });
+      } else {
+        reject('Geolocation is not supported by this browser.');
+      }
+    });
+  }
+
+}

src/app/service/readjson.service.ts

@@ -10,10 +10,10 @@ import {BehaviorSubject, map, Observable, tap} from "rxjs";
 export class ReadjsonService{
   private locations: BehaviorSubject<Locations[]> = new BehaviorSubject<Locations[]>([]);
 
-
   constructor(private http: HttpClient) {
     this.http.get<Locations[]>('assets/data.json').subscribe(data => {
       this.locations.next(data)
+      console.log("data loaded", data)
     });
   }
   getLocations(): Observable<Partial<Locations>[]> {

src/styles.css

@@ -3,3 +3,6 @@
 @tailwind components;
 @tailwind utilities;
 
+body{
+  overflow-y: hidden;
+}