diff --git a/README.md b/README.md
index 683c146..92dd6cb 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ This is the Front End Application for [Geo Smart System](https://github.com/supa
## Todo
- Integration With Geo Smart System ( OK )
-- Get Data From Geo Smart System by Service
+- Get Data From Geo Smart System by Service ( OK )
## License
Copyright 2019 Supan Adit Pratama
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 3ad6a21..85d2057 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,3 @@
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ae04906..c157579 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,8 +1,7 @@
import { Component, OnInit } from '@angular/core';
-import { icon, latLng, Marker, marker, tileLayer } from 'leaflet';
+import { latLng, Marker, tileLayer } from 'leaflet';
import { AppService } from './app.service';
import { ToastrService } from 'ngx-toastr';
-import { LocationModel, locationModelFromEventSource, markerListFromLocationModel } from './model/location';
@Component({
selector: 'app-root',
@@ -10,7 +9,7 @@ import { LocationModel, locationModelFromEventSource, markerListFromLocationMode
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
- token = 'pk.eyJ1Ijoic3VwYW5hZGl0IiwiYSI6ImNqb3RlbmwyNjEwaHEzcG5oOG1uYXd2bDgifQ.Gb4UHqHuRsXhRsGj8ZfqQg';
+ token = 'pk.eyJ1Ijoic3VwYW5hZGl0IiwiYSI6ImNrMmVweWdrcTA4ZzgzY3A1NDE5ZnQwazkifQ.hK2Mz6cFk-jeIHzFBdaKTg';
style = `ck1w9autf0f0r1co76j79eab7`;
options = {
@@ -23,49 +22,16 @@ export class AppComponent implements OnInit {
center: latLng(-6.914744, 107.609810)
};
- layer = marker([-6.914744, 107.609810], {
- icon: icon({
- iconSize: [20, 20],
- iconUrl: 'assets/markers/red.png',
- }),
- });
-
// @ts-ignore
- listLayer: Array = [
- marker([-6.914744, 107.609810], {
- icon: icon({
- iconSize: [20, 20],
- iconUrl: 'assets/markers/red.png',
- }),
- }),
- marker([-6.914744, 107.213], {
- icon: icon({
- iconSize: [20, 20],
- iconUrl: 'assets/markers/red.png',
- }),
- }),
- marker([-6.914744, 107.603459810], {
- icon: icon({
- iconSize: [20, 20],
- iconUrl: 'assets/markers/red.png',
- }),
- }), marker([-6.914744, 107.345435], {
- icon: icon({
- iconSize: [20, 20],
- iconUrl: 'assets/markers/red.png',
- }),
- })
- ];
+ listMarker: Array = [];
// tslint:disable-next-line:variable-name
constructor(private appService: AppService, private toastr: ToastrService) {
}
ngOnInit(): void {
- const source = new EventSource('http://localhost:8080/stream');
- source.addEventListener('message', message => {
- const listLocationModel: Array = locationModelFromEventSource(message);
- this.listLayer = markerListFromLocationModel(listLocationModel);
+ this.appService.getStreamUser().subscribe((listMarker: Array) => {
+ this.listMarker = listMarker;
});
}
diff --git a/src/app/app.service.ts b/src/app/app.service.ts
index db9730f..0a14f76 100644
--- a/src/app/app.service.ts
+++ b/src/app/app.service.ts
@@ -1,10 +1,24 @@
import { Injectable } from '@angular/core';
+import { LocationModel, locationModelFromEventSource, markerListFromLocationModel } from './model/location';
+import { Observable } from 'rxjs';
+import { environment } from '../environments/environment';
+import { Marker } from 'leaflet';
@Injectable({
providedIn: 'root'
})
export class AppService {
- getEventSource(url: string): EventSource {
- return new EventSource(url);
+ constructor() {
+
+ }
+
+ getStreamUser(): Observable> {
+ return new Observable(observer => {
+ const source = new EventSource(environment.api.concat('/stream?request=sse'));
+ source.addEventListener('message', message => {
+ const listLocationModel: Array = locationModelFromEventSource(message);
+ observer.next(markerListFromLocationModel(listLocationModel));
+ });
+ });
}
}
diff --git a/src/app/model/location.ts b/src/app/model/location.ts
index 111228a..c2a5856 100644
--- a/src/app/model/location.ts
+++ b/src/app/model/location.ts
@@ -55,13 +55,14 @@ export class LocationModel implements LocationInterface {
}
}
-// @ts-ignore
export function locationModelFromEventSource(listener: any): Array {
const data = JSON.parse(listener.data);
let locationModelList: Array = [];
if (data != null) {
const listData: Array = data.data;
- locationModelList = listData.map((x: LocationInterface) => new LocationModel(x));
+ if (listData != null) {
+ locationModelList = listData.map((x: LocationInterface) => new LocationModel(x));
+ }
}
return locationModelList;
}
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 3612073..4ca2194 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,3 +1,4 @@
export const environment = {
- production: true
+ api: 'http://localhost:8080',
+ production: true
};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 7b4f817..15c0c7a 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -3,7 +3,8 @@
// The list of file replacements can be found in `angular.json`.
export const environment = {
- production: false
+ api: 'http://localhost:8080',
+ production: false
};
/*