diff options
Diffstat (limited to 'recipeBuddy')
3 files changed, 43 insertions, 69 deletions
diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.css b/recipeBuddy/src/app/recipe-card/recipe-card.component.css index 8cf412a..7b0fd3b 100644 --- a/recipeBuddy/src/app/recipe-card/recipe-card.component.css +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.css @@ -1,21 +1,10 @@ - .example-viewport{ - height: 250px; - width: 80%; - margin-left: 50px; - border: 1px solid saddlebrown; +.example-viewport { + height: 500px; + width: 100%; display: flex; - } - .list{ - height: 50px; - justify-content: center; - align-items: center; - } - h2{ - margin-left: 40px; - } - .container{ - margin-bottom: 40px; - } + margin-left: auto; + margin-right: auto; +} p { font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } @@ -46,33 +35,9 @@ button{ margin:0 auto;width:100px; } .example-card { - max-width: 400px; float: left; - width:25%; - padding: 0px 35px; -} -.example-header-image { - background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg'); - background-size: cover; -} -#like-rating { - height: auto; - width: auto; - max-width: 200px; - max-height: 1000px; - background-size: contain; -} -#like-rating img{ - width:100%; -} -#rating { - height: auto; - width: auto; - max-width: 200px; - max-height: 1000px; -} -#rating img { - width:100%; + width: 100%; + margin: 10px; } #edit { padding: 10px; @@ -86,9 +51,6 @@ button{ #delete { padding: 10px; } -#previous { - float:left; -} .example-card:hover { border: solid; } @@ -96,4 +58,16 @@ button{ 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 index 4584d6f..7a9f8d4 100644 --- a/recipeBuddy/src/app/recipe-card/recipe-card.component.html +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.html @@ -1,33 +1,34 @@ -<div *ngFor="let recipe of recipes"> -<p>{{recipe}}</p> -</div> -<ul class="list"> -<cdk-virtual-scroll-viewport [itemSize]="100" class="example-viewport" style="height:300px; minBufferPx:50;"> -<ng-container *cdkVirtualFor="let recipe of recipes" class="example-viewport"> -<h1>Hello</h1> -<!--<div id="cardContainer"> +<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 (click)="cookPage(i)">{{recipes[i].name}}</mat-card-title> + <mat-card-title>{{recipe.name}}</mat-card-title> </div> <div id="edit"> - <input (click)="edit(i)" type="image" src="https://image.freepik.com/free-icon/scissors_318-9061.jpg" + <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(i)" type="image" src="https://image.flaticon.com/icons/svg/61/61391.svg" alt="delete" width="24" height="32"> + <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> - <img mat-card-image src={{recipes[i].photos[0]}} alt="Photo of recipe" width="150" height="220"> - <p>Rating: {{recipes[i].rating}}</p> + <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> - --> - </ng-container> + </div> </cdk-virtual-scroll-viewport> -</ul> + <!--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.ts b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts index bd44316..a9a4618 100644 --- a/recipeBuddy/src/app/recipe-card/recipe-card.component.ts +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts @@ -1,5 +1,6 @@ import {Component,OnInit} from '@angular/core'; import{BackendService} from '../REST_service/backend.service'; +import{Recipe} from '../DataModels/recipe'; /** * @title Card with multiple sections @@ -13,8 +14,8 @@ export class RecipeCardComponent implements OnInit { constructor(private restService: BackendService) {} - recipes = []; //array of recipe objects - mynumbers = []; + + recipes: Recipe[] = []; //array of recipe objects ngOnInit() { this.restService.getRecipes().subscribe( @@ -23,8 +24,10 @@ export class RecipeCardComponent implements OnInit { for(i = 0; i < res.length; i++) { this.restService.getRecipe(res[i]).subscribe( res2 => { - this.recipes.push(res2) + this.recipes = [...this.recipes, res2] + console.log(res2.photos) }, err => {/*Deal with error*/}, () => {/*Code for complete observable*/} + ); } }, @@ -35,10 +38,6 @@ export class RecipeCardComponent implements OnInit { //Complete observable } ); - for(var i = 0; i <10; ++i) - { - mynumbers.push(i); - } } shoppingCart() { |