ride later

config.xml

@@ -99,4 +99,6 @@
     <plugin name="cordova-plugin-geolocation" spec="^4.0.1">
         <variable name="GEOLOCATION_USAGE_DESCRIPTION" value="To locate you" />
     </plugin>
+    <plugin name="cordova-plugin-datepicker" spec="^0.9.3" />
+    <plugin name="cordova-plugin-request-location-accuracy" spec="^2.2.3" />
 </widget>

package-lock.json

@@ -296,6 +296,11 @@
       "resolved": "https://registry.npmjs.org/@ionic-native/core/-/core-3.12.1.tgz",
       "integrity": "sha512-cncRlkun1lwJ0kZUs7jrDbmHDvHNdveJhdsgJT7nGLavbK54UN3CdBjMcAk7zNOqlil6nXY8Nn/2B6WpUmQRNg=="
     },
+    "@ionic-native/date-picker": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/date-picker/-/date-picker-4.7.0.tgz",
+      "integrity": "sha512-rn8lRU32woVUQXA3kc+hlUJeN2NXykShC/HYOROgpDglZTCuxRUl4gJNuua4JEyw+YXN2jSUVPryfC8QhJg7oQ=="
+    },
     "@ionic-native/facebook": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/facebook/-/facebook-4.6.0.tgz",
@@ -311,6 +316,11 @@
       "resolved": "https://registry.npmjs.org/@ionic-native/google-plus/-/google-plus-4.7.0.tgz",
       "integrity": "sha512-Q9k2ZRDsdlhH0gb4plqiYonhDo9SAVkKzgiAqH14C07yd5bBXBdH7utRivHa5DytMDHmoEZx0FX6Vvki/q342w=="
     },
+    "@ionic-native/location-accuracy": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/location-accuracy/-/location-accuracy-4.7.0.tgz",
+      "integrity": "sha512-WGMyuy8hZaemvEHFpoix1gmCHEKU5/7axu0XY+2cLOKgaFGI/N3idEBqVxARGPuT5oBuay+dE9mMtNNBT/kndQ=="
+    },
     "@ionic-native/splash-screen": {
       "version": "3.12.1",
       "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-3.12.1.tgz",
@@ -1652,6 +1662,11 @@
         }
       }
     },
+    "cordova-plugin-datepicker": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-datepicker/-/cordova-plugin-datepicker-0.9.3.tgz",
+      "integrity": "sha1-JVipzlmY9tbcBs+S/Yu7nQkB8Wo="
+    },
     "cordova-plugin-device": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/cordova-plugin-device/-/cordova-plugin-device-1.1.4.tgz",
@@ -1672,6 +1687,11 @@
       "resolved": "https://registry.npmjs.org/cordova-plugin-googleplus/-/cordova-plugin-googleplus-5.3.0.tgz",
       "integrity": "sha1-fvQYIF9pMBii0G0suGXenXy3Ico="
     },
+    "cordova-plugin-request-location-accuracy": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-request-location-accuracy/-/cordova-plugin-request-location-accuracy-2.2.3.tgz",
+      "integrity": "sha512-cwcG+4sHIU/Vfe1mvEtXh5hfo4k8OEdHo1Rdc9GU0YU/5J/umsBQdHfuBJ7hez59N7lRoUKpKhLhcY8MPBz9Fg=="
+    },
     "cordova-plugin-splashscreen": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/cordova-plugin-splashscreen/-/cordova-plugin-splashscreen-4.0.3.tgz",

package.json

@@ -21,19 +21,23 @@
         "@angular/platform-browser": "4.4.3",
         "@angular/platform-browser-dynamic": "4.4.3",
         "@ionic-native/core": "3.12.1",
+        "@ionic-native/date-picker": "^4.7.0",
         "@ionic-native/facebook": "^4.6.0",
         "@ionic-native/geolocation": "^4.7.0",
         "@ionic-native/google-plus": "^4.7.0",
