dc

.vscode/launch.json

-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Launch Program",
-            "program": "${workspaceFolder}\\serve",
-            "preLaunchTask": "tsc: build - tsconfig.json",
-            "outFiles": [
-                "${workspaceFolder}/dist/out-tsc/**/*.js"
-            ]
-        }
-    ]
-}
\ No newline at end of file

src/app/footer/footer.component.html

@@ -36,10 +36,10 @@
                 <h5>DISCOVER</h5>
                 <ul>
                     <li>
-                        <a>How it works</a>
+                        <a (click)="howitwrks()">How it works</a>
                     </li>
                     <li>
-                        <a>Sign Up</a>
+                        <a (click)="signUp()">Sign Up</a>
                     </li>
                     <li>
                         <a>Guarantee</a>
@@ -75,6 +75,7 @@
                     </li>
                 </ul>
             </div>
+            <input type="hidden" #indexLoginModal data-toggle="modal" data-target="#login">
             <div class="col-md-2">
                 <h5>DOWNLOAD NOW</h5>
                 <div class="appstore">

src/app/footer/footer.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit , ViewChild, ElementRef } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
+import { WebService } from './../provider/web.service';
 
 @Component({
   selector: 'app-footer',
@@ -8,18 +9,39 @@ import { Router,ActivatedRoute } from '@angular/router';
 })
 export class FooterComponent implements OnInit {
 
+  loginDetails:any;
+
+  @ViewChild("indexLoginModal") loginModalRef: ElementRef;
   constructor(
     private router        : Router, 
-    private route         : ActivatedRoute
+    private route         : ActivatedRoute,
+    public webService     : WebService,
   ) { }
 
   ngOnInit() {
+    this.checkUserLogin();
   }
 
   
+  checkUserLogin(){
+    this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+  }
+
   goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
+    this.router.navigate([path],{queryParams:  data});
     document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
   }
   
+  signUp(){
+    if(!this.loginDetails){
+      this.loginModalRef.nativeElement.click();
+      return false;
+    }
+  }
+
+  howitwrks(){
+    this.goToPage('index',{"tab":"1"});
+  }
+
+
 }

src/app/home/dashboard/dashboard.component.scss

@@ -639,13 +639,13 @@
                             border: 1px solid #1e1e1e;
                             height: 40px;
                             padding-left: 15px;
-                            font-size: 16px;
+                            font-size: 13px;
                         }
                         .vehicle_input_select {
                             width: 100%;
                             border: 1px solid #1e1e1e;
                             background: url("/assets/images/asset_down_arrow.png");
-                            font-size: 16px;
+                            font-size: 13px;
                             cursor: pointer;
                             background-position: right 10px top 10px;
                             background-repeat: no-repeat;
@@ -1663,3 +1663,8 @@
             }
 
 
+            .noti_slash{
+                width:55px;
+            }
+
+            
\ No newline at end of file

src/app/home/dashboard/dashboard.component.ts

