Added api integration for showing bike list

src/app/app.module.ts

@@ -12,6 +12,8 @@ import { Geolocation } from '@ionic-native/geolocation/ngx';
 
 import { HttpClientModule } from '@angular/common/http';
 
+import { RestService } from './rest.service';
+
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
@@ -25,6 +27,7 @@ import { HttpClientModule } from '@angular/common/http';
     Geolocation,
     StatusBar,
     SplashScreen,
+    RestService,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
   ],
   bootstrap: [AppComponent]

src/app/auth/login/login.page.ts

@@ -4,6 +4,8 @@ import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 
+import { RestService } from '../../rest.service';
+
 @Component({
   selector: 'app-login',
   templateUrl: './login.page.html',
@@ -15,7 +17,7 @@ export class LoginPage implements OnInit {
   correctCredentials = false;
   loginApi: Observable<any>;
 
-  constructor(private router: Router, public httpClient: HttpClient) {
+  constructor(private router: Router, public httpClient: HttpClient, public restService: RestService) {
 
   }
 
@@ -35,6 +37,7 @@ export class LoginPage implements OnInit {
     this.loginApi
       .subscribe((data) => {
         console.log('my data: ', data);
+        this.restService.setToken(data.token);
         this.router.navigateByUrl('/home');
       }, (error) =>  {
         console.log(error);

src/app/home/home.page.html

@@ -21,17 +21,17 @@
 <ion-footer>
   <div class="bike-list-container">
     <ion-icon class="bike-list-expander" name="arrow-dropup-circle" (click)="expandBikeList()"></ion-icon>
-    <div class="bike-container" *ngFor="let i of tempArr">
+    <div class="bike-container" *ngFor="let bike of bikes">
       <div class="bike-name">
-        Bike 1
+        {{bike.name}}
       </div>
       <div class="battery-info">
         <div><ion-icon class="battery-icon" name="battery-charging"></ion-icon></div>
-        <div>100%</div>
+        <div>{{bike.batteryPercentage + " %"}}</div>
       </div>
       <div class="address-info">
-        <div class="disance">56m</div>
-        <div class="address">Schllingstrasse 129</div>
+        <div class="disance">{{bike.distance + "m"}}</div>
+        <div class="address">{{bike.address}}</div>
       </div>
     </div>
   </div>

src/app/home/home.page.ts

 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { Geolocation } from '@ionic-native/geolocation/ngx';
+import { RestService } from '../rest.service';
+import { Observable } from 'rxjs';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+
 declare var H: any;
 @Component({
   selector: 'app-home',
@@ -9,6 +14,9 @@ declare var H: any;
 export class HomePage {
   private platform: any;
   private map: any;
+  bikes = [];
+  bikeApi: Observable<any>;
+
   private currentLocation = { lat: 0, lng: 0 };
 
   public is3DChecked = false;
@@ -29,15 +37,20 @@ export class HomePage {
   //@ViewChild("mapElement", { static: false })
   //public mapElement: ElementRef;
 
-  public constructor(private geolocation: Geolocation) {
+  constructor(private geolocation: Geolocation,
+    public restService: RestService,
+    public httpClient: HttpClient) {
+
     this.platform = new H.service.Platform({
       'apikey': 'tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k'
     });
   }
 
-  public ngOnInit() { }
+  ngOnInit() {
+    this.getBikesList();
+  }
 
-  public ngAfterViewInit() {
+  ngAfterViewInit() {
     setTimeout(() => {
       this.loadmap("2D");
     }, 1000);
@@ -45,6 +58,30 @@ export class HomePage {
     window.addEventListener('resize', () => this.map.getViewPort().resize());
   }
 
+  getBikesList() {
+    this.geolocation.getCurrentPosition(
+      {
+        maximumAge: 1000, timeout: 5000,
+        enableHighAccuracy: true
+      }
+    ).then((resp) => {
+      this.currentLocation.lat = resp.coords.latitude;
+      this.currentLocation.lng = resp.coords.longitude;
+      let url = 'http://193.196.52.237:8081/admin/bikes' + '?lat=' + this.currentLocation.lat + '&lng=' + this.currentLocation.lng;
+      const  headers = new  HttpHeaders().set("Authorization", "Bearer " + this.restService.getToken());
+      this.bikeApi = this.httpClient.get(url, {headers});
+      this.bikeApi
+        .subscribe((resp) => {
+          console.log('my data: ', resp);
+          this.bikes = resp.data;
+        }, (error) => console.log(error));
+    }, er => {
+      alert('Can not retrieve Location')
+    }).catch((error) => {
+      alert('Error getting location - ' + JSON.stringify(error))
+    });
+  }
+
   loadmap(style) {
     // Obtain the default map types from the platform object
     var mapStyle = "raster";
@@ -91,8 +128,8 @@ export class HomePage {
 
     mapSettings.setAlignment('top-right');
     zoom.setAlignment('left-top');
-    if(style === "3D") {
-      this.map.getViewModel().setLookAtData({tilt: 60});
+    if (style === "3D") {
+      this.map.getViewModel().setLookAtData({ tilt: 60 });
     }
     this.getLocation(this.map);
     var img = ['../../../assets/images/ic_high.png', '../../../assets/images/ic_medium.png', '../../../assets/images/ic_low.png'];

src/app/rest.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { RestService } from './rest.service';
+
+describe('RestService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: RestService = TestBed.get(RestService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/rest.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RestService {
+
+  token: String;
+  
+  constructor() { }
+
+  setToken(token) {
+    this.token = token;
+  }
+
+  getToken() {
+    return this.token;
+  }
+}