29/11/2019

config.xml

 <?xml version='1.0' encoding='utf-8'?>
-<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
-    <name>MyApp</name>
-    <description>An awesome Ionic/Cordova app.</description>
+<widget id="com.techware.kevin.allorepo" version="0.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+    <name>Allorepo</name>
+    <description>Mechanic App</description>
     <author email="[email protected]" href="http://ionicframework.com/">Ionic Framework Team</author>
     <content src="index.html" />
     <access origin="*" />
@@ -18,7 +18,8 @@
     <preference name="FadeSplashScreenDuration" value="300" />
     <preference name="SplashShowOnlyFirstTime" value="false" />
     <preference name="SplashScreen" value="screen" />
-    <preference name="SplashScreenDelay" value="3000" />
+    <preference name="SplashScreenDelay" value="1000" />
+    <preference name="AndroidPersistentFileLocation" value="Compatibility" />
     <platform name="android">
         <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
             <application android:networkSecurityConfig="@xml/network_security_config" />

package.json

@@ -13,6 +13,7 @@
   },
   "private": true,
   "dependencies": {
+    "@agm/core": "^1.0.0",
     "@angular/animations": "^8.0.3",
     "@angular/common": "^7.2.2",
     "@angular/core": "^7.2.2",
@@ -23,25 +24,37 @@
     "@angular/router": "^7.2.2",
     "@ionic-native/call-number": "^5.15.0",
     "@ionic-native/core": "^5.0.0",
+    "@ionic-native/file-transfer": "^5.15.1",
     "@ionic-native/geolocation": "^5.15.0",
+    "@ionic-native/image-picker": "^5.15.1",
+    "@ionic-native/native-geocoder": "^5.0.0",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic-native/toast": "^5.15.0",
     "@ionic/angular": "^4.1.0",
+    "@ngx-translate/core": "^11.0.1",
+    "@ngx-translate/http-loader": "^4.0.0",
     "@types/jquery": "^3.3.31",
+    "agm-direction": "^0.7.9",
     "angular-calendar": "^0.27.14",
+    "angularfire2": "^5.2.1",
     "call-number": "^1.0.1",
     "cordova-android": "^8.1.0",
     "cordova-plugin-device": "^2.0.2",
+    "cordova-plugin-file": "^6.0.2",
+    "cordova-plugin-file-transfer": "^1.7.1",
     "cordova-plugin-geolocation": "^4.0.2",
     "cordova-plugin-ionic-keyboard": "^2.1.3",
     "cordova-plugin-ionic-webview": "^4.1.1",
+    "cordova-plugin-nativegeocoder": "^3.2.2",
     "cordova-plugin-splashscreen": "^5.0.2",
     "cordova-plugin-statusbar": "^2.4.2",
+    "cordova-plugin-telerik-imagepicker": "^2.3.3",
     "cordova-plugin-whitelist": "^1.3.3",
     "cordova-plugin-x-toast": "^2.7.2",
     "core-js": "^2.5.4",
     "date-fns": "^1.30.1",
+    "firebase": "^7.2.2",
     "ionic2-calendar": "^0.5.2",
     "jquery": "^3.4.1",
     "rxjs": "~6.5.1",
@@ -88,7 +101,10 @@
       "cordova-plugin-ionic-keyboard": {},
       "cordova-plugin-geolocation": {},
       "cordova-plugin-x-toast": {},
-      "mx.ferreyra.callnumber": {}
+      "mx.ferreyra.callnumber": {},
+      "cordova-plugin-nativegeocoder": {},
+      "cordova-plugin-telerik-imagepicker": {},
+      "cordova-plugin-file-transfer": {}
     },
     "platforms": [
       "android"

src/Config/model/productbooking.ts

+export interface Productbooking {
+    user_id: any;
+    delivery_adressId: any;
+    prod_id: any;
+    car_id: any;
+}

src/Config/services/auth.service.ts

@@ -19,4 +19,7 @@ export class AuthenticationService {
   public uploadFormData(url, formData) {
     return this.http.post<any>(`${devURL + url}`, formData).pipe(map((response: any) => response));
   }
+  getGoogleLocationData(lat, lng) {
+    return this.http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lng+'&key=AIzaSyBniwyiEPSjS9IUvbhBmS0ampJkzE2cSS0').pipe(map((response: any) => response));
+  }
 }

src/Config/services/chat.service.ts

+import { Injectable } from '@angular/core';
+import { AngularFirestore } from '@angular/fire/firestore';
+
+import { Router } from '@angular/router';
+import { firestore } from 'firebase/app';
+import { map, switchMap } from 'rxjs/operators';
+import { Observable, combineLatest, of } from 'rxjs';
+import { StorageService } from '../../Config/services/storage.service';
+@Injectable({
+  providedIn: 'root'
+})
+export class ChatService {
+    userData: any;
+  constructor(
+    private afs: AngularFirestore,
+    private router: Router,
+    private storageService: StorageService
+  ) {
+    this.userData = JSON.parse(this.storageService.getLocalStorageItem('userData'));
+    console.log(this.userData);
+  }
+
+  get(chatId) {
+    return this.afs
+      .collection<any>('chats')
+      .doc(chatId)
+      .snapshotChanges()
+      .pipe(
+        map(doc => {
+          return { id: doc.payload.id, ...doc.payload.data() };
+        })
+      );
+  }
+
+  async create() {
+    const { id } = this.userData.id;
+
+    const data = {
+        id:1,
+        time: 1,
+        sender_type: 1,
+      messages: [],
+      user_id: 1
+    };
+
+    const docRef = await this.afs.collection('chats').add(data);
+     console.log(docRef);
+
+    // return this.router.navigate(['chats', docRef.id]);
+  }
+
+  async sendMessage(chatId, content) {
+    const { uid } =  this.userData.id;
+
+    const data = {
+      uid,
+      content,
+      createdAt: Date.now()
+    };
+
+    if (uid) {
+      const ref = this.afs.collection('chats').doc(chatId);
+      return ref.update({
+        messages: firestore.FieldValue.arrayUnion(data)
+      });
+    }
+  }
+
+}
\ No newline at end of file

src/Config/services/storage.service.ts

