dc

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

@@ -413,6 +413,7 @@
                                         <div class="col-md-12 textCenter">
                                             <button *ngIf="!loginDetails" (click)="resetForm()" class="wizard_signin" type="button" data-toggle="modal" data-target="#login">SIGN IN</button>
                                             <button (click)="getQuote()" class="wizard_quotes" type="button" data-toggle="modal" data-target="#quotes">VIEW SERVICE QUOTE</button>
+                                            <input type="hidden" #indexLoginModal data-toggle="modal" data-target="#quotes">
                                         </div>
                                     </div>
                                 </wizard-step>
@@ -451,14 +452,14 @@
                                         <h4>Select your day and date</h4>
                                     </div>
                                     <div class="col-md-6">
-                                        <button class="quote_arrow left floatLeft"></button>
+                                        <button class="quote_arrow left floatLeft" (click)="prev($event)"></button>
                                         <div class="schedule_dates floatLeft">
                                             <ul>
-                                                <li>Mon 28-12-2018</li>
-                                                <li>Mon 29-12-2018</li>
+                                                <li>{{ dateSection[0] | date:'MMM dd-MM-yyyy' }}</li>
+                                                <li>{{ dateSection[1] | date:'MMM dd-MM-yyyy' }}</li>
                                             </ul>
-                                        </div> <button class="quote_arrow right floatRight">
-                                            </button>
+                                        </div> 
+                                        <button class="quote_arrow right floatRight" (click)="next($event)"></button>
                                         <div class="clear"></div>
                                     </div>
                                 </div>
@@ -487,7 +488,7 @@
                                                                 <h6>{{mechanic.phone}}</h6>
                                                             </ng-template>
                                                             <button class="view_profile">View Profile</button>
-                                                            <button class="book_now">Book now</button>
+                                                            <button #bookNow class="book_now" (click)="scheduleNow()">Book now</button>
                                                         </div>
                                                         <div class="clear"></div>
                                                     </div>
@@ -495,8 +496,21 @@
                                             </div>
                                             <div class="col-md-6">
                                                 <div class="scheduletiming_listing">
-                                                    <ul *ngFor="let days of [1,2]">
-                                                        <li *ngFor="let time of mechanic.scheduleTiming">{{time}}</li>
+                                                    <ul>
+                                                        <li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
+                                                            <label>
+                                                                <input type="radio" name="scheduleTime" (click)="getSchedule(time,'0')">  
+                                                                <p>{{time}}</p>
+                                                            </label>
+                                                        </li>
+                                                    </ul>
+                                                    <ul>
+                                                        <li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
+                                                            <label>
+                                                                <input type="radio" name="scheduleTime" (click)="getSchedule(time,'1')">  
+                                                                <p>{{time}}</p>
+                                                            </label>
+                                                        </li>
                                                     </ul>
                                                 </div>
                                                 <div class="scheduletiming_btm_btns">
@@ -519,21 +533,12 @@
                                 <div class="clear"></div>
                             </div>
                             <div class="service_map">
-                                <!-- <agm-map [latitude]="lat" [longitude]="lng">
-                                    <div *ngFor="let mechanicLoc of mechanicData">
-                                        <agm-marker 
-                                            [latitude]="mechanicLoc.location_lat" 
-                                            [longitude]="mechanicLoc.location_lng"
-                                            [label]="{color: 'black', text: mechanicLoc.display_name}">
-                                        </agm-marker>
-                                    </div>
-                                </agm-map> -->
-
-                                <agm-map #gm [zoom]="15">
+                                <agm-map #gm [latitude]="lat" [longitude]="lng">
                                     <agm-marker *ngFor="let mechanicLoc of mechanicData"
                                                 [latitude]="mechanicLoc.location_lat"
                                                 [longitude]="mechanicLoc.location_lat"
-                                                (mouseOver)="onMouseOver(infoWindow,gm)">
+                                                (mouseOver)="onMouseOver(infoWindow,gm)"
+                                                (mouseOut)="onMouseOut(gm)">
                                         <agm-info-window [disableAutoPan]="false" #infoWindow>
                                             <div>{{mechanicLoc.display_name}}</div>
                                         </agm-info-window>

src/app/home/index/index.component.scss

