diff --git a/src/app/interfaces/photon.ts b/src/app/interfaces/photon.ts deleted file mode 100644 index 91d40d6..0000000 --- a/src/app/interfaces/photon.ts +++ /dev/null @@ -1,32 +0,0 @@ -interface PhotonGeometry { - coordinates: Array; - type?: string; -} - -interface PhotonProperties { - osm_id?: number; - osm_type?: string; - extent?: Array; - 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; - type?: string; -} diff --git a/src/app/interfaces/searchResponse.ts b/src/app/interfaces/searchResponse.ts new file mode 100644 index 0000000..a0a0703 --- /dev/null +++ b/src/app/interfaces/searchResponse.ts @@ -0,0 +1,8 @@ +export interface SearchWay{ + id: number; + name: string; +} + +export interface SearchResponse{ + ways: Array; +} diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts index 0e1c3a3..2060143 100644 --- a/src/app/map/map.component.ts +++ b/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 = 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()) /* diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html index eb619dd..13d0615 100644 --- a/src/app/search/search.component.html +++ b/src/app/search/search.component.html @@ -1,46 +1,25 @@
+
- -
- - -
- - - - + +
+
+
-
+ +
- +
- -
- - - - - -
- +
+ +
- + + + diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index 902d32e..6be660a 100644 --- a/src/app/search/search.component.ts +++ b/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(); - @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 = p.geometry?.coordinates[0]; - this.latFrom = p.geometry?.coordinates[1]; - this.inputFromValue = p.properties.name; - this.inputFromValue = this.getFormattedPhotonValue(p); - this.photonItemsFrom = []; - } else { - this.selectedPhotonTo = p; - this.longTo = p.geometry?.coordinates[0]; - this.latTo = p.geometry?.coordinates[1]; - this.inputToValue = 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 = this.photonItemsFrom[0].geometry?.coordinates![0]; - this.latFrom = this.photonItemsFrom[0].geometry?.coordinates![1]; - } else { - this.photonItemsTo.push(feature); - this.longTo = this.photonItemsFrom[0].geometry?.coordinates![0]; - this.latTo = 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); diff --git a/src/app/services/photon.service.spec.ts b/src/app/services/photon.service.spec.ts deleted file mode 100644 index 889bf14..0000000 --- a/src/app/services/photon.service.spec.ts +++ /dev/null @@ -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(); - }); -}); diff --git a/src/app/services/photon.service.ts b/src/app/services/photon.service.ts deleted file mode 100644 index 1bcf280..0000000 --- a/src/app/services/photon.service.ts +++ /dev/null @@ -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 { - return this.http.get("https://photon.komoot.io/api/?q=" + queryString + "&limit=10&zoom=12"); - } - -} diff --git a/src/app/services/python-backend.service.ts b/src/app/services/python-backend.service.ts index e279d66..87ca8b6 100644 --- a/src/app/services/python-backend.service.ts +++ b/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 { - console.log(this.url + fromWayLat + "/" + fromWayLon + "/" + toWayLat + "/" + toWayLon); - return this.http.get(this.url + fromWayLat + "/" + fromWayLon + "/" + toWayLat + "/" + toWayLon); + sendRouteQueryRequest(wayStart: string, wayEnd: string): Observable { + console.log(this.urlRoute + wayStart + "/" + wayEnd); + return this.http.get(this.urlRoute + wayStart + "/" + wayEnd); + } + sendSearchQueryRequest(query: string, limit: string): Observable{ + console.log(this.urlSearch + query + "/" + limit); + return this.http.get(this.urlSearch + query + "/" + limit); } } diff --git a/src/assets/images/loading.gif b/src/assets/images/loading.gif new file mode 100644 index 0000000..9590093 Binary files /dev/null and b/src/assets/images/loading.gif differ