From b119c84adfa8ea1a31db58600c01bfb1e9a8668a Mon Sep 17 00:00:00 2001 From: Soboscott Date: Fri, 17 Mar 2017 16:26:30 -0400 Subject: [PATCH] Lab from Angular 2 class We learned to use NG2 and added dispense-item and select-item components Scott Landry 'Soboscott' worked on this --- db.json | 2 +- src/app/app.component.html | 2 + src/app/app.component.ts | 2 +- src/app/app.module.ts | 6 ++- .../dispense-item.component.html | 1 + .../dispense-item.component.scss | 0 .../dispense-item.component.spec.ts | 25 +++++++++++++ .../dispense-item/dispense-item.component.ts | 37 +++++++++++++++++++ .../insert-coin/insert-coin.component.html | 1 + src/app/insert-coin/insert-coin.component.ts | 4 ++ src/app/item/item.service.ts | 2 +- src/app/select-item/select-item.component.css | 9 +++++ .../select-item/select-item.component.html | 18 +++++++++ .../select-item/select-item.component.spec.ts | 25 +++++++++++++ src/app/select-item/select-item.component.ts | 25 +++++++++++++ src/styles.css | 3 +- 16 files changed, 157 insertions(+), 5 deletions(-) create mode 100644 src/app/dispense-item/dispense-item.component.html create mode 100644 src/app/dispense-item/dispense-item.component.scss create mode 100644 src/app/dispense-item/dispense-item.component.spec.ts create mode 100644 src/app/dispense-item/dispense-item.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..919d6ea 100644 --- a/db.json +++ b/db.json @@ -10,7 +10,7 @@ "id": 2, "name": "Coke", "cost": 0.5, - "remaining": 10 + "remaining": 0 }, { "id": 3, diff --git a/src/app/app.component.html b/src/app/app.component.html index 20f9499..a4fee6a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,3 +2,5 @@

{{title}}

+ + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ef01059..ac15e22 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,5 +6,5 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.css'] }) export class AppComponent { - title = 'ngCola'; + title = 'Scotty-Cola'; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b290358..62f9f67 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 { DispenseItemComponent } from './dispense-item/dispense-item.component'; @NgModule({ declarations: [ AppComponent, - InsertCoinComponent + InsertCoinComponent, + SelectItemComponent, + DispenseItemComponent ], imports: [ BrowserModule, diff --git a/src/app/dispense-item/dispense-item.component.html b/src/app/dispense-item/dispense-item.component.html new file mode 100644 index 0000000..bff0a72 --- /dev/null +++ b/src/app/dispense-item/dispense-item.component.html @@ -0,0 +1 @@ + diff --git a/src/app/dispense-item/dispense-item.component.scss b/src/app/dispense-item/dispense-item.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/dispense-item/dispense-item.component.spec.ts b/src/app/dispense-item/dispense-item.component.spec.ts new file mode 100644 index 0000000..e3d2ca1 --- /dev/null +++ b/src/app/dispense-item/dispense-item.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DispenseItemComponent } from './dispense-item.component'; + +describe('DispenseItemComponent', () => { + let component: DispenseItemComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DispenseItemComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DispenseItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dispense-item/dispense-item.component.ts b/src/app/dispense-item/dispense-item.component.ts new file mode 100644 index 0000000..f5a1b72 --- /dev/null +++ b/src/app/dispense-item/dispense-item.component.ts @@ -0,0 +1,37 @@ +import { Component, OnInit } from '@angular/core'; +import { ItemService } from '../item/item.service'; +import { BalanceService } from '../balance/balance.service'; + +@Component({ + selector: 'app-dispense-item', + templateUrl: './dispense-item.component.html', + styleUrls: ['./dispense-item.component.scss'], + providers: [] +}) +export class DispenseItemComponent implements OnInit { + constructor(private itemService: ItemService, private balanceService: BalanceService) { } + + ngOnInit() { } + + dispenseItem() { + const currentBalance = this.balanceService.getBalance(); + if(!this.hasSufficientBalance(currentBalance)) return; + if(!this.hasRemaining()) return; + this.itemService.dispenseItem((item) => { + alert('Enjoy your ' + item.name); + this.balanceService.deductBalance(item.cost); + }); + } + + hasSufficientBalance(currentBalance) { + const hasBalance = this.itemService.hasSufficientBalance(currentBalance); + if(!hasBalance) alert('Insufficient balance'); + return hasBalance; + } + + hasRemaining() { + const remaining = this.itemService.hasRemaining(); + if(!remaining) alert('Stop kicking the machine...No remaining inventory for this item'); + return remaining; + } +} diff --git a/src/app/insert-coin/insert-coin.component.html b/src/app/insert-coin/insert-coin.component.html index 0513897..d0ef4c8 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..a429353 100644 --- a/src/app/insert-coin/insert-coin.component.ts +++ b/src/app/insert-coin/insert-coin.component.ts @@ -21,4 +21,8 @@ export class InsertCoinComponent implements OnInit { this.balanceService.addBalance(amount); } +returnCoins(){ +this.balanceService.setBalance(0); +alert('Coins returned!'); +} } diff --git a/src/app/item/item.service.ts b/src/app/item/item.service.ts index b9597b6..28f0961 100644 --- a/src/app/item/item.service.ts +++ b/src/app/item/item.service.ts @@ -35,7 +35,7 @@ export class ItemService { .map((res:Response) => res.json()); } - dispenseItem(callback: any): void { + dispenseItem(callback: any): void { this.selectedItem.remaining -= 1; this.put(this.selectedItem).subscribe(callback); } 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..e30662b --- /dev/null +++ b/src/app/select-item/select-item.component.css @@ -0,0 +1,9 @@ +.select-item__selectable-item { + list-style: none; + padding: 12px 12px 12px 2px; + font-family: 'Helvetica Neue', sans-serif; font-size: 14px; +} + +.select-item__selectable-item-list { + padding: 0; +} 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..180ad39 --- /dev/null +++ b/src/app/select-item/select-item.component.html @@ -0,0 +1,18 @@ +

+Pick a Soda +

+ 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..a973966 --- /dev/null +++ b/src/app/select-item/select-item.component.ts @@ -0,0 +1,25 @@ +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'], + providers: [] + +}) +export class SelectItemComponent implements OnInit { +public items; + constructor(public itemService: ItemService) { } + + 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..b88e052 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,6 +1,7 @@ /* You can add global styles to this file, and also import other style files */ -body { background-color: #B33323; } +body { background-color: #B33323; + background-image: url(http://i.imgur.com/PkoiW5k.pn)} h1 { color: #FFF; font-family: 'Helvetica Neue', sans-serif; font-size: 75px; font-weight: bold; letter-spacing: -1px; line-height: 1; } h2 { color: #FFF; font-family: 'Open Sans', sans-serif; font-size: 30px; font-weight: 300; line-height: 32px; margin: 0 0 72px; }