pick user

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { Geolocation } from '@ionic-native/geolocation';
 import { fireService } from "../providers/firebase.service";
 import { AngularFireDatabase } from 'angularfire2/database';
 import { AngularFireModule } from 'angularfire2';
+import { dataService } from "../providers/common.service";
 
 export const firebaseConfig = {
   apiKey: "AIzaSyDLrbLd4RCCh86xuTVu7-cfJ28We_cG1sU",
@@ -54,6 +55,7 @@ export const firebaseConfig = {
     Geolocation,
     fireService,
     AngularFireDatabase,
+    dataService,
   ]
 })
 export class AppModule {}

src/pages/home/home.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { Storage } from "@ionic/storage";
 import { Myservice } from "../../providers/myservice";
-
+import { dataService } from "../../providers/common.service";
 @IonicPage()
 @Component({
   selector: 'page-home',
@@ -14,7 +14,7 @@ upcoming:any;
 completed:any;
 baseurl = this.myservice.base_url
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, private storage:Storage, private myservice:Myservice) {
+  constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage, private myservice: Myservice, private data:dataService) {
   }
 
   ionViewDidEnter(){
@@ -42,6 +42,7 @@ tab_swap(type) {
    }
 
   rideDetails(data){
-    this.navCtrl.push('RidedetailsPage',{data:data})
+    this.data.setrideData(data)
+    this.navCtrl.push('RidedetailsPage')
   }
 }

src/pages/payment/payment.html

+<ion-header class="theme_dark_bg">
+  <button ion-button class="nav_btn theme_color floatLeft"(click)="dismiss()">
+     <ion-icon name="ios-arrow-back"></ion-icon>
+  </button>
+  <div class="nav_header_title floatLeft">Payment Details</div>
+  <div class="clear"></div>
+</ion-header>
+<ion-content padding class="cab_coupon_bg">
+	<div class="cab_trip_detail_wrapper">
+			<h4 class="text_white">Pickup Point</h4>
+			<!-- <p class="floatLeft textLeft width50">{{book.from}}</p> -->
+			<!-- <p class="floatRight textRight width50">11 :23 am, 02-08-2017</p> -->
+			<div class="clear"></div>
+			<br>
+			<h4 class="text_white">Drop Point</h4>
+			<!-- <p class="floatLeft textLeft width50">{{book.to}}</p> -->
+			<!-- <p class="floatRight textRight width50">12 :00 am, 02-08-2017</p> -->
+			<div class="clear"></div>
+			<br>
+			<br>
+	</div>
+	<div class="cab_coupon_content">
+		<p style="padding-top: 0px;margin-top: 0px;margin-bottom: 0px;">Payment Details</p>
+		<li>
+			<div class="child textLeft">Total</div>
+			<!-- <div class="child textRight">Rs. {{ride.amount}}</div> -->
+			<div class="clear"></div>
+		</li>
+		<li>
+			<div class="child textLeft">Discount</div>
+			<!-- <div class="child textRight">Rs. {{ride.discount}}</div> -->
+			<div class="clear"></div>
+		</li>
+		<li>
+			<div class="child textLeft">Due after service</div>
+			<!-- <div class="child textRight">Rs. {{ride.amount - ride.discount}}</div> -->
+			<div class="clear"></div>
+		</li>
+	</div>
+	
+</ion-content>
+<ion-footer>
+	<div class="theme_bgcolor p10 text_white">
+		<p class="floatLeft text_size_18">Total</p>
+		<!-- <p class="floatRight text_size_18">Rs.{{ride.amount - ride.discount}}</p> -->
+		<div class="clear"></div>
+	</div>
+	<button ion-button class="cab_footer_btn width100 text_white" (click)="done()">Completed</button>
+</ion-footer>

src/pages/payment/payment.module.ts

+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { PaymentPage } from './payment';
+
+@NgModule({
+  declarations: [
+    PaymentPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(PaymentPage),
+  ],
+})
+export class PaymentPageModule {}

src/pages/payment/payment.scss

+page-payment {
+  .cab_trip_detail_wrapper{width:100%;padding-top: 20px;}
+  .cab_trip_detail_wrapper h4{margin:0px;color:#404041;font-weight: 400;font-size: 16px;}
+  .cab_trip_detail_wrapper p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top: 10px;font-size: 14px !important;color: #a8a8a8;font-weight:300;padding-bottom: 0px;margin-bottom: 0px;bottom: 0px !important;letter-spacing: 1px !important;}
+  .cab_trip_detail_wrapper hr{border:1px solid #f7941e;height:0px;border-radius:5px;position: relative;bottom: 22px;    z-index: -9;}
+  .cab_trip_detail_wrapper .to{width:50px;height:30px;border-radius:50%;background:#fff;color: #f7941e;text-align: center;margin:0 auto;    padding: 3px;font-size:23px; z-index: 9;letter-spacing: 3px;padding-top: 5px;padding-left: 6px;margin-top: 20px;margin-bottom: 20px;}
+  .cab_trip_detail_wrapper p strong{background:#f7941e;color: #fff;padding-left: 10px;padding-right: 10px;border-radius: 4px;font-weight: 400;}
+  .cab_ratting{padding-top: 25px;padding-bottom:25px;text-align: center; width:205px;margin: 0 auto;}
+  .cab_ratting:not(:checked) > input {position:absolute;top:-9999px;clip:rect(0,0,0,0);}
+  .cab_ratting:not(:checked) > label {float:right;width:1em;padding:0 .1em;overflow:hidden;white-space:nowrap;cursor:pointer;font-size: 40px;line-height:1.2;color:#ddd;}
+  .cab_ratting:not(:checked) > label:before {content: '★ ';}
+  .cab_ratting > input:checked ~ label {color: #f70;}
+  .cab_ratting:not(:checked) > label:hover,
+  .cab_ratting:not(:checked) > label:hover ~ label {color: gold;}
+  .cab_ratting > input:checked + label:hover,
+  .cab_ratting > input:checked + label:hover ~ label,
+  .cab_ratting > input:checked ~ label:hover,
+  .cab_ratting > input:checked ~ label:hover ~ label,
+  .cab_ratting > label:hover ~ input:checked ~ label {color: #ea0;}
+  .cab_ratting > label:active {position:relative;top:2px;left:2px;}
+  .cab_coupon_wrapper{padding-top:20%;}
+  .cab_pop_detail_left{width:65px;height:50px;background-position:left;background-size: 65px;background-repeat: no-repeat;}
+  .cab_pop_details{padding: 3px;width:calc(100% - 65px);}
+  .cab_coupon_box{width:80%;margin:0 auto;height:50px;text-align:center;border:2px solid #353639;border-radius:0px;background:#28292c;}
+  .cab_coupon_input{width:100%;height:100%;background:transparent !important;border:none;text-align:center;color:#ff9000; font-size: 20px;font-weight: 300;}
+  .cab_coupon_input::-webkit-input-placeholder {color:#ff9000;}
+  .cab_coupon_input::-moz-placeholder {color:#ff9000;}
+  .cab_coupon_input:-ms-input-placeholder {color:#ff9000;}
+  .cab_coupon_input:-moz-placeholder {color:#ff9000;}
+  .cab_coupon_bg{background:#2e2f32 !important;}
+  .cab_coupon_wrapper p{color:#fff;text-align:center;margin:0px;line-height: 18px;font-weight: 300;letter-spacing: 1px;padding-top: 40px;padding-bottom: 40px;}
+  .cab_coupon_apply{width:100%;height:50px;border-radius:0px;text-align:center;background:#ff9000;font-size:18px;font-weight: 400;color:#fff;letter-spacing: 4px;}
+  .cab_coupon_content{width:100%;}
+  .cab_coupon_content li{width:100%;list-style:none !important;padding-top: 10px;padding-bottom: 10px;border-bottom:1px solid #353639;}
+  .cab_coupon_content li .child{width:50%;float:left;color:#8d8c8c;font-size: 15px;}
+  .cab_coupon_content p{color:#ff9000;text-align:left;padding-bottom:20px;padding-top:20px;font-size: 18px;}
+  .footer p{padding:0px;margin: 0px;}
+}

src/pages/payment/payment.ts

+import { Component, NgZone } from '@angular/core';
+import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
+import { dataService } from "../../providers/common.service";
+import { Myservice } from "../../providers/myservice";
+import { Storage } from "@ionic/storage";
+import * as firebase from 'firebase';
+
+declare var google;
+
+@IonicPage()
+@Component({
+  selector: 'page-payment',
+  templateUrl: 'payment.html',
+})
+export class PaymentPage {
+
+  book = this.data.getrideData()
+  geocoder: any;
+  public unregisterBackButtonAction: any;
+  ride: any;
+  waypoints = this.data.getwaypointData()
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, private data: dataService, private zone: NgZone, private myservice: Myservice, private storage: Storage, public platform: Platform) {
+  }
+
+  ionViewDidEnter() {
+    // this.myservice.hide_loader();
+    this.initializeBackButtonCustomHandler();
+
+    console.log(this.book)
+
+    var directionsService = new google.maps.DirectionsService;
+
+    var pick = this.book.pickup_latlng.split(',')
+    var drop = this.book.drop_latlng.split(',')
+
+    var start = new google.maps.LatLng(Number(pick[0]), Number(pick[1]));
+    var dest = new google.maps.LatLng(Number(drop[0]), Number(drop[1]));
+
+    var This = this
+
+    directionsService.route({
+      origin: start,
+      destination: dest,
+      travelMode: 'DRIVING',
+      waypoints: This.waypoints
+    }, function (response, status) {
+      if (status === 'OK') {
+        var totalDist = 0;
+        var myroute = response.routes[0];
+        console.log(myroute)
+        for (let i = 0; i < myroute.legs.length; i++) {
+          totalDist += myroute.legs[i].distance.value;
+        }
+        totalDist = totalDist / 1000.
+        console.log(totalDist)
+        This.myservice.load_post({},'updateRideDetails').subscribe(response=>{
+          if(response.status == 'success'){
+
+          }
+          else
+          This.myservice.show_alert('',response.message)
+        })
+      } else {
+        window.alert('Directions request failed due to ' + status);
+      }
+    });
+
+  }
+
+  public initializeBackButtonCustomHandler(): void {
+    this.unregisterBackButtonAction = this.platform.registerBackButtonAction(() => {
+      // this.customHandleBackButton();
+    }, 10);
+  }
+
+  ionViewWillLeave() {
+    this.unregisterBackButtonAction && this.unregisterBackButtonAction();
+  }
+
+  done() {
+
+  }
+
+}

src/pages/ridedetails/ridedetails.ts

 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { Myservice } from "../../providers/myservice";
-import { dateDataSortValue } from 'ionic-angular/umd/util/datetime-util';
+import { dataService } from "../../providers/common.service";
 
 @IonicPage()
 @Component({
@@ -9,10 +9,10 @@ import { dateDataSortValue } from 'ionic-angular/umd/util/datetime-util';
   templateUrl: 'ridedetails.html',
 })
 export class RidedetailsPage {
-  details = this.navParams.get('data')
+  details = this.data.getrideData()
   baseurl = this.myservice.base_url
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, private myservice: Myservice) {
+  constructor(public navCtrl: NavController, public navParams: NavParams, private myservice: Myservice, private data:dataService) {
    
   }
 
@@ -26,6 +26,8 @@ export class RidedetailsPage {
     this.details.to = temp[0]
     this.details.toAd = this.details.drop_area
     console.log(this.details)
+
+    this.data.setrideData(this.details)
   }
 
   back(){
@@ -33,7 +35,8 @@ export class RidedetailsPage {
   }
 
   pick(){
-    this.navCtrl.push('UserlocationPage',{ data: this.details})
+    this.myservice.show_loader()
+    this.navCtrl.push('UserlocationPage')
   }
 
 }

src/pages/userlocation/userlocation.html

@@ -9,13 +9,16 @@
     <div #map id="map"></div>
     <div class="jr_bottom_distance_card" *ngIf="temp">
       <div class="jr_bottom_inside">
-        <input class="jr_dest_input from" placeholder="From" [(ngModel)]="loc.from">
-        <input class="jr_dest_input to" placeholder="To" [(ngModel)]="loc.to">
+        <input class="jr_dest_input from" placeholder="From" [(ngModel)]="loc.from" [readonly]="true">
+        <input class="jr_dest_input to" placeholder="To" [(ngModel)]="loc.to" [readonly]="true">
       </div>
     </div>
 </ion-content>
 <ion-footer>
-  <div class="jr_bottom_button_bay" *ngIf="temp">
-      <button ion-button class="cab_footer_btn">Start Ride</button>
+  <div class="jr_bottom_button_bay" *ngIf="!started">
+      <button ion-button class="cab_footer_btn" (click)="startRide()">Start Ride</button>
+  </div>
+    <div class="jr_bottom_button_bay" *ngIf="temp && started">
+      <button ion-button class="cab_footer_btn" (click)="complete()">Finish Ride</button>
     </div>
 </ion-footer>
\ No newline at end of file

src/pages/userlocation/userlocation.ts

 import { Component, ViewChild, ElementRef } from '@angular/core';
-import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { IonicPage, NavController, NavParams, MenuController } from 'ionic-angular';
 import { Geolocation } from '@ionic-native/geolocation';
+import * as firebase from 'firebase';
+import { AngularFireDatabase } from 'angularfire2/database';
+import { driver } from "../../models/mymodel";
+import { Storage } from "@ionic/storage";
+import { Myservice } from "../../providers/myservice";
+import { dataService } from "../../providers/common.service";
 
 declare var google;
 
@@ -12,60 +18,56 @@ declare var google;
 export class UserlocationPage {
   @ViewChild('map') mapElement: ElementRef;
   map: any;
-  directionsDisplay:any;
-  geocoder:any;
-  details = this.navParams.get('data')
-  locSubs:any;
-  temp:boolean = false;
-  loc = {'from':'','to':''}
-  i:number = 0;
-
-  constructor(public navCtrl: NavController, public navParams: NavParams, private geolocation: Geolocation) {
-    this.geolocation.getCurrentPosition().then((resp) => {
-      this.loadMap(resp.coords.latitude, resp.coords.longitude);
-    })
+  directionsDisplay: any;
+  geocoder: any;
+  details = this.data.getrideData()
+  locSubs: any;
+  temp: boolean = false;
+  loc = { 'from': '', 'to': '' }
+  pushId: string;
+  local: driver
+  started: boolean = false;
+  myloc = []
+  waypoints = []
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, private geolocation: Geolocation, private db: AngularFireDatabase, private storage: Storage, private myservice: Myservice, private menu: MenuController, private data: dataService) {
+    this.loadMap()
   }
 
   ionViewDidEnter() {
-    var This = this
-    var drop = This.details.drop_latlng.split(',')
-    This.geocoder = new google.maps.Geocoder();
-    This.locSubs = This.geolocation.watchPosition()
-      .filter((p) => p.coords !== undefined) //Filter Out Errors
-      .subscribe(position => {
-      This.i++;
-      var directionsService = new google.maps.DirectionsService;
 
-      This.directionsDisplay.setMap(This.map);
-      This.directionsDisplay.setOptions({ suppressMarkers: true });
+    this.menu.swipeEnable(false);
 
-      var pickLoc = new google.maps.LatLng(Number(drop[0]), Number(drop[1]));
-        var driverLoc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 
-          var dimage = {
-            url: 'assets/img/map_label.png',
-            scaledSize: new google.maps.Size(50, 22),
-            origin: new google.maps.Point(0, 0),
-            anchor: new google.maps.Point(25, 12)
-          };
+    this.getStorage()
 
-          var marker = new google.maps.Marker({
-            position: driverLoc,
-            map: This.map,
-            icon: dimage
-          });
+    var pick = this.details.pickup_latlng.split(',')
+    var drop = this.details.drop_latlng.split(',')
 
-        if (This.i == 5) {
-        // if (google.maps.geometry.spherical.computeDistanceBetween(pickLoc, driverLoc) < 100) {
-          This.temp = true
-        }
+    this.geocoder = new google.maps.Geocoder();
+    var This = this
+    This.locSubs = This.geolocation.watchPosition().filter((p) => p.coords !== undefined) //Filter Out Errors
+      .subscribe(position => {
+
+        firebase.database().ref("drivers/" + this.pushId + "/").update({ lat: Number(position.coords.latitude), lng: Number(position.coords.longitude) })
 
-          This.calculateAndDisplayRoute(directionsService, This.directionsDisplay, pickLoc, driverLoc);
+        This.myloc[0] = position.coords.latitude
+        This.myloc[1] = position.coords.longitude
 
+        if (This.started == false)
+          This.gotoDirection(pick, This.myloc)
+        else {
+          This.gotoDirection(drop, This.myloc)
+          This.waypoints.push({ location: new google.maps.LatLng(position.coords.latitude, position.coords.longitude)})
+        }
       })
   }
 
-  loadMap(lat, lng) {
+  loadMap() {
+
+    this.geolocation.getCurrentPosition().then((resp) => {
+      var lat = resp.coords.latitude
+      var lng = resp.coords.longitude
 
       let latLng = new google.maps.LatLng(lat, lng);
 
@@ -81,14 +83,49 @@ export class UserlocationPage {
         map: this.map,
         preserveViewport: true
       });
+    })
   }
 
-  back(){
+  gotoDirection(dest, myloc) {
+    console.log('gtd')
+    var This = this;
+    var directionsService = new google.maps.DirectionsService;
+
+    This.directionsDisplay.setMap(This.map);
+    This.directionsDisplay.setOptions({ suppressMarkers: true });
+
+    var destLoc = new google.maps.LatLng(Number(dest[0]), Number(dest[1]));
+    var driverLoc = new google.maps.LatLng(Number(myloc[0]), Number(myloc[1]));
+
+    var dimage = {
+      url: 'assets/img/map_label.png',
+      scaledSize: new google.maps.Size(50, 22),
+      origin: new google.maps.Point(0, 0),
+      anchor: new google.maps.Point(25, 12)
+    };
+
+    var marker = new google.maps.Marker({
+      position: driverLoc,
+      map: This.map,
+      icon: dimage
+    });
+
+    // if (google.maps.geometry.spherical.computeDistanceBetween(destLoc, driverLoc) < 100) {
+    This.loc.to = This.details.drop_area
+    This.loc.from = This.details.pickup_area
+    This.temp = true
+    // }
+
+    This.calculateAndDisplayRoute(directionsService, This.directionsDisplay, destLoc, driverLoc);
+  }
+
+  back() {
     this.navCtrl.pop();
   }
 
   calculateAndDisplayRoute(directionsService, directionsDisplay, start, dest) {
     var This = this
+
     directionsService.route({
       origin: start,
       destination: dest,
@@ -105,6 +142,42 @@ export class UserlocationPage {
     });
   }
 
+  startRide() {
+
+    this.started = true;
+    this.temp = false
+    var This = this;
+
+    firebase.database().ref("drivers/" + This.pushId + "/").update({ started: true })
+
+    var drop = This.details.drop_latlng.split(',')
+
+    This.gotoDirection(drop, This.myloc)
+  }
+
+  complete() {
+    var This = this;
+    This.data.setwaypointData(This.waypoints)
+    firebase.database().ref("drivers/" + This.pushId + "/").update({ started: false })
+    This.navCtrl.push('PaymentPage')
+    // console.log(This.locSubs)
+  }
+
+  getStorage() {
+    this.storage.get('driver_data').then(data => {
+      if (data) {
+        this.myservice.hide_loader();
+        this.local = data
+        var This = this
+        var query = firebase.database().ref("drivers/").orderByChild("id").equalTo((data.id))
+        query.once("child_added", function (snapshot) {
+          This.pushId = snapshot.val().push_id
+          console.log(This.pushId)
+        });
+      }
+    })
+  }
+
   ionViewWillLeave() {
     this.locSubs.unsubscribe();
   }

src/providers/common.service.ts

@@ -3,26 +3,26 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class dataService {
 
-bookingData:any;
-rateData:any;
+rideData:any;
+waypointData:any;
 driverData:any;
 
     constructor() { }
 
-    public setbookingData(val){
-        this.bookingData = val;
+    public setrideData(val){
+        this.rideData = val;
     }
 
-    public getbookingData(){
-        return this.bookingData;
+    public getrideData(){
+        return this.rideData;
     }
 
-    public setrateData(val){
-        this.rateData = val;
+    public setwaypointData(val){
+        this.waypointData = val;
     }
 
-    public getrateData(){
-        return this.rateData;
+    public getwaypointData(){
+        return this.waypointData;
     }
     
     public setdriverData(val){

src/providers/firebase.service.ts

@@ -19,9 +19,7 @@ export class fireService {
   
   
   constructor(
-                private db: AngularFireDatabase,) {
-// console.log(this.currentUser);
-//       console.log('hhhh');
+                private db: AngularFireDatabase) {
   }
 
   pushItem(url,data){
@@ -29,7 +27,7 @@ export class fireService {
       var new_node = url + "/" + key;
       data.push_id = key;
       this.updateItem(new_node, data)
-      return 'success';
+    return key;
   }
   
   updateItem(url,data){