fonctionnalité de tracking ramené sur la page des stations proches

src/pages/home/home.ts

@@ -1,11 +1,9 @@
 import { Component } from '@angular/core';
 import { StationMapPage } from '../station-map/station-map';
-import { StationListPage } from '../station-list/station-list';
 
 import { NavController } from 'ionic-angular';
 import { BookingPage } from '../booking/booking';
 import { ChatsPage } from '../chats/chats';
-import { MapsPage } from '../maps/maps';
 import { MeteoPage } from '../meteo/meteo';
 
 @Component({

src/pages/station-map/station-map.html

@@ -16,19 +16,24 @@
 
 -->
 <ion-header>
-<ion-navbar >
-  <ion-title>Stations</ion-title>
-  <ion-buttons end >
-       <button ion-button primary (click)="goToTrackingPage()">
-         Tracking
-       </button>
-     </ion-buttons>
-</ion-navbar>
+    <ion-navbar>
+        <ion-title>Stations</ion-title>
+
+    </ion-navbar>
 </ion-header>
 <ion-content padding>
-	<div #pleaseConnect id="please-connect">
-    <p>Please connect to the Internet...</p>
-  </div>
-
-  <div #map id="map"></div>
-</ion-content>
+    <div #pleaseConnect id="please-connect">
+        <p>Please connect to the Internet...</p>
+    </div>
+
+    <div #map id="map"></div>
+    <div class="row">
+        <div class="col col-50">
+            <button ion-button full color="secondary" class="map-button" (click)="start()">Start</button>
+        </div>
+        <div class="col col-50">
+            <button ion-button full color="danger" class="map-button" (click)="stop()">Stop</button>
+        </div>
+    </div>
+    <button ion-button block (click)="getLocationHistory()" class="map-button">Visualiser Trajet</button>
+</ion-content>

src/pages/station-map/station-map.scss

@@ -1,28 +1,30 @@
 page-station-map {
-	#please-connect {
-    position: absolute;
-    background-color: #000;
-    opacity: 0.5;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-  }
-
-  #please-connect p {
-      color: #fff;
-      font-weight: bold;
-      text-align: center;
-      position: relative;
-      font-size: 1.6em;
-      top: 30%;
-  }
-
-  .scroll {
-      height: 100%;
-  }
-
-  #map {
-      width: 100%;
-      height: 100%;
-  }
-}
+    #please-connect {
+        position: absolute;
+        background-color: #000;
+        opacity: 0.5;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+    }
+    #please-connect p {
+        color: #fff;
+        font-weight: bold;
+        text-align: center;
+        position: relative;
+        font-size: 1.6em;
+        top: 30%;
+    }
+    .scroll {
+        height: 100%;
+    }
+    #map {
+        width: 100%;
+        height: 80%;
+    }
+    .map-button {
+        background: #b887c1;
+        border-radius: 30px !important;
+        border: 1px solid #ffffff;
+    }
+}

src/pages/station-map/station-map.ts

@@ -2,6 +2,8 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
 import { NavController, Platform } from 'ionic-angular';
 import { Locations } from '../../providers/locations';
 import { GoogleMaps } from '../../providers/google-maps';
+import {Database} from "../../providers/database";
+import { LocationTracker } from '../../providers/location-tracker';
 
 import { TrackingPage } from '../tracking/tracking';
 