+        "@ionic-native/location-accuracy": "^4.7.0",
         "@ionic-native/splash-screen": "3.12.1",
         "@ionic-native/status-bar": "3.12.1",
         "@ionic-native/toast": "^4.7.0",
         "@ionic/storage": "2.0.1",
         "angularfire2": "^5.0.0-rc.10",
         "cordova-android": "^7.1.0",
+        "cordova-plugin-datepicker": "^0.9.3",
         "cordova-plugin-device": "^1.1.4",
         "cordova-plugin-facebook4": "^1.9.1",
         "cordova-plugin-geolocation": "^4.0.1",
         "cordova-plugin-googleplus": "^5.3.0",
+        "cordova-plugin-request-location-accuracy": "^2.2.3",
         "cordova-plugin-splashscreen": "^4.0.3",
         "cordova-plugin-statusbar": "^2.2.2",
         "cordova-plugin-whitelist": "^1.3.1",
@@ -69,7 +73,9 @@
             },
             "cordova-plugin-geolocation": {
                 "GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
-            }
+            },
+            "cordova-plugin-datepicker": {},
+            "cordova-plugin-request-location-accuracy": {}
         },
         "platforms": [
             "android"

src/app/app.component.ts

@@ -5,6 +5,8 @@ import { SplashScreen } from '@ionic-native/splash-screen';
 import { Storage } from '@ionic/storage';
 import { user } from '../models/mymodel'
 import { Myservice } from "../providers/myservice";
+import { LocationAccuracy } from '@ionic-native/location-accuracy';
+
 @Component({
   templateUrl: 'app.html'
 })
@@ -14,7 +16,7 @@ export class MyApp {
   rootPage: string ;
   local:user;
 
-  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public storage: Storage, public events: Events, private myservice: Myservice) {
+  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public storage: Storage, public events: Events, private myservice: Myservice, private locationAccuracy: LocationAccuracy) {
     this.initializeApp();
   }
 
@@ -42,6 +44,22 @@ export class MyApp {
 
     this.statusBar.styleDefault();
     this.splashScreen.hide();
+      // this.enableLoc();
+
+    });
+  }
+
+  enableLoc(){
+    this.locationAccuracy.canRequest().then((canRequest: boolean) => {
+
+      if (canRequest) {
+        // the accuracy option will be ignored by iOS
+        this.locationAccuracy.request(this.locationAccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(
+          () => console.log('Request successful'),
+          error => console.log('Error requesting location permissions', error)
+        );
+      }
+
     });
   }
 

src/app/app.module.ts

@@ -16,6 +16,8 @@ import { AngularFireModule } from 'angularfire2';
 import { fireService } from '../providers/firebase.service'
 import { AngularFireDatabase } from 'angularfire2/database';
 import { Geolocation } from '@ionic-native/geolocation';
+import { DatePicker } from '@ionic-native/date-picker';
+import { LocationAccuracy } from '@ionic-native/location-accuracy';
 
 export const firebaseConfig = {
   apiKey: "AIzaSyDLrbLd4RCCh86xuTVu7-cfJ28We_cG1sU",
@@ -52,6 +54,8 @@ export const firebaseConfig = {
     fireService,
     AngularFireDatabase,
     Geolocation,
+    DatePicker,
+    LocationAccuracy,
   ]
 })
 export class AppModule {}

src/index.html

@@ -37,6 +37,8 @@
     <script src="build/main.js"></script>
     
     <script src="http://maps.google.com/maps/api/js?libraries=places&key=AIzaSyCk1_NXO6fDntAzKEl7sO-z6Ut5evHLsKQ"></script>
+
+
   </body>
   </html>
   
\ No newline at end of file

src/models/mymodel.ts

@@ -10,3 +10,12 @@ export class user{
 	image: string
 	dial_code: string
 }
+export class cartype{
+	car_type:string
+	intialkm: string
+	intailrate: string
+	standardrate: string
+	extrahour: string
+	id: string
+	car_image: string
+}
\ No newline at end of file