@@ -49,6 +49,7 @@ export class DashboardComponent implements OnInit {
   autocompleteDetails: any;
   optionalDescription: string;
   editProfileSubmitClick: boolean;
+  remainders: any;
   
   vehicleVinAddForm;
   vehicleVinFormSubmitClick;
@@ -92,6 +93,11 @@ export class DashboardComponent implements OnInit {
   scheduleMechanic: any;
   optionalImges: any = new Array({1:false,2:false,3:false,4:false});
   
+  vehiYear:any;
+  vehiBrand:any;
+  vehiModel:any;
+  carTrim:any;
+
   imageDisp1: any;
   imageDisp2: any;
   imageDisp3: any;
@@ -110,6 +116,8 @@ export class DashboardComponent implements OnInit {
   @ViewChild("googleLocDetails") public googleLocDetailsRef: ElementRef;
   @ViewChild("newGoogleLocSearch") public newGoogleLocRef: ElementRef;
   @ViewChild("appointmentTab") public appointmentTabRef: ElementRef;
+  @ViewChild("vehicleTab") public vehicleTabRef: ElementRef;
+  @ViewChild("reminderTab") public reminderTabRef: ElementRef;
   @ViewChild("serviceHistoryTab") public serviceHistoryTabRef: ElementRef;
   @ViewChild("closeVehicleAddForm") public closeVehicleAddFormRef: ElementRef;
   
@@ -145,10 +153,12 @@ export class DashboardComponent implements OnInit {
     ngOnInit() {
       this.currentTime = this.today.getTime();
       this.currentDate = this.today.getDate();
+      
       this.tab = 'active';
       this.route.queryParams.subscribe(params => {
         let payStatus = params['status'];
         let activeTab = params['tab'];
+        let vehTab = params['redrct_tab'];
         
         if(payStatus && payStatus !=''){
           if(payStatus == 'success')
@@ -165,6 +175,15 @@ export class DashboardComponent implements OnInit {
             this.appointmentTabRef.nativeElement.click();
           }
         }
+
+        if(vehTab && vehTab !=''){
+          if(vehTab == 'vehicle'){
+            this.vehicleTabRef.nativeElement.click();
+          }
+          if(vehTab == 'reminder'){
+            this.reminderTabRef.nativeElement.click();
+          }
+        }
       });
       
       this.vehicleVinAddForm = new FormGroup({
@@ -176,11 +195,14 @@ export class DashboardComponent implements OnInit {
         maker: new FormControl('', [Validators.required]), 
         location: new FormControl('', [Validators.required]), 
         modelYear: new FormControl('', [Validators.required]), 
-        modelName: new FormControl('', [Validators.required])
+        modelName: new FormControl('', [Validators.required]),
+        engine: new FormControl(''),
+        trim: new FormControl(''),
+        last_date: new FormControl(''),
+        maintanence_interval: new FormControl('')
       });
       
       this.getVehicleBrand();
-      
       this.subjectService.getLoginData().subscribe(loginData => {
         this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
         
@@ -197,6 +219,7 @@ export class DashboardComponent implements OnInit {
           });
           this.getCustVehDetails();
           this.getCustBookDetails();
+          this.getCustRemainders();
         } else {
           this.router.navigate(['index']);
         }
@@ -236,7 +259,23 @@ export class DashboardComponent implements OnInit {
       });
     }
     
+    get_vehiYear(year){
+      if(year == ''){
+        return;
+      }
+      this.carTrim = this.carModel = [];
+      this.vehiYear = year;
+      if(this.vehiBrand){
+        this.get_model(this.vehiBrand);
+      }
+    }
+
     get_model(brand_id) {
+      this.vehiBrand = brand_id;
+      if(!this.vehiYear){
+        return false;
+      }
+      this.carTrim = this.carModel = [];
       this.loader = true;
       const thisObj = this;
       thisObj.carBrands.forEach(function (brandData,index) {
@@ -245,7 +284,7 @@ export class DashboardComponent implements OnInit {
         }
       });
 
-      this.webService.post_data('getVehicleModel',{'vehBrand_id':brand_id}).subscribe(response => { 
+      this.webService.post_data('getVehicleModel',{'vehBrand_id':brand_id,'type':0,'vehiYear':this.vehiYear}).subscribe(response => { 
         if(response.status == 'success'){
           this.carModel = response.data;
         }
@@ -253,6 +292,27 @@ export class DashboardComponent implements OnInit {
       });
     }
     
+    get_trims(event){
+      const model = event.target.options[event.target.selectedIndex].getAttribute('modelValue');
+      this.loader = true;
+      this.webService.post_data('getVehicleTrim',{'vehBrand_id':this.vehiBrand,'vehiYear':this.vehiYear,'vehiModel':model}).subscribe(response => { 
+        if(response.status == 'success'){
+          this.carTrim = response.data;
+        }
+        this.loader = false;
+      });
+    }
+
+    getCustRemainders(){
+      this.webService.post_data('getCustRemainders',{'customer_id':this.loginDetails.customer_id}).subscribe(response => { 
+        if(response.status == 'success'){
+          this.remainders = response.data;
+        }else{
+          this.remainders = false;
+        }
+      });
+    }
+    
     getCustBookDetails(){
       this.loader = true;
       this.webService.post_data('getCustBookDetails', {'customer_id':this.loginDetails.customer_id}).subscribe(response => {
@@ -297,6 +357,16 @@ export class DashboardComponent implements OnInit {
       });
     }
 
+    changeReminder(custVehId,status){
+      this.loader = true;
+      this.webService.post_data('changeReminderStatus', {'customer_veh_id':custVehId,'status':status}).subscribe(response => {
+        if ( response.status == 'success') {
+          this.getCustVehDetails();
+        }
+        this.loader = false;
+      });
+    }
+    
     setIssueSelected(event){
       let issue_id = event.target.attributes.issue_id.value;
       let sub_issue_id = event.target.attributes.sub_issue_id.value;
@@ -488,6 +558,8 @@ export class DashboardComponent implements OnInit {
       }
       
       addCustomerCar(type,vehicleData,location){
+        vehicleData['lastMaintanceDate'] = (vehicleData['last_date'])?(formatDate(vehicleData['last_date'],'MM/dd/yyyy','en')):'';
+
         this.loader = true;
         let postData = {'type':type,'customer_id':this.loginDetails.customer_id,'vehicleData':vehicleData,'location':location};
         
@@ -517,6 +589,16 @@ export class DashboardComponent implements OnInit {
         });
       }
 
+      changeVehicleReminder(params){
+        this.loader = true;
+        this.webService.post_data('changeReminderStatus', params).subscribe(response => {
+          if ( response.status == 'success' ) {
+            this.getCustRemainders();
+          }
+          this.loader = false;
+        });
+      }
+      
       optImgUpload(image_id,event){
         let reader = new FileReader();
         let optionalImg: any = event.target.files[0];
@@ -552,7 +634,7 @@ export class DashboardComponent implements OnInit {
       resetVehicleForm(){
         this.vehicleVinAddForm.reset();
         this.vehicleDetailsAddForm.reset({
-          maker: '', modelYear: '', modelName: '', location: ''
+          maker: '', modelYear: '', modelName: '', location: '', last_date: '', maintanence_interval: '',engine: '',trim: ''
         });
       }
       
@@ -689,7 +771,6 @@ getQuote(){
   this.webService.post_data('getNearByMechanics',searchData).subscribe(response => {
     if(response.status == '1'){
       this.mechanicData = response.mechanic_data;
-      console.log(this.mechanicData)
       this.dateSection.push(new Date(this.today.setDate(this.today.getDate())));
       this.dateSection.push(new Date(this.today.setDate(this.today.getDate() + 1)));
       
@@ -884,6 +965,10 @@ cancelBooking(booking: any){
   });
 }
 
+purchase(carId){
+  this.goToPage('productlist',{'car_id':carId})
+}
+
 mechanicQuoteAccept(event,booking_id,mechanic_id){
   if(!booking_id || !mechanic_id){
     return false;
@@ -907,6 +992,13 @@ cnfdeleteCustomerCar(customer_id,vehicle_id){
   this.showConfirmPopUp('deleteCustomerCar',{'customer_id':customer_id,'customer_veh_id':vehicle_id});
 }
 
+cnfdeleteVehReminder(customer_veh_id,status){
+  if(!customer_veh_id){
+    return false;
+  }
+  this.showConfirmPopUp('changeVehicleReminder',{'customer_veh_id':customer_veh_id,'status':status});
+}
+
 showConfirmPopUp(fn_name: string, param: any){
   if(fn_name === ''){
     return false;
@@ -955,6 +1047,11 @@ checkboxChange(index,mechanic_id,event,estimate){
   }
 }
 
+goToPage(path,data=null){
+  this.router.navigate([path],{queryParams:  data});
+  document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
+}
+
 scrollToTop(id){
   $('#'+id).stop().animate({scrollTop: 0}, 800);
 }

src/app/home/index/index.component.html

@@ -15,6 +15,7 @@
             </div>
         </div>
     </section>
+    <section #targetwrk><div style="height:35px;opacity:0;"></div></section>
     <section class="how_it_works">
         <h3>HOW IT WORKS</h3>
         <hr>
@@ -63,7 +64,7 @@
                     <img src="assets/images/asset_icon4.png">
                     <h4>Diagnosis Trouble Codes</h4>
                     <p>Find out what your code really means and what you can expect to pay.</p>
-                    <button class="learn_more">
+                    <button class="learn_more" (click)="diagnseCde()">
                         GO
                     </button>
                 </div>
@@ -72,7 +73,7 @@
                     <img src="assets/images/asset_icon5.png">
                     <h4>Parts and Replacement</h4>
                     <p>Review causes, symptoms, and estimate repair costs.</p>
-                    <button class="learn_more">
+                    <button class="learn_more" (click)="goToPage('purchaseHome')">
                         GO
                     </button>
                 </div>
@@ -81,7 +82,7 @@
                     <img src="assets/images/asset_icon6.png">
                     <h4>Maintenance Schedules</h4>
                     <p>Need to schedule a maintenance check? You’re in the right place.</p>
-                    <button class="learn_more">
+                    <button class="learn_more" (click)="maintnceSchule()">
                         GO
                     </button>
                 </div>
@@ -257,7 +258,7 @@
                                         <h3>VEHICLE INFORMATION</h3>
                                         <div class="row">
                                             <div class="col-md-6">
-                                                <select formControlName="modelYear" [ngClass]="{'input_error': !vehicleDataForm.controls['modelYear'].valid && vehicleDataFormSubmit}">
+                                                <select formControlName="modelYear" (change)="get_vehiYear($event.target.value)" [ngClass]="{'input_error': (!vehicleDataForm.controls['modelYear'].valid && vehicleDataForm.controls['maker'].valid) || (!vehicleDataForm.controls['modelYear'].valid && vehicleDataFormSubmit)}">
                                                     <option value="" class="hide">YEAR</option>
                                                     <option *ngFor="let date of modelDates">{{date}}</option>
                                                 </select>
@@ -271,13 +272,16 @@
                                         </div>
                                         <div class="row">
                                             <div class="col-md-6">
-                                                <select formControlName="modelName" [ngClass]="{'input_error': !vehicleDataForm.controls['modelName'].valid && vehicleDataFormSubmit}">
+                                                <select *ngIf="carModel && carModel.length > 0"  (change)="get_trims($event.target.value)" formControlName="modelName" [ngClass]="{'input_error': !vehicleDataForm.controls['modelName'].valid && vehicleDataFormSubmit}">
                                                     <option value="" class="hide">MODEL</option>
-                                                    <option *ngFor="let car_models of carModel">{{car_models.model}}</option>
+                                                    <option *ngFor="let car_models of carModel" value="{{car_models.veh_model_id}}">{{car_models.model}}</option>
                                                 </select>
                                             </div>
                                             <div class="col-md-6">
-                                                <input formControlName="milage" placeholder="APPROX VEHICLE MILEAGE" type="">
+                                                <select *ngIf="carTrim && carTrim.length > 0" formControlName="trim" [ngClass]="{'input_error': !vehicleDataForm.controls['modelName'].valid && vehicleDataFormSubmit}">
+                                                    <option value="" class="hide">TRIM</option>
+                                                    <option *ngFor="let car_trim of carTrim">{{car_trim.trim}}</option>
+                                                </select>
                                             </div>
                                         </div>
                                         <h6 class="textLeft pb10">OPTIONAL</h6>
@@ -286,7 +290,7 @@
                                                 <input formControlName="emgine" placeholder="ENGINE" type="">
                                             </div>
                                             <div class="col-md-6">
-                                                <input formControlName="trim" placeholder="TRIM" type="">
+                                                <input formControlName="milage" placeholder="APPROX VEHICLE MILEAGE" type="">
                                             </div>
                                         </div>
                                         <div class="row">
@@ -601,14 +605,14 @@
                                                             <span *ngFor="let time of mechanic.scheduleTiming">
                                                                 <li *ngIf="(time > currentTime && ((dateSection[0] | date: 'dd') == currentDate))" id="custom_check_button">
                                                                     <label>
-                                                                        <input type="radio" name="scheduleTime" (click)="getSchedule(time,'0'); 
+                                                                        <input type="radio" value="{{time | date:'hh:mm a'}}" name="scheduleTime" (click)="getSchedule($event.target.value,'0'); 
                                                                         scheduleDateInit = true; scheduleMechanic = mechanic.mechanic_id"> 
                                                                         <p>{{time | date:'hh:mm a'}}</p>
                                                                     </label>
                                                                 </li>
                                                                 <li *ngIf="((dateSection[0] | date: 'dd') != currentDate)" id="custom_check_button">
                                                                     <label>
-                                                                        <input type="radio" name="scheduleTime" (click)="getSchedule(time,'0'); 
+                                                                        <input type="radio" value="{{time | date:'hh:mm a'}}" name="scheduleTime" (click)="getSchedule($event.target.value,'0'); 
                                                                         scheduleDateInit = true; scheduleMechanic = mechanic.mechanic_id"> 
                                                                         <p>{{time | date:'hh:mm a'}}</p>
                                                                     </label>
@@ -618,7 +622,7 @@
                                                         <ul id="scroll_1_{{i}}">
                                                             <li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
                                                                 <label>
-                                                                    <input type="radio" name="scheduleTime" (click)="getSchedule(time,'1'); 
+                                                                    <input type="radio" value="{{time | date:'hh:mm a'}}" name="scheduleTime" (click)="getSchedule($event.target.value,'1'); 
                                                                     scheduleDateInit = true; scheduleMechanic = mechanic.mechanic_id">  
                                                                     <p>{{time | date:'hh:mm a'}}</p>
                                                                 </label>

src/app/home/index/index.component.ts

@@ -36,6 +36,10 @@ export class IndexComponent implements OnInit {
   
   autocomplete: any;
   cfautocomplete: any;
+  vehiYear:any;
+  vehiBrand:any;
+  vehiModel:any;
+  carTrim:any;
   searchLocError: boolean;
   addresssearchLocError: boolean;
   @ViewChild("goTostep0") public goTostep0Ref: ElementRef;
@@ -47,6 +51,7 @@ export class IndexComponent implements OnInit {
   @ViewChild("addressLocSearch") public addressElementRef: ElementRef;
   @ViewChild("indexLoginModal") loginModalRef: ElementRef;
   @ViewChild("closeQuoteWizard") closeQuoteWizardRef: ElementRef;
+  @ViewChild('targetwrk') public targetEl: ElementRef;
   
   //Vehicle Details: TAB 2
   vehicleDataForm;
@@ -72,6 +77,7 @@ export class IndexComponent implements OnInit {
   mechanics: string = ''; 
   dateSection: any[] = new Array();
   selMechanics: any[] = new Array();
+  selectedElement: any = new Array();
   imageServer: string;
   mechanicData: any;
   autoSchedule: boolean;
@@ -93,22 +99,34 @@ export class IndexComponent implements OnInit {
     public ngZone         : NgZone,
     public webService     : WebService,
     public mapsAPILoader  : MapsAPILoader,
+    private route         : ActivatedRoute,
     public subjectService : SubjectService) { 
       this.step                  = 0;
-      this.issuesData       = false;
-      this.autoSchedule     = false;
-      this.imageServer      = ImageStorage;
       this.currDate              = new Date();
       this.nextDate              = new Date();
+      this.issuesData            = false;
+      this.imageServer           = ImageStorage;
       this.loginDetails          = false;
-      this.searchLocError   = false;
-      this.addresssearchLocError   = false;
+      this.autoSchedule          = false;
       this.showLeftArrow         = false;
+      this.searchLocError        = false;
       this.showRightArrow        = true;
       this.scheduleDateInit      = false;
       this.scheduleMechanic      = false;
       this.optionalDescription   = '';
       this.vehicleDataFormSubmit = false;
+      this.addresssearchLocError = false;
+
+      this.route.params.subscribe(val => {
+        this.route.queryParams.subscribe(params => {
+          if(params['tab'] == '1'){
+            setTimeout( () => {
+              this.targetEl.nativeElement.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
+              this.router.navigate(['.'],{relativeTo:this.route,queryParams:{}});
+            },400);
+          }
+        })
+      });
     }
 
     ngOnInit() {
@@ -167,7 +185,23 @@ export class IndexComponent implements OnInit {
       });
     }
 
+    get_vehiYear(year){
+      if(year == ''){
+        return;
+      }
+      this.carTrim = this.carModel = [];
+      this.vehiYear = year;
+      if(this.vehiBrand){
+        this.get_model(this.vehiBrand);
+      }
+    }
+
     get_model(brand_id) {
+      this.vehiBrand = brand_id;
+      if(!this.vehiYear){
+        return false;
+      }
+      this.carTrim = this.carModel = [];
       this.loader = true;
       const thisObj = this;
       thisObj.carBrands.forEach(function (brandData,index) {
@@ -176,7 +210,7 @@ export class IndexComponent implements OnInit {
         }
       });
 
-      this.webService.post_data('getVehicleModel',{'vehBrand_id':brand_id}).subscribe(response => { 
+      this.webService.post_data('getVehicleModel',{'vehBrand_id':brand_id,'vehiYear':this.vehiYear}).subscribe(response => { 
         if(response.status == 'success'){
           this.carModel = response.data;
         }
@@ -184,6 +218,16 @@ export class IndexComponent implements OnInit {
       });
     }
 
+    get_trims(model){
+      this.loader = true;
+      this.webService.post_data('getVehicleTrim',{'vehBrand_id':this.vehiBrand,'vehiYear':this.vehiYear,'vehiModel':model}).subscribe(response => { 
+        if(response.status == 'success'){
+          this.carTrim = response.data;
+        }
+        this.loader = false;
+      });
+    }
+    
     getVehicleLoc(lastLoc){
       if(lastLoc == ''){
         this.searchLocError = true;
@@ -229,6 +273,19 @@ export class IndexComponent implements OnInit {
   this.vehicleDataFormSubmit = false;
 }
 
+maintnceSchule(){
+  this.goToPage('dashboard',{"redrct_tab":"reminder"});
+}
+
+diagnseCde(){
+  this.goToPage('dashboard',{"redrct_tab":"vehicle"});
+}
+
+goToPage(path,data=null){
+  this.router.navigate([path],{queryParams:  data});
+  document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
+}
+
 getIssueData(){
   const This = this;
   this.loader = true;

src/app/navbar/navbar.component.html

@@ -31,7 +31,7 @@
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" (click)="goToPage('purchaseHome')">
-                        PURCHASE
+                        PURCHASE PARTS AND ACCESSORIES
                     </a>
                 </li>
                 <li class="nav-item">
@@ -40,24 +40,31 @@
                             CAR OWNERS
                         </div>
                         <div class="dropdown-menu">
-                            <a class="dropdown-item" *ngIf="loginDetails" (click)="goToPage('dashboard')">My Dashboard</a>
-                            <a class="dropdown-item" (click)="goToPage('purchaseHome')">Find parts and accessories</a>
+                            <div class="inner_drop">
+                                    <div class="arrow-up"></div>
                                     <a class="dropdown-item">Rewards</a>
                                     <a class="dropdown-item">Messages</a>
-                            <a class="dropdown-item">Request a Service </a>
-                            <a class="dropdown-item">Repair/Maintenance Service reminder</a>
-                            <a class="dropdown-item">Road Service </a>
+                                    <a class="dropdown-item" (click)="requestSrvce()">Request a Service </a>
+                                    <a class="dropdown-item" (click)="goToPage('getapp')">Emergency / Road Assistance Services</a>
+                                    <a class="dropdown-item" (click)="howitwrks()">How it works</a>
+                            </div>
                         </div>
                     </a>
                 </li>
-                <li class="nav-item" data-toggle="modal" data-target="#serviceprovider">
-                    <a class="nav-link base_arrow">
-                            AUTO SERVICE PROVIDER
-                    </a>
-                </li>
+                <!-- <li class="nav-item" data-toggle="modal" data-target="#serviceprovider"> -->
                 <li class="nav-item">
-                        <a class="nav-link" (click)="goToPage('getapp')">
-                            GET THE APP
+                    <a class="nav-link base_arrow dropdown" data-toggle="dropdown">
+                        <div class="dropdown-toggle">
+                            AUTO SERVICE PROVIDER
+                        </div>
+                        <div class="dropdown-menu">
+                            <div class="inner_drop">
+                                <div class="arrow-up"></div>
+                                <a class="dropdown-item" (click)="providerSignIn()">Sign In</a>
+                                <a class="dropdown-item" (click)="providerSignUp()">Sign Up</a>
+                                <a class="dropdown-item">Benefit</a>
+                            </div>
+                        </div>
                     </a>
                 </li>
                 <li class="nav-item" *ngIf="!loginDetails">
@@ -83,8 +90,11 @@
                             <div class="clear"></div>
                         </div>
                         <div class="dropdown-menu">
+                                <div class="inner_drop" style="top:20px;">
+                                        <div class="arrow-up"></div>
                             <a class="dropdown-item" (click)="logout()">Logout</a>
                             </div>
+                        </div>
                     </a>
                 </li>
             </ul>
@@ -355,7 +365,6 @@
 
 
 <!-- SERVICE-PROVIDER-MODAL-STARTS-->
-
 <div class="modal" id="serviceprovider" style="z-index: 99999 !important;">
     <div class="modal-dialog modal-full">
         <div class="modal-content login_modal_wrapper"  malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
@@ -431,8 +440,11 @@
                                 <strong>{{spSignupResponse.message}}<br></strong>
                             </div>
                             <div class="row">
-                                <div class="col-md-12">
-                                    <button type="submit" class="log_btn" (click)="spSignupSubmitClick = true">Submit</button>
+                                <div class="col-md-6">
+                                    <button class="log_btn" (click)="providerSignIn()">Sign In</button>
+                                </div>
+                                <div class="col-md-6">
+                                        <button type="submit" class="log_btn" (click)="spSignupSubmitClick = true">Sign Up</button>
                                     </div>
                             </div>
                         </div>

src/app/navbar/navbar.component.scss

@@ -14,21 +14,22 @@
         max-width: calc(100% - 10%);
         .navbar-brand {
             img {
-                width: 180px;
+                width: 140px;
             }
         }
         .navbar-nav {
             li {
-                margin-right: 30px;
+                margin-right:20px;
                 a {
                     color: #fff;
                     position: relative;
-                    top: 5px;
+                    top: 10px;
+                    font-size: 13px;
                     .dropdown-menu {
                         a {
                             top: 0px;
-                            padding-top: 5px;
-                            padding-bottom: 5px;
+                            padding-top: 8px;
+                            padding-bottom: 8px;
                         }
                     }
                 }
@@ -74,12 +75,31 @@
                     border: none;
                     margin: 0px;
                     padding: 0px;
+                    background: transparent;
+
+                    .inner_drop{
                         border-radius: 0px;
                     -webkit-border-radius: 0px;
                     -moz-border-radius: 0px;
                     -ms-border-radius: 0px;
                     -o-border-radius: 0px;
                     background: #2655bf;
+                    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
+                    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
+                    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
+                    position: relative;
+    top: 40px;
+    .arrow-up {
+        width: 0;
+        height: 0;
+        border-left: 15px solid transparent;
+        border-right: 15px solid transparent;
+        border-bottom: 15px solid #2655bf;
+        position: absolute;
+        left: 20px;
+        top: -15px;
+      }
+                    }
                     cursor: pointer;
                     a {
                         &:hover {
@@ -224,6 +244,7 @@
                 -ms-border-radius:10px;
                 -o-border-radius: 10px;
                 text-align: center;
+                padding-left: 20px;
                 option{
                     text-align: center;
                 }

src/app/navbar/navbar.component.ts

@@ -64,9 +64,9 @@ export class NavbarComponent implements OnInit {
   ngOnInit() {
     this.subjectService.getLoginData().subscribe(loginData => {
       this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
-      if(!this.loginDetails){
-        this.facebookSignUp();
-      }
+      // if(!this.loginDetails){
+      //   this.facebookSignUp();
+      // }
     });
 
     this.getMechanicShops();
@@ -103,6 +103,9 @@ export class NavbarComponent implements OnInit {
 
   signInWithFB(): void {
     this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
+    if(!this.loginDetails){
+      this.facebookSignUp();
+    }
   } 
 
   signOut(): void {
@@ -112,6 +115,7 @@ export class NavbarComponent implements OnInit {
   facebookSignUp(){
     const This = this;
     this.authService.authState.subscribe((user) => {
+      if(user && user != null && user != undefined){
         this.user = user;
         let data: any = new Array();
         data = {'first_name':this.user.firstName,'last_name':this.user.lastName,'email':this.user.email,'image_url':this.user.photoUrl};
@@ -135,6 +139,7 @@ export class NavbarComponent implements OnInit {
             }, 2000)
           });
         }
+      }
     });
   }
 
@@ -143,6 +148,14 @@ export class NavbarComponent implements OnInit {
     this.signupModal.nativeElement.click();
   }
 
+  providerSignIn(){
+    window.open('https://carfixxers.com/admin/Login','_blank');
+  }
+
+  providerSignUp(){
+    $("#serviceprovider").modal('show');
+  }
+
   getMechanicShops(){
     this.loader = true;
     this.webService.get_data('getMechanicShops').subscribe(response => {
@@ -303,8 +316,17 @@ export class NavbarComponent implements OnInit {
       else sticky.removeClass('scrolled_navbar');
     });
   }
+
+  requestSrvce(){
+    this.goToPage('dashboard',{"redrct_tab":"vehicle"});
+  }
+
+  howitwrks(){
+    this.goToPage('index',{"tab":"1"});
+  }
+
   goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
+    this.router.navigate([path],{queryParams:  data});
     document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
   }
   
@@ -313,7 +335,6 @@ export class NavbarComponent implements OnInit {
     const userData = this.webService.getLocalStorageItem('userData');
     this.webService.removeLocalStorageItem(userData);
     this.subjectService.sendLoginData(false);
-    this.router.navigate(['../index']);
   }
 
 

src/app/purchase/cart/cart.component.ts

@@ -167,15 +167,15 @@ export class CartComponent implements OnInit {
     if(cartId <= 0 || product_id <= 0 || total_amount <= 0 || quantity <= 0 || amount <= 0){
       return false;
     }
-    this.loader = true;
-    this.webService.post_data('removeCartPrdt',{'cart_id':cartId}).subscribe(response => {
-      if(response.status == 'success'){
-        this.product_data = {amount:amount,product_id:product_id,quantity:quantity,total_amount:total_amount};
+    //this.loader = true;
+   // this.webService.post_data('removeCartPrdt',{'cart_id':cartId}).subscribe(response => {
+     // if(response.status == 'success'){
+        this.product_data = {amount:amount,product_id:product_id,quantity:quantity,total_amount:total_amount,cart_id:cartId};
         this.webService.setLocalStorageItem('productDetails', JSON.stringify(this.product_data));
         this.goToPage('address','');
-      }
-      this.loader = false;
-    });
+     // }
+     // this.loader = false;
+    //});
   }
 
   goToPage(path,data=null){

src/app/purchase/orders/orders.component.html

@@ -26,6 +26,8 @@
               <div class="col-md-6">
                 <div class="price_details">
                   <h5>$ {{book.amount}}</h5>
+                  <h5 *ngIf="( book.status == '1')"> <button class="btn btn-warning btn-sm">Payment Processing</button></h5>
+                  <h5 *ngIf="( book.status == '8') || ( book.status == '9')"> <button class="btn btn-danger btn-sm">{{book.status == '8' ? 'Order Deleted': 'Payment Failed'}}</button></h5>
                   <h4 *ngIf="( book.status == '2' || book.status == '3' || book.status == '4')">{{book.expected_delivery == null || book.expected_delivery == '' ? 'Your Expected Delivery date will Update soon': 'Delivery expected by '+ (book.expected_delivery | date: "EEE, MMMM dd, yyyy") }}<br>
                     <div *ngIf="book.status == '2'">Your Order is Placed</div>
                     <div *ngIf="book.status == '3'">Your item is Packed</div>
@@ -55,7 +57,7 @@
       </div>
   </div>
   <div class="bottom_product_list">
-    <!-- <h4>Audi Q7 <span>( Similar Results )</span></h4> -->
+    <h4>Trending Products</h4>
     <div class="loader_overlay" *ngIf="trend_loader"></div>
     <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()"  *ngIf="trendingProductData">
       <ngx-tile NgxCarouselItem *ngFor="let prdt of trendingProductData">

src/app/purchase/productdetails/productdetails.component.html

@@ -110,6 +110,7 @@
     </div>
   </div>
   <div class="bottom_product_list">
+    <h4>Trending Products</h4>
     <div class="loader_overlay" *ngIf="loader2"></div>
     <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()" *ngIf="trendingProductData">
       <ngx-tile NgxCarouselItem *ngFor="let prdt of trendingProductData" >

src/app/purchase/productdetails/productdetails.component.scss

@@ -254,6 +254,16 @@
     .bottom_product_list{
         background: #fff;
         position: relative;
+        h4{
+            color: #262626;
+            margin: 0px;
+            padding:15px;
+            font-size: 16px;
+            padding-bottom: 0px;
+            span{
+                color: #92a1b1;
+            }
+        }
         .leftRs{
             position: absolute;
             left:10px;

src/app/purchase/productlist/productlist.component.html

@@ -28,27 +28,33 @@
                 <h6 href="#ac3" data-toggle="collapse">Vehicle Information</h6>
                 <ul id="ac3" class="collapse in show">
                         <h6 class="backgroundNone borderNone">
-                            <select (change)="get_year($event.target.value)">
-                                <option [attr.value]="0" [attr.selected]=true [attr.disabled]="true">Select Year</option>
-                                <option *ngFor="let date of modelDates">{{date}}</option>
+                            <select (change)="get_year($event.target.value)" [ngClass]="{'input_error': errorYear}">
+                                <option [value]="0" [disabled]="true">Select Year</option>
+                                <option *ngFor="let date of modelDates" [selected]="date == carFilter['year']">{{date}}</option>
                             </select>
                         </h6>
                         <h6 class="backgroundNone borderNone">
                             <select (change)="get_model($event.target.value)">
-                                <option [attr.value]="0" [attr.selected]=true [attr.disabled]="true">Select Maker</option>
-                                <option *ngFor="let brands of carBrands" value="{{brands.veh_brand_id}}">
+                                <option [value]="0" [selected]="true" [disabled]="true">Select Maker</option>
+                                <option *ngFor="let brands of carBrands" [selected]="brands.veh_brand_id == carFilter['make']" value="{{brands.veh_brand_id}}">
                                    {{brands.maker}}
                                 </option>
                             </select>
                         </h6>
                         <h6 class="backgroundNone borderNone">
-                            <select (change)="getModelResult($event.target.value)" *ngIf="modelShow">
-                                <option [attr.value]="0" [attr.selected]=true [attr.disabled]="true">Select Model</option>
-                                <option *ngFor="let models of carModel" value="{{models.veh_modal_id}}">
+                            <select (change)="getModelResult($event.target.value)" *ngIf="modelShow && carModel && carModel.length > 0">
+                                <option [value]="0" [selected]="!carFilter['model']?true:false" [disabled]="true">Select Model</option>
+                                <option *ngFor="let models of carModel" [selected]="models.veh_model_id == carFilter['model']" value="{{models.veh_model_id}}">
                                     {{models.model}}
                                 </option>
                             </select>
                         </h6>
+                        <h6 class="backgroundNone borderNone">
+                            <select  (change)="getTrimData($event.target.value)" *ngIf="carTrim && carTrim.length > 0">
+                                <option value="" class="hide">TRIM</option>
+                                <option *ngFor="let car_trim of carTrim" [selected]="car_trim.trim == carFilter['trim']" value="{{car_trim.trim}}">{{car_trim.trim}}</option>
+                            </select>
+                        </h6>
                 </ul>
             </div>
             <div class="purchase_content_section">

src/app/purchase/productlist/productlist.component.ts

@@ -11,6 +11,7 @@ import { ImageStorage } from '../../../environments/server.config';
 })
 export class ProductlistComponent implements OnInit {
   loader: boolean;
+  errorYear: boolean;
   searchKey:string;
   imageServer: any;
   productArray: any[] = new Array();
@@ -25,14 +26,20 @@ export class ProductlistComponent implements OnInit {
   modelDates: number[] = new Array();
   carBrands:any;
   carModel:any;
+  vehiBrand:any;
+  vehiModel:any;
+  vehiYear:any;
+  modelName:any;
   modelShow :boolean;
-
+  carFilter: any = new Array();
+  carTrim:any;
   constructor(
     private router        : Router, 
     private route         : ActivatedRoute,
     public webService     : WebService
   ){ 
     this.loader = true;
+    this.errorYear = false;
     this.modelShow = false;
     this.productArray = [];
     this.filterParam = {"key":'',"brand_id":Array(),"minPrice":'',"maxPrice":'','page':1};
@@ -43,7 +50,14 @@ export class ProductlistComponent implements OnInit {
         this.searchKey = params['key'];
         this.filterParam.key = this.searchKey;
         this.filterParam.page = this.page;
+        if(this.searchKey){
           this.getProductDetails(this.filterParam);
+        }
+
+        if(params['car_id']){
+          this.carFilter['car_id'] = params['car_id'];
+          this.purchaseFilter();
+        }
       });
     });
     if(this.searchKey == ''){
@@ -78,9 +92,16 @@ export class ProductlistComponent implements OnInit {
   }
 
   get_model(brand_id) {
+    this.vehiBrand = brand_id;
+    if(!this.vehiYear){
+      this.errorYear = true;
+      return false;
+    }
+    this.carTrim = this.carModel = [];
     this.page = 1;
     this.loader = true;
-    this.webService.post_data('getVehicleModel',{'vehBrand_id':brand_id}).subscribe(response => { 
+    this.vehiBrand = brand_id;
+    this.webService.post_data('getVehicleModel',{'vehBrand_id':this.vehiBrand,'type':0,'vehiYear':this.filterParam.year}).subscribe(response => { 
       if(response.status == 'success'){
         this.modelShow = true;
         this.carModel = response.data;
@@ -93,9 +114,23 @@ export class ProductlistComponent implements OnInit {
   }
 
   getModelResult(modelId){
+    this.vehiModel = this.filterParam.model = modelId;
+    this.loader = true;
+    this.page = 1;
+    this.filterParam.page = this.page;
+    this.webService.post_data('getVehicleTrim',{'vehBrand_id':this.vehiBrand,'vehiYear':this.vehiYear,'vehiModel':this.vehiModel}).subscribe(response => { 
+      if(response.status == 'success'){
+        this.carTrim = response.data;
+      }
+      this.loader = false;
+    })
+    this.getProductDetails(this.filterParam);
+  }
+
+  getTrimData(trim){
     this.page = 1;
     this.filterParam.page = this.page;
-    this.filterParam.model = modelId;
+    this.filterParam.trim = trim;
     this.getProductDetails(this.filterParam);
   }
 
@@ -173,9 +208,42 @@ export class ProductlistComponent implements OnInit {
   }
 
   get_year(year){
+    this.carModel = this.carTrim = [];
     this.page = 1;
     this.filterParam.page = this.page;
     this.filterParam.year = year;
+    this.vehiYear = year;
+    this.errorYear = false;
     this.getProductDetails(this.filterParam);
+    if(this.vehiBrand){
+      this.get_model(this.vehiBrand);
+    }
+    if(this.vehiModel){
+      this.getModelResult(this.vehiModel);
+    }
+  }
+
+  purchaseFilter(){
+    if(this.carFilter['car_id']){
+      this.getCustVehDetails(this.carFilter['car_id']);
+      this.filterParam.car_id = this.carFilter['car_id'];
+      this.getProductDetails(this.filterParam);
+    }
   }
+
+  getCustVehDetails(carId){
+    this.loader = true;
+    this.webService.post_data('getCustVehDetails',{'car_id':carId}).subscribe(response => {
+      if(response.status == 'success'){ 
+        this.filterParam.maker = this.carFilter['make'] = response.data.veh_brand_id;
+        this.vehiModel = this.filterParam.model = this.carFilter['model'] = response.data.veh_modal_id;
+        this.filterParam.trim = this.carFilter['trim'] = response.data.trim;
+        this.vehiYear = this.filterParam.year = this.carFilter['year'] = response.data.year;
+      }
+      this.loader = false;
+      this.get_model(response.data.veh_brand_id);
+      this.getModelResult(this.vehiModel);
+    })
+  }
+
 }

src/app/purchase/purchase-home/purchase-home.component.scss

@@ -245,7 +245,7 @@
                     li{
                         list-style: none;
                         padding:10px;
-                        width: calc(100% - 75%) !important;
+                        width: calc(100% - 75%);
                         display: inline-block;
                         .inner_div_product{
                             border:1px solid #eeeeee;

src/app/purchase/purchase.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { HttpModule } from '@angular/http';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { ProductlistComponent } from './productlist/productlist.component';
 import { ProductdetailsComponent } from './productdetails/productdetails.component';
@@ -33,6 +34,7 @@ import { PurchaseHomeComponent } from './purchase-home/purchase-home.component';
     ReactiveFormsModule,
     InfiniteScrollModule,
     TooltipModule,
+    HttpModule,
     MalihuScrollbarModule.forRoot()
   ]
 })

src/app/purchase/summary/summary.component.ts

@@ -86,9 +86,10 @@ export class SummaryComponent implements OnInit {
   paymentButton(){
     this.loader = true;
     this.prdtData.customer_id = this.loginDetails.customer_id;
+    let cart_id = (this.prdtData.cart_id)?'/'+this.prdtData.cart_id:'';
     this.webService.post_data('initOrderBooking',{'data':this.prdtData}).subscribe(response => {    
       if(response.status == 'success'){
-        document.location.href = this.serverUrl+'orderPayNow/'+response.data;
+        document.location.href = this.serverUrl+'orderPayNow/'+response.data+cart_id;
       }else{
         this.loader = false;
         this.failureModelRef.nativeElement.click();

src/app/purchase/track/track.component.html

@@ -72,7 +72,9 @@
               </div>
               <div class="col-md-6">
                 <h4>
-                  <div class="need_invoice">Need invoice</div>
+                  <!-- <div class="need_invoice"> -->
+                    <a class="need_invoice" target="_blank" href="{{serverUrl+'downloadOrdrDtls/'+orderDetails.format_order_id}}">Need invoice</a>
+                  <!-- </div> -->
                 </h4>
                 
               </div>

src/app/purchase/track/track.component.ts

 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
+import { Http, ResponseContentType } from '@angular/http';
 import { WebService } from '../../provider/web.service';
 import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
 import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';
@@ -7,7 +8,7 @@ import { ValidationService } from '../../provider/validation.service';
 import { NgxCarousel } from 'ngx-carousel';
 import { ImageStorage } from '../../../environments/server.config';
 import { Options } from 'ng5-slider';
-import * as $ from 'jquery';
+import { apiConfig } from '../../../environments/server.config';
 
 interface RangeSliderModel {
   minValue: number;
@@ -25,6 +26,7 @@ export class TrackComponent implements OnInit {
   count:any;
   loginDetails:any;
   loader:boolean;
+  serverUrl:string;
   loader_review:boolean;
   imageServer: string;
   orderDetails:any;
@@ -41,9 +43,11 @@ export class TrackComponent implements OnInit {
     constructor(private router        : Router, 
                 private route         : ActivatedRoute,
                 public errorMsg       : ValidationService,
-                public webService     : WebService){
+                public webService     : WebService,
+                private http          : Http){
       this.count = 0;
       this.loader = true;
+      this.serverUrl   = apiConfig;
       this.userReviewed = true;
       this.loader_review = false;
       this.imageServer  = ImageStorage;
@@ -164,6 +168,10 @@ export class TrackComponent implements OnInit {
       this.goToPage('rating',{"pId":this.orderDetails.product_id});
     }
 
+    downloadFile(orderId){
+      document.open(this.serverUrl+'','_blank');
+    }
+
     goToPage(path,data=null){
       this.router.navigate([path],{queryParams:  data});
       document.body.scrollTop  =  document.documentElement.scrollTop  =  0;

src/assets/css/responsive.scss

@@ -46,6 +46,24 @@
     .purchase_filter_section{
         width: 100% !important;
     }
+
+
+    .purchase_wrapper{
+        .purchase_content_wrapper{
+            .purchase_content_section{
+                .search_listing_content{
+                    ul{
+                        li {
+
+                            width:100% !important;
+                        }
+                        
+                    }
+        
+                } 
+            }  
+        }
+    }
     .purchase_content_section{
         width:100% !important;
         height: auto !important;
@@ -320,7 +338,7 @@
                             li {
                                 list-style: none;
                                 padding: 10px;
-                                width: calc(100% - 67%) !important;
+                                width: calc(100% - 75%) !important;
                                 display: inline-block;
                             }
                             

src/environments/server.config.ts

@@ -8,7 +8,7 @@ imageStorageUrl = 'http://localhost/dcarfixers/';
 // apiConfigUrl = 'https://techlabz.in/dcarfixers/Webservices/';
 // imageStorageUrl = 'https://techlabz.in/dcarfixers/';
 
-// // carfixxers.com
+// // // carfixxers.com
 // apiConfigUrl = 'https://carfixxers.com/admin/Webservices/';
 // imageStorageUrl = 'https://carfixxers.com/admin/';
 

src/index.html

@@ -8,6 +8,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.png">
+  <script src="https://kit.fontawesome.com/288b25c567.js"></script>
 </head>
 <body>
   <app-root></app-root>