From 51db552507c588f86e317c4550b16ada0972434f Mon Sep 17 00:00:00 2001 From: laurpaik Date: Fri, 17 Mar 2017 16:19:42 -0400 Subject: [PATCH 1/6] Include select item section on html --- src/app/app.component.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/app.component.html b/src/app/app.component.html index 20f9499..9faf7de 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,3 +2,4 @@

{{title}}

+ From 94e4a953baa050d26eb66c2140c9d825d3e322f2 Mon Sep 17 00:00:00 2001 From: laurpaik Date: Fri, 17 Mar 2017 16:20:27 -0400 Subject: [PATCH 2/6] Include Select Item Component in Module --- src/app/app.module.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b290358..1764d2e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,11 +8,13 @@ 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'; @NgModule({ declarations: [ AppComponent, - InsertCoinComponent + InsertCoinComponent, + SelectItemComponent ], imports: [ BrowserModule, From 2ce4e37b348ca10cf3413729f60707f62d4bee3d Mon Sep 17 00:00:00 2001 From: laurpaik Date: Fri, 17 Mar 2017 16:21:55 -0400 Subject: [PATCH 3/6] Write notes on Balance Service --- src/app/balance/balance.service.ts | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/app/balance/balance.service.ts b/src/app/balance/balance.service.ts index 7dd9878..c01fa32 100644 --- a/src/app/balance/balance.service.ts +++ b/src/app/balance/balance.service.ts @@ -5,26 +5,29 @@ import { Observable } from 'rxjs/Observable'; @Injectable() export class BalanceService { private balance: number = 0; + // subject is our observable + // kind of like an event queue-er + // .next puts another event in the queue private subject: Subject = new Subject(); 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.updateSubject(); } deductBalance(amount): void { From 66d71c42793e6cd720d01947d800f6e5e401dc48 Mon Sep 17 00:00:00 2001 From: laurpaik Date: Fri, 17 Mar 2017 16:23:07 -0400 Subject: [PATCH 4/6] Add notes to insert-coin html --- src/app/insert-coin/insert-coin.component.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/insert-coin/insert-coin.component.html b/src/app/insert-coin/insert-coin.component.html index 0513897..88bb2d3 100644 --- a/src/app/insert-coin/insert-coin.component.html +++ b/src/app/insert-coin/insert-coin.component.html @@ -1,4 +1,6 @@ +

{{ coinBalance? (coinBalance | currency:'USD':true): 'INSERT COIN' }}

+ From 9f574097aa56aba8a69c8b4405eaf999ada71241 Mon Sep 17 00:00:00 2001 From: laurpaik Date: Fri, 17 Mar 2017 16:24:14 -0400 Subject: [PATCH 5/6] Add notes to insert-coin component --- src/app/insert-coin/insert-coin.component.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app/insert-coin/insert-coin.component.ts b/src/app/insert-coin/insert-coin.component.ts index 7c16031..f13d85c 100644 --- a/src/app/insert-coin/insert-coin.component.ts +++ b/src/app/insert-coin/insert-coin.component.ts @@ -7,16 +7,20 @@ import { BalanceService } from '../balance/balance.service'; styleUrls: ['./insert-coin.component.scss'], providers: [] }) + +// tells the class it needs to conform to OnInit export class InsertCoinComponent implements OnInit { coinBalance = 0; constructor(public balanceService: BalanceService) { } + // whenever a component uses this, the balance gets updated ngOnInit() { this.balanceService.onBalanceUpdated((balance) => { this.coinBalance = balance; }); } + // this is what we invoke with the click handlers addBalance(amount) { this.balanceService.addBalance(amount); } From f298240e9874189eba4cf9ebea0c1ee1f234061c Mon Sep 17 00:00:00 2001 From: laurpaik Date: Fri, 17 Mar 2017 16:24:53 -0400 Subject: [PATCH 6/6] Create select-item component - Adds list of items with radio input in HTML - Creates onDispenseCan so that you get an alert if there's not enough inventory, if there's insufficient funds, or if you have extra change --- src/app/select-item/select-item.component.css | 0 .../select-item/select-item.component.html | 7 +++ .../select-item/select-item.component.spec.ts | 25 +++++++++++ src/app/select-item/select-item.component.ts | 43 +++++++++++++++++++ 4 files changed, 75 insertions(+) create mode 100644 src/app/select-item/select-item.component.css create mode 100644 src/app/select-item/select-item.component.html create mode 100644 src/app/select-item/select-item.component.spec.ts create mode 100644 src/app/select-item/select-item.component.ts diff --git a/src/app/select-item/select-item.component.css b/src/app/select-item/select-item.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/select-item/select-item.component.html b/src/app/select-item/select-item.component.html new file mode 100644 index 0000000..a0cb185 --- /dev/null +++ b/src/app/select-item/select-item.component.html @@ -0,0 +1,7 @@ +
  • + + {{item.name}} - + {{item.cost}} - + {{item.remaining}} +
    • + diff --git a/src/app/select-item/select-item.component.spec.ts b/src/app/select-item/select-item.component.spec.ts new file mode 100644 index 0000000..217a5ae --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SelectItemComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SelectItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/select-item/select-item.component.ts b/src/app/select-item/select-item.component.ts new file mode 100644 index 0000000..a297a31 --- /dev/null +++ b/src/app/select-item/select-item.component.ts @@ -0,0 +1,43 @@ +import { Component, OnInit } from '@angular/core'; +import { ItemService } from '../item/item.service'; +import { BalanceService } from '../balance/balance.service'; + +@Component({ + selector: 'app-select-item', + templateUrl: './select-item.component.html', + styleUrls: ['./select-item.component.css'] +}) +export class SelectItemComponent implements OnInit { + public items; + public selectedItem; + constructor(public itemService: ItemService, public balanceService: BalanceService) { } + + ngOnInit() { + this.itemService.onItemsRetrieved((items) => { + this.items = items; + }) + } + + onItemSelected(item) { + this.itemService.setSelectedItem(item); + } + + onDispenseCan(item) { + let balance = this.balanceService.getBalance() + let can = this.itemService.getSelectedItem() + if (!this.itemService.hasRemaining()){ + alert('no more cans!'); + } + else if (this.itemService.hasSufficientBalance(balance)) { + this.itemService.dispenseItem(() => { + this.balanceService.deductBalance(can.cost) + const remainingBalance = this.balanceService.getBalance() + alert('here is your change: ' + remainingBalance) + this.balanceService.setBalance(0) + }); + } + else { + alert('not enough funds'); + }; + } +}