From 7eb0712eff78c0fcde17e644e9a8863803b5472b Mon Sep 17 00:00:00 2001 From: Jacob Date: Thu, 5 Dec 2019 05:02:23 -0500 Subject: 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. --- .../src/app/recipe-card/recipe-card.component.css | 46 +++++++ .../src/app/recipe-card/recipe-card.component.html | 152 +++++++++++++++++---- .../src/app/recipe-card/recipe-card.component.ts | 141 ++++++++++++++++++- 3 files changed, 305 insertions(+), 34 deletions(-) (limited to 'recipeBuddy/src') 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 @@ - - - Recipe -
- +

+ Recipe Buddy +

+
+
+
+
+
+ +
- -
-
- -
- - Photo of recipe - - - - - - + +
+
+
+
+ +
+ + +
+ {{recipeName1}} +
+
+ +
+
+ +
+
+ +
+ + Photo of recipe + like rating + + + + + + + + +
+ {{recipeName2}} +
+
+ +
+
+ +
+
+ +
+ + Photo of recipe + like rating + + + + + + + + +
+ {{recipeName3}} +
+
+ +
+
+ +
+
+ +
+ + Photo of recipe + like rating + + + + + + +
+ + \ No newline at end of file + can be found in the LICENSE file at http://angular.io/license --> + + + \ 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 -- cgit v1.1