created services readjson

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]

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;

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<Luogo[]> = new Subject<Luogo[]>()
 
   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 {

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;
+}
+
+

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 {
   }
 }

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<Locations[]> = new BehaviorSubject<Locations[]>([]);
+
+  constructor(private http: HttpClient) {
+    this.http.get<Locations[]>('assets/data.json').subscribe(data => {
+      this.locations.next(data)
+      console.log("data loaded", data)
+    });
+  }
+  getLocations(): Observable<Partial<Locations>[]> {
+    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<Locations> {
+    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<waypoint[]> {
+    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))
+    );
+  }
+
+}

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