summaryrefslogtreecommitdiff
path: root/recipeBuddy/src
diff options
context:
space:
mode:
authorschencej <schencej@clarkson.edu>2019-12-11 18:15:48 -0500
committerschencej <schencej@clarkson.edu>2019-12-11 18:15:48 -0500
commit23592cae5cdfe61f742151204a98334fa693569f (patch)
treee83d3574a1025e27e5e0b872077a2d5a14fd155b /recipeBuddy/src
parent77f57229c02521f00be16fe27e8e672f06809dbc (diff)
added styling to cook pages
Diffstat (limited to 'recipeBuddy/src')
-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
-rw-r--r--recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.css1
-rw-r--r--recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.html4
-rw-r--r--recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.ts4
6 files changed, 71 insertions, 24 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);
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 809e58b..7c98c34 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
@@ -6,6 +6,7 @@ h4 { text-align: center;
display:grid;
width: 400px;
margin: auto;
+ margin-top: 30px;
padding: 10px;
border: solid;
align-content: center;
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 c1ef1ef..0f046ad 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
@@ -2,7 +2,7 @@
<h1>{{cookedRecipe.name}}</h1>
<div class="input-box">
- Serving<input (keyup)="updateRecipe($event)">
+ Serving<input placeholder={{cookedRecipe.servingSize}} (keyup)="updateRecipe($event)">
</div>
<h4>Ingredients:</h4>
@@ -13,4 +13,4 @@
</div>
</div>
-<button class="button" routerLink="/cook"> Ready </button>
+<button mat-stroked-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 208993f..cee624e 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
@@ -21,14 +21,14 @@ export class PreCookPopUpComponent implements OnInit {
constructor(private recipePass: RecipePassService, private backend: BackendService, private router: Router) { }
ngOnInit() {
- this.backend.getRecipe(15).subscribe(res =>
+ this.backend.getRecipe(20).subscribe(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.recipePass.setRecipe(this.cookedRecipe);
});
}