Version with custom messages and rounding fixed

db.json

@@ -4,25 +4,25 @@
       "id": 1,
       "name": "Sprite",
       "cost": 0.5,
-      "remaining": 10
+      "remaining": 5
     },
     {
       "id": 2,
-      "name": "Coke",
+      "name": "Coca Cola",
       "cost": 0.5,
-      "remaining": 10
+      "remaining": 5
     },
     {
       "id": 3,
-      "name": "Dr. Pepper",
+      "name": "Dr Pepper",
       "cost": 0.75,
-      "remaining": 10
+      "remaining": 7
     },
     {
       "id": 4,
-      "name": "Mr Pibbs",
+      "name": "Mr. PiBB",
       "cost": 0.5,
-      "remaining": 10
+      "remaining": 0
     }
   ]
 }

src/app/app.component.html

@@ -2,3 +2,5 @@ <h1>
   {{title}}
 </h1>
 <app-insert-coin></app-insert-coin>
+<app-select-item></app-select-item> <!-- needed to add here for it to be visible-->
+<app-dispense-button></app-dispense-button>

src/app/app.module.ts

@@ -8,11 +8,15 @@ import { InsertCoinComponent } from './insert-coin/insert-coin.component';
 
 import { ItemService } from './item/item.service';
 import { BalanceService } from './balance/balance.service';
