From 2b43753e546b85ad3aea411df9636b23153fb9d8 Mon Sep 17 00:00:00 2001 From: schencej Date: Mon, 9 Dec 2019 17:46:39 -0500 Subject: added pre cooking page --- .../pre-cook-pop-up/pre-cook-pop-up.component.css | 0 .../pre-cook-pop-up/pre-cook-pop-up.component.html | 13 +++++++++++ .../pre-cook-pop-up.component.spec.ts | 25 ++++++++++++++++++++++ .../pre-cook-pop-up/pre-cook-pop-up.component.ts | 24 +++++++++++++++++++++ 4 files changed, 62 insertions(+) create mode 100644 recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.css create mode 100644 recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.html create mode 100644 recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.spec.ts create mode 100644 recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.ts (limited to 'recipeBuddy/src/app/pre-cook-pop-up') diff --git a/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.css b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.css new file mode 100644 index 0000000..e69de29 diff --git a/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.html b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.html new file mode 100644 index 0000000..dc87efd --- /dev/null +++ b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.html @@ -0,0 +1,13 @@ +
+{{cookedRecipe.name}} +
+ Serving Size: {{cookedRecipe.servingSize}} +
+
Ingredients: +
  • + {{ing.name}}, {{ing.amount}} unit: {{ing.units}} + +
    • +
    + + diff --git a/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.spec.ts b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.spec.ts new file mode 100644 index 0000000..b355855 --- /dev/null +++ b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PreCookPopUpComponent } from './pre-cook-pop-up.component'; + +describe('PreCookPopUpComponent', () => { + let component: PreCookPopUpComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PreCookPopUpComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PreCookPopUpComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.ts b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.ts new file mode 100644 index 0000000..396784d --- /dev/null +++ b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import { RecipePassService } from '../RecipePass/recipe-pass.service'; +import { Recipe } from '../DataModels/recipe'; +import { BackendService } from '../REST_service/backend.service'; + +@Component({ + selector: 'app-pre-cook-pop-up', + templateUrl: './pre-cook-pop-up.component.html', + styleUrls: ['./pre-cook-pop-up.component.css'] +}) +export class PreCookPopUpComponent implements OnInit { + + cookedRecipe: Recipe; + + constructor(private recipePass: RecipePassService, private backend: BackendService) { } + + ngOnInit() { + this.backend.getRecipe(1).subscribe(res => + { + this.cookedRecipe = res + }); + //this.recipeToBeCooked = this.recipePass.getRecipe(); + } +} -- cgit v1.1 From 2ce49662e65fa0a3bdd2a2681d02586c30c4f431 Mon Sep 17 00:00:00 2001 From: schencej Date: Tue, 10 Dec 2019 22:23:25 -0500 Subject: added ingredient scaling and styling to pre cook page --- .../pre-cook-pop-up/pre-cook-pop-up.component.css | 37 ++++++++++++++++++++++ .../pre-cook-pop-up/pre-cook-pop-up.component.html | 17 ++++++---- .../pre-cook-pop-up/pre-cook-pop-up.component.ts | 32 ++++++++++++++++--- 3 files changed, 74 insertions(+), 12 deletions(-) (limited to 'recipeBuddy/src/app/pre-cook-pop-up') diff --git a/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.css b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.css index e69de29..809e58b 100644 --- a/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.css +++ b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.css @@ -0,0 +1,37 @@ +h1 {text-align: center} +h4 { text-align: center; + margin-bottom:0px; + } +.outer-box { + display:grid; + width: 400px; + margin: auto; + padding: 10px; + border: solid; + align-content: center; + align-self: center; +} + +.input-box { + text-align:center; + margin: auto; +} + +.ingredients-list { + margin: auto; + padding: 10px; + border: solid; + outline: 0px solid; +} + +.button { + display: block; + margin: 10px auto; +} + +li{text-align: center} +input{display: inline-block; + width: 20px} +button{width: 150px; + height: 50px; + } diff --git a/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.html b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.html index dc87efd..5fe4620 100644 --- a/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.html +++ b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.html @@ -1,13 +1,16 @@ -
    -{{cookedRecipe.name}} -
    - Serving Size: {{cookedRecipe.servingSize}} +
    +

    {{cookedRecipe.name}}

    + +
    + Serving
    -
    Ingredients: + +

    Ingredients:

    +
  • - {{ing.name}}, {{ing.amount}} unit: {{ing.units}} + {{ing.name}}, {{ing.amount}} {{ing.unit}}
    • - + diff --git a/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.ts b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.ts index 396784d..208993f 100644 --- a/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.ts +++ b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.ts @@ -1,24 +1,46 @@ import { Component, OnInit } from '@angular/core'; -import { RecipePassService } from '../RecipePass/recipe-pass.service'; +import { RecipePassService } from '../recipePass/recipe-pass.service'; import { Recipe } from '../DataModels/recipe'; +import { Ingredient } from '../DataModels/ingredient'; import { BackendService } from '../REST_service/backend.service'; +import { Router } from '@angular/router'; @Component({ selector: 'app-pre-cook-pop-up', templateUrl: './pre-cook-pop-up.component.html', styleUrls: ['./pre-cook-pop-up.component.css'] +// providers: [RecipePassService] }) export class PreCookPopUpComponent implements OnInit { cookedRecipe: Recipe; + newSize: number; + originalAmounts: number[] = []; + originalSize: number; - constructor(private recipePass: RecipePassService, private backend: BackendService) { } + constructor(private recipePass: RecipePassService, private backend: BackendService, private router: Router) { } ngOnInit() { - this.backend.getRecipe(1).subscribe(res => + this.backend.getRecipe(15).subscribe(res => { - this.cookedRecipe = res + console.log(res); + this.cookedRecipe = res; + this.originalSize = this.cookedRecipe.servingSize; + for(var _i = 0; _i < this.cookedRecipe.ingredients.length; _i++) { + this.originalAmounts[_i] = this.cookedRecipe.ingredients[_i].amount; + } }); - //this.recipeToBeCooked = this.recipePass.getRecipe(); + } + + updateRecipe(event: any) { + if(event.target.value) { + this.newSize = parseInt(event.target.value); + for(var _i = 0; _i < this.cookedRecipe.ingredients.length; _i++) { + this.cookedRecipe.ingredients[_i].amount = Math.round(this.originalAmounts[_i] * (this.newSize / this.originalSize)); + } + + this.cookedRecipe.servingSize = this.newSize; + this.recipePass.setRecipe(this.cookedRecipe); + } } } -- cgit v1.1