From 112e5817f46c51f0248f816818bfcc4326e669ed Mon Sep 17 00:00:00 2001 From: tito Date: Tue, 7 Mar 2023 09:20:59 +0100 Subject: [PATCH 1/5] creazione pagina detail --- src/app/detail/detail.component.css | 5 +++++ src/app/detail/detail.component.html | 5 ++--- src/app/detail/detail.component.ts | 10 ++++++++-- src/styles.css | 1 + 4 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/app/detail/detail.component.css b/src/app/detail/detail.component.css index e69de29..8c4da45 100644 --- a/src/app/detail/detail.component.css +++ b/src/app/detail/detail.component.css @@ -0,0 +1,5 @@ +.titolo { + font-size: 1.5em; + font-weight: bold; + margin-bottom: 0.5em; +} diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index 167e691..be1e21f 100644 --- a/src/app/detail/detail.component.html +++ b/src/app/detail/detail.component.html @@ -1,8 +1,7 @@
-

{{test.name}}

+

{{test.name}}

{{test.description}}

-

lat:{{cord.lat}}, lang:{{cord.lng}}

-

distanza:{{distance}}

+

Distanza: {{distance}}

diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index cef9c04..13d87cd 100755 --- a/src/app/detail/detail.component.ts +++ b/src/app/detail/detail.component.ts @@ -13,7 +13,7 @@ export class DetailComponent implements OnInit { test = { name: 'SPAI', - cordinates: "46.165262,8.791225", + cordinates: "46.15187077044123, 8.799829438699243", description: "Lorem ipsum" } @@ -23,7 +23,8 @@ export class DetailComponent implements OnInit { } showNav = true; - distance = 0; + distance: number | undefined; + displayedDistance = 0; getLocation() { console.log("get location"); @@ -49,6 +50,11 @@ export class DetailComponent implements OnInit { if (this.showNav) { this.distance = this.getDistanceBetweenCoordinates(lat1, lon1, +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); diff --git a/src/styles.css b/src/styles.css index d3a1a9a..2dfd443 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2,3 +2,4 @@ @tailwind base; @tailwind components; @tailwind utilities; + From 18878ae3436ea011882fd5f485f2c9ce5fc7ac8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joe=20Ku=CC=88ng?= Date: Tue, 7 Mar 2023 14:03:55 +0100 Subject: [PATCH 2/5] adding params on routing configuration --- src/app/app-routing.module.ts | 4 +++- src/app/detail/detail.component.ts | 14 +++++++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index d66cbc5..f77720b 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,12 +2,14 @@ import {NgModule} from '@angular/core'; import {RouterModule} from '@angular/router'; import {HomeComponent} from './home/home.component'; import {DetailComponent} from "./detail/detail.component"; +import {ListComponent} from "./list/list.component"; @NgModule({ imports: [RouterModule.forRoot([ {path: 'home', component: HomeComponent}, - {path: 'detail', component: DetailComponent}, + {path: ':location', component: ListComponent}, + {path: ':location/detail/:id', component: DetailComponent}, {path: '**', redirectTo: 'home'} ])], exports: [RouterModule], diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index cef9c04..10ec644 100755 --- a/src/app/detail/detail.component.ts +++ b/src/app/detail/detail.component.ts @@ -1,4 +1,5 @@ import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from "@angular/router"; @Component({ selector: 'app-detail', @@ -6,8 +7,19 @@ import {Component, OnInit} from '@angular/core'; styleUrls: ['./detail.component.css'] }) export class DetailComponent implements OnInit { + private location: string | undefined; + private id: number | undefined; + + constructor(private route: ActivatedRoute) { + } 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(); } @@ -69,7 +81,7 @@ export class DetailComponent implements OnInit { Math.sin(dLon / 2) * Math.sin(dLon / 2) ; const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); - // Distance in km + // Distance in km return earthRadius * c; } From 531f7b7ff9ee0cee8eb4011c2696c33f757b9b9b Mon Sep 17 00:00:00 2001 From: tito Date: Tue, 7 Mar 2023 14:50:21 +0100 Subject: [PATCH 3/5] integrazione api mappa google --- src/app/app.module.ts | 4 +++- src/app/detail/detail.component.html | 11 ++++++++++- src/app/detail/detail.component.ts | 7 ++++++- src/app/pipes/safe.pipe.spec.ts | 8 ++++++++ src/app/pipes/safe.pipe.ts | 13 +++++++++++++ 5 files changed, 40 insertions(+), 3 deletions(-) create mode 100644 src/app/pipes/safe.pipe.spec.ts create mode 100644 src/app/pipes/safe.pipe.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5b554bc..522f145 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,13 +7,15 @@ import { HomeComponent } from './home/home.component'; import { ListComponent } from './list/list.component'; import { DetailComponent } from './detail/detail.component'; import {FormsModule} from "@angular/forms"; +import { SafePipe } from './pipes/safe.pipe'; @NgModule({ declarations: [ AppComponent, HomeComponent, ListComponent, - DetailComponent + DetailComponent, + SafePipe ], imports: [ BrowserModule, diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index be1e21f..7840198 100644 --- a/src/app/detail/detail.component.html +++ b/src/app/detail/detail.component.html @@ -3,6 +3,15 @@

{{test.description}}

Distanza: {{distance}}

diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index 13d87cd..5782504 100755 --- a/src/app/detail/detail.component.ts +++ b/src/app/detail/detail.component.ts @@ -13,10 +13,14 @@ export class DetailComponent implements OnInit { test = { name: 'SPAI', - cordinates: "46.15187077044123, 8.799829438699243", + cordinates: '46.15187077044123,8.799829438699243', + lat: 46.15187077044123, + lng: 8.799829438699243, description: "Lorem ipsum" } + embed = `https://www.google.com/maps/embed/v1/place?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&q=${this.test.lat},${this.test.lng}` + cord = { lat: 0, lng: 0 @@ -27,6 +31,7 @@ export class DetailComponent implements OnInit { displayedDistance = 0; getLocation() { + console.log(this.embed) console.log("get location"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position) => { diff --git a/src/app/pipes/safe.pipe.spec.ts b/src/app/pipes/safe.pipe.spec.ts new file mode 100644 index 0000000..49ee0ad --- /dev/null +++ b/src/app/pipes/safe.pipe.spec.ts @@ -0,0 +1,8 @@ +import { SafePipe } from './safe.pipe'; + +describe('SafePipe', () => { + it('create an instance', () => { + const pipe = new SafePipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/pipes/safe.pipe.ts b/src/app/pipes/safe.pipe.ts new file mode 100644 index 0000000..3225fae --- /dev/null +++ b/src/app/pipes/safe.pipe.ts @@ -0,0 +1,13 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import {DomSanitizer} from "@angular/platform-browser"; + +@Pipe({ + name: 'safe' +}) +export class SafePipe implements PipeTransform { + constructor(private domSanitizer: DomSanitizer) {} + transform(url:string) { + return this.domSanitizer.bypassSecurityTrustResourceUrl(url); + } + +} From f15b2e91aa26be62bf921d46c397384d4d46b36c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joe=20Ku=CC=88ng?= Date: Tue, 7 Mar 2023 15:54:42 +0100 Subject: [PATCH 4/5] created services readjson --- src/app/app.module.ts | 4 +- src/app/home/home.component.css | 2 +- src/app/home/home.component.ts | 32 +++++----- src/app/interface/data.ts | 18 ++++++ src/app/list/list.component.ts | 1 + src/app/service/readjson.service.ts | 52 ++++++++++++++++ src/assets/data.json | 93 ++++++++++++++++++++--------- 7 files changed, 157 insertions(+), 45 deletions(-) create mode 100644 src/app/interface/data.ts create mode 100644 src/app/service/readjson.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5b554bc..0ed4d48 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,6 +7,7 @@ import { HomeComponent } from './home/home.component'; import { ListComponent } from './list/list.component'; import { DetailComponent } from './detail/detail.component'; import {FormsModule} from "@angular/forms"; +import {HttpClientModule} from "@angular/common/http"; @NgModule({ declarations: [ @@ -18,7 +19,8 @@ import {FormsModule} from "@angular/forms"; imports: [ BrowserModule, AppRoutingModule, - FormsModule + FormsModule, + HttpClientModule, ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css index caf329e..dc153b2 100644 --- a/src/app/home/home.component.css +++ b/src/app/home/home.component.css @@ -19,7 +19,7 @@ input { } .bg-image { - background-image: url('/src/assets/img/mountains.png'); + background-image: url('src/assets/img/mountains.png'); background-size: cover; background-repeat: no-repeat; background-position: center center; diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 3d44e1b..1b3b0d2 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,5 +1,6 @@ -import {AfterContentInit, AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core'; -import {debounceTime, distinctUntilChanged, fromEvent, Subject} from "rxjs"; +import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core'; +import { distinctUntilChanged, fromEvent, Subject, Subscription} from "rxjs"; +import {ReadjsonService} from "../service/readjson.service"; interface Luogo { nome: string; @@ -12,8 +13,7 @@ interface Luogo { templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) -export class HomeComponent implements OnInit, AfterViewInit { - +export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { luoghiPopup: Subject = new Subject() latitude: number | undefined; @@ -34,6 +34,17 @@ export class HomeComponent implements OnInit, AfterViewInit { @ViewChild('myInput') myInput?: ElementRef; + + constructor(private service: ReadjsonService) {} + + ngOnInit(): void { + this.subs.push(this.service.getLocation("Lugano").subscribe(val => console.log(val))) + } + + ngOnDestroy() { + this.subs.forEach(sub => sub.unsubscribe()) + } + ngAfterViewInit() { fromEvent(this.myInput?.nativeElement, 'input') .pipe( @@ -44,24 +55,19 @@ export class HomeComponent implements OnInit, AfterViewInit { }) } - cercaLuogo(nome: string){ - - - setTimeout(() => { - }, 1000); this.luoghiFiltrati = this.luoghi.filter((l: Luogo) => l.nome.toLowerCase().startsWith(nome.toLowerCase())); if (this.luoghiFiltrati.length > 0) { this.suggerimentoAttivo = true; this.suggerimento = this.luoghiFiltrati[0].nome; this.completamento = stringDifference(nome, this.suggerimento); - } else { this.suggerimentoAttivo = false; this.suggerimento = ''; } + this.myInput?.nativeElement.focus(); } consigliaSuggerimento(nome: string) { @@ -79,12 +85,6 @@ export class HomeComponent implements OnInit, AfterViewInit { } } } - - ngOnInit(): void { - - } - - } function stringDifference(str1: string, str2: string): string { diff --git a/src/app/interface/data.ts b/src/app/interface/data.ts new file mode 100644 index 0000000..60c44e6 --- /dev/null +++ b/src/app/interface/data.ts @@ -0,0 +1,18 @@ +export interface Locations { + location: string; + region: string; + lat: number; + lon: number; + waypoints: waypoint[]; +} + +export interface waypoint { + id: number; + name: string; + lat: number; + lon: number; + description: string; + img: string; +} + + diff --git a/src/app/list/list.component.ts b/src/app/list/list.component.ts index 81829f7..4b8edf5 100644 --- a/src/app/list/list.component.ts +++ b/src/app/list/list.component.ts @@ -6,6 +6,7 @@ import {Component, OnInit} from '@angular/core'; styleUrls: ['./list.component.css'] }) export class ListComponent implements OnInit { + ngOnInit(): void { } } diff --git a/src/app/service/readjson.service.ts b/src/app/service/readjson.service.ts new file mode 100644 index 0000000..f437a94 --- /dev/null +++ b/src/app/service/readjson.service.ts @@ -0,0 +1,52 @@ +import {Injectable} from '@angular/core'; +import {HttpClient} from "@angular/common/http"; +import {Locations, waypoint} from "../interface/data"; +import {BehaviorSubject, map, Observable, tap} from "rxjs"; + + +@Injectable({ + providedIn: 'root' +}) +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[]> { + return this.locations.pipe( + map((locations) => { + return locations.map((loc: Locations) => ({ + location: loc.location, + region: loc.region, + lat: loc.lat, + lon: loc.lon + })) + }), + tap(data => console.log("data requested", data))) + } + + getLocation(location: string): Observable { + return this.locations.pipe( + map((locations) => { + const foundLocation: Locations | undefined = locations.find((loc: Locations) => loc.location === location); + return foundLocation ? foundLocation : {location: '', region: '', lat: 0, lon: 0, waypoints: []}; + }), + 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)) + ); + } + +} diff --git a/src/assets/data.json b/src/assets/data.json index 233782c..3b8cc15 100644 --- a/src/assets/data.json +++ b/src/assets/data.json @@ -1,27 +1,66 @@ -{ - "nome": "Biasca", - "provincia": "TI", - "waypoints": [ - { - "nome": "Punto 1", - "lat": 46.123, - "lon": 8.123, - "descrizione": "Descrizione del punto 1", - "foto": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" - }, - { - "nome": "Punto 2", - "lat": 46.123, - "lon": 8.123, - "descrizione": "Descrizione del punto 2", - "foto": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" - }, - { - "nome": "Punto 3", - "lat": 46.123, - "lon": 8.123, - "descrizione": "Descrizione del punto 3", - "foto": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" - } - ] -} +[ + { + "location": "Biasca", + "region": "ticino", + "lat": 46.123, + "lon": 8.123, + "waypoints": [ + { + "id": 1, + "name": "Punto 1", + "lat": 46.123, + "lon": 8.123, + "description": "Descrizione del punto 1", + "img": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" + }, + { + "id": 2, + "name": "Punto 2", + "lat": 46.123, + "lon": 8.123, + "description": "Descrizione del punto 2", + "img": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" + }, + { + "id": 3, + "name": "Punto 3", + "lat": 46.123, + "lon": 8.123, + "description": "Descrizione del punto 3", + "img": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" + } + ] + }, + { + "location": "Lugano", + "region": "TI", + "lat": 46.123, + "lon": 8.123, + "waypoints": [ + { + "id": 4, + "name": "Punto 1", + "lat": 46.123, + "lon": 8.123, + "description": "un grandissimo", + "img": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" + }, + { + "id": 5, + "name": "Punto 2", + "lat": 46.123, + "lon": 8.123, + "description": "Descrizione del punto 2", + "img": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" + }, + { + "id": 6, + "name": "Punto 3", + "lat": 46.123, + "lon": 8.123, + "description": "Descrizione del punto 3", + "img": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" + } + ] + } +] From fe105a7924c8798caf96ff2c6d5aa40e0be738c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joe=20Ku=CC=88ng?= Date: Tue, 7 Mar 2023 15:56:14 +0100 Subject: [PATCH 5/5] changes --- src/app/home/home.component.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 1b3b0d2..11176a5 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -16,6 +16,8 @@ interface Luogo { export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { luoghiPopup: Subject = new Subject() + subs: Subscription[] = [] + latitude: number | undefined; longitude: number | undefined; backgroundColor: string | undefined;