Add private deals. Moved purchase function into the deals service.

Author: Kim Maida

ng2auth/src/app/deal.service.ts

@@ -36,4 +36,8 @@ export class DealService {
     console.error('An error occurred', err);
     return Observable.throw(err.message || err);
   }
+
+  purchase(item) {
+    alert(`You bought the: ${item.name}`);
+  }
 }

ng2auth/src/app/private-deals/private-deals.component.css

@@ -0,0 +1,3 @@
+.panel-body {
+  min-height: 100px;
+}

ng2auth/src/app/private-deals/private-deals.component.html

@@ -1,3 +1,29 @@
-<p>
-  private-deals works!
-</p>
+<h3 class="text-center">Special (Private) Deals</h3>
+
+<div class="col-sm-4" *ngFor="let deal of privateDeals">
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h3 class="panel-title">{{ deal.name }}</h3>
+    </div>
+    <div class="panel-body">
+      {{ deal.description }}
+    </div>
+    <div class="panel-footer">
+      <ul class="list-inline">
+        <li>Original</li>
+        <li class="pull-right">Sale</li>
+      </ul>
+      <ul class="list-inline">
+        <li><a class="btn btn-danger">${{ deal.originalPrice | number }}</a></li>
+        <li class="pull-right"><a class="btn btn-success" (click)="dealService.purchase(deal)">${{ deal.salePrice | number }}</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<div class="col-sm-12">
+  <div class="jumbotron text-center">
+    <h2>View Public Deals</h2>
+    <a class="btn btn-lg btn-success" routerLink="/deals">Public Deals</a>
+  </div>
+</div>

ng2auth/src/app/private-deals/private-deals.component.ts

@@ -1,15 +1,32 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { DealService } from '../deal.service';
+import { AuthService } from '../auth/auth.service';
+import { Subscription } from 'rxjs/Subscription';
+import { Deal } from '../deal';
 
 @Component({
   selector: 'app-private-deals',
   templateUrl: './private-deals.component.html',
   styleUrls: ['./private-deals.component.css']
 })
-export class PrivateDealsComponent implements OnInit {
+export class PrivateDealsComponent implements OnInit, OnDestroy {
+  dealsSub: Subscription;
+  privateDeals: Deal[];
+  error: any;
 
-  constructor() { }
+  constructor(public dealService: DealService) { }
 
   ngOnInit() {
+    this.dealsSub = this.dealService
+      .getPrivateDeals()
+      .subscribe(
+        deals => this.privateDeals = deals,
+        err => error => this.error = err
+      );
+  }
+
+  ngOnDestroy() {
+    this.dealsSub.unsubscribe();
   }
 
 }

ng2auth/src/app/public-deals/public-deals.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { DealService } from '../deal.service';
 import { AuthService } from '../auth/auth.service';
 import { Subscription } from 'rxjs/Subscription';
-import { Deal } from './../deal';
+import { Deal } from '../deal';
 
 @Component({
   selector: 'app-public-deals',
@@ -12,19 +12,19 @@ import { Deal } from './../deal';
 export class PublicDealsComponent implements OnInit, OnDestroy {
   dealsSub: Subscription;
   publicDeals: Deal[];
+  error: any;
 
   constructor(
-    private dealService: DealService,
+    public dealService: DealService,
     private authService: AuthService) { }
 
   ngOnInit() {
-    this.dealsSub = this.dealService.getPublicDeals().subscribe(
-      deals => this.publicDeals = deals
-    );
-  }
-
-  purchase(item) {
-    alert(`You bought the: ${item.name}`);
+    this.dealsSub = this.dealService
+      .getPublicDeals()
+      .subscribe(
+        deals => this.publicDeals = deals,
+        err => this.error = err
+      );
   }
 
   ngOnDestroy() {