src/pages/home/home.html

@@ -12,13 +12,17 @@
   <button ion-button class="cab_button_search theme_bgcolor" (click)="searchride()"><ion-icon name="search"></ion-icon></button>
 </ion-content>
 <ion-footer>
+  <form [formGroup]="locForm">
   <div class="cab_footer_location theme_bgcolor">
-    <input class="cab_location_input cab_current" placeholder="Pickup Location" id="pickUp" [(ngModel)]="pickLoc">
-    <input class="cab_location_input cab_destination" placeholder="Drop Location" id="drop">
+    <input class="cab_location_input cab_current" placeholder="Pickup Location" id="pickUp" formControlName="pickLoc">
+    <input class="cab_location_input cab_destination" placeholder="Drop Location" id="drop" formControlName="dropLoc">
   </div>
+  </form>
   <div class="cab_footer_btn_bay">
-    <button ion-button class="cab_footer_btn floatRight" (click)="ridenow()">RIDE NOW</button>
-    <button ion-button class="cab_footer_btn floatLeft" (click)="ridemore()">RIDE LATER</button>
+    <button ion-button class="cab_footer_btn floatRight" (click)="ridenow()" >RIDE NOW</button>
+     <!-- [disabled]="locForm.invalid" -->
+    <button ion-button class="cab_footer_btn floatLeft" (click)="ridemore()" >RIDE LATER</button>
+    <!-- [disabled]="locForm.invalid" -->
     <div class="clear"></div>
   </div>
 </ion-footer>

src/pages/home/home.ts

@@ -6,6 +6,7 @@ import { fireService } from "../../providers/firebase.service";
 import { AngularFireDatabase } from 'angularfire2/database';
 import { Myservice } from "../../providers/myservice";
 import * as firebase from 'firebase';
+import { Validators, FormGroup, FormBuilder } from '@angular/forms'
 
 declare var google;
 @IonicPage()
@@ -17,11 +18,20 @@ export class HomePage {
 
   @ViewChild('map') mapElement: ElementRef;
   map: any;
-  p_lat: any;
-  p_lng: any;
-  pickLoc:string
-
-  constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public storage: Storage, private geolocation: Geolocation, private firebase: fireService, private db: AngularFireDatabase,private myservice:Myservice) {
+  p_lat: number;
+  p_lng: number;
+  d_lat: number;
+  d_lng: number;
+  pickLoc: string
+  markers = []
+  driverMarkers = []
+  locForm: FormGroup
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public storage: Storage, private geolocation: Geolocation, private firebase: fireService, private db: AngularFireDatabase, private myservice: Myservice, private formBuilder: FormBuilder) {
+    this.locForm = this.formBuilder.group({
+      pickLoc: ['', Validators.required],
+      dropLoc: ['', Validators.required]
+    })
   }
 
   ionViewDidEnter() {
@@ -30,32 +40,75 @@ export class HomePage {
     }).catch((error) => {
       console.log('Error getting location', error);
     });
+
+    //drivers loc
     var This = this
     firebase.database().ref().child('/drivers/').orderByChild("status").equalTo('online').on("value", function (snapshot) {
       var res_arr = (<any>Object).entries(snapshot.val()).map(e => Object.assign(e[1], { key: e[0] }));
+
+      //placing marker for each driver
       for (let i = 0; i < res_arr.length; i++) {
         let marker = new google.maps.Marker({
           map: This.map,
-          icon:'assets/img/star-on-big.png',
+          icon: 'assets/img/star-on-big.png',
           position: { lat: res_arr[i].lat, lng: res_arr[i].lng }
         });
+        This.driverMarkers[i]=marker
       }
     });
   }
 
