summaryrefslogtreecommitdiff
path: root/recipeBuddy/src/app/cook-page
diff options
context:
space:
mode:
Diffstat (limited to 'recipeBuddy/src/app/cook-page')
-rw-r--r--recipeBuddy/src/app/cook-page/cook-page.component.css27
-rw-r--r--recipeBuddy/src/app/cook-page/cook-page.component.html29
-rw-r--r--recipeBuddy/src/app/cook-page/cook-page.component.ts30
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);
generated by cgit v1.1 at 2024-05-19 11:57:08 +0000