Skip to content

C
Callmycab-Userapp
Commit 9de6bd2d by Alen Jose
Options

ride route

parent ec14c3b7
Showing with 906 additions and 58 deletions
src/app/app.component.ts
...@@ -30,7 +30,7 @@ export class MyApp { ...@@ -30,7 +30,7 @@ export class MyApp {
if(data){ if(data){
this.rootPage = 'HomePage' this.rootPage = 'HomePage'
this.local = data this.local = data
console.log(this.local) // console.log(this.local)
} }
else else
this.rootPage = 'LandingPage' this.rootPage = 'LandingPage'
...@@ -86,7 +86,8 @@ export class MyApp { ...@@ -86,7 +86,8 @@ export class MyApp {
// do something when a notification is opened // do something when a notification is opened
}); });
this.oneSignal.endInit();} this.oneSignal.endInit();
}
enableLoc(){ enableLoc(){
this.locationAccuracy.canRequest().then((canRequest: boolean) => { this.locationAccuracy.canRequest().then((canRequest: boolean) => {
......
src/pages/home/home.ts
...@@ -31,6 +31,7 @@ export class HomePage { ...@@ -31,6 +31,7 @@ export class HomePage {
geocoder: any; geocoder: any;
local:user local:user
directionsDisplay:any; 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) { 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 { ...@@ -73,7 +74,8 @@ export class HomePage {
//drivers loc //drivers loc
var This = this 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] })); var res_arr = (<any>Object).entries(snapshot.val()).map(e => Object.assign(e[1], { key: e[0] }));
//placing marker for each driver //placing marker for each driver
...@@ -217,4 +219,8 @@ export class HomePage { ...@@ -217,4 +219,8 @@ export class HomePage {
modal.present(); modal.present();
} }
ionViewWillLeave(){
this.locRef.off("value");
}
} }
src/pages/map/map.html
...@@ -9,15 +9,15 @@ ...@@ -9,15 +9,15 @@
<ion-content> <ion-content>
<div #map id="map"></div> <div #map id="map"></div>
<!-- <div class="jr_bottom_distance_card"> <div class="jr_bottom_distance_card" *ngIf="temp">
<div class="jr_bottom_inside"> <div class="jr_bottom_inside">
<input class="jr_dest_input from" placeholder="HSR Layout, Kormangala,Bengalure" [(ngModel)]="bookData."> <input class="jr_dest_input from" placeholder="From" [(ngModel)]="bookData.pickArea" [readonly]="true">
<input class="jr_dest_input to" placeholder="Jalihalli, Outercity, Bengaluru"> <input class="jr_dest_input to" placeholder="To" [(ngModel)]="bookData.dropArea" [readonly]="true">
</div>
</div> </div>
</div> -->
</ion-content> </ion-content>
<ion-footer> <ion-footer *ngIf="!temp">
<div class="jr_bottom_button_bay"> <div class="jr_bottom_button_bay">
<button ion-button class="jr_offer_ride2" (click)="cancel()">Cancel</button> <button ion-button class="jr_offer_ride2" (click)="cancel()">Cancel</button>
</div> </div>
......
src/pages/map/map.ts
...@@ -15,6 +15,9 @@ export class MapPage { ...@@ -15,6 +15,9 @@ export class MapPage {
map: any; map: any;
directionsDisplay: any; directionsDisplay: any;
bookData:any; bookData:any;
temp:boolean = false;
locSubs:any;
driver:any;
constructor(public navCtrl: NavController, public navParams: NavParams, private data: dataService, private geolocation: Geolocation) { constructor(public navCtrl: NavController, public navParams: NavParams, private data: dataService, private geolocation: Geolocation) {
} }
...@@ -28,14 +31,23 @@ export class MapPage { ...@@ -28,14 +31,23 @@ export class MapPage {
} }
ionViewDidEnter(){ ionViewDidEnter(){
var driver = this.data.getdriverData(); this.driver = this.data.getdriverData();
this.bookData = this.data.getbookingData(); this.bookData = this.data.getbookingData();
console.log(this.bookData) console.log(this.bookData)
var This = this; 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] })); var res_arr = (<any>Object).entries(snapshot.val()).map(e => Object.assign(e[1], { key: e[0] }));
console.log(res_arr[0]) console.log(res_arr[0])
if (res_arr[0].started == true){
locRef.off("value");
This.startRide();
}
else{
var directionsService = new google.maps.DirectionsService; var directionsService = new google.maps.DirectionsService;
This.directionsDisplay.setMap(This.map); This.directionsDisplay.setMap(This.map);
...@@ -43,11 +55,8 @@ export class MapPage { ...@@ -43,11 +55,8 @@ export class MapPage {
var pickLoc = new google.maps.LatLng(This.bookData.pickLat, This.bookData.pickLng); 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); 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); This.calculateAndDisplayRoute(directionsService, This.directionsDisplay, pickLoc, driverLoc);
}
}); });
} }
...@@ -91,7 +100,44 @@ export class MapPage { ...@@ -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(){ cancel(){
this.navCtrl.pop(); this.navCtrl.pop();
} }
ionViewWillLeave(){
this.locSubs.unsubscribe();
}
} }
src/pages/ridedetail/ridedetail.html
...@@ -36,11 +36,9 @@ ...@@ -36,11 +36,9 @@
</div> </div>
<hr> <hr>
<br> <br>
<!-- <div class="jr_search_bottom_bay jr_padding0">
<div class="loader"></div>
</div> --> <div class="jr_search_bottom_bay jr_padding0" *ngIf="driver">
<span *ngIf="driver">
<div class="jr_search_bottom_bay jr_padding0">
<div class="jr_search_profile"> <div class="jr_search_profile">
<img [src]=driver.image> <img [src]=driver.image>
</div> </div>
...@@ -51,43 +49,6 @@ ...@@ -51,43 +49,6 @@
</div> </div>
<div class="jr_clear"></div> <div class="jr_clear"></div>
</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"> <div class="jr_bottom_button_bay">
<button ion-button class="jr_offer_ride2" (click)="track()">Track Driver</button> <button ion-button class="jr_offer_ride2" (click)="track()">Track Driver</button>
......
src/pages/ridedetail/ridedetail.ts
...@@ -50,6 +50,8 @@ export class RidedetailPage { ...@@ -50,6 +50,8 @@ export class RidedetailPage {
// this.myservice.load_post(bdata, 'book_cab').subscribe(response => { // this.myservice.load_post(bdata, 'book_cab').subscribe(response => {
// if (response.status == 'success') { // if (response.status == 'success') {
// this.bkid = response.data // this.bkid = response.data
this.book.bookingId = this.bkid
this.data.setbookingData(this.book);
this.checkResp(); this.checkResp();
// } // }
// else { // else {
...@@ -73,12 +75,17 @@ export class RidedetailPage { ...@@ -73,12 +75,17 @@ export class RidedetailPage {
This.geocoder.geocode({ 'latLng': latlng }, function (results, status) { This.geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) { if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) { if (results[0]) {
// console.log(results)
if (i == 0) { 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 This.loc.fromAd = results[0].formatted_address
} }
else { 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.loc.toAd = results[0].formatted_address
This.zone.run(() => { }); 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.scss 0 → 100644
page-ridesummary {
.jr_theme_color{background: #ff9000 !important;border:1px solid #ff9000;}
.jr_theme_color1{background:#f1672f !important;}
.jr_left{float: left !important;}
.jr_right{float: right !important;}
.jr_clear{clear: both;}
.jr_text_center{text-align: center !important;}
.jr_padding0{padding:0px !important;}
.jr_paddingtop0{padding-top:0px !important;}
.jr_margin0{margin:0px !important;}
.jr_paddingbtm0{padding-bottom:0px !important;}
.jr_marginbtm0{margin-bottom:0px !important;}
.jr_margintop0{margin-top:0px !important;}
.jr_bordernone{border:none !important;}
.jr_bg_none{background:none !important;}
.jr_transparent{background:rgba(0,0,0,0.8) !important;}
.button-md.activated {background-color:none !important;box-shadow:none !important;}
.button-md{box-shadow: none !important;}
/*LANDING-PAGE*/
.jr_landing_bg{background:url("../assets/img/jr_landing_bg.png") !important;background-repeat: no-repeat !important;background-position: center bottom !important;background-size: 100% !important;position: relative;}
.jr_login_bg{background:url("../assets/img/jr_login_bg.png") !important;background-repeat: no-repeat !important;background-position: center bottom !important;background-size: 100% !important;position: relative;}
.jr_sidemenu_bg{background:url("../assets/img/jr_sidemenu_bg.png") !important;background-repeat: no-repeat !important;height: 100%;background-position: center bottom !important; padding: 50px;
background-size:cover !important;position: relative;}
.jr_landing_overlay{background:linear-gradient(rgba(241, 103, 46, 0.8), rgba(239, 89, 124, 0.8));}
.jr_landing_overlay1{background:linear-gradient(rgba(32, 119, 163, 0.8), rgba(43, 30, 65, 0.8));}
.jr_slide{text-align: center;}
.jr_slide img{width:200px;margin-top: 10px;}
.jr_slide h4{color: #fff;font-size:24px;font-weight:200;margin:0px;}
.jr_slide h3{color: #fff;font-size:35px;margin:0px;padding-top:5px;padding-bottom: 5px;}
.jr_slide p{color: #fff;font-size:14px;font-weight:300; padding-top: 15px; line-height: 20px;}
.jr_space{width:100%;height:0px;}
.jr_landing_btm{position: fixed;width:100%;bottom:50px;z-index: 9; text-align: center;left:0px;right:0px;}
.jr_slide hr{border:1px solid #fff;width:40px;border-bottom: 1px solid #fff;border-top: 1px solid #fff;border-radius: 5px; margin-top: 25px;height: 0px;}
.jr_btm_btn{height:40px;border-radius:20px;background: #000000;color: #fff;font-family: 'Roboto', sans-serif;padding-left: 20px;padding-right: 20px;-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;width: 120px;margin: 0 auto;text-align: center;font-size: 15px;padding: 10px;border:none; text-transform: capitalize;}
.jr_slider_inner{width:80%;margin:0 auto;position: absolute;left:0px;right:0px;top:10%;}
.jr_btm_btn img{width:8px;}
.jr_icon_bar{display: inline-block;width:100%;text-align: center;}
.jr_icon_bar span{display: inline-block;margin-left: 5px;margin-right: 5px;}
.jr_icon_bar span img{width:30px;}
.jr_last_slide_btn_bar{width:100%;text-align: center;}
.jr_strtd_btn{height:40px;border-radius:20px;background: #ffba00;color: #382c59;font-family: 'Roboto', sans-serif;padding-left: 20px;padding-right: 20px;-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;width: 140px;margin: 0 auto;text-align: center;font-size: 15px;padding: 10px;border:none; }
.jr_sign_bar{width:100%;text-align: center;}
.jr_sign_bar ul{margin:0px;padding:0px;}
.jr_sign_bar ul li{display: inline-block;border:1px solid #fff;color: #fff;height:40px;border-radius:20px;padding-left: 20px;padding-right: 20px;text-align: center;font-size: 15px;padding: 10px;background: transparent !important;width:115px !important;margin:20px;}
.swiper-pagination{display: block !important;}
.swiper-pagination-bullet{background: #fff;border:1px solid #fff;}
/*HOME*/
.jr_header_btn{width:40px;height:40px;background: transparent;box-shadow: none;}
.jr_sidemenu_icon{background:url("../assets/img/jr_sidemenu_icon.png") !important;background-repeat: no-repeat !important;background-position: center !important;background-size:20px !important;}
.jr_back_icon{background:url("../assets/img/jr_back_arrow_icon.png") !important;background-repeat: no-repeat !important;background-position: center !important;background-size:12px !important;}
.jr_close_icon{background:url("../assets/img/jr_close.png") !important;background-repeat: no-repeat !important;background-position: center !important;background-size:12px !important;}
.jr_mail_icon{background:url("../assets/img/jr_mail.png") !important;background-repeat: no-repeat !important;background-position: center !important;background-size:20px !important;}
.jr_profile_icon{background:url("../assets/img/jr_profile.png") !important;background-repeat: no-repeat !important;background-position: center !important;background-size:20px !important;}
.jr_alert_icon{background:url("../assets/img/jr_alert.png") !important;background-repeat: no-repeat !important;background-position: center !important;background-size:20px !important;}
.jr_header_title{float: left;height:40px;margin-top: 5px;padding: 8px;padding-left: 0px;}
.jr_header_title h4{font-family: 'Roboto', sans-serif;color: #fff;margin:0px;font-weight: 300;font-size: 16px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; position: relative;top:2px;}
.jr_header{padding-left:5px;padding-right:5px;box-shadow: none !important;background-image: none !important;}
.jr_body_wrapper{width:100%;height:100%;}
.jr_div_half{width:100%;height:50%;position: relative;}
.jr_div_half img{object-fit: cover;object-position: center;width:100%;height:100%;}
.jr_div_overlay{background: rgba(0,0,0,0.7);position: absolute;top:0px;left:0px;right:0px;bottom: 0px;text-align: center;padding: 15px;}
.jr_div_overlay p{text-align: center;color: #bababa;}
.jr_offer_ride{height:35px;width:130px;border-radius:20px;border:none;
background: -webkit-linear-gradient(left, #6a449b , #1379a1);
background: -o-linear-gradient(right, #6a449b, #1379a1);
background: -moz-linear-gradient(right, #6a449b, #1379a1);
background: linear-gradient(to right, #6a449b , #1379a1);
text-transform: capitalize !important;
font-size: 14px;
font-weight: 400;
line-height: 5px;
}
.jr_offer_ride1{height:45px;width:130px;border:none;
background:#4d4d4d;
border-radius: 0px;
text-transform: capitalize !important;
font-size: 14px;
font-weight: 400;
line-height: 5px;
}
.jr_offer_ride2{height:45px;width:100%;
margin: 0px;
border:none;
border-radius: 0px;
background:#4d4d4d;
text-transform: capitalize !important;
font-size: 14px;
font-weight: 400;
line-height: 5px;
}
.jr_offer_ride3{height:45px;width:100%;
border:none;
border-radius: 0px;
background:#4d4d4d;
text-transform: capitalize !important;
font-size: 14px;
font-weight: 400;
line-height: 5px;
}
.jr_offer_ride4{height:35px;width:100%;border:none;
background:#2874a2;
text-transform: capitalize !important;
font-size: 14px;
font-weight: 400;
line-height: 5px;
}
.jr_offer_ride5{height:35px;width:100%;border:none;
background:#ff7200;
text-transform: capitalize !important;
font-size: 14px;
font-weight: 400;
line-height: 5px;
}
.jr_over_inner{width:100%;position: relative;top: 25%;}
.jr_home_tab_content{width:100%;height:100%;}
.jr_home_tab_bay{width:100%;padding:5px;padding-top: 0px;}
.jr_home_tab_bay ul{width:100%;text-align: center;padding:5px;margin:0px;}
.jr_home_tab_bay ul li{width:40%;display: inline-block;text-align: center;color: #fff;padding: 4px;}
.jr_home_tab_bay ul .active{border:1px solid #fff;border-radius: 20px;}
/*OFFER-FIND-RIDE*/
.jr_ride_wrapper{width:100%; padding-top: 5px;height: 100%;}
.jr_ride_wrapper h5{text-align: center;color: #717171;font-weight: 300;}
.jr_offer_bg{width:100%;padding-top:20px;}
.jr_offer_bg img{}
.jr_ride_form{width:90%;margin:0 auto;padding-top:25px;position: relative;padding-bottom:60px;}
.jr_ride_input1{width:100%;height:30px;border:1px solid #959595;border-radius:20px;background:url("../assets/img/jr_blue_circle.png"),url("../assets/img/jr_loc.png") !important;font-family: 'Roboto', sans-serif;background-repeat: no-repeat !important;background-position: left 7px top 5px,right 8px top 5px!important;background-size:18px !important; padding-left: 35px;}
.jr_ride_input2{width:100%;height:30px;border:1px solid #959595;border-radius:20px;background:url("../assets/img/jr_orange_circle.png") !important;font-family: 'Roboto', sans-serif;background-repeat: no-repeat !important;background-position:7px,6px !important;background-size:18px !important; padding-left: 35px;}
.jr_box{height:15px;width:20px;border-left:1px dotted #959595;position: absolute;top:56px;left:17px;}
.jr_custom label {display: inline-block;cursor: pointer;position: relative;padding-left: 25px;margin-right: 15px;color: #8b8b8b;font-size: 13px;font-family: 'Roboto', sans-serif;font-weight:400;}
.jr_custom label:before {content: "";display: inline-block;width: 14px;height: 14px;margin-right: 10px;position: absolute;left: 0;bottom: 1px;background-color: #ffffff;border-radius:0px !important;border:1px solid #959595;border-radius:3px !important;}
.jr_custom label:before {border-radius: 8px;}
.jr_custom input[type=checkbox] {display: none;}
.jr_custom label:before {border-radius: 3px;}
.jr_custom input[type=checkbox]:checked + label:before {content: "\2713";font-size: 14px;color: #6a449b;text-align: center;line-height:16px;font-weight:600;}
.jr_custom{padding-top: 30px;padding-bottom: 30px; padding-left: 5px;}
.jr_time_div{width:100%;}
.jr_date{width:65%;float: left;}
.jr_time{width: 35%;float: left;padding-left: 10px;}
.jr_input3{width:100%;border:none;min-height:30px !important;border-bottom:1px solid #959595;font-family: 'Roboto', sans-serif;padding: 0px !important;}
.jr_select{width:100%;border:none;height:30px;border-bottom:1px solid #959595;font-family: 'Roboto', sans-serif;color: #8b8b8b;-webkit-appearance: none;-moz-appearance: none;background:url("../assets/img/jr_dwn_arw.png");background-position: right;background-repeat: no-repeat;background-size: 15px; font-size: 16px;}
.jr_select option{color: #8b8b8b;font-family: 'Roboto', sans-serif;}
.jr_input3 .datetime-ios{padding: 0px !important;color: #646464;font-family: 'Roboto', sans-serif;}
.jr_input3 .datetime-md{padding: 0px !important;color: #646464;font-family: 'Roboto', sans-serif;}
.jr_bottom_button_bay{width:100%;position: fixed;bottom: 0px;padding:0px;left:0px;right:0px;text-align: center;}
.jr_seat_number{width:100%;padding-top:15px;}
.jr_seat_number ul{padding: 0px;margin:0px;}
.jr_seat_number ul li{display: inline-block;width:32px !important;height:32px;border-radius:50%;border:1px solid #4a4a4a;background:none !important;color: #4a4a4a;text-align: center;font-family: 'Roboto', sans-serif; font-size: 18px;padding: 6px !important; margin: 5px;}
.jr_seat_number ul li:hover{background:#4a4a4a;color: #fff;}
.jr_seat_number ul li:focus{background:#4a4a4a !important;color: #fff !important;}
.jr_seat_number span{color: #8b8b8b;font-family: 'Roboto', sans-serif;font-size: 16px;padding-right: 20px;}
.header-md::after, .tabs-md[tabsPlacement="top"] > .tabbar::after, .footer-md::before, .tabs-md[tabsPlacement="bottom"] > .tabbar::before{background-image: none !important;}
.jr_ride_wrapper p{text-align: center;color: #fff;font-weight: 200;}
.jr_archive_btn{height:30px;border-radius:20px;background: rgba(0,0,0,0.4) !important;font-weight: 200;font-size: 13px;padding-left: 20px;padding-right:20px;}
/*OFFER-RIDE-DETAILS*/
.jr_offerride_details{width: 100%;padding: 15px;padding-top: 0px !important;padding-bottom: 30px;}
.jr_offerride_details ul{margin:0px;padding:0px;}
.jr_offerride_details ul li{width: 100%;list-style: none;border-bottom:1px solid #d0d0d0;padding-bottom: 15px;padding-top: 15px;padding-left: 0px !important;}
.jr_offerride_details ul li h4{margin:0px;font-family: 'Roboto', sans-serif;color: #717171;font-size:17px;font-weight: 400;padding-bottom: 10px;padding-top: 10px;}
.jr_offerride_details ul li h4 img{width:18px;position: relative;top: 3px;margin-right:10px;}
.jr_offerride_detail_content{width:100%;}
.jr_offerride_detail_content_left{width:60%;float: left;}
.jr_offerride_detail_content_right{width:40%;float: right;height:50px;border-left:1px solid #d0d0d0;}
.jr_offerride_price_tag{text-align:right;padding-top: 5px;}
.jr_offer_price{font-family: 'Roboto', sans-serif;color: #2078a2;font-size:30px;font-weight: 600;padding-left:7px;padding-right:7px;}
.jr_offerride_price_tag img{width:20px;}
.jr_destination{padding-top:7px;}
.jr_destination span{font-family: 'Roboto', sans-serif;color: #717171;font-size:16px;font-weight: 400;}
.jr_destination span img{width:12px;margin-right:10px;}
.jr_offerride_details ul li h5{font-family: 'Roboto', sans-serif;color: #717171;margin-top:0px;font-weight: 400;font-size: 16px;padding-left: 30px;}
.jr_offerride_details ul li p{font-family: 'Roboto', sans-serif;color: #7d7d7d;padding-left: 30px;line-height: 18px; margin-top: 0px;}
.jr_addcomment_btn{font-family: 'Roboto', sans-serif;color: #fff;font-weight: 300;font-size: 14px;border-radius:20px;height: 30px;background: #363636;padding-left: 20px;padding-right: 20px;text-transform: capitalize;margin-top:15px;}
.jr_select_offer_outter{padding-left:25px;padding-bottom: 20px;}
.jr_select_offer{width:100%;border:none;background: transparent;color: #363636;font-family: 'Roboto', sans-serif; font-size: 20px;-webkit-appearance: none;-moz-appearance: none;background:url("../assets/img/jr_dwn_arw.png");background-position: right;background-repeat: no-repeat;background-size: 15px;}
.jr_input_comment{width:100%;font-family: 'Roboto', sans-serif;border:none;font-size: 16px;margin-top:10px;}
.jr_tick{margin:0 auto;}
.jr_tick img{width:50px;}
.jr_theme_trans_bg{background: rgba(35,119,162,0.9);}
.jr_almost_wrapper{text-align: center; position: absolute;width: 100%;top: 15%;}
.jr_almost_wrapper h3{color: #fff;font-size: 24px;font-weight: 300;}
.jr_almost_wrapper p{color: #fff;font-size: 16px;font-weight: 300;}
.jr_almost_wrapper hr{border:2px solid #85b5cc;height:0px;width:50px;margin:0 auto;border-top:none;margin-top: 30px;margin-bottom: 30px;}
.jr_loginpop_btn{height:35px;border-radius:20px;background: #fff;width:110px;margin:0 auto;color: #2077a3;font-weight: 500;font-size: 15px;margin:5px;}
.jr_signpop_btn{height:35px;border-radius:20px;background:transparent;width:110px;margin:0 auto;color: #fff;font-weight: 500;font-size: 15px;border:1px solid #fff;margin:5px;}
.jr_more_pop_up{position: absolute;top:15px;right:10px;background: transparent;}
.jr_more_pop_up img{height: 20px;}
.jr_profile_banner{width:100%;height:200px;background:url("../assets/img/jr_profile_banner.png") !important;background-size:100% !important;background-position: center !important;background-repeat: no-repeat !important;text-align: center;}
.jr_profile_photo{width:100px;height:100px;border-radius:50%;background-color: #2874a2 !important;margin:0 auto;background:url("../assets/img/jr_avatar.png");background-position: center;background-repeat: no-repeat; background-size: 30px !important; position: relative;top: 110px;}
.jr_profile_photo img{width:100%;height:100%;border-radius:50%;object-fit: cover;object-position: center;}
.jr_profile_photo1{width:100px;height:100px;border-radius:50%;background-color: #2874a2 !important;margin:0 auto;background:url("../assets/img/jr_avatar.png");background-position: center;background-repeat: no-repeat; background-size: 30px !important; position: relative;top: 130px;}
.jr_profile_photo1 img{width:100%;height:100%;border-radius:50%;object-fit: cover;object-position: center;}
.jr_profile_photo_edit{position: absolute;top:0px;right:0px;}
.jr_profile_photo_edit img{width:30px;}
.jr_profile_content{width:85%;margin:0 auto;padding-bottom: 30px;}
.jr_profile_content h4{text-align: center;color: #555555;width:100%;padding-top:25px;font-weight: 300;font-size: 16px;}
.jr_profile_content hr{border:2px solid #ff7200;width:40px;margin:0 auto;border-radius:5px;height:0px;margin-top: 15px;}
.jr_profile_tab_bay{width:100%;border-radius:20px;height:30px;border:1px solid #a1a1a1;margin-top: 30px;}
.jr_profile_tab_bay li{width:50%;display: inline-block;text-align: center;float: left;height: 100%;color: #555555;padding: 5px;font-size: 15px;border-radius:20px;}
.jr_profile_tab_bay .active{background: #434343;color: #fff;}
.jr_profile_tab_content{width:100%;padding-bottom: 30px;}
.jr_profile_tab_content h4{text-align: left;color: #434343;font-weight: 500;margin:0px;margin-bottom: 15px;font-size: 17px;}
.jr_profile_tab_content ul{width:100%;margin:0px;padding:0px;}
.jr_profile_tab_content ul li{width:100%;list-style: none;color: #777676;font-size: 17px;font-weight: 300;padding-bottom: 7px;padding-top: 7px;background:url("../assets/img/jr_right_arw.png");background-position: right !important;background-repeat: no-repeat !important;background-size: 10px;}
.jr_profile_tab_content hr{border:1px solid #dcdcdc;width:100%;margin:0 auto;border-radius:5px;height:0px;margin-top:25px;border-top:none;}
.jr_profile_tab_content ul .verified{background:url("../assets/img/jr_verified1.png");background-size: 15px;}
.verified{background:url("../assets/img/jr_verified1.png");background-size: 15px;background-position: right !important;background-repeat: no-repeat !important;}
/*POPOVER*/
.jr_popover_wrapper{background-color: rgba(0,0,0,0.7);width:100%;}
.jr_popover_wrapper ul{margin:0px;padding:5px;}
.jr_popover_wrapper ul li{list-style: none;color: #d3d3d3;font-size: 16px;padding: 5px;}
.popover-content{background: transparent !important;box-shadow: none !important;border-radius:0px !important;}
.popover-arrow::after{background:rgba(0,0,0,0.7) !important;border:none;}
/*EDIT-PROFILE*/
.jr_edit_row{padding-bottom:20px;}
.jr_edit_row h5{color:#434343;font-weight: 400;font-size: 16px; margin-top: 0px;margin:0px;}
.jr_edit_select{border:1px solid #b7b7b7;border-radius:20px;height: 30px;width: 170px;padding-left: 25px;padding-right: 10px;margin-left:15px;background:url("../assets/img/jr_down_arrow.png") !important;background-position: right 15px top 10px !important;background-repeat: no-repeat !important;-webkit-appearance: none;-moz-appearance: none; background-size: 20px !important;}
.jr_edit_profile_input{border:none;border-bottom: 1px solid #959595 !important;width:100% !important;height:30px; margin-top: 5px;}
.jr_width25{width:25%;float: left;}
.jr_width5{width:5%;float: left;}
.jr_width40{width:40%;float: left;}
.jr_edit_select1{margin-top:8px;border:1px solid #b7b7b7;border-radius:20px;height: 30px;width:100%;padding-left:10px;padding-right: 10px;background:url("../assets/img/jr_down_arrow.png") !important;background-position: right 15px top 10px !important;background-repeat: no-repeat !important;-webkit-appearance: none;-moz-appearance: none; background-size: 20px !important;}
.jr_edit_row p{color: #7d7d7d;text-align: justify;font-size: 15px;line-height: 20px;margin-bottom: 0px;}
.jr_width70{width:70%;float: left;padding-left: 10px;}
.jr_width30{width:30%;float: left;}
.jr_profile_content h3{color:#636363;}
.jr_pre_input{width:100%;height:30px;}
.jr_width15{width:15%;float: left;}
.jr_width85{width:85%;float: left;}
.jr_width15 span img{ width: 35px;}
.jr_pre_select1 {
border: 1px solid #b7b7b7;
border-radius: 20px;
height: 35px;
width: 100%;
padding-left:20px;
padding-right: 10px;
background: url(../assets/img/jr_down_arrow.png) !important;
background-position: right 15px top 10px !important;
background-repeat: no-repeat !important;
-webkit-appearance: none;
-moz-appearance: none;
background-size: 20px !important;
color: #717171;
}
.jr_chooseid{width:100px;position: relative;top: 90px;}
.jr_proofs_list{width:100%;}
.jr_proofs_list li{width:100%;list-style: none;padding-bottom: 10px;padding-top: 10px;}
.jr_proofs_list li p{float: left;color: #777676;padding: 0px;margin:0px;font-size: 18px;}
.jr_radio_id{float:right;}
.jr_radio_id .radio-icon{border-color:#ff7200 !important;}
.jr_radio_id .radio-inner{background-color:#ff7200 !important;}
.jr_confidential{width:100%;border-top:1px solid #959595;padding-top:25px;padding-bottom: 50px;}
.jr_confidential_left{width:25%;float: left;text-align: center;border-right:1px solid #959595;}
.jr_confidential_left img{width:30px;}
.jr_confidential_right{width:75%;float: right;padding-right:15px;}
.jr_confidential_right p{color:#989797;margin:0px;padding-left: 10px;}
.jr_upload_img{width:100%;}
.jr_chooseid1{width: 100px;position: relative;top:45px;}
.jr_country_code{width:20%;float: left;}
.jr_phone_number{width:75%;float: right;}
.jr_car_pic{width:60px;height:60px;border-radius:50%;background-color: #ff7200 !important; background: url(../assets/img/jr_cam.png);background-position: center !important;background-repeat: no-repeat;background-size:20px;float: left;position: relative;}
.jr_car_name{float: left; padding-left: 10px;position: relative;top: 10px;}
.jr_car_name h5{margin:0px;font-size: 16px;}
.jr_edit1{position: absolute;top:0px;right:0px;}
.jr_edit1 img{width:20px;}
.jr_car_name p{margin:0px;font-size: 12px;padding-top: 5px;}
.jr_no_seat{padding-top: 10px;}
.jr_no_seat h4{margin:0px;padding:0px;text-align: left;font-family: 'Roboto', sans-serif;color: #8b8b8b;font-size: 16px;}
.jr_no_seat h4 img{ width: 18px;margin-right:10px;}
.jr_close{}
.jr_close img{width:40px;margin-top:20px;}
.jr_space_height{height:100px;}
.jr_add_car_bg{background-color:#fff !important;background:url("../assets/img/jr_profile_banner.png");background-repeat: no-repeat !important;background-position: center bottom !important;background-size: 150% !important;}
.jr_upload_image_car{width:180px;height:180px;border-radius:50%;margin:0 auto;}
.jr_upload_image_car img{width:100%;height:100%;border-radius:50%;}
.jr_profile_banner1 {
width: 100%;
height: 200px;
background: url(../assets/img/jr_public_bg.png) !important;
background-size: 100% !important;
background-position: center !important;
background-repeat: no-repeat !important;
text-align: center;
}
.jr_age1{width:100%;margin:0px;text-align: center;color:#555555; font-size: 16px;}
.jr_notification{width:100%;}
.jr_notification ul{width:100%;margin:0px;padding:0px; padding-top: 10px;}
.jr_notification ul li{width:100%;background: none !important;}
.jr_notification ul li .child1{float:left;width:80%;}
.jr_notification ul li .child2{float:right;width:20px;}
.jr_custom1 label {display: inline-block;cursor: pointer;position: relative;padding-left: 25px;margin-right: 15px;color: #8b8b8b;font-size: 13px;font-family: 'Roboto', sans-serif;font-weight:400;}
.jr_custom1 label:before {content: "";display: inline-block;width: 14px;height: 14px;position: absolute;left: 0;bottom: 1px;background-color: #ffffff;border-radius:0px !important;border:1px solid #959595;border-radius:3px !important;}
.jr_custom1 label:before {border-radius: 8px;}
.jr_custom1 input[type=checkbox] {display: none;}
.jr_custom1 label:before {border-radius: 3px;}
.jr_custom1 input[type=checkbox]:checked + label:before {content: "\2713";font-size: 14px;color: #6a449b;text-align: center;line-height:16px;font-weight:600;border:1px solid #ff7200;}
.jr_custom1{width:15px;position: relative;top: 4px;}
.jr_profile_tab_content h6{color: #a8a8a8; font-size: 14px;margin:0px;font-weight: 300;}
.jr_message_wrapper{}
.jr_home_tab_bay1 {width: 100%;padding: 5px;padding-top: 0px;}
.jr_home_tab_bay1 ul {width:85%;text-align: center;padding: 0px;margin: 0 auto;border:1px solid #144b6d;border-radius:20px;margin-bottom: 5px;}
.jr_home_tab_bay1 ul li {width: 50%;display: inline-block;text-align: center;color: #fff;padding:5px;float: left;}
.jr_home_tab_bay1 ul .active {background:#144b6d;border-radius: 20px;}
.jr_no_msg{padding-top:75px;}
.jr_notification_main{width:100%;}
.jr_notification_main ul{margin:0px;padding:0px;width:100%; padding-top: 10px;}
.jr_notification_main ul li{width:100%;list-style: none;text-align: left;border-bottom: 1px solid #dcdcdc;padding-bottom: 5px;}
.jr_notification_main ul li h4{color: #144b6d;text-align: left;padding: 0px;font-weight: 400;}
.jr_notification_main ul li p{color: #8e8e8e;text-align: left;font-weight: 300;}
.jr_not_left{float: left; width: 80%;}
.jr_not_close{float: right; position: relative;top: 30px;}
.jr_not_close img{width:20px;}
/*SEARCH-RESULT*/
.jr_duration{width:100%;padding-top: 20px;padding-bottom: 20px;border-bottom:1px solid #bbbbbb;}
.jr_avg_duration{width: 50%;float: left;text-align: right !important;background:url("../assets/img/jr_clock.png");background-repeat: no-repeat !important;background-position:left !important;background-size: 25px !important;padding-right: 15px;}
.jr_avg_price{width:50%;float: left;text-align: left !important; padding-left: 15px;border-left:1px solid #bbbbbb;}
.jr_duration p{margin:0px;padding:0px;color: #818181;font-size: 11px;font-weight: 300;}
.jr_duration h4{margin:0px;padding:0px;color: #279a80; font-size: 13px;}
.jr_avg_duration p{text-align: right !important;}
.jr_avg_duration h4{text-align: right !important;padding-top: 4px;}
.jr_avg_price p{text-align: left !important;padding-bottom: 3px;}
.jr_avg_price h4{text-align: left !important;}
.jr_avg_price h4 strong{ font-size: 15px;}
.jr_search_main{width:100%;}
.jr_search_main h5{margin:0px;color: #434343;font-size: 16px;padding-top: 15px;padding-bottom:5px;}
.jr_search_main ul{margin:0px;padding: 0px;}
.jr_search_main ul li{list-style: none;background: #f5f5f5;margin-bottom: 3px;}
.jr_search_top_bay{width:100%;padding: 10px;border-bottom: 1px solid #e7e7e7;}
.jr_search_top_bay_left{float: left;}
.jr_search_top_bay_right{float: right;}
.jr_search_top_bay_left h6{color: #434343;margin:0px;padding: 0px; font-size: 12px;font-weight: 500;padding-bottom: 3px;}
.jr_search_top_bay_left h6 strong{color: #767676;margin:0px;padding: 0px;font-size: 14px;font-weight: 500;padding-left:8px;}
.jr_search_top_bay_right h6{text-align: right;color: #2078a2;margin:0px;padding: 0px;}
.jr_search_bottom_bay{width:100%;padding: 10px;}
.jr_search_profile{float: left;width:75px;height:75px;border-radius:50%;border:1px solid #2078a2;position: relative;}
.jr_search_profile img{width:100%;height:100%;border-radius:50%;object-fit: cover;object-position: center;}
.jr_search_profile_detail{float: left;padding-left: 15px;}
.jr_search_verified{position:absolute;top:0px;right:0px;}
.jr_search_verified img{width: 20px;border:none;}
.jr_search_profile_detail h6{margin:0px;color: #585858;font-weight: 400;font-size: 13px;padding-bottom: 5px;}
.jr_star_ratting{color: #585858;font-weight: 300;}
.jr_star_ratting strong{padding-left:5px;padding-right: 10px;}
.jr_star_ratting img{width: 14px; position: relative;top: 1px}
.jr_search_profile_detail ul{margin:0px;padding: 0px;padding-top:10px;}
.jr_search_profile_detail ul li{display: inline-block;width:30px;height:30px;border:1px solid #2078a2;border-radius:50%;color: #585858;font-size: 10px;padding-top: 4px;text-align: center;}
.jr_search_profile_detail ul li span{position: relative;top:2px;}
.jr_filter_icon{width:50px;height:50px;background:url("../assets/img/jr_filter_icon.png");background-repeat: no-repeat !important;background-size: cover !important;position: fixed;bottom: 10px;right:20px;border-radius:50%;}
.jr_filter_okay{width:50px;height:50px;background:url("../assets/img/jr_filter_okay.png");background-repeat: no-repeat !important;background-size: cover !important;position: fixed;bottom: 10px;right:80px;border-radius:50%;}
.jr_filter_close{width:50px;height:50px;background:url("../assets/img/jr_filter_close.png");background-repeat: no-repeat !important;background-size: cover !important;position: fixed;bottom: 10px;right:20px;border-radius:50%;}
.jr_bookonline{height: 30px;border-radius:20px;border:none;background: #f16730;color: #fff;text-transform: capitalize;margin-top: 10px; font-size: 12px;}
.jr_preference_bay{width:100%;}
.jr_preference_bay ul{width:100%;text-align: left;padding: 0px;margin:0px;}
.jr_preference_bay ul li{display: inline-block;}
.jr_preference_bay ul li img{width: 30px;margin-right: 5px;}
.jr_verification{margin:0px;padding: 0px;padding-top: 5px;}
.jr_verification li {width: 100%;list-style: none;color: #777676;font-size: 17px;font-weight: 300;padding-bottom: 7px;padding-top: 7px;padding-left:30px;background-position:left !important;background-repeat: no-repeat !important;background-size: 10px;}
.jr_verification .verified{background:url("../assets/img/jr_verified1.png");background-size: 15px;}
.jr_verification .response{background:url("../assets/img/jr_response.png");background-size: 15px;}
.jr_verification .time{background:url("../assets/img/jr_time.png");background-size: 15px;}
.jr_verification .loca{background:url("../assets/img/jr_loca.png");background-size: 15px;}
.child1{width:40%;float: left;}
.child2{width:60%;float: left;}
.jr_time_schedule{padding-top: 0px;padding-bottom: 15px;}
.jr_time_schedule h5{color:#464646;font-weight: 300;font-size: 24px;}
.jr_from_to{width:100%;}
.jr_from_to li{list-style: none;width:100%; padding-bottom: 15px}
.jr_from_to .child1{width:25%;float: left; font-size: 16px;color: #464646;position: relative;}
.jr_from_to .child2{width:75%;float: left;padding-left: 20px;}
.jr_from_to .child2 strong{color: #595959;font-size: 16px;}
.jr_from_to .child2 p{color: #595959;font-weight: 300;margin: 0px; font-size: 15px;}
.jr_from_to .from{border-radius: 20px;background: url(../assets/img/jr_blue_circle.png) !important;font-family: 'Roboto', sans-serif;background-repeat: no-repeat !important;background-position:right 8px top 2px !important;background-size: 16px !important;}
.jr_from_to .to{border-radius: 20px;background: url(../assets/img/jr_orange_circle.png)!important;font-family: 'Roboto', sans-serif;background-repeat: no-repeat !important;background-position:right 8px top 2px !important;background-size: 16px !important;}
// .jr_box1 {height: 50px;width: 20px;border-right: 1px solid #b6b6b6;position: absolute;top: 20px;right: 19%;}
.jr_available_seats{width:100%;color: #838383;font-size: 18px;padding-top: 20px;padding-bottom: 20px;}
.jr_available_seats strong{color: #464646;}
.jr_seats_left{float: left;width:50%;}
.jr_seats_right{float: right;width:50%;text-align: right;}
.jr_contact_btn{width: 100%;height:35px;border:1px solid #1d78a3;border-radius: 20px;color: #1d78a3;background: transparent;font-size: 15px;background: url(../assets/img/jr_call.png) !important;background-repeat: no-repeat !important;background-size: 20px !important;background-position: 15% !important;}
.jr_contact_btn span img{}
.jr_profile_content1{padding-bottom: 60px;}
.jr_profile_content1 h5{margin: 0px;color: #434343;font-size: 16px;padding-top: 15px;padding-bottom: 5px;}
.jr_profile_content1 p{color: #595959;font-weight: 300;margin: 0px;font-size: 15px;padding-top: 10px;padding-bottom:10px;}
.jr_verification .loca1{background:url("../assets/img/jr_loca1.png");background-size: 15px;}
.jr_verification .detour{background:url("../assets/img/jr_detour.png");background-size: 15px;}
.jr_verification .flex{background:url("../assets/img/jr_flex.png");background-size: 15px;}
.jr_verification .seat1{background:url("../assets/img/jr_seat1.png");background-size: 15px;}
.jr_car_info{width:100%;padding-top: 15px;}
.jr_car_info_left{width:50%;float: left;}
.jr_car_info_right{width:50%;float: right;}
.jr_car_info_right p img{width:30px;}
.jr_car_info_right p span{position: relative; position: relative;bottom: 10px;left: 5px;}
.jr_car_info_photo{float: left;width:50px;height:50px;border-radius:50%;}
.jr_car_info_photo img{width:100%;height:100%;border-radius:50%;object-fit: cover;object-position: center;}
.jr_car_info_detail{float: left; padding: 10px;padding-left: 20px;padding-top: 0px;}
.jr_car_info_detail h6{margin:0px;}
.jr_car_info_detail p{margin:0px;padding: 0px;}
.jr_car_info_detail p img{width:20px;}
.jr_report{height:35px;border:1px solid #000000;border-radius:20px;padding-left:20px;padding-right:20px;text-transform: capitalize;background: transparent;color: #000000;}
.jr_bottom_button_bay1{text-align: center;}
.jr_book_pop_up_wrapper{width:70%;margin:0 auto;background: #ffffff;border-radius:20px; padding: 25px;margin-top:50px;}
.jr_book_pop_up_wrapper h4 {text-align: center;color: #555555;width: 100%;padding-top: 30px; font-weight: 300;font-size: 16px;}
.jr_book_pop_up_wrapper h3 {color: #636363;}
.jr_book_pop_up_wrapper hr {border: 2px solid #ff7200;width: 40px;margin: 0 auto;border-radius: 5px;height: 0px;margin-top: 15px;}
.jr_counter{width:100%;text-align: center; padding-top: 15px;}
.jr_count_item{}
.jr_count_item img{width:20px;}
.jr_count{color:#1188ca;font-size: 35px;font-weight: 300; padding-left: 10px;padding-right: 10px;}
.jr_bottom_send{background: #343434;color: #fff;border-radius:20px;height:35px;border:none;color: #fff;font-size: 14px;padding-left: 40px;padding-right: 40px;text-transform: capitalize; line-height: 13px;}
.jr_bottom_send span img{width: 16px;margin-left: 10px;}
.jr_text_msg{width:100%;position: relative;margin-bottom: 50px;}
.jr_send_msg{width:100%;border:none;border-bottom: 1px solid #bcbcbc;height:35px;font-size: 16px;}
.jr_send_msg::-webkit-input-placeholder { color:#8c8c8c;}
.jr_send_msg::moz-input-placeholder { color:#8c8c8c;}
.jr_attch{position: absolute;right:0px;top:0px;}
.jr_attch span img{height:25px;margin-left: 10px;}
.jr_no_ride{width:100%;}
.jr_no_ride p{text-align: center;color: #7d7d7d;}
.jr_ride_wrapper h3{color: #2078a2;font-weight: 300;text-align: justify; font-size: 18px;}
.jr_ride_wrapper ul{padding: 0px;margin:0px;}
.jr_ride_wrapper ul li{list-style: none;color: #717171; font-size: 16px;font-weight: 300;padding-left: 30px;background-position: left !important;background-repeat: no-repeat !important;}
.jr_ride_wrapper .from{ background: url(../assets/img/jr_blue_circle.png);background-size: 15px;}
.jr_ride_wrapper .to{ background: url(../assets/img/jr_orange_circle.png);background-size: 15px;}
.jr_rangebar{padding: 0px;}
.jr_rangebar .item-inner{padding: 0px !important;}
.jr_rangebar .range-knob{background: #2077a3 !important;}
.jr_rangebar .range-bar-active{background: #2077a3 !important;}
.jr_rangebar .range-pin{background: #2077a3 !important;color: #fff;}
.jr_rangebar .range-pin::before{background: #2077a3 !important;color: #fff;}
.jr_rangebar h6{color: #464646; position: relative;top: 30px;}
.jr_member_rate{height: 35px;border-radius:20px;width:100%;border:none;color: #fff;text-transform: capitalize;background: #4d4d4d; font-size: 15px;font-weight: 400;}
.jr_inside_bg{width:100%;height:100%;background:#2b7091;}
.jr_sidemenu_top{width:100%;text-align: center;}
.jr_sidemenu_photo{width:100px;height:100px;border:2px solid #fff;border-radius:50%;}
.jr_sidemenu_photo img{width:100%;height:100%;border:1px solid #fff;border-radius:50%;object-fit:cover;object-position: center;}
.jr_sidemenu_detail{}
.jr_sidemenu_detail h4{color: #fff;font-weight: 300;font-size:18px;}
.jr_sidemenu_detail p{color: #fff;font-weight: 400;font-size: 14px; margin-top: 0px;}
.jr_side_edit{border-radius:20px;background: #11445b;padding-left:20px;padding-right: 20px;color: #fff;font-size: 16px;height:30px;}
.jr_sidemenu_detail ul{margin:0px;padding:0px; padding-top: 50px;}
.jr_sidemenu_detail ul li{color: #fff;list-style: none;padding-bottom: 20px;}
.jr_sidemenu_detail ul li img{height: 18px;margin-right: 15px;}
.jr_sidemenu_detail ul li span{font-size: 16px;font-weight: 300;}
.jr_home_active{width:100%;height:100%;background:url("../assets/img/jr_home_active.png") !important;background-repeat: no-repeat !important;background-position: center bottom !important;background-size:cover !important;position: relative;}
.jr_home_offer_ride{width:100%; padding-top: 20px;
}
.jr_home_offer_ride ul{margin:0px;padding:0px;position:relative;}
.jr_home_offer_ride ul li{width:100%;list-style: none;background: #fff;border-radius:8px;margin-bottom: 10px;position:relative;padding:10px;position: relative;}
.jr_offer_ride_top{
background: -webkit-linear-gradient(left, #1379a1 , #6a449b);
background: -o-linear-gradient(right, #1379a1, #6a449b);
background: -moz-linear-gradient(right, #1379a1, #6a449b);
background: linear-gradient(to right, #1379a1 , #6a449b);
color: #fff;
padding:11px;border-radius:10px;
font-weight: 300;font-size: 16px;
position: relative;
top: 10px;
height:50px;
}
.jr_book_ride_top{
background: -webkit-linear-gradient(left, #f16436 , #ef548d);
background: -o-linear-gradient(right, #f16436, #ef548d);
background: -moz-linear-gradient(right, #f16436, #ef548d);
background: linear-gradient(to right, #f16436 , #ef548d);
color: #fff;
padding:11px;border-radius:10px;
font-weight: 300;font-size: 16px;
position: relative;
top: 10px;
height:50px;
}
.jr_home_offer_photo{width:60px;height:60px;border-radius:50%;float: left;}
.jr_home_offer_photo img{width:100%;height:100%;border-radius:50%;}
.jr_home_offer_detail{float:right; padding-left: 15px;position: relative;width:75%;}
.jr_home_offer_detail h5{margin:0px;padding: 0px;color: #2077a3;font-weight: 300;text-align: left;}
.jr_home_offer_detail h6{margin:0px;padding: 0px;color: #757575;padding-top: 3px;padding-bottom: 3px;font-weight:300;}
.jr_home_offer_detail p{margin:0px;padding: 0px;color: #9d9d9d;font-weight: 300;text-align: left;}
.jr_home_offer_detail p span{margin-left:10px;margin-right:10px;}
.jr_home_offer_detail p span img{width:8px;}
.jr_edit_more{position: absolute;bottom:10px;right:10px;}
.jr_edit_more img{width: auto;height:16px;}
.jr_home_btm{background:url("../assets/img/jr_exclam.png") !important;background-repeat: no-repeat !important; background-position: left 10px top 5px !important;background-size: 18px !important;color: #e9801a;text-align: center;font-weight: 300;}
.jr_home_btm hr{width:100%;border:1px solid #b3b3b3;border-top:none;height:0px;}
.jr_home_btm p{text-align: center;margin:0px;color: #e9801a;padding-top: 5px;}
.jr_your_booking{width:100%;}
.jr_request_confirm{width:100%;padding-bottom: 15px;border-bottom:1px solid #dcdcdc;padding-top: 10px;}
.jr_request_left{width:20%;float: left;text-align:center;}
.jr_request_left img{ width: 30px;margin:0 auto;padding-top: 20px;}
.jr_request_right{width:80%;float: right;border-left:1px solid #dcdcdc;padding-left: 15px;}
.jr_request_right h5{color: #699ab8;margin:0px;padding: 0px;font-size: 18px;}
.jr_request_right p{color: #949494;margin:0px;padding: 0px; padding-top: 10px;font-size: 12px;padding-bottom: 3px;}
.jr_request_right h6{color: #464646;margin:0px;padding: 0px;font-size:15px;}
.jr_time_schedule p{color: #f16730;padding:0px;margin:0px;font-weight: 400;}
.jr_summary{width:100%;}
.jr_summary h6{font-size: 13px;padding-top: 5px;padding-bottom: 5px;}
.jr_summary_details{width:100%;}
.jr_summary_details h5{font-size:16px;padding-bottom: 15px;}
.jr_summary_details h5 span img{height:13px;margin-left:15px;}
.jr_summary_details p{font-size: 14px;padding-bottom:5px;padding-top: 5px;}
.jr_summary_msg{width:100%;background:url("../assets/img/jr_summary_msg.png") !important;background-repeat: no-repeat !important;color: #3c83a9; font-size: 16px;padding-left: 30px; background-size: 20px !important;}
.jr_login_wrapper{width:100%;padding-top: 35px;}
.jr_logo{width:100%;text-align: center;}
.jr_logo img{width: 100px;}
.jr_login_detail{width:100%;padding-top: 20px;text-align: center;}
.jr_login_detail h5{color: #fff;text-align: center;margin:0px;font-weight: 300;font-size: 20px;}
.jr_login_detail h4{color: #fff;text-align: center;margin:0px;font-weight: 600;padding: 0px;font-size: 25px;padding-bottom: 10px;padding-top:0px;}
.jr_login_detail p{color: #fff;text-align: center;margin:0px;font-size: 14px;font-weight: 300;}
.jr_login_detail hr{border-color: #fff !important;margin-top: 30px;margin-bottom: 50px;}
.jr_login_input{height:35px;border:1px solid #1379a1;border-radius:20px;width:100%;background: transparent;padding-left:20px;padding-right: 15px;margin-bottom: 15px;color: #fff;}
.jr_login_input::-webkit-input-placeholder {color:#fff;}
.jr_login_input::-moz-placeholder {color:#fff;}
.jr_login_input:-ms-input-placeholder {color:#fff;}
.jr_login_input:-moz-placeholder {color:#fff;}
.jr_btm_btn1 {height: 40px;border-radius:50%;background: #1379a1;color: #fff;font-family: 'Roboto', sans-serif;transition: width 2s;width: 40px;margin: 0 auto;text-align: center;font-size: 15px;padding: 10px; border: none;text-transform: capitalize;}
.jr_btm_btn2 {height: 40px;border-radius:50%;background: #f05e5a;color: #fff;font-family: 'Roboto', sans-serif;transition: width 2s;width: 40px;margin: 0 auto;text-align: center;font-size: 15px;padding: 10px; border: none;text-transform: capitalize;}
.jr_btm_btn1 img {width: 8px;}
.jr_btm_btn2 img {width: 8px;}
.jr_login_input1{height:35px;border:1px solid #f16823;border-radius:20px;width:100%;background: transparent;padding-left:20px;padding-right: 15px;margin-bottom: 15px;color: #fff;}
.jr_login_input1::-webkit-input-placeholder {color:#fff;}
.jr_login_input1::-moz-placeholder {color:#fff;}
.jr_login_input1:-ms-input-placeholder {color:#fff;}
.jr_login_input1:-moz-placeholder {color:#fff;}
.jr_passcode{padding-bottom: 50px;}
.jr_passcode ul{margin:0px;padding: 0px;width:100%;text-align: center;}
.jr_passcode ul li{display: inline-block;width:50px;height:50px;border-radius:50%;text-align: center; margin: 5px;}
.jr_passcode_select{width:100%;height:100%;border-radius:50%;border:1px solid #fff;background: transparent;color: #fff; -webkit-appearance: none;-moz-appearance: none;text-align: center; font-size: 16px;padding-left: 18px;}
.jr_passcode_select option{color: #fff;text-align: center;}
.jr_passcode_select:focus{width:100%;height:100%;border-radius:50%;border:1px solid #f16823;}
.jr_passcode_select option:focus{color:#f16823;width:100%;text-align: center !important;}
.jr_submit_signup{height: 35px; border-radius: 20px; border: none;background: linear-gradient(to right, #f16823, #ef519d);text-transform: capitalize !important;font-size: 14px;font-weight: 400; line-height: 5px;padding-left: 25px;padding-right:25px;margin:0 auto;margin-bottom: 15px;}
.jr_pick_drop{width:100%;height:100%;}
.jr_map{width:100%;height:60%;background:url("../assets/img/jr_map_bg.png") !important;background-repeat: no-repeat;background-position: center;background-size: cover !important;}
.jr_pick_drop_detail{width:100%;height:40%;box-shadow: 10px 10px 60px 15px #888888;padding: 10px;}
.jr_up_arw{width:100%;text-align: center;}
.jr_up_arw img{width: 20px;}
.jr_pick_drop_detail ul{width:80%;margin:0px;padding:0px;margin: 0 auto;padding-top: 15px;padding-bottom: 15px;}
.jr_pick_drop_detail ul li{width:100%;margin:0px;padding:0px;list-style: none;width:100%;padding-bottom: 7px;padding-top: 7px;}
.jr_pick_drop_detail ul li p{float: left;color: #777676;font-size:16px;margin:0px;padding-top: 5px;padding-left: 15px;}
.jr_pick_drop_detail ul hr{width:100%;height:0px;margin-top:20px;border-bottom:1px solid #e7e7e7;border-top:none;height:0px;}
.jr_pick_drop_detail h5{text-align: center;color: #777676;font-size: 20px;font-weight: 300;}
.jr_pick_drop_detail hr{width:40px;border:2px solid #ff7200;border-radius:20px;height:0px;margin:0 auto;}
.jr_loc_no{float: left;width:30px;height:30px;background:url("../assets/img/jr_loc1.png") !important;font-size:12px;background-repeat: no-repeat !important;background-position:center !important;color: #fff;text-align: center;background-size: 25px !important;padding-top:7px;}
.jr_other_place{border:1px solid #2078a2;color: #2078a2;height:35px;padding-left: 20px;padding-right: 20px;border-radius:20px;background: transparent;}
.jr_loc_no1 .jr_radio_id {float: right;position: relative;top: 4px;}
/*CHAT*/
.jr_chat_div{}
.jr_chat_div ul{margin:0px;padding:0px;}
.jr_chat_div ul li{list-style: none;width:100%;padding-top: 10px;padding-bottom: 10px;}
.jr_chat_div .jr_sender{}
.jr_chat_div .jr_receiver{}
.jr_search_profile{}
.chat_i{width:20px;height:20px;position: absolute;background-position: center !important;background-size:30px;background-repeat: no-repeat !important;}
.jr_sender .chat_i{left:-9px;top:3px;background:url("../assets/img/jr_chat_left.png") !important; background-repeat: no-repeat !important;}
.jr_receiver .chat_i{right:-9px;top:3px;background:url("../assets/img/jr_chat_right.png") !important; background-repeat: no-repeat !important; background-size: 20px !important;}
.jr_chat_detail{ padding-top: 8px;}
.jr_message{border-radius:20px;color: #fff;padding:8px;position:relative;}
.jr_chat_top{padding-bottom: 10px;}
.jr_chat_top strong{color: #585858;font-weight: 500;font-size: 13px;}
.jr_chat_top span{color: #8a8a8a;font-weight: 400;font-size: 13px;}
.jr_chat_detail .jr_chat_top{margin:0px;}
.jr_chat_detail .jr_chat_top strong{color: #585858;}
.jr_chat_detail .jr_chat_top span{color: #8a8a8a;}
.jr_sender .jr_search_profile{float: left;}
.jr_receiver .jr_search_profile{float: right;}
.jr_sender .jr_chat_detail{float: left;padding-left: 20px;}
.jr_receiver .jr_chat_detail{float: right;padding-right:20px;}
.jr_sender .jr_message{background: #2077a3;padding-left: 15px;}
.jr_receiver .jr_message{background: #166086;text-align: right;padding-right: 15px;}
.jr_sender .jr_chat_detail .jr_chat_top{text-align: left;}
.jr_receiver .jr_chat_detail .jr_chat_top{text-align: right;}
.jr_sender .jr_chat_detail .jr_chat_top strong{float: left;margin-right:20px;}
.jr_sender .jr_chat_detail .jr_chat_top span{float: left;}
.jr_receiver .jr_chat_detail .jr_chat_top strong{float: right;margin-left:20px;}
.jr_receiver .jr_chat_detail .jr_chat_top span{float: right;}
.jr_driver_profile{background:#f0f0f0; padding: 10px;}
.jr_driver_profile .jr_search_profile_detail{}
.jr_driver_profile .jr_search_profile_detail h6{font-size: 16px;}
.jr_driver_profile .jr_search_profile_detail h6 span{float: right;font-size: 12px;position: relative;top: 3px;}
.jr_driver_profile .jr_home_offer_photo{border:1px solid #2078a2;}
.jr_avia{width:100%;}
.jr_avia .left{float: left;}
.jr_avia .right{float:left;}
.jr_avia img{width:15px; position: relative;top: 4px;margin-right: 10px;}
.jr_approve_btn_bay{width:100%;}
.jr_approve_btn{width:49%;float: left;height:35px;border-radius:20px;background: #49a11e;color: #fff;font-size: 16px;text-transform: capitalize;}
.jr_decline_btn{width:49%;float: right;height:35px;border-radius:20px;background: #515151;color: #fff;font-size: 16px;text-transform: capitalize;}
.jr_edit_btn{width:49%;float: left;height:35px;border-radius:20px;background:transparent;color: #f7941d;font-size: 16px;border:1px solid #f7941d;text-transform: capitalize;}
.jr_delete_btn{width:49%;float: right;height:35px;border-radius:20px;background:transparent;color: #d52a2a;font-size: 16px;border:1px solid #d52a2a;text-transform: capitalize;}
.jr_p{color: #717171 !important;text-align: left !important;font-size: 16px;font-weight: 400 !important;}
}
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