diff options
Diffstat (limited to 'recipeBuddy/src')
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); }); } |