+import { SelectItemComponent } from './select-item/select-item.component';
+import { DispenseButtonComponent } from './dispense-button/dispense-button.component'; // was automatically generated
 
 @NgModule({
   declarations: [
     AppComponent,
-    InsertCoinComponent
+    InsertCoinComponent,
+    SelectItemComponent,
+    DispenseButtonComponent // was automatically generated
   ],
   imports: [
     BrowserModule,

src/app/balance/balance.service.ts

@@ -8,30 +8,33 @@ export class BalanceService {
   private subject: Subject<number> = new Subject<number>();
 
   constructor() { }
-  
+
   private updateSubject(): void {
     this.subject.next(this.balance);
   }
 
-  setBalance(amount): void { 
-  	this.balance = amount; 
+  setBalance(amount): void {
+  	this.balance = amount;
   	this.updateSubject();
   }
-  
-  getBalance(): number { 
-  	return this.balance; 
+
+  getBalance(): number {
+  	return this.balance;
   }
-  
-  addBalance(amount): void { 
+
+  addBalance(amount): void {
   	this.balance += amount;
-  	this.updateSubject(); 
+    this.balance = Math.round(this.balance * 100) / 100
+  	this.updateSubject();
   }
 
   deductBalance(amount): void {
     this.balance -= amount;
+    this.balance = Math.round(this.balance * 100) / 100
     this.updateSubject();
   }
 
+// let this queue whoever is subscribed and run their callbacks (e.g. see ngOnInit() in insert-coin.component.ts)
   onBalanceUpdated(callback): void {
   	this.subject.asObservable().subscribe(callback);
   }

src/app/dispense-button/dispense-button.component.css

@@ -0,0 +1,5 @@
+p {
+  color: white;
+  text-transform: uppercase;
+  weight: bold;
+}

src/app/dispense-button/dispense-button.component.html

@@ -0,0 +1,2 @@
+<button class="button -orange"(click)='onItemDispensed()'>Dispense</button>
+<p>{{message}}</p>

src/app/dispense-button/dispense-button.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DispenseButtonComponent } from './dispense-button.component';
+
+describe('DispenseButtonComponent', () => {
+  let component: DispenseButtonComponent;
+  let fixture: ComponentFixture<DispenseButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DispenseButtonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DispenseButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dispense-button/dispense-button.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { ItemService } from '../item/item.service';
+import { BalanceService } from '../balance/balance.service';
+
+
+@Component({
+  selector: 'app-dispense-button',
+  templateUrl: './dispense-button.component.html',
+  styleUrls: ['./dispense-button.component.css']
+})
+export class DispenseButtonComponent implements OnInit {
+  public item;
+  public balance: number;
+  public message: string;
+  constructor(public itemService: ItemService, public balanceService: BalanceService) { }
+
+  ngOnInit() {
+  }
+
+  onItemDispensed() {
+    this.item = this.itemService.getSelectedItem();
+    this.balance = this.balanceService.getBalance();
+
+    if (this.itemService.hasSufficientBalance(this.balance)) {
+      this.itemService.dispenseItem((response) => {
+        this.balanceService.deductBalance(response.cost);
+        if (response.name === 'Dr Pepper') {
+          this.message = 'Good Choice! Dr Pepper is Life'
+        } else (
+          this.message = "Should've had a Dr Pepper"
+        )
+      })
+    } else if (this.itemService.hasRemaining()) {
+      this.message = 'Not enough balance - please insert coins!';
+    } else (
+      this.message = 'Whomp Whomp Sold Out :-('
+    )
+  }
+}

src/app/insert-coin/insert-coin.component.html

@@ -2,3 +2,4 @@
 <button class="button -yellow" (click)='addBalance(.05)'>05c</button>
 <button class="button -blue" (click)='addBalance(.10)'>10c</button>
 <button class="button -green" (click)='addBalance(.25)'>25c</button>
+<button class="button -orange" (click)='returnCoins()'>Return Coins</button>

src/app/insert-coin/insert-coin.component.ts

@@ -1,6 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { BalanceService } from '../balance/balance.service';
 
+// NOTE
+// a service is an abstraction of business logic that can be extended and
+// injected into multiple components
+// NOTE
+
 @Component({
   selector: 'app-insert-coin',
   templateUrl: './insert-coin.component.html',
@@ -11,6 +16,8 @@ export class InsertCoinComponent implements OnInit {
   coinBalance = 0;
   constructor(public balanceService: BalanceService) { }
 
+
+// when there is a new thing, send it to me (see onBalanceUpdated(callback): in balance.service.ts)
   ngOnInit() {
   	this.balanceService.onBalanceUpdated((balance) => {
   	  this.coinBalance = balance;
@@ -21,4 +28,9 @@ export class InsertCoinComponent implements OnInit {
   	this.balanceService.addBalance(amount);
   }
 
+  returnCoins() {
+    this.balanceService.setBalance(0);
+    alert('Coins Returned!')
+  }
+
 }

src/app/select-item/select-item.component.css

@@ -0,0 +1 @@
+

src/app/select-item/select-item.component.html

@@ -0,0 +1,4 @@
+<p *ngFor='let item of items'>
+  <!-- <button (click)='onItemSelected(item)'>{{item.name}}</button> -->
+  <input type='radio' [value]='item.id' name='items-list' (change)='onItemSelected(item)'> {{item.name}} - ${{item.cost}} - Count: {{item.remaining}}
+</p>

src/app/select-item/select-item.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectItemComponent } from './select-item.component';
+
+describe('SelectItemComponent', () => {
+  let component: SelectItemComponent;
+  let fixture: ComponentFixture<SelectItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SelectItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/select-item/select-item.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { ItemService } from '../item/item.service';
+
+@Component({
+  selector: 'app-select-item',
+  templateUrl: './select-item.component.html',
+  styleUrls: ['./select-item.component.css']
+})
+export class SelectItemComponent implements OnInit {
+  public items;
+  constructor(public itemService: ItemService) { }
+
+  // event handler instead instead of callback going into jquery it is going into code already written to be called later
+  ngOnInit() {
+    this.itemService.onItemsRetrieved((items) => {
+      this.items = items;
+    })
+  }
+
+  onItemSelected(item) {
+    this.itemService.setSelectedItem(item);
+  }
+}

src/styles.css

@@ -38,10 +38,15 @@ h2 { color: #FFF; font-family: 'Open Sans', sans-serif; font-size: 30px; font-we
 }
 
 .button.-yellow {
-  color: #f15c5c;
+  color: black;
   background: #feee7d;
 }
 
+.button.-orange {
+  color: black;
+  background: #ffb74d;
+}
+
 .button.-blue {
   color: #fff;
   background: #2b90d9;