@@ -913,6 +913,91 @@
                         overflow: scroll;
                         display: inline-block;
                         position: relative;
+                        #custom_check_button {
+
+                            border-radius: 0px  !important;
+                          
+                            overflow: auto;
+                          
+                            position: relative;
+                          
+                            outline: none;
+                          
+                            color: #908d8d;
+                          
+                            -webkit-border-radius: 0px  !important;
+                          
+                            -moz-border-radius: 0px  !important;
+                          
+                            -ms-border-radius: 0px  !important;
+                          
+                            -o-border-radius: 0px  !important;
+                          
+                           }
+                          
+                            #custom_check_button  p {
+                          
+                            margin: 0px;
+                          
+                            position: absolute;
+                          
+                            color: #908d8d;
+                          
+                            left: 0px;
+                          
+                            right: 0px;
+                          
+                            top: 0px;
+                          
+                            bottom: 0px;
+                          
+                            padding: 5px;
+                          
+                            cursor: pointer;
+                          
+                           }
+                          
+                            #custom_check_button  label {
+                          
+                            width: 100%;
+                          
+                           }
+                          
+                            #custom_check_button  label  span {
+                          
+                            text-align: center;
+                          
+                            display: block;
+                          
+                           }
+                          
+                            #custom_check_button  label  input {
+                          
+                            position: absolute;
+                          
+                            top: -20px;
+                          
+                           }
+                          
+                            #custom_check_button  input:checked+p {
+                          
+                            background-color: #ef5958;
+                          
+                            color: #fff;
+                          
+                            border-radius: 0px  !important;
+                          
+                            margin: 0px;
+                          
+                            -webkit-border-radius: 0px  !important;
+                          
+                            -moz-border-radius: 0px  !important;
+                          
+                            -ms-border-radius: 0px  !important;
+                          
+                            -o-border-radius: 0px  !important;
+                          
+                           }
                         li {
                             width: 100%;
                             background: #f5f5f5;

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

@@ -7,7 +7,7 @@ import { SubjectService } from '../../provider/subject.service';
 import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';
 import { google } from '@google/maps';
 import { ImageStorage } from '../../../environments/server.config';
-
+import { formatDate } from '@angular/common';
 
 declare var $;
 declare const google: any;
@@ -34,10 +34,12 @@ export class IndexComponent implements OnInit {
   //Basic Location Search: TAB 1
   autocomplete: any;
   searchLocError: boolean;
+  @ViewChild("bookNow") public bookNowRef: ElementRef;
   @ViewChild("goTostep1") public goTostep1Ref: ElementRef;
   @ViewChild("step2nextBtn") public step2nextRef: ElementRef;
   @ViewChild("step3nextBtn") public step3nextRef: ElementRef;
   @ViewChild("googleLocSearch") public searchElementRef: ElementRef;
+  @ViewChild("indexLoginModal") loginModalRef: ElementRef;
 
   //Vehicle Details: TAB 2
   vehicleDataForm;
@@ -49,8 +51,13 @@ export class IndexComponent implements OnInit {
   selectedIssues: any[] = new Array();
 
   //Quote Page
+  today: any = new Date();
+  dateStep: number = 0;
+  dateSection: any[] = new Array();
   imageServer: string;
   mechanicData: any;
+  currDate: any;
+  nextDate: any;
 
   carModel: any;
   carSearchJsonData: any;
@@ -66,6 +73,8 @@ export class IndexComponent implements OnInit {
       this.loginDetails     = false;
       this.searchLocError   = false;
       this.vehicleDataFormSubmit = false;
+      this.currDate =  new Date();
+      this.nextDate = new Date();
     }
 
   ngOnInit() {
@@ -98,6 +107,7 @@ export class IndexComponent implements OnInit {
     
     this.featuredOn = {grid: {xs: 1, sm: 2 , md: 5, lg: 6, all: 0},slide: 1, speed: 400, animation: 'lazy',point: { visible: false },load: 2, touch: true, easing: 'ease'}
     this.carouselTile = {grid: {xs: 1, sm: 2 , md: 3, lg: 3, all: 0},slide: 1, speed: 400, animation: 'lazy',point: { visible: false },load: 2, touch: true, easing: 'ease'}
+    this.nextDate.setDate(this.nextDate.getDate() + 1);
   }
 
   get_model(event) {
@@ -133,7 +143,6 @@ export class IndexComponent implements OnInit {
   }
 
   removeSelectedItem(issue_id,sub_issue_id){
-    console.log(this.selectedIssues);
     let index = this.selectedIssues.findIndex(x => x.sub_issue_id == sub_issue_id);
     if(index > -1){
       this.selectedIssues.splice(index, 1);
@@ -165,7 +174,10 @@ export class IndexComponent implements OnInit {
                            'pickup_lng':place.geometry.location.lng()
                           }
                         };
+
       this.searchLocError = false;
+      this.lat = place.geometry.location.lat();
+      this.lng = place.geometry.location.lng();
       this.wizardModalTrrigerInput.nativeElement.click();
     });
   }
@@ -192,10 +204,10 @@ export class IndexComponent implements OnInit {
       if(response.status == '1'){
         this.issuesData = response.issue_data;
       } else {
-        this.router.navigate(["index"]);
+        return false;
       }
     },error => {
-      this.router.navigate(["index"]);
+      return false;
     });
   }
 
@@ -218,14 +230,15 @@ export class IndexComponent implements OnInit {
       this.loader = false;
       if(response.status == '1'){
         this.mechanicData = response.mechanic_data;
-
-        this.lat = this.mechanicData[0]['location_lat'];
-        this.lng = this.mechanicData[0]['location_lng'];
+        
+        this.dateSection.push(new Date(this.today.setDate(this.today.getDate())));
+        this.dateSection.push(new Date(this.today.setDate(this.today.getDate() + 1)));
+       
       } else {
-        this.router.navigate(["index"]);
+        return false;
       }
     },error => {
-      this.router.navigate(["index"]);
+      return false;
     });
   }
 
