Skip to content

C
Callmycab-Userapp
Commit 9de6bd2d by Alen Jose
Options

ride route

parent ec14c3b7
Showing with 298 additions and 66 deletions
src/app/app.component.ts
......@@ -30,7 +30,7 @@ export class MyApp {
if(data){
this.rootPage = 'HomePage'
this.local = data
console.log(this.local)
// console.log(this.local)
}
else
this.rootPage = 'LandingPage'
......@@ -86,7 +86,8 @@ export class MyApp {
// do something when a notification is opened
});
this.oneSignal.endInit();}
this.oneSignal.endInit();
}
enableLoc(){
this.locationAccuracy.canRequest().then((canRequest: boolean) => {
......
src/pages/home/home.ts
......@@ -31,6 +31,7 @@ export class HomePage {
geocoder: any;
local:user
directionsDisplay:any;
locRef: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) {
......@@ -73,7 +74,8 @@ export class HomePage {
//drivers loc
var This = this
firebase.database().ref().child('/drivers/').orderByChild("status").equalTo('online').on("value", function (snapshot) {
This.locRef = firebase.database().ref().child('/drivers/')
This.locRef.orderByChild("status").equalTo('online').on("value", function (snapshot) {
var res_arr = (<any>Object).entries(snapshot.val()).map(e => Object.assign(e[1], { key: e[0] }));
//placing marker for each driver
......@@ -217,4 +219,8 @@ export class HomePage {
modal.present();
}
ionViewWillLeave(){
this.locRef.off("value");
}
}
src/pages/map/map.html
......@@ -9,15 +9,15 @@
<ion-content>
<div #map id="map"></div>
<!-- <div class="jr_bottom_distance_card">
<div class="jr_bottom_distance_card" *ngIf="temp">
<div class="jr_bottom_inside">
<input class="jr_dest_input from" placeholder="HSR Layout, Kormangala,Bengalure" [(ngModel)]="bookData.">
<input class="jr_dest_input to" placeholder="Jalihalli, Outercity, Bengaluru">
<input class="jr_dest_input from" placeholder="From" [(ngModel)]="bookData.pickArea" [readonly]="true">
<input class="jr_dest_input to" placeholder="To" [(ngModel)]="bookData.dropArea" [readonly]="true">
</div>
</div> -->
</div>
</ion-content>
<ion-footer>
<ion-footer *ngIf="!temp">
<div class="jr_bottom_button_bay">
<button ion-button class="jr_offer_ride2" (click)="cancel()">Cancel</button>
</div>
......
src/pages/map/map.ts
......@@ -15,6 +15,9 @@ export class MapPage {
map: any;
directionsDisplay: any;
bookData:any;
temp:boolean = false;
locSubs:any;
driver:any;
constructor(public navCtrl: NavController, public navParams: NavParams, private data: dataService, private geolocation: Geolocation) {
}
......@@ -28,27 +31,33 @@ export class MapPage {
}
ionViewDidEnter(){
var driver = this.data.getdriverData();
this.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 locRef = firebase.database().ref().child('/drivers/');
locRef.orderByChild("id").equalTo(Number(This.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);
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);
});
if (res_arr[0].started == true){
locRef.off("value");
This.startRide();
}
else{
var directionsService = new google.maps.DirectionsService;
This.directionsDisplay.setMap(This.map);
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);
This.calculateAndDisplayRoute(directionsService, This.directionsDisplay, pickLoc, driverLoc);
}
});
}
// ionViewDidLoad() {
......@@ -91,7 +100,44 @@ export class MapPage {
});
}
startRide(){
this.temp = true
console.log('started')
var This= this;
This.locSubs = this.geolocation.watchPosition()
.filter((p) => p.coords !== undefined) //Filter Out Errors
.subscribe(position => {
console.log(position.coords.longitude + ' ' + position.coords.latitude);
var directionsService = new google.maps.DirectionsService;
This.directionsDisplay.setMap(This.map);
var destLoc = new google.maps.LatLng(This.bookData.dropLat, This.bookData.dropLng);
var myLoc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// if (google.maps.geometry.spherical.computeDistanceBetween(myLoc, destLoc) < 50){
var locRef = firebase.database().ref().child('/drivers/');
locRef.orderByChild("id").equalTo(Number(This.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])
if (res_arr[0].started == false) {
locRef.off("value");
This.navCtrl.setRoot('RidesummaryPage')
}
})
// }
This.calculateAndDisplayRoute(directionsService, This.directionsDisplay, myLoc, destLoc);
});
}
cancel(){
this.navCtrl.pop();
}
ionViewWillLeave(){
this.locSubs.unsubscribe();
}
}
src/pages/ridedetail/ridedetail.html
......@@ -36,11 +36,9 @@
</div>
<hr>
<br>
<!-- <div class="jr_search_bottom_bay jr_padding0">
<div class="loader"></div>
</div> -->
<span *ngIf="driver">
<div class="jr_search_bottom_bay jr_padding0">
<div class="jr_search_bottom_bay jr_padding0" *ngIf="driver">
<div class="jr_search_profile">
<img [src]=driver.image>
</div>
......@@ -51,43 +49,6 @@
</div>
<div class="jr_clear"></div>
</div>
<br>
</span>
<!-- <hr>
<div class="jr_car_info">
<div class="">
<ion-grid class="jr_padding0">
<ion-row>
<ion-col col-2 class="jr_padding0">
<div class="jr_car_info_photo"><img src="assets/img/jr_car_img.png"></div>
</ion-col>
<ion-col col-4 class="">
<div class="jr_car_info_detail jr_padding0">
<h6>Audi A8</h6>
<p>Blue
Luxury</p>
</div>
<div class="jr_clear"></div>
</ion-col>
<ion-col col-3 class="jr_padding0">
<div class="jr_car_info_detail jr_padding0">
<p>Total</p>
<h6>300 km</h6>
</div>
<div class="jr_clear"></div>
</ion-col>
<ion-col col-3 class="jr_padding0 right">
<div class="jr_car_info_detail jr_padding0">
<p>Total Price</p>
<h6>300 km</h6>
</div>
<div class="jr_clear"></div>
</ion-col>
</ion-row>
</ion-grid>
</div>
<div class="jr_clear"></div>
</div> -->
<div class="jr_bottom_button_bay">
<button ion-button class="jr_offer_ride2" (click)="track()">Track Driver</button>
......
src/pages/ridedetail/ridedetail.ts
......@@ -50,6 +50,8 @@ export class RidedetailPage {
// this.myservice.load_post(bdata, 'book_cab').subscribe(response => {
// if (response.status == 'success') {
// this.bkid = response.data
this.book.bookingId = this.bkid
this.data.setbookingData(this.book);
this.checkResp();
// }
// else {
......@@ -73,12 +75,17 @@ export class RidedetailPage {
This.geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
// console.log(results)
if (i == 0) {
This.loc.from = results[0].address_components[0].short_name
var temp = This.book.pickArea.split(',')
// This.loc.from = results[0].address_components[0].short_name
This.loc.from = temp[0]
This.loc.fromAd = results[0].formatted_address
}
else {
This.loc.to = results[0].address_components[0].short_name
var temp = This.book.dropArea.split(',')
This.loc.to = temp[0]
// This.loc.to = results[0].address_components[0].short_name
This.loc.toAd = results[0].formatted_address
This.zone.run(() => { });
}
......
src/pages/ridesummary/ridesummary.html 0 → 100644
<style>
.left {
text-align: left !important;
}
.right {
text-align: right !important;
}
</style>
<ion-header class="jr_theme_color jr_header">
<button ion-button class="jr_left jr_header_btn jr_back_icon" (click)="goBack()"></button>
<div class="jr_header_title">
<h4>Quickride Details</h4>
</div>
<button ion-button class="jr_right jr_header_btn"></button>
<div class="jr_clear"></div>
</ion-header>
<ion-content padding>
<div class="jr_profile_content1">
<div class="jr_from_to">
<li>
<div class="child1 from">From
<div class="jr_box1"></div>
</div>
<div class="child2">
<strong>{{loc.from}}</strong>
<p>{{loc.fromAd}}</p>
</div>
<div class="jr_clear"></div>
</li>
<li>
<div class="child1 to">To</div>
<div class="child2">
<strong>{{loc.to}}</strong>
<p>{{loc.toAd}}</p>
</div>
<div class="jr_clear"></div>
</li>
</div>
<hr>
<br>
<span *ngIf="driver">
<div class="jr_search_bottom_bay jr_padding0">
<div class="jr_search_profile">
<img [src]=driver.image>
</div>
<div class="jr_search_profile_detail">
<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>
</span>
<hr>
<div class="jr_car_info">
<div class="">
<ion-grid class="jr_padding0">
<ion-row>
<!-- <ion-col col-2 class="jr_padding0">
<div class="jr_car_info_photo"><img src="assets/img/jr_car_img.png"></div>
</ion-col>
<ion-col col-4 class="">
<div class="jr_car_info_detail jr_padding0">
<h6>Audi A8</h6>
<p>Blue
Luxury</p>
</div>
<div class="jr_clear"></div>
</ion-col> -->
<ion-col col-3 class="jr_padding0">
<div class="jr_car_info_detail jr_padding0">
<p>Total</p>
<h6>300 km</h6>
</div>
<div class="jr_clear"></div>
</ion-col>
<ion-col col-3 class="jr_padding0 right">
<div class="jr_car_info_detail jr_padding0">
<p>Total Price</p>
<h6>300 km</h6>
</div>
<div class="jr_clear"></div>
</ion-col>
</ion-row>
</ion-grid>
</div>
<div class="jr_clear"></div>
</div>
<div class="jr_bottom_button_bay">
<button ion-button class="jr_offer_ride2" (click)="track()">Track Driver</button>
</div>
</div>
</ion-content>
\ No newline at end of file
src/pages/ridesummary/ridesummary.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { RidesummaryPage } from './ridesummary';
@NgModule({
declarations: [
RidesummaryPage,
],
imports: [
IonicPageModule.forChild(RidesummaryPage),
],
})
export class RidesummaryPageModule {}
src/pages/ridesummary/ridesummary.ts 0 → 100644
import { Component, NgZone } from '@angular/core';
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()
@Component({
selector: 'page-ridesummary',
templateUrl: 'ridesummary.html',
})
export class RidesummaryPage {
book: any;
geocoder: any;
loc = { from: '', to: '', fromAd: '', toAd: '' }
local: user
public unregisterBackButtonAction: any;
driver: any;
ride:any;
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.initializeBackButtonCustomHandler();
this.storage.get('user_data').then(data => {
if (data) {
this.local = data
this.book = this.data.getbookingData()
console.log(this.book)
this.driver = this.data.getdriverData()
console.log(this.driver)
this.geocoder = new google.maps.Geocoder();
for (let i = 0; i < 2; i++) {
if (i == 0) {
var lat = this.book.pickLat
var lng = this.book.pickLng
}
else {
var lat = this.book.dropLat
var lng = this.book.dropLng
}
var latlng = new google.maps.LatLng(lat, lng);
var This = this;
This.geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
if (i == 0) {
var temp = This.book.pickArea.split(',')
This.loc.from = temp[0]
This.loc.fromAd = results[0].formatted_address
}
else {
var temp = This.book.dropArea.split(',')
This.loc.to = temp[0]
This.loc.toAd = results[0].formatted_address
This.zone.run(() => { });
}
}
}
else {
console.log("Geocoder failed due to: " + status);
}
});
}
}
})
this.myservice.load_post({ bookingId: this.book.bookingId},'getRideDetails').subscribe(resp=>{
if(resp.status == 'success'){
this.ride = resp.data
}
})
}
public initializeBackButtonCustomHandler(): void {
this.unregisterBackButtonAction = this.platform.registerBackButtonAction(() => {
// this.customHandleBackButton();
}, 10);
}
ionViewWillLeave() {
this.unregisterBackButtonAction && this.unregisterBackButtonAction();
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment