summaryrefslogtreecommitdiff
path: root/recipeBuddy
diff options
context:
space:
mode:
Diffstat (limited to 'recipeBuddy')
-rw-r--r--recipeBuddy/src/app/recipe-card/recipe-card.component.css66
-rw-r--r--recipeBuddy/src/app/recipe-card/recipe-card.component.html33
-rw-r--r--recipeBuddy/src/app/recipe-card/recipe-card.component.ts13
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() {