From 11e3848acf4500df48213d715c54fcab5498369b Mon Sep 17 00:00:00 2001
From: Ratnadeep Rajendra Kharade <92khra1mst@hft-stuttgart.de>
Date: Tue, 26 Nov 2019 14:44:02 +0100
Subject: [PATCH] Added api integration for showing bike list
---
src/app/app.module.ts | 3 ++
src/app/auth/login/login.page.ts | 5 +++-
src/app/home/home.page.html | 10 +++----
src/app/home/home.page.ts | 47 ++++++++++++++++++++++++++++----
src/app/rest.service.spec.ts | 12 ++++++++
src/app/rest.service.ts | 19 +++++++++++++
6 files changed, 85 insertions(+), 11 deletions(-)
create mode 100644 src/app/rest.service.spec.ts
create mode 100644 src/app/rest.service.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4723981..bbe16be 100644
--- a/src/app/app.module.ts
+++ b/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]
diff --git a/src/app/auth/login/login.page.ts b/src/app/auth/login/login.page.ts
index 57284be..130a489 100644
--- a/src/app/auth/login/login.page.ts
+++ b/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);
diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
index b5ef913..1f9fafd 100644
--- a/src/app/home/home.page.html
+++ b/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>
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index 0f2722c..d9111a7 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -1,5 +1,10 @@
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'];
diff --git a/src/app/rest.service.spec.ts b/src/app/rest.service.spec.ts
new file mode 100644
index 0000000..5d2ff3c
--- /dev/null
+++ b/src/app/rest.service.spec.ts
@@ -0,0 +1,12 @@
+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();
+ });
+});
diff --git a/src/app/rest.service.ts b/src/app/rest.service.ts
new file mode 100644
index 0000000..1110494
--- /dev/null
+++ b/src/app/rest.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class RestService {
+
+ token: String;
+
+ constructor() { }
+
+ setToken(token) {
+ this.token = token;
+ }
+
+ getToken() {
+ return this.token;
+ }
+}
--
GitLab