trying to get the search feature in locations working along where it …

…adds markers, first commit attempt

src/pages/locations/locations.html

@@ -10,7 +10,7 @@
         </ion-col>
         <ion-col>
           <!-- <ion-buttons end> -->
-            <button ion-button (click)="addMarker()" round>
+            <button ion-button (click)="addMarkerCenter()" round>
               <ion-icon name="add"></ion-icon>
               Add Marker
             </button>
@@ -20,7 +20,7 @@
     </ion-grid>
   </ion-navbar>
   <ion-toolbar color="primary">
-    <ion-searchbar [(ngModel)]="autocomplete.input" (ionInput)="updateSearchResults()" placeholder="Search for item"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="searchTerm" [showCancelButton]="shouldShowCancel" (ionInput)="searchItems()" placeholder="Search for item" (ionCancel)="onCancel($event)"></ion-searchbar>
   </ion-toolbar>
 </ion-header>
 
@@ -31,11 +31,10 @@
       <div #directionsPanel></div>
     </ion-card-content>
   </ion-card>
-
-  <ion-list [hidden]="autocompleteItems.length == 0">
-      <ion-item *ngFor="let item of autocompleteItems" tappable (click)="selectSearchResult(item)">
-        {{ item.description }}
-      </ion-item>
+  <ion-list inset>
+    <ion-item *ngFor="let item of items; let i = index" (click)="clearMarkers(); getLocationInfo(i);">
+      {{ item.item }}
+    </ion-item> 
   </ion-list>
 
   <!---<div id='map'></div>-->

src/pages/locations/locations.ts

@@ -1,7 +1,10 @@
 import { Component, ViewChild, ElementRef, NgZone } from '@angular/core';
-import { NavController } from 'ionic-angular';
+import { NavController, NavParams, Events } from 'ionic-angular';
 //import { GoogleMaps, GoogleMap } from '@ionic-native/google-maps';
 import { Geolocation } from '@ionic-native/geolocation';
+// from search
+import { RestProvider } from '../../providers/rest/rest';
+//import { ItemPage } from '../itemPage/itemPage';
 
 declare var google: any;
 
@@ -18,21 +21,30 @@ export class LocationsPage {
   map: any;
 
   markers: any;
-  autocomplete: any;
-  GoogleAutocomplete: any;
-  GooglePlaces: any;
+  //autocomplete: any;
+  //GoogleAutocomplete: any;
+  //GooglePlaces: any;
   geocoder: any
-  autocompleteItems: any;
+  //autocompleteItems: any;
   //loading: any;
+
+  // these are from search module
+  //public items: any = [];
+  searchTerm: string = '';
+  //public itemInfo: any;
+  public locations: any = [];
+  //public locationsInfo: any;
 
-  constructor(public navCtrl: NavController, public geolocation: Geolocation, public zone: NgZone) {
+  constructor(public navCtrl: NavController, public geolocation: Geolocation, public zone: NgZone, public restProvider: RestProvider, public navParams: NavParams, public event: Events) {
     let elem = document.createElement("div");
-    this.GooglePlaces = new google.maps.places.PlacesService(elem);
-    this.GoogleAutocomplete = new google.maps.places.AutocompleteService();
-    this.autocomplete = { input: '' };
-    this.autocompleteItems = [];
+    //this.GooglePlaces = new google.maps.places.PlacesService(elem);
+    //this.GoogleAutocomplete = new google.maps.places.AutocompleteService();
+    //this.autocomplete = { input: '' };
+    //this.autocompleteItems = [];
     this.markers = [];
     this.geocoder = new google.maps.Geocoder;
+    this.locations = [];
+    // from search
   }
 
      ionViewDidLoad(){
@@ -58,44 +70,33 @@ export class LocationsPage {
           console.log(err);
       });
      }
-
-     updateSearchResults(){
-      if (this.autocomplete.input == '') {
-        this.autocompleteItems = [];
-        return;
+     // these 2 methods are from search
+     public async searchItems() {
+      // clear locations while user types
+      this.locations = [];
+
+      // search connection with our REST provider
+        if (this.searchTerm) {
+          this.restProvider.searchItems(this.searchTerm)
+          .then(data => {
+            this.locations = data;
+            // console.log("data: " , data);
+          });
+
+          console.log("items: " , this.locations);
+        } 
       }
-      this.GoogleAutocomplete.getPlacePredictions({ input: this.autocomplete.input },
-        (predictions, status) => {
-          this.autocompleteItems = [];
-          if(predictions){
-            this.zone.run(() => {
-              predictions.forEach((prediction) => {
-                this.autocompleteItems.push(prediction);
-              });
-            });
-          }
-      });
-    }
 
-    selectSearchResult(item){
-      this.clearMarkers();
-      this.autocompleteItems = [];
-
-      this.geocoder.geocode({'placeId': item.place_id}, (results, status) => {
-        if(status === 'OK' && results[0]){
-          // let position = {
-          //     lat: results[0].geometry.location.lat,
-          //     lng: results[0].geometry.location.lng
-          // };
-          let marker = new google.maps.Marker({
-            position: results[0].geometry.location,
-            map: this.map
-          });
-          this.markers.push(marker);
-          this.map.setCenter(results[0].geometry.location);
+      public async getLocationInfo(i: any) {
+        if (this.locations[i]) {
+          this.locations = this.locations[i].locations;
         }
-      })
-    }
+        console.log("adding markers to map");
+        // for every stored location for a given item, add a marker to the map
+        for(var j = 0; i < this.locations.length; i++) {
+            this.addMarker(this.locations[i].lat, this.locations[i].long, this.locations[i].name);
+        }
+      }
 
     clearMarkers(){
       for (var i = 0; i < this.markers.length; i++) {
@@ -116,16 +117,29 @@ export class LocationsPage {
       });
 
     }
-
-     addMarker(lat, long){
-
+    addMarkerCenter(){
+      // if admin user wants to add locations (will be developed in iteration 3) for now just adds marker to center of map on screen
+      let marker = new google.maps.Marker({
+        map: this.map,
+        animation: google.maps.Animation.DROP,
+        position: this.map.getCenter()
+      });
+
+      let content = "<h4>Information!</h4>";         
+
+      this.addInfoWindow(marker, content);
+
+    }
+
+     addMarker(lat, long, name){
+      // clears old markers from map
       let marker = new google.maps.Marker({
         map: this.map,
         animation: google.maps.Animation.DROP,
         position: new google.maps.LatLng(lat,long)
       });
 
-      let content = "<h4>Info on recycling location <br />Click for directions</h4>";         
+      let content = name;         
 
       this.addInfoWindow(marker, content);