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
- 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

View File

@ -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>

View File

@ -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;
});
}

View File

@ -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));
});
});
}
}

View File

@ -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;
}

View File

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

View File

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