added search

src/app/interfaces/photon.ts

@@ -1,32 +0,0 @@
-interface PhotonGeometry {
-  coordinates: Array<number>;
-  type?: string;
-}
-
-interface PhotonProperties {
-  osm_id?: number;
-  osm_type?: string;
-  extent?: Array<number>;
-  country?: string;
-  osm_key?: "place";
-  countrycode?: string;
-  osm_value?: string;
-  name?: string;
-  type?: string;
-  postcode?: string;
-  city?: string;
-  housenumber?: number;
-  street?: string;
-  state?: string;
-}
-
-export interface Photon {
-  properties: PhotonProperties;
-  geometry?: PhotonGeometry;
-  type?: string;
-}
-
-export interface PhotonFeatureCollection {
-  features?: Array<Photon>;
-  type?: string;
-}

src/app/interfaces/searchResponse.ts

@@ -0,0 +1,8 @@
+export interface SearchWay{
+  id: number;
+  name: string;
+}
+
+export interface SearchResponse{
+  ways: Array<SearchWay>;
+}

src/app/map/map.component.ts

@@ -12,6 +12,7 @@ import LineString from 'ol/geom/LineString';
 import { Feature } from 'ol';
 import Geometry from 'ol/geom/Geometry';
 import { RouteResponse } from '../interfaces/routeResponse';
