The threats are now grouped by city.

Author: brigaldies

src/app/app.component.html

@@ -1,23 +1,4 @@
+<app-header></app-header>
 <div class="container">
-  <div class="row">
-    <div class="page-header">
-      <h1>{{title}}</h1>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-xs-10">
-      <button [routerLink]="['/login']" routerLinkActive="active" class="btn btn-primary">Login</button>
-      <button [routerLink]="['/threat']" routerLinkActive="active" class="btn btn-danger" *ngIf="securityService.isLoggedIn()">Threats</button>
-      <button [routerLink]="['']" routerLinkActive="active" class="btn btn-primary">Home</button>
-      <hr>
-      <!-- Render the routing -->
-      <div class="container">
-        <router-outlet></router-outlet>
-      </div>
-    </div>
-  </div>
-  <div class="row">
-    <hr>
-    Footer
-  </div>
+  <router-outlet></router-outlet>
 </div>

src/app/app.module.ts

@@ -12,6 +12,8 @@ import {ThreatComponent} from "./components/threat/threat.component";
 import {ThreatService} from "./services/threat.service";
 import {SpinnerComponent} from "./components/spinner/spinner.component";
 import {AgmCoreModule} from "angular2-google-maps/core";
+import { HeaderComponent } from './components/header/header.component';
+import { DropdownDirective } from './directives/dropdown.directive';
 
 @NgModule({
   declarations: [
@@ -20,7 +22,9 @@ import {AgmCoreModule} from "angular2-google-maps/core";
     HomeComponent,
     GreetingComponent,
     ThreatComponent,
-    SpinnerComponent
+    SpinnerComponent,
+    HeaderComponent,
+    DropdownDirective
   ],
   imports: [
     BrowserModule,

src/app/components/header/header.component.css

@@ -0,0 +1,27 @@
+<nav class="navbar navbar-default">
+  <div class="container-fluid">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header">
+      <a class="navbar-brand" [routerLink]="['/']">Threat Monitor</a>
+    </div>
+
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav">
+        <li routerLinkActive="active"><a [routerLink]="['/threat']">Threats</a></li>
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown" rbDropdown>
+          <a class="dropdown-toggle"
+             role="button"
+             aria-haspopup="true"
+             aria-expanded="false">User<span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a [routerLink]="['/login']" style="cursor: pointer;">Login</a></li>
+            <li><a style="cursor: pointer;">Logout</a></li>
+          </ul>
+        </li>
+      </ul>
+    </div><!-- /.navbar-collapse -->
+  </div><!-- /.container-fluid -->
+</nav>

src/app/components/header/header.component.html

@@ -0,0 +1,16 @@
+import {Component, OnInit} from "@angular/core";
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/header/header.component.ts

@@ -6,18 +6,20 @@
     <!-- 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 in {{ (locationThreats) ? locationThreats.length : 0 }} locations
     </div>
 
-    <ul class="list-group posts" *ngIf="!isLoading">
-      <li class="list-group-item" [class.active]="isActive(i)" *ngFor="let threat of threats; let i=index"
+    <!-- Group threats by city -->
+    <ul class="nav nav-pills" *ngIf="!isLoading">
+      <li *ngFor="let location of locationThreats; let i=index" role="presentation" [class.active]="location === selectedLocation">
+        <a (click)="onSelectLocation(location)">{{ location.city + ' (' + location.threats.length + ')'}} </a>
+      </li>
+    </ul>
+
+    <ul class="list-group posts" *ngIf="!isLoading && selectedLocation">
+      <li class="list-group-item" [class.active]="isActive(i)" *ngFor="let threat of selectedLocation.threats; let i=index"
           (click)="onClick(threat)">
         <span class="badge">{{ threat.temperatureAlert }}</span>
         {{i+1}} - {{ threat.organization}}, {{ threat.assetType }}, {{ threat.threatType }}, {{ threat.threatSeverity }}, {{ threat.threatDateBegin}}

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

@@ -13,6 +13,7 @@ export class ThreatComponent implements OnInit {
   isLoading: Boolean = true;
   threats: Threat[] = []
   locationThreats: LocationThreat[] = []
+  selectedLocation: LocationThreat = null
   selectedThreat: Threat = null
 
   constructor(private threatService: ThreatService) {
@@ -28,6 +29,11 @@ export class ThreatComponent implements OnInit {
           console.log(result);
           this.threats = result.threats;
           this.locationThreats = result.locations
+          this.selectedLocation = this.locationThreats.length > 0 ? this.locationThreats[0] : null;
+          console.log('Selected location: ' + this.selectedLocation.city)
+          if (this.selectedLocation) {
+            this.selectedThreat = (this.selectedLocation.threats.length > 0) ? this.selectedLocation.threats[0] : null;
+          }
         },
         error => {
           console.log(error);
@@ -41,6 +47,16 @@ export class ThreatComponent implements OnInit {
       )
   }
 
+  /**
+   * Location selection
+   * @param location
+   */
+  onSelectLocation(location: LocationThreat) {
+    this.selectedLocation = location;
+    this.selectedThreat = (this.selectedLocation.threats.length > 0) ? this.selectedLocation.threats[0] : null;
+    console.log('Selected location: ' + this.selectedLocation.city)
+  }
+
   /**
    * Threat selection.
    */
@@ -53,7 +69,8 @@ export class ThreatComponent implements OnInit {
    * Is a post currently selected/active?
    */
   isActive(threatIndex: number) {
-    return this.selectedThreat != null && this.threats[threatIndex] == this.selectedThreat;
+    // return this.selectedThreat != null && this.threats[threatIndex] == this.selectedThreat;
+    return this.selectedThreat != null && this.selectedLocation.threats[threatIndex] == this.selectedThreat;
   }
 
   clickedMarker() {

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

@@ -0,0 +1,25 @@
+import {Directive, HostBinding, HostListener} from "@angular/core";
+
+@Directive({
+  selector: '[rbDropdown]'
+})
+export class DropdownDirective {
+
+  // The CSS class 'open' (From Bootstrap) is appended to the element with this directive
+  // if opened() returns true.
+  @HostBinding('class.open') get opened() {
+    return this.isOpen;
+  }
+
+  // Handle click events on the element
+  @HostListener('click') openDropdown() {
+    this.isOpen = true;
+  }
+
+  // Handle mouse leave events
+  @HostListener('mouseleave') closeDropdown() {
+    this.isOpen = false;
+  }
+
+  private isOpen = false;
+}