diff options
| -rw-r--r-- | recipeBuddy/src/app/cook-page/cook-page.component.css | 14 | ||||
| -rw-r--r-- | recipeBuddy/src/app/cook-page/cook-page.component.html | 4 | ||||
| -rw-r--r-- | recipeBuddy/src/app/cook-page/cook-page.component.ts | 69 |
3 files changed, 47 insertions, 40 deletions
diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.css b/recipeBuddy/src/app/cook-page/cook-page.component.css index 4f44224..b2b97e5 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.css +++ b/recipeBuddy/src/app/cook-page/cook-page.component.css @@ -1,14 +1,3 @@ -.previous-step { - -} - -.current-step { - -} - -.next-step { -} - .previous { margin: auto; width: 200px; @@ -17,6 +6,7 @@ align: center; text-align: center; grid-column: 1; + background-color: grey; } @@ -28,6 +18,7 @@ border: solid; text-align: center; grid-column: 2; + background-color: grey; } .next { @@ -38,6 +29,7 @@ align: center; text-align: center; grid-column: 3; + background-color: grey; } diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.html b/recipeBuddy/src/app/cook-page/cook-page.component.html index db1c0a8..c0a00d1 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.html +++ b/recipeBuddy/src/app/cook-page/cook-page.component.html @@ -1,4 +1,5 @@ <div class="container"> + Serving {{servingSize}} <div class="previous" *ngIf="!firstStep"> <h1>Step {{stepNum -1}}</h1> <p>{{previousStep}}</p> @@ -8,7 +9,8 @@ <h1>Step {{stepNum}}</h1> <p>{{currentStep}}</p> <div *ngIf="hasTimer()"> - <p>{{timeLeft}}</p> + +<h4>{{timeHoursFirst}}{{timeHoursSecond}}:{{timeMinutesFirst}}{{timeMinutesSecond}}:{{timeSecondsFirst}}{{timeSecondsSecond}}</h4> <button (click)="startTimer()">Start Timer</button> </div> <button *ngIf="!firstStep" (click)="previous()">Previous</button> diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.ts b/recipeBuddy/src/app/cook-page/cook-page.component.ts index f114634..9dfc605 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.ts +++ b/recipeBuddy/src/app/cook-page/cook-page.component.ts @@ -6,7 +6,7 @@ import {RecipePassService} from '../recipePass/recipe-pass.service' @Component({ selector: 'app-cook-page', templateUrl: './cook-page.component.html', - styleUrls: ['./cook-page.component.css'], + styleUrls: ['./cook-page.component.css'] }) export class CookPageComponent implements OnInit { steps: Step[]; @@ -14,35 +14,42 @@ export class CookPageComponent implements OnInit { firstStep: boolean = true; lastStep: boolean = false; + servingSize: number; previousStep: string; currentStep: string; nextStep: string; timeLeft: number; + timeHoursFirst: number; + timeHoursSecond: number; + timeMinutesFirst: number; + timeMinutesSecond: number; + timeSecondsFirst: number; + timeSecondsSecond: number; + timerInterval; constructor(private recipePass: RecipePassService){} ngOnInit() { - this.getSteps(); + var recipe: Recipe = this.recipePass.getRecipe(); + this.steps = recipe.steps; + this.servingSize = recipe.servingSize; this.stepNum = 1; - this.currentStep = this.steps[this.stepNum-1].getInstruction(); - this.nextStep = this.steps[this.stepNum].getInstruction(); - this.timeLeft = this.steps[this.stepNum-1].getTimer(); - } - - getSteps(): void { -/** -* var recipe: Recipe; -* recipe = this.recipePass.getRecipe(); -* this.steps = recipe.getSteps(); -*/ - var tmpSteps: Step[] = []; - tmpSteps[0] = new Step("Cut the bread", 0); - tmpSteps[1] = new Step("Warm the butter", 5); - tmpSteps[2] = new Step("Enjoy", 0); - this.steps = tmpSteps; + this.currentStep = this.steps[this.stepNum-1].instructions; + if(this.steps.length > 1) + this.nextStep = this.steps[this.stepNum].instructions; + else + this.lastStep = true; +// this.timeLeft = this.steps[this.stepNum-1].timer; + this.timeLeft = 88888; + 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); } next(): void { @@ -52,11 +59,11 @@ export class CookPageComponent implements OnInit { if(this.stepNum == this.steps.length) { this.lastStep = true; } else { - this.nextStep = this.steps[this.stepNum].getInstruction(); + this.nextStep = this.steps[this.stepNum].instructions; } - this.previousStep = this.steps[this.stepNum-2].getInstruction(); - this.currentStep = this.steps[this.stepNum-1].getInstruction(); - this.timeLeft = this.steps[this.stepNum-1].getTimer(); + this.previousStep = this.steps[this.stepNum-2].instructions; + this.currentStep = this.steps[this.stepNum-1].instructions; + this.timeLeft = this.steps[this.stepNum-1].timer; } previous(): void { @@ -66,24 +73,30 @@ export class CookPageComponent implements OnInit { if(this.stepNum == 1) { this.firstStep = true; } else { - this.previousStep = this.steps[this.stepNum-2].getInstruction(); + this.previousStep = this.steps[this.stepNum-2].instructions; } - this.currentStep = this.steps[this.stepNum-1].getInstruction(); - this.nextStep = this.steps[this.stepNum].getInstruction(); - this.timeLeft = this.steps[this.stepNum-1].getTimer(); + this.currentStep = this.steps[this.stepNum-1].instructions; + this.nextStep = this.steps[this.stepNum].instructions; + this.timeLeft = this.steps[this.stepNum-1].timer; } hasTimer(): boolean { - if(this.steps[this.stepNum - 1].getTimer() > 0) + if(this.steps[this.stepNum-1].timer > 0) return true; else return false; } startTimer(): void { + 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); + 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); } else { clearInterval(this.timerInterval); |