diff options
Diffstat (limited to 'recipeBuddy/src/app/recipe-card')
4 files changed, 192 insertions, 0 deletions
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..7b0fd3b --- /dev/null +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.css @@ -0,0 +1,73 @@ +.example-viewport { + height: 500px; + width: 100%; + display: flex; + margin-left: auto; + margin-right: auto; +} +p { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} +h1 { + text-align: center; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} +h2 +{ +font-family:'Times New Roman', Times, serif; +} +button{ + background-color: #D87620; + color: white; + padding : 15px 25px; + cursor: pointer; +} +#container{ + width:100%; + } +#left{ + float:left;width:100px; + } +#right{ + float:right;width:175px; + } +#center{ + margin:0 auto;width:100px; + } +.example-card { + float: left; + width: 100%; + margin: 10px; +} +#edit { + padding: 10px; +} +.edit:hover{ + border:solid; +} +#cart { + padding: 10px; +} +#delete { + padding: 10px; +} +.example-card:hover { + border: solid; +} +#card-title { + font-weight: bold; + cursor: pointer; + padding: 10px; +} +#imgContainer { + padding:10px; + text-align:center; +} +#ratingContainer { + padding:10px; +} +#cardContainer { + width: 35%; + padding: 5%; + float: left; +}
\ No newline at end of file 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..7a9f8d4 --- /dev/null +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.html @@ -0,0 +1,34 @@ +<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"> + <mat-card-title>{{recipe.name}}</mat-card-title> + </div> + <div id="edit"> + <input (click)="edit(getId(recipe))" type="image" src="https://image.freepik.com/free-icon/scissors_318-9061.jpg" + alt="edit" width="24" height="32"> + </div> + <div id="cart"> + <input (click)="shoppingCart()" type="image" src="https://image.flaticon.com/icons/png/512/126/126083.png" alt="cart" width="24" height ="32"> + </div> + <div id="delete"> + <input (click)="delete(getId(recipe))" type="image" src="https://image.flaticon.com/icons/svg/61/61391.svg" alt="delete" width="24" height="32"> + </div> + </mat-card-header> + <div *ngIf="recipe.photos.length > 1000; else elseBlock" id="imgContainer"> + <img mat-card-image src={{recipe.photos[0]}} alt="Photo of recipe"> + </div> + <ng-template #elseBlock> + <img mat-card-image src="https://seeklogo.net/wp-content/themes/seeklogo-2017/images/not-available.jpg" alt="No image available" width="150" height="220"> + </ng-template> + <div id="ratingContainer"> + <p>Rating: {{recipe.rating}}</p> + </div> + </mat-card> + </div> + </div> +</cdk-virtual-scroll-viewport> + +<!--No image found web address: https://www.azfinesthomes.com/assets/images/image-not-available.jpg -->
\ No newline at end of file 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..a9a4618 --- /dev/null +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts @@ -0,0 +1,60 @@ +import {Component,OnInit} from '@angular/core'; +import{BackendService} from '../REST_service/backend.service'; +import{Recipe} from '../DataModels/recipe'; + +/** + * @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) {} + + + recipes: Recipe[] = []; //array of recipe objects + + 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 + } +); + } + + shoppingCart() { + /**Code here to open shopping cart */ + } + + cookPage(id){ + /**Code here to go to cook page for recipe with id */ + //this.recipes[id]; + } + + edit(id) { + /**Code here to edit recipe with id */ + } + + delete(id) { + /**Code here to delete recipe with id */ + } +} +
\ No newline at end of file |