diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index f77720b..14d17d8 100644 --- a/src/app/app-routing.module.ts +++ b/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], diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index c18473e..2b677fa 100644 --- a/src/app/detail/detail.component.html +++ b/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> diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index 47f77ed..524716a 100755 --- a/src/app/detail/detail.component.ts +++ b/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); - }); - } } diff --git a/src/app/interface/cord.ts b/src/app/interface/cord.ts new file mode 100644 index 0000000..e072952 --- /dev/null +++ b/src/app/interface/cord.ts @@ -0,0 +1,4 @@ +export interface Cord { + lat: number; + lon: number; +} diff --git a/src/app/list/list.component.html b/src/app/list/list.component.html index 7c1fe15..084bacd 100644 --- a/src/app/list/list.component.html +++ b/src/app/list/list.component.html @@ -1 +1,22 @@ -

list works!

+
+ +
+ +
+

+ {{location.location}} +

+
+

+ {{waypoinst.name}} +

+ + +
+ +
+ + +

+ +

diff --git a/src/app/list/list.component.ts b/src/app/list/list.component.ts index 0b828ae..0f7cebe 100644 --- a/src/app/list/list.component.ts +++ b/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[] | undefined; + location: Partial | 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; + } + } + } + } + } diff --git a/src/app/service/calculateDistance.service.ts b/src/app/service/calculateDistance.service.ts deleted file mode 100644 index c91c0d5..0000000 --- a/src/app/service/calculateDistance.service.ts +++ /dev/null @@ -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) - } - -} diff --git a/src/app/service/position.service.ts b/src/app/service/position.service.ts new file mode 100644 index 0000000..4b974bd --- /dev/null +++ b/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.'); + } + }); + } + +} diff --git a/src/app/service/readjson.service.ts b/src/app/service/readjson.service.ts index 4007163..75d9d9a 100644 --- a/src/app/service/readjson.service.ts +++ b/src/app/service/readjson.service.ts @@ -10,10 +10,10 @@ import {BehaviorSubject, map, Observable, tap} from "rxjs"; export class ReadjsonService{ private locations: BehaviorSubject = new BehaviorSubject([]); - constructor(private http: HttpClient) { this.http.get('assets/data.json').subscribe(data => { this.locations.next(data) + console.log("data loaded", data) }); } getLocations(): Observable[]> { diff --git a/src/styles.css b/src/styles.css index 2dfd443..7dca88b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -3,3 +3,6 @@ @tailwind components; @tailwind utilities; +body{ + overflow-y: hidden; +}