From 789e719b598fe87f7ba33db8012a95d94ff0c026 Mon Sep 17 00:00:00 2001 From: Ratnadeep Rajendra Kharade <92khra1mst@hft-stuttgart.de> Date: Tue, 7 Jan 2020 11:25:22 +0100 Subject: [PATCH] integrated search from search_functionality branch --- src/app/hirebike/hirebike.page.html | 9 +++ src/app/hirebike/hirebike.page.ts | 116 ++++++++++++++++++++++++++++ 2 files changed, 125 insertions(+) diff --git a/src/app/hirebike/hirebike.page.html b/src/app/hirebike/hirebike.page.html index 12f4a51..9ebd46b 100644 --- a/src/app/hirebike/hirebike.page.html +++ b/src/app/hirebike/hirebike.page.html @@ -10,6 +10,15 @@ </ion-header> <ion-content> + <ion-searchbar [(ngModel)]="searchValue" (search)="searchValueChanged()"></ion-searchbar> + <div *ngIf="isSearched"> + <ion-list> + <ion-item *ngFor="let item of list_to_show; let i = index"> + <ion-label (click)="click_item(item)" [innerHTML]="item.address.city +', '+ item.address.district+', '+item.address.street"></ion-label> + </ion-item> + </ion-list> + </div> + <!--div> <ion-item *ngIf="!isBikeHired"> <ion-input type="text" [(ngModel)]="Destination" placeholder="Enter Destination"></ion-input> diff --git a/src/app/hirebike/hirebike.page.ts b/src/app/hirebike/hirebike.page.ts index ace4f14..240bf43 100644 --- a/src/app/hirebike/hirebike.page.ts +++ b/src/app/hirebike/hirebike.page.ts @@ -844,6 +844,122 @@ export class HirebikePage implements OnInit { }); } + click_item(item) { + console.log(item); + var geocoder = this.platform.getGeocodingService(), + parameters = { + locationid: item.locationId, + gen: '8' + }; + + geocoder.geocode(parameters, + (result) => { + this.isSearched = false; + let coord = { + lat : result.Response.View[0].Result[0].Location.DisplayPosition.Latitude, + lng : result.Response.View[0].Result[0].Location.DisplayPosition.Longitude + } + this.destinationPosition = { lat: coord.lat, lng: coord.lng }; + console.log(result.Response.View[0].Result[0].Location.DisplayPosition); + if (this.destinationMarker) { + this.destinationMarker.setGeometry({ lat: coord.lat, lng: coord.lng }) + } else { + let icon = new H.map.Icon('../../../assets/images/current_location.png'); + // Create a marker using the previously instantiated icon: + this.destinationMarker = new H.map.Marker({ lat: coord.lat, lng: coord.lng }, { icon: icon }); + // Add the marker to the map: + if (!this.locationsGroup) { + this.locationsGroup = new H.map.Group(); + } + this.locationsGroup.addObjects([this.destinationMarker]); + this.setZoomLevelToPointersGroup(); + } + }, function (error) { + console.log(error); + }); + } + + + + + + + + AUTOCOMPLETION_URL = 'https://autocomplete.geocoder.api.here.com/6.2/suggest.json'; + ajaxRequest = new XMLHttpRequest(); + query = ''; + isSearched = false; + + /** + * If the text in the text box has changed, and is not empty, + * send a geocoding auto-completion request to the server. + * + * @param {Object} textBox the textBox DOM object linked to this event + * @param {Object} event the DOM event which fired this listener + */ + autoCompleteListener(searchValue) { + + if (this.query != searchValue) { + if (searchValue.length >= 1) { + + /** + * A full list of available request parameters can be found in the Geocoder Autocompletion + * API documentation. + * + */ + var params = '?' + + 'query=' + encodeURIComponent(searchValue) + // The search text which is the basis of the query + '&beginHighlight=' + encodeURIComponent('<mark>') + // Mark the beginning of the match in a token. + '&endHighlight=' + encodeURIComponent('</mark>') + // Mark the end of the match in a token. + '&maxresults=5' + // The upper limit the for number of suggestions to be included + '&prox=' + this.currentUserPosition.lat + ',' + this.currentUserPosition.lng + ',10000' + + // in the response. Default is set to 5. + '&app_id=' + 'YSAnHxghC6xWxaZ7Wehn' + + '&app_code=' + 'mQFi1FqoEypbfQDJjMENPg'; + let bikeReservationStatusApi = this.httpClient.get(this.AUTOCOMPLETION_URL + params); + bikeReservationStatusApi.subscribe((resp: any) => { + console.log('Search Results', resp); + this.list_to_show = resp.suggestions; + this.isSearched = true; + }, (bikeDetailsError) => { + console.log(bikeDetailsError); + }); + } + } + } + list_to_show = []; + searchValue = ''; + searchValueChanged() { + console.log(this.searchValue); + // var geocodingParams = { + // searchText: this.searchValue + // }; + this.autoCompleteListener(this.searchValue); + // this.geocoder.geocode(geocodingParams, this.onSearchResult, function(e) { + // console.log(e); + // }); + } + + // Get an instance of the geocoding service: + geocoder: any; + + onSearchResult(result) { + var locations = result.Response.View[0].Result, + position, + marker; + + console.log(result); + // Add a marker for each location found + // for (let i = 0; i < locations.length; i++) { + // position = { + // lat: locations[i].Location.DisplayPosition.Latitude, + // lng: locations[i].Location.DisplayPosition.Longitude + // }; + // marker = new H.map.Marker(position); + // this.map.addObject(marker); + // } + } + ionViewDidLeave() { if (this.mapElement) { this.mapElement.nativeElement.remove(); -- GitLab