@@ -19,9 +21,32 @@ export class StationMapPage {
 
   @ViewChild('map') mapElement: ElementRef;
   @ViewChild('pleaseConnect') pleaseConnect: ElementRef;
+  private locationsHist: any;
 
-  constructor(public navCtrl: NavController, public maps: GoogleMaps, public platform: Platform, public locations: Locations) {
+  constructor(public navCtrl: NavController, public maps: GoogleMaps, public platform: Platform, public locations: Locations,public locationTracker: LocationTracker,private database: Database) {
+  let rootPage = this;
+  this.locationsHist = [];
 
+  }
+
+   start(){
+    this.locationTracker.startTracking();
+  }
+
+  stop(){
+    this.locationTracker.stopTracking();
+  }
+
+  getLocationHistory(){
+    this.database.getAllLocations().then((result) => {
+            this.locationsHist =  result;
+            console.log("locations",this.locationsHist);
+            for(let location of this.locationsHist){
+                    this.maps.addHistoryMarker(location.latitude, location.longitude);
+                }
+        }, (error) => {
+            console.log("ERROR: ", error);
+        });
   }
 
   goToTrackingPage(){

src/pages/tracking/tracking.ts

@@ -1,9 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild  } from '@angular/core';
 import { NavController,Platform } from 'ionic-angular';
 import { LocationTracker } from '../../providers/location-tracker';
 import { Geolocation } from '@ionic-native/geolocation';
-import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';
+//import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';
 import {Database} from "../../providers/database";
+import {
+ GoogleMaps,
+ GoogleMap,
+ GoogleMapsEvent,
+ LatLng,
+ CameraPosition,
+ MarkerOptions,
+ Marker
+} from '@ionic-native/google-maps';
 //import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps';
 
 /*
@@ -21,7 +30,7 @@ export class TrackingPage {
 	map: GoogleMap;
   private locations: Array<Object>;
 
-  constructor(public navCtrl: NavController,public locationTracker: LocationTracker,private geolocation: Geolocation,public platform: Platform, private database: Database) {
+  constructor(private googleMaps: GoogleMaps,public navCtrl: NavController,public locationTracker: LocationTracker,private geolocation: Geolocation,public platform: Platform, private database: Database) {
   	this.locations = [];
   }
 
@@ -53,9 +62,11 @@ export class TrackingPage {
   this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 50000, enableHighAccuracy: true }).then((resp) => {
     console.log(resp.coords.latitude+", "+resp.coords.longitude);
     //let location = new LatLng(resp.coords.latitude, resp.coords.longitude);
-    let location = new GoogleMapsLatLng(resp.coords.latitude, resp.coords.longitude);
+    let location = new LatLng(resp.coords.latitude, resp.coords.longitude);
+    let element: HTMLElement = document.getElementById('map');
 
-    this.map = new GoogleMap(document.getElementById('#map'), {
+   // this.map = 
+    this.map = this.googleMaps.create(element, {
       'backgroundColor': 'white',
       'controls': {
         'compass': true,
@@ -77,7 +88,7 @@ export class TrackingPage {
       }
     });
 
-    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
+    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
       console.log('Map is ready!');
       console.log("map : ",this.map );
     });

src/providers/google-maps.ts

@@ -101,6 +101,11 @@ export class GoogleMaps {
 
         this.center = position;
         let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
+
+        // add the user's position marker
+                    var markerPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
+
+
 
         let mapOptions = {
           center: latLng,
@@ -109,12 +114,22 @@ export class GoogleMaps {
         }
 
         this.map = new google.maps.Map(this.mapElement, mapOptions);
+        var marker = new google.maps.Marker({
+                        map: this.map,
+                        animation: google.maps.Animation.DROP,
+                        position: markerPos,
+                        icon: 'assets/img/yellow.png'
+                    })
+                    var infoWindowContent = '<h3>' + 'Je suis ici' + '</h3>'
+
+                    this.addInfoWindow(marker, infoWindowContent)
+                     this.markers.push(marker);
         resolve(position);
         return position;
 
       });
     });
- 
+
   }
 
   disableMap(): void {
@@ -166,6 +181,20 @@ export class GoogleMaps {
 
   }
 
+  addHistoryMarker(lat: number, lng: number): void {
+
+    let latLng = new google.maps.LatLng(lat, lng);
+
+    let marker = new google.maps.Marker({
+      map: this.map,
+      animation: google.maps.Animation.DROP,
+      position: latLng,
+      icon: 'assets/img/yellow.png'
+    });
+    this.markers.push(marker);  
+
+  }
+
   addMarker(lat: number, lng: number, name: string): void {
 
     let latLng = new google.maps.LatLng(lat, lng);