diff options
Diffstat (limited to 'recipeBuddy/src/app/cook-page')
7 files changed, 103 insertions, 79 deletions
diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.css b/recipeBuddy/src/app/cook-page/cook-page.component.css index 41b3d42..b2b97e5 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.css +++ b/recipeBuddy/src/app/cook-page/cook-page.component.css @@ -1,33 +1,35 @@ -.previous-step { - -} - -.current-step { - -} - -.next-step { -} - .previous { margin: auto; + width: 200px; + height: 200px; border: solid; + align: center; text-align: center; grid-column: 1; + background-color: grey; + + } .current { margin: auto; + width: 300px; + height:300px; border: solid; text-align: center; grid-column: 2; + background-color: grey; } .next { margin: auto; + width: 200px; + height: 200px; border: solid; + align: center; text-align: center; grid-column: 3; + background-color: grey; } @@ -37,3 +39,7 @@ grid-gap: 10px; grid-template-rows: 1fr; } + +.step-count { + text-align: center; +} diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.html b/recipeBuddy/src/app/cook-page/cook-page.component.html index 39bef2e..4744ed1 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.html +++ b/recipeBuddy/src/app/cook-page/cook-page.component.html @@ -1,22 +1,28 @@ <div class="container"> - <div class="previous"> - <h1>Step {{step -1}}</h1> + Serving {{servingSize}} + <div class="previous" *ngIf="!firstStep"> + <h1>Step {{stepNum -1}}</h1> <p>{{previousStep}}</p> </div> <div class="current"> - <h1>Step {{step}}</h1> + <h1>Step {{stepNum}}</h1> <p>{{currentStep}}</p> - <p>{{timeLeft}}</p> - <div> + <div *ngIf="hasTimer()"> + +<h4>{{timeHoursFirst}}{{timeHoursSecond}}:{{timeMinutesFirst}}{{timeMinutesSecond}}:{{timeSecondsFirst}}{{timeSecondsSecond}}</h4> <button (click)="startTimer()">Start Timer</button> </div> - <button (click)="previous()">Previous</button> - <button (click)="next()">next</button> + <button *ngIf="!firstStep" (click)="previous()">Previous</button> + <button *ngIf="!lastStep" (click)="next()">next</button> </div> - <div class="next"> - <h1>Step {{step +1}}</h1> + <div class="next" *ngIf="!lastStep"> + <h1>Step {{stepNum +1}}</h1> <p>{{nextStep}}</p> </div> </div> + +<div class="step-count"> + <h1>Step: {{stepNum}}/{{steps.length}}</h1> +</div> diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.ts b/recipeBuddy/src/app/cook-page/cook-page.component.ts index 51a4c67..a3a1dfe 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.ts +++ b/recipeBuddy/src/app/cook-page/cook-page.component.ts @@ -1,54 +1,102 @@ import {Component, OnInit} from '@angular/core'; +import {Recipe} from '../DataModels/recipe'; +import {Step} from '../DataModels/step'; +import {RecipePassService} from '../recipePass/recipe-pass.service' -/** - * @title Card with multiple sections - */ @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 { - step: number; - instructions: string[] = ["Cut the bread", "Toast the bread", "Warm the butter", "Apply butter to bread", "Enjoy"]; - timers: number[] = [5,60,30,0,0]; + steps: Step[]; + stepNum: number; + + 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.step = 1; - this.previousStep = ""; - this.currentStep = this.instructions[this.step-1]; - this.nextStep = this.instructions[this.step]; - this.timeLeft = this.timers[this.step-1]; + var recipe: Recipe = this.recipePass.getRecipe(); + this.steps = recipe.steps; + this.servingSize = recipe.servingSize; + this.stepNum = 1; + this.currentStep = this.steps[this.stepNum-1].instruction; + if(this.steps.length > 1) + this.nextStep = this.steps[this.stepNum].instruction; + else + this.lastStep = true; + + this.timeLeft = this.steps[this.stepNum-1].timer; + 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 { + this.firstStep = false; clearInterval(this.timerInterval); - this.step++; - this.previousStep = this.instructions[this.step-2]; - this.currentStep = this.instructions[this.step-1]; - this.nextStep = this.instructions[this.step]; - this.timeLeft = this.timers[this.step-1]; + this.stepNum++; + if(this.stepNum == this.steps.length) { + this.lastStep = true; + } else { + this.nextStep = this.steps[this.stepNum].instruction; + } + this.previousStep = this.steps[this.stepNum-2].instruction; + this.currentStep = this.steps[this.stepNum-1].instruction; + this.timeLeft = this.steps[this.stepNum-1].timer; } previous(): void { + this.lastStep = false; clearInterval(this.timerInterval); - this.step--; - this.previousStep = this.instructions[this.step-2]; - this.currentStep = this.instructions[this.step-1]; - this.nextStep = this.instructions[this.step]; - this.timeLeft = this.timers[this.step-1]; + this.stepNum--; + if(this.stepNum == 1) { + this.firstStep = true; + } else { + this.previousStep = this.steps[this.stepNum-2].instruction; + } + this.currentStep = this.steps[this.stepNum-1].instruction; + this.nextStep = this.steps[this.stepNum].instruction; + this.timeLeft = this.steps[this.stepNum-1].timer; + } + + hasTimer(): boolean { + 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); @@ -56,4 +104,3 @@ export class CookPageComponent implements OnInit { }, 1000) } } - diff --git a/recipeBuddy/src/app/cook-page/step-card/step-card.component.css b/recipeBuddy/src/app/cook-page/step-card/step-card.component.css deleted file mode 100644 index e69de29..0000000 --- a/recipeBuddy/src/app/cook-page/step-card/step-card.component.css +++ /dev/null diff --git a/recipeBuddy/src/app/cook-page/step-card/step-card.component.html b/recipeBuddy/src/app/cook-page/step-card/step-card.component.html deleted file mode 100644 index c3edca3..0000000 --- a/recipeBuddy/src/app/cook-page/step-card/step-card.component.html +++ /dev/null @@ -1 +0,0 @@ -<p>step-card works!</p> diff --git a/recipeBuddy/src/app/cook-page/step-card/step-card.component.spec.ts b/recipeBuddy/src/app/cook-page/step-card/step-card.component.spec.ts deleted file mode 100644 index 011bc44..0000000 --- a/recipeBuddy/src/app/cook-page/step-card/step-card.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { StepCardComponent } from './step-card.component'; - -describe('StepCardComponent', () => { - let component: StepCardComponent; - let fixture: ComponentFixture<StepCardComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ StepCardComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(StepCardComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/recipeBuddy/src/app/cook-page/step-card/step-card.component.ts b/recipeBuddy/src/app/cook-page/step-card/step-card.component.ts deleted file mode 100644 index 6d490b7..0000000 --- a/recipeBuddy/src/app/cook-page/step-card/step-card.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'step-card', - templateUrl: 'step-card.component.html', - styleUrls: ['step-card.component.css'] -}) -export class StepCardComponent{ -} |