@@ -237,6 +250,79 @@ export class IndexComponent implements OnInit {
     infoWindow.open();
   }
 
+  onMouseOut(gm){
+    if (gm.lastOpen != null) {
+      gm.lastOpen.close();
+    }
+  }
+
+  next(event) {
+    if(this.dateStep > 30){
+      return false;
+    }
+    this.dateSection = new Array();
+
+    this.nextDate.setDate(this.nextDate.getDate() + 1);
+    this.currDate.setDate(this.currDate.getDate() + 1);
+
+    this.dateSection[0] = new Date(this.currDate);
+    this.dateSection[1] = new Date(this.nextDate);
+
+    this.dateStep += 1;
+  }
+
+  prev(event) {
+    if(this.dateStep <= 0){
+      return false;
+    }
+    this.dateSection = new Array();
+
+    this.nextDate.setDate(this.nextDate.getDate() - 1);
+    this.currDate.setDate(this.currDate.getDate() - 1);
+
+    this.dateSection[0] = new Date(this.currDate);
+    this.dateSection[1] = new Date(this.nextDate);
+
+    this.dateStep -= 1;
+  }
+
+  getSchedule(time,index){
+    this.wizardData['schedule_date'] = {'date':this.formatDate(this.dateSection[index]),'time':time};
+  }
+
+  formatDate(date) {
+    const d = new Date(date);
+    let day = '' + d.getDate();
+    let month = ''+(d.getMonth()+1);
+    const year = d.getFullYear();
+    if (day.length < 2) { day = '0'+day; }
+    if (month.length < 2) { month = '0'+month; }
+    return [year,month,day].join('-');
+  }
+
+  scheduleNow(){
+    if(!this.loginDetails){
+      this.loginModalRef.nativeElement.click();
+      return false;
+    }
+
+    this.loader = true;
+
+    this.webService.post_data('scheduleNow',this.wizardData).subscribe(response => {
+      this.loader = false;
+      if(response.status == '1'){
+        this.mechanicData = response.mechanic_data;
+        
+        this.dateSection.push(new Date(this.today.setDate(this.today.getDate())));
+        this.dateSection.push(new Date(this.today.setDate(this.today.getDate() + 1)));
+      } else {
+        return false;
+      }
+    },error => {
+      return false;
+    });
+  }
+
   featuredOnLoad() {return ''; }
   carouselTileLoad(){ return ''; }
 }

src/app/navbar/navbar.component.ts

-
 import { Component, OnInit, HostListener, ElementRef, ViewChild } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
 import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';