From 94d5725c42b482dca66d322e1809781ab4c474b1 Mon Sep 17 00:00:00 2001
From: Janis Meister <meister.nets@gmail.com>
Date: Fri, 14 Jan 2022 12:48:51 +0100
Subject: [PATCH] coodinates are saved in hidden inputs

---
 src/app/search/search.component.html | 18 ++++++++++--------
 src/app/search/search.component.ts   | 28 +++++++++++++++++++++++-----
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html
index 2efdacb..d512acb 100644
--- a/src/app/search/search.component.html
+++ b/src/app/search/search.component.html
@@ -1,13 +1,13 @@
 <div class="searchField">
 	<div id="coordinates">
-		<input *ngIf="photonItemsFrom[0]"  id="longFromInput" value="{{ longFrom }}">
-		<input *ngIf="photonItemsFrom[0]"  id="latFromInput" value="{{ latFrom }}">
+		<input *ngIf="photonItemsFrom[0]" hidden id="longFromInput" value="{{ longFrom }}">
+		<input *ngIf="photonItemsFrom[0]" hidden id="latFromInput" value="{{ latFrom }}">
 
-		<input *ngIf="photonItemsTo[0]"  id="longToInput" value="{{ longTo}}">
-		<input *ngIf="photonItemsTo[0]"  id="latToInput" value="{{ latTo }}">
+		<input *ngIf="photonItemsTo[0]" hidden id="longToInput" value="{{ longTo}}">
+		<input *ngIf="photonItemsTo[0]" hidden id="latToInput" value="{{ latTo }}">
 	</div>
 	<div class="autocomplete">
-	  	<input #inputFrom (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From">
+	  	<input #inputFrom (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From" value="{{ inputFromValue }}">
 		  <div #inputautocompleteList class="autocomplete-items autocomplete-items-from">
 	
 			<div *ngFor="let item of nominatimItemsFrom" >
@@ -15,14 +15,15 @@
 				<input type="hidden" value="{{ item.display_name }}">
 			</div>
 
-			<div *ngFor="let item of photonItemsFrom" (click)="changeInputs(true, item.geometry?.coordinates![0],  item.geometry?.coordinates![1] )">
+			<div *ngFor="let item of photonItemsFrom"
+			(click)="selectPhoton(true, item)">
 				{{ item.properties.name }} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}} 
 			</div>
 
 		</div>
 	</div>
 	<div class="autocomplete" id="autocompleteTo">
-		<input #inputTo (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputTo" id="inputTo" placeholder="To">
+		<input #inputTo (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputTo" id="inputTo" placeholder="To" value="{{ inputToValue }}">
 		<div #inputautocompleteList class="autocomplete-items autocomplete-items-to">
 
 			<div *ngFor="let item of nominatimItemsTo" >
@@ -30,7 +31,8 @@
 				<input type="hidden" value="{{ item.display_name }}">
 			</div>
 
-			<div *ngFor="let item of photonItemsTo" (click)="changeInputs(false, item.geometry?.coordinates![0],  item.geometry?.coordinates![1] )">
+			<div *ngFor="let item of photonItemsTo"
+			(click)="selectPhoton(false, item)">
 				{{  item.properties.name }} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}}
 				<input type="hidden" value="{{  item.properties?.name }}">
 			</div>
diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts
index 3008680..0aeacb4 100644
--- a/src/app/search/search.component.ts
+++ b/src/app/search/search.component.ts
@@ -19,6 +19,9 @@ export class SearchComponent implements OnInit {
   photonItemsFrom: Photon[] = [];
   photonItemsTo: Photon[] = [];
 
+  inputFromValue: string;
+  inputToValue: string;
+
   longFrom: number = 0;
   latFrom: number = 0;
   longTo: number = 0;
@@ -26,13 +29,28 @@ export class SearchComponent implements OnInit {
 
   constructor(private nominatimService: NominatimService, private photonService: PhotonService) { }
 
-  changeInputs(isFrom: boolean, long: number, lat: number): void{
+  selectPhoton(isFrom: boolean, p: Photon): void{
     if(isFrom){
-      this.longFrom = long;
-      this.latFrom = lat;
+      this.longFrom = <number> p.geometry?.coordinates[0];
+      this.latFrom = <number> p.geometry?.coordinates[1];
+      this.inputFromValue = <string> p.properties.name
+
+      if(p.properties.postcode){
+        this.inputFromValue += " " + p.properties.postcode;
+      }
+
+      if(p.properties.city){
+        this.inputFromValue += " " + p.properties.city;
+      }
+
+      if(p.properties.countrycode){
+        this.inputFromValue += " " + p.properties.countrycode;
+      }
+
     }else{
-      this.longTo = long;
-      this.latTo = lat;
+      this.longTo = <number>p.geometry?.coordinates[0];
+      this.latTo = <number>p.geometry?.coordinates[1];
+      this.inputToValue = <string> p.properties.name + " " + p.properties.countrycode;
     }
   }
   // Gets called in "app.component.html" when an input changes its value