added ingredient scaling and styling to pre cook page

3 files changed, 74 insertions, 12 deletions

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 @@
-<div>
-{{cookedRecipe.name}}
-	<div>
-		Serving Size: {{cookedRecipe.servingSize}} 
+<div *ngIf="cookedRecipe" class="outer-box"> 
+	<h1>{{cookedRecipe.name}}</h1> 
+
+	<div class="input-box">
+		Serving<input (keyup)="updateRecipe($event)">
 	</div>
-	<div> Ingredients:
+
+	<h4>Ingredients:</h4>
+	<div class="ingredients-list">
 		<li *ngFor="let ing of cookedRecipe.ingredients">
-			{{ing.name}}, {{ing.amount}} unit: {{ing.units}}
+			{{ing.name}}, {{ing.amount}} {{ing.unit}}
 	
 	</div>
 </div>
 
-<button routerLink="/cook"> Ready </button>
+<button class="button" routerLink="/cook"> Ready </button>
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);
+	}
   }
 }