Skip to content

C
Callmycab-Driverapp
Commit f3408bcd by Alen Jose
Options

myride details

parent b998af2d
Showing with 272 additions and 70 deletions
config.xml
......@@ -84,4 +84,7 @@
<plugin name="cordova-plugin-network-information" spec="^2.0.1" />
<plugin name="onesignal-cordova-plugin" spec="^2.4.1" />
<plugin name="cordova-plugin-request-location-accuracy" spec="^2.2.3" />
<plugin name="cordova-plugin-geolocation" spec="^4.0.1">
<variable name="GEOLOCATION_USAGE_DESCRIPTION" value="To locate you" />
</plugin>
</widget>
package.json
......@@ -22,17 +22,22 @@
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/core": "4.7.0",
"@ionic-native/geolocation": "^4.8.0",
"@ionic-native/location-accuracy": "^4.8.0",
"@ionic-native/network": "^4.8.0",
"@ionic-native/onesignal": "^4.8.0",
"@ionic-native/splash-screen": "4.7.0",
"@ionic-native/status-bar": "4.7.0",
"@ionic/storage": "2.1.3",
"angularfire2": "^5.0.0-rc.11",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-plugin-network-information": "^2.0.1",
"cordova-plugin-request-location-accuracy": "^2.2.3",
"firebase": "^5.1.0",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"onesignal-cordova-plugin": "^2.4.1",
"promise-polyfill": "^8.0.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
......@@ -46,7 +51,10 @@
"plugins": {
"cordova-plugin-network-information": {},
"onesignal-cordova-plugin": {},
"cordova-plugin-request-location-accuracy": {}
"cordova-plugin-request-location-accuracy": {},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
}
}
}
}
src/app/app.module.ts
......@@ -14,6 +14,19 @@ import { Myservice } from "../providers/myservice";
import { HttpModule } from "@angular/http";
import { IonicStorageModule } from '@ionic/storage';
import { OrderbyPipe } from '../providers/sort-pipe';
import { Geolocation } from '@ionic-native/geolocation';
import { fireService } from "../providers/firebase.service";
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireModule } from 'angularfire2';
export const firebaseConfig = {
apiKey: "AIzaSyDLrbLd4RCCh86xuTVu7-cfJ28We_cG1sU",
authDomain: "callmycab-205809.firebaseapp.com",
databaseURL: "https://callmycab-205809.firebaseio.com",
projectId: "callmycab-205809",
storageBucket: "callmycab-205809.appspot.com",
messagingSenderId: "151146703576"
};
@NgModule({
declarations: [
MyApp
......@@ -23,6 +36,7 @@ import { OrderbyPipe } from '../providers/sort-pipe';
IonicModule.forRoot(MyApp),
HttpModule,
IonicStorageModule.forRoot(),
AngularFireModule.initializeApp(firebaseConfig),
],
bootstrap: [IonicApp],
entryComponents: [
......@@ -37,6 +51,9 @@ import { OrderbyPipe } from '../providers/sort-pipe';
LocationAccuracy,
Myservice,
OrderbyPipe,
Geolocation,
fireService,
AngularFireDatabase,
]
})
export class AppModule {}
src/index.html
......@@ -44,6 +44,8 @@
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places&key=AIzaSyCk1_NXO6fDntAzKEl7sO-z6Ut5evHLsKQ"></script>
</body>
</html>
src/pages/home/home.html
......@@ -21,68 +21,45 @@
<ion-content padding class="home_background">
<div class="home_content_tab" [hidden]="tab != 'active'">
<ul>
<li>
<li *ngFor="let up of upcoming" (click)="rideDetails(up)">
<div class="home_content_circle">
<img [src]=baseurl+up.image />
</div>
<div class="home_content_detail">
<h5>Lora Sebastain</h5>
<p class="yellow">HSR Layout Bengaluru</p>
<p class="grey">Electronic City</p>
<h5>{{up.username}}</h5>
<p class="yellow">{{up.pickup_area}}</p>
<p class="grey">{{up.drop_area}}</p>
</div>
<div class="home_content_right">
<p>28/08/2018</p>
<p>05:00 am</p>
<p>{{up.pickup_date | date:'dd/MM/yy'}}</p>
<p>{{up.pickup_time}}</p>
</div>
<div class="clear"></div>
</li>
<li>
<div class="home_content_circle">
</div>
<div class="home_content_detail">
<h5>Lora Sebastain</h5>
<p class="yellow">HSR Layout Bengaluru</p>
<p class="grey">Electronic City</p>
</div>
<div class="home_content_right">
<p>28/08/2018</p>
<p>05:00 am</p>
</div>
<div class="clear"></div>
</li>
<li>
<div class="home_content_circle">
</div>
<div class="home_content_detail">
<h5>Lora Sebastain</h5>
<p class="yellow">HSR Layout Bengaluru</p>
<p class="grey">Electronic City</p>
</div>
<div class="home_content_right">
<p>28/08/2018</p>
<p>05:00 am</p>
</div>
<div class="clear"></div>
</li>
<li>
</ul>
<p *ngIf="upcoming?.length==0" class="blank">No rides found</p>
</div>
<!-- <div class="home_content_tab" [hidden]="tab != 'inactive'">
3
</div> -->
<div class="home_content_tab" [hidden]="tab != 'inactive1'">
<ul>
<li *ngFor="let comp of completed" (click)="rideDetails(comp)">
<div class="home_content_circle">
<img [src]=baseurl+comp.image />
</div>
<div class="home_content_detail">
<h5>Lora Sebastain</h5>
<p class="yellow">HSR Layout Bengaluru</p>
<p class="grey">Electronic City</p>
<h5>{{comp.username}}</h5>
<p class="yellow">{{comp.pickup_area}}</p>
<p class="grey">{{comp.drop_area}}</p>
</div>
<div class="home_content_right">
<p>28/08/2018</p>
<p>05:00 am</p>
<p>{{comp.pickup_date | date:'dd/MM/yy'}}</p>
<p>{{comp.pickup_time}}</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<!-- <div class="home_content_tab" [hidden]="tab != 'inactive'">
3
</div> -->
<div class="home_content_tab" [hidden]="tab != 'inactive1'">
5
<p *ngIf="completed?.length==0" class="blank">No rides found</p>
</div>
</ion-content>
src/pages/home/home.scss
......@@ -58,6 +58,7 @@ page-home {
height:100%;
object-fit:cover;
object-position:center;
border-radius: 50%;
}
}
.home_content_detail{
......@@ -113,4 +114,9 @@ page-home {
}
}
}
.blank{ padding-top: 50%;
text-align: center;
font-size: 20px;
font-weight: 500;
color: #ccb59a;}
}
src/pages/home/home.ts
......@@ -12,6 +12,7 @@ export class HomePage {
tab:any;
upcoming:any;
completed:any;
baseurl = this.myservice.base_url
constructor(public navCtrl: NavController, public navParams: NavParams, private storage:Storage, private myservice:Myservice) {
}
......@@ -19,11 +20,11 @@ completed:any;
ionViewDidEnter(){
this.storage.get('driver_data').then(data=>{
if(data){
console.log(data)
this.myservice.load_post({id:data.id},'getMyRides').subscribe(response=>{
if(response.status == 'success'){
this.upcoming = response.data.upcoming
this.completed = response.data.completed
console.log(this.upcoming)
}
})
}
......@@ -40,4 +41,7 @@ tab_swap(type) {
this.tab = type;
}
rideDetails(data){
this.navCtrl.push('RidedetailsPage',{data:data})
}
}
src/pages/ridedetails/ridedetails.html
......@@ -12,14 +12,14 @@
<div class="jr_from_to">
<li>
<div class="child1 from"><div class="jr_box1"></div></div>
<div class="child2 yellow"><strong>Electronic City</strong>
<p>fdgsdgsdg</p></div>
<div class="child2 yellow"><strong>{{details.from}}</strong>
<p>{{details.fromAd}}</p></div>
<div class="jr_clear"></div>
</li>
<li>
<div class="child1 to"></div>
<div class="child2 grey"><strong>HSR Layout</strong>
<p>gfhdfgthj</p></div>
<div class="child2 grey"><strong>{{details.to}}</strong>
<p>{{details.toAd}}</p></div>
<div class="jr_clear"></div>
</li>
</div>
......@@ -29,18 +29,21 @@
<div class="jr_search_bottom_bay jr_padding0" >
<div class="jr_search_profile">
<img >
<img [src]=baseurl+details.image>
</div>
<div class="jr_search_profile_detail">
<br>
<h6>Lina Rhodes&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;28 Y/O</h6>
<span class="jr_star_ratting"><img src="assets/img/jr_star.png"><strong>4.8/5</strong>05 Ratings</span><br>
<h6>{{details.username}}</h6>
<span class="jr_star_ratting">
<strong>{{details.pickup_date|date:'dd/MM/yy'}}&nbsp;&nbsp;&nbsp;{{details.pickup_time}}
</strong></span>
<br>
</div>
<div class="jr_clear"></div>
</div>
<div class="jr_bottom_button_bay">
<button ion-button class="cab_footer_btn">Track Driver</button>
<div class="jr_bottom_button_bay" *ngIf="details.status=='Booking'">
<button ion-button class="cab_footer_btn" (click)="pick()">Pick Up</button>
</div>
</div>
......
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';
@IonicPage()
@Component({
......@@ -7,16 +9,31 @@ import { IonicPage, NavController, NavParams } from 'ionic-angular';
templateUrl: 'ridedetails.html',
})
export class RidedetailsPage {
details = this.navParams.get('data')
baseurl = this.myservice.base_url
constructor(public navCtrl: NavController, public navParams: NavParams) {
constructor(public navCtrl: NavController, public navParams: NavParams, private myservice: Myservice) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad RidedetailsPage');
var tempf = this.details.pickup_area.split(',')
this.details.from = tempf[0]
this.details.fromAd = this.details.pickup_area
this.details.timestamp = new Date(this.details.pickup_date + ' ' + this.details.pickup_time).getTime()
var temp = this.details.drop_area.split(',')
this.details.to = temp[0]
this.details.toAd = this.details.drop_area
console.log(this.details)
}
back(){
this.navCtrl.pop();
}
pick(){
this.navCtrl.push('UserlocationPage',{ data: this.details})
}
}
src/pages/signup/signup.ts
......@@ -6,6 +6,8 @@ import { dialcode } from "../../models/mymodel";
import { OrderbyPipe } from '../../providers/sort-pipe';
import { Myservice } from "../../providers/myservice";
import { OneSignal } from "@ionic-native/onesignal";
import { fireService } from "../../providers/firebase.service";
import { Geolocation } from '@ionic-native/geolocation';
@IonicPage()
@Component({
......@@ -16,7 +18,8 @@ export class SignupPage {
signupForm: FormGroup
codes: Array<dialcode>;
constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, private http: Http, private orderbyPipe: OrderbyPipe, private myservice: Myservice, private onesignal: OneSignal) {
constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, private http: Http, private orderbyPipe: OrderbyPipe, private myservice: Myservice, private onesignal: OneSignal, private firebase: fireService, private geolocation: Geolocation) {
this.signupForm = this.formBuilder.group({
name: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
username: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
......@@ -46,12 +49,19 @@ export class SignupPage {
register() {
this.myservice.show_loader()
this.geolocation.getCurrentPosition().then((resp) => {
// this.onesignal.getIds().then((id) => {
this.signupForm.controls['deviceid'].setValue(0/*id.userId*/)
this.myservice.load_post(this.signupForm.value, 'driver_sign_up').subscribe(response => {
this.myservice.hide_loader()
if (response.status == 'success') {
response.data.lat = resp.coords.latitude
response.data.lng = resp.coords.longitude
response.data.started = false
response.data.status = 'offline'
this.firebase.pushItem('drivers/', response.data)
this.navCtrl.setRoot("SigninPage");
}
else {
......@@ -59,6 +69,9 @@ export class SignupPage {
}
})
// })
}).catch((error) => {
console.log('Error getting location', error);
});
}
MatchPassword(val) {
......
src/pages/userlocation/userlocation.html
......@@ -7,15 +7,15 @@
</ion-header>
<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="From">
<input class="jr_dest_input to" placeholder="To">
<input class="jr_dest_input from" placeholder="From" [(ngModel)]="loc.from">
<input class="jr_dest_input to" placeholder="To" [(ngModel)]="loc.to">
</div>
</div>
</ion-content>
<ion-footer>
<div class="jr_bottom_button_bay">
<button ion-button class="cab_footer_btn">Cancel</button>
<div class="jr_bottom_button_bay" *ngIf="temp">
<button ion-button class="cab_footer_btn">Start Ride</button>
</div>
</ion-footer>
\ No newline at end of file
src/pages/userlocation/userlocation.ts
import { Component } from '@angular/core';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
declare var google;
@IonicPage()
@Component({
......@@ -9,17 +10,103 @@ import { IonicPage, NavController, NavParams } from 'ionic-angular';
templateUrl: 'userlocation.html',
})
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) {
constructor(public navCtrl: NavController, public navParams: NavParams, private geolocation: Geolocation) {
this.geolocation.getCurrentPosition().then((resp) => {
this.loadMap(resp.coords.latitude, resp.coords.longitude);
})
}
ionViewDidLoad() {
console.log('ionViewDidLoad UserlocationPage');
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 });
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)
};
var marker = new google.maps.Marker({
position: driverLoc,
map: This.map,
icon: dimage
});
if (This.i == 5) {
// if (google.maps.geometry.spherical.computeDistanceBetween(pickLoc, driverLoc) < 100) {
This.temp = true
}
This.calculateAndDisplayRoute(directionsService, This.directionsDisplay, pickLoc, driverLoc);
})
}
loadMap(lat, lng) {
let latLng = new google.maps.LatLng(lat, lng);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
this.directionsDisplay = new google.maps.DirectionsRenderer({
map: this.map,
preserveViewport: true
});
}
back(){
this.navCtrl.pop();
}
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);
}
});
}
ionViewWillLeave() {
this.locSubs.unsubscribe();
}
}
src/providers/firebase.service.ts 0 → 100644
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { FirebaseListObservable } from 'angularfire2/database-deprecated';
import * as firebase from 'firebase';
import 'rxjs/add/operator/toPromise';
// import { Router } from '@angular/router';
@Injectable()
export class fireService {
items: FirebaseListObservable<any[]>;
//data: FirebaseObjectObservable<any[]>;
data:any;
currentUser: any;
userData: any;
// private basePath: string = 'users';
constructor(
private db: AngularFireDatabase,) {
// console.log(this.currentUser);
// console.log('hhhh');
}
pushItem(url,data){
var key = firebase.database().ref(url).push().key;
var new_node = url + "/" + key;
data.push_id = key;
this.updateItem(new_node, data)
return 'success';
}
updateItem(url,data){
// return this.db.object(url).update(data);
var promise = new Promise((resolve, reject) => {
if (this.db.object(url).update(data)) {
// console.log("Updated");
resolve({ 'status': 'success' });
} else {
reject();
}
});
return promise;
}
removeItem(url){
return this.db.object(url).remove();
}
listItem(url){
return this.db.list(url);
}
listItemQuery(url,query){
return this.db.list(url,query);
}
checkItem(url){
return this.db.list(url);
}
}
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