From 47254348140fce18c985e9a0ffb592390b226c80 Mon Sep 17 00:00:00 2001 From: schencej Date: Thu, 12 Dec 2019 11:56:57 -0500 Subject: added main page --- recipeBuddy/src/app/app-routing.module.ts | 6 +- recipeBuddy/src/app/app.module.ts | 6 +- .../pre-cook-pop-up/pre-cook-pop-up.component.ts | 9 +-- .../src/app/recipe-card/recipe-card.component.css | 28 +++++++++ .../src/app/recipe-card/recipe-card.component.html | 49 +++++++++++++++ .../app/recipe-card/recipe-card.component.spec.ts | 25 ++++++++ .../src/app/recipe-card/recipe-card.component.ts | 71 ++++++++++++++++++++++ 7 files changed, 187 insertions(+), 7 deletions(-) create mode 100644 recipeBuddy/src/app/recipe-card/recipe-card.component.css create mode 100644 recipeBuddy/src/app/recipe-card/recipe-card.component.html create mode 100644 recipeBuddy/src/app/recipe-card/recipe-card.component.spec.ts create mode 100644 recipeBuddy/src/app/recipe-card/recipe-card.component.ts 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 76fbc66..4356d48 100644 --- a/recipeBuddy/src/app/app.module.ts +++ b/recipeBuddy/src/app/app.module.ts @@ -3,10 +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 { RecipeCardComponent } from './recipe-card/recipe-card.component'; import { AppRoutingModule } from './app-routing.module'; @@ -33,9 +35,11 @@ import { MatDividerModule } from '@angular/material/divider'; PreCookPopUpComponent, AddRecipeComponent, EditRecipeComponent, - ShoppingCartComponent + ShoppingCartComponent, + RecipeCardComponent ], imports: [ + ScrollingModule, BrowserModule, AppRoutingModule, MatCardModule, 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 cee624e..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(20).subscribe(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 @@ + +
+
+ + +
+ +
+ + +
+ +
+
+ +
+
+ +
+ + +
+ +
+ + No image available + +
+

Rating: {{recipe.rating}}

+
+ +
+
+ + 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; + + 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(); +} + +} -- cgit v1.1