From 9a87adc9e278fe41b8a03fba603d8ea45c215821 Mon Sep 17 00:00:00 2001 From: cathyob Date: Fri, 17 Mar 2017 12:27:33 -0400 Subject: [PATCH 1/4] first code along - make coin return button --- db.json | 8 ++++---- src/app/balance/balance.service.ts | 19 ++++++++++--------- .../insert-coin/insert-coin.component.html | 1 + src/app/insert-coin/insert-coin.component.ts | 12 ++++++++++++ src/styles.css | 7 ++++++- 5 files changed, 33 insertions(+), 14 deletions(-) diff --git a/db.json b/db.json index baf7af9..89fcd60 100644 --- a/db.json +++ b/db.json @@ -8,21 +8,21 @@ }, { "id": 2, - "name": "Coke", + "name": "Coca Cola", "cost": 0.5, "remaining": 10 }, { "id": 3, - "name": "Dr. Pepper", + "name": "Dr Pepper", "cost": 0.75, "remaining": 10 }, { "id": 4, - "name": "Mr Pibbs", + "name": "Mr. PiBB", "cost": 0.5, "remaining": 10 } ] -} \ No newline at end of file +} diff --git a/src/app/balance/balance.service.ts b/src/app/balance/balance.service.ts index 7dd9878..2886c4a 100644 --- a/src/app/balance/balance.service.ts +++ b/src/app/balance/balance.service.ts @@ -8,23 +8,23 @@ export class BalanceService { 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 { @@ -32,6 +32,7 @@ export class BalanceService { 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); } diff --git a/src/app/insert-coin/insert-coin.component.html b/src/app/insert-coin/insert-coin.component.html index 0513897..a99c8ae 100644 --- a/src/app/insert-coin/insert-coin.component.html +++ b/src/app/insert-coin/insert-coin.component.html @@ -2,3 +2,4 @@ + diff --git a/src/app/insert-coin/insert-coin.component.ts b/src/app/insert-coin/insert-coin.component.ts index 7c16031..2c87a81 100644 --- a/src/app/insert-coin/insert-coin.component.ts +++ b/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!') + } + } diff --git a/src/styles.css b/src/styles.css index 24edf86..5dbb807 100644 --- a/src/styles.css +++ b/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; From 27bf70a2dc3371ab1fa12f6b9390bb1a59f44806 Mon Sep 17 00:00:00 2001 From: cathyob Date: Fri, 17 Mar 2017 12:52:11 -0400 Subject: [PATCH 2/4] second code along plus extra - add iteration of an items into list --- src/app/app.component.html | 1 + src/app/app.module.ts | 4 ++- src/app/select-item/select-item.component.css | 0 .../select-item/select-item.component.html | 11 ++++++++ .../select-item/select-item.component.spec.ts | 25 +++++++++++++++++++ src/app/select-item/select-item.component.ts | 25 +++++++++++++++++++ 6 files changed, 65 insertions(+), 1 deletion(-) 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/app.component.html b/src/app/app.component.html index 20f9499..650c5e4 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,3 +2,4 @@

{{title}}

+ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b290358..26c8de4 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'; // was automatically generated @NgModule({ declarations: [ AppComponent, - InsertCoinComponent + InsertCoinComponent, + SelectItemComponent // was automatically generated ], imports: [ BrowserModule, 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..0d2a52a --- /dev/null +++ b/src/app/select-item/select-item.component.html @@ -0,0 +1,11 @@ +

+ select-item works! +

+
    +
  • + {{item.name}} +
    • +
  • + {{item.cost}} +
    • +
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..3b751ac --- /dev/null +++ b/src/app/select-item/select-item.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-select-item', + templateUrl: './select-item.component.html', + styleUrls: ['./select-item.component.css'] +}) +export class SelectItemComponent implements OnInit { + items = [ + { + name: 'Jonathan', + cost: .5 + }, + { + name: 'Max', + cost: .5 + } + ]; + + constructor() { } + + ngOnInit() { + } + +} From 6c61c7f529f069ace72b974bbb05744d7d23c38d Mon Sep 17 00:00:00 2001 From: cathyob Date: Fri, 17 Mar 2017 12:54:51 -0400 Subject: [PATCH 3/4] added annotation to select-item.component.html --- src/app/select-item/select-item.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/select-item/select-item.component.html b/src/app/select-item/select-item.component.html index 0d2a52a..d13f37f 100644 --- a/src/app/select-item/select-item.component.html +++ b/src/app/select-item/select-item.component.html @@ -1,7 +1,7 @@

select-item works!

-
    +
    • {{item.name}}
      • From a64b6bd9a2e709e046b3f02c3fd5434b35c2aaab Mon Sep 17 00:00:00 2001 From: cathyob Date: Fri, 17 Mar 2017 16:26:26 -0400 Subject: [PATCH 4/4] Final Version - with custom messages and rounding fixed --- db.json | 10 ++--- src/app/app.component.html | 1 + src/app/app.module.ts | 6 ++- src/app/balance/balance.service.ts | 2 + .../dispense-button.component.css | 5 +++ .../dispense-button.component.html | 2 + .../dispense-button.component.spec.ts | 25 ++++++++++++ .../dispense-button.component.ts | 39 +++++++++++++++++++ src/app/select-item/select-item.component.css | 1 + .../select-item/select-item.component.html | 13 ++----- src/app/select-item/select-item.component.ts | 22 +++++------ 11 files changed, 97 insertions(+), 29 deletions(-) create mode 100644 src/app/dispense-button/dispense-button.component.css create mode 100644 src/app/dispense-button/dispense-button.component.html create mode 100644 src/app/dispense-button/dispense-button.component.spec.ts create mode 100644 src/app/dispense-button/dispense-button.component.ts diff --git a/db.json b/db.json index 89fcd60..2a08202 100644 --- a/db.json +++ b/db.json @@ -4,25 +4,25 @@ "id": 1, "name": "Sprite", "cost": 0.5, - "remaining": 10 + "remaining": 5 }, { "id": 2, "name": "Coca Cola", "cost": 0.5, - "remaining": 10 + "remaining": 5 }, { "id": 3, "name": "Dr Pepper", "cost": 0.75, - "remaining": 10 + "remaining": 7 }, { "id": 4, "name": "Mr. PiBB", "cost": 0.5, - "remaining": 10 + "remaining": 0 } ] -} +} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 650c5e4..ee8f1d0 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,3 +3,4 @@

      + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 26c8de4..b4df5a6 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,13 +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'; // was automatically generated +import { SelectItemComponent } from './select-item/select-item.component'; +import { DispenseButtonComponent } from './dispense-button/dispense-button.component'; // was automatically generated @NgModule({ declarations: [ AppComponent, InsertCoinComponent, - SelectItemComponent // was automatically generated + SelectItemComponent, + DispenseButtonComponent // was automatically generated ], imports: [ BrowserModule, diff --git a/src/app/balance/balance.service.ts b/src/app/balance/balance.service.ts index 2886c4a..f222265 100644 --- a/src/app/balance/balance.service.ts +++ b/src/app/balance/balance.service.ts @@ -24,11 +24,13 @@ export class BalanceService { addBalance(amount): void { this.balance += amount; + 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(); } diff --git a/src/app/dispense-button/dispense-button.component.css b/src/app/dispense-button/dispense-button.component.css new file mode 100644 index 0000000..4cae466 --- /dev/null +++ b/src/app/dispense-button/dispense-button.component.css @@ -0,0 +1,5 @@ +p { + color: white; + text-transform: uppercase; + weight: bold; +} diff --git a/src/app/dispense-button/dispense-button.component.html b/src/app/dispense-button/dispense-button.component.html new file mode 100644 index 0000000..e7072b8 --- /dev/null +++ b/src/app/dispense-button/dispense-button.component.html @@ -0,0 +1,2 @@ + +

      {{message}}

      diff --git a/src/app/dispense-button/dispense-button.component.spec.ts b/src/app/dispense-button/dispense-button.component.spec.ts new file mode 100644 index 0000000..2f1b9e6 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DispenseButtonComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DispenseButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dispense-button/dispense-button.component.ts b/src/app/dispense-button/dispense-button.component.ts new file mode 100644 index 0000000..6d11515 --- /dev/null +++ b/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 :-(' + ) + } +} diff --git a/src/app/select-item/select-item.component.css b/src/app/select-item/select-item.component.css index e69de29..8b13789 100644 --- a/src/app/select-item/select-item.component.css +++ b/src/app/select-item/select-item.component.css @@ -0,0 +1 @@ + diff --git a/src/app/select-item/select-item.component.html b/src/app/select-item/select-item.component.html index d13f37f..8221646 100644 --- a/src/app/select-item/select-item.component.html +++ b/src/app/select-item/select-item.component.html @@ -1,11 +1,4 @@ -

      - select-item works! +

      + + {{item.name}} - ${{item.cost}} - Count: {{item.remaining}}

      -
        -
      • - {{item.name}} -
        • -
      • - {{item.cost}} -
        • -
      diff --git a/src/app/select-item/select-item.component.ts b/src/app/select-item/select-item.component.ts index 3b751ac..bd20390 100644 --- a/src/app/select-item/select-item.component.ts +++ b/src/app/select-item/select-item.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { ItemService } from '../item/item.service'; @Component({ selector: 'app-select-item', @@ -6,20 +7,17 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./select-item.component.css'] }) export class SelectItemComponent implements OnInit { - items = [ - { - name: 'Jonathan', - cost: .5 - }, - { - name: 'Max', - cost: .5 - } - ]; - - constructor() { } + 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); + } }