Get Data From Geo Smart System by Service

This commit is contained in:
Supan Adit Pratama 2019-10-31 20:30:40 +07:00
parent 00c8b819d5
commit 408c2a4f70
7 changed files with 30 additions and 47 deletions

View File

@ -9,7 +9,7 @@ This is the Front End Application for [Geo Smart System](https://github.com/supa
## Todo ## Todo
- Integration With Geo Smart System ( OK ) - Integration With Geo Smart System ( OK )
- Get Data From Geo Smart System by Service - Get Data From Geo Smart System by Service ( OK )
## License ## License
Copyright 2019 Supan Adit Pratama Copyright 2019 Supan Adit Pratama

View File

@ -1,3 +1,3 @@
<div class="map" leaflet [leafletOptions]="options"> <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> </div>

View File

@ -1,8 +1,7 @@
import { Component, OnInit } from '@angular/core'; 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 { AppService } from './app.service';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { LocationModel, locationModelFromEventSource, markerListFromLocationModel } from './model/location';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -10,7 +9,7 @@ import { LocationModel, locationModelFromEventSource, markerListFromLocationMode
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
token = 'pk.eyJ1Ijoic3VwYW5hZGl0IiwiYSI6ImNqb3RlbmwyNjEwaHEzcG5oOG1uYXd2bDgifQ.Gb4UHqHuRsXhRsGj8ZfqQg'; token = 'pk.eyJ1Ijoic3VwYW5hZGl0IiwiYSI6ImNrMmVweWdrcTA4ZzgzY3A1NDE5ZnQwazkifQ.hK2Mz6cFk-jeIHzFBdaKTg';
style = `ck1w9autf0f0r1co76j79eab7`; style = `ck1w9autf0f0r1co76j79eab7`;
options = { options = {
@ -23,49 +22,16 @@ export class AppComponent implements OnInit {
center: latLng(-6.914744, 107.609810) center: latLng(-6.914744, 107.609810)
}; };
layer = marker([-6.914744, 107.609810], {
icon: icon({
iconSize: [20, 20],
iconUrl: 'assets/markers/red.png',
}),
});
// @ts-ignore // @ts-ignore
listLayer: Array<Marker> = [ listMarker: 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',
}),
})
];
// tslint:disable-next-line:variable-name // tslint:disable-next-line:variable-name
constructor(private appService: AppService, private toastr: ToastrService) { constructor(private appService: AppService, private toastr: ToastrService) {
} }
ngOnInit(): void { ngOnInit(): void {
const source = new EventSource('http://localhost:8080/stream'); this.appService.getStreamUser().subscribe((listMarker: Array<Marker>) => {
source.addEventListener('message', message => { this.listMarker = listMarker;
const listLocationModel: Array<LocationModel> = locationModelFromEventSource(message);
this.listLayer = markerListFromLocationModel(listLocationModel);
}); });
} }

View File

@ -1,10 +1,24 @@
import { Injectable } from '@angular/core'; 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({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class AppService { export class AppService {
getEventSource(url: string): EventSource { constructor() {
return new EventSource(url);
}
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));
});
});
} }
} }

View File

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

View File

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

View File

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