diff options
12 files changed, 257 insertions, 32 deletions
diff --git a/recipeBuddy/src/app/app-routing.module.ts b/recipeBuddy/src/app/app-routing.module.ts index ae67546..c2d381d 100644 --- a/recipeBuddy/src/app/app-routing.module.ts +++ b/recipeBuddy/src/app/app-routing.module.ts @@ -6,14 +6,16 @@ import { PreCookPopUpComponent } from './pre-cook-pop-up/pre-cook-pop-up.compone import { AddRecipeComponent } from './add-recipe/add-recipe.component'; import { EditRecipeComponent } from './edit-recipe/edit-recipe.component'; import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component'; +import { RecipeCardComponent } from './recipe-card/recipe-card.component'; const routes: Routes = [ - { path: '', redirectTo: '/cook', pathMatch: 'full' }, + { path: '', redirectTo: '/main', pathMatch: 'full' }, + { path: 'main', component: RecipeCardComponent }, { path: 'preCook' , component: PreCookPopUpComponent }, { path: 'add', component: AddRecipeComponent }, { path: 'cook', component: CookPageComponent }, { path: 'edit', component: EditRecipeComponent }, - { path: 'cart', component: ShoppingCartComponent } + { path: 'cart', component: ShoppingCartComponent }, ]; @NgModule({ diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts index a805e9e..4356d48 100644 --- a/recipeBuddy/src/app/app.module.ts +++ b/recipeBuddy/src/app/app.module.ts @@ -3,11 +3,12 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatCardModule } from '@angular/material'; import { MatDialogModule } from '@angular/material'; +import { ScrollingModule } from '@angular/cdk/scrolling'; import { AppComponent } from './app.component'; import { CookPageComponent} from './cook-page/cook-page.component'; import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component'; -//import { RecipePassService } from './recipePass/recipe-pass.service'; +import { RecipeCardComponent } from './recipe-card/recipe-card.component'; import { AppRoutingModule } from './app-routing.module'; @@ -34,9 +35,11 @@ import { MatDividerModule } from '@angular/material/divider'; PreCookPopUpComponent, AddRecipeComponent, EditRecipeComponent, - ShoppingCartComponent + ShoppingCartComponent, + RecipeCardComponent ], imports: [ + ScrollingModule, BrowserModule, AppRoutingModule, MatCardModule, @@ -53,6 +56,5 @@ import { MatDividerModule } from '@angular/material/divider'; FormsModule ], 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 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..7ec8ef2 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,15 +21,16 @@ export class PreCookPopUpComponent implements OnInit { constructor(private recipePass: RecipePassService, private backend: BackendService, private router: Router) { } ngOnInit() { - this.backend.getRecipe(15).subscribe(res => - { - console.log(res); - this.cookedRecipe = res; + this.cookedRecipe = this.recipePass.getRecipe(); +// this.backend.getRecipe(20).subscribe(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); +// }); } updateRecipe(event: any) { diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.css b/recipeBuddy/src/app/recipe-card/recipe-card.component.css new file mode 100644 index 0000000..b29ad9a --- /dev/null +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.css @@ -0,0 +1,28 @@ +.example-viewport { + height: 1000px; + width: 100%; + display: flex; + margin-left: auto; + margin-right: auto; +} +button{ + float: left; + padding: 10px; +} +.example-card { + float: left; + width: 100%; + margin: 10px; +} +.example-card:hover { + border: solid; +} +#card-title { + font-weight: bold; + cursor: pointer; +} +#cardContainer { + width: 35%; + padding: 5%; + float: left; +} diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.html b/recipeBuddy/src/app/recipe-card/recipe-card.component.html new file mode 100644 index 0000000..eaba29a --- /dev/null +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.html @@ -0,0 +1,49 @@ +<cdk-virtual-scroll-viewport [itemSize]="1" class="example-viewport"> +<div *cdkVirtualFor="let recipe of recipes" class="example-test"> +<div id="cardContainer"> + <mat-card class="example-card"> + <mat-card-header> + <div id="card-title"> + <button mat-button routerLink="/preCook" routerLinkActive="active" + (click)="cookPage(recipe)"> + <mat-card-title>{{recipe.name}}</mat-card-title> + </button> + </div> + </mat-card-header> + <mat-card-actions matSuffix> + <div id="edit"> + <button mat-button (click)="edit(recipe)" routerLink="/" + routerLinkActive="active"> + <mat-icon>edit</mat-icon> + </button> + </div> + <div id="cart"> + <button mat-button routerLink="/cart" routerLinkActive="active"> + <mat-icon>shopping_cart</mat-icon> + </button> + </div> + <div id="delete"> + <button mat-button (click)="delete(recipe.id)"> + <mat-icon>delete</mat-icon> + </button> + </div> + </mat-card-actions> + + <div *ngIf="recipe.photos.length > 0; else elseBlock" id="imgContainer"> + <img mat-card-image style="margin-top: 20px; height: 300px" src={{recipe.photos[0]}} +alt="Photo of recipe"> + </div> + <ng-template #elseBlock> + <img mat-card-image style="margin-top: 20px" + src="https://seeklogo.net/wp-content/themes/seeklogo-2017/images/not-available.jpg" + alt="No image available" + height="300px"> + </ng-template> + <div id="ratingContainer"> + <p>Rating: {{recipe.rating}}</p> + </div> + </mat-card> + </div> + </div> +</cdk-virtual-scroll-viewport> + diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.spec.ts b/recipeBuddy/src/app/recipe-card/recipe-card.component.spec.ts new file mode 100644 index 0000000..ea6f5b7 --- /dev/null +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RecipeCardComponent } from './recipe-card.component'; + +describe('RecipeCardComponent', () => { + let component: RecipeCardComponent; + let fixture: ComponentFixture<RecipeCardComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RecipeCardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RecipeCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.ts b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts new file mode 100644 index 0000000..490f2ab --- /dev/null +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts @@ -0,0 +1,71 @@ +import {Component,OnInit} from '@angular/core'; +import{BackendService} from '../REST_service/backend.service'; +import{Recipe} from '../DataModels/recipe'; +import {RecipePassService} from '../recipePass/recipe-pass.service'; +//import { Observable } from "rxjs/Rx"; + + +/** + * @title Card with multiple sections + */ +@Component({ + selector: 'RecipeCardComponent', + templateUrl: 'recipe-card.component.html', + styleUrls: ['recipe-card.component.css'] +}) +export class RecipeCardComponent implements OnInit { + + constructor(private restService: BackendService, + private recipePass: RecipePassService) {} + + + recipes: Recipe[] = []; //array of recipe objects + recipe: Recipe = new Recipe(0,"","",[],[],0,0,0,0,[],[]); + + ngOnInit() { + this.restService.getRecipes().subscribe( + res => { + var i: number; + for(i = 0; i < res.length; i++) { + this.restService.getRecipe(res[i]).subscribe( + res2 => { + this.recipes = [...this.recipes, res2] + console.log(res2.photos) + }, err => {/*Deal with error*/}, () => {/*Code for complete observable*/} + + ); + } + }, + err => { +//Deal with error + }, + () => { +//Complete observable + } +); + } + + + cookPage(thisrecipe){ + /**Code here to go to cook page for recipe with id */ + this.recipePass.setRecipe(thisrecipe); + } + + edit(thisrecipe) { + /**Code here to edit recipe with id */ + this.recipePass.setRecipe(thisrecipe); + } + + delete(id) { + /**Code here to delete recipe with id */ + this.restService.getRecipe(id).subscribe(res => this.recipe = res) + var txt = confirm("Are you sure you want to delete " + this.recipe.name + "?"); + if(txt == true) + { + alert(this.recipe.name + " was deleted."); + this.restService.deleteRecipe(id).subscribe(); + } + window.location.reload(); +} + +} |