05/12/2019

src/app/app-routing.module.ts

@@ -65,7 +65,7 @@ const routes: Routes = [
   { path: 'myservices', loadChildren: './myservices/myservices.module#MyservicesPageModule' },
   { path: 'profilephoto', loadChildren: './profilephoto/profilephoto.module#ProfilephotoPageModule' },
   { path: 'carlist/:id', loadChildren: './carlist/carlist.module#CarlistPageModule' },
-  { path: 'servicedetails', loadChildren: './servicedetails/servicedetails.module#ServicedetailsPageModule' },
+  { path: 'servicedetails/:id', loadChildren: './servicedetails/servicedetails.module#ServicedetailsPageModule' },
   { path: 'myorders', loadChildren: './myorders/myorders.module#MyordersPageModule' },
   { path: 'general', loadChildren: './general/general.module#GeneralPageModule' },
   { path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' },
@@ -73,8 +73,8 @@ const routes: Routes = [
   { path: 'date/:id', loadChildren: './date/date.module#DatePageModule' },
   { path: 'summary/:id', loadChildren: './summary/summary.module#SummaryPageModule' },
   { path: 'waiting1', loadChildren: './waiting1/waiting1.module#Waiting1PageModule' },
-  { path: 'available', loadChildren: './available/available.module#AvailablePageModule' },
-  { path: 'bookservice', loadChildren: './bookservice/bookservice.module#BookservicePageModule' },
+  { path: 'available/:id', loadChildren: './available/available.module#AvailablePageModule' },
+  { path: 'bookservice/:id', loadChildren: './bookservice/bookservice.module#BookservicePageModule' },
   { path: 'cancel', loadChildren: './cancel/cancel.module#CancelPageModule' },
   { path: 'purchaseparts', loadChildren: './purchaseparts/purchaseparts.module#PurchasepartsPageModule' },
   { path: 'productbooking/:id', loadChildren: './productbooking/productbooking.module#ProductbookingPageModule' },
@@ -88,9 +88,11 @@ const routes: Routes = [
   { path: 'chat', loadChildren: './chat/chat.module#ChatPageModule' },
   { path: 'map', loadChildren: './map/map.module#MapPageModule' },
   { path: 'roadassistantrequest-list', loadChildren: './roadassistantrequest-list/roadassistantrequest-list.module#RoadassistantrequestListPageModule' },
-  // { path: 'roadassistancerequestlist', loadChildren: './roadassistancerequestlist/roadassistancerequestlist.module#RoadassistancerequestlistPageModule' },
   { path: 'roadassiastancecompletedlist', loadChildren: './roadassiastancecompletedlist/roadassiastancecompletedlist.module#RoadassiastancecompletedlistPageModule' },
-  { path: 'roadassistancerating', loadChildren: './roadassistancerating/roadassistancerating.module#RoadassistanceratingPageModule' }
+  { path: 'roadassistancerating', loadChildren: './roadassistancerating/roadassistancerating.module#RoadassistanceratingPageModule' },
+  { path: 'mybookservices', loadChildren: './mybookservices/mybookservices.module#MybookservicesPageModule' },
  { path: 'success', loadChildren: './success/success.module#SuccessPageModule' }
+
+
 
 
 

src/app/app.component.ts

@@ -48,7 +48,6 @@ export class AppComponent {
   }
   geolocationData() {
     this.geolocation.getCurrentPosition().then((resp) => {
-      console.log(resp);
       const coords = {lat: resp.coords.latitude, lng: resp.coords.longitude};
       this.storageservice.removeLocalStorageItem('location');
       this.storageservice.setLocalStorageItem('location', JSON.stringify(coords));

src/app/available/available.page.html

@@ -2,7 +2,7 @@
   <div class="app_header">
       <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
       </button>
-    <div class="nav_title floatLeft"><h4>AVAILABLE WORKSHOPS <span>6</span></h4></div>
+    <div class="nav_title floatLeft"><h4>AVAILABLE WORKSHOPS <span></span></h4></div>
     <button class="nav_btn nav_filter floatRight" (click)="filterToggle()">
 
       </button>
@@ -10,16 +10,16 @@
 </div>
 </ion-header>
 <ion-content>
-  <div class="home_wrapper">
+  <div class="home_wrapper" *ngIf="garageList">
     <ul>
-        <h3>2 Services</h3>
-      <li (click)="goToPage('bookservice')">
+        <h3>{{getServicecount()}} Garages</h3>
+      <li (click)="book(service)" *ngFor="let service of garageList">
         <div class="circle">
-          <img src="../../assets/img/asset_shop1.png">
+          <img [src]="getImage(service.garage_image)">
         </div>
         <div class="details">
             <div class="list_btn book">Book</div>
-          <h5>Presto Towing Services</h5>
+          <h5>{{service.name | uppercase}}</h5>
           <fieldset class="rating">
               <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
               <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
@@ -32,14 +32,14 @@
               <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
               <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
           </fieldset>
-          <p>34 Reviews</p>
-          <h6 class="floatLeft"><span class="">Total Amount : <strong>$180</strong></span></h6>
-          <span class="floatRight playit"><img src="../../assets/img/asset_playit.png"></span>
+          <p>{{service.total_review}}</p>
+          <h6 class="floatLeft"><span class="">Total Amount : <strong>${{service.total_price}}</strong></span></h6>
+          <!-- <span class="floatRight playit"><img src="../../assets/img/asset_playit.png"></span> -->
             <div class="clear"></div>
         </div>
         <div class="clear"></div>
       </li>
-      <li (click)="goToPage('bookservice')">
+      <!-- <li (click)="goToPage('bookservice')">
           <div class="circle">
             <img src="../../assets/img/asset_shop2.png">
           </div>
@@ -64,7 +64,7 @@
             <div class="clear"></div>
           </div>
           <div class="clear"></div>
-        </li>
+        </li> -->
     </ul>
   </div>
 

src/app/available/available.page.ts

 import { Component, OnInit } from '@angular/core';
-import { Router,ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
 import { trigger, transition, animate, style } from '@angular/animations';
-
+import { AuthenticationService } from '../../Config/services/auth.service';
+import { ValidationService} from '../../Config/services/validation.service';
+import {StorageService } from '../../Config/services/storage.service';
+import {TranslateConfigService} from '../../Config/services/translateconfig.service';
 @Component({
   selector: 'app-available',
   templateUrl: './available.page.html',
@@ -21,17 +24,29 @@ import { trigger, transition, animate, style } from '@angular/animations';
 })
 export class AvailablePage implements OnInit {
   filterShow = false;
+  userData: any;
+  getData: any;
+  garageList: any;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location
-  ) { }
+    private location: Location,
+    private validationService: ValidationService,
+    private authenticationService: AuthenticationService,
+    private storageService: StorageService,
+    private translateConfigService: TranslateConfigService
+  ) {
+    this.getStorageData();
+    const Data =  decodeURIComponent((this.route.snapshot.paramMap.get('id')));
+    this.getData = JSON.parse(Data);
+    this.getQuoteDetails(this.getData);
+   }
 
   ngOnInit() {
   }
 
-  goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
+  goToPage(path, data= null) {
+    this.router.navigateByUrl(path, {queryParams: data});
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
 
@@ -40,8 +55,27 @@ export class AvailablePage implements OnInit {
   }
 
 
-  filterToggle(){
+  filterToggle() {
     this.filterShow = !this.filterShow;
   }
-
+  getStorageData() {
+    this.userData = JSON.parse(this.storageService.getLocalStorageItem('userData'));
+  }
+  getQuoteDetails(id) {
+    this.authenticationService.get_data('get_requestacceptedgarage?request_id=' + id).subscribe((response) => {
+      console.log(response);
+      if (response.status === 'success' ) {
+        this.garageList = response.data;
+      }
+    });
+  }
+  getServicecount() {
+   return this.garageList.length;
+  }
+  getImage(url) {
+    return 'https://techlabz.in/allorepair/' + url;
+  }
+  book(data) {
+    this.goToPage('/bookservice/' + encodeURIComponent(JSON.stringify(data)));
+  }
 }

src/app/bookingsuccess/bookingsuccess.component.html

+<p>
+  bookingsuccess works!
+</p>

src/app/bookingsuccess/bookingsuccess.component.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BookingsuccessComponent } from './bookingsuccess.component';
+
+describe('BookingsuccessComponent', () => {
+  let component: BookingsuccessComponent;
+  let fixture: ComponentFixture<BookingsuccessComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BookingsuccessComponent ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BookingsuccessComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/bookingsuccess/bookingsuccess.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-bookingsuccess',
+  templateUrl: './bookingsuccess.component.html',
+  styleUrls: ['./bookingsuccess.component.scss'],
+})
+export class BookingsuccessComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/bookservice/bookservice.page.html

@@ -2,7 +2,7 @@
     <div class="app_header">
         <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
         </button>
-      <div class="nav_title floatLeft"><h4>N Torque Repair <span class="premium_badge">PREMIUM</span></h4></div>
+      <div class="nav_title floatLeft" *ngIf="getData"><h4>{{getData.name | uppercase}}<span class="premium_badge">{{checktype()}}</span></h4></div>
       <button class="nav_btn nav_btn_text floatRight">
 
         </button>
@@ -10,31 +10,31 @@
   </div>
   </ion-header>
 <ion-content>
-    <div class="home_wrapper">
+    <div class="home_wrapper" *ngIf="getData">
         <div class="location_box">
             <div class="location_bar">
                 Location revailed after booked
               </div>
         </div>
         <div class="banner">
-          <img src="../../assets/img/asset_banner.png">
+          <img [src]="getImage()">
         </div>
         <div class="service_amount">
           <ion-row>
-            <ion-col><p>Service</p></ion-col>
-            <ion-col class="textRight"><p>$290</p></ion-col>
+            <ion-col><p>Parts Costs</p></ion-col>
+            <ion-col class="textRight"><p>${{getData.parts_cost}}</p></ion-col>
           </ion-row>
           <ion-row>
               <ion-col><p>Labour Charge</p></ion-col>
-              <ion-col class="textRight"><p>$50</p></ion-col>
+              <ion-col class="textRight"><p>${{getData.labour_cost}}</p></ion-col>
           </ion-row>
           <hr>
           <ion-row>
-              <ion-col><p>Total Amount</p></ion-col>
-              <ion-col class="textRight"><p><strong>$340</strong></p></ion-col>
+              <ion-col><p>Total Amount(Incl.10% VAT)</p></ion-col>
+              <ion-col class="textRight"><p><strong>${{getData.total_price}}</strong></p></ion-col>
           </ion-row>
-          <button class="signup_btn">Book Service</button>
-          <div class="service_details">
+          <button class="signup_btn" (click) ="bookService()">Book Service</button>
+          <div class="service_details" >
             <img src="../../assets/img/asset_no_booking.png">
             <p>Workshop Details will be revealed <br>
                 after booking</p>

src/app/bookservice/bookservice.page.ts

 import { Component, OnInit } from '@angular/core';
-import { Router,ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
 import { trigger, transition, animate, style } from '@angular/animations';
 import { AuthenticationService } from '../../Config/services/auth.service';
@@ -11,7 +11,7 @@ import {StorageService } from '../../Config/services/storage.service';
   styleUrls: ['./bookservice.page.scss'],
 })
 export class BookservicePage implements OnInit {
-
+  getData: any;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -19,18 +19,52 @@ export class BookservicePage implements OnInit {
     private validationService: ValidationService,
     private authenticationService: AuthenticationService,
     private storageservice: StorageService,
-  ) { }
+  ) {
+    const Data =  decodeURIComponent((this.route.snapshot.paramMap.get('id')));
+    this.getData = JSON.parse(Data);
+    console.log(this.getData);
+  }
 
   ngOnInit() {
   }
 
-  goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
+  goToPage(path, data= null) {
+    this.router.navigateByUrl(path, {queryParams: data});
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
 
   goBack() {
     this.location.back();
   }
+  checktype() {
+    if ( this.getData.quote_type === '1' ) {
+      return 'BASE';
+    }
+    if ( this.getData.quote_type === '2' ) {
+      return 'MEDIUM';
+    }
+    if ( this.getData.quote_type === '3' ) {
+      return 'PREMIUM';
+    }
+  }
+  getImage() {
+    return 'https://techlabz.in/allorepair/' + this.getData.garage_image;
+  }
+  bookService() {
+    this.validationService.presentLoader();
+    const passData = {
+      req_id : this.getData.req_id,
+      resp_id : this.getData.garage_response_id
+    };
+    this.authenticationService.post_data('book_garage' , passData) .subscribe((response) => {
+      this.validationService.dismissLoader();
+      console.log(response);
+      if ( response.status === 'success') {
+          this.goToPage('success');
+      } else {
+        this.validationService.presentToast('Booking Failed');
+      }
+    });
+  }
 
 }

src/app/forgot/forgot.page.ts

@@ -45,7 +45,11 @@ getPassword() {
       console.log(data);
       this.validationservice.dismissLoader();
       if (data.status === 'success') {
-        this.goToPage('/otp/' + JSON.stringify(data));
+        const passData = {
+          mobNumber : this.forgotPswForm.value.user_phonenumber,
+          successData : data
+        };
+        this.goToPage('/otp/' + JSON.stringify(passData));
       } else {
         this.validationservice.presentToast(data.message);
       }

src/app/home/home.page.html

@@ -57,12 +57,13 @@
     </div>
      <div class="appointment_slider">
         <ion-slides pager="false">
-            <ion-slide *ngFor="let service of bookServiceDeatils; let  i = index;" >
+            <ion-slide *ngFor="let ads of adsList" >
                 <div class="appointment_card" >
+                  <!-- <img [src] = "https://www.pexels.com/photo/beautiful-beauty-blue-bright-414612/" /> -->
                     <ion-row >
                       <ion-col col-8 class="p0">
                       
-                        <h6>Offer End on 10/11/2019</h6>
+                        <h6>Offer End Soon</h6>
                       </ion-col>
                       <ion-col col-4 class="p0">
                         <p></p>
@@ -70,7 +71,7 @@
                     </ion-row>
                     <ion-row>
                         <ion-col class="p0">
-                            <h3>Tyres available at <strong>50%</strong> Offer</h3>
+                            <h3>{{ads.title}}</h3>
                             <div class="clear"></div>
                         </ion-col>
                       </ion-row>
@@ -99,106 +100,21 @@
           </ion-col>
         </ion-row>
       </div>
-      <!-- <div class="rate_card">
-        <div class="inner_shop_name">
-          <ion-row>
-            <ion-col class="p0">
-                <h5>Smart Mortors</h5>
-                <p><img src="../../assets/img/asset_avatar_sml.png">Peter mcWay</p>
-            </ion-col>
-            <ion-col class="p0">
-              <h6>Service - 2 days ago</h6>
-            </ion-col>
-          </ion-row>
-        </div>
-        <ion-row>
-            <ion-col class="p0">
-              <h4>Rate this workshop</h4>
-              <fieldset class="rating">
-                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-              </fieldset>
-            </ion-col>
-        </ion-row>
-      </div> -->
-    
-      <!-- <div class="home_main_stack_menu" *ngIf="mainServicesList">
-          <ion-row  >
-              <ion-col class="textCenter">
-                
-                <p></p>
-              </ion-col>
-            
-          </ion-row>
-          <br>
-      </div> -->
       <div class="header_submenu">
           <h4>{{'home.Services' | translate:params}}</h4>
           <div class="clear"></div>
       </div>
       <ion-grid> 
       <div class="home_main_stack_menu" *ngFor="let service of mainServicesList; let i = index " (click)="bookService(service)">
-        
         <ion-row  >
-              <ion-col class="textCenter"  >
-                <img [src] ="getImage(service.image)">
+              <ion-col class="textCenter"  *ngIf="service.image" >
+                <img [src]=" 'https://techlabz.in/allorepair' + service.image">
                 <p>{{service.service_name}}</p>
               </ion-col>
           </ion-row>
-         
-          
       </div>
     </ion-grid>
-
-      <!-- <div class="header_submenu">
-          <h4>Parts for you</h4>
-          <button class="more_btn">More</button>
-          <div class="clear"></div>
-        </div> -->
-        <!-- <div class="product_section">
-          <ion-row>
-            <ion-col col-4>
-              <div class="product_div">
-                <div class="rating">3.1</div>
-                <div class="product_img">
-                  <img src="../../assets/img/asset_dummy_item1.png">
-                </div>
-              </div>
-              <h4>PM 237</h4>
-              <hr>
-            </ion-col>
-            <ion-col col-4>
-                <div class="product_div">
-                    <div class="rating">3.1</div>
-                    <div class="product_img">
-                      <img src="../../assets/img/asset_dummy_item2.png">
-                    </div>
   </div>
-                <h4>Mega 3inch Band</h4>
-                <hr>
-            </ion-col>
-            <ion-col col-4>
-                <div class="product_div">
-                    <div class="rating">3.1</div>
-                    <div class="product_img">
-                      <img src="../../assets/img/asset_dummy_item3.png">
-                    </div>
-                </div>
-                <h4>PM 237</h4>
-                <hr>
-            </ion-col>
-          </ion-row>
-        </div> -->
-  </div>
-
   <div class="home_menu" *ngIf="menuShow" [@slideInOut]>
     <div class="menu_outter" (click)="menuToggle()">
     </div>

src/app/home/home.page.ts

-import { Component, ViewChild, ElementRef } from '@angular/core';
+import { Component } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
 import { trigger, transition, animate, style } from '@angular/animations';
 import { AuthenticationService } from '../../Config/services/auth.service';
 import {StorageService } from '../../Config/services/storage.service';
-import { ValidationService } from '../../Config/services/validation.service';
-import { NativeGeocoder, NativeGeocoderReverseResult, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';
 import {TranslateConfigService} from '../../Config/services/translateconfig.service';
 declare var google;
 @Component({
@@ -25,6 +23,7 @@ declare var google;
   ]
 })
 export class HomePage {
+  adsList: any;
   lang: any;
   locationData: any;
   menuShow = false;
@@ -42,8 +41,6 @@ export class HomePage {
     private location: Location,
     private authenticationservice: AuthenticationService,
     private storageservice: StorageService,
-    private validationservice: ValidationService,
-    private nativeGeocoder: NativeGeocoder,
     private translateConfigService: TranslateConfigService
   ) {
     if (this.storageservice.isLoggednIn()) {
@@ -54,12 +51,12 @@ export class HomePage {
       this.langTrans();
      }
   }
-    console.log(this.userData);
     this.getMainServiceList();
     this.getpeopleMostpurchasedList();
     this.getProductsforYouList();
     this.getServiceBookedList();
     this.getLocationData(this.locationData.lat, this.locationData.lng);
+    this.getAds();
   }
   goToPage(path, data = null) {
     this.router.navigateByUrl(path, {queryParams: data});
@@ -132,12 +129,16 @@ getLocationData(lat, lng) {
     console.log(data);
     if ( data.status === 'OK') {
         this.displayLocationData = data.results[2].formatted_address;
-        console.log('address' , this.displayLocationData);
     }
   });
 }
 langTrans() {
   this.translateConfigService.setLanguage(this.lang);
 }
+getAds() {
+  this.authenticationservice.get_data('get_adsdetails').subscribe((data) => {
+    this.adsList = data.data;
+  });
+}
 
 }

src/app/listingservice/listingservice.page.ts

@@ -58,7 +58,7 @@ bookService(value) {
   this.id = value.id;
 }
 getImage(imageurl) {
-  return imageurl;
+  return 'https://techlabz.in/allorepair/' + imageurl;
 }
 getsubserviceList() {
   const PassData = {service_name: this.serviceDetails, service_id: this.id};

src/app/login/login.page.html

@@ -76,7 +76,7 @@
                   <ion-row class="p0">
                     <ion-col size="4">
                       <ion-select placeholder="" formControlName="user_phonecode">
-                        <ion-select-option value="">+33</ion-select-option>
+                        <ion-select-option value="+33">+33</ion-select-option>
                       </ion-select>
                     </ion-col>
                     <ion-col size="8">

src/app/login/login.page.ts

@@ -83,7 +83,7 @@ export class LoginPage implements OnInit {
     user_lat: this.locationData.lat,
     user_lng: this.locationData.lng,
     device_id : 123456,
-    user_phonecode: +33,
+    user_phonecode: '+33',
   });
   console.log(this.signupForm.value);
   this.storageService.removeLocalStorageItem('userData');

src/app/mybookservices/mybookservices.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { MybookservicesPage } from './mybookservices.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MybookservicesPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [MybookservicesPage]
+})
+export class MybookservicesPageModule {}

src/app/mybookservices/mybookservices.page.html

+<ion-header>
+  <div class="app_header">
+      <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+      </button>
+    <div class="nav_title floatLeft"><h4>MY BOOKED SERVICES</h4></div>
+    <button class="nav_btn nav_btn_text floatRight">
+
+      </button>
+    <div class="clear"></div>
+</div>
+</ion-header>
+<ion-content>
+<!-- <div class="services_wrapper">
+  <h4>Road Assistant Services</h4>
+  <ul>
+    <li class="up_comingborder" >
+      <div class="road_assitance">
+        Road Assistance
+    </div>
+      <div class="pic_detail floatLeft"  >
+        
+        <p class="p0 arrow" >
+        </p>
+        <h5><strong>Booking ID:</strong>155</h5>
+        <h5><strong>Date:</strong> 12/05/2019</h5>
+      </div>
+      <div class="clear"></div>
+    </li>
+  </ul>
+</div> -->
+<div class="services_wrapper" *ngIf="userBookedServices">
+  <h4>Garage  Services</h4>
+  <ul >
+    <li class="up_comingborder"  *ngFor="let service of userBookedServices; let i = index"  (click) = "getRequestQuote(service)">
+      <div class="road_assitance">
+        {{getuserstatus(service.status)}}
+    </div>
+      <div class="pic_detail floatLeft" >
+        <!-- <h5>Presto towing service</h5> -->
+        <!-- <h6><strong>Rolls Royce</strong> Ghost</h6> -->
+        <p class="p0 arrow" >
+        </p>
+        <h5><strong>Booking ID:</strong>{{service.booking_id}}</h5>
+        <h5><strong>Date:</strong> {{service.booking_date}}</h5>
+        <h5><strong>Booking Status:</strong></h5>
+      </div>
+      <div class="clear"></div>
+    </li>
+  </ul>
+</div>
+</ion-content>

src/app/mybookservices/mybookservices.page.scss

+.services_wrapper{
+    background-color: #faf9fc;
+    padding:15px;
+    width:100%;
+    h4{
+        margin:0px;
+        padding:0px;
+        margin-bottom: 15px;
+    }
+    ul{
+        margin:0px;
+        padding:0px;
+        li{
+            list-style: none;
+            background-color: #f6f5fa;
+            padding:25px;
+            padding-right: 20px;
+            border-radius: 15px;
+            margin-bottom: 10px;
+            .road_assitance{
+                background-color: #fbd339;
+                color: #403d4d;
+                display: inline-block;
+                font-weight: 500;
+                padding: 3px;
+                padding-left: 10px;
+                padding-right: 10px;
+                margin-bottom: 14px;            
+            }
+            h5{
+                margin:0px;
+                padding: 0px;
+                color: #403d4d;
+                font-size: 16px;
+                padding-bottom: 5px;
+                font-weight: 600;
+            }
+            p{
+                margin:0px;
+                padding: 0px;
+                color: #a29ebf;
+                font-size: 13px;
+                padding-bottom: 20px;
+
+            }
+            .pic{
+                width:45px;
+                height:45px;
+                border-radius: 50%;
+                img{
+                    width:100%;
+                    height:100%;
+                    object-fit: cover;
+                    object-position: center;
+                    border-radius: 50%;
+                }
+            }
+            .pic_detail{
+                width:calc(100% - 45px);
+                margin: 0px;
+                padding-bottom: 5px;
+                padding-left: 15px;
+                h6{
+                    margin:0px;
+                    color: #a29ebf;
+                    font-weight: 400;
+                    font-size: 16px;
+                    padding-bottom: 5px;
+                    strong{
+                        font-weight: 500;
+                    }
+                }
+
+                .arrow{
+                    background: url("../../assets/img/asset_playit.png");
+                    background-position: right;
+                    background-repeat: no-repeat;
+                    background-size: 12px;
+                }
+            }
+        }
+
+        h4{
+            margin:0px;
+            color: #a29ebf;
+            margin-top: 15px;
+            margin-bottom: 15px;   
+            font-size: 14px;     
+        }
+
+        .up_comingborder{
+            border:2px solid #fbd339;
+        }
+    }
+}
\ No newline at end of file

src/app/mybookservices/mybookservices.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MybookservicesPage } from './mybookservices.page';
+
+describe('MybookservicesPage', () => {
+  let component: MybookservicesPage;
+  let fixture: ComponentFixture<MybookservicesPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MybookservicesPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MybookservicesPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/mybookservices/mybookservices.page.ts

+import { Component, OnInit } from '@angular/core';
+import { StorageService } from '../../Config/services/storage.service';
+import { ValidationService } from '../../Config/services/validation.service';
+import { AuthenticationService } from '../../Config/services/auth.service';
+import { Location } from '@angular/common';
+@Component({
+  selector: 'app-mybookservices',
+  templateUrl: './mybookservices.page.html',
+  styleUrls: ['./mybookservices.page.scss'],
+})
+export class MybookservicesPage implements OnInit {
+  userData: any;
+  userBookedServices: any;
+  constructor(
+    private storageService: StorageService,
+    private authenticationservice: AuthenticationService,
+    private validationservice: ValidationService,
+    private location: Location
+  ) {
+    this.getStorageData();
+    this.getBookedServiceDetails();
+  }
+
+  ngOnInit() {
+  }
+  getStorageData() {
+    this.userData = JSON.parse(this.storageService.getLocalStorageItem('userData'));
+    console.log(this.userData);
+  }
+  getBookedServiceDetails() { //
+    this.authenticationservice.get_data('get_userbookedServiceDetails?user_id=' + this.userData.profile_id ).subscribe((response) => {
+      console.log(response);
+      if ( response. status === 'success') {
+        this.userBookedServices = response.data;
+        console.log(this.userBookedServices);
+      }
+    });
+  }
+  getuserstatus(id) {
+    if ( id === '1') {
+      return 'Booked Service';
+    }
+    if ( id === '2') {
+      return 'Service is under procees';
+    }
+    if ( id === '3') {
+      return 'Services completed';
+    }
+  }
+  goBack() {
+    this.location.back();
+  }
+}

src/app/myservices/myservices.page.html

@@ -2,7 +2,7 @@
     <div class="app_header">
         <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
         </button>
-      <div class="nav_title floatLeft"><h4>MY SERVICES</h4></div>
+      <div class="nav_title floatLeft"><h4>MY REQUESTED SERVICES</h4></div>
       <button class="nav_btn nav_btn_text floatRight">
 
         </button>
@@ -10,7 +10,7 @@
   </div>
 </ion-header>
 <ion-content>
-  <div class="services_wrapper">
+  <div class="services_wrapper" *ngIf="roadAssistanceBookedDetails">
     <h4>Road Assistant Services</h4>
     <ul>
       <li class="up_comingborder"  *ngFor="let service of roadAssistanceBookedDetails ">
@@ -29,4 +29,24 @@
       </li>
     </ul>
   </div>
+  <div class="services_wrapper" *ngIf="serviceList">
+    <h4>Garage Services</h4>
+    <ul>
+      <li class="up_comingborder"  *ngFor="let service of serviceList "  (click) = "getRequestQuote(service)">
+        <div class="road_assitance">
+          {{getRequestStatus(service.status)}}
+      </div>
+        <div class="pic_detail floatLeft" >
+          <!-- <h5>Presto towing service</h5> -->
+          <!-- <h6><strong>Rolls Royce</strong> Ghost</h6> -->
+          <p class="p0 arrow" >
+          </p>
+          <h5><strong>Request ID:</strong>{{service.request_code}}</h5>
+          <h5><strong>Date:</strong> {{service.booking_date}}</h5>
+          <h5><strong>Services : </strong>{{service.subservices}}</h5>
+        </div>
+        <div class="clear"></div>
+      </li>
+    </ul>
+  </div>
 </ion-content>

src/app/myservices/myservices.page.ts

@@ -46,7 +46,7 @@ export class MyservicesPage implements OnInit {
     this.userData = JSON.parse(this.storageService.getLocalStorageItem('userData'));
   }
 getServiceList() {
-  this.authenticationservice.get_data('get_userbookedServiceDetails').subscribe((data) => {
+  this.authenticationservice.get_data('get_userRequestServiceDetails?user_id=' + this.userData.profile_id).subscribe((data) => {
     console.log(data);
     if (data.status === 'success') {
       this.serviceList = data.data;
@@ -66,5 +66,31 @@ getRoadassistancebookedServiceDetails() {
     }
   });
 }
-
+getRequestStatus(id) {
+ if (id === '0') {
+   return 'Your service request has been Rejected';
+ }
+ if (id === '1') {
+  return 'Waiting for Admin Approval';
+ }
+ if (id === '2') {
+ return 'Waiting for Garage Approval';
+ }
+ if (id === '3') {
+   return 'Waiting for garage Quote List';
+ }
+ if (id === '4') {
+   return 'Quote has been sent';
+ }
+ if (id === '5') {
+   return 'Ready to service';
+ }
+}
+getRequestQuote(service) {
+  if (service.status === '0' || service.status === '1'  || service.status === '2' || service.status === '3' || service.status === '1') {
+    this.goToPage('/servicedetails/' + encodeURIComponent(JSON.stringify(service.id)));
+  } else {
+    this.goToPage('/available/' + encodeURIComponent(JSON.stringify(service.id)));
+  }
+}
 }

src/app/otp/otp.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule , ReactiveFormsModule} from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
 
 import { IonicModule } from '@ionic/angular';
@@ -19,6 +19,7 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
+    ReactiveFormsModule,
     RouterModule.forChild(routes)
   ],
   declarations: [OtpPage]

src/app/otp/otp.page.html

@@ -3,36 +3,39 @@
         <div class="forgot_wrapper">
             <div class="app_header">
                 <button class="nav_btn back_btn floatLeft" (click)="goBack()">
-            
                 </button>
                 <div class="nav_title floatLeft"><h4>OTP</h4></div>
                 <div class="clear"></div>
               </div>
-              <div class="forgot_form">
+              <div class="forgot_form" *ngIf="mobnumber">
+                
                   <div class="row">
                       <h5>We have sent an OTP to</h5>
-                      <h2>8888 000 000</h2>
+                      <h2>{{mobnumber.mobNumber}}</h2>
                       <p class="textCenter">Type the OTP below</p>
                       <div class="otp_input_box">
+                          <form  [formGroup]="otp">
                         <ion-row>
                           <ion-col col-3>
-                            <ion-input value="" type="number"></ion-input>
+                            <ion-input  type="text" formControlName="value1" maxlength = "1"></ion-input>
                           </ion-col>
                           <ion-col col-3>
-                            <ion-input value="" type="number"></ion-input>
+                            <ion-input type="text" formControlName="value2" maxlength = "1"></ion-input>
                           </ion-col>
                           <ion-col col-3>
-                            <ion-input value="" type="number"></ion-input>
+                            <ion-input type="text" formControlName="value3" maxlength = "1"></ion-input>
                           </ion-col>
                           <ion-col col-3>
-                            <ion-input value="" type="number"></ion-input>
+                            <ion-input  type="text" formControlName="value4" maxlength = "1"></ion-input>
                           </ion-col>
                         </ion-row>
+                      </form>
                       </div>
                   </div>
                   <div class="row textCenter">
-                      <button class="signup_btn" (click)="goToPage('password')">Submit</button>
+                      <button class="signup_btn" (click)="submit()">Submit</button>
                     </div>
+                    
               </div>
         </div>
       </ion-content>

src/app/otp/otp.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
-
+import { FormBuilder, Validators } from '@angular/forms';
 @Component({
   selector: 'app-otp',
   templateUrl: './otp.page.html',
   styleUrls: ['./otp.page.scss'],
 })
 export class OtpPage implements OnInit {
-
+ mobnumber: string;
+ otpArray = [];
+ otp = this.fb.group({
+   value1 : ['' , Validators.required],
+   value2 : ['' , Validators.required],
+   value3 : ['' , Validators.required],
+   value4 : ['' , Validators.required]
+ });
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location
-  ) { }
+    private location: Location,
+    private fb: FormBuilder,
+  ) {
+    const data =  decodeURIComponent((this.route.snapshot.paramMap.get('id')));
+    this.mobnumber = JSON.parse(data);
+    console.log(this.mobnumber);
+   }
 
   ngOnInit() {
   }
@@ -27,5 +39,13 @@ export class OtpPage implements OnInit {
   goBack() {
     this.location.back();
   }
+  submit() {
+    console.log(this.otp.value);
+    this.otpArray.push(this.otp.value.value1);
+    this.otpArray.push(this.otp.value.value2);
+    this.otpArray.push(this.otp.value.value3);
+    this.otpArray.push(this.otp.value.value4);
+    console.log(this.otpArray.toString());
 
+  }
 }

src/app/profile/profile.page.html

@@ -25,8 +25,18 @@
                               <img src="../../assets/img/asset_m1.png">
                             </div>
                             <div class="li_detail">
-                              <h5>My Services</h5>
-                              <p>Total services: 08</p>
+                              <h5>My Request Services</h5>
+                             
+                            </div>
+                            <div class="clear"></div>
+                        </li>
+                        <li (click)="goToPage('mybookservices')">
+                          <div class="li_image">
+                            <img src="../../assets/img/asset_m1.png">
+                          </div>
+                          <div class="li_detail">
+                            <h5>My Booked Services</h5>
+                           
                           </div>
                           <div class="clear"></div>
                       </li>
@@ -36,7 +46,7 @@
                             </div>
                             <div class="li_detail">
                               <h5>My Orders</h5>
-                              <p>Total purchases: 18</p>
+                             
                             </div>
                             <div class="clear"></div>
                         </li>

src/app/profile/profile.page.ts

@@ -27,6 +27,7 @@ export class ProfilePage implements OnInit {
   goToPage(path, data= null) {
     this.router.navigateByUrl(path, {queryParams: data});
     document.body.scrollTop = document.documentElement.scrollTop = 0;
+    console.log(path)
   }
 
 

src/app/servicedetails/servicedetails.page.html

 <ion-header>
-  <div class="app_header">
-      <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+  <div class="app_header" *ngIf="serviceDetail">
+      <button class= "nav_btn back_btn floatLeft" (click)="goBack()">  
       </button>
     <div class="nav_title floatLeft"><h4>Presto towing Service</h4></div>
     <button class="nav_btn nav_btn_text floatRight">
@@ -10,19 +10,19 @@
 </div>
 </ion-header>
 <ion-content>
-  <div class="home_wrapper">
-      <div class="location_box">
+  <div class="home_wrapper" *ngIf="serviceDetail">
+      <!-- <div class="location_box">
           <div class="location_bar">
               4KM
             </div>
-      </div>
+      </div> -->
       <div class="banner">
         <img src="../../assets/img/asset_banner.png">
       </div>
-      <div class="btn_bay">
+      <!-- <div class="btn_bay">
         <button class="btn book_btn" (click)="goToPage('waiting')">Request a Service</button>
-      </div>
-      <div class="pay_description">
+      </div> -->
+      <!-- <div class="pay_description">
         <h6>
           <span>
             <img src="../../assets/img/asset_c1.png">
@@ -42,17 +42,18 @@
             <img src="../../assets/img/asset_web.png">
             <a>www.presto.com</a></span>
         </h6>
-      </div>
-      <div class="bottom_tab_bay">
+      </div> -->
+      <!-- <div class="bottom_tab_bay">
         <ul>
           <li [class.active]="tab == 'detail'" (click)="tab_swap('detail')">Details</li>
           <li [class.active]="tab == 'about'" (click)="tab_swap('about')">About</li>
           <li [class.active]="tab == 'review'" (click)="tab_swap('review')">Reviews</li>
         </ul>
-      </div>
+      </div> -->
+
       <div class="tab_content">
         <div class="tab_content_inner" [hidden]="tab !='detail'"> 
-          <div class="detail_tab">
+          <!-- <div class="detail_tab">
               <ion-row>
                   <ion-col>
                     <p class="textLeft">Service</p>
@@ -69,8 +70,8 @@
                       <p class="textRight">$50</p>
                     </ion-col>
               </ion-row>
-          </div>
-          <div class="total_amount">
+          </div> -->
+          <!-- <div class="total_amount">
             <div class="total_inner">
                 <ion-row>
                     <ion-col>
@@ -81,48 +82,43 @@
                     </ion-col>
                 </ion-row>
             </div>
-          </div>
+          </div> -->
           <div class="content_detail">
               <h4>Service Details</h4>
               <div class="content_inner">
-                <ul>
+                <ul *ngIf="serviceDetail.subservices">
                   <li>
-                    <img src="../../assets/img/asset_menu6.png">
-                    <span>Clutch & Transmissions</span>
-                    <div class="clear"></div>
-                  </li>
-                  <li>
-                    <img src="../../assets/img/asset_menu10.png">
-                    <span>Exterior and Interior</span>
+                    <span>{{serviceDetail.subservices}}</span>
                     <div class="clear"></div>
                   </li>
                 </ul>
               </div>
               <h4>Car Details</h4>
-              <div class="content_inner">
+              <div class="content_inner" *ngIf="serviceDetail">
                 <ul>
-                  <li>
-                    <ion-row>
-                      <ion-col><p>Brand :</p></ion-col>
-                      <ion-col>Rolls royce</ion-col>
-                    </ion-row>
-                  </li>
-                  <li>
+                 
+                  <li *ngIf="serviceDetail.make">
                       <ion-row>
                           <ion-col><p>Name :</p></ion-col>
-                          <ion-col>Ghost</ion-col>
+                          <ion-col>{{serviceDetail.vehicle_name}}</ion-col>
                       </ion-row>
                   </li>
-                  <li>
+                  <li *ngIf="serviceDetail.model">
                       <ion-row>
                           <ion-col><p>Model :</p></ion-col>
-                          <ion-col>2019</ion-col>
+                          <ion-col>{{serviceDetail.model}}</ion-col>
                       </ion-row>
                   </li>
-                  <li>
+                  <li *ngIf="serviceDetail.mileage">
                       <ion-row>
                           <ion-col><p>Mileage :</p></ion-col>
-                          <ion-col>20</ion-col>
+                          <ion-col>{{serviceDetail.mileage}}</ion-col>
+                      </ion-row>
+                  </li>
+                  <li *ngIf="serviceDetail.make">
+                    <ion-row>
+                      <ion-col><p>Make :</p></ion-col>
+                      <ion-col>{{serviceDetail.make}}</ion-col>
                     </ion-row>
                   </li>
                 </ul>
@@ -130,39 +126,33 @@
               <h4>Date & Time</h4>
               <div class="content_inner">
                 <ul>
-                  <li>
+                  <li *ngIf="serviceDetail.booking_date">
                     <ion-row>
                       <ion-col><p>Date :</p></ion-col>
-                      <ion-col>June 25 th 2019</ion-col>
+                      <ion-col>{{serviceDetail.booking_date}}</ion-col>
                     </ion-row>
                   </li>
-                  <li>
+                  <!-- <li>
                       <ion-row>
                           <ion-col><p>Time:</p></ion-col>
                           <ion-col>10:30 pm to 11:00pm</ion-col>
                       </ion-row>
-                  </li>
+                  </li> -->
                 </ul>
               </div>
               <h4>Your Message</h4>
-              <div class="content_inner">
+              <div class="content_inner" *ngIf="serviceDetail.requirement" >
                 <ul>
                   <li>
                     <ion-row>
-                      <ion-col>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-                         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-                          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                           deserunt mollit anim id est laborum</ion-col>
+                      <ion-col>{{serviceDetail.requirement}}</ion-col>
                     </ion-row>
                   </li>
                 </ul>
               </div>
           </div>
         </div>
-        <div class="tab_content_inner" [hidden]="tab !='about'">
+        <!-- <div class="tab_content_inner" [hidden]="tab !='about'">
           <div class="top_div">
             <div class="pic_circle"></div>
             <div class="pic_details">
@@ -276,13 +266,14 @@
                     </div>
               </li>
             </ul>
+          </div> -->
         </div>
         </div>
-      </div>
-  </div>
+      <!-- </div> -->
+ 
 </ion-content>
 
-<div class="review_wrapper" *ngIf="isShow" [@slideInOut]>
+<!-- <div class="review_wrapper" *ngIf="isShow" [@slideInOut]>
     <div class="rate_card">
       <div class="inner_shop_name">
         <ion-row>
@@ -310,6 +301,6 @@
           </ion-col>
       </ion-row>
     </div>
-  </div>
+  </div> -->
 
 

src/app/servicedetails/servicedetails.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { trigger, transition, animate, style } from '@angular/animations';
-import { Router,ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
+import { StorageService } from '../../Config/services/storage.service';
+import { ValidationService } from '../../Config/services/validation.service';
+import { AuthenticationService } from '../../Config/services/auth.service';
 
 @Component({
   selector: 'app-servicedetails',
@@ -20,16 +23,24 @@ import { Router,ActivatedRoute } from '@angular/router';
   ]
 })
 export class ServicedetailsPage implements OnInit {
-
-  tab:any;
+  getData: any;
+  tab: any;
   isShow = false;
-
+  userData: any;
+  serviceDetail: any;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location
+    private location: Location,
+    private storageService: StorageService,
+    private authenticationservice: AuthenticationService,
+    private validationservice: ValidationService
   ) {
-    this.tab = "detail";
+    this.tab = 'detail';
+    const Data =  decodeURIComponent((this.route.snapshot.paramMap.get('id')));
+    this.getData = JSON.parse(Data);
+    console.log(this.getData);
+    this.getServiceDetails(this.getData);
   }
 
   ngOnInit() {
@@ -40,8 +51,8 @@ export class ServicedetailsPage implements OnInit {
    }
 
 
-  goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
+  goToPage(path, data= null) {
+    this.router.navigateByUrl(path, {queryParams: data});
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
 
@@ -49,8 +60,19 @@ export class ServicedetailsPage implements OnInit {
     this.location.back();
   }
 
-  istoggle(){
+  istoggle() {
     this.isShow = !this.isShow;
   }
-
+  getStorageData() {
+    this.userData = JSON.parse(this.storageService.getLocalStorageItem('userData'));
+  }
+  getServiceDetails(id) {
+    this.validationservice.presentLoader();
+    this.authenticationservice.get_data('user_requestServiceDetails?id=' + id).subscribe((response) => {
+      this.validationservice.dismissLoader();
+      if (response.status === 'success') {
+        this.serviceDetail = response.data[0];
+      }
+    });
+  }
 }

src/app/success/success.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { SuccessPage } from './success.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SuccessPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [SuccessPage]
+})
+export class SuccessPageModule {}

src/app/success/success.page.html

+<ion-content>
+  <div class="waiting_wrapper">
+    <div class="logo">
+      <img src="../../assets/img/asset_waiting1.png">
+    </div>
+    <h4>Thank you for using ALLOREPAR</h4>
+    <h3>We got your Booking</h3>
+    <p>Garage will update you soon.</p>
+        <button class="back_btn1" (click)="goToPage('home')">Home</button><br>
+        <!-- <button class="home">Service History</button> -->
+  </div>
+</ion-content>
+

src/app/success/success.page.scss

+.waiting_wrapper{
+    width:100%;
+    height:100vh;
+    background: url("../../assets/img/asset_waiting_background.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    text-align: center;
+    padding-top:30%;
+    .logo{
+
+
+        margin:0 auto;
+    }
+    h4{
+        color: #fbd339;
+        padding-bottom: 5px;
+        padding-top: 5px;
+       
+    }
+    h3{
+        color: #fff;
+        padding-top: 10px;
+        font-size: 18px;
+    }
+    p{
+        color: #fff;
+        font-weight: 300;
+        padding-bottom: 10px;
+    }
+
+    .back_btn1{
+        background-color: #8769f4;
+        color: #fff;
+        padding:5px;
+        display: inline-block;
+        padding: 10px;
+        font-size: 18px;
+        padding-left: 25px;
+        padding-right: 25px;
+        border-radius: 20px;
+    }
+
+    .distance{
+        border:1px solid #fff;
+        color: #fff;
+        display: inline-block;
+        padding: 5px;
+        font-size: 18px;
+        padding-left: 35px;
+        padding-right: 25px;
+        border-radius: 20px;
+        background: url("../../assets/img/aaset_loc1.png");
+        background-position: left 15px top 6px;
+        background-repeat: no-repeat;
+        background-size: 18px;
+    }
+
+    .home{
+        margin-top: 20%;
+        color: #8769f4;
+        background: url("../../assets/img/asset_rplay.png");
+        background-position: left;
+        background-repeat: no-repeat;
+        font-size: 18px;
+        background-size: 11px;
+        padding-left: 20px;
+        padding-right:20px;
+    }
+}
\ No newline at end of file

src/app/success/success.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SuccessPage } from './success.page';
+
+describe('SuccessPage', () => {
+  let component: SuccessPage;
+  let fixture: ComponentFixture<SuccessPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SuccessPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SuccessPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/success/success.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router, ActivatedRoute } from '@angular/router';
+@Component({
+  selector: 'app-success',
+  templateUrl: './success.page.html',
+  styleUrls: ['./success.page.scss'],
+})
+export class SuccessPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location,
+  ) { }
+
+  ngOnInit() {
+  }
+  goToPage(path, data= null) {
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+}

src/app/successbooking/successbooking.component.html

+<p>
+  successbooking works!
+</p>

src/app/successbooking/successbooking.component.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SuccessbookingComponent } from './successbooking.component';
+
+describe('SuccessbookingComponent', () => {
+  let component: SuccessbookingComponent;
+  let fixture: ComponentFixture<SuccessbookingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SuccessbookingComponent ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SuccessbookingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/successbooking/successbooking.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-successbooking',
+  templateUrl: './successbooking.component.html',
+  styleUrls: ['./successbooking.component.scss'],
+})
+export class SuccessbookingComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/summary/summary.page.ts

@@ -43,6 +43,7 @@ export class SummaryPage implements OnInit {
   }
   getDatafromStorage() {
    this.userData = JSON.parse(this.storageservice.getLocalStorageItem('userData')) ;
+   console.log(this.userData);
   }
   ConfirmbookService() {
     this.validationService.presentLoader();