diff options
Diffstat (limited to 'recipeBuddy/src')
10 files changed, 182 insertions, 46 deletions
diff --git a/recipeBuddy/src/app/DataModels/step.ts b/recipeBuddy/src/app/DataModels/step.ts index 06c15c9..ec33e15 100644 --- a/recipeBuddy/src/app/DataModels/step.ts +++ b/recipeBuddy/src/app/DataModels/step.ts @@ -7,7 +7,7 @@ export class Step { this.timer = timer; } - public getInstruction(): string { + public getInstructions(): string { return this.instruction; } diff --git a/recipeBuddy/src/app/app-routing.module.ts b/recipeBuddy/src/app/app-routing.module.ts index 9620f04..0084f01 100644 --- a/recipeBuddy/src/app/app-routing.module.ts +++ b/recipeBuddy/src/app/app-routing.module.ts @@ -2,13 +2,15 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { CookPageComponent } from './cook-page/cook-page.component'; +import { PreCookPopUpComponent } from './pre-cook-pop-up/pre-cook-pop-up.component'; import { AddRecipeComponent } from './add-recipe/add-recipe.component'; import { EditRecipeComponent } from './edit-recipe/edit-recipe.component'; const routes: Routes = [ { path: '', redirectTo: '/cook', pathMatch: 'full' }, - { path: 'cook', component: CookPageComponent }, + { path: 'preCook' , component: PreCookPopUpComponent }, { path: 'add', component: AddRecipeComponent }, + { path: 'cook', component: CookPageComponent }, { path: 'edit', component: EditRecipeComponent }, ]; diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts index 83747b4..5cf33f7 100644 --- a/recipeBuddy/src/app/app.module.ts +++ b/recipeBuddy/src/app/app.module.ts @@ -2,13 +2,16 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatCardModule } from '@angular/material'; +import { MatDialogModule } from '@angular/material'; import { AppComponent } from './app.component'; import { CookPageComponent} from './cook-page/cook-page.component'; +//import { RecipePassService } from './recipePass/recipe-pass.service'; import { AppRoutingModule } from './app-routing.module'; import { HttpClientModule } from '@angular/common/http'; +import { PreCookPopUpComponent } from './pre-cook-pop-up/pre-cook-pop-up.component'; import { AddRecipeComponent } from './add-recipe/add-recipe.component'; import { ReactiveFormsModule } from '@angular/forms'; @@ -25,8 +28,8 @@ import { EditRecipeComponent } from './edit-recipe/edit-recipe.component'; declarations: [ AppComponent, CookPageComponent, - AddRecipeComponent, - EditRecipeComponent + PreCookPopUpComponent, + EditRecipeComponent, ], imports: [ BrowserModule, @@ -39,9 +42,9 @@ import { EditRecipeComponent } from './edit-recipe/edit-recipe.component'; MatFormFieldModule, MatIconModule, MatButtonModule, - MatToolbarModule + MatToolbarModule, ], - providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], +// providers: [RecipePassService] }) export class AppModule { } 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..4744ed1 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..a3a1dfe 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(); - } + this.currentStep = this.steps[this.stepNum-1].instruction; + if(this.steps.length > 1) + this.nextStep = this.steps[this.stepNum].instruction; + else + this.lastStep = true; - 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.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 { @@ -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].instruction; } - 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].instruction; + this.currentStep = this.steps[this.stepNum-1].instruction; + 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].instruction; } - 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].instruction; + this.nextStep = this.steps[this.stepNum].instruction; + 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); 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 new file mode 100644 index 0000000..809e58b --- /dev/null +++ b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.css @@ -0,0 +1,37 @@ +h1 {text-align: center} +h4 { text-align: center; + margin-bottom:0px; + } +.outer-box { + display:grid; + width: 400px; + margin: auto; + padding: 10px; + border: solid; + align-content: center; + align-self: center; +} + +.input-box { + text-align:center; + margin: auto; +} + +.ingredients-list { + margin: auto; + padding: 10px; + border: solid; + outline: 0px solid; +} + +.button { + display: block; + margin: 10px auto; +} + +li{text-align: center} +input{display: inline-block; + width: 20px} +button{width: 150px; + height: 50px; + } 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 new file mode 100644 index 0000000..c1ef1ef --- /dev/null +++ b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.html @@ -0,0 +1,16 @@ +<div *ngIf="cookedRecipe" class="outer-box"> + <h1>{{cookedRecipe.name}}</h1> + + <div class="input-box"> + Serving<input (keyup)="updateRecipe($event)"> + </div> + + <h4>Ingredients:</h4> + <div class="ingredients-list"> + <li *ngFor="let ing of cookedRecipe.ingredients"> + {{ing.name}}, {{ing.amount}} {{ing.unit}} + + </div> +</div> + +<button class="button" routerLink="/cook"> Ready </button> diff --git a/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.spec.ts b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.spec.ts new file mode 100644 index 0000000..b355855 --- /dev/null +++ b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PreCookPopUpComponent } from './pre-cook-pop-up.component'; + +describe('PreCookPopUpComponent', () => { + let component: PreCookPopUpComponent; + let fixture: ComponentFixture<PreCookPopUpComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PreCookPopUpComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PreCookPopUpComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 0000000..208993f --- /dev/null +++ b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.ts @@ -0,0 +1,46 @@ +import { Component, OnInit } from '@angular/core'; +import { RecipePassService } from '../recipePass/recipe-pass.service'; +import { Recipe } from '../DataModels/recipe'; +import { Ingredient } from '../DataModels/ingredient'; +import { BackendService } from '../REST_service/backend.service'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-pre-cook-pop-up', + templateUrl: './pre-cook-pop-up.component.html', + styleUrls: ['./pre-cook-pop-up.component.css'] +// providers: [RecipePassService] +}) +export class PreCookPopUpComponent implements OnInit { + + cookedRecipe: Recipe; + newSize: number; + originalAmounts: number[] = []; + originalSize: number; + + constructor(private recipePass: RecipePassService, private backend: BackendService, private router: Router) { } + + ngOnInit() { + this.backend.getRecipe(15).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; + } + }); + } + + updateRecipe(event: any) { + if(event.target.value) { + this.newSize = parseInt(event.target.value); + for(var _i = 0; _i < this.cookedRecipe.ingredients.length; _i++) { + this.cookedRecipe.ingredients[_i].amount = Math.round(this.originalAmounts[_i] * (this.newSize / this.originalSize)); + } + + this.cookedRecipe.servingSize = this.newSize; + this.recipePass.setRecipe(this.cookedRecipe); + } + } +} |