Changes as per new header changes - Search

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174387 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-location.service.ts

 import { Injectable } from '@angular/core';
 import { Http, Headers,RequestOptions } from '@angular/http';
 import { EcmLocation } from './ecm-location';
-import { EmitterService } from '../ecm-search/ecm-search.component';
+import { EventEmitter } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import { EcmStoreModel } from '../ecm-store/ecm-store.model';
 
 @Injectable()
 export class EcmLocationService {
-	pincode;   
-	add:any;
-	public location: EcmLocation;
-	city;
-    loc_data;
-    
-    constructor( public http: Http) {}
+
+    constructor( public http: Http, private store: Store<EcmStoreModel>) {}
     
-    search(nameKey, myArray){   
+    find(nameKey, myArray){   
       for (var i=0; i < myArray.length; i++) { 
         if (myArray[i].types[0] === nameKey) {
             return myArray[i];
         }
+      }
     }
-   }
 
-    getCitydata() {
+    getGeoLocation() {
       let localCity = localStorage.getItem('city');
       
-      if([null, undefined, ""].indexOf(localCity,0) != -1){
+      if([null, undefined, ""].indexOf(localCity,0) != -1) {
       
       		//navigator.geolocation.getCurrentPosition(this.successCallback,this.errorCallback,this.options);
       		//https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyBo62AVqqkEz5Ys9D-dQWE_VF4lVpHaFy0
@@ -34,8 +32,8 @@ export class EcmLocationService {
           		response => {
               		if(response.status == 200){
               		    let data = response.json();               
-              		    console.log('data.......'+data.location.lng);                
-              		    this.successCallback(data);
+              		    console.log('geolocate -- data.......'+ JSON.stringify(data) );                
+              		    this.displayLocation(data);
               		}
       	  		},
           		error => {
@@ -46,54 +44,6 @@ export class EcmLocationService {
           // do something when you already have the location
       }
     }
-   
-    getAddress() {
-    	return this.add;
-    }
-    
-    getCity(){
-    	return this.city;
-    }
-    
-    displayLocation = (latitude,longitude) => {
-
-      this.http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+','+longitude+'&sensor=true').subscribe(
-          response => {
-              if(response.status == 200){
-                  let data = response.json();
-                  this.loc_data=data;
-                  console.log(data);                  
-                  if(data)
-                  {
-                   var resultObject = this.search("locality", data.results[0].address_components);
-                   this.city=resultObject.long_name;
-                  }                 
-                  localStorage.setItem('mycity',this.city);                  
-                  location['address'] =  data.results[0].formatted_address;
-                  this.add=data.results[0].formatted_address;
-                  // console.log(data.results[0].formatted_address);
-                   //console.log(this.add);
-              }
-              localStorage.setItem('location', JSON.stringify(location));
-              EmitterService.get("selectedCity").emit(location['city']);
-      	  },
-          error => {
-        	 alert(error.text());
-      	  }
-      );
-    }
-    
-    successCallback = (position)=> {
-            //let latitude = position.coords.latitude;
-            //let longitude = position.coords.longitude;
-            
-            let latitude = position.location.lat;
-            let longitude = position.location.lng;
-            location['latitude'] = latitude;
-            location['longitude'] = longitude;
-            console.log(latitude+'  '+longitude)
-            this.displayLocation(latitude,longitude);
-    }
 
     errorCallback = (error) => {
             let errorMessage = 'Unknown error';
@@ -116,4 +66,58 @@ export class EcmLocationService {
             timeout: 1000,
             maximumAge: 0
     }; 
+
+    displayLocation = (position) => {
+
+      let ecmLocation : EcmLocation = new EcmLocation();
+      ecmLocation.latitude = position.location.lat;
+      ecmLocation.longitude = position.location.lng;
+
+      this.http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng='+position.location.lat+','+position.location.lng+'&sensor=true').subscribe(
+          response => {
+              if(response.status == 200){
+                  let data = response.json();
+                  //this.loc_data=data;
+                  console.log('geocode -- data.......'+JSON.stringify(data));             
+                  console.log('geocode -- data keys.......'+Object.keys(data));             
+                  if(data)
+                  {
+                   var resultObject = this.find("locality", data.results[0].address_components);
+                   //this.city = resultObject.long_name;
+                   ecmLocation.city = resultObject.long_name;
+                   //this.add = data.results[0].formatted_address;
+                   ecmLocation.address =  data.results[0].formatted_address;
+                  }   
+
+                  this.store.dispatch({type: 'CLEAR_LOCATION'});
+                  this.store.dispatch({type: 'ECMLOCATION', payload: ecmLocation});
+
+                  //EmitterService.get("selectedLocation").emit(ecmLocation);                 
+                  //localStorage.setItem('mycity',this.city);                  
+                  // console.log(data.results[0].formatted_address);
+                   //console.log(this.add);
+              }
+              //localStorage.setItem('location', JSON.stringify(location));
+              //EmitterService.get("selectedCity").emit(location['city']);
+          },
+          error => {
+           alert(error.text());
+          }
+      );
+    }
+    
 }
+/*
+
+@Injectable()
+export class EmitterService {
+  private static _emitters: { [channel: string]: EventEmitter<any> } = {};
+  
+  static get(channel: string): EventEmitter<any> {
+    if (!this._emitters[channel])
+      this._emitters[channel] = new EventEmitter();
+    return this._emitters[channel];
+  }
+}
+
+*/
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-location.ts

-export interface EcmLocation {
-	latitude : string;
- 	longitude : string;
-  	address: string;
-  	pincode: number;
-  	city: string;
+export class EcmLocation {
+	public latitude : string;
+ 	public longitude : string;
+  	public address: string;
+  	public pincode: number;
+  	public city: string;
+
+  	public toString(){
+  		return "[" + this.latitude + "][" + this.longitude + "][" + this.address + "][" + this.pincode + "][" + this.city + "]";
+  	}
 }

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.css

@@ -127,7 +127,9 @@
 }
 
 .location{
- 	width: calc( 25% - 20px );
+    line-height: 60px;
+    height: 60px;
+    width: calc( 25% - 20px );
     position: relative;
     display: inline-block;
     padding: 0;
@@ -141,7 +143,8 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: calc( 100% - 50px );
+    max-width: calc( 100% - 50px );
+    width: auto;
     vertical-align: middle;
     font-size: 12px;
     color: #fff;
@@ -149,6 +152,7 @@
     margin: 0;
     margin-left: -5px;
 }
+
 .location-arrow{
 	vertical-align: middle;
     color: #fff;

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.html

@@ -2,15 +2,9 @@
 	<span class="search-page-border">
 	<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms" name="search-terms" /> 
  	<span class="search-which-border">
-		<div #locateMeButton class="locate-me">Locate Me</div>
-		<div class="locate-handle" (click)="getAddress();" ></div> 
+		<div class="locate-me">{{ userLocation ? userLocation.city : 'Locate Me' }}</div>
+		<div class="locate-handle" (click)="loacteMe();" ></div> 
 		<img class="img-locate" title="Locate Me" /> 
-		<select name="search-which" class="search-which">
-			<option value="members">Mumbai</option>
-		  	<option value="groups">Pune</option>
-		  	<option value="forums">Nashik</option>
-		  	<option value="posts">Nagpur</option>
-		</select>
 	</span>
 	</span>
 	<button md-raised-button class="search-submit" (click)="search(myInput.value)">Search</button>
@@ -18,9 +12,9 @@
 <div *ngIf="headerState === 'fixed'" class="sb-search">
 	<form>
 		<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms-fixed" value="" name="search" id="search" /> 
-		<div md-ripple class="location">
+		<div md-ripple class="location" (click)="loacteMe();">
 			<img class="location-img-32"/> 
-			<span class="location-text">Neelkanth Business Park, Vidyavihar (W)</span>
+			<span class="location-text">{{ userLocation ? userLocation.address : 'Locate Me' }}</span>
 			<i class="material-icons location-arrow">keyboard_arrow_down</i>
 		</div>
 		<input class="sb-search-submit" type="submit" (click)="search(myInput.value)">		

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.ts

@@ -4,6 +4,10 @@ import { EcmLocation } from './ecm-location';
 import { EcmLocationService } from './ecm-location.service';
 import { SearchService } from './ecm-search-result/search.service';
 import { Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { Store } from '@ngrx/store';
+
+import { EcmStoreModel } from '../ecm-store/ecm-store.model';
 
 @Component({
   selector: 'ecm-search',
@@ -29,52 +33,54 @@ import { Router } from '@angular/router';
    providers: [EcmLocationService]
 })
 export class ECMSearchComponent implements OnInit {
+
   @Input('compFadeState') compFadeState: string = 'false';
   @Input('headerState') headerState: string = 'relative';
-  @ViewChild('locateMeButton') locateMeButton;
   @ViewChild('myInput') searchBar;
-  public selectedCity: string;
-  public pincode;
-  public form_add;
+
+  public storeUserLocation :  Observable<EcmLocation>;
+  public userLocation : EcmLocation;
+
   search_key;
  
   selectedPlace = 'Mumbai';
-  constructor(private _ngLocation: EcmLocationService, private search_service: SearchService, private router: Router) {}
+  constructor(private locationService: EcmLocationService, private search_service: SearchService, private router: Router, private store: Store<EcmStoreModel>) {}
   ngOnInit() {
-      this.selectedCity = localStorage.getItem('city');
-      this.search_key=this.search_service.getSearch(); 
-      
+      //this.selectedCity = localStorage.getItem('city');
+      this.search_key = this.search_service.getSearch(); 
+
+      this.storeUserLocation = this.store.select('location');
+      this.storeUserLocation.subscribe( userLocation => {
+            //console.log( 'ngOnInit >' + userLocation );
+            this.userLocation = userLocation;
+      });
   }
   
   ngAfterViewChecked() {
-      if(this.form_add)
-         this.searchBar.nativeElement.value=this.form_add;  
+      if(this.search_key)
+         this.searchBar.nativeElement.value=this.search_key;  
+      
+      this.storeUserLocation = this.store.select('location');
+      this.storeUserLocation.subscribe( userLocation => {
+             //console.log( 'ngAfterViewChecked >' + userLocation );
+            this.userLocation = userLocation;
+      });
   }
   
   ngAfterViewInit() {
-  	  if(this.search_key && this.searchBar)
-      	 this.searchBar.nativeElement.value=this.search_key;     
-      if(localStorage.getItem('mycity'))
-        if(this.locateMeButton)
-         this.locateMeButton.nativeElement.textContent=localStorage.getItem('mycity');      	 	 
-     
+      if(this.search_key && this.searchBar)
+         this.searchBar.nativeElement.value=this.search_key;     
   }
   
-  getAddress() {
-      this._ngLocation.getCitydata();
-      EmitterService.get("selectedCity").subscribe( data =>{
-               //this.form_add=this._ngLocation.getAddress();               
-               let myLocation=this._ngLocation.getAddress();
-               localStorage.setItem('myLocation',myLocation);
-               this.locateMeButton.nativeElement.textContent=this._ngLocation.getCity();
-      });
+  loacteMe() {
+       this.locationService.getGeoLocation();
   }
   
   search(value) { 
   	 if(value.trim())
      {
-  	  this.search_service.setSearch(value.trim());
-  	  this.router.navigate(['/search',value.trim()]);
+        this.search_service.setSearch(value.trim());
+        this.router.navigate(['/search',value.trim()]);
   	 } 
   }
   
@@ -83,14 +89,4 @@ export class ECMSearchComponent implements OnInit {
   }
 
 }
- 
-@Injectable()
+ 
\ No newline at end of file
-export class EmitterService {
-  private static _emitters: { [channel: string]: EventEmitter<any> } = {};
-  
-  static get(channel: string): EventEmitter<any> {
-    if (!this._emitters[channel])
-      this._emitters[channel] = new EventEmitter();
-    return this._emitters[channel];
-  }
-}