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

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

src/app/app.module.ts

@@ -11,13 +11,13 @@ import {HttpClientModule} from "@angular/common/http";
 import { SafePipe } from './pipes/safe.pipe';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    HomeComponent,
-    ListComponent,
-    DetailComponent,
-    SafePipe
-  ],
+    declarations: [
+        AppComponent,
+        HomeComponent,
+        ListComponent,
+        DetailComponent,
+        SafePipe
+    ],
   imports: [
     BrowserModule,
     AppRoutingModule,

src/app/home/home.component.css

@@ -3,6 +3,10 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  position: absolute;
+  top: 35%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 input {
@@ -11,11 +15,17 @@ input {
   align-items: center;
 }
 
-.list {
+#list {
   width: 500px;
   justify-content: center;
   align-items: center;
   align-content: center;
+  margin-top: 10px;
+
+}
+
+#list > li {
+
 }
 
 .bg-image {

src/app/home/home.component.html

@@ -7,10 +7,28 @@
       <input #myInput type="text" [(ngModel)]="luogoSelezionato" (keyup)="cercaLuogo(myInput.value)"
              (keydown)="selezionaSuggerimento($event)" placeholder="Type here"
              class="input input-bordered input-primary w-full max-w-xs">
-      <ul class="list">
-        <li *ngFor="let luogo of luoghiPopup | async">{{luogo.location}}</li>
-      </ul>
 
+      <ng-container *ngIf="luoghiPopup | async as luoghi;">
+        <ul *ngIf="luoghi.length > 0" class="menu bg-base-200 !w-fit p-2 rounded-box" id="list">
+
+          <li class="menu-title">
+            <span>Places</span>
+          </li>
+
+          <li *ngFor="let luogo of luoghi">
+            {{luogo.nome}}
+          </li>
+
+          <li class="menu-title">
+            <span>Near</span>
+          </li>
+
+          <li *ngFor="let luogo of luoghiNear()">
+            {{luogo.nome}}
+          </li>
+
+        </ul>
+      </ng-container>
     </div>
   </div>
 </div>

src/app/home/home.component.ts

@@ -2,6 +2,7 @@ import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from
 import {distinctUntilChanged, fromEvent, Subject, Subscription} from "rxjs";
 import {ReadjsonService} from "../service/readjson.service";
 import {Locations} from "../interface/data";
+import * as QRCode from 'qrcode';
 
 interface Luogo {
   location: string;
@@ -25,6 +26,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   latitude: number | undefined;
   longitude: number | undefined;
   backgroundColor: string | undefined;
+  qrCodeImage: string | undefined;
   locations: Locations[] = [
     {location: 'Locarno', region: 'Ticino', lat: 46.1704, lon: 8.7931},
     {location: 'Lugano', region: 'Ticino', lat: 46.0037, lon: 8.9511},
@@ -32,6 +34,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     {location: 'Lauterbrunnen', region: 'Bern', lat: 46.5939, lon: 7.9085}
   ];
 
+
   luoghi: Luogo[] = [
     {location: 'Locarno', lat: 46.1704, lon: 8.7931},
     {location: 'Lugano', lat: 46.0037, lon: 8.9511},
@@ -45,12 +48,23 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   suggerimento: string = '';
   completamento: string = 'ciao';
 
-  constructor(private service: ReadjsonService) {
-  }
+  @ViewChild('myInput') myInput?: ElementRef;
+  @ViewChild('canvas') canvasRef: ElementRef | undefined;
+  canvas: any;
+  ctx: any;
+  img: any;
+
+
+  constructor(private service: ReadjsonService) {}
+
 
   ngOnInit(): void {
     console.log("home init");
     this.subs.push(this.service.getLocation("Lugano").subscribe(val => console.log(val)))
+    const text = 'https://aramisgrata.ch'; // sostituisci con la tua stringa
+    QRCode.toDataURL(text, { errorCorrectionLevel: 'H' }, (err, url) => {
+      this.qrCodeImage = url;
+    });
   }
 
   ngAfterViewInit() {
@@ -67,6 +81,28 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
       this.luoghiPopup.next(this.locations.filter(l => l.location.toLowerCase().startsWith(val.target.value.toLowerCase())
       ))})
 
+
+    this.canvas = this.canvasRef?.nativeElement;
+    this.ctx = this.canvas.getContext('2d');
+
+    this.img = new Image();
+    this.img.onload = () => {
+      this.ctx.drawImage(this.img, 0, 0);
+      const qrCode = new Image();
+      if (typeof this.qrCodeImage === "string") {
+        qrCode.src = this.qrCodeImage;
+      }
+      qrCode.onload = () => {
+        const qrCodeSize = 100;
+        const margin = 20;
+        const x = this.canvas.width - qrCodeSize - margin;
+        const y = this.canvas.height - qrCodeSize - margin;
+        this.ctx.drawImage(qrCode, x, y, qrCodeSize, qrCodeSize);
+      }
+    }
+    this.img.src = 'src/assets/img/mountains.png';
+
+
     fromEvent(this.myInput?.nativeElement, 'input')
       .pipe(
         // debounceTime(500), decommentarlo se bisogna fare una chiamata http
@@ -124,6 +160,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
       this.suggerimentoAttivo = false;
       this.suggerimento = '';
     }
+    this.myInput?.nativeElement.focus();
   }
 
   consigliaSuggerimento(locations: string) {
@@ -142,6 +179,12 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
       }
     }
   }
+
+
+  luoghiNear() {
+    return null;
+  }
+
 }
 
 function stringDifference(str1: string, str2: string): string {