added styling to cook pages

3 files changed, 66 insertions, 20 deletions

diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.css b/recipeBuddy/src/app/cook-page/cook-page.component.css
index b2b97e5..a899372 100644
--- a/recipeBuddy/src/app/cook-page/cook-page.component.css
+++ b/recipeBuddy/src/app/cook-page/cook-page.component.css
@@ -1,45 +1,66 @@
+h4{text-align: center;}
+h1{text-align: center; font-size: 50px}
+
 .previous {
 	margin: auto;
+	margin-top: 40px;
 	width: 200px;
 	height: 200px;
 	border: solid;
 	align: center;
 	text-align: center;
 	grid-column: 1;
+	grid-row: 2;
 	background-color: grey;
-
 	
 }
 
+.title {
+	margin: auto;
+	text-align: center;
+	grid-row: 1;
+	grid-column: 2;
+}
+
 .current {
 	margin: auto;
+	margin-top: 30px;
 	width: 300px;
 	height:300px;
 	border: solid;
 	text-align: center;
 	grid-column: 2;
+	grid-row: 2;
 	background-color: grey;
 }
 
 .next {
 	margin: auto;
+	margin-top: 40px;
 	width: 200px;
 	height: 200px;
 	border: solid;
 	align: center;
 	text-align: center;
 	grid-column: 3;
+	grid-row: 2;
 	background-color: grey;
-
 }
 
 .container {
+	text-align: center;
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
 	grid-gap: 10px;
-	grid-template-rows: 1fr;
+	grid-template-rows: 1fr 2fr;
 }
 
 .step-count {
 	text-align: center;
 }
+
+.last-button {
+	grid-row: 2;
+	grid-column: 3;
+	margin-top: 100px;
+}
diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.html b/recipeBuddy/src/app/cook-page/cook-page.component.html
index 4744ed1..0574e5f 100644
--- a/recipeBuddy/src/app/cook-page/cook-page.component.html
+++ b/recipeBuddy/src/app/cook-page/cook-page.component.html
@@ -1,28 +1,37 @@
 <div class="container">
-	Serving {{servingSize}}
+	<div class="title">
+		<h1>{{recipe.name}}</h1>
+		<h4>Serving {{servingSize}}</h4>
+	</div>
+
 	<div class="previous" *ngIf="!firstStep">
-		<h1>Step {{stepNum -1}}</h1>
+		<h3>Step {{stepNum -1}}</h3>
 		<p>{{previousStep}}</p>
 	</div>
 	
 	<div class="current">
-		<h1>Step {{stepNum}}</h1>
+		<h2>Step {{stepNum}}</h2>
 		<p>{{currentStep}}</p>
-		<div *ngIf="hasTimer()">
 
-<h4>{{timeHoursFirst}}{{timeHoursSecond}}:{{timeMinutesFirst}}{{timeMinutesSecond}}:{{timeSecondsFirst}}{{timeSecondsSecond}}</h4>
-			<button (click)="startTimer()">Start Timer</button>
+		<div *ngIf="hasTimer()" style="border: solid; width: 110px; margin:auto">
+			<h4>{{timeHoursFirst}}{{timeHoursSecond}}:{{timeMinutesFirst}}{{timeMinutesSecond}}:{{timeSecondsFirst}}{{timeSecondsSecond}}</h4>
+			<button mat-raised-button style="margin-botton: 20px" (click)="startTimer()">Start Timer</button>
 		</div>
-		<button *ngIf="!firstStep" (click)="previous()">Previous</button>
-		<button *ngIf="!lastStep" (click)="next()">next</button>
+
+		<button mat-flat-button style="margin-right: 5px; margin-top: 20px;" color="primary" *ngIf="!firstStep" (click)="previous()">Previous</button>
+		<button mat-flat-button style="margin-left:5px; margin-top: 20px" color="primary" *ngIf="!lastStep" (click)="next()">next</button>
 	</div>
 	
 	<div class="next" *ngIf="!lastStep">
-		<h1>Step {{stepNum +1}}</h1>
+		<h3>Step {{stepNum +1}}</h3>
 		<p>{{nextStep}}</p>
 	</div>
+
+	<div *ngIf="lastStep" class="last-button">
+		<button mat-flat-button color="primary" routerLink='/'>Done</button>
+	</div>
 </div>
 
 <div class="step-count">
-	<h1>Step: {{stepNum}}/{{steps.length}}</h1>
+	<h2>Step: {{stepNum}}/{{steps.length}}</h2>
 </div>
diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.ts b/recipeBuddy/src/app/cook-page/cook-page.component.ts
index a3a1dfe..fea2611 100644
--- a/recipeBuddy/src/app/cook-page/cook-page.component.ts
+++ b/recipeBuddy/src/app/cook-page/cook-page.component.ts
@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {Recipe} from '../DataModels/recipe';
 import {Step} from '../DataModels/step';
-import {RecipePassService} from '../recipePass/recipe-pass.service'
+import {RecipePassService} from '../recipePass/recipe-pass.service';
 
 @Component({
   selector: 'app-cook-page',
@@ -9,8 +9,10 @@ import {RecipePassService} from '../recipePass/recipe-pass.service'
   styleUrls: ['./cook-page.component.css']
 })
 export class CookPageComponent implements OnInit {
+	recipe:Recipe;
 	steps: Step[];
 	stepNum: number;
+	name: string;
 
 	firstStep: boolean = true;
 	lastStep: boolean = false;
@@ -33,9 +35,10 @@ export class CookPageComponent implements OnInit {
 	constructor(private recipePass: RecipePassService){}
 
 	ngOnInit() {
-		var recipe: Recipe = this.recipePass.getRecipe();
-		this.steps = recipe.steps;
-		this.servingSize = recipe.servingSize;
+		this.recipe = this.recipePass.getRecipe();
+		this.name = this.recipe.name;
+		this.steps = this.recipe.steps;
+		this.servingSize = this.recipe.servingSize;
 		this.stepNum = 1;
 		this.currentStep = this.steps[this.stepNum-1].instruction;
 		if(this.steps.length > 1)
@@ -43,7 +46,7 @@ export class CookPageComponent implements OnInit {
 		else
 			this.lastStep = true;
 
-		this.timeLeft = this.steps[this.stepNum-1].timer;
+		this.timeLeft = this.steps[this.stepNum-1].timer*60;
 		this.timeHoursFirst = Math.floor(this.timeLeft/3600/10);
 		this.timeHoursSecond = Math.floor(this.timeLeft/3600%10);
 		this.timeMinutesFirst = Math.floor(this.timeLeft%3600/60/10);
@@ -63,7 +66,13 @@ export class CookPageComponent implements OnInit {
 		}
 		this.previousStep = this.steps[this.stepNum-2].instruction;
 		this.currentStep = this.steps[this.stepNum-1].instruction;
-		this.timeLeft = this.steps[this.stepNum-1].timer;
+		this.timeLeft = this.steps[this.stepNum-1].timer*60;
+		this.timeHoursFirst = Math.floor(this.timeLeft/3600/10);
+		this.timeHoursSecond = Math.floor(this.timeLeft/3600%10);
+		this.timeMinutesFirst = Math.floor(this.timeLeft%3600/60/10);
+		this.timeMinutesSecond = Math.floor(this.timeLeft%3600/60%10);
+		this.timeSecondsFirst = Math.floor(this.timeLeft%3600%60/10);
+		this.timeSecondsSecond = Math.floor(this.timeLeft%3600%60%10);
 	}
 
 	previous(): void {
@@ -77,7 +86,13 @@ export class CookPageComponent implements OnInit {
 		}
 		this.currentStep = this.steps[this.stepNum-1].instruction;
 		this.nextStep = this.steps[this.stepNum].instruction;
-		this.timeLeft = this.steps[this.stepNum-1].timer;
+		this.timeLeft = this.steps[this.stepNum-1].timer*60;
+		this.timeHoursFirst = Math.floor(this.timeLeft/3600/10);
+		this.timeHoursSecond = Math.floor(this.timeLeft/3600%10);
+		this.timeMinutesFirst = Math.floor(this.timeLeft%3600/60/10);	
+		this.timeMinutesSecond = Math.floor(this.timeLeft%3600/60%10);
+		this.timeSecondsFirst = Math.floor(this.timeLeft%3600%60/10);
+		this.timeSecondsSecond = Math.floor(this.timeLeft%3600%60%10);
 	}
 	
 	hasTimer(): boolean {
@@ -91,6 +106,7 @@ export class CookPageComponent implements OnInit {
 		console.log("timerStarted");
 		this.timerInterval = setInterval(() => {
 			if(this.timeLeft > 0) {
+				this.timeLeft--;
 				this.timeHoursFirst = Math.floor(this.timeLeft/3600/10);
 				this.timeHoursSecond = Math.floor(this.timeLeft/3600%10);
 				this.timeMinutesFirst = Math.floor(this.timeLeft%3600/60/10);