Work in progress (Not working yet): Display the threats grouped by city.

Author: brigaldies

src/app/components/threat/threat.component.html

@@ -6,9 +6,14 @@
     <!-- Loading icon -->
     <spinner [visible]="isLoading"></spinner>
 
+    <!-- TODO: Organize threats by location...-->
+    <!--<ul class="nav nav-pills nav-justified">-->
+      <!--<li *ngFor="let location of locationThreats" role="presentation" class="active">{{ location.city}}</li>-->
+    <!--</ul>-->
+
     <!-- Number of threats -->
     <div class="alert alert-danger" role="alert" *ngIf="!isLoading">
-      {{ (threats) ? threats.length : 0 }} threats.
+      {{ (threats) ? threats.length : 0 }} threats in {{ (locationThreats) ? locationThreats.length : 0 }} locations
     </div>
 
     <ul class="list-group posts" *ngIf="!isLoading">
@@ -18,6 +23,7 @@
         {{i+1}} - {{ threat.organization}}, {{ threat.assetType }}, {{ threat.threatType }}, {{ threat.threatSeverity }}, {{ threat.threatDateBegin}}
       </li>
     </ul>
+
   </div>
 
   <!-- Second 6 columns-wide panel: Selected Threat detail -->
@@ -33,18 +39,34 @@ <h3 class="panel-title">Organization: {{ selectedThreat.organization }}, Asset:
           <li class="list-group-item"><span class="badge">{{ selectedThreat.temperatureAlert }}</span>Temperature Alert:</li>
           <li class="list-group-item"><span class="badge">{{ selectedThreat.threatDateBegin }}</span>Threat Begin Date:</li>
         </ul>
+
+        <!-- Google maps for Angular: See docs at https://angular-maps.com -->
         <sebm-google-map [latitude]="selectedThreat.assetAddress.latitude"
-                         [longitude]="selectedThreat.assetAddress.longitude">
+                         [longitude]="selectedThreat.assetAddress.longitude"
+                         [zoom]="10"
+        >
+          <!-- Put a marker to display the temperature -->
           <sebm-google-map-marker
             [label]="''+selectedThreat.temperatureAlert"
             [latitude]="selectedThreat.assetAddress.latitude"
             [longitude]="selectedThreat.assetAddress.longitude"
+            [opacity]="0.8"
             (markerClick)="clickedMarker()"
           >
             <sebm-google-map-info-window>
               <strong>{{selectedThreat.assetType}}, {{selectedThreat.threatType}}, {{ selectedThreat.temperatureAlert}}</strong>
             </sebm-google-map-info-window>
           </sebm-google-map-marker>
+
+          <!-- Draw a circle, just to show that we can! -->
+          <sebm-google-map-circle
+            [latitude]="selectedThreat.assetAddress.latitude"
+            [longitude]="selectedThreat.assetAddress.longitude"
+            [radius]="10000"
+            [fillOpacity]="0.2"
+            [fillColor]="red"
+          >
+          </sebm-google-map-circle>
         </sebm-google-map>
       </div>
     </div>

src/app/components/threat/threat.component.ts

@@ -1,6 +1,7 @@
 import {Component, OnInit} from "@angular/core";
 import {ThreatService} from "../../services/threat.service";
 import {Threat} from "../../domain/threat/threat";
+import {LocationThreat} from "../../domain/threat/locationthreat";
 
 @Component({
   selector: 'app-threat',
@@ -11,6 +12,7 @@ export class ThreatComponent implements OnInit {
 
   isLoading: Boolean = true;
   threats: Threat[] = []
+  locationThreats: LocationThreat[] = []
   selectedThreat: Threat = null
 
   constructor(private threatService: ThreatService) {
@@ -23,15 +25,17 @@ export class ThreatComponent implements OnInit {
     this.threatService.getThreats()
       .subscribe(
         result => {
-          //console.log(result);
-          this.threats = result;
+          console.log(result);
+          this.threats = result.threats;
+          this.locationThreats = result.locations
         },
         error => {
           console.log(error);
           this.isLoading = false;
         },
         () => {
-          console.log((this.threats) ? this.threats.length : 0 + ' threats loaded.');
+          console.log((this.threats) ? this.threats.length : 0 + ' total threats.');
+          console.log((this.locationThreats) ? this.locationThreats.length : 0 + ' locations.');
           this.isLoading = false;
         }
       )

src/app/domain/threat/locationthreat.ts

@@ -0,0 +1,6 @@
+import {Threat} from "./threat";
+export class LocationThreat {
+  constructor(public city: string,
+              public threats: Threat[]) {
+  }
+}

src/app/services/threat.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from "@angular/core";
-import {Http, Headers} from "@angular/http";
+import {Http, Headers, URLSearchParams} from "@angular/http";
 import {Observable} from "rxjs";
 import {SecurityService} from "./security.service";
 import {Threat} from "../domain/threat/threat";
@@ -20,15 +20,20 @@ export class ThreatService {
   /**
    * Retrieve the active threats.
    */
-  getThreats(): Observable<Threat[]> {
+  getThreats(): Observable<any> {
     // console.log(this.securityService);
     let securityToken = this.securityService.securityContext ? this.securityService.securityContext.access_token : '';
     // console.log('Using security token ' + securityToken);
     let headers = new Headers();
     headers.append('Authorization', 'Bearer ' + securityToken);
     // console.log(headers);
+
+    // Query parameters
+    let params = new URLSearchParams();
+    params.set('forecast', '10'); // In number of days
+
     console.log('Calling ' + this.threatsUrl);
-    return this.http.get(this.threatsUrl, {headers: headers})
-      .map(response => response.json().threats);
+    return this.http.get(this.threatsUrl, {search: params, headers: headers})
+      .map(response => response.json());
   }
 }