Skip to content

D
dcarfixers_angular
Commit 2448c5c8 by Jansa Jose
Options

dc- appontment details and service history

parent fab431ee
Showing with 267 additions and 68 deletions
src/app/home/dashboard/dashboard.component.html
......@@ -197,7 +197,7 @@
<div class="button_bay">
<div class="btn-group-justified" role="group" aria-label="Basic example">
<button type="button" class="btn book btn-sm" data-toggle="modal" data-target="#wizard" (click)="bookVechile(vehicle.customer_veh_id)">Book Now</button>
<button type="button" class="btn btn-danger btn-sm" (click)="deleteCustomerCar(vehicle.customer_id,vehicle.customer_veh_id)">Delete</button>
<button type="button" class="btn btn-danger btn-sm" (click)="cnfdeleteCustomerCar(vehicle.customer_id,vehicle.customer_veh_id)">Delete</button>
</div>
</div>
</li>
......@@ -231,28 +231,26 @@
<tr>
<th></th>
<th>Order Date</th>
<th>Vehicle Model</th>
<th>Vehicle Make</th>
<th>Mechanic</th>
<!-- <th>Cost</th> -->
<th>Action</th>
</tr>
</thead>
</table>
<div *ngFor="let bookData of successBookDtls; let i = index">
<div *ngFor="let bookData of successBookDtls; let i = index" id="accordion">
<table>
<tbody>
<tr>
<td>{{i+1}}</td>
<td>{{bookData.scheduled_date+' '+bookData.scheduled_time}}</td>
<td>{{bookData.car_name}}</td>
<td>{{bookData.car_name}}</td>
<td>{{(bookData.is_multiple ==='0')? bookData.mechanic_data[0].first_name+' '+bookData.mechanic_data[0].last_name : bookData.mechanic_data.length+' Requests'}}</td>
<!-- <td>{{bookData.cost}}</td> -->
<td>
<div class="floatLeft">
<div class="btn-group btn-group-justified">
<button (click)="cancelBooking(bookData.booking_id)" class="btn btn-danger btn-sm">Cancel</button>
<button class="btn btn-default btn-sm">{{bookData.status === '1' ? 'Accepted' : 'Pending'}}</button>
<button (click)="cnfCancelBook(bookData.booking_id)" class="btn btn-danger btn-sm">Cancel</button>
</div>
</div>
<div class="booking_drop" data-toggle="collapse" [attr.data-target]="'#quote_list_'+bookData.booking_id"></div>
......@@ -260,7 +258,7 @@
</tr>
</tbody>
</table>
<table [attr.id]="'quote_list_'+bookData.booking_id" class="collapse">
<table [attr.id]="'quote_list_'+bookData.booking_id" class="collapse quote_list_table" data-parent="#accordion">
<thead>
<tr>
<th>Mechanic</th>
......@@ -281,8 +279,8 @@
<td>
<div class="btn-group btn-group-justified">
<button class="btn btn-default btn-sm" *ngIf="mechdata.status =='0'">Waiting for Approval</button>
<button class="btn btn-success btn-sm" *ngIf="mechdata.status =='1'">Accept</button>
<button class="btn btn-info btn-sm" data-toggle="modal" data-target="#failure" *ngIf="mechdata.status =='1'">View Quote</button>
<button class="btn btn-success btn-sm" *ngIf="mechdata.status =='1' && bookData.status != '1'" (click)="mechanicQuoteAccept(bookData.booking_id,mechdata.mechanic_id)">Accept</button>
<button class="btn btn-info btn-sm" (click)="showCustQuote(bookData.booking_id,mechdata.mechanic_id,1)" data-toggle="modal" data-target="#quote" *ngIf="mechdata.status =='1' && mechdata.custom_service_quote">View Quote</button>
</div>
</td>
</tr>
......@@ -313,7 +311,7 @@
<p>No Data Found</p>
</div>
<ng-template #allBookDtls>
<table>
<!-- <table>
<thead>
<tr>
<th>Orders</th>
......@@ -326,20 +324,79 @@
</thead>
<tbody>
<tr *ngFor="let bookData of bookingDetails;let i = index">
<!-- <td>{{bookData.booking_id}}</td> -->
<td>{{i+1}}</td>
<td>{{bookData.scheduled_date+' '+bookData.scheduled_time}}</td>
<td>{{bookData.car_name}}</td>
<td>{{bookData.mechanic_data.first_name+' '+bookData.mechanic_data.last_name}}</td>
<td>{{bookData.mechanic_data[0].first_name+' '+bookData.mechanic_data[0].last_name}}</td>
<td class="service-align-center">{{bookData.cost}}</td>
<td [ngSwitch]="bookData.status">
<p *ngSwitchCase="3" class="success_status">Completed</p>
<p *ngSwitchCase="4" class="canceled_status">Canceled</p>
<p *ngSwitchCase="5" class="canceled_status">Canceled</p>
</td>
</tr>
</tbody>
</table> -->
<table>
<thead>
<tr>
<th></th>
<th>Order Date</th>
<th>Vehicle Make</th>
<th>Mechanic</th>
<th>Action</th>
</tr>
</thead>
</table>
<div *ngFor="let bookData of bookingDetails; let i = index" id="accordion">
<table>
<tbody>
<tr>
<td>{{i+1}}</td>
<td>{{bookData.scheduled_date+' '+bookData.scheduled_time}}</td>
<td>{{bookData.car_name}}</td>
<td>{{(bookData.is_multiple ==='0')? bookData.mechanic_data[0].first_name+' '+bookData.mechanic_data[0].last_name : bookData.mechanic_data.length+' Requests'}}</td>
<td [ngSwitch]="bookData.status">
<div class="floatLeft">
<p *ngSwitchCase="3" class="success_status">Completed</p>
<p *ngSwitchCase="4" class="canceled_status">Canceled</p>
</div>
<div *ngIf="bookData.status === '3'" class="booking_drop" data-toggle="collapse" [attr.data-target]="'#quote_list_'+bookData.booking_id"></div>
</td>
</tr>
</tbody>
</table>
<table [attr.id]="'quote_list_'+bookData.booking_id" class="collapse quote_list_table" data-parent="#accordion">
<thead>
<tr>
<th>Mechanic</th>
<th>Contact</th>
<th>Rating</th>
<th>Location</th>
<th>Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let mechdata of bookData.mechanic_data;">
<td>{{mechdata.first_name+' '+mechdata.last_name}}</td>
<td>{{mechdata.phone}}</td>
<td>{{mechdata.rating > 0?mechdata.rating+'/5':''}}</td>
<td>{{mechdata.location}}</td>
<td>{{mechdata.custom_amount > 0 ?mechdata.custom_amount:bookData.cost}}</td>
<td>
<div class="btn-group btn-group-justified">
<button class="btn btn-info btn-sm" (click)="showCustQuote(bookData.booking_id,mechdata.mechanic_id,2)" data-toggle="modal" data-target="#quote" *ngIf="mechdata.status =='1' && mechdata.custom_service_quote">View Quote</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</ng-template>
</div>
</div>
......@@ -861,18 +918,19 @@
</div>
<!-- QUOTES-MODAL-ENDS-->
<!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#confirm">Open Modal</button> -->
<!-- BOOKING-QUOTE-MODAL-STARTS -->
<div class="modal" id="quote">
<div class="modal-dialog modal-full">
<div class="loader_overlay" *ngIf="loader"></div>
<div class="modal-content login_modal_wrapper">
<div class="modal_close" data-dismiss="modal"> × </div>
<div class="modal-body quote_modal">
<div class="login_modal_content">
<div class="login_modal_inner">
<h3>View quotes</h3>
<table>
<table width=100%>
<thead>
<tr>
<th width= 20%;>Issues</th>
......@@ -881,32 +939,16 @@
</tr>
</thead>
<tbody>
<tr>
<td>Oil Change</td>
<td>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</td>
<td>$340</td>
<tr *ngFor="let quote of mechCustQuote">
<td>{{quote.issue_category}}</td>
<td>{{quote.description}}</td>
<td>{{quote.amount}}</td>
</tr>
<tr>
<td>Oil Change</td>
<td>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</td>
<td>$340</td>
</tr>
<tr>
<td>Oil Change</td>
<td>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</td>
<td>$340</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-md-12 textCenter" style="padding-top:40px;">
<button class="log_btn">Close</button>
<button class="log_btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
......@@ -915,14 +957,9 @@
</div>
</div>
</div>
<!-- BOOKING-QUOTE-MODAL-ENDS -->
<!-- BOOKING-SUCCESS-MODAL-STARTS -->
<div class="modal" id="success">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper">
......@@ -937,7 +974,7 @@
<div class="row">
<div class="col-md-12 textCenter" style="padding-top:40px;">
<button class="log_btn">Close</button>
<button class="log_btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
......@@ -946,12 +983,9 @@
</div>
</div>
</div>
<!-- BOOKING-SUCCESS-MODAL-ENDS -->
<!-- BOOKING-FAILURE-MODAL-STARTS -->
<div class="modal" id="failure">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper">
......@@ -975,6 +1009,29 @@
</div>
</div>
</div>
<!-- BOOKING-FAILURE-MODAL-ENDS -->
<!-- BOOKING-CONFIRMATION-MODAL-STARTS -->
<button #confirmModal class="hide" data-toggle="modal" data-target="#confirm">Add Vehicle</button>
<div class="modal" id="confirm" >
<div class="modal-dialog modal-full">
<div class="modal-content background_transparent">
<div class="modal-body quote_modal">
<div class="confirm_modal_content">
<div class="login_modal_inner">
<div class="login_success">
<h4>Do You Want to Confirm ?</h4>
</div>
<div class="row">
<div class="col-md-12 textCenter">
<button class="btn btn-success" data-dismiss="modal" (click)="confirmCallBack(confirmCallBak,confirmParam)">Yes</button>
<button class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BOOKING-CONFIRMATION-MODAL-ENDS -->
src/app/home/dashboard/dashboard.component.scss
......@@ -95,7 +95,7 @@
.dashboard_tab_content {
padding-bottom: 80px;
#quote_list{
.quote_list_table{
background: darkgray;
thead {
......@@ -107,12 +107,51 @@
font-weight: 400;
padding: 5px;
padding-left:20px;
&:nth-child(1){
width:20%;
}
&:nth-child(2){
width:20%;
}
&:nth-child(3){
width:10%;
}
&:nth-child(4){
width:20%;
}
&:nth-child(5){
width:10%;
}
&:nth-child(6){
width:20%;
}
}
}
}
tbody {
tr{
td{
&:nth-child(1){
width:20%;
}
&:nth-child(2){
width:20%;
}
&:nth-child(3){
width:10%;
}
&:nth-child(4){
width:20%;
}
&:nth-child(5){
width:10%;
}
&:nth-child(6){
width:20%;
}
}
}
}
}
table {
......
src/app/home/dashboard/dashboard.component.ts
......@@ -20,28 +20,31 @@ declare const google: any;
export class DashboardComponent implements OnInit {
tab: any;
loader: boolean;
carModel: any;
imageUrl: any;
user_name: string;
vehDetails: any;
testMilage: any = '';
errMessage: any;
modelDates: number[] = new Array();
monthArray: any[] = new Array(12);
editProfile;
loginDetails: any;
selectedFile: File;
profile_image: any;
mechCustQuote: number[] = new Array();
confirmParam: string = '';
confirmCallBak: string = '';
cfautocomplete: any;
searchLocError: boolean;
bookingDetails: any;
successBookDtls: any;
profileEditResp: any;
autocompleteVin: any;
carSearchJsonData: any;
autocompleteDetails: any;
editProfileSubmitClick: boolean;
optionalDescription: string;
cfautocomplete: any;
carModel: any;
modelDates: number[] = new Array();
monthArray: any[] = new Array(12);
carSearchJsonData: any;
editProfileSubmitClick: boolean;
vehicleVinAddForm;
vehicleVinFormSubmitClick;
......@@ -90,6 +93,7 @@ export class DashboardComponent implements OnInit {
//minRoute:any;
@ViewChild("closeWizard") public closeWizardRef: ElementRef;
@ViewChild("confirmModal") public confirmModalRef: ElementRef;
@ViewChild("googleLocVin") public googleLocVinRef: ElementRef;
@ViewChild("goTostep1") public goTostep1Ref: ElementRef;
@ViewChild("step2nextBtn") public step2nextRef: ElementRef;
......@@ -206,7 +210,7 @@ export class DashboardComponent implements OnInit {
this.webService.post_data('getCustBookDetails', {'customer_id':this.loginDetails.customer_id}).subscribe(response => {
if ( response.status == '1' && response.bookData != 'undefined' && response.bookData != undefined && response.bookData != 'null' && response.bookData != null ) {
let bookings = response.bookData;
console.log(bookings)
let successBooking: any[] = new Array();
let bookingDetails: any[] = new Array();
......@@ -460,19 +464,9 @@ export class DashboardComponent implements OnInit {
});
}
cancelBooking(bookingId){
this.loader = true;
this.webService.post_data('cancelBooking', {'customer_id':this.loginDetails.customer_id,'booking_id':bookingId}).subscribe(response => {
if ( response.status == '1' ) {
this.getCustBookDetails();
this.loader = false;
}
});
}
deleteCustomerCar(customer_id,customer_veh_id){
deleteCustomerCar(params){
this.loader = true;
this.webService.post_data('deleteCustomerCar', {'customer_id':customer_id,'customer_veh_id':customer_veh_id}).subscribe(response => {
this.webService.post_data('deleteCustomerCar', params).subscribe(response => {
if ( response.status == '1' ) {
this.getCustVehDetails();
this.loader = false;
......@@ -791,6 +785,100 @@ export class DashboardComponent implements OnInit {
this.optionalDescription = '';
}
showCustQuote(booking_id,mechanic_id,type){
if(!booking_id || !mechanic_id){
return false;
}
this.loader = true;
const thisObj= this;
if(type == '2'){
thisObj.successBookDtls = this.bookingDetails;
}
thisObj.successBookDtls.forEach(function (data,index) {
if(data.booking_id == booking_id){
// let bookdata = data;
data.mechanic_data.forEach(function (mechdata,mechindex) {
if(mechdata.mechanic_id == mechanic_id){
let mechdatadetails = mechdata;
thisObj.mechCustQuote = mechdatadetails.custom_service_quote;
}
})
}
});
this.loader = false;
}
cancelBooking(booking: any){
let bookingId: number;
if(!booking.bookingId){
return false;
}
bookingId = booking.bookingId;
this.loader = true;
this.webService.post_data('cancelBooking', {'customer_id':this.loginDetails.customer_id,'booking_id':bookingId}).subscribe(response => {
if ( response.status == '1' ) {
this.getCustBookDetails();
this.loader = false;
}
});
}
mechanicQuoteAccept(booking_id,mechanic_id){
if(!booking_id || !mechanic_id){
return false;
}
this.showConfirmPopUp('acceptQuote',{bookingId:booking_id,mechanicId:mechanic_id});
}
cnfCancelBook(booking_id){
if(!booking_id){
return false;
}
this.showConfirmPopUp('cancelBooking',{bookingId:booking_id});
}
cnfdeleteCustomerCar(customer_id,vehicle_id){
if(!customer_id || !vehicle_id){
return false;
}
this.showConfirmPopUp('deleteCustomerCar',{'customer_id':customer_id,'customer_veh_id':vehicle_id});
}
showConfirmPopUp(fn_name: string, param: any){
if(fn_name === ''){
return false;
}
if(param){
param = JSON.stringify(param);
}
this.confirmParam = param;
this.confirmCallBak = fn_name;
this.confirmModalRef.nativeElement.click();
}
confirmCallBack(fn_name: string,param: string){
if(fn_name === '' || !this[fn_name]){
return false;
}
if(param !== ''){
param = JSON.parse(param);
this[fn_name](param);
} else {
this[fn_name]();
}
}
acceptQuote(param: any){
this.webService.post_data('acceptMechanicQuote',param).subscribe(response => {
if(response.status == 'success'){
this.getCustBookDetails();
}
})
}
scrollToTop(id){
$('#'+id).stop().animate({scrollTop: 0}, 800);
}
......
src/styles.scss
......@@ -205,6 +205,10 @@ body {
background: #D94350;
}
.background_transparent{
background-color: transparent !important;
}
.tile {
box-shadow: none !important;
}
......@@ -601,4 +605,15 @@ bs-datepicker-container{
}
}
.confirm_modal_content{
width: 300px;
background: #fff;
border-radius: 10px;
margin: 0 auto;
padding: 15px;
button{
margin:5px;
}
}
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