From d38d88426a81b7b29b14d0395e5062bc0eb8a185 Mon Sep 17 00:00:00 2001 From: "dore.maxime@gmail.com" Date: Fri, 17 Mar 2017 16:26:21 -0400 Subject: [PATCH] Attempt lab Tried to do the following user stories: As a customer I want to be told whether my item has been dispensed So that I can know whether my transaction has completed Could not finish it. I had zero understanding of the first day's material and the morning of the second day which made it difficult to achieve this goal. I though it was taught well but something must have just not clicked in the very beginning and I got stuck straight away. What helped me was seeing the pattern with the previous given components Thank you for teaching us! Wish I could have impressed you to work with you guys! --- db.json | 2 +- src/app/app.component.html | 2 + src/app/app.module.ts | 6 ++- src/app/dispense/dispense.component.css | 0 src/app/dispense/dispense.component.html | 1 + src/app/dispense/dispense.component.spec.ts | 25 +++++++++++ src/app/dispense/dispense.component.ts | 43 +++++++++++++++++++ .../insert-coin/insert-coin.component.html | 1 + src/app/insert-coin/insert-coin.component.ts | 5 +++ src/app/select-item/select-item.component.css | 0 .../select-item/select-item.component.html | 13 ++++++ .../select-item/select-item.component.spec.ts | 25 +++++++++++ src/app/select-item/select-item.component.ts | 31 +++++++++++++ 13 files changed, 152 insertions(+), 2 deletions(-) create mode 100644 src/app/dispense/dispense.component.css create mode 100644 src/app/dispense/dispense.component.html create mode 100644 src/app/dispense/dispense.component.spec.ts create mode 100644 src/app/dispense/dispense.component.ts 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/db.json b/db.json index baf7af9..aa51c02 100644 --- a/db.json +++ b/db.json @@ -22,7 +22,7 @@ "id": 4, "name": "Mr Pibbs", "cost": 0.5, - "remaining": 10 + "remaining": 9 } ] } \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 20f9499..5999755 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,3 +2,5 @@

{{title}}

+ + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b290358..264624f 100644 --- a/src/app/app.module.ts +++ b/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 { DispenseComponent } from './dispense/dispense.component'; @NgModule({ declarations: [ AppComponent, - InsertCoinComponent + InsertCoinComponent, + SelectItemComponent, + DispenseComponent ], imports: [ BrowserModule, diff --git a/src/app/dispense/dispense.component.css b/src/app/dispense/dispense.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/dispense/dispense.component.html b/src/app/dispense/dispense.component.html new file mode 100644 index 0000000..e287594 --- /dev/null +++ b/src/app/dispense/dispense.component.html @@ -0,0 +1 @@ + diff --git a/src/app/dispense/dispense.component.spec.ts b/src/app/dispense/dispense.component.spec.ts new file mode 100644 index 0000000..3072888 --- /dev/null +++ b/src/app/dispense/dispense.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DispenseComponent } from './dispense.component'; + +describe('DispenseComponent', () => { + let component: DispenseComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DispenseComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DispenseComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dispense/dispense.component.ts b/src/app/dispense/dispense.component.ts new file mode 100644 index 0000000..22baab5 --- /dev/null +++ b/src/app/dispense/dispense.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-dispense', + templateUrl: './dispense.component.html', + styleUrls: ['./dispense.component.css'] +}) +export class DispenseComponent implements OnInit { + public dispense; + + constructor(public itemService: ItemService, public balanceService: BalanceService) { + } + + ngOnInit() { + } + + onItemDispensed(callback) { + // if the price of the item is equal or less than the balance, AND there is inventory + if((this.itemService.getSelectedItem() <= this.balanceService.getBalance() === true) && (this.itemService.hasRemaining() === true)) { + // then dispence + this.itemService.dispenseItem(callback); + // then update + let diff = this.itemService.getSelectedItem() - this.balanceService.getBalance() + this.balanceService.onBalanceUpdated(diff); + // inform user + alert('Here you go'); + } else { + // if it cost more + if (this.itemService.getSelectedItem() > this.balanceService.getBalance()) { + // alert user + alert('Insufficient Balance'); + } else { + // otherwise it means there are no more. + alert('Sold out'); + } + } + + } + + +} diff --git a/src/app/insert-coin/insert-coin.component.html b/src/app/insert-coin/insert-coin.component.html index 0513897..43d925b 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..65ddfce 100644 --- a/src/app/insert-coin/insert-coin.component.ts +++ b/src/app/insert-coin/insert-coin.component.ts @@ -21,4 +21,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..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..fb89331 --- /dev/null +++ b/src/app/select-item/select-item.component.html @@ -0,0 +1,13 @@ +

+ select-item works! +

+ + 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..c7efdef --- /dev/null +++ b/src/app/select-item/select-item.component.ts @@ -0,0 +1,31 @@ +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; + public title = 'james is the greatest'; + // items = [ + // { + // name: 'max', + // cost: 0.5 + // } + // ]; + constructor(public itemService: ItemService) { + } + + ngOnInit() { + this.itemService.onItemsRetrieved((items) => { + this.items = items; + }) + } + + onItemSelected(item) { + this.itemService.setSelectedItem(item); + } + +}