JourneyPlanner #4 - Podpowiadanie wyszukiwanych fraz

W dzisiejszym poście pokażę, jak zacząłem realizować punkt MUST 2 (kto nie wie o czym mowa zapraszam do wpisu JourneyPlanner #2 - Moskwa :-)), czyli wyszukiwanie miejsc na mapie Google Maps. Jest to pierwszy wpis z tego cyklu. Na razie stworzyłem podpowiadanie wyszukiwania fraz w najprostszy możliwy sposób tak aby działało i to nie idealnie. W drugiej części mam w planach nanoszenie wyników wyszukiwania na mapę, a następnie refaktoryzację kodu i sposobu prezentowania tego w szablonie.

Wyszukiwarka

Pierwszym elementem, od którego zacząłem była zmiana definicji pobierania biblioteki Google Maps oraz dodanie w nagłówkach aplikacji formularza wyszukiwania. Zostało to wykonane w ten sposób w plikach ./lib/app/index.html i ./lib/index.html

	<ion-nav-bar class="bar-positive">
	<ion-nav-back-button></ion-nav-back-button>
	<ion-nav-buttons side="left">
	<button menu-toggle="left" class="button button-clear">
	<i class="icon ion-navicon-round"></i>
	</button>
	</ion-nav-buttons>
	<ion-nav-buttons side="right">
	<div class="item-input-inset">
	<label class="item-input-wrapper">
	<i class="icon ion-ios-search placeholder-icon"></i>
	<input type="search" id="topBarSearchInput">
	</label>
	<button id="searchButton" class="button button-clear">
	<i class="icon ion-ios-search"></i>
	</button>
	</div>
	</ion-nav-buttons>
	</ion-nav-bar>

view raw index.html hosted with ❤ by GitHub

<script src="https://maps.googleapis.com/maps/api/js?libraries=places" async defer></script>

view raw mian-index.html hosted with ❤ by GitHub

Jak widać jest to grupa przycisków umieszczona po prawej stronie nagłówka, pozwoliłem sobie dodać do inputa oraz przycisku identyfikatory, które posłużą mi w najbliższym czasie do obsługi formularza.

Kontroler

Kolejną czynnością jaką wykonałem było dodanie kontrolera głównego aplikacji. Dodałem kontroler, który wcześniej w ogóle nie istaniał. Potrzebny jest mi (a przynajmniej w tym momencie tak uważam) do obsługi wstawionego wcześniej formularza. Jako, że chcę aby wpisując dane do pola tekstowego pojawiały się podpowiedzi zgodnie z tym przykładem stworzyłem następujący kontroler:

	export class AppController {
	$scope: ng.IScope;
	$autocomplete : google.maps.places.Autocomplete;
	constructor(private $injector:ng.auto.IInjectorService, public $scope:ng.IScope) {
	'ngInject';
	this.$injector = $injector;
	this.$scope = $scope;
	this.$cordovaGeolocation = this.$injector.get('$cordovaGeolocation');
	this.$scope.$on('$ionicView.enter', () => this.onEnter());
	}
	onEnter() {
	this.$autocomplete = new google.maps.places.Autocomplete(
	(document.getElementById('topBarSearchInput')),
	{types: ['geocode']});
	}
	geolocate() {
	this.$cordovaGeolocation
	.getCurrentPosition(<ngCordova.IGeolocationOptions>{timeout: 10000, enableHighAccuracy: false})
	.then((position) => {
	var geolocation = {
	lat: position.coords.latitude,
	lng: position.coords.longitude
	};
	var circle = new google.maps.Circle({
	center: geolocation,
	radius: position.coords.accuracy
	});
	this.$autocomplete.setBounds(circle.getBounds());
	}, (err) => {
	console.log("unable to find location");
	});
	}
	}

view raw controller.ts hosted with ❤ by GitHub

	// ...
	import {AppController} from './controller';
	// ...
	// ROUTER CONFIG
	mod.config(modConfigRouter);
	mod.controller('AppController', AppController);
	// ...

view raw index.ts hosted with ❤ by GitHub

	export default function($stateProvider) {
	'ngInject';
	return $stateProvider.state('app', {
	abstract: true,
	views: {
	'@': {
	template: require("./index.html"),
	controller: "AppController as appCtrl"
	}
	}
	});
	}

view raw router.config.ts hosted with ❤ by GitHub

Jak widać w samym kontrolerze, widnieje wspomniany przykład przełożony na działanie w klasie. Większość rzeczy została zachowana w identyczny sposób. Warto zwrócić uwagę na linię 16 gdzie zamieszczony jest identyfikator pola tekstowego z nagłówka strony. Do pliku index.ts została dodana definicja kontrolera oraz przypisanie go do modułu głównego, a w konfiguracji załączony został kontroler tak aby widok miał dostęp do jego zawartości. Aby mogło to zadziałać należy (zgodnie z przykładem) do pola tekstowego dodać zdarzenie focus. W przypadku frameworka AngularJs wykonałem to w następujący sposób:

<input type="search" ng-focus="appCtrl.geolocate()" id="topBarSearchInput">

view raw index.html hosted with ❤ by GitHub

W tym momencie po uruchomieniu aplikacji powinniśmy uzyskać następujący efekt podpowiedzi do wpisywanej frazy: