car oriebtation home

config.xml

@@ -103,4 +103,5 @@
     <plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
     <plugin name="mx.ferreyra.callnumber" spec="~0.0.2" />
     <engine name="android" spec="7.1.0" />
+    <plugin name="cordova-plugin-gyroscope" spec="^0.1.4" />
 </widget>

package-lock.json

@@ -321,6 +321,11 @@
       "resolved": "https://registry.npmjs.org/@ionic-native/google-plus/-/google-plus-4.7.0.tgz",
       "integrity": "sha512-Q9k2ZRDsdlhH0gb4plqiYonhDo9SAVkKzgiAqH14C07yd5bBXBdH7utRivHa5DytMDHmoEZx0FX6Vvki/q342w=="
     },
+    "@ionic-native/gyroscope": {
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@ionic-native/gyroscope/-/gyroscope-4.9.2.tgz",
+      "integrity": "sha512-vijd7NSDxTAYZ9citDU7vCO9Fb9SBEsrW1yNd9kX85/qNJTCmoHI0L93ePU2Bta7oaVWel+mvcPk0X/E2xV9Dw=="
+    },
     "@ionic-native/location-accuracy": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/location-accuracy/-/location-accuracy-4.7.0.tgz",
@@ -2440,6 +2445,11 @@
       "resolved": "https://registry.npmjs.org/cordova-plugin-googleplus/-/cordova-plugin-googleplus-5.3.0.tgz",
       "integrity": "sha1-fvQYIF9pMBii0G0suGXenXy3Ico="
     },
+    "cordova-plugin-gyroscope": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-gyroscope/-/cordova-plugin-gyroscope-0.1.4.tgz",
+      "integrity": "sha1-1OQ+fI54qLTZCQRgvme1FhgWglk="
+    },
     "cordova-plugin-network-information": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/cordova-plugin-network-information/-/cordova-plugin-network-information-2.0.1.tgz",

package.json

@@ -26,6 +26,7 @@
         "@ionic-native/facebook": "^4.6.0",
         "@ionic-native/geolocation": "^4.7.0",
         "@ionic-native/google-plus": "^4.7.0",
+        "@ionic-native/gyroscope": "^4.9.2",
         "@ionic-native/location-accuracy": "^4.7.0",
         "@ionic-native/network": "^4.7.0",
         "@ionic-native/onesignal": "^4.7.0",
@@ -42,6 +43,7 @@
         "cordova-plugin-facebook4": "^1.9.1",
         "cordova-plugin-geolocation": "^4.0.1",
         "cordova-plugin-googleplus": "^5.3.0",
+        "cordova-plugin-gyroscope": "^0.1.4",
         "cordova-plugin-network-information": "^2.0.1",
         "cordova-plugin-request-location-accuracy": "^2.2.3",
         "cordova-plugin-splashscreen": "^4.0.3",
@@ -85,7 +87,8 @@
             "cordova-plugin-datepicker": {},
             "cordova-plugin-request-location-accuracy": {},
             "cordova-plugin-network-information": {},
-            "mx.ferreyra.callnumber": {}
+            "mx.ferreyra.callnumber": {},
+            "cordova-plugin-gyroscope": {}
         },
         "platforms": [
             "android"

src/app/app.component.ts

@@ -92,13 +92,13 @@ export class MyApp {
   enableLoc(){
     this.locationAccuracy.canRequest().then((canRequest: boolean) => {
 
-      if (canRequest) {
+      // 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

@@ -23,6 +23,7 @@ import { dataService } from "../providers/common.service";
 import { Network } from '@ionic-native/network';
 import { CallNumber } from '@ionic-native/call-number';
 import { OneSignal } from '@ionic-native/onesignal';
+import { Gyroscope } from '@ionic-native/gyroscope';
 
 export const firebaseConfig = {
   apiKey: "AIzaSyDLrbLd4RCCh86xuTVu7-cfJ28We_cG1sU",
@@ -67,6 +68,7 @@ export const firebaseConfig = {
     Network,
     CallNumber,
     OneSignal,
+    Gyroscope
   ]
 })
 export class AppModule {}

src/index.html

@@ -36,8 +36,8 @@
     <!-- The main bundle js is generated during the build process -->
     <script src="build/main.js"></script>
     
-    <script src="http://maps.google.com/maps/api/js?libraries=places&key=AIzaSyCk1_NXO6fDntAzKEl7sO-z6Ut5evHLsKQ"></script>
-
+    <script src="http://maps.google.com/maps/api/js?libraries=places,geometry&key=AIzaSyCk1_NXO6fDntAzKEl7sO-z6Ut5evHLsKQ"></script>
+<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=geometry"></script> -->
 
   </body>
   </html>

src/pages/home/home.ts

@@ -32,6 +32,8 @@ export class HomePage {
   local: user
   directionsDisplay: any;
   locRef: any
+  lastPos: any
+  temp: number = 0;
 
   constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public storage: Storage, private geolocation: Geolocation, private firebase: fireService, private db: AngularFireDatabase, private formBuilder: FormBuilder, private data: dataService, private myservice: Myservice) {
 
@@ -42,6 +44,7 @@ export class HomePage {
   }
 
   ionViewDidEnter() {
+
     this.data.setbookingData('')
 
     this.storage.get('user_data').then(data => {
@@ -77,25 +80,52 @@ export class HomePage {
     This.locRef = firebase.database().ref().child('/drivers/')
     This.locRef.orderByChild("status").equalTo('online').on("value", function (snapshot) {
       // console.log(This.locRef)
+      if (This.temp > 1)
+        This.lastPos = res_arr
+
       var res_arr = []
       res_arr = (<any>Object).entries(snapshot.val()).map(e => Object.assign(e[1], { key: e[0] }));
 
+      if (This.temp == 0)
+        This.lastPos = res_arr//inially last and current position is same
+
       var image = {
-        url: 'assets/img/map_label.png',
-        scaledSize: new google.maps.Size(50, 22), // scaled size
-        origin: new google.maps.Point(0, 0), // origin
-        anchor: new google.maps.Point(25, 12) // anchor
+        path: "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z", //svg image for car
+        fillColor: '#000',
+        fillOpacity: .6,
+        anchor: new google.maps.Point(10, 25),
+        strokeWeight: 0,
+        scale: 1,
+        rotation: 0
       };
 
       //placing marker for each driver
       for (let i = 0; i < res_arr.length; i++) {
+
+        if (This.driverMarkers[i]) {
+          if (This.driverMarkers[i].lat != This.lastPos[i].lat && This.driverMarkers[i].lng != This.lastPos[i].lng)//clearing last pos marker
+            This.driverMarkers[i].setMap(null);
+        }
+
         let marker = new google.maps.Marker({
           map: This.map,
           icon: image,
           position: { lat: res_arr[i].lat, lng: res_arr[i].lng },
           size: new google.maps.Size(20, 32),
         });
+
         This.driverMarkers[i] = marker
+
+        ////for changing orientation of car
+        var cur = new google.maps.LatLng(res_arr[i].lat, res_arr[i].lng)
+        var lastPosn = new google.maps.LatLng(This.lastPos[i].lat, This.lastPos[i].lng)
+        var heading = google.maps.geometry.spherical.computeHeading(lastPosn, cur)
+        image.rotation = heading;
+        marker.setIcon(image);
+        ////
+
+        if (i == res_arr.length - 1)
+          This.temp++;
       }
     });
   }
@@ -130,14 +160,14 @@ export class HomePage {
 
     var search = place.formatted_address
 
-    if (type == 0) {
+    if (type == 0) {//pick position
       this.p_lat = lat
       this.p_lng = lng
 
       this.markers[1] = marker
       this.locForm.controls['pickLoc'].setValue(place.name)
     }
-    else if (type == 1) {
+    else if (type == 1) {//drop position
       this.d_lat = lat
       this.d_lng = lng
 
@@ -208,8 +238,7 @@ export class HomePage {
 
   ridemore() {
 
-    this.myservice.load_post({ 'pickKeyword': this.locForm.value.pickLoc, 'dropKeyword': this.locForm.value.dropLoc, 'userid': this.local.id, 'pickLat': this.p_lat, 'pickLng': this.p_lng, 'dropLat': this.d_lat, 'dropLng': this.d_lng }, 'setSearch').subscribe(response => {
-    })
+    this.myservice.load_post({ 'pickKeyword': this.locForm.value.pickLoc, 'dropKeyword': this.locForm.value.dropLoc, 'userid': this.local.id, 'pickLat': this.p_lat, 'pickLng': this.p_lng, 'dropLat': this.d_lat, 'dropLng': this.d_lng }, 'setSearch').subscribe(response => { })
 
     var data = { 'pickLat': this.p_lat, 'pickLng': this.p_lng, 'dropLat': this.d_lat, 'dropLng': this.d_lng, 'pickArea': this.locForm.value.pickLoc, 'dropArea': this.locForm.value.dropLoc }
     this.data.setbookingData(data)