;
+
+ 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/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/app/select-item/select-item.component.css b/src/app/select-item/select-item.component.css
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ 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
new file mode 100644
index 0000000..8221646
--- /dev/null
+++ b/src/app/select-item/select-item.component.html
@@ -0,0 +1,4 @@
+
+
+ {{item.name}} - ${{item.cost}} - Count: {{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..bd20390
--- /dev/null
+++ b/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);
+ }
+}
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;