From b9c450cedc4312a3d521300de723b9dca55590dc Mon Sep 17 00:00:00 2001
From: David Eder <e1326201@student.tuwien.ac.at>
Date: Wed, 9 Jun 2021 09:58:17 +0200
Subject: [PATCH] Add traffic light visualization

---
 .../component/landing/landing.component.html  |   6 ++--
 .../component/landing/landing.component.ts    |  28 ++++++++++++++++--
 .../src/app/services/rest.service.ts          |   8 ++---
 .../src/assets/pictures/traffic_light.png     | Bin 0 -> 275 bytes
 .../assets/pictures/traffic_light_green.png   | Bin 0 -> 303 bytes
 .../src/assets/pictures/traffic_light_red.png | Bin 0 -> 269 bytes
 .../src/environments/environment.ts           |   2 +-
 .../entitiy_ident/mongo/traffic_lights.json   |   6 ++--
 8 files changed, 37 insertions(+), 13 deletions(-)
 create mode 100644 components/control_center/src/assets/pictures/traffic_light.png
 create mode 100644 components/control_center/src/assets/pictures/traffic_light_green.png
 create mode 100644 components/control_center/src/assets/pictures/traffic_light_red.png

diff --git a/components/control_center/src/app/component/landing/landing.component.html b/components/control_center/src/app/component/landing/landing.component.html
index 1569c95..f5a10eb 100644
--- a/components/control_center/src/app/component/landing/landing.component.html
+++ b/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-marker *ngFor="let m of markers" [iconUrl]="m.iconUrl" [visible]="m.visible"  [latitude]="m.lat" [longitude]="m.lng" >
+<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>-->
+    <agm-marker *ngFor="let m of traffic_light_markers" [iconUrl]="m.iconUrl"  [latitude]="m.lat" [longitude]="m.lng" >
   </agm-marker>
 </agm-map>
diff --git a/components/control_center/src/app/component/landing/landing.component.ts b/components/control_center/src/app/component/landing/landing.component.ts
index 0fc0ca4..481018e 100644
--- a/components/control_center/src/app/component/landing/landing.component.ts
+++ b/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,9 +42,31 @@ 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 {
       lat: (destination.lat - source.lat) / steps,
diff --git a/components/control_center/src/app/services/rest.service.ts b/components/control_center/src/app/services/rest.service.ts
index a0f659e..0a60896 100644
--- a/components/control_center/src/app/services/rest.service.ts
+++ b/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> {
-    const url = this.currentLocation + 'api1';
-    this.logger.debug('Performing ' + i + '. test rest call on', url);
-    return this.http.get<string>(url);
+  getTrafficLights() {
+    return this.http.get(this.currentLocation + 'traffic_lights');
   }
 }
diff --git a/components/control_center/src/assets/pictures/traffic_light.png b/components/control_center/src/assets/pictures/traffic_light.png
new file mode 100644
index 0000000000000000000000000000000000000000..147ed697e7692d4a56216ca3de1f48f8dfce120a
GIT binary patch
literal 275
zcmV+u0qp*XP)<h;3K|Lk000e1NJLTq001xm001xu1ONa4{R=S+0002mNkl<ZSi@sr
z7zLw%w!nsAKf`|la5IAr`4(IzXgtIUvcZ2M;o!0Ww=s_yl7ZoEz>v@I9*-J=;581d
z_ZbA>Y7}r<ahk9N%W-J+M^TlJLsdIr3mkB06+lsCfK|<J1{GprVKr9GJSb{3u&U`M
zE}D6;W-n(HHOW|1Y-eC0HYKqz%*W7v9!a|ZFtwlu&Sc_^hX56z7IZ6|fxZ&}M)!R*
znd!hd8O_O~Ie9cEkLKiIpOf#y;o;GoJere7bMm0G;672tA12=de<G~74D4u)f>A(I
Z007;c0-1b^z1RQ%002ovPDHLkV1lL?ZJz)D

literal 0
HcmV?d00001

diff --git a/components/control_center/src/assets/pictures/traffic_light_green.png b/components/control_center/src/assets/pictures/traffic_light_green.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea0d07ca0067874ce58c5cfc51f9a9d161b3cbf9
GIT binary patch
literal 303
zcmV+~0nq-5P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0002?Nkl<ZXo2mS
zK@Ng25JjsoG44DRw{YdjTzLx)<<79eKp<+Jmg%(8ki55qmia?x<|p6)0IIUf2;LVK
zZqjndiFm%}?0)mO*!S+sNT|o=6VQ~9SnJ0oyy1Csu4{kSpRV%y;a=AUdn(!+n#So<
zYW+jJ|Li`Ngv8VvQH{k*C?I~k=ATLlR0#}kb#1gUH3|IX%`Fi*$uHC;wB{+K#7c3$
zaY`&TVono#(@UkzV&992q>fRGaMNOsr12U<GcH5m#1c611Wr7I6C1#Z1#n`VSO6!M
zz=<bt;u)OS08T7`6XV1Jd|t23=6^8(093>|_X74op0T01=;Z(a002ovPDHLkV1f%T
Bh`9g&

literal 0
HcmV?d00001

diff --git a/components/control_center/src/assets/pictures/traffic_light_red.png b/components/control_center/src/assets/pictures/traffic_light_red.png
new file mode 100644
index 0000000000000000000000000000000000000000..44cd8d212b4baa1ec1e4336b501bd86930471095
GIT binary patch
literal 269
zcmV+o0rLKdP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0002gNkl<ZXo2mS
z%L>FG3`OlQi+-uget&lk$S{;*Lt<j3%sJqyH4kla#U=oNsVolXB{=Y|Sl%9wyJzx&
z)iL)K6vH(BB7xExS(vbWKa1nog!i-H$C^+xf!#3jwd4BCVoQ^Nrt*uWSXbF@q^*jo
z2BhsDh1RFG_o`PeY6mo{pDbPI&RrPgt7r<*Q^YyA`*bIg+iiD9;I6Y!@KK^G7L>RJ
zN{kYpK#Ak+{6L9OVwCvdpu{L~zpV;Nd<G>(i31Wri4AbQKAXq?Vgdk|NJ{AgU-HT+
TDQw@t00000NkvXXu0mjft`K(M

literal 0
HcmV?d00001

diff --git a/components/control_center/src/environments/environment.ts b/components/control_center/src/environments/environment.ts
index da64f42..152fea1 100644
--- a/components/control_center/src/environments/environment.ts
+++ b/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,
diff --git a/components/entitiy_ident/mongo/traffic_lights.json b/components/entitiy_ident/mongo/traffic_lights.json
index ec5282a..8dc949c 100644
--- a/components/entitiy_ident/mongo/traffic_lights.json
+++ b/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"