From 7bbfd125b0fbfccb054bd6a0e3b4d5e020130f7b Mon Sep 17 00:00:00 2001
From: Janis Meister <meister.nets@gmail.com>
Date: Fri, 21 Jan 2022 13:54:27 +0100
Subject: [PATCH] updated search component

---
 src/app/interfaces/photon.ts         |  5 +++-
 src/app/osrm.service.ts              |  8 +++---
 src/app/search/search.component.css  | 28 ++++++++++++---------
 src/app/search/search.component.html | 37 ++++++++++++++++++----------
 src/app/search/search.component.ts   |  4 +++
 5 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/app/interfaces/photon.ts b/src/app/interfaces/photon.ts
index 301025f..652c545 100644
--- a/src/app/interfaces/photon.ts
+++ b/src/app/interfaces/photon.ts
@@ -15,6 +15,9 @@ interface PhotonProperties{
     type?: string;
     postcode?: string;
     city?: string;
+    housenumber?: number;
+    street?: string;
+    state?: string;
 }
 
 export interface Photon{
@@ -26,4 +29,4 @@ export interface Photon{
 export interface PhotonFeatureCollection{
     features?: Array<Photon>;
     type?: string;
-}
\ No newline at end of file
+}
diff --git a/src/app/osrm.service.ts b/src/app/osrm.service.ts
index ade266f..f6b6a01 100644
--- a/src/app/osrm.service.ts
+++ b/src/app/osrm.service.ts
@@ -12,9 +12,9 @@ export class OsrmService{
   constructor(private http: HttpClient) { }
 
   // sends a query request to Osrm and gets response (http://project-osrm.org/docs/v5.24.0/api/?language=cURL#table-service)
-  sendQueryRequest(longFrom: number, latFrom: number, longTo: number, latTo: number): Observable<Osrm> { 
+  sendQueryRequest(longFrom: number, latFrom: number, longTo: number, latTo: number): Observable<Osrm> {
     console.log(longTo)
-    console.log("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&steps=true&alternatives=true&geometries=geojson")
-    return this.http.get<Osrm>("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&steps=true&alternatives=true&geometries=geojson");
+    console.log("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&alternatives=false&steps=true&geometries=geojson")
+    return this.http.get<Osrm>("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&alternatives=false&steps=true&geometries=geojson");
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/search/search.component.css b/src/app/search/search.component.css
index 5efcbad..6b2ddd5 100644
--- a/src/app/search/search.component.css
+++ b/src/app/search/search.component.css
@@ -22,6 +22,7 @@
     font-weight: bold;
     font-family: 'Roboto';
     padding: 5px;
+    width: 350px;
 }
 
 .autocomplete {
@@ -29,7 +30,7 @@
     display: inline-block;
     color: black;
   }
-  
+
 .autocomplete-items {
     visibility:  visible; /* without debugging it should be display:none */
     position: absolute;
@@ -41,29 +42,32 @@
     top: 100%;
     left: 0;
     right: 0;
-    width: 210px;
+    width: 350px;
     margin-left: 30px;
     margin-top: 5px;
 }
-  
+
   .autocomplete-items div {
     padding: 10px;
     font-weight: normal;
     font-size: 11pt;
     cursor: pointer;
-    background-color: #fff; 
-    border-bottom: 1px solid #d4d4d4; 
+    background-color: #fff;
+    border-bottom: 1px solid #d4d4d4;
+}
+
+.autocomplete-items div label{
+  cursor: pointer;
 }
-  
   /*when hovering an item:*/
   .autocomplete-items div:hover {
-    background-color: #e9e9e9; 
+    background-color: #e9e9e9;
 }
-  
+
   /*when navigating through the items using the arrow keys:*/
   .autocomplete-active {
-    background-color: DodgerBlue !important; 
-    color: #ffffff; 
+    background-color: DodgerBlue !important;
+    color: #ffffff;
 }
 
 button{
@@ -76,7 +80,7 @@ button{
   background-color: transparent;
   color: white;
   font-size: 13pt;
-  font-weight: bold;    
+  font-weight: bold;
 }
 
 .routeBtn{
@@ -91,4 +95,4 @@ button{
 
 .routeBtn:hover{
   background-color: #55c56f;
-}
\ No newline at end of file
+}
diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html
index 9318092..29eb8e8 100644
--- a/src/app/search/search.component.html
+++ b/src/app/search/search.component.html
@@ -1,15 +1,8 @@
 <div class="searchField">
-	<div id="coordinates">
-		<input *ngIf="photonItemsFrom[0]" hidden id="longFromInput" value="{{ longFrom }}">
-		<input *ngIf="photonItemsFrom[0]" hidden id="latFromInput" value="{{ latFrom }}">
-
-		<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" value="{{ inputFromValue }}">
 		  <div #inputautocompleteList class="autocomplete-items autocomplete-items-from">
-	
+
 			<div *ngFor="let item of nominatimItemsFrom" >
 				{{ item.display_name }}
 				<input type="hidden" value="{{ item.display_name }}">
@@ -17,8 +10,17 @@
 
 			<div *ngFor="let item of photonItemsFrom"
 			(click)="selectPhoton(true, item)">
-				{{ item.properties.name }} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}} 
-			</div>
+        <!--IF TYPE == STREET-->
+        <label *ngIf="item.properties.type == 'street'">
+          {{ item.properties.name }} {{item.properties.housenumber}}<br>
+          {{item.properties.postcode}} {{item.properties.city}} {{item.properties.country}}
+        </label>
+
+        <label *ngIf="item.properties.type != 'street'">
+          {{ item.properties.name }} <br>
+          {{item.properties.street}} {{item.properties.housenumber}} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}}
+        </label>
+      </div>
 
 		</div>
 	</div>
@@ -33,11 +35,20 @@
 
 			<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 }}">
+        <!--IF TYPE == STREET-->
+        <label *ngIf="item.properties.type == 'street'">
+          {{ item.properties.name }} {{item.properties.housenumber}}<br>
+          {{item.properties.postcode}} {{item.properties.city}} {{item.properties.country}}
+        </label>
+
+        <label *ngIf="item.properties.type != 'street'">
+          {{ item.properties.name }} <br>
+          {{item.properties.street}} {{item.properties.housenumber}} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}}
+        </label>
+
 			</div>
 
 		</div>
 	</div>
 </div>
-<button class="routeBtn" (click)="getRoute()">Route</button>
\ No newline at end of file
+<button class="routeBtn" (click)="getRoute()">Route</button>
diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts
index 0578e00..b296ab4 100644
--- a/src/app/search/search.component.ts
+++ b/src/app/search/search.component.ts
@@ -46,6 +46,10 @@ export class SearchComponent{
       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;
       }