Update main page to put recipes three wide, and to work

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() {