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] 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" + } + ] + } +]