Skip to content

C
Callmycab-Userapp
Commit b34db588 by Alen Jose
Options

ridenow-payment

parent 72c92560
Showing with 663 additions and 310 deletions
src/pages/addcoupon/addcoupon.html
......@@ -15,9 +15,7 @@
</form>
<!-- <p *ngIf="">You don’t seem to have any valid coupons.<br> -->
<!-- Invite your friends. Unlock free ride coupons</p> -->
<div class="cab_coupon_box">
<button ion-button class="cab_coupon_apply" (click)="checkCode()" [disabled]="promoBtn">Apply</button>
</div>
<button ion-button class="cab_coupon_apply" (click)="checkCode()" [disabled]="promoBtn">Apply</button>
<div class="cab_coupon_content">
<p>Payment Details</p>
<li>
......@@ -43,7 +41,7 @@
<ion-footer>
<div class="cab_footer_btn_bay">
<button ion-button class="cab_footer_btn floatRight"(click)="pay()">CONTINUE</button>
<button ion-button class="cab_footer_btn floatLeft" (click)="goBack()">CANCEL</button>
<button ion-button class="cab_footer_btn floatLeft theme_dark_bg" (click)="goBack()">CANCEL</button>
<div class="clear"></div>
</div>
</ion-footer>
src/pages/addcoupon/addcoupon.scss
page-addcoupon {
.cab_coupon_wrapper{padding-top:20%;}
.cab_pop_detail_left{width:65px;height:50px;background-position:left;background-size: 65px;background-repeat: no-repeat;}
.cab_pop_details{padding: 3px;width:calc(100% - 65px);}
.cab_coupon_box{width:100%;margin:0 auto;height:50px;text-align:center;border:2px solid #353639;border-radius:0px;background:#28292c;}
.cab_coupon_input{width:100%;height:100%;background:transparent !important;border:none;text-align:center;color:#ff9000; font-size: 20px;font-weight: 300;}
.cab_coupon_input::-webkit-input-placeholder {color:#ff9000;}
.cab_coupon_input::-moz-placeholder {color:#ff9000;}
.cab_coupon_input:-ms-input-placeholder {color:#ff9000;}
.cab_coupon_input:-moz-placeholder {color:#ff9000;}
.cab_coupon_bg{background:#2e2f32 !important;}
.cab_coupon_wrapper p{color:#fff;text-align:center;margin:0px;line-height: 18px;font-weight: 300;letter-spacing: 1px;padding-top: 40px;padding-bottom: 40px;}
.cab_coupon_apply{width:100%;height:50px;border-radius:0px;text-align:center;background:#ff9000;font-size:18px;font-weight: 400;color:#fff;letter-spacing: 4px;}
.cab_coupon_content{width:100%;padding-top: 20px;}
.cab_coupon_content li{width:100%;list-style:none !important;padding-top: 10px;padding-bottom: 10px;border-bottom:1px solid #353639;}
.cab_coupon_content li .child{width:50%;float:left;color:#8d8c8c;font-size: 15px;}
.cab_coupon_content p{color:#ff9000;text-align:left;padding-bottom:20px;padding-top:20px;font-size: 18px;}
.cab_footer_btn {background:#f7941e;margin:0px;border-radius: 0px;height:45px;font-weight:400;width: 50%;}
}
src/pages/confirmride/confirmride.scss
page-confirmride {
.cab_pop_modal{width:300px;margin:0 auto;position: relative;top: 20%;background:#fff;}
.cab_pop_modal_head{width: 100%;color: #fff;text-align: center;padding: 10px;font-size: 18px;}
.cab_pop_modal p{text-align: center;color: #a8a8a8;font-size: 13px;padding-top: 20px;padding-bottom: 20px;}
.cab_pop_button{width:100%;color:#f7941e;height:40px;font-size: 15px;border:none;margin:0px;}
.cab_confirm_p{font-size: 20px;font-weight: 300;line-height: 30px;}
}
src/pages/forgot/forgot.html
<ion-header>
<button class="nav_btn" (click)="back()">
<ion-icon name="ios-arrow-back-outline"></ion-icon>
</button>
</ion-header>
<ion-content padding class="themelogin_background">
<div class="cab_login_wrapper">
<div class="cab_logo">
<img src="assets/img/cab_logo.png" style="width: 120px;">
</div>
<h4>Forgot Password</h4>
<hr>
<br>
......@@ -13,10 +14,10 @@
<div class="cab_phone_number">
<input class="cab_phone_input floatRight cab_mail" type="email" placeholder="Email" formControlName="email">
<div class="clear"></div>
<div class="cab_req" *ngIf="forgotForm.get('email').hasError('pattern') && (forgotForm.get('email').dirty || forgotForm.get('email').touched)">
<div class="alert error" *ngIf="forgotForm.get('email').hasError('pattern') && (forgotForm.get('email').dirty || forgotForm.get('email').touched)">
Enter a valid Email
</div>
<div class="cab_req" *ngIf="forgotForm.get('email').hasError('required') && (forgotForm.get('email').dirty || forgotForm.get('email').touched)">
<div class="alert error" *ngIf="forgotForm.get('email').hasError('required') && (forgotForm.get('email').dirty || forgotForm.get('email').touched)">
Enter a valid Email
</div>
</div>
......@@ -29,4 +30,4 @@
</div>
</div>
</div>
</ion-content>
\ No newline at end of file
</ion-content>
src/pages/forgot/forgot.scss
page-forgot {
.nav_btn{color: #3d3a3b;}
.cab_logo{width:100%;text-align: center; padding-bottom: 30px;}
.cab_logo img{width:200px;}
.cab_login_wrapper{width:100%;}
.cab_login_wrapper h4{color: #404041;
font-size: 40px;
font-weight: 300;
text-align: left;
text-transform:capitalize;}
.cab_login_wrapper hr{border:2px solid #f7941e;height:0px;border-radius:20px;width:35px;margin-left:0px;}
.cab_phone_number{width:100%;height:50px;border-bottom:2px solid #ff9c00;}
.cab_phone_code{width:50px;height:100%;-webkit-appearance: none;-moz-appearance: none;background: transparent !important;text-align: center;border:none;padding-left: 10px;color: #3d3a3b;font-size: 18px;}
.cab_phone_code option{text-align: center;}
.cab_phone_input{width:100%;height:100%;border:none;color:#3d3a3b;font-size: 18px;padding-left: 10px;padding-right: 20px;}
.cab_phone_input::-webkit-input-placeholder {color:#3d3a3b;}
.cab_phone_input::-moz-placeholder {color:#3d3a3b;}
.cab_phone_input:-ms-input-placeholder {color:#3d3a3b;}
.cab_phone_input:-moz-placeholder {color:#3d3a3b;}
.cab_login_wrapper{width:100%;}
.cab_call{background: url("../assets/img/number.png");background-position: right;background-repeat: no-repeat;}
.cab_pass{background: url("../assets/img/password.png");background-position: right;background-repeat: no-repeat;}
.cab_user{background: url("../assets/img/user.png");background-position: right;background-repeat: no-repeat;}
.cab_mail{background: url("../assets/img/email.png");background-position: right;background-repeat: no-repeat;}
.cab_search{background: url("../assets/img/search.png") !important;background-position: right;background-repeat: no-repeat;}
.cab_currentlocation{background: url("../assets/img/currentlocation.png");background-position: right;background-repeat: no-repeat;}
.cab_location{background: url("../assets/img/location.png");background-position: right;background-repeat: no-repeat;}
.cab_confirmpass{background: url("../assets/img/confirmpass.png");background-position: right;background-repeat: no-repeat;}
.cab_form_row .item-block{background: transparent;padding-left:0px;border:none !important;margin:0 auto !important;width:200px !important;}
.cab_form_row .item-inner{border:none !important;}
.cab_form_row .checkbox-checked{background:#ff9c00 !important;border:1px solid #ff9c00 !important;}
.item .item-ios .checkbox-ios{margin-left:0px !important;margin-right:10px !important;}
.item .item-md .checkbox-md{margin-left:0px !important;margin-right:10px !important;}
.cab_sign_btn{height:45px;width:100%;background:#ff9c00;color: #fff;text-transform: capitalize !important;font-size: 18px;font-weight: 300;}
.cab_sign_btn1{height:45px;width:100%;border:1px solid #ff9c00;color: #ff9c00;background:transparent;text-transform: capitalize !important;font-size: 18px;font-weight: 300;}
.cab_form p{color: #3d3a3b;font-weight: 500;font-size: 18px;}
}
src/pages/home/home.scss
page-home {
.cab_map{width:100%;height:100%;position: relative;}
.cab_map #map{width:100%;height:100%; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter: gray; -webkit-filter: grayscale(99%); -webkit-backface-visibility: hidden;}
.cab_home_custom_header{position: fixed;left:0px;right:0px;top:0px;width:100%;z-index: 99;}
.gmnoprint{display:none !important;}
.cab_footer_location{width: 100%;padding:10px;}
.cab_location_input{width:100%;height:45px;padding-right: 30px;font-weight:300;border:none;color:#fff;font-size: 18px;background: transparent;background-position: right !important;background-repeat: no-repeat !important;background-size: 23px !important;}
.cab_current{background: url("../assets/img/currentlocation.png");}
.cab_destination{background: url("../assets/img/location.png");}
.cab_location_input::-webkit-input-placeholder {color:#fff;}
.cab_location_input::-moz-placeholder {color:#fff;}
.cab_location_input:-ms-input-placeholder {color:#fff;}
.cab_location_input:-moz-placeholder {color:#fff;}
.cab_footer_btn_bay{width:100%;}
.cab_footer_btn{width:50%;height:50px;font-weight: 300;letter-spacing: 2px;border-radius:0px !important;background: #4d4d4d;color:#FFF;text-align: center;font-size: 16px;margin:0px;text-transform: capitalize !important;}
.cab_button_search{width:60px;height:60px;border-radius:50%;color:#fff;position: fixed;top:75px;right:0px;font-size: 20px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;}
}
src/pages/home/home.ts
......@@ -29,11 +29,11 @@ export class HomePage {
driverMarkers = []
locForm: FormGroup
geocoder: any;
local:user
directionsDisplay:any;
locRef:any
local: user
directionsDisplay: any;
locRef: any
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public storage: Storage, private geolocation: Geolocation, private firebase: fireService, private db: AngularFireDatabase, private formBuilder: FormBuilder, private data: dataService, private myservice:Myservice) {
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) {
this.locForm = this.formBuilder.group({
pickLoc: ['', Validators.required],
......@@ -44,8 +44,8 @@ export class HomePage {
ionViewDidEnter() {
this.data.setbookingData('')
this.storage.get('user_data').then(data=>{
if(data){
this.storage.get('user_data').then(data => {
if (data) {
this.local = data
}
})
......@@ -76,7 +76,8 @@ export class HomePage {
var This = this
This.locRef = firebase.database().ref().child('/drivers/')
This.locRef.orderByChild("status").equalTo('online').on("value", function (snapshot) {
var res_arr =[]
// console.log(This.locRef)
var res_arr = []
res_arr = (<any>Object).entries(snapshot.val()).map(e => Object.assign(e[1], { key: e[0] }));
var image = {
......@@ -94,7 +95,7 @@ export class HomePage {
position: { lat: res_arr[i].lat, lng: res_arr[i].lng },
size: new google.maps.Size(20, 32),
});
This.driverMarkers[i]=marker
This.driverMarkers[i] = marker
}
});
}
......@@ -114,21 +115,21 @@ export class HomePage {
}
fillAddress(autocomplete, type) {
if (this.markers.length==3) {
if (this.markers.length == 3) {
this.markers[0].setMap(null);
this.markers[0] = 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 }
});
var search = place.formatted_address
if (type == 0) {
this.p_lat = lat
this.p_lng = lng
......@@ -154,8 +155,8 @@ export class HomePage {
this.calculateAndDisplayRoute(directionsService, this.directionsDisplay, start, dest);
}
else{
this.loadMap(lat,lng)
else {
this.loadMap(lat, lng)
}
}
......@@ -186,9 +187,9 @@ export class HomePage {
calculateAndDisplayRoute(directionsService, directionsDisplay, start, dest) {
for (var i = 0; i < this.markers.length; i++) {
if (this.markers[i]){
if (this.markers[i]) {
this.markers[i].setMap(null);
this.markers[i]=null;
this.markers[i] = null;
console.log(this.markers[i])
}
}
......@@ -205,51 +206,50 @@ export class HomePage {
});
}
ridemore() {
this.myservice.load_post({ 'pickKeyword': this.locForm.value.pickLoc, 'dropKeyword': this.locForm.value.dropLoc, 'userid': this.local.id, 'pickLat': this.p_lat, 'pickLng': this.p_lng, 'dropLat': this.d_lat, 'dropLng': this.d_lng}, 'setSearch').subscribe(response => {
})
var data = { 'pickLat': this.p_lat, 'pickLng': this.p_lng, 'dropLat': this.d_lat, 'dropLng': this.d_lng, 'pickArea': this.locForm.value.pickLoc, 'dropArea': this.locForm.value.dropLoc}
this.data.setbookingData(data)
let modal = this.modalCtrl.create('RidepopPage');
modal.onDidDismiss(data=>{
if(data){
let modal1 = this.modalCtrl.create('RidenowPage',{type:data});
modal1.onDidDismiss(dat=>{
if(dat){
this.navCtrl.push('AddcouponPage', { rate: dat });
}
})
modal1.present();
}
})
modal.present();
}
ridemore() {
searchride() {
this.navCtrl.push('PaymentPage')
// let modal = this.modalCtrl.create('SearchridePage');
// modal.onDidDismiss(data=>{
// if(data){
// this.locForm.controls['pickLoc'].setValue(data.pickloc)
// this.locForm.controls['dropLoc'].setValue(data.droploc)
this.myservice.load_post({ 'pickKeyword': this.locForm.value.pickLoc, 'dropKeyword': this.locForm.value.dropLoc, 'userid': this.local.id, 'pickLat': this.p_lat, 'pickLng': this.p_lng, 'dropLat': this.d_lat, 'dropLng': this.d_lng }, 'setSearch').subscribe(response => {
})
var data = { 'pickLat': this.p_lat, 'pickLng': this.p_lng, 'dropLat': this.d_lat, 'dropLng': this.d_lng, 'pickArea': this.locForm.value.pickLoc, 'dropArea': this.locForm.value.dropLoc }
this.data.setbookingData(data)
let modal = this.modalCtrl.create('RidepopPage');
modal.onDidDismiss(data => {
if (data) {
let modal1 = this.modalCtrl.create('RidenowPage', { type: data });
modal1.onDidDismiss(dat => {
if (dat) {
this.navCtrl.push('AddcouponPage', { rate: dat });
}
})
modal1.present();
}
})
modal.present();
}
// var directionsService = new google.maps.DirectionsService;
searchride() {
let modal = this.modalCtrl.create('SearchridePage');
modal.onDidDismiss(data => {
if (data) {
this.locForm.controls['pickLoc'].setValue(data.pickloc)
this.locForm.controls['dropLoc'].setValue(data.droploc)
// this.directionsDisplay.setMap(this.map);
var directionsService = new google.maps.DirectionsService;
// var start = new google.maps.LatLng(data.picklat, data.picklng);
// var dest = new google.maps.LatLng(data.droplat, data.droplng);
this.directionsDisplay.setMap(this.map);
// this.calculateAndDisplayRoute(directionsService, this.directionsDisplay, start, dest);
// }
// })
// modal.present();
}
var start = new google.maps.LatLng(data.picklat, data.picklng);
var dest = new google.maps.LatLng(data.droplat, data.droplng);
ionViewWillLeave(){
this.locRef.off("value");
}
this.calculateAndDisplayRoute(directionsService, this.directionsDisplay, start, dest);
}
})
modal.present();
}
ionViewWillLeave() {
this.locRef.off("value");
}
}
src/pages/landing/landing.html
......@@ -5,10 +5,10 @@
</div>
<div class="cab_form">
<div class="cab_form_row">
<button ion-button class="cab_sign_btn" (click)="open_page('SignupPage')">New User? Sign Up now!</button>
<button ion-button class="cab_sign_btn" (click)="open_page('SignupPage')">New User ? Sign up now!</button>
</div>
<div class="cab_form_row">
<button ion-button class="cab_sign_btn1" (click)="open_page('LoginPage')">Sign In</button>
<button ion-button class="cab_sign_btn1" (click)="open_page('LoginPage')">Sign in</button>
</div>
<!-- <div class="cab_form_row textCenter">
<p (click)="forgot()">Forgot Password</p>
......@@ -19,8 +19,8 @@
<ion-footer>
<div class="cab_footer">
<p>Or Sign in with</p>
<li><img src="assets/img/fb.png" (click)="signInWithFB()"></li>
<li><img src="assets/img/linked.png" (click)="signInWithGoogle()"></li>
<li (click)="signInWithFB()"><ion-icon name="logo-facebook"></ion-icon></li>
<li (click)="signInWithGoogle()"><ion-icon name="logo-google"></ion-icon></li>
<div class="clear"></div>
</div>
</ion-footer>
src/pages/landing/landing.scss
page-landing {
.scroll-content{
align-content: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.cab_landing_wrapper{width:80%;margin:0 auto;}
.cab_logo{width:100%;text-align: center;}
.cab_logo img{width:200px;}
.cab_footer{width:100%;text-align: center;}
.cab_footer p{color: #3d3a3b;font-weight: 500;font-size: 18px;}
.cab_footer li{list-style: none;display: inline-block;color: #3d3a3b;font-size: 35px;margin:10px;}
.cab_sign_btn{height:45px;width:100%;background:#ff9c00;color: #fff;text-transform: capitalize !important;font-size: 18px;font-weight: 300;}
.cab_sign_btn1{height:45px;width:100%;border:1px solid #ff9c00;color: #ff9c00;background:transparent;text-transform: capitalize !important;font-size: 18px;font-weight: 300;}
.cab_form p{color: #3d3a3b;font-weight: 500;font-size: 18px;}
}
src/pages/login/login.html
<ion-header>
<button class="nav_btn" (click)="back()">
<ion-icon name="ios-arrow-back-outline"></ion-icon>
</button>
</ion-header>
<ion-content padding class="themelogin_background">
<div class="cab_login_wrapper">
<div class="cab_logo">
......@@ -16,7 +20,7 @@
</select>
<input class="cab_phone_input floatRight cab_call" placeholder="Mobile Number" formControlName="mobile" type="number">
<div class="clear"></div>
<div class="cab_req" *ngIf="loginForm.controls.mobile.invalid && (loginForm.get('mobile').dirty || loginForm.get('mobile').touched)">
<div class="alert error" *ngIf="loginForm.controls.mobile.invalid && (loginForm.get('mobile').dirty || loginForm.get('mobile').touched)">
Enter a valid Mobile
</div>
</div>
......@@ -25,7 +29,7 @@
<div class="cab_form_row">
<div class="cab_phone_number">
<input class="cab_phone_input cab_pass width100" placeholder="Password" formControlName="password" type="password">
<div class="cab_req" *ngIf="loginForm.controls.password.invalid && (loginForm.get('password').dirty || loginForm.get('password').touched)">
<div class="alert error" *ngIf="loginForm.controls.password.invalid && (loginForm.get('password').dirty || loginForm.get('password').touched)">
Minimum 6 characters
</div>
<div class="clear"></div>
......
src/pages/login/login.scss
page-login {
.scroll-content{
align-content: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.nav_btn{color: #3d3a3b;}
.cab_logo{width:100%;text-align: center; padding-bottom: 30px;}
.cab_logo img{width:200px;}
.cab_login_wrapper{width:100%;}
.cab_login_wrapper h4{color: #404041;
font-size: 40px;
font-weight: 300;
text-align: left;
text-transform:capitalize;}
.cab_login_wrapper hr{border:2px solid #f7941e;height:0px;border-radius:20px;width:35px;margin-left:0px;}
.cab_phone_number{width:100%;height:50px;border-bottom:2px solid #ff9c00;}
.cab_phone_code{width:50px;height:100%;-webkit-appearance: none;-moz-appearance: none;background: transparent !important;text-align: center;border:none;padding-left: 10px;color: #3d3a3b;font-size: 18px;}
.cab_phone_code option{text-align: center;}
.cab_phone_input{width:calc(100% - 50px);height:100%;border:none;color:#3d3a3b;font-size: 18px;padding-left: 10px;padding-right: 20px;}
.cab_phone_input::-webkit-input-placeholder {color:#3d3a3b;}
.cab_phone_input::-moz-placeholder {color:#3d3a3b;}
.cab_phone_input:-ms-input-placeholder {color:#3d3a3b;}
.cab_phone_input:-moz-placeholder {color:#3d3a3b;}
.cab_login_wrapper{width:100%;}
.cab_call{background: url("../assets/img/number.png");background-position: right;background-repeat: no-repeat;}
.cab_pass{background: url("../assets/img/password.png");background-position: right;background-repeat: no-repeat;}
.cab_user{background: url("../assets/img/user.png");background-position: right;background-repeat: no-repeat;}
.cab_mail{background: url("../assets/img/email.png");background-position: right;background-repeat: no-repeat;}
.cab_search{background: url("../assets/img/search.png") !important;background-position: right;background-repeat: no-repeat;}
.cab_currentlocation{background: url("../assets/img/currentlocation.png");background-position: right;background-repeat: no-repeat;}
.cab_location{background: url("../assets/img/location.png");background-position: right;background-repeat: no-repeat;}
.cab_confirmpass{background: url("../assets/img/confirmpass.png");background-position: right;background-repeat: no-repeat;}
.cab_form_row .item-block{background: transparent;padding-left:0px;border:none !important;margin:0 auto !important;width:200px !important;}
.cab_form_row .item-inner{border:none !important;}
.cab_form_row .checkbox-checked{background:#ff9c00 !important;border:1px solid #ff9c00 !important;}
.item .item-ios .checkbox-ios{margin-left:0px !important;margin-right:10px !important;}
.item .item-md .checkbox-md{margin-left:0px !important;margin-right:10px !important;}
.cab_sign_btn{height:45px;width:100%;background:#ff9c00;color: #fff;text-transform: capitalize !important;font-size: 18px;font-weight: 300;}
.cab_sign_btn1{height:45px;width:100%;border:1px solid #ff9c00;color: #ff9c00;background:transparent;text-transform: capitalize !important;font-size: 18px;font-weight: 300;}
.cab_form p{color: #3d3a3b;font-weight: 500;font-size: 18px;}
}
src/pages/login/login.ts
......@@ -65,4 +65,8 @@ export class LoginPage {
this.navCtrl.push('ForgotPage')
}
back(){
this.navCtrl.pop();
}
}
src/pages/map/map.html
<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>Map</h4>
</div>
<button ion-button class="jr_right jr_header_btn"></button>
<div class="jr_clear"></div>
<ion-header class="theme_dark_bg">
<button ion-button class="nav_btn theme_color floatLeft" (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Map</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div #map id="map"></div>
<div class="jr_bottom_distance_card" *ngIf="temp">
......@@ -15,10 +18,10 @@
<input class="jr_dest_input to" placeholder="To" [(ngModel)]="bookData.dropArea" [readonly]="true">
</div>
</div>
</ion-content>
<ion-footer *ngIf="!temp">
<div class="jr_bottom_button_bay">
<button ion-button class="jr_offer_ride2" (click)="cancel()">Cancel</button>
<button ion-button class="cab_footer_btn" (click)="cancel()">Cancel</button>
</div>
</ion-footer>
src/pages/map/map.scss
page-map {
.scroll {
height: 100%
}
#map {
width: 100%;
height: 100%;
}
.jr_theme_color{background: #ff9000 !important;border:1px solid #ff9000;}
.jr_theme_color1{background:#f1672f !important;}
.jr_left{float: left !important;}
......@@ -92,8 +92,8 @@ font-weight: 400;
.jr_offer_ride1{height:45px;width:130px;border:none;
background:#4d4d4d;
border-radius: 0px;
text-transform: capitalize !important;
text-transform: uppercase !important;
font-size: 14px;
font-weight: 400;
line-height: 5px;
......@@ -103,7 +103,7 @@ font-weight: 400;
border:none;
border-radius: 0px;
background:#4d4d4d;
text-transform: capitalize !important;
text-transform: uppercase !important;
font-size: 14px;
font-weight: 400;
line-height: 5px;
......@@ -112,21 +112,21 @@ font-weight: 400;
border:none;
border-radius: 0px;
background:#4d4d4d;
text-transform: capitalize !important;
text-transform: uppercase !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;
text-transform: uppercase !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;
text-transform: uppercase !important;
font-size: 14px;
font-weight: 400;
line-height: 5px;
......@@ -590,7 +590,7 @@ height:50px;
.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;}
.jr_bottom_distance_card{
position: fixed;
bottom:50px;
......@@ -629,4 +629,7 @@ height:50px;
}
}
}
.cab_footer_btn{width:100%;height:50px;font-weight: 300;letter-spacing: 2px;border-radius:0px !important;background: #f7941e;color:#FFF;text-align: center;font-size: 16px;margin:0px;text-transform: capitalize !important;}
}
src/pages/map/map.ts
......@@ -3,6 +3,7 @@ import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { dataService } from "../../providers/common.service";
import * as firebase from 'firebase';
import { Geolocation } from '@ionic-native/geolocation';
import { Myservice } from "../../providers/myservice";
declare var google;
@IonicPage()
......@@ -14,78 +15,77 @@ export class MapPage {
@ViewChild('map') mapElement: ElementRef;
map: any;
directionsDisplay: any;
bookData:any;
temp:boolean = false;
locSubs:any;
driver:any;
bookData: any;
temp: boolean = false;
locSubs: any;
driver: any;
pushed: number = 0;
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, private myservice: Myservice) {
}
ionViewWillEnter(){
ionViewDidEnter() {
this.geolocation.getCurrentPosition().then((resp) => {
this.loadMap(resp.coords.latitude, resp.coords.longitude);
this.driver = this.data.getdriverData();
this.bookData = this.data.getbookingData();
console.log(this.bookData)
var This = this;
var locRef = firebase.database().ref().child('/drivers/');
locRef.orderByChild("id").equalTo(Number(This.driver.driverId)).on("value", function (snapshot) {
var res_arr = []
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 == true) {
// This.directionsDisplay.setMap(null);
This.loadMap(resp.coords.latitude, resp.coords.longitude);
locRef.off("value");
This.startRide();
}
else {
var directionsService = new google.maps.DirectionsService;
This.directionsDisplay.setMap(This.map);
This.directionsDisplay.setOptions({ suppressMarkers: true });
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 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
});
This.calculateAndDisplayRoute(directionsService, This.directionsDisplay, pickLoc, driverLoc);
}
});
}).catch((error) => {
console.log('Error getting location', error);
});
}
ionViewDidEnter(){
this.driver = this.data.getdriverData();
this.bookData = this.data.getbookingData();
console.log(this.bookData)
var This = this;
var locRef = firebase.database().ref().child('/drivers/');
locRef.orderByChild("id").equalTo(Number(This.driver.driverId)).on("value", function (snapshot) {
var res_arr = []
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 == true){
locRef.off("value");
This.startRide();
}
else{
var directionsService = new google.maps.DirectionsService;
This.directionsDisplay.setMap(This.map);
This.directionsDisplay.setOptions({ suppressMarkers: true });
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 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
});
loadMap(lat, lng) {
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({
......@@ -112,11 +112,11 @@ export class MapPage {
});
}
startRide(){
startRide() {
this.temp = true
console.log('started')
var This= this;
var This = this;
This.locSubs = this.geolocation.watchPosition()
.filter((p) => p.coords !== undefined) //Filter Out Errors
.subscribe(position => {
......@@ -125,6 +125,7 @@ export class MapPage {
var directionsService = new google.maps.DirectionsService;
This.directionsDisplay.setMap(This.map);
This.directionsDisplay.setOptions({ suppressMarkers: true });
var destLoc = new google.maps.LatLng(This.bookData.dropLat, This.bookData.dropLng);
var myLoc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
......@@ -141,29 +142,34 @@ export class MapPage {
map: This.map,
icon: dimage
});
console.log(marker)
// 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 = []
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')
}
var locRef = firebase.database().ref().child('/drivers/');
locRef.orderByChild("id").equalTo(Number(This.driver.driverId)).on("value", function (snapshot) {
var res_arr = []
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) {
This.pushed++
console.log(This.pushed)
This.myservice.show_loader()
locRef.off();
if (This.pushed == 1)
This.navCtrl.setRoot('PaymentPage')
}
})
// }
// }
This.calculateAndDisplayRoute(directionsService, This.directionsDisplay, myLoc, destLoc);
});
}
cancel(){
cancel() {
this.navCtrl.pop();
}
ionViewWillLeave(){
ionViewWillLeave() {
this.locSubs.unsubscribe();
}
}
src/pages/mytrips/mytrips.scss
page-mytrips {
.cab_mytrips_wrapper{width:100%;height: 100%;}
.cab_trip_tabs_bay{}
.cab_trip_tabs_bay ul{width:100%;margin:0px;padding:0px;border-bottom:2px solid #f7941e;}
.cab_trip_tabs_bay ul li{padding: 0px;margin:0px;text-transform: capitalize !important;list-style: none;width:33.3%;float: left;text-align: center;color:#f7941e;padding: 12px;font-weight: 300;font-size: 16px;height: 50px;}
.cab_trip_tabs_bay ul .active{background:#f7941e;color: #fff;box-shadow: 0px 0px 10px 0px #888888 !important;border-radius: 0px !important;}
.cab_trip_content{width:100%;height:calc(100% - 45px);}
.cab_trip_content ul{width:100%;padding:0px;margin:0px;}
.cab_trip_content ul li{width:100%;height:100%;background: url("../assets/img/trip_yellow.png");position: relative;background-position: top 15px left 10px !important;background-repeat: no-repeat !important;background-size: 20px;padding-left:40px;padding-right: 50px;padding-top:10px;padding-bottom:10px;text-align: left;border-bottom: 1px solid #e4e4e4;}
.cab_trip_content ul li h6{margin:0px;padding:0px;color: #f7941e;font-size: 14px;font-weight: 300;}
.cab_trip_content ul li p{margin:0px;font-style: italic;color: #404041;font-weight: 300;font-size: 12px;padding-top: 5px;}
.cab_trip_content ul li ion-icon{ float: right;color: #f7941e;position: absolute;right:20px;top: 35%;}
}
src/pages/payment/payment.html
......@@ -8,13 +8,13 @@
<ion-content padding class="cab_coupon_bg">
<div class="cab_trip_detail_wrapper">
<h4 class="text_white">Pickup Point</h4>
<p class="floatLeft textLeft width50">North Sarovar Road,E City</p>
<p class="floatRight textRight width50">11 :23 am, 02-08-2017</p>
<p class="floatLeft textLeft width50">{{loc?.from}}</p>
<!-- <p class="floatRight textRight width50">11 :23 am, 02-08-2017</p> -->
<div class="clear"></div>
<br>
<h4 class="text_white">Drop Point</h4>
<p class="floatLeft textLeft width50">Majestic Junction 3rd Street</p>
<p class="floatRight textRight width50">12 :00 am, 02-08-2017</p>
<p class="floatLeft textLeft width50">{{loc?.to}}</p>
<!-- <p class="floatRight textRight width50">12 :00 am, 02-08-2017</p> -->
<div class="clear"></div>
<br>
<br>
......@@ -23,17 +23,17 @@
<p style="padding-top: 0px;margin-top: 0px;margin-bottom: 0px;">Payment Details</p>
<li>
<div class="child textLeft">Total</div>
<div class="child textRight">Rs. {{ride.?amount}}</div>
<div class="child textRight">Rs. {{ride?.amount}}</div>
<div class="clear"></div>
</li>
<li>
<div class="child textLeft">Discount</div>
<div class="child textRight">$ 25</div>
<div class="child textRight">Rs. {{ride?.discount}}</div>
<div class="clear"></div>
</li>
<li>
<div class="child textLeft">Due after service</div>
<div class="child textRight">$ 125</div>
<div class="child textRight">Rs. {{ride?.amount - ride?.discount}}</div>
<div class="clear"></div>
</li>
</div>
......@@ -42,8 +42,8 @@
<ion-footer>
<div class="theme_bgcolor p10 text_white">
<p class="floatLeft text_size_18">Total</p>
<p class="floatRight text_size_18">$ 125</p>
<p class="floatRight text_size_18">Rs. {{ride?.amount - ride?.discount}}</p>
<div class="clear"></div>
</div>
<button ion-button class="cab_footer_btn width100 text_white" (click)="open_page('HomePage')">OKAY</button>
<button ion-button class="cab_footer_btn width100 text_white" (click)="close()">OKAY</button>
</ion-footer>
src/pages/payment/payment.scss
page-payment {
.cab_trip_detail_wrapper{width:100%;padding-top: 20px;}
.cab_trip_detail_wrapper h4{margin:0px;color:#404041;font-weight: 400;font-size: 16px;}
.cab_trip_detail_wrapper p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top: 10px;font-size: 14px !important;color: #a8a8a8;font-weight:300;padding-bottom: 0px;margin-bottom: 0px;bottom: 0px !important;letter-spacing: 1px !important;}
.cab_trip_detail_wrapper hr{border:1px solid #f7941e;height:0px;border-radius:5px;position: relative;bottom: 22px; z-index: -9;}
.cab_trip_detail_wrapper .to{width:50px;height:30px;border-radius:50%;background:#fff;color: #f7941e;text-align: center;margin:0 auto; padding: 3px;font-size:23px; z-index: 9;letter-spacing: 3px;padding-top: 5px;padding-left: 6px;margin-top: 20px;margin-bottom: 20px;}
.cab_trip_detail_wrapper p strong{background:#f7941e;color: #fff;padding-left: 10px;padding-right: 10px;border-radius: 4px;font-weight: 400;}
.cab_ratting{padding-top: 25px;padding-bottom:25px;text-align: center; width:205px;margin: 0 auto;}
.cab_ratting:not(:checked) > input {position:absolute;top:-9999px;clip:rect(0,0,0,0);}
.cab_ratting:not(:checked) > label {float:right;width:1em;padding:0 .1em;overflow:hidden;white-space:nowrap;cursor:pointer;font-size: 40px;line-height:1.2;color:#ddd;}
.cab_ratting:not(:checked) > label:before {content: '★ ';}
.cab_ratting > input:checked ~ label {color: #f70;}
.cab_ratting:not(:checked) > label:hover,
.cab_ratting:not(:checked) > label:hover ~ label {color: gold;}
.cab_ratting > input:checked + label:hover,
.cab_ratting > input:checked + label:hover ~ label,
.cab_ratting > input:checked ~ label:hover,
.cab_ratting > input:checked ~ label:hover ~ label,
.cab_ratting > label:hover ~ input:checked ~ label {color: #ea0;}
.cab_ratting > label:active {position:relative;top:2px;left:2px;}
.cab_coupon_wrapper{padding-top:20%;}
.cab_pop_detail_left{width:65px;height:50px;background-position:left;background-size: 65px;background-repeat: no-repeat;}
.cab_pop_details{padding: 3px;width:calc(100% - 65px);}
.cab_coupon_box{width:80%;margin:0 auto;height:50px;text-align:center;border:2px solid #353639;border-radius:0px;background:#28292c;}
.cab_coupon_input{width:100%;height:100%;background:transparent !important;border:none;text-align:center;color:#ff9000; font-size: 20px;font-weight: 300;}
.cab_coupon_input::-webkit-input-placeholder {color:#ff9000;}
.cab_coupon_input::-moz-placeholder {color:#ff9000;}
.cab_coupon_input:-ms-input-placeholder {color:#ff9000;}
.cab_coupon_input:-moz-placeholder {color:#ff9000;}
.cab_coupon_bg{background:#2e2f32 !important;}
.cab_coupon_wrapper p{color:#fff;text-align:center;margin:0px;line-height: 18px;font-weight: 300;letter-spacing: 1px;padding-top: 40px;padding-bottom: 40px;}
.cab_coupon_apply{width:100%;height:50px;border-radius:0px;text-align:center;background:#ff9000;font-size:18px;font-weight: 400;color:#fff;letter-spacing: 4px;}
.cab_coupon_content{width:100%;}
.cab_coupon_content li{width:100%;list-style:none !important;padding-top: 10px;padding-bottom: 10px;border-bottom:1px solid #353639;}
.cab_coupon_content li .child{width:50%;float:left;color:#8d8c8c;font-size: 15px;}
.cab_coupon_content p{color:#ff9000;text-align:left;padding-bottom:20px;padding-top:20px;font-size: 18px;}
.footer p{padding:0px;margin: 0px;}
}
src/pages/payment/payment.ts
......@@ -27,67 +27,71 @@ export class PaymentPage {
}
ionViewDidEnter() {
this.driver = { 'name': 'asd', 'rating': '1', 'ratingCount': '1', 'image': '' }
this.ride = { 'km': 30, 'amount': '300', 'discount': '10%' }
if (this.ride.discount) {
if (this.ride.discount.slice(-1) == '%') {
var disc_amt = this.ride.discount.slice(0, -1)
this.ride.discount = Number(this.ride.amount) * (disc_amt / 100)
console.log()
}
}
// this.initializeBackButtonCustomHandler();
// this.storage.get('user_data').then(data => {
// if (data) {
// this.local = data
// this.book = this.data.getbookingData()
// console.log(this.book)
this.myservice.hide_loader();
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.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.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: 10/*this.book.bookingId*/},'getRideDetails').subscribe(resp=>{
// if(resp.status == 'success'){
// this.ride = resp.data
// }
// })
this.myservice.load_post({ bookingId: this.book.bookingId }, 'getRideDetails').subscribe(resp => {
if (resp.status == 'success') {
this.ride = resp.data
this.ride.amount = Number(this.ride.amount)
if (this.ride.discount) {
if (this.ride.discount.slice(-1) == '%') {
var disc_amt = this.ride.discount.slice(0, -1)
this.ride.discount = Number(this.ride.amount) * (disc_amt / 100)
}
}
else {
this.ride.discount = 0;
}
console.log(this.ride)
console.log(this.loc)
}
})
})
}
public initializeBackButtonCustomHandler(): void {
......
src/pages/profile/profile.scss
page-profile {
.cab_edit_profile_wrapper{width:100%;padding-top: 40px;}
.cab_edit_profilepic_edit{width:100px;height:100px;margin:0 auto;position:relative;border-radius:50%;border: 2px solid #f7941e;background-color:#f7941e !important;background-size: 25px !important;background: url(../assets/img/avatar.png);background-position: center;background-repeat: no-repeat;}
.cab_edit_profilepic_edit img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;}
.cab_edit_profile_edit_form{width:100%;padding-top: 20px;}
.cab_edit_profile_edit_row{width:100%;}
.cab_edit_profile_input{width:100%;}
.edit_circle{width:30px;height:30px;position:absolute;top:0px;right:0px;background-color:#f7941e;color:#fff;text-align:center;border-radius: 50%;padding:7px;}
.edit_circle input{width: 100%;opacity: 0;z-index: 99;position: absolute;right: 0px;}
.edit_circle ion-icon{position: absolute;top: 6px;right: 8px;}
}
src/pages/ratecard/ratecard.scss
page-ratecard {
.cab_ride_pop{width:100%;height:100%;position: relative;background: rgba(0,0,0,0.7);}
.cab_ride_inner{width:100%;min-height:130px;position: absolute;bottom:0px;}
.cab_ride_down_arrow{margin:0 auto;color: #fff;text-align: center;font-size:20px;width:50px;height:50px;border-radius:25px;padding: 10px;position: relative;bottom: 25px;}
.cab_ride_inner p{text-align: center;color: #fff;margin:0px;padding: 0px;font-size: 18px;font-weight: 300;letter-spacing: 4px;position: relative;bottom:30px;}
.cab_ride_inner h6{text-align: center;color:#fff;margin:0px !important;font-weight: 200;padding-top: 10px;font-size: 16px;position: relative;bottom:32px;}
.cab_ride_fare_break{background:#fff;color:#f7941e;text-align: center;position: relative;bottom: 20px;}
.cab_ride_inner strong{color:#fff;}
.cab_ride_inner h5{color: #fff;margin: 0px;font-weight: 300;margin-top: 7px;font-size: 14px;}
.cab_ride_bottom_section{width:100%;border-top:1px solid #fff;margin-top:20px;}
.cab_ride_bottom_section li{width:20%;float: left;height:80px;background-size:50px;padding-top: 10px;text-align: center;list-style: none;background-position: center !important;background-repeat: no-repeat !important;}
.cab_ride_bottom_section .act{background-color: #fff !important;}
.cab_ride_bottom_section .act p{color:#f7941e !important;background-color: transparent !important;}
.cab_ride_bottom_section p{font-size: 10px !important;margin:0px !important;padding:0px !important;bottom: 0px !important;letter-spacing: 1px !important;}
.c1{background: url("../assets/img/c1.png");}
.c2{background: url("../assets/img/c2.png");}
.c3{background: url("../assets/img/c4.png");}
.c4{background: url("../assets/img/c3.png");}
.c5{background: url("../assets/img/c5.png");}
.c6{background: url("../assets/img/c6.png");}
.cab_ride_offer{width:100%;text-align: center;border-top: 1px solid #fff;}
.cab_ride_offer li{float: left;color: #fff;list-style: none;width:50%;border-radius:0px;height:55px;padding-top: 15px;padding-bottom: 15px;font-size: 16px;font-weight: 300;}
}
src/pages/ridedetail/ridedetail.html
......@@ -8,14 +8,14 @@
</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-header class="theme_dark_bg">
<button ion-button class="nav_btn theme_color floatLeft" (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Quickride Details</div>
<div class="clear"></div>
</ion-header>
<ion-content padding>
......@@ -49,9 +49,9 @@
</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>
<button ion-button class="cab_footer_btn" (click)="track()">Track Driver</button>
</div>
</div>
......
src/pages/ridedetail/ridedetail.scss
page-ridedetail {
.jr_theme_color{background: #ff9000 !important;border:1px solid #ff9000;}
.jr_theme_color1{background:#f1672f !important;}
.jr_left{float: left !important;}
......@@ -82,8 +82,8 @@ font-weight: 400;
.jr_offer_ride1{height:45px;width:130px;border:none;
background:#4d4d4d;
border-radius: 0px;
text-transform: capitalize !important;
text-transform: uppercase !important;
font-size: 14px;
font-weight: 400;
line-height: 5px;
......@@ -93,30 +93,31 @@ font-weight: 400;
border:none;
border-radius: 0px;
background:#4d4d4d;
text-transform: capitalize !important;
text-transform: uppercase !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;
text-transform: uppercase !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;
text-transform: uppercase !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;
text-transform: uppercase !important;
font-size: 14px;
font-weight: 400;
line-height: 5px;
......@@ -612,5 +613,7 @@ height:50px;
.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;}
.cab_footer_btn{width:100%;height:50px;font-weight: 300;letter-spacing: 2px;border-radius:0px !important;background: #f7941e;color:#FFF;text-align: center;font-size: 16px;margin:0px;text-transform: capitalize !important;}
.jr_p{color: #717171 !important;text-align: left !important;font-size: 16px;font-weight: 400 !important;}
}
src/pages/ridedetail/ridedetail.ts
......@@ -18,13 +18,13 @@ export class RidedetailPage {
loc = { from: '', to: '', fromAd: '', toAd: '' }
local: user
public unregisterBackButtonAction: any;
count:number = 0;
loader:any;
driver:any;
bkid:any = 10;
count: number = 0;
loader: any;
driver: any;
bkid: any;
drivers = []
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) {
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() {
......@@ -35,31 +35,12 @@ export class RidedetailPage {
this.book = this.data.getbookingData()
console.log(this.book)
this.findDrivers()
var bdata = { 'book_date': this.book.date, 'drop_area': this.book.dropArea, 'pickup_area': this.book.pickArea, 'taxi_type': this.book.carDetails.car_type, 'amount': '', 'km': '', 'promocode': this.book.promocode, 'token': this.local.token, 'userid': this.local.id, 'type': 'now', 'drivers': [], 'discount': this.book.discount ? this.book.discount : 0 }
this.loader = this.loadingCtrl.create({
content: "Searching for driver"
});
this.loader.present();
bdata.drivers = this.drivers;
console.log(bdata)
// this.myservice.load_post(bdata, 'book_cab').subscribe(response => {
// if (response.status == 'success') {
// this.bkid = response.data
this.book.bookingId = this.bkid
this.data.setbookingData(this.book);
this.checkResp();
// }
// else {
// this.myservice.show_alert('Failed', 'Please try again')
// this.navCtrl.pop()
// }
// })
this.findDrivers()
this.geocoder = new google.maps.Geocoder();
for (let i = 0; i < 2; i++) {
......@@ -101,7 +82,7 @@ export class RidedetailPage {
})
}
findDrivers(){
findDrivers() {
var This = this
firebase.database().ref().child('/drivers/').orderByChild("status").equalTo('online').once("value", function (snapshot) {
var res_arr = []
......@@ -114,11 +95,39 @@ export class RidedetailPage {
if (google.maps.geometry.spherical.computeDistanceBetween(driverLoc, mypos) < 5000) {
This.drivers.push(res_arr[i].id)
}
if (i == res_arr.length - 1) {
if (This.drivers.length == 0) {
This.loader.dismissAll();
This.myservice.show_alert('', 'No drivers found')
}
else {
var bdata = { 'book_date': This.book.date, 'drop_area': This.book.dropArea, 'pickup_area': This.book.pickArea, 'taxi_type': This.book.carDetails.car_type, 'amount': '', 'km': '', 'promocode': This.book.promocode, 'token': This.local.token, 'userid': This.local.id, 'type': 'now', 'drivers': [], 'discount': This.book.discount ? This.book.discount : 0 }
bdata.drivers = This.drivers;
console.log(bdata)
This.myservice.load_post(bdata, 'book_cab').subscribe(response => {
if (response.status == 'success') {
This.bkid = response.data
This.book.bookingId = This.bkid
This.data.setbookingData(This.book);
This.checkResp();
}
else {
This.myservice.show_alert('Failed', 'Please try again')
This.navCtrl.pop()
}
})
}
}
}
});
}
showAlert(){
showAlert() {
let alert = this.alertCtrl.create({
title: 'No drivers found',
message: 'Please search again.',
......@@ -140,9 +149,9 @@ export class RidedetailPage {
this.findDrivers()
var This = this;
setTimeout(() => {
This.myservice.load_post({ taxiType: This.book.carDetails.car_type, type:'now',driversid: This.drivers }, 'driverPush').subscribe(data => {
if(data.status == 'success')
This.checkResp();
This.myservice.load_post({ taxiType: This.book.carDetails.car_type, type: 'now', driversid: This.drivers }, 'driverPush').subscribe(data => {
if (data.status == 'success')
This.checkResp();
})
}, 500);
}
......@@ -152,7 +161,7 @@ export class RidedetailPage {
alert.present();
}
checkResp(){
checkResp() {
var This = this;
var intrvl = setInterval(function () {
This.count++;
......@@ -182,9 +191,9 @@ export class RidedetailPage {
this.unregisterBackButtonAction && this.unregisterBackButtonAction();
}
track(){
track() {
this.data.setdriverData(this.driver)
console.log('driv',this.driver)
console.log('driv', this.driver)
this.navCtrl.push('MapPage')
}
}
src/pages/ridenow/ridenow.html
<ion-content class="bg_transparent">
<div class="cab_ride_pop">
<div class="cab_ride_inner theme_bgcolor" style="padding-top: 15px;">
<div class="cab_ride_inner theme_bgcolor">
<div class="cab_ride_down_arrow theme_bgcolor">
<ion-icon name="ios-arrow-down-outline"(click)="dismiss()"></ion-icon>
</div>
......
src/pages/ridenow/ridenow.scss
page-ridenow {
.cab_ride_pop{width:100%;height:100%;position: relative;background: rgba(0,0,0,0.7);}
.cab_ride_inner{width:100%;position: absolute;bottom:0px;}
.cab_ride_down_arrow{margin:0 auto;color: #fff;text-align: center;font-size:20px;width:50px;height:50px;border-radius:25px;padding: 10px;position: relative;bottom: 25px;}
.cab_ride_inner p{text-align: center;color: #fff;margin:0px;padding: 0px;font-size: 18px;font-weight: 300;letter-spacing: 4px;position: relative;bottom:30px;}
.cab_ride_inner h6{text-align: center;color:#fff;margin:0px !important;font-weight: 200;padding-top: 10px;font-size: 16px;position: relative;bottom:32px;}
.cab_ride_fare_break{background:#fff;color:#f7941e;text-align: center;position: relative;bottom: 20px;}
.cab_ride_inner strong{color:#fff;}
.cab_ride_inner h5{color: #fff;margin: 0px;font-weight: 300;margin-top: 7px;font-size: 14px;}
.cab_ride_bottom_section{width:100%;border-top:1px solid #fff;margin-top:20px;}
.cab_ride_bottom_section li{width:20%;float: left;height:80px;background-size:50px;padding-top: 10px;text-align: center;list-style: none;background-position: center !important;background-repeat: no-repeat !important;}
.cab_ride_bottom_section .act{background-color: #fff !important;}
.cab_ride_bottom_section .act p{color:#f7941e !important;background-color: transparent !important;}
.cab_ride_bottom_section p{font-size: 10px !important;margin:0px !important;padding:0px !important;bottom: 0px !important;letter-spacing: 1px !important;}
.c1{background: url("../assets/img/c1.png");}
.c2{background: url("../assets/img/c2.png");}
.c3{background: url("../assets/img/c4.png");}
.c4{background: url("../assets/img/c3.png");}
.c5{background: url("../assets/img/c5.png");}
.c6{background: url("../assets/img/c6.png");}
.cab_ride_offer{width:100%;text-align: center;border-top: 1px solid #fff;}
.cab_footer_btn_bay{width:100%;}
.cab_footer_btn{width:50%;height:50px;font-weight: 300;letter-spacing: 2px;border-radius:0px !important;background: #4d4d4d;color:#FFF;text-align: center;font-size: 16px;margin:0px;text-transform: capitalize !important;}
.cab_button_search{width:60px;height:60px;border-radius:50%;color:#fff;position: fixed;top:75px;right:0px;font-size: 20px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;}
.cab_ride_offer li{float: left;color: #fff;list-style: none;width:50%;border-radius:0px;height:55px;padding-top: 15px;padding-bottom: 15px;font-size: 16px;font-weight: 300;}
.cab_pop_detail_left{width:65px;height:50px;background-position:left;background-size: 65px;background-repeat: no-repeat;}
.cab_pop_details{padding: 3px;width:calc(100% - 65px);}
}
src/pages/ridepop/ridepop.scss
page-ridepop {
.cab_ride_pop{width:100%;height:100%;position: relative;background: rgba(0,0,0,0.7);}
.cab_ride_inner{width:100%;position: absolute;bottom:0px;}
.cab_ride_down_arrow{margin:0 auto;color: #fff;text-align: center;font-size:20px;width:50px;height:50px;border-radius:25px;padding: 10px;position: relative;bottom: 25px;}
.cab_ride_inner p{text-align: center;color: #fff;margin:0px;padding: 0px;font-size: 18px;font-weight: 300;letter-spacing: 4px;position: relative;bottom:30px;}
.cab_ride_inner h6{text-align: center;color:#fff;margin:0px !important;font-weight: 200;padding-top: 10px;font-size: 16px;position: relative;bottom:32px;}
.cab_ride_fare_break{background:#fff;color:#f7941e;text-align: center;position: relative;bottom: 20px;}
.cab_ride_inner strong{color:#fff;}
.cab_ride_inner h5{color: #fff;margin: 0px;font-weight: 300;margin-top: 7px;font-size: 14px;}
.cab_ride_bottom_section{width:100%;border-top:1px solid #fff;margin-top:20px;}
.cab_ride_bottom_section li{width:20%;float: left;height:80px;background-size:50px;padding-top: 10px;text-align: center;list-style: none;background-position: center !important;background-repeat: no-repeat !important;}
.cab_ride_bottom_section .act{background-color: #fff !important;}
.cab_ride_bottom_section .act p{color:#f7941e !important;background-color: transparent !important;}
.cab_ride_bottom_section p{font-size: 10px !important;margin:0px !important;padding:0px !important;bottom: 0px !important;letter-spacing: 1px !important;}
.c1{background: url("../assets/img/c1.png");}
.c2{background: url("../assets/img/c2.png");}
.c3{background: url("../assets/img/c4.png");}
.c4{background: url("../assets/img/c3.png");}
.c5{background: url("../assets/img/c5.png");}
.c6{background: url("../assets/img/c6.png");}
.cab_ride_offer{width:100%;text-align: center;border-top: 1px solid #fff;}
.cab_footer_btn_bay{width:100%;}
.cab_footer_btn{width:50%;height:50px;font-weight: 300;letter-spacing: 2px;border-radius:0px !important;background: #4d4d4d;color:#FFF;text-align: center;font-size: 16px;margin:0px;text-transform: capitalize !important;}
.cab_button_search{width:60px;height:60px;border-radius:50%;color:#fff;position: fixed;top:75px;right:0px;font-size: 20px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;}
.cab_ride_offer li{float: left;color: #fff;list-style: none;width:50%;border-radius:0px;height:55px;padding-top: 15px;padding-bottom: 15px;font-size: 16px;font-weight: 300;}
.cab_pop_detail_left{width:65px;height:50px;background-position:left;background-size: 65px;background-repeat: no-repeat;}
.cab_pop_details{padding: 3px;width:calc(100% - 65px);}
}
src/pages/ridepop/ridepop.ts
......@@ -31,8 +31,9 @@ export class RidepopPage {
})
}
carClick(index){
this.carIndex = index
carClick(index, $event){
this.carIndex = index;
//event.target.classList.toggle('act');
}
bookLater(){
......@@ -55,7 +56,7 @@ export class RidepopPage {
this.locData.type = 'later'
this.data.setbookingData(this.locData);
this.viewCtrl.dismiss('later');
}
},
err => console.log('Error occurred while getting date: ', err)
......
src/pages/searchride/searchride.scss
page-searchride {
.cab_search_result_page{width:100%;}
.cab_search_result_page ul{width:100%;margin:0px;padding:10px;}
.cab_search_result_page ul li{width:100%;border-bottom:1px solid #4a4a4a;padding-top:15px;padding-bottom:15px;padding-left:10px;}
.cab_search_result_page p{color:#fff;margin:0px;font-size: 18px;font-weight:300;padding: 10px;letter-spacing: 4px;}
.cab_search_result_page ul li h5{color:#ff9000;margin:0px;padding:0px;padding-bottom: 5px;font-size: 14px;letter-spacing: 1px;font-weight: 400;}
.cab_search_result_page ul li h6{color:#929292;margin:0px;padding:0px;font-weight: 400;}
}
src/pages/signup/signup.html
<ion-header>
<button class="nav_btn" (click)="back()">
<ion-icon name="ios-arrow-back-outline"></ion-icon>
</button>
</ion-header>
<ion-content padding class="themelogin_background">
<div class="cab_login_wrapper">
<div class="cab_logo">
<img src="assets/img/cab_logo.png" style="width: 120px;">
</div>
<h4>Sign Up</h4>
<hr>
<br>
......@@ -12,7 +13,7 @@
<div class="cab_form_row">
<div class="cab_phone_number">
<input class="cab_phone_input cab_user width100" placeholder="Name" formControlName="User_name">
<div class="cab_req" *ngIf="signupForm.controls.User_name.invalid && (signupForm.get('User_name').dirty || signupForm.get('User_name').touched)">
<div class="alert error" *ngIf="signupForm.controls.User_name.invalid && (signupForm.get('User_name').dirty || signupForm.get('User_name').touched)">
Enter a valid Name
</div>
<div class="clear"></div>
......@@ -25,17 +26,17 @@
<option *ngFor="let code of codes" value=+{{code.dialCode}}>+{{code.dialCode}}</option>
</select>
<input class="cab_phone_input floatRight cab_call" placeholder="Mobile Number" formControlName="Mobile" type="number">
<div class="cab_req" *ngIf="signupForm.controls.Mobile.invalid && (signupForm.get('Mobile').dirty || signupForm.get('Mobile').touched)">
<div class="clear"></div>
<div class="alert error" *ngIf="signupForm.controls.Mobile.invalid && (signupForm.get('Mobile').dirty || signupForm.get('Mobile').touched)">
Enter a valid Mobile
</div>
<div class="clear"></div>
</div>
</div>
<br>
<div class="cab_form_row">
<div class="cab_phone_number">
<input class="cab_phone_input cab_mail width100" placeholder="Email" formControlName="Email" type="email">
<div class="cab_req" *ngIf="signupForm.controls.Email.invalid && (signupForm.get('Email').dirty || signupForm.get('Email').touched)">
<div class="alert error" *ngIf="signupForm.controls.Email.invalid && (signupForm.get('Email').dirty || signupForm.get('Email').touched)">
Enter a valid Email
</div>
<div class="clear"></div>
......@@ -45,7 +46,7 @@
<div class="cab_form_row">
<div class="cab_phone_number">
<input class="cab_phone_input cab_pass width100" placeholder="Password" formControlName="Password" type="password">
<div class="cab_req" *ngIf="signupForm.controls.Password.invalid && (signupForm.get('Password').dirty || signupForm.get('Password').touched)">
<div class="alert error" *ngIf="signupForm.controls.Password.invalid && (signupForm.get('Password').dirty || signupForm.get('Password').touched)">
Minimum 6 characters
</div>
<div class="clear"></div>
......@@ -55,7 +56,7 @@
<div class="cab_form_row">
<div class="cab_phone_number">
<input class="cab_phone_input cab_confirmpass width100" placeholder="Confirm Password" formControlName="confirm" type="password">
<div class="cab_req" *ngIf="signupForm.controls.confirm.invalid && (signupForm.get('confirm').dirty || signupForm.get('confirm').touched)">
<div class="alert error" *ngIf="signupForm.controls.confirm.invalid && (signupForm.get('confirm').dirty || signupForm.get('confirm').touched)">
Password mismatches
</div>
<div class="clear"></div>
......@@ -67,7 +68,7 @@
<ion-label><p>I accept terms & condition</p></ion-label>
<ion-checkbox formControlName="terms"></ion-checkbox>
</ion-item>
<div class="cab_req" *ngIf="signupForm.controls.terms.invalid && (signupForm.get('terms').dirty || signupForm.get('terms').touched)">
<div class="alert error" *ngIf="signupForm.controls.terms.invalid && (signupForm.get('terms').dirty || signupForm.get('terms').touched)">
Please accept terms & conditions
</div>
</div>
......@@ -76,6 +77,7 @@
<div class="cab_form_row">
<button ion-button class="cab_sign_btn" (click)="register()" [disabled]="signupForm.invalid">Sign Up</button>
</div>
<br>
</div>
</div>
</ion-content>
src/pages/signup/signup.scss
page-signup {
.nav_btn{color: #3d3a3b;}
.cab_logo{width:100%;text-align: center; padding-bottom: 30px;}
.cab_logo img{width:200px;}
.cab_login_wrapper{width:100%;height:100%;}
.cab_login_wrapper h4{color: #404041;
font-size: 40px;
font-weight: 300;
text-align: left;
text-transform:capitalize;}
.cab_login_wrapper hr{border:2px solid #f7941e;height:0px;border-radius:20px;width:35px;margin-left:0px;}
.cab_phone_number{width:100%;height:50px;border-bottom:2px solid #ff9c00;}
.cab_phone_code{width:50px;height:100%;-webkit-appearance: none;-moz-appearance: none;background: transparent !important;text-align: center;border:none;padding-left: 10px;color: #3d3a3b;font-size: 18px;}
.cab_phone_code option{text-align: center;}
.cab_phone_input{width:calc(100% - 50px);height:100%;border:none;color:#3d3a3b;font-size: 18px;padding-left: 10px;padding-right: 20px;}
.cab_phone_input::-webkit-input-placeholder {color:#3d3a3b;}
.cab_phone_input::-moz-placeholder {color:#3d3a3b;}
.cab_phone_input:-ms-input-placeholder {color:#3d3a3b;}
.cab_phone_input:-moz-placeholder {color:#3d3a3b;}
.cab_login_wrapper{width:100%;}
.cab_call{background: url("../assets/img/number.png");background-position: right;background-repeat: no-repeat;}
.cab_pass{background: url("../assets/img/password.png");background-position: right;background-repeat: no-repeat;}
.cab_user{background: url("../assets/img/user.png");background-position: right;background-repeat: no-repeat;}
.cab_mail{background: url("../assets/img/email.png");background-position: right;background-repeat: no-repeat;}
.cab_search{background: url("../assets/img/search.png") !important;background-position: right;background-repeat: no-repeat;}
.cab_currentlocation{background: url("../assets/img/currentlocation.png");background-position: right;background-repeat: no-repeat;}
.cab_location{background: url("../assets/img/location.png");background-position: right;background-repeat: no-repeat;}
.cab_confirmpass{background: url("../assets/img/confirmpass.png");background-position: right;background-repeat: no-repeat;}
.cab_form_row .item-block{background: transparent;padding-left:0px;border:none !important;margin:0 auto !important;width:200px !important;}
.cab_form_row .item-inner{border:none !important;}
.cab_form_row .checkbox-checked{background:#ff9c00 !important;border:1px solid #ff9c00 !important;}
.item .item-ios .checkbox-ios{margin-left:0px !important;margin-right:10px !important;}
.item .item-md .checkbox-md{margin-left:0px !important;margin-right:10px !important;}
.cab_sign_btn{height:45px;width:100%;background:#ff9c00;color: #fff;text-transform: capitalize !important;font-size: 18px;font-weight: 300;}
.cab_sign_btn1{height:45px;width:100%;border:1px solid #ff9c00;color: #ff9c00;background:transparent;text-transform: capitalize !important;font-size: 18px;font-weight: 300;}
.cab_form p{color: #3d3a3b;font-weight: 500;font-size: 18px;}
}
src/pages/signup/signup.ts
......@@ -50,7 +50,7 @@ export class SignupPage {
register() {
this.myservice.show_loader()
this.geolocation.getCurrentPosition().then((resp) => {
this.myservice.load_post(this.signupForm.value, 'sign_up').subscribe(response => {
if (response.status == 'success') {
......@@ -91,4 +91,8 @@ export class SignupPage {
}
})
}
back(){
this.navCtrl.pop();
}
}
src/pages/tripdetails/tripdetails.html
......@@ -6,7 +6,7 @@
<button class="nav_btn floatRight"></button>
<div class="clear"></div>
</ion-header>
<ion-content class="themelogin_background">
<ion-content class="cab_dark_bg" padding>
<div class="cab_trip_detail_wrapper">
<h4>Pickup Point</h4>
<p class="floatLeft textLeft width50">{{details.pickup_area}}</p>
......@@ -72,4 +72,4 @@
<button ion-button class="cab_footer_btn single_btn" (click)="cancel()">CANCEL RIDE</button>
<div class="clear"></div>
</div>
</ion-footer>
\ No newline at end of file
</ion-footer>
src/pages/tripdetails/tripdetails.scss
page-tripdetails {
.cab_dark_bg{
background: #2e2f32 !important;
}
.cab_trip_detail_wrapper{width:100%;}
.cab_trip_detail_wrapper h4{margin:0px;color: #ff9000;font-weight: 400;font-size: 16px;}
.cab_trip_detail_wrapper p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top: 10px;font-size: 14px !important;color: #a8a8a8;font-weight:300;padding-bottom: 0px;margin-bottom: 0px;bottom: 0px !important;letter-spacing: 1px !important;}
.cab_trip_detail_wrapper hr{border:1px solid #f7941e;height:0px;border-radius:5px;position: relative;bottom: 22px; z-index: -9;}
.cab_trip_detail_wrapper .to{width:50px;height:30px;border-radius:50%;background:#fff;color: #f7941e;text-align: center;margin:0 auto; padding: 3px;font-size:23px; z-index: 9;letter-spacing: 3px;padding-top: 5px;padding-left: 6px;margin-top: 20px;margin-bottom: 20px;}
.cab_trip_detail_wrapper p strong{background:#f7941e;color: #fff;padding-left: 10px;padding-right: 10px;border-radius: 4px;font-weight: 400;}
.cab_ratting{padding-top: 25px;padding-bottom:25px;text-align: center; width:205px;margin: 0 auto;}
.cab_ratting:not(:checked) > input {position:absolute;top:-9999px;clip:rect(0,0,0,0);}
.cab_ratting:not(:checked) > label {float:right;width:1em;padding:0 .1em;overflow:hidden;white-space:nowrap;cursor:pointer;font-size: 40px;line-height:1.2;color:#ddd;}
.cab_ratting:not(:checked) > label:before {content: '★ ';}
.cab_ratting > input:checked ~ label {color: #f70;}
.cab_ratting:not(:checked) > label:hover,
.cab_ratting:not(:checked) > label:hover ~ label {color: gold;}
.cab_ratting > input:checked + label:hover,
.cab_ratting > input:checked + label:hover ~ label,
.cab_ratting > input:checked ~ label:hover,
.cab_ratting > input:checked ~ label:hover ~ label,
.cab_ratting > label:hover ~ input:checked ~ label {color: #ea0;}
.cab_ratting > label:active {position:relative;top:2px;left:2px;}
.cab_footer_btn {background:#f7941e;margin:0px;border-radius: 0px;height:45px;font-weight:400;}
}
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