diff --git a/README.md b/README.md
index e9df558..d98118f 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,8 @@ This is the Front End Application for [Geo Smart System](https://github.com/supa
- Angular
## Todo
-- Integration With Geo Smart System
+- Integration With Geo Smart System ( OK )
+- Get Data From Geo Smart System by Service
## License
Copyright 2019 Supan Adit Pratama
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 1e59067..3ad6a21 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 a0d4030..ae04906 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,7 +1,8 @@
import { Component, OnInit } from '@angular/core';
-import { icon, latLng, marker, tileLayer } from 'leaflet';
+import { icon, latLng, Marker, 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',
@@ -29,11 +30,43 @@ export class AppComponent implements OnInit {
}),
});
+ // @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',
+ }),
+ })
+ ];
+
+ // tslint:disable-next-line:variable-name
constructor(private appService: AppService, private toastr: ToastrService) {
}
ngOnInit(): void {
- // this.toastr.success('Hello world!', 'Toastr fun!');
+ const source = new EventSource('http://localhost:8080/stream');
+ source.addEventListener('message', message => {
+ const listLocationModel: Array = locationModelFromEventSource(message);
+ this.listLayer = markerListFromLocationModel(listLocationModel);
+ });
}
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 53c4ef1..71fbaf1 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,15 +4,10 @@ import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
-import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
import { AppService } from './app.service';
import { ToastrModule } from 'ngx-toastr';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-const config: SocketIoConfig = {
- url: 'http://localhost:8080', options: {}
-};
-
@NgModule({
declarations: [
AppComponent
@@ -21,7 +16,6 @@ const config: SocketIoConfig = {
BrowserModule,
AppRoutingModule,
LeafletModule.forRoot(),
- SocketIoModule.forRoot(config),
BrowserAnimationsModule, // required animations module
ToastrModule.forRoot()
],
diff --git a/src/app/app.service.ts b/src/app/app.service.ts
index 76a2ffd..db9730f 100644
--- a/src/app/app.service.ts
+++ b/src/app/app.service.ts
@@ -1,19 +1,10 @@
import { Injectable } from '@angular/core';
-import { Socket } from 'ngx-socket-io';
@Injectable({
providedIn: 'root'
})
export class AppService {
- notification = this.socket.fromEvent('notification');
- marker = this.socket.fromEvent('marker');
-
- constructor(private socket: Socket) {
+ getEventSource(url: string): EventSource {
+ return new EventSource(url);
}
-
-
- sendNotice(msg: string) {
- this.socket.emit('notice', msg);
- }
-
}
diff --git a/src/app/model/location.ts b/src/app/model/location.ts
new file mode 100644
index 0000000..111228a
--- /dev/null
+++ b/src/app/model/location.ts
@@ -0,0 +1,71 @@
+import { icon, marker, Marker } from 'leaflet';
+
+export interface PointInterface {
+ type: string;
+ coordinates: Array;
+}
+
+export class PointModel implements PointInterface {
+ coordinates: Array;
+ type: string;
+
+ constructor(dataLocation: PointInterface) {
+ this.coordinates = dataLocation.coordinates;
+ this.type = dataLocation.type;
+ }
+
+ Lat(): number {
+ return this.coordinates[1];
+ }
+
+ Lng(): number {
+ return this.coordinates[0];
+ }
+}
+
+export interface PointInterface {
+ coordinates: Array;
+}
+
+export interface LocationInterface {
+ id: string;
+ object: PointInterface;
+}
+
+export class LocationModel implements LocationInterface {
+ id: string;
+ object: PointInterface;
+
+ constructor(location: LocationInterface) {
+ this.id = location.id;
+ this.object = location.object;
+ }
+
+ Point(): PointModel {
+ return new PointModel(this.object);
+ }
+
+ Marker(): Marker {
+ return marker([this.Point().Lat(), this.Point().Lng()], {
+ icon: icon({
+ iconSize: [20, 20],
+ iconUrl: 'assets/markers/red.png',
+ }),
+ });
+ }
+}
+
+// @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));
+ }
+ return locationModelList;
+}
+
+export function markerListFromLocationModel(listLocationModel: Array): Array {
+ return listLocationModel.map((x: LocationModel) => x.Marker());
+}