Add fancy NCE

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

@@ -1,7 +1,7 @@
 <agm-map disableDefaultUI="true" id="map" #map [zoom]="zoom" [latitude]="center.lat" [longitude]="center.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">
+              [latitude]="m.value.lat" [longitude]="m.value.lng" [animation]="(m.value.near_crash_event)?'BOUNCE':''">
     <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">
@@ -10,6 +10,7 @@
       <p>Model Type: {{m.value.modelType}}</p>
       <p>Velocity: {{m.value.velocity}}</p>
       <p>Timestamp: {{m.value.timestamp}}</p>
+      <p>NCE: {{m.value.near_crash_event}}</p>
     </agm-info-window>
   </agm-marker>
   <agm-marker *ngFor="let m of traffic_light_markers | keyvalue" [iconUrl]="m.value.iconUrl"

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

@@ -34,6 +34,8 @@ export class LandingComponent implements OnInit {
   TL_RED_IMAGE = 'assets/pictures/traffic_light_red.png';
   TL_GREEN_IMAGE = 'assets/pictures/traffic_light_green.png';
   CAR_IMAGE = 'assets/pictures/car.png';
+  CAR_IMAGE_NCE = 'assets/pictures/car_orange.png';
+  NCE_SOUND = 'assets/sound/crash.mp3';
 
   ngOnInit() {
     this.getTrafficLights();
@@ -51,10 +53,13 @@ export class LandingComponent implements OnInit {
           const car = this.car_markers.get(vin);
           car['velocity'] = carEvent['velocity'];
           car['timestamp'] = carEvent['timestamp'];
-
+          car['near_crash_event'] = carEvent['near_crash_event'];
-          //TODO: if (car['near_crash_event']) {
+          if (car['near_crash_event']) {
+            car['iconUrl'] = this.CAR_IMAGE_NCE;
+            this.playCrashSound();
+          } else {
             car['iconUrl'] = this.CAR_IMAGE;
-
+          }
           car['lat'] = carEvent['gps_location']['latitude'];
           car['lng'] = carEvent['gps_location']['longitude'];
           this.car_markers.set(car['vin'], car);
@@ -145,4 +150,11 @@ export class LandingComponent implements OnInit {
   isInfoWindowOpen(id) {
     return this.infoWindows.has(id);
   }
+
+  playCrashSound() {
+    const audio = new Audio();
+    audio.src = this.NCE_SOUND;
+    audio.load();
+    audio.play();
+  }
 }