Add traffic light visualization

components/control_center/src/app/component/landing/landing.component.html

@@ -1,6 +1,8 @@
 <button (click)="toggleMarker()">Drive!</button>
 
-<agm-map id="map" #map [zoom]="zoom" [latitude]="center.lat" [longitude]="center.lng" style="height: 900px; width: 1200px">
+<agm-map *ngIf="traffic_light_markers.length > 0" id="map" #map [zoom]="zoom" [latitude]="center.lat" [longitude]="center.lng" style="height: 900px; width: 1200px">
-  <agm-marker *ngFor="let m of markers" [iconUrl]="m.iconUrl" [visible]="m.visible"  [latitude]="m.lat" [longitude]="m.lng" >
+  <!--<agm-marker *ngFor="let m of markers" [iconUrl]="m.iconUrl" [visible]="m.visible"  [latitude]="m.lat" [longitude]="m.lng" >
+  </agm-marker>-->
+    <agm-marker *ngFor="let m of traffic_light_markers" [iconUrl]="m.iconUrl"  [latitude]="m.lat" [longitude]="m.lng" >
   </agm-marker>
 </agm-map>

components/control_center/src/app/component/landing/landing.component.ts

@@ -1,6 +1,7 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {AgmMap, AgmMarker} from '@agm/core';
-import {RestService} from "../../services/rest.service";
+import {RestService} from '../../services/rest.service';
+import {NGXLogger} from 'ngx-logger';
 
 @Component({
   selector: 'app-landing',
@@ -10,7 +11,8 @@ import {RestService} from "../../services/rest.service";
 export class LandingComponent implements OnInit {
 
   constructor(
-    private restService: RestService
+    private restService: RestService,
+    private logger: NGXLogger
   ) {
   }
 
@@ -40,8 +42,30 @@ export class LandingComponent implements OnInit {
     },
   ];
 
+  traffic_light_markers = [];
+
   ngOnInit() {
+    let traffic_lights = [];
+
+    this.restService.getTrafficLights().subscribe(
+      (data: any) => {
+        traffic_lights = data;
+        console.log(data['cursor']);
+        for (const traffic_light of data['cursor']) {
+          traffic_light['iconUrl'] = 'assets/pictures/traffic_light_red.png';
+          traffic_light['lat'] = traffic_light['location'][1];
+          traffic_light['lng'] = traffic_light['location'][0];
+          console.log(traffic_light);
+          this.traffic_light_markers.push(traffic_light);
         }
+      },
+      err => this.logger.error(err),
+      () => {
+        this.logger.debug('loaded traffic lights');
+      }
+    );
+  }
+
 
   getDelta(source, destination, steps) {
     return {

components/control_center/src/app/services/rest.service.ts

@@ -6,7 +6,7 @@ import {Observable} from 'rxjs';
 
 @Injectable()
 export class RestService {
-  private currentLocation = 'http://' + environment.location + ':' + environment.port + '/';
+  private currentLocation = 'http://' + environment.location + ':' + environment.port + '/api/v1/resources/';
 
   constructor(
     private logger: NGXLogger,
@@ -14,9 +14,7 @@ export class RestService {
   ) {
   }
 
-  testCall(i: number): Observable<string> {
+  getTrafficLights() {
-    const url = this.currentLocation + 'api1';
+    return this.http.get(this.currentLocation + 'traffic_lights');
-    this.logger.debug('Performing ' + i + '. test rest call on', url);
-    return this.http.get<string>(url);
   }
 }

components/control_center/src/environments/environment.ts

@@ -6,7 +6,7 @@ import {NgxLoggerLevel} from 'ngx-logger';
 
 export const environment = {
   production: false,
-  location: 'localhost',
+  location: 'xwayserver',
   port: 5004,
   ws_location: 'ws://127.0.0.1',
   ws_port: 8000,

components/entitiy_ident/mongo/traffic_lights.json

@@ -1,21 +1,21 @@
 [
   {
     "id": "1",
-    "location": [16.20703, 47.90853],
+    "location": [16.20719, 47.89584],
     "range": 2000,
     "switchingTime": 500,
     "initialColor": "RED"
   },
   {
     "id": "2",
-    "location":  [16.20703, 47.91572],
+    "location":  [16.20814, 47.90937],
     "range": 800,
     "switchingTime": 240,
     "initialColor": "GREEN"
   },
   {
     "id": "3",
-    "location":  [16.20703, 47.92471],
+    "location":  [16.20917, 47.92703],
     "range": 1000,
     "switchingTime": 360,
     "initialColor": "RED"