Updated recipe card component with new code. Essentially makes recipe

card component the new main page. Left main page component in so that
the original code is there, as well as the general outline for the
other pages. Recipes still need to be loaded in from the backend, as
they are currently pre-loaded. Also needs to be connected so the add,
shopping cart, edit, and delete commands perform the correct tasks.

3 files changed, 305 insertions, 34 deletions

diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.css b/recipeBuddy/src/app/recipe-card/recipe-card.component.css
index 04b9bd1..d52f971 100644
--- a/recipeBuddy/src/app/recipe-card/recipe-card.component.css
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.css
@@ -1,5 +1,37 @@
+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 {
   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');
@@ -27,9 +59,23 @@
 #edit {
   padding: 10px;
 }
+.edit:hover{
+  border:solid;
+}
 #cart {
   padding: 10px;
 }
 #delete {
   padding: 10px;
 }
+#previous {
+  float:left;
+}
+.example-card:hover {
+  border: solid;
+}
+#card-title {
+  font-weight: bold;
+  cursor: pointer;
+  padding: 10px;
+}
\ 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 1c8b278..53573db 100644
--- a/recipeBuddy/src/app/recipe-card/recipe-card.component.html
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.html
@@ -1,33 +1,131 @@
-<mat-card class="example-card">
-  <mat-card-header>
-    <mat-card-title>Recipe</mat-card-title>
-    <div id="edit">
-    <input type="image" src="https://image.freepik.com/free-icon/scissors_318-9061.jpg"
-    alt="edit" width="24" height="32">
+<h1>
+  Recipe Buddy
+</h1>
+<div id="container">
+  <div id="left">
+    <div id="add">
+      <input (click)="addPage()" type="image" src="https://image.flaticon.com/icons/png/512/61/61183.png"
+      alt="add" width="60" height="60">
     </div>
+  </div>
+  <div id="right">Search: <input type = "text"> 
+  <input (click)="submitSearch()" type = "submit"></div>
+  <div id="center">
     <div id="cart">
-    <input type="image" src="https://image.flaticon.com/icons/png/512/126/126083.png" alt="cart" width="24" height ="32">
-    </div>
-    <div id="delete">
-    <input 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="https://www.azfinesthomes.com/assets/images/image-not-available.jpg" alt="Photo of recipe">
-  <mat-card-content>
-  </mat-card-content>
-  <mat-card-actions>
-    <!--
-    <div id="like-rating">
-    <img src="https://as1.ftcdn.net/jpg/02/36/32/68/500_F_236326831_AMTN6cLvvhi1ImGYYOGFAaJBcuvWwHyx.jpg" alt="Like rating">
-    </div>
-    <div id="rating">
-    <img src="https://www.judsonsmartliving.org/wp-content/uploads/5-stars.png" alt="5 star rating">
-    </div>
-    -->
-  </mat-card-actions>
-</mat-card>
+      <input (click)="shoppingCart()" type="image" src="https://image.flaticon.com/icons/png/512/126/126083.png" alt="cart" width="60" height ="60">
+    </div> 
+  </div>
+</div>
+<hr>
+<div id="previous">
+  <input (click)="previous()" type="image" src="https://www.pngfind.com/pngs/m/9-95287_double-left-chevron-svg-png-icon-free-download.png"
+  alt="previous" width="45" height="45">
+</div>
 
 
+<div id="cardContainer">
+  <mat-card class="example-card">
+    <mat-card-header>
+      <div id="card-title">
+        <mat-card-title (click)="cookPage1()">{{recipeName1}}</mat-card-title>
+      </div>
+      <div id="edit">
+        <input (click)="edit1()" 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)="shoppingCart1()" 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)="delete1()" 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={{recipeImage1}} alt="Photo of recipe" width="150" height="220">
+    <img src={{likeRatingImg1}} alt="like rating" width="50" height="50">
+    <mat-card-content>
+    </mat-card-content>
+    <mat-card-actions>
+      <!--
+      <div id="like-rating">
+      <img src="https://as1.ftcdn.net/jpg/02/36/32/68/500_F_236326831_AMTN6cLvvhi1ImGYYOGFAaJBcuvWwHyx.jpg" alt="Like rating">
+      </div>
+      <div id="rating">
+      <img src="https://www.judsonsmartliving.org/wp-content/uploads/5-stars.png" alt="5 star rating">
+      </div>
+      -->
+    </mat-card-actions>
+  </mat-card>
+  <mat-card  class="example-card">
+    <mat-card-header>
+      <div id="card-title">
+        <mat-card-title (click)="cookPage2()">{{recipeName2}}</mat-card-title>
+      </div>
+      <div id="edit">
+        <input (click)="edit2()" 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)="shopoingCart2()" 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)="delete2()" 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={{recipeImage2}} alt="Photo of recipe" width="150" height="220">
+    <img src={{likeRatingImg2}} alt="like rating" width="50" height="50">
+    <mat-card-content>
+    </mat-card-content>
+    <mat-card-actions>
+      <!--
+      <div id="like-rating">
+      <img src="https://as1.ftcdn.net/jpg/02/36/32/68/500_F_236326831_AMTN6cLvvhi1ImGYYOGFAaJBcuvWwHyx.jpg" alt="Like rating">
+      </div>
+      <div id="rating">
+      <img src="https://www.judsonsmartliving.org/wp-content/uploads/5-stars.png" alt="5 star rating">
+      </div>
+      -->
+    </mat-card-actions>
+  </mat-card>
+  <mat-card class="example-card">
+    <mat-card-header>
+      <div id="card-title">
+        <mat-card-title (click)="clickPage3()">{{recipeName3}}</mat-card-title>
+      </div>
+      <div id="edit">
+        <input (click)="edit3()" 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)="shoppingCart3()" 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)="delete3()" 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={{recipeImage3}} alt="Photo of recipe" width="150" height="220">
+    <img src={{likeRatingImg3}} alt="like rating" width="50" height="50">
+    <mat-card-content>
+    </mat-card-content>
+    <mat-card-actions>
+      <!--
+      <div id="like-rating">
+      <img src="https://as1.ftcdn.net/jpg/02/36/32/68/500_F_236326831_AMTN6cLvvhi1ImGYYOGFAaJBcuvWwHyx.jpg" alt="Like rating">
+      </div>
+      <div id="rating">
+      <img src="https://www.judsonsmartliving.org/wp-content/uploads/5-stars.png" alt="5 star rating">
+      </div>
+      -->
+    </mat-card-actions>
+  </mat-card>
+</div>
+<div id="next">
+  <input (click)="next()" type="image" src="data:image/png;base64,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"
+  alt="next" width="45" height="45">
+</div>
+
 <!-- Copyright 2019 Google LLC. All Rights Reserved.
     Use of this source code is governed by an MIT-style license that
