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/app.module.ts b/src/app/app.module.ts index 5b554bc..8b68d9a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,6 +7,8 @@ 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"; +import { SafePipe } from './pipes/safe.pipe'; @NgModule({ declarations: [ 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..7840198 100644 --- a/src/app/detail/detail.component.html +++ b/src/app/detail/detail.component.html @@ -1,9 +1,17 @@
-

{{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..e57e9f1 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,26 +7,43 @@ 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(); } test = { name: 'SPAI', - cordinates: "46.165262,8.791225", + 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 } showNav = true; - distance = 0; + distance: number | undefined; + displayedDistance = 0; getLocation() { + console.log(this.embed) console.log("get location"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position) => { @@ -49,6 +67,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); @@ -69,7 +92,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; } diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css index 8f55562..7b998d0 100644 --- a/src/app/home/home.component.css +++ b/src/app/home/home.component.css @@ -29,7 +29,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 a0d74e9..45aaefc 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"; import * as QRCode from 'qrcode'; interface Luogo { @@ -13,10 +14,11 @@ 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() + subs: Subscription[] = [] + latitude: number | undefined; longitude: number | undefined; backgroundColor: string | undefined; @@ -32,7 +34,7 @@ export class HomeComponent implements OnInit, AfterViewInit { luogoSelezionato: string = ''; suggerimentoAttivo: boolean = false; suggerimento: string = ''; - completamento: string = ''; + completamento: string = 'ciao'; @ViewChild('myInput') myInput?: ElementRef; @ViewChild('canvas') canvasRef: ElementRef | undefined; @@ -40,6 +42,17 @@ export class HomeComponent implements OnInit, AfterViewInit { ctx: any; img: any; + + 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() { this.canvas = this.canvasRef?.nativeElement; @@ -84,11 +97,12 @@ export class HomeComponent implements OnInit, AfterViewInit { 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) { @@ -114,8 +128,19 @@ export class HomeComponent implements OnInit, AfterViewInit { }); } - luoghiNear() { return null; } + } + +function stringDifference(str1: string, str2: string): string { + let diff = ''; + for (let i = 0; i < str2.length; i++) { + if (str1[i] !== str2[i]) { + diff += str2[i]; + } + } + return diff; +} + 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/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); + } + +} 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" + } + ] + } +] 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; +