Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	src/app/home/home.component.ts

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],

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: [

src/app/detail/detail.component.css

@@ -0,0 +1,5 @@
+.titolo {
+  font-size: 1.5em;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+}

src/app/detail/detail.component.html

@@ -1,9 +1,17 @@
 <div>
-  <h1>{{test.name}}</h1>
+  <h1 class="titolo">{{test.name}}</h1>
   <p>{{test.description}}</p>
-  <p>lat:{{cord.lat}}, lang:{{cord.lng}}</p>
+  <p ng-model="showNav" *ngIf="showNav">Distanza: {{distance}}</p>
-  <p>distanza:{{distance}}</p>
   <div id="nav" ng-model="showNav" *ngIf="showNav">
-    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1708.0829920038827!2d8.790506152417485!3d46.16602530670125!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4785c833c36e0bd5%3A0x427d483133d7c1a0!2sCPT%20Locarno%20(SPAI%20%E2%80%93%20MPT)%20-%20Centro%20professionale%20tecnico%20Locarno!5e0!3m2!1sit!2sch!4v1675246087183!5m2!1sit!2sch" width="650" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+    <!--<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1708.0829920038827!2d8.790506152417485!3d46.16602530670125!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4785c833c36e0bd5%3A0x427d483133d7c1a0!2sCPT%20Locarno%20(SPAI%20%E2%80%93%20MPT)%20-%20Centro%20professionale%20tecnico%20Locarno!5e0!3m2!1sit!2sch!4v1675246087183!5m2!1sit!2sch" width="650" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+    <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d912.8193347586248!2d8.796584272413714!3d46.158022715772375!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sit!2sch!4v1678192674449!5m2!1sit!2sch" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>-->
+    <iframe
+      width="450"
+      height="250"
+      frameborder="0" style="border:0"
+      referrerpolicy="no-referrer-when-downgrade"
+      [src]='embed | safe'
+      allowfullscreen>
+    </iframe>
   </div>
 </div>

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);

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;

src/app/home/home.component.ts

@@ -1,5 +1,6 @@
-import {AfterContentInit, AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import {debounceTime, distinctUntilChanged, fromEvent, Subject} from "rxjs";
+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<Luogo[]> = new Subject<Luogo[]>()
 
+  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;
+}
+

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/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();
+  });
+});

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

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",
+    "location": "Biasca",
+    "region": "ticino",
+    "lat": 46.123,
+    "lon": 8.123,
     "waypoints": [
       {
-      "nome": "Punto 1",
+        "id": 1,
+        "name": "Punto 1",
         "lat": 46.123,
         "lon": 8.123,
-      "descrizione": "Descrizione del punto 1",
+        "description": "Descrizione del punto 1",
-      "foto": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+        "img": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
       },
       {
-      "nome": "Punto 2",
+        "id": 2,
+        "name": "Punto 2",
         "lat": 46.123,
         "lon": 8.123,
-      "descrizione": "Descrizione del punto 2",
+        "description": "Descrizione del punto 2",
-      "foto": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+        "img": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
       },
       {
-      "nome": "Punto 3",
+        "id": 3,
+        "name": "Punto 3",
         "lat": 46.123,
         "lon": 8.123,
-      "descrizione": "Descrizione del punto 3",
+        "description": "Descrizione del punto 3",
-      "foto": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+        "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"
+      }
+    ]
+  }
+]

src/styles.css

@@ -2,3 +2,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+