Add info window to control center

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

@@ -1,5 +1,3 @@
-html, body {
+#map{
-  height: 100%;
+  height : 100vh; width: 100%; padding:0px; margin: 0px;
-  padding: 0;
-  margin: 0;
 }

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

@@ -1,6 +1,25 @@
-<agm-map id="map" #map [zoom]="zoom" [latitude]="center.lat" [longitude]="center.lng" style="height: 900px; width: 1200px">
+<agm-map disableDefaultUI="true" id="map" #map [zoom]="zoom" [latitude]="center.lat" [longitude]="center.lng">
-  <agm-marker *ngFor="let m of car_markers | keyvalue" [iconUrl]="m.value.iconUrl" [latitude]="m.value.lat" [longitude]="m.value.lng" >
+  <agm-marker (markerClick)="openInfoWindow(m.value.vin)" [openInfoWindow]="true"
+              *ngFor="let m of car_markers | keyvalue" [iconUrl]="m.value.iconUrl"
+              [latitude]="m.value.lat" [longitude]="m.value.lng">
+    <agm-info-window style="opacity: 0.5!important;" (infoWindowClose)="closeInfoWindow(m.value.vin)"
+                     [isOpen]="isInfoWindowOpen(m.value.vin)" [latitude]="m.value.lat"
+                     [longitude]="m.value.lng">
+      <p>VIN: {{m.value.vin}}</p>
+      <p>OEM: {{m.value.oem}}</p>
+      <p>Model Type: {{m.value.modelType}}</p>
+      <p>Velocity: {{m.value.velocity}}</p>
+      <p>Timestamp: {{m.value.timestamp}}</p>
+    </agm-info-window>
   </agm-marker>
-  <agm-marker *ngFor="let m of traffic_light_markers | keyvalue" [iconUrl]="m.value.iconUrl"  [latitude]="m.value.lat" [longitude]="m.value.lng" >
+  <agm-marker *ngFor="let m of traffic_light_markers | keyvalue" [iconUrl]="m.value.iconUrl"
+              [latitude]="m.value.lat" [longitude]="m.value.lng">
+    <agm-info-window>
+      <p>Id: {{m.value.id}}</p>
+      <p>Switching Time: {{m.value.switchingTime}}</p>
+      <p>Range: {{m.value.range}}</p>
+      <p>Color: {{m.value.color}}</p>
+      <p>Last Switch: {{m.value.last_switch}}</p>
+    </agm-info-window>
   </agm-marker>
 </agm-map>

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

@@ -27,6 +27,7 @@ export class LandingComponent implements OnInit {
 
   traffic_light_markers = new Map();
   car_markers = new Map();
+  infoWindows = new Map();
 
   timeInterval: Subscription;
 
@@ -46,13 +47,16 @@ export class LandingComponent implements OnInit {
         startWith(0),
         switchMap(() => this.restService.getCarEvents(vin))
       ).subscribe((data: any) => {
-          const car = data.body['cursor'];
+          const carEvent = data.body['cursor'];
-          car['vin'] = car['vehicle_identification_number'];
+          const car = this.car_markers.get(vin);
+          car['velocity'] = carEvent['velocity'];
+          car['timestamp'] = carEvent['timestamp'];
+
           //TODO: if (car['near_crash_event']) {
           car['iconUrl'] = this.CAR_IMAGE;
 
-          car['lat'] = car['gps_location']['latitude'];
+          car['lat'] = carEvent['gps_location']['latitude'];
-          car['lng'] = car['gps_location']['longitude'];
+          car['lng'] = carEvent['gps_location']['longitude'];
           this.car_markers.set(car['vin'], car);
 
         },
@@ -130,5 +134,15 @@ export class LandingComponent implements OnInit {
     return (trafficLight === 'RED') ? this.TL_RED_IMAGE : this.TL_GREEN_IMAGE;
   }
 
+  openInfoWindow(id) {
+    this.infoWindows.set(id, true);
+  }
 
+  closeInfoWindow(id) {
+    this.infoWindows.delete(id);
+  }
+
+  isInfoWindowOpen(id) {
+    return this.infoWindows.has(id);
+  }
 }

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

@@ -32,7 +32,7 @@ export class InterceptorService implements HttpInterceptor {
       }
     });
 
-    this.logger.debug('Interceptor works');
+    //this.logger.debug('Interceptor works');
 
     // pipe the response observable
     return next.handle(req).pipe(

components/control_center/src/styles.css

@@ -4,6 +4,11 @@
 @import '~bootstrap/dist/css/bootstrap.min.css';
 
 body {
-  width: 95%;
+  width: 100%;
-  margin: auto;
+  margin: 0;
+  padding: 0;
+}
+
+.gm-style-iw-a {
+  opacity: 0.8 !important;
 }