From 8563bce13507d8913e3d7f49e1ef77f0b6d0b0bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joe=20Ku=CC=88ng?= Date: Thu, 6 Apr 2023 14:28:53 +0200 Subject: [PATCH 1/3] cloud --- src/app/home/home.component.html | 2 +- src/app/list/list.component.html | 23 +++++++++++++++- src/app/list/list.component.ts | 41 +++++++++++++++++++++++++++++ src/app/service/readjson.service.ts | 19 ++++++------- 4 files changed, 74 insertions(+), 11 deletions(-) diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 3e9a5a7..5cc78d5 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -16,7 +16,7 @@
  • - {{luogo.nome}} + {{luogo.location}}
  • 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/readjson.service.ts b/src/app/service/readjson.service.ts index f437a94..ddd7e03 100644 --- a/src/app/service/readjson.service.ts +++ b/src/app/service/readjson.service.ts @@ -39,14 +39,15 @@ export class ReadjsonService{ ); } - getWaypoints(location: string, id: number): Observable { - return this.locations.pipe( - map((locations) => { - const foundLocation: Locations | undefined = locations.find((loc: Locations) => loc.location === location); - return foundLocation ? foundLocation.waypoints.filter((way: waypoint) => way.id === id) : []; - }), - tap(data => console.log("data requested", data)) - ); - } + +// getWaypoints(location: string, id: number): Observable { +// return this.locations.pipe( +// map((locations) => { +// const foundLocation: Locations | undefined = locations.find((loc: Locations) => loc.location === location); +// return foundLocation ? foundLocation.waypoints.filter((way: waypoint) => way.id === id) : []; +// }), +// tap(data => console.log("data requested", data)) +// ); +// } } From a8fa9116a784c26f801ef9eab980baba1b9716b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joe=20Ku=CC=88ng?= Date: Thu, 6 Apr 2023 14:31:14 +0200 Subject: [PATCH 2/3] routing changes --- src/app/app-routing.module.ts | 4 ++-- src/styles.css | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) 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/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; +} From 360b12d1c465ec6e4f990eeb5a50e5a4a9d3e59d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joe=20Ku=CC=88ng?= Date: Tue, 11 Apr 2023 22:41:44 +0200 Subject: [PATCH 3/3] position service --- src/app/detail/detail.component.html | 2 +- src/app/detail/detail.component.ts | 52 ++++++-------------- src/app/interface/cord.ts | 4 ++ src/app/service/calculateDistance.service.ts | 25 ---------- src/app/service/position.service.ts | 52 ++++++++++++++++++++ 5 files changed, 72 insertions(+), 63 deletions(-) create mode 100644 src/app/interface/cord.ts delete mode 100644 src/app/service/calculateDistance.service.ts create mode 100644 src/app/service/position.service.ts diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index 7840198..6498d04 100644 --- a/src/app/detail/detail.component.html +++ b/src/app/detail/detail.component.html @@ -10,7 +10,7 @@ height="250" 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 cc3e753..524716a 100755 --- a/src/app/detail/detail.component.ts +++ b/src/app/detail/detail.component.ts @@ -1,6 +1,6 @@ import {Component, OnInit} from '@angular/core'; import {ActivatedRoute} from "@angular/router"; -import {CalculateDistanceService} from "../service/calculateDistance.service"; +import {positionService} from "../service/position.service"; @Component({ selector: 'app-detail', @@ -11,19 +11,6 @@ export class DetailComponent implements OnInit { private location: string | undefined; private id: number | undefined; - constructor(private route: ActivatedRoute , private calculateDistanceService: CalculateDistanceService) { - } - - ngOnInit(): void { - this.route.params.subscribe(params => { - this.location = params['location']; - this.id = params['id']; - }) - console.log(this.location); - console.log(this.id); - this.getLocation(); - } - test = { name: 'SPAI', cordinates: '46.15187077044123,8.799829438699243', @@ -34,45 +21,38 @@ export class DetailComponent implements OnInit { embed = `https://www.google.com/maps/embed/v1/place?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&q=${this.test.lat},${this.test.lng}` - cord = { - lat: 0, - lng: 0 - } + cord: any; showNav = true; distance: number | undefined; displayedDistance = 0; - getLocation() { - console.log(this.embed) - console.log("get location"); - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition((position) => { - this.cord.lat = position.coords.latitude; - this.cord.lng = position.coords.longitude; - console.log(this.cord); - this.checkDistanceTimer(); - }) - } else { - alert("Geolocation is not supported by this browser."); - } + 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); + console.log(this.embed); + this.cord = await this.positionService.getLocation(); + this.checkDistanceTimer(); } checkDistanceTimer() { //set interval - let lat1 = this.cord.lat; - let lon1 = this.cord.lng; 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; this.displayedDistance = Math.round(this.distance * 100) / 100; } - if (this.distance < 0.05) { this.showNav = false; clearInterval(intervalID); @@ -82,6 +62,4 @@ export class DetailComponent implements OnInit { } }, 1000); } - - /// } 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/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.'); + } + }); + } + +}