diff options
16 files changed, 185 insertions, 72 deletions
diff --git a/recipeBuddy/src/app/DataModels/ingredient.ts b/recipeBuddy/src/app/DataModels/ingredient.ts index c79b475..720514c 100644 --- a/recipeBuddy/src/app/DataModels/ingredient.ts +++ b/recipeBuddy/src/app/DataModels/ingredient.ts @@ -1,8 +1,8 @@ export class Ingredient { - private name: string; - private amount: number; - private unit: string; - private type_: string; + public name: string; + public amount: number; + public unit: string; + public type_: string; public constructor(name: string, amount: number, unit: string, type_: string) { this.name = name; diff --git a/recipeBuddy/src/app/DataModels/recipe.ts b/recipeBuddy/src/app/DataModels/recipe.ts index 937153f..18c4716 100644 --- a/recipeBuddy/src/app/DataModels/recipe.ts +++ b/recipeBuddy/src/app/DataModels/recipe.ts @@ -2,17 +2,17 @@ import {Step} from "./step" import {Ingredient} from "./ingredient" export class Recipe { - private id: number; - private name: string; - private description: string; - private ingredients: Ingredient[]; - private steps: Step[]; - private servingSize: number; - private cookTime: number; - private timesCooked: number; - private rating: number; - private tags: string[]; - private photos: string[]; + public id: number; + public name: string; + public description: string; + public ingredients: Ingredient[]; + public steps: Step[]; + public servingSize: number; + public cookTime: number; + public timesCooked: number; + public rating: number; + public tags: string[]; + public photos: string[]; public constructor(id: number, name: string, diff --git a/recipeBuddy/src/app/DataModels/step.ts b/recipeBuddy/src/app/DataModels/step.ts index 67e14c1..06c15c9 100644 --- a/recipeBuddy/src/app/DataModels/step.ts +++ b/recipeBuddy/src/app/DataModels/step.ts @@ -1,6 +1,6 @@ export class Step { - private instruction: string; - private timer: number; + public instruction: string; + public timer: number; public constructor(instruction: string, timer: number) { this.instruction = instruction; diff --git a/recipeBuddy/src/app/app-routing.module.ts b/recipeBuddy/src/app/app-routing.module.ts index bb7c96e..049bf74 100644 --- a/recipeBuddy/src/app/app-routing.module.ts +++ b/recipeBuddy/src/app/app-routing.module.ts @@ -2,14 +2,14 @@ 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'; const routes: Routes = [ { path: '', redirectTo: '/cook', pathMatch: 'full' }, - { path: 'cook', component: CookPageComponent }, - { path: 'add', component: AddRecipeComponent } -]; - + {path: 'preCook' , component: PreCookPopUpComponent }, + { path: 'add', component: AddRecipeComponent }, + { path: 'cook', component: CookPageComponent } @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts index 359254e..a2db49c 100644 --- a/recipeBuddy/src/app/app.module.ts +++ b/recipeBuddy/src/app/app.module.ts @@ -2,14 +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 { StepCardComponent } from './cook-page/step-card/step-card.component'; 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 { RecipePassService } from './recipePass/recipe-pass.service' import { AddRecipeComponent } from './add-recipe/add-recipe.component'; import { ReactiveFormsModule } from '@angular/forms'; @@ -24,7 +26,7 @@ import { MatButtonModule } from '@angular/material/button'; declarations: [ AppComponent, CookPageComponent, - StepCardComponent, + PreCookPopUpComponent, AddRecipeComponent ], imports: [ @@ -39,7 +41,7 @@ import { MatButtonModule } from '@angular/material/button'; MatIconModule, MatButtonModule ], - providers: [], - bootstrap: [AppComponent] + providers: [RecipePassService], + bootstrap: [AppComponent], }) 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 41b3d42..4f44224 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.css +++ b/recipeBuddy/src/app/cook-page/cook-page.component.css @@ -11,13 +11,20 @@ .previous { margin: auto; + width: 200px; + height: 200px; border: solid; + align: center; text-align: center; grid-column: 1; + + } .current { margin: auto; + width: 300px; + height:300px; border: solid; text-align: center; grid-column: 2; @@ -25,7 +32,10 @@ .next { margin: auto; + width: 200px; + height: 200px; border: solid; + align: center; text-align: center; grid-column: 3; @@ -37,3 +47,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..db1c0a8 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.html +++ b/recipeBuddy/src/app/cook-page/cook-page.component.html @@ -1,22 +1,26 @@ <div class="container"> - <div class="previous"> - <h1>Step {{step -1}}</h1> + <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()"> + <p>{{timeLeft}}</p> <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..f114634 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.ts +++ b/recipeBuddy/src/app/cook-page/cook-page.component.ts @@ -1,17 +1,20 @@ 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'], }) 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; + previousStep: string; currentStep: string; nextStep: string; @@ -19,30 +22,62 @@ export class CookPageComponent implements OnInit { 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]; + this.getSteps(); + 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(); + } + + 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; } 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].getInstruction(); + } + this.previousStep = this.steps[this.stepNum-2].getInstruction(); + this.currentStep = this.steps[this.stepNum-1].getInstruction(); + this.timeLeft = this.steps[this.stepNum-1].getTimer(); } 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].getInstruction(); + } + this.currentStep = this.steps[this.stepNum-1].getInstruction(); + this.nextStep = this.steps[this.stepNum].getInstruction(); + this.timeLeft = this.steps[this.stepNum-1].getTimer(); + } + + hasTimer(): boolean { + if(this.steps[this.stepNum - 1].getTimer() > 0) + return true; + else + return false; } startTimer(): void { @@ -56,4 +91,3 @@ export class CookPageComponent implements OnInit { }, 1000) } } - 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.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{ -} diff --git a/recipeBuddy/src/app/cook-page/step-card/step-card.component.css b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.css index e69de29..e69de29 100644 --- a/recipeBuddy/src/app/cook-page/step-card/step-card.component.css +++ b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.css 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..dc87efd --- /dev/null +++ b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.html @@ -0,0 +1,13 @@ +<div> +{{cookedRecipe.name}} + <div> + Serving Size: {{cookedRecipe.servingSize}} + </div> + <div> Ingredients: + <li *ngFor="let ing of cookedRecipe.ingredients"> + {{ing.name}}, {{ing.amount}} unit: {{ing.units}} + + </div> +</div> + +<button routerLink="/cook"> Ready </button> diff --git a/recipeBuddy/src/app/cook-page/step-card/step-card.component.spec.ts b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.spec.ts index 011bc44..b355855 100644 --- a/recipeBuddy/src/app/cook-page/step-card/step-card.component.spec.ts +++ b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { StepCardComponent } from './step-card.component'; +import { PreCookPopUpComponent } from './pre-cook-pop-up.component'; -describe('StepCardComponent', () => { - let component: StepCardComponent; - let fixture: ComponentFixture<StepCardComponent>; +describe('PreCookPopUpComponent', () => { + let component: PreCookPopUpComponent; + let fixture: ComponentFixture<PreCookPopUpComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ StepCardComponent ] + declarations: [ PreCookPopUpComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(StepCardComponent); + fixture = TestBed.createComponent(PreCookPopUpComponent); component = fixture.componentInstance; fixture.detectChanges(); }); 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..396784d --- /dev/null +++ b/recipeBuddy/src/app/pre-cook-pop-up/pre-cook-pop-up.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import { RecipePassService } from '../RecipePass/recipe-pass.service'; +import { Recipe } from '../DataModels/recipe'; +import { BackendService } from '../REST_service/backend.service'; + +@Component({ + selector: 'app-pre-cook-pop-up', + templateUrl: './pre-cook-pop-up.component.html', + styleUrls: ['./pre-cook-pop-up.component.css'] +}) +export class PreCookPopUpComponent implements OnInit { + + cookedRecipe: Recipe; + + constructor(private recipePass: RecipePassService, private backend: BackendService) { } + + ngOnInit() { + this.backend.getRecipe(1).subscribe(res => + { + this.cookedRecipe = res + }); + //this.recipeToBeCooked = this.recipePass.getRecipe(); + } +} diff --git a/recipeBuddy/src/app/recipePass/recipe-pass.service.spec.ts b/recipeBuddy/src/app/recipePass/recipe-pass.service.spec.ts new file mode 100644 index 0000000..f3a8388 --- /dev/null +++ b/recipeBuddy/src/app/recipePass/recipe-pass.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { RecipePassService } from './recipe-pass.service'; + +describe('RecipePassService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: RecipePassService = TestBed.get(RecipePassService); + expect(service).toBeTruthy(); + }); +}); diff --git a/recipeBuddy/src/app/recipePass/recipe-pass.service.ts b/recipeBuddy/src/app/recipePass/recipe-pass.service.ts new file mode 100644 index 0000000..e925973 --- /dev/null +++ b/recipeBuddy/src/app/recipePass/recipe-pass.service.ts @@ -0,0 +1,20 @@ +import { Injectable } from '@angular/core'; +import { Recipe } from '../DataModels/recipe'; + +@Injectable({ + providedIn: 'root', +}) +export class RecipePassService { + + private sourceRecipe: Recipe; + + constructor() { } + + public setRecipe (recipeToPass: Recipe) { + this.sourceRecipe = recipeToPass; + } + + public getRecipe (): Recipe { + return this.sourceRecipe; + } +} |