+import {Circle, Fill, Stroke, Style} from 'ol/style';
 
 @Component({
   selector: 'app-map',
@@ -22,6 +23,14 @@ export class MapComponent implements AfterViewInit {
 
   map: Map;
 
+  lineStyle: Style = new Style({
+    stroke: new Stroke({
+      color: "blue",
+      width: 2
+    })
+  })
+
+
   ngAfterViewInit() {
     this.map = new Map({
       target: 'map',
@@ -54,14 +63,15 @@ export class MapComponent implements AfterViewInit {
     console.log(routeResponse);
 
     const nodes = routeResponse.nodes || [];
-
     const fCoordinates: number[][] = nodes.map(node => (transform([node.lon, node.lat], 'EPSG:4326', 'EPSG:3857')));
     const lineString: LineString = new LineString(fCoordinates);
     const feature: Feature<Geometry> = new Feature({ geometry: lineString });
+    feature.setStyle(this.lineStyle);
     const vectorSource = new VectorSource({ features: [ feature ]});
     const vectorLayer = new VectorLayer({ source: vectorSource });
+    this.map.removeLayer(this.map.getLayers().item(1))
     this.map.addLayer(vectorLayer);
-
+    
    // this.features = new GeoJSON().readFeatures(new openLayersGeoJSON())
 
    /*

src/app/search/search.component.html

@@ -1,46 +1,25 @@
 
 <div class="searchField">
+
 	<div class="autocomplete">
-	  	<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">
-
-      <!-- PHOTON -->
-			<div *ngFor="let item of photonItemsFrom"
-			(click)="selectPhoton(true, item);" >
-        <!--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>
+	  	<input #inputFrom (click)="getValue(inputFrom.value, true)" (input)="getValue(inputFrom.value, true)" type="text" name="inputFrom" id="inputFrom" placeholder="From" value="{{ inputFromValue }}">
+		  <div class="autocomplete-items autocomplete-items-from">
+      <div *ngFor="let item of searchItemsFrom" (click)="select(true, item)">
+        <label>{{ item.name }}</label>
       </div>
-
 		</div>
 	</div>
+
+
 	<div class="autocomplete" id="autocompleteTo">
-		<input #inputTo (click)="getValue(inputTo.value, false)" (change)="getValue(inputTo.value, false)" type="text" name="inputTo" id="inputTo" placeholder="To" value="{{ inputToValue }}">
+		<input #inputTo (click)="getValue(inputTo.value, false)" (input)="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 photonItemsTo"
-			(click)="selectPhoton(false, item)">
-        <!--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 *ngFor="let item of searchItemsTo" (click)="select(false, item)">
+        <label>{{ item.name }}</label>
+      </div>
 		</div>
 	</div>
 </div>
-<button class="routeBtn" (click)="getRoute()">Route</button>
+
+<button *ngIf="getRouteBtnEnabled" class="routeBtn" (click)="getRoute()">Route</button>
+<img *ngIf="!getRouteBtnEnabled"src="/assets/images/loading.gif" style="margin-top:15px; margin-left:10px;width:25px;height: 25px;" />

src/app/search/search.component.ts

@@ -1,9 +1,8 @@
-import { Component, ElementRef, Output, ViewChild } from '@angular/core';
-import { Photon, PhotonFeatureCollection } from '../interfaces/photon';
-import { PhotonService } from '../services/photon.service';
+import { Component, Output } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { PythonBackendService } from '../services/python-backend.service';
 import { RouteResponse } from '../interfaces/routeResponse';
+import { SearchResponse, SearchWay } from '../interfaces/searchResponse';
 
 @Component({
   selector: 'app-search',
@@ -13,67 +12,31 @@ import { RouteResponse } from '../interfaces/routeResponse';
 export class SearchComponent {
 
   @Output() emitter = new EventEmitter<RouteResponse>();
-  @ViewChild("inputautocompleteList") autocompleteList: ElementRef;
 
+  searchItemsFrom: SearchWay[] = [];
+  searchItemsTo: SearchWay[] = [];
 
-
-  photonItemsFrom: Photon[] = [];
-  photonItemsTo: Photon[] = [];
+  selectedSearchWayFrom: SearchWay;
+  selectedSearchWayTo: SearchWay;
 
   inputFromValue: string;
   inputToValue: string;
 
-  longFrom: number = 0;
-  latFrom: number = 0;
-  longTo: number = 0;
-  latTo: number = 0;
-
-  selectedPhotonFrom: Photon;
-  selectedPhotonTo: Photon;
+  getRouteBtnEnabled: boolean = true;
 
   constructor(
-    private photonService: PhotonService,
     private pythonBackendService: PythonBackendService,
   ) { }
 
-  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;
-      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 = [];
+  select(isFrom: boolean, item: SearchWay): void{
+    if(isFrom){
+      this.selectedSearchWayFrom = item;
+      this.inputFromValue = item.name;
+      this.searchItemsFrom = [];
+    }else{
+      this.selectedSearchWayTo = item;
+      this.inputToValue = item.name;
+      this.searchItemsTo = [];
     }
   }
 
@@ -81,39 +44,28 @@ export class SearchComponent {
    * Gets called in "app.component.html" when an input changes its value
    */
   getValue(value: string, isFrom: boolean): void {
+    this.searchItemsFrom = [];
+    this.searchItemsTo = [];
 
-    //this.updateAutoCompleteList([{display_name: 'Hallo'}, {display_name: 'Test2'}], [{display_name: 'Halload'}, {display_name: 'Test4'}]);
-
-    /*
-    this.nominatimService.sendQueryRequest(valueFrom)
-    .subscribe((response: Nominatim[]) => this.nominatimItemsFrom = response);
-
-    this.nominatimService.sendQueryRequest(valueTo)
-    .subscribe((response: Nominatim[]) => this.nominatimItemsTo = response);
-    */
-
-    this.photonItemsFrom = [];
-    this.photonItemsTo = [];
-
-    this.photonService.sendQueryRequest(value)
-      .subscribe((response: PhotonFeatureCollection) => response.features?.forEach(feature => {
-        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.pythonBackendService.sendSearchQueryRequest(value, "10")
+    .subscribe((response: SearchResponse) => response.ways?.forEach(way =>{
+      if(isFrom){
+        this.searchItemsFrom.push(way);
+        this.selectedSearchWayFrom = way;
+      }else{
+        this.searchItemsTo.push(way);
+        this.selectedSearchWayTo = way;
+      }
+    }));
   }
 
   getRoute(): void{
-    this.pythonBackendService.sendQueryRequest(this.latFrom.toString(), this.longFrom.toString(), this.latTo.toString(), this.longTo.toString())
+    this.getRouteBtnEnabled = false;
+    this.pythonBackendService.sendRouteQueryRequest(this.selectedSearchWayFrom.id.toString(), this.selectedSearchWayTo.id.toString())
       .subscribe((response: RouteResponse) => {
+        console.log(response);
         this.emitter.emit(response);
+        this.getRouteBtnEnabled = true;
         /*
         this.mapComponent.updateSidebar(response);
         this.mapComponent.drawPath(response);

src/app/services/photon.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { PhotonService } from './photon.service';
-
-describe('PhotonService', () => {
-  let service: PhotonService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(PhotonService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/services/photon.service.ts

@@ -1,23 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { PhotonFeatureCollection } from '../interfaces/photon';
-import { Observable } from 'rxjs';
-
-/**
- * Communicates with Photon (https://photon.komoot.io/)
- */
-@Injectable({
-  providedIn: 'root'
-})
-export class PhotonService{
-
-  constructor(private http: HttpClient) { }
-
-  /**
-   * Sends a query request to Photon and gets response (https://photon.komoot.io/)
-   */
-  sendQueryRequest(queryString: string): Observable<PhotonFeatureCollection> {
-    return this.http.get<PhotonFeatureCollection>("https://photon.komoot.io/api/?q=" + queryString + "&limit=10&zoom=12");
-  }
-
-}

src/app/services/python-backend.service.ts

@@ -2,20 +2,25 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { RouteResponse } from '../interfaces/routeResponse';
 import { Observable } from 'rxjs';
+import { SearchResponse } from '../interfaces/searchResponse';
 
 @Injectable({
   providedIn: 'root'
 })
 export class PythonBackendService {
-  url: string = "http://127.0.0.1:5555/getRouteByCoordinates/"
-
+  urlRoute: string = "http://127.0.0.1:5555/getRoute/"
+  urlSearch: string = "http://127.0.0.1:5555/search/"
   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(fromWayLat: string, fromWayLon: string, toWayLat: string, toWayLon: string): Observable<RouteResponse> {
-    console.log(this.url + fromWayLat + "/" + fromWayLon + "/" + toWayLat + "/" + toWayLon);
-    return this.http.get<RouteResponse>(this.url + fromWayLat + "/" + fromWayLon + "/" + toWayLat + "/" + toWayLon);
+  sendRouteQueryRequest(wayStart: string, wayEnd: string): Observable<RouteResponse> {
+    console.log(this.urlRoute + wayStart + "/" + wayEnd);
+    return this.http.get<RouteResponse>(this.urlRoute + wayStart + "/" + wayEnd);
+  }
+  sendSearchQueryRequest(query: string, limit: string): Observable<SearchResponse>{
+    console.log(this.urlSearch + query + "/" + limit);
+    return this.http.get<SearchResponse>(this.urlSearch + query + "/" + limit);
   }
 }