-  ionViewDidLoad(){
-
+  ionViewDidLoad() {
 
-    var autocomplete = new google.maps.places.Autocomplete(document.getElementById("pickUp"));
+    var p_autocomplete = new google.maps.places.Autocomplete(document.getElementById("pickUp"));
     var This = this;
-    console.log(autocomplete)
-    autocomplete.addListener('place_changed', function() {
+    p_autocomplete.addListener('place_changed', function () {
+      This.fillAddress(p_autocomplete, 0)
+    });
+
+    var d_autocomplete = new google.maps.places.Autocomplete(document.getElementById("drop"));
+    d_autocomplete.addListener('place_changed', function () {
+      This.fillAddress(d_autocomplete, 1)
+    });
+  }
+
+  fillAddress(autocomplete, type) {
+    if (this.markers) {
+      this.markers[0].setMap(null);
+    }
     var place = autocomplete.getPlace();
-      This.p_lat = place.geometry.location.lat();
-      This.p_lng = place.geometry.location.lng();
-      console.log(This.p_lat, This.p_lng)
-      This.loadMap(This.p_lat, This.p_lng)
+    var lat = place.geometry.location.lat();
+    var lng = place.geometry.location.lng();
+    
+    let marker = new google.maps.Marker({
+      map: this.map,
+      position: { lat: lat, lng: lng }
     });
+    
+    if (type == 0) {
+      this.p_lat = lat
+      this.p_lng = lng
+      this.markers[1] = marker
+    }
+    else if (type == 1) {
+      this.d_lat = lat
+      this.d_lng = lng
+      this.markers[2] = marker
+    }
+
+    if (this.p_lat && this.d_lat) {
+      var directionsService = new google.maps.DirectionsService;
+      var directionsDisplay = new google.maps.DirectionsRenderer;
+      directionsDisplay.setMap(this.map);
+
+      var start = new google.maps.LatLng(this.p_lat, this.p_lng);
+      var dest = new google.maps.LatLng(this.d_lat, this.d_lng);
+
+      this.calculateAndDisplayRoute(directionsService, directionsDisplay, start, dest);
+    }
+    else{
+      this.loadMap(lat,lng)
+    }
   }
 
   loadMap(lat, lng) {
@@ -71,9 +124,30 @@ export class HomePage {
       position: latLng
     });
 
+    this.markers.push(marker)
+
     this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
     marker.setMap(this.map);
+    for (var i = 0; i < this.driverMarkers.length; i++) {
+      this.driverMarkers[i].setMap(this.map);
+    }
+  }
 
+  calculateAndDisplayRoute(directionsService, directionsDisplay, start, dest) {
+    for (var i = 0; i < this.markers.length; i++) {
+      this.markers[i].setMap(null);
+    }
+    directionsService.route({
+      origin: start,
+      destination: dest,
+      travelMode: 'DRIVING'
+    }, function (response, status) {
+      if (status === 'OK') {
+        directionsDisplay.setDirections(response);
+      } else {
+        window.alert('Directions request failed due to ' + status);
+      }
+    });
   }
 
     ridemore() {
@@ -91,4 +165,4 @@ export class HomePage {
       modal.present();
     }
 
-}
+  }

src/pages/ridepop/ridepop.html

 <ion-content class="bg_transparent">
   <div class="cab_ride_pop">
-    <div class="cab_ride_inner theme_bgcolor">
+    <div class="cab_ride_inner theme_bgcolor" *ngIf="carTypes">
       <div class="cab_ride_down_arrow theme_bgcolor">
         <ion-icon name="ios-arrow-down-outline"(click)="dismiss()"></ion-icon>
       </div>
-      <p>Sedan</p>
-      <h6>Toyota Etios, Ford Fiesta</h6>
+      <p>{{carTypes[carIndex].car_type}}</p>
+      <!-- <h6>Toyota Etios, Ford Fiesta</h6> -->
       <div class="cab_ride_fare_break">Fare Breakup</div>
       <ion-grid>
         <ion-row class="textCenter">
           <ion-col col-4>
-            <strong>₹ 100</strong>
-            <h5>First 4km</h5>
+            <strong>₹ {{carTypes[carIndex].intailrate}}</strong>
+            <h5>First {{carTypes[carIndex].intialkm}}km</h5>
           </ion-col>
           <ion-col col-4>
-            <strong>₹ 12/km</strong>
-            <h5>After 4km</h5>
+            <strong>₹ {{carTypes[carIndex].standardrate}}/km</strong>
+            <h5>After {{carTypes[carIndex].intialkm}}km</h5>
           </ion-col>
           <ion-col col-4>
-            <strong>₹ 1/min</strong>
+            <strong>₹ {{carTypes[carIndex].extrahour}}/hour</strong>
             <h5>Ride time Rate</h5>
           </ion-col>
         </ion-row>
       </ion-grid>
       <h6 class="bottom0">Peak  time charges may apply.</h6>
       <div class="cab_ride_bottom_section">
-        <li class="c1">
-          <p>1 min</p>
-        </li>
-        <li class="c2">
-            <p>5 min</p>
-        </li>
-        <li class="c3">
-            <p>3 min</p>
-        </li>
-        <li class="c4">
-            <p>Arriving</p>
-        </li>
-        <li class="c5">
-            <p>Out</p>
+        <li class="c1" *ngFor="let car of carTypes; let i = index;" [style.backgroundImage]="'url('+ car.car_image +')'" (click)="carClick(i)">
+          <p>{{car.car_type}}</p>
         </li>
         <div class="clear"></div>
       </div>
@@ -47,8 +35,11 @@
 </ion-content>
 <ion-footer>
   <div class="cab_footer_btn_bay">
-    <button ion-button class="cab_footer_btn floatRight" (click)="dismiss()">RIDE NOW</button>
-    <button ion-button class="cab_footer_btn floatLeft"  (click)="dismiss()">RIDE LATER</button>
+    <button ion-button class="cab_footer_btn floatRight" (click)="dismiss()">CANCEL RIDE
+    </button>
+    <button ion-button class="cab_footer_btn floatLeft"  (click)="bookLater()">RIDE LATER
+      <ion-datetime min="{{cur_date}}" max="{{max_date}}" displayFormat="MMM DD YYYY" [(ngModel)]="myDate"></ion-datetime>
+    </button>
     <div class="clear"></div>
   </div>
 </ion-footer>

src/pages/ridepop/ridepop.ts

 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams,ViewController} from 'ionic-angular';