-    can be found in the LICENSE file at http://angular.io/license -->
\ No newline at end of file
+    can be found in the LICENSE file at http://angular.io/license -->
+
+
+<!--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 c395a42..e5e3a03 100644
--- a/recipeBuddy/src/app/recipe-card/recipe-card.component.ts
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts
@@ -1,15 +1,142 @@
-import { Component, OnInit } from '@angular/core';
+import {Component,OnInit} from '@angular/core';
 
+/**
+ * @title Card with multiple sections
+ */
 @Component({
-  selector: 'app-recipe-card',
-  templateUrl: './recipe-card.component.html',
-  styleUrls: ['./recipe-card.component.css']
+  selector: 'card-fancy-example',
+  templateUrl: 'card-fancy-example.html',
+  styleUrls: ['card-fancy-example.css'],
 })
-export class RecipeCardComponent implements OnInit {
-
-  constructor() { }
+export class CardFancyExample implements OnInit {
+  recipeNumber: number;
+  totalRecipeNum: number;
+  recipeNames: string[] = ["Pizza", "Pancakes", "Pasta", "Chicken", "Eggs", "Sandwich", "Meatballs"];
+  recipeName1: string;
+  recipeName2: string;
+  recipeName3: string;
+  recipeImgs: string[] = ["https://images.unsplash.com/photo-1534308983496-4fabb1a015ee?ixlib=rb-1.2.1&w=1000&q=80",
+   "https://www.mamaknowsglutenfree.com/wp-content/uploads/2019/01/gluten-free-pancakes-rc.jpg",
+   "https://feedmephoebe.com/wp-content/uploads/2017/10/Homemade-Gluten-Free-Pasta-Recipe-Tuscan-Pici-Spaghetti-Noodles-19.jpg", "https://images.all-free-download.com/images/graphicthumb/chicken_picture_3_167117.jpg", "https://www.photos-public-domain.com/wp-content/uploads/2011/11/fried-eggs.jpg", "https://image.freepik.com/free-photo/sandwich_1339-1108.jpg", "https://www.glutenfreepalate.com/wp-content/uploads/2019/05/Gluten-Free-Meatballs-3.2-720x720.jpg"];
+   faceImgs: string[] = ["https://making-the-web.com/sites/default/files/clipart/174377/sad-face-pictures-free-174377-9562118.png","https://cdn.shopify.com/s/files/1/1061/1924/products/Neutral_Face_Emoji_large.png?v=1571606037","https://img.clipartlook.com/smiley-face-clipart-free-happy-face-clip-art-free-250_250.png" ]
+  likeRatings: number[] = [2,2,0,1,2,0,1]
+  likeRatingImg1: string;
+  likeRatingImg2: string;
+  likeRatingImg3: string;
+  recipeImage1: string;
+  recipeImage2: string;
+  recipeImage3: string;
 
   ngOnInit() {
+    this.recipeNumber = 0;
+    this.totalRecipeNum = this.recipeNames.length;
+    this.recipeName1 = this.recipeNames[this.recipeNumber];
+    this.recipeName2 = this.recipeNames[this.recipeNumber + 1];
+    this.recipeName3 = this.recipeNames[this.recipeNumber + 2];
+    this.recipeImage1 = this.recipeImgs[this.recipeNumber];
+    this.recipeImage2 = this.recipeImgs[this.recipeNumber + 1];
+    this.recipeImage3 = this.recipeImgs[this.recipeNumber + 2];
+    this.likeRatingImg1 = this.faceImgs[this.likeRatings[this.recipeNumber]];
+    this.likeRatingImg2 = this.faceImgs[this.likeRatings[this.recipeNumber + 1]];
+    this.likeRatingImg3 = this.faceImgs[this.likeRatings[this.recipeNumber + 2]];
+  }
+
+  addPage() {
+    /**Code here to open add page */
+  }
+  submitSearch() {
+    /**Code here to submit search */
+  }
+  shoppingCart() {
+    /**Code here to open shopping cart with no ingredients */
+  }
+
+  previous() {
+    if(this.recipeNumber > 2)
+    {
+      this.recipeNumber = this.recipeNumber - 3;
+      this.recipeName1 = this.recipeNames[this.recipeNumber];
+      this.recipeName2 = this.recipeNames[this.recipeNumber + 1];
+      this.recipeName3 = this.recipeNames[this.recipeNumber + 2];
+      this.recipeImage1 = this.recipeImgs[this.recipeNumber];
+      this.recipeImage2 = this.recipeImgs[this.recipeNumber + 1];
+      this.recipeImage3 = this.recipeImgs[this.recipeNumber + 2];
+      this.likeRatingImg1 = this.faceImgs[this.likeRatings[this.recipeNumber]];
+      this.likeRatingImg2 = this.faceImgs[this.likeRatings[this.recipeNumber + 1]];
+      this.likeRatingImg3 = this.faceImgs[this.likeRatings[this.recipeNumber + 2]];
+    } else
+    {
+      this.recipeNumber = 0;
+      this.recipeName1 = this.recipeNames[this.recipeNumber];
+      this.recipeName2 = this.recipeNames[this.recipeNumber + 1];
+      this.recipeName3 = this.recipeNames[this.recipeNumber + 2];
+      this.recipeImage1 = this.recipeImgs[this.recipeNumber];
+      this.recipeImage2 = this.recipeImgs[this.recipeNumber + 1];
+      this.recipeImage3 = this.recipeImgs[this.recipeNumber + 2];
+      this.likeRatingImg1 = this.faceImgs[this.likeRatings[this.recipeNumber]];
+      this.likeRatingImg2 = this.faceImgs[this.likeRatings[this.recipeNumber + 1]];
+      this.likeRatingImg3 = this.faceImgs[this.likeRatings[this.recipeNumber + 2]];
+    }
+  }
+  next() {
+    this.recipeNumber = this.recipeNumber + 3;
+    if(this.recipeNumber + 3 > this.totalRecipeNum)
+    {
+      this.recipeNumber = this.totalRecipeNum - 3;
+    }
+    this.recipeName1 = this.recipeNames[this.recipeNumber];
+    this.recipeName2 = this.recipeNames[this.recipeNumber + 1];
+    this.recipeName3 = this.recipeNames[this.recipeNumber + 2];
+    this.recipeImage1 = this.recipeImgs[this.recipeNumber];
+    this.recipeImage2 = this.recipeImgs[this.recipeNumber + 1];
+    this.recipeImage3 = this.recipeImgs[this.recipeNumber + 2];
+    this.likeRatingImg1 = this.faceImgs[this.likeRatings[this.recipeNumber]];
+    this.likeRatingImg2 = this.faceImgs[this.likeRatings[this.recipeNumber + 1]];
+    this.likeRatingImg3 = this.faceImgs[this.likeRatings[this.recipeNumber + 2]];
+  }
+
+  cookPage1(){
+    /**Code here to go to cook page for recipe in position 1 */
+  }
+  edit1() {
+    /**Code here to edit recipe in position 1 */
+  }
+  shoppingCart1() {
+    /**Code here to open shopping cart with ingredients from the recipe in position 1 */
+  }
+  delete1() {
+    /**Code here to delete recipe in position 1 */
+  }
+
+  cookPage2(){
+    /**Code here to go to cook page for recipe in position 2 */
+  }
+  edit2() {
+    /**Code here to edit recipe in position 2 */
+  }
+  shoppingCart2() {
+    /**Code here to open shopping cart with ingredients from the recipe in position 2 */
+  }
+  delete2() {
+    /**Code here to delete recipe in position 2 */
+  }
+
+  cookPage3(){
+    /**Code here to go to cook page for recipe in position 3 */
+  }
+  edit3() {
+    /**Code here to edit recipe in position 3 */
+  }
+  shoppingCart3() {
+    /**Code here to open shopping cart with ingredients from the recipe in position 3 */
+  }
+  delete3() {
+    /**Code here to delete recipe in position 3 */
   }
 
 }
+
+
+/**  Copyright 2019 Google LLC. All Rights Reserved.
+    Use of this source code is governed by an MIT-style license that
+    can be found in the LICENSE file at http://angular.io/license */
\ No newline at end of file