clean up search component

src/app/search/search.component.css

@@ -1,11 +1,3 @@
-#inputFrom:focus + .autocomplete-items-from{
-  visibility:visible;
-}
-
-#inputTo:focus + .autocomplete-items-to{
-  visibility:visible;
-}
-
 .searchField{
     display:block;
     float:left;
@@ -32,7 +24,7 @@
   }
 
 .autocomplete-items {
-    visibility:  visible; /* without debugging it should be display:none */
+    /*display:  block; */
     position: absolute;
     border: 1px solid #d4d4d4;
     border-bottom: none;

src/app/search/search.component.html

@@ -1,6 +1,7 @@
+
 <div class="searchField">
 	<div class="autocomplete">
-	  	<input #inputFrom (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From" value="{{ inputFromValue }}">
+	  	<input #inputFrom (click)="getValue(inputFrom.value, true)" (change)="getValue(inputFrom.value, true)" type="text" name="inputFrom" id="inputFrom" placeholder="From" value="{{ inputFromValue }}">
 		  <div #inputautocompleteList class="autocomplete-items autocomplete-items-from">
 
 			<div *ngFor="let item of nominatimItemsFrom" >
@@ -8,8 +9,9 @@
 				<input type="hidden" value="{{ item.display_name }}">
 			</div>
 
+      <!-- PHOTON -->
 			<div *ngFor="let item of photonItemsFrom"
-			(click)="selectPhoton(true, item)">
+			(click)="selectPhoton(true, item);" >
         <!--IF TYPE == STREET-->
         <label *ngIf="item.properties.type == 'street'">
           {{ item.properties.name }} {{item.properties.housenumber}}<br>
@@ -25,7 +27,7 @@
 		</div>
 	</div>
 	<div class="autocomplete" id="autocompleteTo">
-		<input #inputTo (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputTo" id="inputTo" placeholder="To" value="{{ inputToValue }}">
+		<input #inputTo (click)="getValue(inputTo.value, false)" (change)="getValue(inputTo.value, false)" type="text" name="inputTo" id="inputTo" placeholder="To" value="{{ inputToValue }}">
 		<div #inputautocompleteList class="autocomplete-items autocomplete-items-to">
 
 			<div *ngFor="let item of nominatimItemsTo" >

src/app/search/search.component.ts

@@ -5,11 +5,8 @@ import { Photon, PhotonFeatureCollection } from '../interfaces/photon';
 import { PhotonService } from '../services/photon.service';
 import { OsrmService } from '../services/osrm.service';
 import { Osrm } from '../interfaces/osrm';
-import { MapComponent } from '../map/map.component';
 import { EventEmitter } from '@angular/core';
 
-
-
 @Component({
   selector: 'app-search',
   templateUrl: './search.component.html',
@@ -42,41 +39,51 @@ export class SearchComponent{
     private nominatimService: NominatimService,
     private photonService: PhotonService,
     private osrmService: OsrmService,
-    ) { }
+  ) { }
+
+  getFormattedPhotonValue(p: Photon): string{
+    let formatted: string = "";
+
+    if(p.properties.name){
+      formatted += " " + p.properties.name;
+    }
+    if(p.properties.housenumber){
+      formatted += " " + p.properties.housenumber;
+    }
+    if(p.properties.postcode){
+      formatted += " " + p.properties.postcode;
+    }
+    if(p.properties.city){
+      formatted += " " + p.properties.city;
+    }
+    if(p.properties.countrycode){
+      formatted += " " + p.properties.countrycode;
+    }
+
+    return formatted;
+  }
+
 
   selectPhoton(isFrom: boolean, p: Photon): void{
     if(isFrom){
       this.selectedPhotonFrom = p;
       this.longFrom = <number> p.geometry?.coordinates[0];
       this.latFrom = <number> p.geometry?.coordinates[1];
-      this.inputFromValue = <string> p.properties.name
-
-      if(p.properties.housenumber){
-        this.inputFromValue += " " + p.properties.housenumber;
-      }
-
-      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;
-      }
-
+      this.inputFromValue = <string> p.properties.name;
+      this.inputFromValue = this.getFormattedPhotonValue(p);
+      this.photonItemsFrom = [];
     }else{
       this.selectedPhotonTo = p;
       this.longTo = <number>p.geometry?.coordinates[0];
       this.latTo = <number>p.geometry?.coordinates[1];
       this.inputToValue = <string> p.properties.name + " " + p.properties.countrycode;
+      this.inputToValue = this.getFormattedPhotonValue(p);
+      this.photonItemsTo = [];
     }
+
   }
   // Gets called in "app.component.html" when an input changes its value
-  getValue(valueFrom:string, valueTo:string): void{
-    console.log("From " + valueFrom + " to " + valueTo);
+  getValue(value:string, isFrom: boolean): void{
 
     //this.updateAutoCompleteList([{display_name: 'Hallo'}, {display_name: 'Test2'}], [{display_name: 'Halload'}, {display_name: 'Test4'}]);
 
@@ -87,27 +94,22 @@ export class SearchComponent{
     this.nominatimService.sendQueryRequest(valueTo)
     .subscribe((response: Nominatim[]) => this.nominatimItemsTo = response);
     */
+
     this.photonItemsFrom = [];
     this.photonItemsTo = [];
 
-    this.photonService.sendQueryRequest(valueFrom)
+    this.photonService.sendQueryRequest(value)
     .subscribe((response: PhotonFeatureCollection) => response.features?.forEach(feature => {
-      this.photonItemsFrom.push(feature);
-      this.longFrom = <number>this.photonItemsFrom[0].geometry?.coordinates![0];
-      this.latFrom = <number>this.photonItemsFrom[0].geometry?.coordinates![1];
-      console.log("longFrom: " + this.longFrom)
-      console.log("latFrom: " + this.latFrom)
+      if(isFrom){
+        this.photonItemsFrom.push(feature);
+        this.longFrom = <number>this.photonItemsFrom[0].geometry?.coordinates![0];
+        this.latFrom = <number>this.photonItemsFrom[0].geometry?.coordinates![1];
+      }else{
+        this.photonItemsTo.push(feature);
+        this.longTo = <number>this.photonItemsFrom[0].geometry?.coordinates![0];
+        this.latTo = <number>this.photonItemsFrom[0].geometry?.coordinates![1];
+      }
     }));
-
-    this.photonService.sendQueryRequest(valueTo)
-    .subscribe((response: PhotonFeatureCollection) => response.features?.forEach(feature => {
-      this.photonItemsTo.push(feature);
-      this.longTo = <number>this.photonItemsTo[0].geometry?.coordinates![0];
-      this.latTo = <number>this.photonItemsTo[0].geometry?.coordinates![1]
-      console.log("LongTo: " + this.longTo)
-      console.log("LatTo: " + this.latTo)
-    }));
-
   }
 
   getRoute(): void{