+import { Myservice } from "../../providers/myservice";
+import { cartype } from "../../models/mymodel";
+import { DatePicker } from '@ionic-native/date-picker';
+
 @IonicPage()
 @Component({
   selector: 'page-ridepop',
   templateUrl: 'ridepop.html',
 })
 export class RidepopPage {
+  carTypes:Array<cartype>
+  carIndex:number = 0;
+  cur_date:any;
+  max_date:any;
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, private myservice: Myservice, private datePicker: DatePicker) {
+    var now = new Date();
+    this.cur_date = now.toISOString()
+    var year = now.getFullYear();
+    this.max_date = (year + 10)
+  }
+
+  ionViewDidEnter() {
+    this.myservice.show_loader()
+    this.myservice.load_post({},'getCabDetails').subscribe(response=>{
+      this.myservice.hide_loader()
+      if(response.status == 'success'){
+        this.carTypes = response.data
+      }
+      else{
+        this.myservice.show_alert('Failed',response.message)
+      }
+    })
+  }
 
-  constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) {
+  carClick(index){
+    this.carIndex = index
   }
 
-  ionViewDidLoad() {
-    console.log('ionViewDidLoad RidepopPage');
+  bookLater(){
+    this.datePicker.show({
+      date: new Date(),
+      mode: 'datetime',
+      minDate: new Date(),
+      allowOldDates:false,
+      androidTheme: this.datePicker.ANDROID_THEMES.THEME_HOLO_DARK
+    }).then(
+      date =>{
+        console.log('1st', date)
+      },
+      err => console.log('Error occurred while getting date: ', err)
+    );
   }
 
   dismiss()