Get Data From Geo Smart System by Service

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

src/app/app.component.html

@@ -1,3 +1,3 @@
 <div class="map" leaflet [leafletOptions]="options">
-    <div *ngFor="let x of listLayer" [leafletLayer]="x"></div>
+    <div *ngFor="let x of listMarker" [leafletLayer]="x"></div>
 </div>

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> = [
-        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<Marker> = [];
 
     // 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<LocationModel> = locationModelFromEventSource(message);
-            this.listLayer = markerListFromLocationModel(listLocationModel);
+        this.appService.getStreamUser().subscribe((listMarker: Array<Marker>) => {
+            this.listMarker = listMarker;
         });
     }
 

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<Array<Marker>> {
+        return new Observable(observer => {
+            const source = new EventSource(environment.api.concat('/stream?request=sse'));
+            source.addEventListener('message', message => {
+                const listLocationModel: Array<LocationModel> = locationModelFromEventSource(message);
+                observer.next(markerListFromLocationModel(listLocationModel));
+            });
+        });
     }
 }

src/app/model/location.ts

@@ -55,14 +55,15 @@ export class LocationModel implements LocationInterface {
     }
 }
 
-// @ts-ignore
 export function locationModelFromEventSource(listener: any): Array<LocationModel> {
     const data = JSON.parse(listener.data);
     let locationModelList: Array<LocationModel> = [];
     if (data != null) {
         const listData: Array<any> = data.data;
+        if (listData != null) {
             locationModelList = listData.map<LocationModel>((x: LocationInterface) => new LocationModel(x));
         }
+    }
     return locationModelList;
 }
 

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
+    api: 'http://localhost:8080',
     production: true
 };

src/environments/environment.ts

@@ -3,6 +3,7 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
+    api: 'http://localhost:8080',
     production: false
 };