Skip to content

C
Callmycab-Userapp
Commit a74ef2f9 by Alen Jose
Options

ride later

parent 08434195
Showing with 234 additions and 62 deletions
config.xml
......@@ -99,4 +99,6 @@
<plugin name="cordova-plugin-geolocation" spec="^4.0.1">
<variable name="GEOLOCATION_USAGE_DESCRIPTION" value="To locate you" />
</plugin>
<plugin name="cordova-plugin-datepicker" spec="^0.9.3" />
<plugin name="cordova-plugin-request-location-accuracy" spec="^2.2.3" />
</widget>
package-lock.json
......@@ -296,6 +296,11 @@
"resolved": "https://registry.npmjs.org/@ionic-native/core/-/core-3.12.1.tgz",
"integrity": "sha512-cncRlkun1lwJ0kZUs7jrDbmHDvHNdveJhdsgJT7nGLavbK54UN3CdBjMcAk7zNOqlil6nXY8Nn/2B6WpUmQRNg=="
},
"@ionic-native/date-picker": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/@ionic-native/date-picker/-/date-picker-4.7.0.tgz",
"integrity": "sha512-rn8lRU32woVUQXA3kc+hlUJeN2NXykShC/HYOROgpDglZTCuxRUl4gJNuua4JEyw+YXN2jSUVPryfC8QhJg7oQ=="
},
"@ionic-native/facebook": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/@ionic-native/facebook/-/facebook-4.6.0.tgz",
......@@ -311,6 +316,11 @@
"resolved": "https://registry.npmjs.org/@ionic-native/google-plus/-/google-plus-4.7.0.tgz",
"integrity": "sha512-Q9k2ZRDsdlhH0gb4plqiYonhDo9SAVkKzgiAqH14C07yd5bBXBdH7utRivHa5DytMDHmoEZx0FX6Vvki/q342w=="
},
"@ionic-native/location-accuracy": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/@ionic-native/location-accuracy/-/location-accuracy-4.7.0.tgz",
"integrity": "sha512-WGMyuy8hZaemvEHFpoix1gmCHEKU5/7axu0XY+2cLOKgaFGI/N3idEBqVxARGPuT5oBuay+dE9mMtNNBT/kndQ=="
},
"@ionic-native/splash-screen": {
"version": "3.12.1",
"resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-3.12.1.tgz",
......@@ -1652,6 +1662,11 @@
}
}
},
"cordova-plugin-datepicker": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/cordova-plugin-datepicker/-/cordova-plugin-datepicker-0.9.3.tgz",
"integrity": "sha1-JVipzlmY9tbcBs+S/Yu7nQkB8Wo="
},
"cordova-plugin-device": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/cordova-plugin-device/-/cordova-plugin-device-1.1.4.tgz",
......@@ -1672,6 +1687,11 @@
"resolved": "https://registry.npmjs.org/cordova-plugin-googleplus/-/cordova-plugin-googleplus-5.3.0.tgz",
"integrity": "sha1-fvQYIF9pMBii0G0suGXenXy3Ico="
},
"cordova-plugin-request-location-accuracy": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/cordova-plugin-request-location-accuracy/-/cordova-plugin-request-location-accuracy-2.2.3.tgz",
"integrity": "sha512-cwcG+4sHIU/Vfe1mvEtXh5hfo4k8OEdHo1Rdc9GU0YU/5J/umsBQdHfuBJ7hez59N7lRoUKpKhLhcY8MPBz9Fg=="
},
"cordova-plugin-splashscreen": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/cordova-plugin-splashscreen/-/cordova-plugin-splashscreen-4.0.3.tgz",
......
package.json
......@@ -21,19 +21,23 @@
"@angular/platform-browser": "4.4.3",
"@angular/platform-browser-dynamic": "4.4.3",
"@ionic-native/core": "3.12.1",
"@ionic-native/date-picker": "^4.7.0",
"@ionic-native/facebook": "^4.6.0",
"@ionic-native/geolocation": "^4.7.0",
"@ionic-native/google-plus": "^4.7.0",
"@ionic-native/location-accuracy": "^4.7.0",
"@ionic-native/splash-screen": "3.12.1",
"@ionic-native/status-bar": "3.12.1",
"@ionic-native/toast": "^4.7.0",
"@ionic/storage": "2.0.1",
"angularfire2": "^5.0.0-rc.10",
"cordova-android": "^7.1.0",
"cordova-plugin-datepicker": "^0.9.3",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-facebook4": "^1.9.1",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-plugin-googleplus": "^5.3.0",
"cordova-plugin-request-location-accuracy": "^2.2.3",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.2",
"cordova-plugin-whitelist": "^1.3.1",
......@@ -69,7 +73,9 @@
},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
}
},
"cordova-plugin-datepicker": {},
"cordova-plugin-request-location-accuracy": {}
},
"platforms": [
"android"
......
src/app/app.component.ts
......@@ -5,6 +5,8 @@ import { SplashScreen } from '@ionic-native/splash-screen';
import { Storage } from '@ionic/storage';
import { user } from '../models/mymodel'
import { Myservice } from "../providers/myservice";
import { LocationAccuracy } from '@ionic-native/location-accuracy';
@Component({
templateUrl: 'app.html'
})
......@@ -14,7 +16,7 @@ export class MyApp {
rootPage: string ;
local:user;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public storage: Storage, public events: Events, private myservice: Myservice) {
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public storage: Storage, public events: Events, private myservice: Myservice, private locationAccuracy: LocationAccuracy) {
this.initializeApp();
}
......@@ -42,6 +44,22 @@ export class MyApp {
this.statusBar.styleDefault();
this.splashScreen.hide();
// this.enableLoc();
});
}
enableLoc(){
this.locationAccuracy.canRequest().then((canRequest: boolean) => {
if (canRequest) {
// the accuracy option will be ignored by iOS
this.locationAccuracy.request(this.locationAccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(
() => console.log('Request successful'),
error => console.log('Error requesting location permissions', error)
);
}
});
}
......
src/app/app.module.ts
......@@ -16,6 +16,8 @@ import { AngularFireModule } from 'angularfire2';
import { fireService } from '../providers/firebase.service'
import { AngularFireDatabase } from 'angularfire2/database';
import { Geolocation } from '@ionic-native/geolocation';
import { DatePicker } from '@ionic-native/date-picker';
import { LocationAccuracy } from '@ionic-native/location-accuracy';
export const firebaseConfig = {
apiKey: "AIzaSyDLrbLd4RCCh86xuTVu7-cfJ28We_cG1sU",
......@@ -52,6 +54,8 @@ export const firebaseConfig = {
fireService,
AngularFireDatabase,
Geolocation,
DatePicker,
LocationAccuracy,
]
})
export class AppModule {}
src/index.html
......@@ -37,6 +37,8 @@
<script src="build/main.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places&key=AIzaSyCk1_NXO6fDntAzKEl7sO-z6Ut5evHLsKQ"></script>
</body>
</html>
\ No newline at end of file
src/models/mymodel.ts
......@@ -9,4 +9,13 @@ export class user{
name: string
image: string
dial_code: string
}
export class cartype{
car_type:string
intialkm: string
intailrate: string
standardrate: string
extrahour: string
id: string
car_image: string
}
\ No newline at end of file
src/pages/home/home.html
......@@ -12,13 +12,17 @@
<button ion-button class="cab_button_search theme_bgcolor" (click)="searchride()"><ion-icon name="search"></ion-icon></button>
</ion-content>
<ion-footer>
<form [formGroup]="locForm">
<div class="cab_footer_location theme_bgcolor">
<input class="cab_location_input cab_current" placeholder="Pickup Location" id="pickUp" [(ngModel)]="pickLoc">
<input class="cab_location_input cab_destination" placeholder="Drop Location" id="drop">
<input class="cab_location_input cab_current" placeholder="Pickup Location" id="pickUp" formControlName="pickLoc">
<input class="cab_location_input cab_destination" placeholder="Drop Location" id="drop" formControlName="dropLoc">
</div>
</form>
<div class="cab_footer_btn_bay">
<button ion-button class="cab_footer_btn floatRight" (click)="ridenow()">RIDE NOW</button>
<button ion-button class="cab_footer_btn floatLeft" (click)="ridemore()">RIDE LATER</button>
<button ion-button class="cab_footer_btn floatRight" (click)="ridenow()" >RIDE NOW</button>
<!-- [disabled]="locForm.invalid" -->
<button ion-button class="cab_footer_btn floatLeft" (click)="ridemore()" >RIDE LATER</button>
<!-- [disabled]="locForm.invalid" -->
<div class="clear"></div>
</div>
</ion-footer>
src/pages/home/home.ts
......@@ -6,6 +6,7 @@ import { fireService } from "../../providers/firebase.service";
import { AngularFireDatabase } from 'angularfire2/database';
import { Myservice } from "../../providers/myservice";
import * as firebase from 'firebase';
import { Validators, FormGroup, FormBuilder } from '@angular/forms'
declare var google;
@IonicPage()
......@@ -17,11 +18,20 @@ export class HomePage {
@ViewChild('map') mapElement: ElementRef;
map: any;
p_lat: any;
p_lng: any;
pickLoc:string
p_lat: number;
p_lng: number;
d_lat: number;
d_lng: number;
pickLoc: string
markers = []
driverMarkers = []
locForm: FormGroup
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public storage: Storage, private geolocation: Geolocation, private firebase: fireService, private db: AngularFireDatabase,private myservice:Myservice) {
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public storage: Storage, private geolocation: Geolocation, private firebase: fireService, private db: AngularFireDatabase, private myservice: Myservice, private formBuilder: FormBuilder) {
this.locForm = this.formBuilder.group({
pickLoc: ['', Validators.required],
dropLoc: ['', Validators.required]
})
}
ionViewDidEnter() {
......@@ -30,34 +40,77 @@ export class HomePage {
}).catch((error) => {
console.log('Error getting location', error);
});
//drivers loc
var This = this
firebase.database().ref().child('/drivers/').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
for (let i = 0; i < res_arr.length; i++) {
let marker = new google.maps.Marker({
map: This.map,
icon:'assets/img/star-on-big.png',
icon: 'assets/img/star-on-big.png',
position: { lat: res_arr[i].lat, lng: res_arr[i].lng }
});
This.driverMarkers[i]=marker
}
});
}
ionViewDidLoad(){
ionViewDidLoad() {
var autocomplete = new google.maps.places.Autocomplete(document.getElementById("pickUp"));
var p_autocomplete = new google.maps.places.Autocomplete(document.getElementById("pickUp"));
var This = this;
console.log(autocomplete)
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
This.p_lat = place.geometry.location.lat();
This.p_lng = place.geometry.location.lng();
console.log(This.p_lat, This.p_lng)
This.loadMap(This.p_lat, This.p_lng)
p_autocomplete.addListener('place_changed', function () {
This.fillAddress(p_autocomplete, 0)
});
var d_autocomplete = new google.maps.places.Autocomplete(document.getElementById("drop"));
d_autocomplete.addListener('place_changed', function () {
This.fillAddress(d_autocomplete, 1)
});
}
fillAddress(autocomplete, type) {
if (this.markers) {
this.markers[0].setMap(null);
}
var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
let marker = new google.maps.Marker({
map: this.map,
position: { lat: lat, lng: lng }
});
if (type == 0) {
this.p_lat = lat
this.p_lng = lng
this.markers[1] = marker
}
else if (type == 1) {
this.d_lat = lat
this.d_lng = lng
this.markers[2] = marker
}
if (this.p_lat && this.d_lat) {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
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);
}
else{
this.loadMap(lat,lng)
}
}
loadMap(lat, lng) {
let latLng = new google.maps.LatLng(lat, lng);
......@@ -70,25 +123,46 @@ export class HomePage {
var marker = new google.maps.Marker({
position: latLng
});
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);
}
}
ridemore() {
let modal = this.modalCtrl.create('RidepopPage');
modal.present();
calculateAndDisplayRoute(directionsService, directionsDisplay, start, dest) {
for (var i = 0; i < this.markers.length; i++) {
this.markers[i].setMap(null);
}
directionsService.route({
origin: start,
destination: dest,
travelMode: 'DRIVING'
}, function (response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
ridenow() {
let modal = this.modalCtrl.create('RidenowPage');
modal.present();
}
ridemore() {
let modal = this.modalCtrl.create('RidepopPage');
modal.present();
}
searchride() {
let modal = this.modalCtrl.create('SearchridePage');
modal.present();
}
ridenow() {
let modal = this.modalCtrl.create('RidenowPage');
modal.present();
}
searchride() {
let modal = this.modalCtrl.create('SearchridePage');
modal.present();
}
}
}
src/pages/ridepop/ridepop.html
<ion-content class="bg_transparent">
<div class="cab_ride_pop">
<div class="cab_ride_inner theme_bgcolor">
<div class="cab_ride_inner theme_bgcolor" *ngIf="carTypes">
<div class="cab_ride_down_arrow theme_bgcolor">
<ion-icon name="ios-arrow-down-outline"(click)="dismiss()"></ion-icon>
</div>
<p>Sedan</p>
<h6>Toyota Etios, Ford Fiesta</h6>
<p>{{carTypes[carIndex].car_type}}</p>
<!-- <h6>Toyota Etios, Ford Fiesta</h6> -->
<div class="cab_ride_fare_break">Fare Breakup</div>
<ion-grid>
<ion-row class="textCenter">
<ion-col col-4>
<strong>₹ 100</strong>
<h5>First 4km</h5>
<strong>₹ {{carTypes[carIndex].intailrate}}</strong>
<h5>First {{carTypes[carIndex].intialkm}}km</h5>
</ion-col>
<ion-col col-4>
<strong>₹ 12/km</strong>
<h5>After 4km</h5>
<strong>₹ {{carTypes[carIndex].standardrate}}/km</strong>
<h5>After {{carTypes[carIndex].intialkm}}km</h5>
</ion-col>
<ion-col col-4>
<strong>₹ 1/min</strong>
<strong>₹ {{carTypes[carIndex].extrahour}}/hour</strong>
<h5>Ride time Rate</h5>
</ion-col>
</ion-row>
</ion-grid>
<h6 class="bottom0">Peak time charges may apply.</h6>
<div class="cab_ride_bottom_section">
<li class="c1">
<p>1 min</p>
</li>
<li class="c2">
<p>5 min</p>
</li>
<li class="c3">
<p>3 min</p>
</li>
<li class="c4">
<p>Arriving</p>
</li>
<li class="c5">
<p>Out</p>
<li class="c1" *ngFor="let car of carTypes; let i = index;" [style.backgroundImage]="'url('+ car.car_image +')'" (click)="carClick(i)">
<p>{{car.car_type}}</p>
</li>
<div class="clear"></div>
</div>
......@@ -47,8 +35,11 @@
</ion-content>
<ion-footer>
<div class="cab_footer_btn_bay">
<button ion-button class="cab_footer_btn floatRight" (click)="dismiss()">RIDE NOW</button>
<button ion-button class="cab_footer_btn floatLeft" (click)="dismiss()">RIDE LATER</button>
<button ion-button class="cab_footer_btn floatRight" (click)="dismiss()">CANCEL RIDE
</button>
<button ion-button class="cab_footer_btn floatLeft" (click)="bookLater()">RIDE LATER
<ion-datetime min="{{cur_date}}" max="{{max_date}}" displayFormat="MMM DD YYYY" [(ngModel)]="myDate"></ion-datetime>
</button>
<div class="clear"></div>
</div>
</ion-footer>
src/pages/ridepop/ridepop.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ViewController} from 'ionic-angular';
import { Myservice } from "../../providers/myservice";
import { cartype } from "../../models/mymodel";
import { DatePicker } from '@ionic-native/date-picker';
@IonicPage()
@Component({
selector: 'page-ridepop',
templateUrl: 'ridepop.html',
})
export class RidepopPage {
carTypes:Array<cartype>
carIndex:number = 0;
cur_date:any;
max_date:any;
constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, private myservice: Myservice, private datePicker: DatePicker) {
var now = new Date();
this.cur_date = now.toISOString()
var year = now.getFullYear();
this.max_date = (year + 10)
}
ionViewDidEnter() {
this.myservice.show_loader()
this.myservice.load_post({},'getCabDetails').subscribe(response=>{
this.myservice.hide_loader()
if(response.status == 'success'){
this.carTypes = response.data
}
else{
this.myservice.show_alert('Failed',response.message)
}
})
}
constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) {
carClick(index){
this.carIndex = index
}
ionViewDidLoad() {
console.log('ionViewDidLoad RidepopPage');
bookLater(){
this.datePicker.show({
date: new Date(),
mode: 'datetime',
minDate: new Date(),
allowOldDates:false,
androidTheme: this.datePicker.ANDROID_THEMES.THEME_HOLO_DARK
}).then(
date =>{
console.log('1st', date)
},
err => console.log('Error occurred while getting date: ', err)
);
}
dismiss()
......
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