ridenow map

src/pages/confirmride/confirmride.ts

@@ -27,7 +27,7 @@ export class ConfirmridePage {
         this.book = this.data.getbookingData()
         console.log(this.book)
 
-        var bdata = { 'book_date': this.book.date, 'drop_area': this.book.dropArea, 'pickup_area': this.book.pickArea, 'taxi_type': this.book.carDetails.car_type, 'amount': '', 'km': '', 'promocode': this.book.promocode, 'token': this.local.token, 'userid': this.local.id, 'type': 'later' }
+        var bdata = { 'book_date': this.book.date, 'drop_area': this.book.dropArea, 'pickup_area': this.book.pickArea, 'taxi_type': this.book.carDetails.car_type, 'amount': '', 'km': '', 'promocode': this.book.promocode, 'token': this.local.token, 'userid': this.local.id, 'type': 'later', 'drivers': [] }
 
         this.myservice.load_post(bdata, 'book_cab').subscribe(response => {
           this.myservice.hide_loader()

src/pages/home/home.ts

@@ -30,6 +30,7 @@ export class HomePage {
   locForm: FormGroup
   geocoder: any;
   local:user
+  directionsDisplay:any;
 
   constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public storage: Storage, private geolocation: Geolocation, private firebase: fireService, private db: AngularFireDatabase, private formBuilder: FormBuilder, private data: dataService, private myservice:Myservice) {
 
@@ -40,9 +41,6 @@ export class HomePage {
   }
 
   ionViewDidEnter() {
-    this.myservice.load_post({},'test').subscribe(response=>{
-      
-    })
     this.data.setbookingData('')
 
     this.storage.get('user_data').then(data=>{
@@ -109,7 +107,6 @@ export class HomePage {
       this.markers[0].setMap(null);
     }
     var place = autocomplete.getPlace();
-    console.log(place)
     var lat = place.geometry.location.lat();
     var lng = place.geometry.location.lng();
     
@@ -126,25 +123,27 @@ export class HomePage {
     if (type == 0) {
       this.p_lat = lat
       this.p_lng = lng
+
       this.markers[1] = marker
       this.locForm.controls['pickLoc'].setValue(place.name)
     }
     else if (type == 1) {
       this.d_lat = lat
       this.d_lng = lng
+
       this.markers[2] = marker
       this.locForm.controls['dropLoc'].setValue(place.name)
     }
 
     if (this.p_lat && this.d_lat) {
       var directionsService = new google.maps.DirectionsService;
-      var directionsDisplay = new google.maps.DirectionsRenderer;
-      directionsDisplay.setMap(this.map);
+
+      this.directionsDisplay.setMap(this.map);
 
       var start = new google.maps.LatLng(this.p_lat, this.p_lng);
       var dest = new google.maps.LatLng(this.d_lat, this.d_lng);
 
-      this.calculateAndDisplayRoute(directionsService, directionsDisplay, start, dest);
+      this.calculateAndDisplayRoute(directionsService, this.directionsDisplay, start, dest);
     }
     else{
       this.loadMap(lat,lng)
@@ -167,14 +166,17 @@ export class HomePage {
     this.markers.push(marker)
 
     this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
+
     marker.setMap(this.map);
     for (var i = 0; i < this.driverMarkers.length; i++) {
       this.driverMarkers[i].setMap(this.map);
     }
+
+    this.directionsDisplay = new google.maps.DirectionsRenderer
   }
 
   calculateAndDisplayRoute(directionsService, directionsDisplay, start, dest) {
-
+    console.log(this.markers)
     for (var i = 0; i < this.markers.length; i++) {
       if (this.markers[i])
       this.markers[i].setMap(null);

src/pages/map/map.html

 <ion-header class="jr_theme_color jr_header">
-    <button ion-button class="jr_left jr_header_btn jr_back_icon" (click)="goBack()"></button>
+    <!-- <button ion-button class="jr_left jr_header_btn jr_back_icon" (click)="goBack()"></button> -->
     <div class="jr_header_title">
       <h4>Map</h4>
     </div>
@@ -9,16 +9,16 @@
 
 <ion-content>
     <div #map id="map"></div>
-    <div class="jr_bottom_distance_card">
+    <!-- <div class="jr_bottom_distance_card">
       <div class="jr_bottom_inside">
-        <input class="jr_dest_input from" placeholder="HSR Layout, Kormangala,Bengalure">
+        <input class="jr_dest_input from" placeholder="HSR Layout, Kormangala,Bengalure" [(ngModel)]="bookData.">
         <input class="jr_dest_input to" placeholder="Jalihalli, Outercity, Bengaluru">
       </div>
-    </div>
+    </div> -->
     
 </ion-content>
 <ion-footer>
   <div class="jr_bottom_button_bay">
-      <button ion-button class="jr_offer_ride2">Cancel</button>
+      <button ion-button class="jr_offer_ride2" (click)="cancel()">Cancel</button>
     </div>
   </ion-footer>

src/pages/map/map.ts

 import { Component, ViewChild, ElementRef } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { dataService } from "../../providers/common.service";
+import * as firebase from 'firebase';
+import { Geolocation } from '@ionic-native/geolocation';
+
 declare var google;
 @IonicPage()
 @Component({
@@ -9,16 +13,51 @@ declare var google;
 export class MapPage {
   @ViewChild('map') mapElement: ElementRef;
   map: any;
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  directionsDisplay: any;
+  bookData:any;
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, private data: dataService, private geolocation: Geolocation) {
   }
 
-  ionViewDidLoad() {
-    this.loadMap();
+  ionViewWillEnter(){
+    this.geolocation.getCurrentPosition().then((resp) => {
+      this.loadMap(resp.coords.latitude, resp.coords.longitude);
+    }).catch((error) => {
+      console.log('Error getting location', error);
+    });
   }
 
-  loadMap(){
+  ionViewDidEnter(){
+    var driver = this.data.getdriverData();
+    this.bookData = this.data.getbookingData();
+    console.log(this.bookData)
+    var This = this;
+
+    firebase.database().ref().child('/drivers/').orderByChild("id").equalTo(Number(driver.driverId)).on("value", function (snapshot) {
+      var res_arr = (<any>Object).entries(snapshot.val()).map(e => Object.assign(e[1], { key: e[0] }));
+      console.log(res_arr[0])
+      var directionsService = new google.maps.DirectionsService;
+      
+      This.directionsDisplay.setMap(This.map);
       
-    let latLng = new google.maps.LatLng(-34.9290, 138.6010);
+      var pickLoc = new google.maps.LatLng(This.bookData.pickLat, This.bookData.pickLng);
+      var driverLoc = new google.maps.LatLng(res_arr[0].lat, res_arr[0].lng);
+      
+      // if (google.maps.geometry.spherical.computeDistanceBetween(driverLoc, pickLoc) < 50) {
+        
+      // }
+
+      This.calculateAndDisplayRoute(directionsService, This.directionsDisplay, pickLoc, driverLoc);
+    });
+  }
+
+  // ionViewDidLoad() {
+  //   this.loadMap();
+  // }
+
+  loadMap(lat,lng){
+ 
+    let latLng = new google.maps.LatLng(lat, lng);
  
     let mapOptions = {
       center: latLng,
@@ -28,6 +67,31 @@ export class MapPage {
  
     this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
 
+    this.directionsDisplay = new google.maps.DirectionsRenderer({
+      map: this.map,
+      preserveViewport: true
+    });
   }
 
+  calculateAndDisplayRoute(directionsService, directionsDisplay, start, dest) {
+    var This = this
+    directionsService.route({
+      origin: start,
+      destination: dest,
+      travelMode: 'DRIVING'
+    }, function (response, status) {
+      if (status === 'OK') {
+        directionsDisplay.setDirections(response);
+        var bounds = response.routes[0].bounds;
+        This.map.fitBounds(bounds);
+        This.map.setCenter(bounds.getCenter());
+      } else {
+        window.alert('Directions request failed due to ' + status);
+      }
+    });
+  }
+
+  cancel(){
+    this.navCtrl.pop();
+  }
 }

src/pages/ridedetail/ridedetail.html

@@ -39,19 +39,21 @@
   <!-- <div class="jr_search_bottom_bay jr_padding0">
   <div class="loader"></div>
   </div> -->
-  <!-- <div class="jr_search_bottom_bay jr_padding0">
+<span *ngIf="driver">
+  <div class="jr_search_bottom_bay jr_padding0">
     <div class="jr_search_profile">
-      <img src="assets/img/e_img14.png">
+      <img [src]=driver.image>
     </div>
     <div class="jr_search_profile_detail">
       <br>
-      <h6>MARIA LORENZA&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;37 Y/O</h6>
-      <span class="jr_star_ratting"><img src="assets/img/jr_star.png"><strong>3/5</strong>1 Rattings</span><br>
+      <h6>{{driver.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{driver.age}} Y/O</h6>
+      <span class="jr_star_ratting"><img src="assets/img/jr_star.png"><strong>{{driver.rating}}/5</strong>{{driver.ratingCount}} Ratings</span><br>
     </div>
     <div class="jr_clear"></div>
   </div>
   <br>
-  <hr>
+  </span>
+  <!-- <hr>
    <div class="jr_car_info">
      <div class="">
         <ion-grid class="jr_padding0">
@@ -86,8 +88,9 @@
      </div>
      <div class="jr_clear"></div>
    </div> -->
+  
    <div class="jr_bottom_button_bay">
-      <button ion-button class="jr_offer_ride2">Track Driver</button>
+      <button ion-button class="jr_offer_ride2" (click)="track()">Track Driver</button>
     </div>
 </div>
 

src/pages/ridedetail/ridedetail.ts

 import { Component, NgZone } from '@angular/core';
-import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
+import { IonicPage, NavController, NavParams, Platform, LoadingController, AlertController } from 'ionic-angular';
 import { dataService } from "../../providers/common.service";
 import { Myservice } from "../../providers/myservice";
 import { Storage } from "@ionic/storage";
 import { user } from "../../models/mymodel";
+import * as firebase from 'firebase';
 
 declare var google;
 @IonicPage()
@@ -17,29 +18,45 @@ export class RidedetailPage {
   loc = { from: '', to: '', fromAd: '', toAd: '' }
   local: user
   public unregisterBackButtonAction: any;
+  count:number = 0;
+  loader:any;
+  driver:any;
+  bkid:any = 10;
+  drivers = []
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, private data: dataService, private zone: NgZone, private myservice: Myservice, private storage: Storage, public platform: Platform) {
+  constructor(public navCtrl: NavController, public navParams: NavParams, private data: dataService, private zone: NgZone, private myservice: Myservice, private storage: Storage, public platform: Platform, public loadingCtrl: LoadingController, private alertCtrl:AlertController) {
   }
 
   ionViewDidEnter() {
-    // this.myservice.show_loader()
     this.initializeBackButtonCustomHandler();
     this.storage.get('user_data').then(data => {
       if (data) {
         this.local = data
         this.book = this.data.getbookingData()
         console.log(this.book)
-        var bdata = { 'book_date': this.book.date, 'drop_area': this.book.dropArea, 'pickup_area': this.book.pickArea, 'taxi_type': this.book.carDetails.car_type, 'amount': '', 'km': '', 'promocode': this.book.promocode, 'token': this.local.token, 'userid': this.local.id, 'type':'now' }
-        this.myservice.load_post(bdata, 'book_cab').subscribe(response => {
-          this.myservice.hide_loader()
-          if (response.status == 'success') {
-            this.myservice.load_post({},'checkBookingStatus')
-          }
-          else {
-            this.myservice.show_alert('Failed', 'Please try again')
-            this.navCtrl.pop()
-          }
-        })
+        this.findDrivers()
+
+        var bdata = { 'book_date': this.book.date, 'drop_area': this.book.dropArea, 'pickup_area': this.book.pickArea, 'taxi_type': this.book.carDetails.car_type, 'amount': '', 'km': '', 'promocode': this.book.promocode, 'token': this.local.token, 'userid': this.local.id, 'type':'now','drivers':[] }
+
+        this.loader = this.loadingCtrl.create({
+          content: "Searching for driver"
+        });
+        this.loader.present();
+        
+
+        bdata.drivers = this.drivers;
+
+        console.log(bdata)
+        // this.myservice.load_post(bdata, 'book_cab').subscribe(response => {
+        //   if (response.status == 'success') {
+        //     this.bkid = response.data
+            this.checkResp();
+          // }
+        //   else {
+        //     this.myservice.show_alert('Failed', 'Please try again')
+        //     this.navCtrl.pop()
+        //   }
+        // })
 
         this.geocoder = new google.maps.Geocoder();
         for (let i = 0; i < 2; i++) {
@@ -76,6 +93,76 @@ export class RidedetailPage {
     })
   }
 
+  findDrivers(){
+    var This = this
+    firebase.database().ref().child('/drivers/').orderByChild("status").equalTo('online').once("value", function (snapshot) {
+      var res_arr = (<any>Object).entries(snapshot.val()).map(e => Object.assign(e[1], { key: e[0] }));
+      console.log(res_arr)
+      This.drivers = [];
+      for (let i = 0; i < res_arr.length; i++) {
+        var mypos = new google.maps.LatLng(This.book.pickLat, This.book.pickLng);
+        let driverLoc = new google.maps.LatLng(res_arr[i].lat, res_arr[i].lng)
+        if (google.maps.geometry.spherical.computeDistanceBetween(driverLoc, mypos) < 5000) {
+          This.drivers.push(res_arr[i].id)
+        }
+      }
+    });
+  }
+
+  showAlert(){
+    let alert = this.alertCtrl.create({
+      title: 'No drivers found',
+      message: 'Please search again.',
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => { }
+        },
+        {
+          text: 'Search',
+          handler: () => {
+
+            this.loader = this.loadingCtrl.create({
+              content: "Searching for driver"
+            });
+            this.loader.present();
+
+            this.findDrivers()
+            var This = this;
+            setTimeout(() => {
+              This.myservice.load_post({ taxiType: This.book.carDetails.car_type, type:'now',driversid: This.drivers }, 'driverPush').subscribe(data => {
+                if(data.status == 'success')
+                This.checkResp();
+              })
+            }, 500);
+          }
+        }
+      ]
+    });
+    alert.present();
+  }
+
+  checkResp(){
+    var This = this;
+    var intrvl = setInterval(function () {
+      This.count++;
+      This.myservice.load_post({ bkid: This.bkid }, 'checkBookingStatus').subscribe(resp => {
+        console.log(resp.data.assigned_for)
+        if (resp.data.assigned_for) {
+          This.driver = resp.data
+          clearInterval(intrvl)
+          This.loader.dismissAll();
+        }
+      })
+      if (This.count == 12) {
+        clearInterval(intrvl)
+        This.loader.dismissAll();
+        This.showAlert();
+      }
+    }, 5000)
+  }
+
   public initializeBackButtonCustomHandler(): void {
     this.unregisterBackButtonAction = this.platform.registerBackButtonAction(() => {
       // this.customHandleBackButton();
@@ -85,4 +172,9 @@ export class RidedetailPage {
   ionViewWillLeave() {
     this.unregisterBackButtonAction && this.unregisterBackButtonAction();
   }
+
+  track(){
+    this.data.setdriverData(this.driver)
+    this.navCtrl.push('MapPage')
+  }
 }

src/providers/common.service.ts

@@ -5,6 +5,7 @@ export class dataService {
 
 bookingData:any;
 rateData:any;
+driverData:any;
 
     constructor() { }
 
@@ -23,6 +24,13 @@ rateData:any;
     public getrateData(){
         return this.rateData;
     }
+    public setdriverData(val){
+        this.driverData = val;
+    }
+
+    public getdriverData(){
+        return this.driverData;
+    }
 
 
 }
\ No newline at end of file