@@ -9,6 +9,9 @@ export class StorageService {
   setLocalStorageItem(id: string, data: string) {
     localStorage.setItem(id, data);
   }
+  setProfilePic(data: string) {
+    localStorage.setItem('profilePic' , data);
+  }
   getLocalStorageItem(data: string): string {
       return localStorage.getItem(data);
   }

src/Config/services/translateconfig.service.ts

+import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TranslateConfigService {
+
+  constructor(
+    private translate: TranslateService
+  ) { }
+
+  getDefaultLanguage() {
+    const language = this.translate.getBrowserLang();
+    this.translate.setDefaultLang(language);
+    return language;
+  }
+
+  setLanguage(setLang) {
+    this.translate.use(setLang);
+  }
+
+}

src/app/addaddress/addaddress.page.html

@@ -22,9 +22,9 @@
                 <p>Phone Number</p>
                 <ion-row class="p0">
                   <ion-col size="4">
-                    <!-- <ion-select >
-                      <ion-select-option value="" formControlName="">+33</ion-select-option>
-                    </ion-select> -->
+                    <ion-select  formControlName="phone_code">
+                      <ion-select-option value = +33 >+33</ion-select-option>
+                    </ion-select>
                   </ion-col>
                   <ion-col size="8">
                     <ion-input value="" type="number" formControlName="phone_no"></ion-input>

src/app/addaddress/addaddress.page.ts

@@ -21,7 +21,8 @@ export class AddaddressPage implements OnInit {
     area: ['', Validators.required],
     house_no: ['', Validators.required],
     city: ['', Validators.required],
-    district: ['Ernakulam'],
+    district: [''],
+    phone_code: ['' , Validators.required],
     user_id: ['', Validators.required]
   });
   constructor(
@@ -49,7 +50,7 @@ export class AddaddressPage implements OnInit {
   }
   addnewAddress() {
     this.deliveryaddressForm.patchValue({
-      user_id : this.userData.id
+      user_id : this.userData.profile_id
     });
     if ( this.deliveryaddressForm.valid) {
     console.log(this.deliveryaddressForm.value);
@@ -57,6 +58,7 @@ export class AddaddressPage implements OnInit {
       console.log(data);
       if ( data.status === 'success') {
         this.validationservice.presentToast(data.message);
+        this.goToPage('home');
       } else {
         this.validationservice.presentToast(data.message);
       }

src/app/addcar/addcar.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';
@@ -18,6 +18,7 @@ const routes: Routes = [
   imports: [
     CommonModule,
     FormsModule,
+    ReactiveFormsModule,
     IonicModule,
     RouterModule.forChild(routes)
   ],

src/app/addcar/addcar.page.html

@@ -6,43 +6,38 @@
             
                 </button>
                 <div class="nav_title floatLeft"><h4>ADD YOUR CAR</h4></div>
-                <button class="nav_btn nav_btn_text floatRight" (click)="goToPage('login')">
+                <!-- <button class="nav_btn nav_btn_text floatRight" (click)="goToPage('login')">
                   Skip
                 </button>
-                <div class="clear"></div>
+                <div class="clear"></div> -->
               </div>
               <div class="forgot_form">
-                <div class="showcar">
+                    <form [formGroup]="addCar">
+                <!-- <div class="showcar">
                   <img src="../../assets/img/asset_show_car.png">
-                </div>
+                </div> -->
+                <div class="row">
+                   
+                        <ion-input formControlName="car_VinNumber"  placeholder="Car VIN Number" type="text"></ion-input>
+                    </div>
                 <div class="row">
-                    <ion-select placeholder="">
-                        <ion-select-option value="" selected>Company Name</ion-select-option>
-                    </ion-select>
+                   
+                    <ion-input formControlName="car_brand"  placeholder="Company" type="text"></ion-input>
                 </div>
                 <div class="row">
-                    <ion-select placeholder="">
-                        <ion-select-option value="" selected>Modal Name</ion-select-option>
-                    </ion-select>
+                    <ion-input  formControlName="car_model" placeholder="Model" type="text"></ion-input>
                 </div>
                 <div class="row">
-                    <ion-select placeholder="">
-                        <ion-select-option value="" selected>Modal Year</ion-select-option>
-                    </ion-select>
+                    <ion-input formControlName="car_year" placeholder="Year" type="number"></ion-input>
                 </div>
                 <div class="row">
-                    <p>Mileage</p>
-                    <ion-select placeholder="">
-                        <ion-select-option value="" selected>0 - 10km</ion-select-option>
-                    </ion-select>
+                   
+                    <ion-input  formControlName="car_milege" placeholder="Milege" type="number"></ion-input>
                 </div>
-
-                
-               
-              
                 <div class="row textCenter">
-                    <button class="signup_btn" (click)="goToPage('login')">Add My car</button>
+                    <button class="signup_btn" (click)="addUserCar()">Add My car</button>
                 </div>
+                </form>
               </div>
         </div>
       </ion-content>

src/app/addcar/addcar.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 { FormBuilder, Validators } from '@angular/forms';
+import {StorageService } from '../../Config/services/storage.service';
+import { AuthenticationService } from '../../Config/services/auth.service';
+import { ValidationService} from '../../Config/services/validation.service';
 
 @Component({
   selector: 'app-addcar',
@@ -8,25 +12,63 @@ import { Location } from '@angular/common';
   styleUrls: ['./addcar.page.scss'],
 })
 export class AddcarPage implements OnInit {
-
+  userData: any;
+  addCar = this.fb.group({
+    user_id: ['', Validators.required],
+    car_VinNumber: ['', Validators.required],
+    car_brand: ['', Validators.required],
+    car_model: ['', Validators.required],
+    car_year: ['', Validators.required],
+    car_milege: ['', Validators.required]
+  });
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location
-  ) { 
-    
+    private location: Location,
+    private fb: FormBuilder,
+    private storageService: StorageService,
+    private validationService: ValidationService,
+    private authenticationService: AuthenticationService,
+  ) {
+    this.getStorageData();
   }
 
   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();
   }
+  addUserCar() {
+     const formData = new FormData();
+     this.addCar.patchValue({
+      user_id : this.userData.profile_id
+     });
+     console.log(this.addCar.value);
+     if (this.addCar.valid) {
+      formData.append('user_id', this.userData.profile_id);
+      formData.append('car_VinNumber' , this.addCar.value.car_VinNumber);
+      formData.append('car_brand' , this.addCar.value.car_brand);
+      formData.append('car_model' , this.addCar.value.car_model);
+      formData.append('car_year' , this.addCar.value.car_year);
+      formData.append('car_milege' , this.addCar.value.car_milege);
+
+      this.authenticationService.post_data('add_UserCar' , formData).subscribe((data) => {
+        console.log(data);
+        if (data.status === 'success') {
+          this.goToPage('home');
+        }
+      });
+    }
+  }
+  getStorageData() {
+    this.userData = JSON.parse(this.storageService.getLocalStorageItem('userData'));
+    console.log(this.userData);
+  }
 
 }

src/app/app-routing.module.ts

@@ -59,7 +59,7 @@ const routes: Routes = [
     path: 'review',
     loadChildren: './review/review.module#ReviewPageModule'
   },
-  { path: 'waiting', loadChildren: './waiting/waiting.module#WaitingPageModule' },
+  { path: 'waiting/:id', loadChildren: './waiting/waiting.module#WaitingPageModule' },
   { path: 'complete', loadChildren: './complete/complete.module#CompletePageModule' },
   { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
   { path: 'myservices', loadChildren: './myservices/myservices.module#MyservicesPageModule' },
@@ -79,11 +79,21 @@ const routes: Routes = [
   { path: 'purchaseparts', loadChildren: './purchaseparts/purchaseparts.module#PurchasepartsPageModule' },
   { path: 'productbooking/:id', loadChildren: './productbooking/productbooking.module#ProductbookingPageModule' },
   { path: 'addaddress', loadChildren: './addaddress/addaddress.module#AddaddressPageModule' },
-  { path: 'deliveryaddress', loadChildren: './deliveryaddress/deliveryaddress.module#DeliveryaddressPageModule' },
+  { path: 'deliveryaddress/:id', loadChildren: './deliveryaddress/deliveryaddress.module#DeliveryaddressPageModule' },
   { path: 'partproduct', loadChildren: './partproduct/partproduct.module#PartproductPageModule' },
   { path: 'orderdetails', loadChildren: './orderdetails/orderdetails.module#OrderdetailsPageModule' },
   { path: 'listingservice', loadChildren: './listingservice/listingservice.module#ListingservicePageModule' },
-  { path: 'changepassword', loadChildren: './changepassword/changepassword.module#ChangepasswordPageModule' }
+  { path: 'changepassword', loadChildren: './changepassword/changepassword.module#ChangepasswordPageModule' },
+  { path: 'carlistsecond', loadChildren: './carlistsecond/carlistsecond.module#CarlistsecondPageModule' },
+  { 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' }
+
+
+
 
 
 ];

src/app/app.component.ts

@@ -38,6 +38,11 @@ export class AppComponent {
     this.platform.ready().then(() => {
       this.statusBar.styleDefault();
       this.splashScreen.hide();
+      const This = this;
+      // tslint:disable-next-line: only-arrow-functions
+      setInterval(function() {
+        This.geolocationData();
+      }, 3000);
       this.geolocationData();
     });
   }
@@ -45,6 +50,7 @@ export class AppComponent {
     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));
      }).catch((error) => {
        console.log('Error getting location', error);

src/app/app.module.ts

@@ -15,9 +15,22 @@ import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 import { CallNumber } from '@ionic-native/call-number/ngx';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { Geolocation } from '@ionic-native/geolocation/ngx';
 import { Toast } from '@ionic-native/toast/ngx';
+import { NativeGeocoder } from '@ionic-native/native-geocoder/ngx';
+import { ImagePicker } from '@ionic-native/image-picker/ngx';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import { AngularFireModule } from '@angular/fire';
+import { AngularFirestoreModule } from '@angular/fire/firestore';
+import { AngularFireStorageModule } from '@angular/fire/storage';
+import { AngularFireAuthModule } from '@angular/fire/auth';
+import {environment} from '../environments/firebase';
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+  console.log(TranslateHttpLoader);
+}
 
 @NgModule({
   declarations: [
@@ -29,14 +42,27 @@ import { Toast } from '@ionic-native/toast/ngx';
   ],
   imports: [
     BrowserModule,
+    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
+    AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
+    AngularFireStorageModule, // imports firebase/storage only needed for storage features
+    AngularFireModule.initializeApp(environment.firebase),
     HttpClientModule,
     BrowserAnimationsModule,
     IonicModule.forRoot(),
+    TranslateModule.forRoot(),
     AppRoutingModule,
     CalendarModule.forRoot({
       provide: DateAdapter,
       useFactory: adapterFactory
-    })
+    }),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    }),
+    
 
   ],
   providers: [
@@ -45,6 +71,8 @@ import { Toast } from '@ionic-native/toast/ngx';
     Geolocation,
     CallNumber,
     Toast,
+    NativeGeocoder,
+    ImagePicker,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
   ],
   bootstrap: [AppComponent]

src/app/booking/booking.module.ts

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

src/app/booking/booking.page.html

@@ -2,7 +2,7 @@
     <div class="app_header" *ngIf="roadassistantDetails">
         <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
         </button>
-      <div class="nav_title floatLeft"><h4 *ngIf="roadassistantDetails.name">{{roadassistantDetails.name |}}</h4></div>
+      <div class="nav_title floatLeft"><h4 *ngIf="roadassistantDetails.name">{{roadassistantDetails.name}}</h4></div>
       <button class="nav_btn nav_btn_text floatRight">
 
         </button>
@@ -11,17 +11,17 @@
   </ion-header>
 <ion-content>
     <div class="home_wrapper">
-        <div class="location_box">
+        <!-- <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">
-          <button class="btn call_btn">Call Allo Repar</button>
-          <button class="btn book_btn" (click)="goToPage('waiting')">Book Service</button>
+        <div class="btn_bay" *ngIf="roadassistantDetails">
+          <button class="btn call_btn" (click)="callRoadAssistant(roadassistantDetails.phone_no)">{{'Booking.Call to Allorepo' | translate:params}}</button>
+          <button class="btn book_btn" (click)="bookroadassistant()">{{'Booking.Book Service' | translate:params}}</button>
         </div>
         <div class="pay_description">
           <h6>
@@ -38,16 +38,16 @@
               <img src="../../assets/img/asset_c4.png">
             </span>
           </h6>
-          <h6>
+          <!-- <h6 *ngIf="roadassistantDetails">
             <span>
               <img src="../../assets/img/asset_web.png">
-              <a>www.presto.com</a></span>
-          </h6>
+              <a>{{roadassistantDetails.email_id}}</a></span>
+          </h6> -->
         </div>
         <div class="bottom_tab_bay">
           <ul>
-            <li [class.active]="tab == 'about'" (click)="tab_swap('about')">About</li>
-            <li [class.active]="tab == 'review'" (click)="tab_swap('review')">Reviews</li>
+            <li [class.active]="tab == 'about'" (click)="tab_swap('about')">{{'Booking.About' | translate:params}}</li>
+            <li [class.active]="tab == 'review'" (click)="tab_swap('review')">{{'Booking.Reviews' | translate:params}}</li>
           </ul>
         </div>
         <div class="tab_content">
@@ -86,12 +86,12 @@
                     <span *ngIf="ratingDetails">{{ratingDetails.rate}} | {{ratingDetails.reviewNumber}} Reviews</span>
                 </ion-col>
                 <ion-col col-4 class="p0 textRight">
-                  <button class="add_review" (click)="istoggle()">+</button>
+                  <button class="add_review" (click)="istoggle()" disabled>+</button>
                 </ion-col>
               </ion-row>
             </div>
             <div class="review_list">
-              <ul>
+              <!-- <ul>
                 <li>
                     <div class="top_div">
                         <div class="pic_circle"></div>
@@ -164,7 +164,7 @@
                         <div class="clear"></div>
                       </div>
                 </li>
-              </ul>
+              </ul> -->
             </div>
           </div>
         </div>

src/app/booking/booking.page.ts

@@ -7,6 +7,7 @@ import { AuthenticationService } from '../../Config/services/auth.service';
 import { ValidationService} from '../../Config/services/validation.service';
 import {StorageService } from '../../Config/services/storage.service';
 import { CallNumber } from '@ionic-native/call-number/ngx';
+import {TranslateConfigService} from '../../Config/services/translateconfig.service';
 @Component({
   selector: 'app-booking',
   templateUrl: './booking.page.html',
@@ -33,6 +34,9 @@ export class BookingPage {
   isShow = false;
   roadassistantDetails = [];
   reviewDetails = [];
+  locationData: any;
+  userData: any;
+  lang: any;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -40,16 +44,19 @@ export class BookingPage {
     private validationService: ValidationService,
     private authenticationService: AuthenticationService,
     private storageservice: StorageService,
-    private callNumber: CallNumber
+    private callNumber: CallNumber,
+    private translateConfigService: TranslateConfigService
   ) {
     const Data =  decodeURIComponent((this.route.snapshot.paramMap.get('id')));
     this.id = JSON.parse(Data);
     this.tab = 'about';
+    this.getStorageData();
     this.roadassistantDetails = null;
     this.reviewDetails = null;
     this.rating  = 0;
     this.reviewErrormessage = false;
     this.roadassistantDetail(this.id);
+
   }
 
 
@@ -68,7 +75,14 @@ export class BookingPage {
    }
 
 
-
+ getStorageData() {
+  this.userData = JSON.parse(this.storageservice.getLocalStorageItem('userData'));
+  this.locationData = JSON.parse(this.storageservice.getLocalStorageItem('location'));
+  this.lang = JSON.parse(this.storageservice.getLocalStorageItem('lang'));
+  if ( this.lang) {
+   this.langTranslang(this.lang);
+  }
+ }
 
    istoggle() {
     this.isShow = !this.isShow;
@@ -112,4 +126,29 @@ for (let i = 0 ; i < this.reviewcount - 1 ; i++ ) {
 this.ratingDetails = { rate: this.rating, reviewNumber: this.reviewcount };
 
 }
+bookroadassistant() {
+  const today = new Date();
+  const passData = {
+    user_lat: this.locationData.lat,
+    user_lng: this.locationData.lng,
+    user_carId: '1',
+    date:  today,
+    roadassistance_id: this.id,
+    user_id: this.userData.profile_id
+  };
+  this.authenticationService.post_data('book_roadassistance' , passData).subscribe((data) => {
+    console.log(data);
+    if (data.status === 'success') {
+      this.validationService.presentToast('Your booking done successfully');
+      // tslint:disable-next-line: no-shadowed-variable
+      const passData = {road_assistantName: this.roadassistantDetails};
+      this.goToPage('/waiting/' +  encodeURIComponent(JSON.stringify(passData)));
+    } else {
+      this.validationService.presentToast('Booking failed');
+    }
+  });
+}
+langTranslang(lang) {
+  this.translateConfigService.setLanguage(lang);
+}
 }

src/app/carlist/carlist.module.ts

@@ -6,7 +6,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 
 import { CarlistPage } from './carlist.page';
-
+import { TranslateModule } from '@ngx-translate/core';
 const routes: Routes = [
   {
     path: '',
@@ -19,6 +19,7 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
+    TranslateModule.forChild(),
     RouterModule.forChild(routes)
   ],
   declarations: [CarlistPage]

src/app/carlist/carlist.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 CARS</h4></div>
+      <div class="nav_title floatLeft"><h4>{{'Carslist.My Cars' | translate:params}}</h4></div>
       <button class="nav_btn nav_btn_text floatRight">
         <div class="add_car" (click)="goToPage('addcar')">
           +
@@ -13,14 +13,14 @@
 </ion-header>
 <ion-content>
   <div class="carlist">
-    <ul>
-      <li>
+    <ul *ngIf="carDetails">
+      <li *ngFor="let car of carDetails; let i = index"  (click)="bookService(carDetails[i])">
         <div class="auto_pic"></div>
-        <div class="auto_detail" (click)="bookService()">
-          <h4><strong>Rolls Royce</strong> Ghost</h4>
+        <div class="auto_detail">
+          <h4><strong>{{carDetails[i].make}}</strong></h4>
           <div class="auto_detail_inner">
-            <p>Mileage: 08 - 12</p>
-            <p>Model: 2019</p>
+            <p>Mileage: {{carDetails[i].mileage}}</p>
+            <p>Model: {{carDetails[i].model}}</p>
           </div>
         </div>
         <div class="clear"></div>

src/app/carlist/carlist.page.ts

@@ -5,6 +5,8 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { AuthenticationService } from '../../Config/services/auth.service';
 import { ValidationService} from '../../Config/services/validation.service';
 import {StorageService } from '../../Config/services/storage.service';
+import { Productbooking } from '../../Config/model/productbooking';
+import {TranslateConfigService} from '../../Config/services/translateconfig.service';
 @Component({
   selector: 'app-carlist',
   templateUrl: './carlist.page.html',
@@ -14,6 +16,7 @@ export class CarlistPage implements OnInit {
   getData: any;
   userData: any;
   addressList: any;
+  carDetails: any;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -21,6 +24,7 @@ export class CarlistPage implements OnInit {
     private validationService: ValidationService,
     private authenticationService: AuthenticationService,
     private storageservice: StorageService,
+    private translateConfigService: TranslateConfigService
   ) {
     const Data =  decodeURIComponent((this.route.snapshot.paramMap.get('id')));
     this.getData = JSON.parse(Data);
@@ -30,6 +34,7 @@ export class CarlistPage implements OnInit {
   ngOnInit() {
     this.getStorgaeData();
     this.getSavedAddress();
+    this.getCarDetails();
     this.addressList = null;
   }
 
@@ -42,19 +47,26 @@ export class CarlistPage implements OnInit {
   goBack() {
     this.location.back();
   }
-  bookService() {
+  bookService(cardata) {
+    console.log(cardata);
     if ( this.getData.type === 1) {
     // tslint:disable-next-line: max-line-length
-    const passData = {date: this.getData.booking_date, message: this.getData.message, id: [this.getData.subservice_id], car_id: '1', sub_name: this.getData.sub_name, main_name: this.getData.main_name };
+    const passData = {date: this.getData.booking_date, message: this.getData.message, id: [this.getData.subservice_id], car_id: cardata, sub_name: this.getData.sub_name, main_name: this.getData.main_name };
     console.log(JSON.stringify(passData));
     this.goToPage('/summary/' + encodeURIComponent(JSON.stringify(passData)));
   }
     if (this.getData.type === 2) {
-    this.goToPage('deliveryaddress');
+     const passData: Productbooking = {
+     user_id: this.userData.profile_id,
+     prod_id : this.getData.product_id,
+     car_id: cardata.id,
+     delivery_adressId : ''
+     };
+     this.goToPage('/deliveryaddress/' + encodeURIComponent(JSON.stringify(passData)));
   }
 }
 getSavedAddress() {
-  this.authenticationService.get_data('get_deliveryadress?user_id=' + this.userData.id).subscribe((data) => {
+  this.authenticationService.get_data('get_deliveryadress?user_id=' + this.userData.profile_id).subscribe((data) => {
     console.log(data);
     if (data.status === 'success') {
       this.addressList = data.data;
@@ -65,5 +77,17 @@ getSavedAddress() {
 }
 getStorgaeData() {
   this.userData = JSON.parse(this.storageservice.getLocalStorageItem('userData'));
+
+}
+getCarDetails() {
+  this.authenticationService.get_data('get_carList?user_id=' + this.userData.profile_id).subscribe((data) => {
+    console.log(data);
+    if (data.status === 'success') {
+      this.carDetails = data.data;
+    }
+  });
+}
+langTrans() {
+  this.translateConfigService.setLanguage('fr');
 }
 }

src/app/carlistsecond/carlistsecond.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 { CarlistsecondPage } from './carlistsecond.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CarlistsecondPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [CarlistsecondPage]
+})
+export class CarlistsecondPageModule {}

src/app/carlistsecond/carlistsecond.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 CARS</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+        <div class="add_car" (click)="goToPage('addcar')">
+          +
+        </div>
+        </button>
+      <div class="clear"></div>
+  </div>
+</ion-header>
+<ion-content>
+  <div class="carlist">
+    <ul *ngIf="carDetails">
+      <li *ngFor="let car of carDetails; let i = index">
+        <div class="auto_pic"></div>
+        <div class="auto_detail">
+          <h4><strong>{{carDetails[i].make}}</strong></h4>
+          <div class="auto_detail_inner">
+            <p>Mileage: {{carDetails[i].mileage}}</p>
+            <p>Model: {{carDetails[i].model}}</p>
+          </div>
+        </div>
+        <div class="clear"></div>
+      </li>
+    </ul>
+  </div>
+</ion-content>

src/app/carlistsecond/carlistsecond.page.scss

+.add_car{
+    background-color: #39267f;
+    color: #fff;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    font-size: 30px;
+    padding: 4px;
+}
+
+
+
+.carlist{
+    padding:10px;
+    ul{
+        margin:0px;
+        padding:0px;
+        li{
+            list-style: none;
+            padding: 20px;
+            border-radius: 15px;
+            margin-bottom: 10px;
+            -webkit-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+-moz-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+            .auto_pic{
+                width:60px;
+                height:60px;
+                -webkit-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+                -moz-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+                box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+                border-radius:15px;
+                float: left;
+                img{
+                    width: 100%;
+                    height:100%;
+                    border-radius: 15px;
+                    object-fit: cover;
+                    object-position: center;
+                }
+            }
+            .auto_detail{
+                float: left;
+                width: calc(100% - 60px);
+                padding-left:15px;
+                h4{
+                    margin:0px;
+                    padding: 0px;
+                    color: #282438;
+                    font-weight: 400;
+                    padding-bottom:5px;
+                    font-size: 16px;
+                    strong{
+                        font-weight: 500;
+                    }
+                }
+                .auto_detail_inner{
+                    border-left:1px dashed #4e4961;
+                    margin-left:10px;
+                    padding-left: 15px;
+                    p{
+                        margin:0px;
+                        padding: 0px;
+                        color: #a29ebf;
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/carlistsecond/carlistsecond.page.spec.ts

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

src/app/carlistsecond/carlistsecond.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 { AuthenticationService } from '../../Config/services/auth.service';
+import { ValidationService} from '../../Config/services/validation.service';
+import {StorageService } from '../../Config/services/storage.service';
+@Component({
+  selector: 'app-carlistsecond',
+  templateUrl: './carlistsecond.page.html',
+  styleUrls: ['./carlistsecond.page.scss'],
+})
+export class CarlistsecondPage implements OnInit {
+  userData: any;
+  carDetails: any;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location,
+    private validationService: ValidationService,
+    private authenticationService: AuthenticationService,
+    private storageservice: StorageService,
+  ) {
+    this.getCarDetails();
+  }
+
+  ngOnInit() {
+  }
+  goToPage(path, data= null) {
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+  getStorgaeData() {
+    this.userData = JSON.parse(this.storageservice.getLocalStorageItem('userData'));
+  }
+  getCarDetails() {
+    this.authenticationService.get_data('get_carList?user_id=' + this.userData.profile_id).subscribe((data) => {
+      console.log(data);
+      if (data.status === 'success') {
+        this.carDetails = data.data;
+      }
+    });
+  }
+}

src/app/chat/chat.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 { ChatPage } from './chat.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ChatPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ChatPage]
+})
+export class ChatPageModule {}

src/app/chat/chat.page.html

+<ion-header>
+  <div class="app_header">
+      <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+  </button>
+      <div class="nav_title floatLeft">
+          <h4>ALLO CHAT</h4>
+      </div>
+      <button class="nav_btn nav_btn_text floatRight">
+
+  </button>
+      <div class="clear"></div>
+  </div>
+</ion-header>
+<ion-content class="chat_sign_bg home_background">
+  <div class="chat_chat_wrap">
+      <ul>
+          <li class="chat_received">
+              <div class="chat_message_content">
+                  <p>Hi, Ann Alexander</p>
+                  <span>Apr 13</span><span>10 : 00 am</span>
+              </div>
+              <div class="clear"></div>
+          </li>
+          <li class="chat_sented">
+              <div class="chat_message_content">
+                  <p>Hi, I needed a Nutrition expert</p>
+                  <span>Apr 13</span><span>10 : 00 am</span>
+              </div>
+              <div class="clear"></div>
+          </li>
+      </ul>
+  </div>
+</ion-content>
+<ion-footer padding>
+  <div class="chat_chat_type_wrapper">
+      <input class="chat_type_text" type="text" placeholder="Type here">
+      <button class="chat_send">
+        <ion-icon name="send"></ion-icon>
+      </button>
+      <div class="clear"></div>
+  </div>
+</ion-footer>
\ No newline at end of file

src/app/chat/chat.page.scss

+.home_background {
+    background: #f6f5fa;
+}
+
+.chat_chat_wrap {
+    width: 100%;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.chat_chat_wrap ul {
+    margin: 0px;
+    padding: 0px;
+}
+
+.chat_chat_wrap ul li {
+    list-style: none;
+    padding-bottom: 20px;
+}
+
+.chat_message_photo {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+}
+
+.chat_message_photo img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+
+.chat_message_content {
+    position: relative;
+}
+
+.chat_message_content h6 {
+    margin: 0px;
+    padding-bottom: 10px;
+    font-weight: 400;
+}
+
+.chat_message_content p {
+    margin: 0px;
+    padding: 15px;
+    border-radius: 0px;
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-bottom: 5px;
+    font-weight: 400;
+    font-size: 16px;
+}
+
+.chat_message_content span {
+    margin: 0px;
+    color: #a4a1a1;
+    font-size: 12px;
+}
+
+.chat_received {}
+
+.chat_sented {}
+
+.chat_received .chat_message_content {
+    float: left;
+    text-align: left;
+}
+
+.chat_received .chat_message_content p {
+    background: #FBD436;
+    color: #242035;
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+}
+
+.chat_received .chat_message_content span {
+    margin-right: 10px;
+}
+
+.chat_sented .chat_message_content {
+    float: right;
+    text-align: right;
+}
+
+.chat_sented .chat_message_content p {
+    background: #362180;
+    // color: #fff;
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+}
+
+.chat_sented .chat_message_content span {
+    margin-left: 10px;
+}
+
+.chat_chat_type_wrapper {
+    width: 100%;
+    position: relative;
+}
+
+.chat_chat_type_wrapper input {
+    width: calc(100% - 60px);
+    background: #fff;
+    height: 50px;
+    font-size: 20px;
+    border: none;
+    padding-left: 15px;
+    // color: #fff;
+    font-weight: 300;
+    border: 1px solid #dcdae9;
+    border-radius: 30px;
+    float: left;
+}
+
+.chat_chat_type_wrapper input::placeholder {
+    color: #dcdae9;
+}
+
+.chat_send {
+    background: transparent;
+    width: 50px;
+    height: 50px;
+    background-color: #39267f;
+    float: right;
+    margin-left: 10px;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 20px;
+}
\ No newline at end of file

src/app/chat/chat.page.spec.ts

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

src/app/chat/chat.page.ts

+import { Component, OnInit } from '@angular/core';
+import { ChatService } from '../../Config/services/chat.service';
+import { Observable } from 'rxjs';
+@Component({
+  selector: 'app-chat',
+  templateUrl: './chat.page.html',
+  styleUrls: ['./chat.page.scss'],
+})
+export class ChatPage implements OnInit {
+  chat$: Observable<any>;
+  newMsg: string;
+  constructor(
+    public cs: ChatService
+  ) { }
+
+  ngOnInit() {
+    this.cs.create();
+  }
+  submit(chatId) {
+    this.cs.sendMessage(chatId, this.newMsg);
+    this.newMsg = '';
+  }
+}

src/app/date/date.module.ts

@@ -6,7 +6,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 
 import { DatePage } from './date.page';
-
+import { TranslateModule } from '@ngx-translate/core';
 const routes: Routes = [
   {
     path: '',
@@ -20,6 +20,7 @@ const routes: Routes = [
     FormsModule,
     ReactiveFormsModule,
     IonicModule,
+    TranslateModule.forChild(),
     RouterModule.forChild(routes)
   ],
   declarations: [DatePage]

src/app/date/date.page.html

@@ -2,7 +2,7 @@
     <div class="app_header relative">
         <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
         </button>
-      <div class="nav_title floatLeft"><h4>DATE & TIME</h4></div>
+      <div class="nav_title floatLeft"><h4>{{'Date.Date' | translate:params}}</h4></div>
       <button class="nav_btn nav_btn_text floatRight">
         </button>
       <div class="clear"></div>
@@ -13,10 +13,10 @@
   <div class="select_services_wrapper">
    
       <ion-item>
-        <ion-label>Pick Date</ion-label>
+        <ion-label>{{'Date.Pick Date' | translate:params}}</ion-label>
         <ion-datetime displayFormat="DD MM YY" [(ngModel)]="myDate" placeholder="Select Date" ></ion-datetime>
       </ion-item>
-      <h4>Instruction</h4>
+      <h4>{{'Date.Instruction' | translate:params}}</h4>
       <textarea rows="6" placeholder="Type here..."  [(ngModel)]="Message" ></textarea>
   
   </div>
@@ -28,7 +28,7 @@
               <!-- <h6>{{myDate}}</h6> -->
           </ion-col>
           <ion-col size="3">
-            <button class="next_btn floatRight" (click)="movetoSelectCar()">NEXT</button>
+            <button class="next_btn floatRight" (click)="movetoSelectCar()">{{'Date.Next' | translate:params}}</button>
             <div class="clear"></div>
           </ion-col>
         </ion-row>

src/app/date/date.page.ts

@@ -3,7 +3,8 @@ import { trigger, transition, animate, style } from '@angular/animations';
 import { Location } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
 import { FormBuilder, Validators } from '@angular/forms';
-
+import {TranslateConfigService} from '../../Config/services/translateconfig.service';
+import { StorageService } from '../../Config/services/storage.service';
 @Component({
   selector: 'app-date',
   templateUrl: './date.page.html',
@@ -14,13 +15,20 @@ export class DatePage implements OnInit {
   Message: any;
   getData: any;
   today = new Date();
+  lang: any;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
     private location: Location,
-    private fb: FormBuilder
+    private fb: FormBuilder,
+    private translateConfigService: TranslateConfigService,
+    private storageservice: StorageService
   ) {
     console.log(this.myDate);
+    this.lang = JSON.parse(this.storageservice.getLocalStorageItem('lang'));
+    if ( this.lang) {
+     this.langTrans(this.lang);
+    }
   }
 
   ngOnInit() {
@@ -43,4 +51,7 @@ export class DatePage implements OnInit {
   const passData = {subservice_id: this.getData.sub_id, booking_date: this.myDate , message: this.Message, sub_name: this.getData.sub_name,main_name:this.getData.main_name ,type:1}
   this.goToPage('/carlist/' + encodeURIComponent(JSON.stringify(passData)));
 }
+langTrans(lang) {
+  this.translateConfigService.setLanguage(lang);
+}
 }

src/app/deliveryaddress/deliveryaddress.module.ts

@@ -6,7 +6,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 
 import { DeliveryaddressPage } from './deliveryaddress.page';
-
+import { TranslateModule } from '@ngx-translate/core';
 const routes: Routes = [
   {
     path: '',
@@ -19,6 +19,7 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
+    TranslateModule.forChild(),
     RouterModule.forChild(routes)
   ],
   declarations: [DeliveryaddressPage]

src/app/deliveryaddress/deliveryaddress.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>DELIVERY ADDRESS</h4></div>
+      <div class="nav_title floatLeft"><h4>{{'deliveryaddress.Delivery Address' | translate:params}}</h4></div>
       <button class="nav_btn nav_btn_text floatRight">
         <div class="add_car" (click)="goToPage('addaddress')">
           +
@@ -12,11 +12,10 @@
   </div>
 </ion-header>
 <ion-content>
-  <div class="delivery_wrapper">
+  <div class="delivery_wrapper" *ngIf="saveAddress">
     <ul>
-      <li>adadd</li>
-      <li>adadd</li>
-      <li>adadd</li>
+      <li *ngFor="let address of saveAddress; let i = index" (click)="requestProduct(address)">{{'deliveryaddress.Name' | translate:params}}:{{saveAddress[i].name}}<br>{{'deliveryaddress.Phone' | translate:params}}:{{saveAddress[i].phone_no}}<br>{{'deliveryaddress.House' | translate:params}}:{{saveAddress[i].house_no}}<br>{{'deliveryaddress.Area' | translate:params}}:{{saveAddress[i].area}}<br>{{'deliveryaddress.City' | translate:params}}:{{saveAddress[i].city}}<br>{{'deliveryaddress.Country' | translate:params}}:{{saveAddress[i].country}}</li>
+    
     </ul>
   </div>
 </ion-content>

src/app/deliveryaddress/deliveryaddress.page.ts

@@ -5,7 +5,8 @@ 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';
-
+import { Productbooking } from '../../Config/model/productbooking';
+import {TranslateConfigService} from '../../Config/services/translateconfig.service';
 @Component({
   selector: 'app-deliveryaddress',
   templateUrl: './deliveryaddress.page.html',
@@ -14,19 +15,30 @@ import { AuthenticationService } from '../../Config/services/auth.service';
 export class DeliveryaddressPage implements OnInit {
   userData: any;
   saveAddress: any;
+  getData: any;
+  lang: any;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
     private location: Location,
     private storageService: StorageService,
     private authenticationservice: AuthenticationService,
-    private validationservice: ValidationService
+    private validationservice: ValidationService,
+    private translateConfigService: TranslateConfigService
   ) {
+
     this.saveAddress = null;
+    this.getStorgaeData();
+    this.getuserSavedAddress();
+    this.lang = JSON.parse(this.storageService.getLocalStorageItem('lang'));
+    if ( this.lang) {
+     this.langTrans(this.lang);
+    }
    }
 
   ngOnInit() {
-
+   const Data = decodeURIComponent((this.route.snapshot.paramMap.get('id')));
+   this.getData = JSON.parse(Data);
   }
 
   goToPage(path, data= null) {
@@ -46,11 +58,39 @@ export class DeliveryaddressPage implements OnInit {
       console.log(data);
       if (data.status === 'success') {
         this.saveAddress = data.data;
+        console.log(this.saveAddress);
       } else {
         this.saveAddress = '';
         this.validationservice.presentToast(data.message);
       }
     });
   }
-
+  requestProduct(addressData) {
+   if (addressData) {
+  this.validationservice.presentLoader();
+  console.log(this.getData);
+  this.getData.delivery_adressId = 2;
+  const passData: Productbooking = {
+    user_id : this.getData.user_id,
+    delivery_adressId : addressData.id,
+    prod_id : this.getData.prod_id,
+    car_id : this.getData.car_id
+  };
+  // this.authenticationservice.post_data('request_product', passData).subscribe((data) => {
+  //   console.log(data)
+  //   if (data.status === 'success') {
+  //     this.goToPage('waiting1');
+  //   }
+  // });
+  const This = this;
+  // tslint:disable-next-line: only-arrow-functions
+  setTimeout(function() {
+     This.validationservice.dismissLoader();
+     This.goToPage('waiting1');
+    }, 3000);
+  }
+}
+  langTrans(lang) {
+    this.translateConfigService.setLanguage(lang);
+  }
 }

src/app/home/home.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { IonicModule } from '@ionic/angular';
 import { RouterModule } from '@angular/router';
-
+import { TranslateModule } from '@ngx-translate/core';
 import { HomePage } from './home.page';
 
 @NgModule({
@@ -11,6 +11,7 @@ import { HomePage } from './home.page';
     CommonModule,
     FormsModule,
     IonicModule,
+    TranslateModule.forChild(),
     RouterModule.forChild([
       {
         path: '',

src/app/home/home.page.html

@@ -15,8 +15,8 @@
 <ion-content>
   <div class="home_wrapper">
     <div class="location_box">
-        <div class="location_bar">
-            Infopark,Kakkanad
+        <div class="location_bar" *ngIf="displayLocationData">
+            {{displayLocationData}}
           </div>
     </div>
     
@@ -24,21 +24,21 @@
         <ion-row>
             <ion-col class="textCenter" (click)="goToPage('roadassistance')">
               <img src="../../assets/img/asset_menu1.png">
-              <p>Road <br>Assistance</p>
+              <p>Road<br>{{'home.Assistance' | translate:params}}</p>
             </ion-col>
             <ion-col class="textCenter" (click)="goToPage('listingservice')">
                 <img src="../../assets/img/asset_menu2.png">
-                <p>Car<br>Services</p>
+                <p>{{'home.Car' | translate:params}}<br>{{'home.Services' | translate:params}}</p>
             </ion-col>
             <ion-col class="textCenter" (click)="goToPage('purchaseparts')">
                 <img src="../../assets/img/asset_menu3.png">
-                <p>Parts<br>Purchase</p>
+                <p>{{'home.Parts' | translate:params}}<br>{{'home.Purchase' | translate:params}}</p>
             </ion-col>
         </ion-row>
     </div>
     <div class="header_submenu">
-      <h4>People most purchased</h4>
-      <button class="more_btn" (click)="goToPage('purchaseparts')">More</button>
+      <h4>{{'home.People most purchased' | translate:params}}</h4>
+      <button class="more_btn" (click)="goToPage('purchaseparts')">{{'home.more' | translate:params}}</button>
       <div class="clear"></div>
     </div>
     <div class="product_section" *ngIf="peopleMostpurchasedList" >
@@ -55,70 +55,34 @@
         </ion-col>
       </ion-row>
     </div>
-    <div class="appointment_slider">
+     <div class="appointment_slider">
         <ion-slides pager="false">
-            <ion-slide>
-                <div class="appointment_card">
-                    <ion-row>
-                      <ion-col col-8 class="p0">
-                        <h4>You have a service</h4>
-                        <h6><strong>Today 12:00pm,</strong> June 26th</h6>
-                      </ion-col>
-                      <ion-col col-4 class="p0">
-                        <p>2 Services</p>
-                      </ion-col>
-                    </ion-row>
-                    <ion-row>
-                        <ion-col class="p0">
-                            <h3>Jaguar</h3>
-                            <div class="clear"></div>
-                        </ion-col>
-                      </ion-row>
-                  </div>
-            </ion-slide>
-            <ion-slide>
-                <div class="appointment_card">
-                    <ion-row>
-                      <ion-col col-8 class="p0">
-                        <h4>You have a service</h4>
-                        <h6><strong>Today 12:00pm,</strong> June 26th</h6>
-                      </ion-col>
-                      <ion-col col-4 class="p0">
-                        <p>2 Services</p>
-                      </ion-col>
-                    </ion-row>
-                    <ion-row>
-                        <ion-col class="p0">
-                            <h3>Jaguar</h3>
-                            <div class="clear"></div>
-                        </ion-col>
-                      </ion-row>
-                  </div>
-            </ion-slide>
-            <ion-slide>
-                <div class="appointment_card">
-                    <ion-row>
+            <ion-slide *ngFor="let service of bookServiceDeatils; let  i = index;" >
+                <div class="appointment_card" >
+                    <ion-row >
                       <ion-col col-8 class="p0">
-                        <h4>You have a service</h4>
-                        <h6><strong>Today 12:00pm,</strong> June 26th</h6>
+                        
+                        <h6>Offer End on 10/11/2019</h6>
                       </ion-col>
                       <ion-col col-4 class="p0">
-                        <p>2 Services</p>
+                        <p></p>
                       </ion-col>
                     </ion-row>
                     <ion-row>
                         <ion-col class="p0">
-                            <h3>Jaguar</h3>
+                            <h3>Tyres available at <strong>50%</strong> Offer</h3>
                             <div class="clear"></div>
                         </ion-col>
                       </ion-row>
                   </div>
+                  
             </ion-slide>
+    
           </ion-slides>
-    </div>
+    </div> 
     <div class="header_submenu">
-        <h4>Products for you</h4>
-        <button class="more_btn" (click)="goToPage('purchaseparts')">More</button>
+        <h4>{{'home.Products for you' | translate:params}}</h4>
+        <button class="more_btn" (click)="goToPage('purchaseparts')">{{'home.more' | translate:params}}</button>
         <div class="clear"></div>
       </div>
       <div class="product_section" *ngIf="productsForUserList">
@@ -165,20 +129,35 @@
             </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>Avilable Services</h4>
+          <h4>{{'home.Services' | translate:params}}</h4>
           <div class="clear"></div>
       </div>
-      <div class="home_main_stack_menu" *ngIf="mainServicesList">
-          <ion-row   *ngFor="let service of mainServicesList; let i = index " (click)="bookService(service)">
-              <ion-col class="textCenter">
+      <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)">
                 <p>{{service.service_name}}</p>
               </ion-col>
-            
           </ion-row>
-          <br>
+         
+          
       </div>
+    </ion-grid>
+
       <!-- <div class="header_submenu">
           <h4>Parts for you</h4>
           <button class="more_btn">More</button>
@@ -227,24 +206,24 @@
       <ion-row>
         <ion-col (click)="goToPage('settings')">
           <img src="../../assets/img/asset_setting.png">
-          <p>Settings</p>
+          <p>{{'home.Settings' | translate:params}}</p>
         </ion-col>
         <ion-col (click)="goToPage('profile')">
           <img src="../../assets/img/asset_profile.png">
-          <p>Profile</p>
+          <p>{{'home.Profile' | translate:params}}</p>
         </ion-col>
         <ion-col (click)="logout()">
           <img src="../../assets/img/asset_logout.png">
-          <p>Logout</p>
+          <p>{{'home.Logout' | translate:params}}</p>
         </ion-col>
       </ion-row>
     </div>
     <div class="menu_inner" *ngIf="!login">
       <ion-row>
         <ion-col>
-          <h6>Are you sure to logout ?</h6>
-          <button class="logout_btn floatLeft" (click)="toLogin()">Logout</button>
-          <button class="cancel_btn floatRight" (click)="menuToggle()">Cancel</button>
+          <h6>{{'home.Are you sure to logout ?' | translate:params}}</h6>
+          <button class="logout_btn floatLeft" (click)="toLogin()">{{'home.Logout' | translate:params}}</button>
+          <button class="cancel_btn floatRight" (click)="menuToggle()">{{'home.Cancel' | translate:params}}</button>
         </ion-col>
       </ion-row>
     </div>

src/app/home/home.page.ts

@@ -5,6 +5,9 @@ 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({
   selector: 'app-home',
   templateUrl: 'home.page.html',
@@ -22,39 +25,49 @@ import { ValidationService } from '../../Config/services/validation.service';
   ]
 })
 export class HomePage {
+  lang: any;
+  locationData: any;
   menuShow = false;
   login = true;
   userData: any;
   mainServicesList = [];
   peopleMostpurchasedList = [];
   productsForUserList = [];
+  bookServiceDeatils = [];
+  address: any;
+  displayLocationData = null;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
     private location: Location,
     private authenticationservice: AuthenticationService,
     private storageservice: StorageService,
-    private validationservice: ValidationService
+    private validationservice: ValidationService,
+    private nativeGeocoder: NativeGeocoder,
+    private translateConfigService: TranslateConfigService
   ) {
-  this.userData = JSON.parse(this.storageservice.getLocalStorageItem('userData'));
-  console.log(this.userData);
-  this.getMainServiceList();
-  this.getpeopleMostpurchasedList();
-  this.getProductsforYouList();
+    if (this.storageservice.isLoggednIn()) {
+     this.userData = JSON.parse(this.storageservice.getLocalStorageItem('userData'));
+     this.locationData = JSON.parse(this.storageservice.getLocalStorageItem('location'));
+     this.lang = JSON.parse(this.storageservice.getLocalStorageItem('lang'));
+     if ( this.lang) {
+      this.langTrans();
+     }
+  }
+    console.log(this.userData);
+    this.getMainServiceList();
+    this.getpeopleMostpurchasedList();
+    this.getProductsforYouList();
+    this.getServiceBookedList();
+    this.getLocationData(this.locationData.lat, this.locationData.lng);
   }
-
-
   goToPage(path, data = null) {
-
     this.router.navigateByUrl(path, {queryParams: data});
     document.body.scrollTop = document.documentElement.scrollTop = 0;
-    // this.logout();
   }
-
   goBack() {
     this.location.back();
   }
-
   toLogin() {
     this.menuShow = !this.menuShow;
     this.storageservice.removeLocalStorageItem('userData');
@@ -63,10 +76,8 @@ export class HomePage {
  menuToggle() {
     this.menuShow = !this.menuShow;
   }
-
   logout() {
     this.login = !this.login;
-
   }
 getMainServiceList() {
   this.authenticationservice.get_data('get_mainservicelist').subscribe((data) => {
@@ -97,7 +108,7 @@ getProductsforYouList() {
   });
 }
 getImage(imageurl) {
-  return imageurl;
+  return 'https://techlabz.in/allorepair' + imageurl;
 }
 bookService(service) {
   console.log(service);
@@ -108,4 +119,25 @@ purchaseProduct(id) {
   console.log(id);
   this.goToPage('/productbooking/' + encodeURIComponent(JSON.stringify(id)));
 }
+getServiceBookedList() {
+  this.authenticationservice.get_data('get_userbookedServiceDetails?user_id=' + this.userData.id)
+  .subscribe((data) => {
+    if (data.status === 'success') {
+      this.bookServiceDeatils = data.data;
+    }
+  });
+}
+getLocationData(lat, lng) {
+  this.authenticationservice.getGoogleLocationData(lat, lng).subscribe(data => {
+    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);
+}
+
 }

src/app/listingservice/listingservice.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
-
+import { TranslateModule } from '@ngx-translate/core';
 import { IonicModule } from '@ionic/angular';
 
 import { ListingservicePage } from './listingservice.page';
@@ -18,6 +18,7 @@ const routes: Routes = [
   imports: [
     CommonModule,
     FormsModule,
+    TranslateModule.forChild(),
     IonicModule,
     RouterModule.forChild(routes)
   ],

src/app/listingservice/listingservice.page.html

@@ -3,17 +3,17 @@
         <button class="nav_btn back_btn floatLeft" (click)="goBack()">
     </button>
         <div class="nav_title floatLeft">
-            <h4>Select Category</h4>
+            <h4>{{'ListingServices.Select Category' | translate:params}}</h4>
         </div>
         <button class="nav_btn nav_btn_text floatRight">
 
     </button>
         <div class="clear"></div>
-        <div class="seach_bar_outer">
+        <!-- <div class="seach_bar_outer">
             <div class="search_bar">
                 <input class="" placeholder="Services or Problems...">
             </div>
-        </div>
+        </div> -->
     </div>
 </ion-header>
 <ion-content>
@@ -36,7 +36,7 @@
                 <h6>{{serviceDetails}}</h6> 
             </ion-col>
             <ion-col>
-                <button class="next_btn floatRight" (click)="getsubserviceList()">NEXT</button>
+                <button class="next_btn floatRight" (click)="getsubserviceList()">{{'ListingServices.Next' | translate:params}}</button>
                 <div class="clear"></div>
             </ion-col>
         </ion-row>

src/app/listingservice/listingservice.page.ts

@@ -4,7 +4,7 @@ import { Location } from '@angular/common';
 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-listingservice',
   templateUrl: './listingservice.page.html',
@@ -16,6 +16,7 @@ export class ListingservicePage implements OnInit {
   displayFooter: boolean;
   serviceDetails: any;
   id: any;
+  lang: any;
   constructor(
     private validationService: ValidationService,
     private authenticationService: AuthenticationService,
@@ -23,11 +24,16 @@ export class ListingservicePage implements OnInit {
     private router: Router,
     private route: ActivatedRoute,
     private location: Location,
+    private translateConfigService: TranslateConfigService
   ) {
     this.errorMsg = '';
     this.displayFooter = false;
     this.serviceDetails = '';
     this.id = '';
+    this.lang = JSON.parse(this.storageservice.getLocalStorageItem('lang'));
+    if ( this.lang) {
+     this.langTrans(this.lang);
+    }
   }
 
   ngOnInit() {
@@ -65,4 +71,7 @@ goToPage(path, data= null) {
 goBack() {
   this.location.back();
 }
+langTrans(lang) {
+  this.translateConfigService.setLanguage(lang);
+}
 }

src/app/login/login.module.ts

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

src/app/login/login.page.html

 <ion-content>
   <div class="login_wrapper">
-    <h1>Hi!</h1>
-    <h3>Login to Continue</h3>
+    <h1>{{'login.Hi' | translate:params}}</h1>
+    <h3>{{'login.Login To Continue' | translate:params}}</h3>
     <div class="login_form">
       <form [formGroup]="loginForm">
       <div class="row">
@@ -10,17 +10,37 @@
       <div class="row">
           <ion-input formControlName="user_password" placeholder="Password" type="password"></ion-input>
       </div>
+      <!-- <div class="row">
+          <p>I am A ??</p>
+          <ion-select placeholder="" style="color: white;" >
+              <ion-select-option value="" style="color: white;">Country Name</ion-select-option>
+          </ion-select>
+      </div> -->
+
+     
+    
+
+       <!-- <div class="row">
+        <button class="login_btn" (click)="login()">Login as Customer</button>
+      </div>  -->
+        <div class="row">
+            <div class="social_div">
+                <div class="social_btn" style="border-right:1px solid rgba(215, 213, 228, 1); color: white;" (click)="customer()">
+                {{'login.Customer' | translate:params}}
+                </div>
+                <div class="social_btn" (click)="Road_assistant()">
+                  {{'login.Road Asssistant' | translate:params}}
+                </div>
+            </div>
+        </div>
       <div class="row">
-        <button class="login_btn" (click)="login()">Sign In</button>
-      </div>
-      <div class="row">
-        <p (click)="goToPage('forgot')">Forgot Password ?</p>
+        <p (click)="goToPage('forgot')">  {{'login.Forgot Password' | translate:params}}</p>
       </div>
     </form>
     </div>
     <div class="sigup_footer" (click)="istoggle()">
       <img src="../../assets/img/asset_signup_arrow.png"><br>
-      Sign Up
+      {{'login.Sign Up' | translate:params}}
     </div>
   </div>
 </ion-content>
@@ -28,22 +48,31 @@
     <ion-content>
       <div class="signup_wrapper">
           <div class="sigin_header" (click)="istoggle()">
-              Sign In<br>
+            {{'login.Sign In' | translate:params}}<br>
               <img src="../../assets/img/asset_signin_arrow.png">
           </div>
-          <h1>Sign Up</h1>
+          <h1> {{'login.Sign Up' | translate:params}}</h1>
           <div class="signup_form"> 
             <form [formGroup]="signupForm">
+                <div class="row">
+                    <p style="text-align: center;"><b><strong>{{'login.I am A!!' | translate:params}}</strong></b></p>
+                    <ion-select formControlName="user_type">
+                        <ion-select-option value=1> {{'login.Customer' | translate:params}}</ion-select-option>
+                        <ion-select-option value=5> {{'login.Road Asssistant' | translate:params}}</ion-select-option>
+                      </ion-select>
+                      
+                  </div>
               <div class="row">
-                <p>Your Full Name</p>
+                <p>{{'login.Full Name' | translate:params}}</p>
                 <ion-input formControlName="user_name" type="text"></ion-input>
               </div>
+            
               <div class="row">
-                  <p>Email Address</p>
+                  <p>{{'login.Email' | translate:params}}</p>
                   <ion-input  formControlName="user_email" type="text"></ion-input>
               </div>
               <div class="row">
-                  <p>Phone Number</p>
+                  <p>{{'login.Phone Number' | translate:params}}</p>
                   <ion-row class="p0">
                     <ion-col size="4">
                       <ion-select placeholder="" formControlName="user_phonecode">
@@ -56,7 +85,7 @@
                   </ion-row>
               </div>
               <div class="row">
-                  <p>Country</p>
+                  <p>{{'login.Country' | translate:params}}</p>
                   <ion-input  type="text" formControlName="user_country"></ion-input>
               </div>
               <!-- <div class="row">
@@ -68,22 +97,22 @@
                   <ion-input  type="text"></ion-input>
               </div> -->
               <div class="row">
-                  <p>Area</p>
+                  <p>{{'login.Area' | translate:params}}</p>
                   <ion-input  type="text"formControlName="user_area" ></ion-input>
               </div>
               <div class="row">
-                  <p>House name/Building</p>
+                  <p>{{'login.House Name/Building' | translate:params}}</p>
                    <ion-input  type="text"formControlName="user_address" ></ion-input>
               </div>
               <div class="row">
-                <h6>This address will be saved as your permanent address. You can change it at any time.</h6>
+                <h6>{{'login.This address will be saved as your permamanent address' | translate:params}}.{{'login.You can change it at any time' | translate:params}}.</h6>
                 </div>
                 <div class="row">
-                    <button class="signup_btn" (click)="signIn()">Next</button>
+                    <button class="signup_btn" (click)="signIn()">{{'login.Next' | translate:params}}</button>
                   </div>
                   <div class="row textCenter">
-                    <p>By Creating Account, I agree to allo repar's<br>
-                    <a>Terms & Conditions</a></p>
+                    <p>{{'login.By Creating Account' | translate:params}}, {{'login.I agree to allorepars' | translate:params}}<br>
+                    <a>{{'login.Terms & Conditions' | translate:params}}</a></p>
                     </div>
                   </form>
           </div>

src/app/login/login.page.scss

@@ -31,6 +31,13 @@
                 color:#fff;
                 height: 40px;
             }
+            ion-select-option{
+                text-align: center;
+                background-image: linear-gradient(to right, #5742a5 , #7a60da);
+                border-radius: 20px;
+                color:#fff;
+                height: 40px;
+            }
             .login_btn{
                 height: 40px;
                 width: 100%;
@@ -45,6 +52,20 @@
                 text-align: center;
                 padding-top: 20px;
             }
+            .social_div {
+                border: 1px solid rgba(215, 213, 228, 1);
+                height: 45px;
+                border-radius: 20px;
+                .social_btn {
+                    display: inline-block;
+                    width: 50%;
+                    text-align: center;
+                    height: 100%;
+                    font-size: 15px;
+                    padding: 9px;
+                    color: white;
+                }
+            }
         }
     }
     .sigup_footer{

src/app/login/login.page.ts

@@ -5,6 +5,8 @@ import { FormBuilder, Validators } from '@angular/forms';
 import { StorageService } from '../../Config/services/storage.service';
 import { ValidationService } from '../../Config/services/validation.service';
 import { AuthenticationService } from '../../Config/services/auth.service';
+import { TranslateService } from '@ngx-translate/core';
+import {TranslateConfigService} from '../../Config/services/translateconfig.service';
 @Component({
   selector: 'app-login',
   templateUrl: './login.page.html',
@@ -36,7 +38,8 @@ export class LoginPage implements OnInit {
     user_address: ['', Validators.required],
     device_id: ['', Validators.required],
     user_lat: ['', Validators.required],
-    user_lng: ['', Validators.required]
+    user_lng: ['', Validators.required],
+    user_type: ['', Validators.required]
   });
   loginForm = this.fb.group({
     user_email: ['', Validators.compose([Validators.required])],
@@ -52,9 +55,12 @@ export class LoginPage implements OnInit {
     private fb: FormBuilder,
     private storageService: StorageService,
     private authenticationservice: AuthenticationService,
-    private validationservice: ValidationService
+    private validationservice: ValidationService,
+    private translateService: TranslateService,
+    private translateConfigService: TranslateConfigService
   ) {
     this.getStorageData();
+    this.langTrans();
   }
 
   ngOnInit() {
@@ -80,15 +86,19 @@ export class LoginPage implements OnInit {
     user_phonecode: +33,
   });
   console.log(this.signupForm.value);
+  this.storageService.removeLocalStorageItem('userData');
+  if ( this.signupForm.valid) {
   this.goToPage('/password/' + JSON.stringify(this.signupForm.value));
-
+  } else {
+    this.validationservice.presentToast('Please fill all fields');
+  }
   }
   getStorageData() {
    this.locationData = JSON.parse(this.storageService.getLocalStorageItem('location'));
    console.log(this.locationData);
 
   }
-  login() {
+  customer() {
     this.storageService.removeLocalStorageItem('userData');
     console.log('test');
     if (!this.storageService.isLoggednIn()) {
@@ -115,5 +125,34 @@ export class LoginPage implements OnInit {
       }
     }
   }
-
+  Road_assistant() {
+    this.storageService.removeLocalStorageItem('userData');
+    console.log('test');
+    if (!this.storageService.isLoggednIn()) {
+      this.loginForm.patchValue({
+        device_id: 123456,
+        user_lat: this.locationData.lat,
+        user_lng: this.locationData.lng,
+        user_type: 5
+      });
+      if ( this.loginForm.valid) {
+        this.validationservice.presentLoader();
+        this.authenticationservice.post_data('user_login', this.loginForm.value).subscribe((data) => {
+          console.log(data);
+          this.validationservice.dismissLoader();
+          if ( data.status  === 'success') {
+            this.goToPage('home');
+            this.storageService.setLocalStorageItem('userData', JSON.stringify(data.data));
+          } else {
+            this.validationservice.presentToast(data.message);
+          }
+        });
+      } else {
+        this.validationservice.presentToast('Please fill all fields');
+      }
+    }
+  }
+ langTrans() {
+    this.translateConfigService.setLanguage('fr');
+  }
 }

src/app/map/map.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+import { AgmCoreModule } from '@agm/core';
+import { AgmDirectionModule } from 'agm-direction';
+import { IonicModule } from '@ionic/angular';
+
+import { MapPage } from './map.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MapPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    AgmDirectionModule,
+    AgmCoreModule.forRoot({
+      apiKey: 'AIzaSyBn6hOlr6YHcZAmbptlsmbhvH5iQllWflE'
+    }),
+    RouterModule.forChild(routes)
+  ],
+  declarations: [MapPage]
+})
+export class MapPageModule {}

src/app/map/map.page.html

+<ion-header>
+  <div class="app_header">
+      <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+  </button>
+      <div class="nav_title floatLeft">
+          <h4>REACH</h4>
+      </div>
+      <button class="nav_btn nav_btn_text floatRight">
+
+  </button>
+      <div class="clear"></div>
+  </div>
+</ion-header>
+<ion-content>
+  <div class="trackmap_wrapper">
+      <agm-map  [latitude]="lat" [longitude]="lng">
+          <agm-direction [origin]="origin" [destination]="destination" [renderOptions]="renderOptions" [markerOptions]="markerOptions">
+          </agm-direction>
+      </agm-map>
+  </div>
+  <!-- <div class="footer_bay">
+      <div class="rider_image "></div>
+      <div class="rider_detail ">
+          <h5>John Doe</h5>
+          <p>Rider</p>
+      </div>
+      <div class="rider_call ">Accept</div>
+      <div class="clear "></div>
+  </div> -->
+</ion-content>
\ No newline at end of file

src/app/map/map.page.scss

+.trackmap_wrapper {
+    width: 100%;
+    height: calc(100vh - 50px);
+    agm-map {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.footer_bay {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    padding: 10px;
+    background: #fff;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    .rider_image {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        float: left;
+        background-color: #a8a8a8;
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center;
+            border-radius: 50%;
+        }
+    }
+    .rider_detail {
+        float: left;
+        padding: 5px;
+        padding-left: 10px;
+        width: calc(100% - 160px);
+        h5 {
+            margin: 0px;
+            padding: 0px;
+            color: rgba(59, 57, 77, 1);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        p {
+            margin: 0px;
+            padding: 0px;
+            color: rgba(176, 174, 199, 1);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+    .rider_time {
+        float: left;
+        width: 110px;
+        font-size: 35px;
+        font-weight: 900;
+        color: rgba(59, 57, 77, 1);
+        padding: 5px;
+        padding-left: 15px;
+        span {
+            color: rgba(176, 174, 199, 1);
+            font-size: 16px;
+            padding-left: 5px;
+            font-weight: 400;
+        }
+    }
+    .rider_call {
+        background-color: rgba(53, 203, 171, 1);
+        color: #fff;
+        float: right;
+        height: 50px;
+        padding: 14px;
+        font-size: 16px;
+        width: 100px;
+        border-radius: 5px;
+        font-weight: 700;
+        padding-left: 20px;
+        padding-right: 20px;
+        text-align: center;
+    }
+}
\ No newline at end of file

src/app/map/map.page.spec.ts

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

src/app/map/map.page.ts

+import { Component, OnInit } from '@angular/core';
+import { MouseEvent } from '@agm/core';
+import {StorageService } from '../../Config/services/storage.service';
+import { AuthenticationService } from '../../Config/services/auth.service';
+import { ValidationService} from '../../Config/services/validation.service';
+@Component({
+  selector: 'app-map',
+  templateUrl: './map.page.html',
+  styleUrls: ['./map.page.scss'],
+})
+export class MapPage implements OnInit {
+  locationData: any;
+  map: any;
+  address: string;
+
+  public lat ;
+  public lng ;
+  public origin: any;
+  public destination: any;
+  public renderOptions: any;
+  public markerOptions: any;
+  constructor(
+    private storageService: StorageService,
+    private validationService: ValidationService,
+    private authenticationService: AuthenticationService,
+  ) { }
+
+  ngOnInit() {
+   this.getStorageData();
+  }
+
+
+
+  getDirection() {
+    this.origin = { lat: this.locationData.lat, lng: this.locationData.lng };
+    this.destination = { lat: 9.9816, lng: 76.2999 };
+    this.renderOptions = { polylineOptions: { strokeColor: 'rgba(69, 67, 152,1)' }, suppressMarkers: true };
+    this.markerOptions = {
+      origin: {
+
+      },
+      destination: {
+
+      }
+    };
+  }
+  getStorageData() {
+    this.locationData = JSON.parse(this.storageService.getLocalStorageItem('location'));
+    this.lat = this.locationData.lat;
+    this.lng = this.locationData.lng;
+    if ( this.locationData) {
+      const This = this;
+      // tslint:disable-next-line: only-arrow-functions
+      setInterval(function() {
+        // This.getDirection(); 
+      }, 5000);
+
+  }
+}
+
+}

src/app/myservices/myservices.page.html

@@ -11,76 +11,22 @@
 </ion-header>
 <ion-content>
   <div class="services_wrapper">
-    <h4>Upcoming Services</h4>
+    <h4>Road Assistant Services</h4>
     <ul>
-      <li class="up_comingborder" (click)="goToPage('servicedetails')">
-        <h5>2 Services</h5>
-        <p>Heating & Air Conditioning, Break System</p>
-        <div class="pic floatLeft">
-          <img src="../../assets/img/asset_shop1.png">
-        </div>
-        <div class="pic_detail floatLeft">
-          <h5>Presto towing service</h5>
-          <h6><strong>Rolls Royce</strong> Ghost</h6>
-          <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+      <li class="up_comingborder"  *ngFor="let service of roadAssistanceBookedDetails ">
+        <div class="road_assitance">
+          Road Assistance
+      </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.roadservicerequestid}}</h5>
+          <h5><strong>Date:</strong> {{service.date}}</h5>
         </div>
         <div class="clear"></div>
       </li>
-      <h4>February</h4>
-      <li (click)="goToPage('servicedetails')">
-          <div class="road_assitance">
-              Road Assistance
-          </div>
-          <div class="clear"></div>
-          <div class="pic floatLeft">
-              <img src="../../assets/img/asset_shop1.png">
-          </div>
-          <div class="pic_detail floatLeft">
-            
-              <h5>Presto towing service</h5>
-              <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
-          </div>
-          <div class="clear"></div>
-      </li>
-      <li (click)="goToPage('servicedetails')">
-          <h5>2 Services</h5>
-          <p>Heating & Air Conditioning, Break System</p>
-          <div class="pic floatLeft">
-            <img src="../../assets/img/asset_shop1.png">
-          </div>
-          <div class="pic_detail floatLeft">
-            <h5>Presto towing service</h5>
-            <h6><strong>Rolls Royce</strong> Ghost</h6>
-            <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
-          </div>
-          <div class="clear"></div>
-        </li>
-        <li (click)="goToPage('servicedetails')">
-            <h5>2 Services</h5>
-            <p>Heating & Air Conditioning, Break System</p>
-            <div class="pic floatLeft">
-              <img src="../../assets/img/asset_shop1.png">
-            </div>
-            <div class="pic_detail floatLeft">
-              <h5>Presto towing service</h5>
-              <h6><strong>Rolls Royce</strong> Ghost</h6>
-              <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
-            </div>
-            <div class="clear"></div>
-          </li>
-          <li (click)="goToPage('servicedetails')">
-              <h5>2 Services</h5>
-              <p>Heating & Air Conditioning, Break System</p>
-              <div class="pic floatLeft">
-                <img src="../../assets/img/asset_shop1.png">
-              </div>
-              <div class="pic_detail floatLeft">
-                <h5>Presto towing service</h5>
-                <h6><strong>Rolls Royce</strong> Ghost</h6>
-                <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
-              </div>
-              <div class="clear"></div>
-            </li>
     </ul>
   </div>
 </ion-content>

src/app/myservices/myservices.page.ts

@@ -13,6 +13,8 @@ import { AuthenticationService } from '../../Config/services/auth.service';
 export class MyservicesPage implements OnInit {
   userData: any;
   serviceList: any;
+  roadAssistanceBookedDetails =[];
+  listofRoadassistanceList: any;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -27,6 +29,7 @@ export class MyservicesPage implements OnInit {
   ngOnInit() {
     this.getStorageData();
     this.getServiceList();
+    this.getRoadassistancebookedServiceDetails();
   }
 
 
@@ -52,5 +55,16 @@ getServiceList() {
     }
   });
 }
+getRoadassistancebookedServiceDetails() {
+  this.authenticationservice.get_data('road_assistancerequestlist?user_id=' + this.userData.profile_id).subscribe((data) => {
+    console.log(data);
+    if (data.status === 'success') {
+      this.roadAssistanceBookedDetails = data.data;
+      this.listofRoadassistanceList = this.roadAssistanceBookedDetails.length;
+
+      console.log( this.listofRoadassistanceList);
+    }
+  });
+}
 
 }

src/app/password/password.page.html

@@ -2,10 +2,10 @@
       <ion-content>
         <div class="forgot_wrapper">
             <div class="app_header">
-                <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+                <!-- <button class="nav_btn back_btn floatLeft" (click)="goBack()">
             
-                </button>
-                <div class="nav_title floatLeft"><h4>Password</h4></div>
+                </button> -->
+                <div><h4 style="text-align: center;">Set Password</h4></div>
                 <div class="clear"></div>
               </div>
               <div class="forgot_form">
@@ -28,6 +28,7 @@
                 <div class="row textCenter">
                     <button class="signup_btn" (click)="userSignup()">Sign Up</button>
                 </div>
+                <p style="text-align: center;" (click)="goToPage('login')">Back</p>
               </form>
               </div>
         </div>

src/app/password/password.page.ts

@@ -49,9 +49,13 @@ export class PasswordPage implements OnInit {
         this.authenticationService.post_data('user_signup', this.userSignupForm).subscribe((data) => {
           console.log(data);
           if (data.status === 'success') {
+            this.storageservice.setLocalStorageItem('userData', JSON.stringify(data.data));
             this.validationService.presentToast('Your account created successfully');
-            this.storageservice.setLocalStorageItem('userData', data.data);
-            this.goToPage('home');
+            if ( data.data.user_type === '5') {
+              this.goToPage('map');
+            } else {
+              this.goToPage('home');
+            }
           } else {
             this.validationService.presentToast(data.message);
             this.passwordForm.reset();

src/app/productbooking/productbooking.module.ts

@@ -6,7 +6,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 
 import { ProductbookingPage } from './productbooking.page';
-
+import { TranslateModule } from '@ngx-translate/core';
 const routes: Routes = [
   {
     path: '',
@@ -19,6 +19,7 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
+    TranslateModule.forChild(),
     RouterModule.forChild(routes)
   ],
   declarations: [ProductbookingPage]

src/app/productbooking/productbooking.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>Product Booking</h4></div>
+      <div class="nav_title floatLeft"><h4>{{'ProductBooking.Product Booking' | translate:params}}</h4></div>
       <button class="nav_btn nav_btn_text floatRight">
 
         </button>
@@ -37,11 +37,11 @@
               <hr>
           </div>
           <div class="product_btn" (click)="purchaseProduct()">
-            Purchase
+              {{'ProductBooking.Purchase' | translate:params}}
           </div>
           <div class="clear"></div>
         </div>
-        <h5>Details</h5>
+        <h5>{{'ProductBooking.Details' | translate:params}}</h5>
         <p>We promise to help you find the best car tyres Dubai has to offer.
           </p>
           <p>There are many significant advantages to purchasing your tyres online, including receiving cost effective pricing and a varied selection. Presto Tyres provide a full selection of branded tyres in Dubai that promise to meet the needs of all customers from motorists.</p>

src/app/productbooking/productbooking.page.ts

@@ -7,7 +7,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 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-productbooking',
   templateUrl: './productbooking.page.html',
@@ -15,6 +15,7 @@ import {StorageService } from '../../Config/services/storage.service';
 })
 export class ProductbookingPage implements OnInit {
 id: any;
+lang: any;
 productDetail: any;
   constructor(
     private router: Router,
@@ -22,10 +23,15 @@ productDetail: any;
     private location: Location,
     private validationService: ValidationService,
     private authenticationservice: AuthenticationService,
-    private storageservice: StorageService
+    private storageservice: StorageService,
+    private translateConfigService: TranslateConfigService
   ) {
     const Data =  decodeURIComponent((this.route.snapshot.paramMap.get('id')));
     this.id = JSON.parse(Data);
+    this.lang = JSON.parse(this.storageservice.getLocalStorageItem('lang'));
+    if ( this.lang) {
+     this.langTrans(this.lang);
+    }
   }
   @ViewChild(IonSlides) slides: IonSlides;
   currentIndex: any;
@@ -63,7 +69,10 @@ productDetail: any;
    });
  }
  purchaseProduct() {
-   const PassData = {type: 2};
+   const PassData = {type: 2 , product_id: this.id };
    this.goToPage('/carlist/' + encodeURIComponent(JSON.stringify(PassData)));
  }
+ langTrans(lang) {
+  this.translateConfigService.setLanguage(lang);
+}
 }

src/app/profile/profile.page.html

@@ -7,7 +7,7 @@
                 <div class="nav_title floatLeft"><h4>JOHN DOE</h4></div>
                 <button class="nav_btn floatLeft">
                   <div class="account_pic">
-                      <img src="../../assets/img/asset_triangle.png">
+                      <img src="../../assets/img/asset_triangle.png" (click)="goToPage('profilephoto')">
                   </div>
                 </button>
                 <div class="clear"></div>
@@ -15,7 +15,7 @@
             </div>
             <div class="profile_pic" (click)="goToPage('profilephoto')">
               <div class="overlay"></div>
-              <img src="../../assets/img/asset_profile_pic.png">
+              <img [src]="profilePicImgUrl" *ngIf="profilePicImgUrl">
             </div>
             <div class="" style="height: 300px;">
                 <div class="profile_wrapper">
@@ -40,7 +40,7 @@
                             </div>
                             <div class="clear"></div>
                         </li>
-                        <li (click)="goToPage('carlist')">
+                        <li (click)="goToPage('carlistsecond')">
                             <div class="li_image">
                                 <img src="../../assets/img/asset_m3.png">
                             </div>

src/app/profile/profile.page.ts

@@ -10,7 +10,7 @@ import { ValidationService } from '../../Config/services/validation.service';
   styleUrls: ['./profile.page.scss'],
 })
 export class ProfilePage implements OnInit {
-
+  profilePicImgUrl: any;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -21,6 +21,7 @@ export class ProfilePage implements OnInit {
   ) { }
 
   ngOnInit() {
+    this.getProfilePic()
   }
 
   goToPage(path, data= null) {
@@ -34,7 +35,11 @@ export class ProfilePage implements OnInit {
   }
   logout() {
     this.storageservice.removeLocalStorageItem('userData');
+    this.storageservice.removeLocalStorageItem('profilePic');
     this.goToPage('login');
   }
-
+getProfilePic() {
+  const data = this.storageservice.getLocalStorageItem('profilePic');
+  this.profilePicImgUrl = JSON.parse(data);
+}
 }

src/app/profilephoto/profilephoto.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: [ProfilephotoPage]

src/app/profilephoto/profilephoto.page.html

@@ -6,20 +6,25 @@
                 </button>
                 <div class="nav_title floatLeft"><h4>PROFILE PHOTO</h4></div>
                 <button class="nav_btn floatLeft">
-                  <div class="account_pic">
+                  <!-- <div class="account_pic">
                       <img src="../../assets/img/asset_triangle.png">
-                  </div>
+                  </div> -->
                 </button>
                 <div class="clear"></div>
                 <div class="clear"></div>
             </div>
             <div class="profile_pic">
                 <div class="overlay"></div>
-              <img src="../../assets/img/asset_profile_pic.png">
+              <!-- <img src="../../assets/img/asset_profile_pic.png" *ngIf="!imgURL"> -->
+              <img [src]="imgURL" *ngIf="imgURL">
             </div>
             <div padding>
-              <button class="update_btn">Update</button>
+              <input #file id="file" type="file"  accept='image/*' (change)="preview(file.files)" />
             </div>
+            <div padding>
+             <button class="update_btn" (click)="upload()">UPLOAD PHOTO</button>
+            </div>
+
             
         </div>
       </ion-content>

src/app/profilephoto/profilephoto.page.scss

@@ -8,7 +8,7 @@
         height:290px;
         position: relative;
         .overlay{
-            position: absolute;
+           // position: absolute;
             top:0px;
             left:0px;
             right:0px;
@@ -85,4 +85,19 @@ box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
         font-weight: 500;
         font-size: 16px; 
     }
+    input#file {
+      
+        display: inline-block;
+        width: 100%;
+        padding: 100px 0 0 0;
+        height: 100px;
+        overflow: hidden;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        background: url('../../assets/img/asset_triangle.png') center center no-repeat;
+        border-radius: 60px;
+        background-size: 60px 60px;
+       
+      }
 }
\ No newline at end of file

src/app/profilephoto/profilephoto.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 { FormBuilder, FormArray, Validators } from '@angular/forms';
+import {StorageService } from '../../Config/services/storage.service';
+import { AuthenticationService } from '../../Config/services/auth.service';
+import { ValidationService} from '../../Config/services/validation.service';
 
 @Component({
   selector: 'app-profilephoto',
@@ -8,18 +12,31 @@ import { Location } from '@angular/common';
   styleUrls: ['./profilephoto.page.scss'],
 })
 export class ProfilephotoPage implements OnInit {
-
+ userData: any;
+  public imagePath;
+  imgURL: any;
+  public message: string;
+ profileUplpadForm = this.fb.group({
+  user_profilepic: ['' ],
+  user_id : ['' , Validators.required]
+});
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location
+    private location: Location,
+    public fb: FormBuilder,
+    private storageService: StorageService,
+    private validationService: ValidationService,
+    private authenticationService: AuthenticationService,
+
   ) { }
 
   ngOnInit() {
+    this.getStorageData();
   }
 
-  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;
   }
 
@@ -27,5 +44,63 @@ export class ProfilephotoPage implements OnInit {
   goBack() {
     this.location.back();
   }
+//   onFileChanged(event) {
+//     const formData = new FormData();
+//     const reader = new FileReader(); // HTML5 FileReader API
+//     const file = event.target.files[0];
+//     if (event.target.files && event.target.files[0]) {
+//       reader.readAsDataURL(file);
+//       reader.onload = () => {
+//         console.log(reader.result);
+//         formData.append('user_id' , this.userData.id);
+//         formData.append('user_profilepic' , reader.result);
+//   };
+//   }
+// }
+getStorageData() {
+  this.userData = JSON.parse(this.storageService.getLocalStorageItem('userData'));
+  console.log(this.userData);
+  const data = this.storageService.getLocalStorageItem('profilePic');
+  this.imgURL = JSON.parse(data);
+}
+preview(files) {
+  this.imgURL = null;
+  if (files.length === 0) {
+    return;
+  }
 
+  const mimeType = files[0].type;
+  if (mimeType.match(/image\/*/) == null) {
+    this.message = 'Only images are supported.';
+    return;
+  }
+  const reader = new FileReader();
+  this.imagePath = files;
+  reader.readAsDataURL(files[0]);
+  reader.onload = (_event) => {
+    this.imgURL = reader.result;
+    this.profileUplpadForm.patchValue({
+      user_profilepic : this.imgURL,
+      user_id : this.userData.id
+    });
+  };
+}
+upload() {
+  if(this.profileUplpadForm.value.user_profilepic){
+  this.validationService.presentLoader();
+  const formData = new FormData();
+  formData.append('user_id', this.userData.profile_id);
+  formData.append('profile_photo' , this.profileUplpadForm.value.user_profilepic);
+  this.authenticationService.post_data('upload_profilePic' , formData).subscribe((data) => {
+    this.validationService.dismissLoader();
+    if (data.status === 'success') {
+      this.storageService.setProfilePic(JSON.stringify(this.profileUplpadForm.value.user_profilepic));
+      this.validationService.presentToast(data.message);
+      this.goToPage('home');
+    }
+  });
+} else {
+  this.validationService.presentToast('Please choose an image to upload');
+}
+}
 }

src/app/purchaseparts/purchaseparts.module.ts

@@ -6,7 +6,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 
 import { PurchasepartsPage } from './purchaseparts.page';
-
+import { TranslateModule } from '@ngx-translate/core';
 const routes: Routes = [
   {
     path: '',
@@ -19,6 +19,7 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
+    TranslateModule.forChild(),
     RouterModule.forChild(routes)
   ],
   declarations: [PurchasepartsPage]

src/app/purchaseparts/purchaseparts.page.html

@@ -2,7 +2,7 @@
     <div class="app_header relative">
         <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
         </button>
-      <div class="nav_title floatLeft"><h4>Purchase Product</h4></div>
+      <div class="nav_title floatLeft"><h4>{{'Purchaseparts.Purchase product' | translate:params}}</h4></div>
       <button class="nav_btn nav_btn_text floatRight">
       </button>
       <div class="clear"></div>
@@ -16,7 +16,7 @@
   <ion-content>
     <div class="purchase_wrapper">
         <div class="header_submenu">
-            <h4>People most purchased</h4>  
+            <h4>{{'Purchaseparts.People Most Purchased' | translate:params}}</h4>  
             <div class="clear"></div>
         </div>
         <div class="product_section">
@@ -36,7 +36,7 @@
                 </ion-slides>
         </div>
         <div class="header_submenu">
-            <h4>People most purchased</h4>
+            <h4>{{'Purchaseparts.Product list' | translate:params}}</h4>
          
             <div class="clear"></div>
         </div>

src/app/purchaseparts/purchaseparts.page.ts

@@ -5,6 +5,8 @@ import { Router, ActivatedRoute } from '@angular/router';
 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-purchaseparts',
@@ -13,6 +15,7 @@ import {StorageService } from '../../Config/services/storage.service';
 })
 export class PurchasepartsPage implements OnInit {
   peopleMostpurchasedList = [];
+  lang: any;
   searchProduct: any;
   productsList = [];
   slideOpts = {
@@ -27,11 +30,16 @@ export class PurchasepartsPage implements OnInit {
     private location: Location,
     private validationService: ValidationService,
     private authenticationservice: AuthenticationService,
-    private storageservice: StorageService
+    private storageservice: StorageService,
+    private translateConfigService: TranslateConfigService
   ) {
     this.getAllproductsList();
     this.getpeopleMostpurchasedList();
     this.searchProduct = '';
+    this.lang = JSON.parse(this.storageservice.getLocalStorageItem('lang'));
+    if ( this.lang) {
+     this.langTrans(this.lang);
+    }
   }
   ngOnInit() {
   }
@@ -89,4 +97,7 @@ export class PurchasepartsPage implements OnInit {
       this.getAllproductsList();
      }
   }
+  langTrans(lang) {
+    this.translateConfigService.setLanguage(lang);
+  }
 }

src/app/roadassiastancecompletedlist/roadassiastancecompletedlist.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 { RoadassiastancecompletedlistPage } from './roadassiastancecompletedlist.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RoadassiastancecompletedlistPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [RoadassiastancecompletedlistPage]
+})
+export class RoadassiastancecompletedlistPageModule {}

src/app/roadassiastancecompletedlist/roadassiastancecompletedlist.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-title>roadassiastancecompletedlist</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/roadassiastancecompletedlist/roadassiastancecompletedlist.page.spec.ts

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

src/app/roadassiastancecompletedlist/roadassiastancecompletedlist.page.ts

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

src/app/roadassistance/roadassistance.module.ts

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

src/app/roadassistance/roadassistance.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>ROAD ASSISTANCE</h4></div>
+      <div class="nav_title floatLeft"><h4>{{'Road Assistance.Road Assistance' | translate:params}}</h4></div>
       <button class="nav_btn nav_btn_text floatRight">
 
         </button>
@@ -12,9 +12,9 @@
 <ion-content>
     <div class="home_wrapper">
       <div class="location_box">
-        <div class="location_bar">
+        <!-- <div class="location_bar">
             Infopark,Kakkanad
-        </div>
+        </div> -->
       </div>
       <ul *ngIf="getRoadassistanceList">
         <li *ngFor="let roadassistant of getRoadassistanceList; let i = index">
@@ -22,7 +22,7 @@
             <img src="../../assets/img/asset_shop1.png">
           </div>
           <div class="details">
-              <div class="list_btn remind" (click)="bookGarage(roadassistant.road_assist_id)">Book</div>
+              <div class="list_btn remind" (click)="bookGarage(roadassistant.road_assist_id)">{{'Road Assistance.Book' | translate:params}}</div>
             <h5>{{roadassistant.name}}</h5>
             <p>34 Reviews</p>
             <h6 class="floatLeft"><span class="distance_banner">{{roadassistant.distance}}Km</span><span class="other_banner" >{{distance(roadassistant.distance)}}</span></h6>

src/app/roadassistance/roadassistance.page.ts

@@ -4,6 +4,7 @@ import { Location } from '@angular/common';
 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-roadassistance',
   templateUrl: './roadassistance.page.html',
@@ -11,6 +12,7 @@ import {StorageService } from '../../Config/services/storage.service';
 })
 export class RoadassistancePage {
   userLocationData: any;
+  lang: any;
   getRoadassistanceList = [];
   constructor(
     private router: Router,
@@ -18,9 +20,15 @@ export class RoadassistancePage {
     private location: Location,
     private validationService: ValidationService,
     private authenticationService: AuthenticationService,
-    private storageservice: StorageService
+    private storageservice: StorageService,
+    private translateConfigService: TranslateConfigService
   ) {
     this.getfromstorage();
+    this.lang = JSON.parse(this.storageservice.getLocalStorageItem('lang'));
+    if ( this.lang) {
+     this.langTrans();
+    }
+   
   }
 
   goToPage(path, data= null) {
@@ -64,4 +72,7 @@ if (value > 20) {
   return 'Too Far Away';
 }
 }
+langTrans() {
+  this.translateConfigService.setLanguage(this.lang);
+}
 }

src/app/roadassistancerating/roadassistancerating.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 { RoadassistanceratingPage } from './roadassistancerating.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RoadassistanceratingPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [RoadassistanceratingPage]
+})
+export class RoadassistanceratingPageModule {}

src/app/roadassistancerating/roadassistancerating.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-title>roadassistancerating</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>