From 1b23ba09800009f484b9ab6a49a5626b0baaf504 Mon Sep 17 00:00:00 2001 From: Jacob Date: Mon, 9 Dec 2019 07:37:40 -0500 Subject: Initial commit for main page work in progress. Trying to figure out infinite scroll --- recipeBuddy/src/app/app-routing.module.ts | 6 +- recipeBuddy/src/app/app.component.css | 10 ++ recipeBuddy/src/app/app.component.html | 20 ++- recipeBuddy/src/app/app.module.ts | 10 +- .../src/app/recipe-card/recipe-card.component.css | 18 +++ .../src/app/recipe-card/recipe-card.component.html | 134 +++------------- .../src/app/recipe-card/recipe-card.component.ts | 171 ++++++--------------- recipeBuddy/src/styles.css | 1 + 8 files changed, 123 insertions(+), 247 deletions(-) diff --git a/recipeBuddy/src/app/app-routing.module.ts b/recipeBuddy/src/app/app-routing.module.ts index a6e4399..a6b69bd 100644 --- a/recipeBuddy/src/app/app-routing.module.ts +++ b/recipeBuddy/src/app/app-routing.module.ts @@ -2,10 +2,12 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { CookPageComponent } from './cook-page/cook-page.component'; +import { RecipeCardComponent } from './recipe-card/recipe-card.component'; const routes: Routes = [ - { path: '', redirectTo: '/cook', pathMatch: 'full' }, - { path: 'cook', component: CookPageComponent } + { path: '', redirectTo: '/main', pathMatch: 'full' }, + { path: 'cook', component: CookPageComponent }, + { path: 'main', component: RecipeCardComponent } ]; @NgModule({ diff --git a/recipeBuddy/src/app/app.component.css b/recipeBuddy/src/app/app.component.css index c62f266..fa69a91 100644 --- a/recipeBuddy/src/app/app.component.css +++ b/recipeBuddy/src/app/app.component.css @@ -2,6 +2,7 @@ h1 { font-size: 1.2em; margin-bottom: 0; + text-align: center; } h2 { font-size: 2em; @@ -26,3 +27,12 @@ nav a:hover { nav a.active { color: #039be5; } +#left{ + float:left;width:100px; + } +#right{ + float:right;width:175px; + } +#center{ + margin:0 auto;width:100px; + } \ No newline at end of file diff --git a/recipeBuddy/src/app/app.component.html b/recipeBuddy/src/app/app.component.html index 014c6b0..18b63ba 100644 --- a/recipeBuddy/src/app/app.component.html +++ b/recipeBuddy/src/app/app.component.html @@ -1,2 +1,20 @@ -

{{title}}

+

+ Recipe Buddy +

+
+
+
+ +
+
+ +
+
+ +
+
+
+
diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts index 55678a8..680b8fd 100644 --- a/recipeBuddy/src/app/app.module.ts +++ b/recipeBuddy/src/app/app.module.ts @@ -10,7 +10,11 @@ import { StepCardComponent } from './cook-page/step-card/step-card.component'; import { AppRoutingModule } from './app-routing.module'; -import {HttpClientModule } from '@angular/common/http' +import {HttpClientModule } from '@angular/common/http'; + +import {ScrollingModule} from '@angular/cdk/scrolling'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {ScrollDispatchModule} from '@angular/cdk/scrolling'; @NgModule({ declarations: [ @@ -23,7 +27,9 @@ import {HttpClientModule } from '@angular/common/http' BrowserModule, AppRoutingModule, MatCardModule, - HttpClientModule + HttpClientModule, + ScrollingModule, + ScrollDispatchModule ], providers: [], bootstrap: [AppComponent] diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.css b/recipeBuddy/src/app/recipe-card/recipe-card.component.css index d52f971..8cf412a 100644 --- a/recipeBuddy/src/app/recipe-card/recipe-card.component.css +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.css @@ -1,3 +1,21 @@ + .example-viewport{ + height: 250px; + width: 80%; + margin-left: 50px; + border: 1px solid saddlebrown; + display: flex; + } + .list{ + height: 50px; + justify-content: center; + align-items: center; + } + h2{ + margin-left: 40px; + } + .container{ + margin-bottom: 40px; + } p { font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.html b/recipeBuddy/src/app/recipe-card/recipe-card.component.html index 53573db..4584d6f 100644 --- a/recipeBuddy/src/app/recipe-card/recipe-card.component.html +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.html @@ -1,131 +1,33 @@ -

- Recipe Buddy -

-
-
-
- -
-
- -
-
- -
-
-
-
- + --> + + + \ 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 e5e3a03..bd44316 100644 --- a/recipeBuddy/src/app/recipe-card/recipe-card.component.ts +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts @@ -1,142 +1,61 @@ import {Component,OnInit} from '@angular/core'; +import{BackendService} from '../REST_service/backend.service'; /** * @title Card with multiple sections */ @Component({ - selector: 'card-fancy-example', - templateUrl: 'card-fancy-example.html', - styleUrls: ['card-fancy-example.css'], + selector: 'RecipeCardComponent', + templateUrl: 'recipe-card.component.html', + styleUrls: ['recipe-card.component.css'] }) -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; +export class RecipeCardComponent implements OnInit { + + constructor(private restService: BackendService) {} + + recipes = []; //array of recipe objects + mynumbers = []; 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.restService.getRecipes().subscribe( + res => { + var i: number; + for(i = 0; i < res.length; i++) { + this.restService.getRecipe(res[i]).subscribe( + res2 => { + this.recipes.push(res2) + }, err => {/*Deal with error*/}, () => {/*Code for complete observable*/} + ); } - 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 */ + }, + err => { +//Deal with error + }, + () => { +//Complete observable + } +); + for(var i = 0; i <10; ++i) + { + mynumbers.push(i); + } + } + + shoppingCart() { + /**Code here to open shopping cart */ } - shoppingCart2() { - /**Code here to open shopping cart with ingredients from the recipe in position 2 */ + + cookPage(id){ + /**Code here to go to cook page for recipe with id */ + //this.recipes[id]; } - delete2() { - /**Code here to delete recipe in position 2 */ + + edit(id) { + /**Code here to edit recipe with id */ } - cookPage3(){ - /**Code here to go to cook page for recipe in position 3 */ + delete(id) { + /**Code here to delete recipe with id */ } - 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 + \ No newline at end of file diff --git a/recipeBuddy/src/styles.css b/recipeBuddy/src/styles.css index 90d4ee0..3063ec3 100644 --- a/recipeBuddy/src/styles.css +++ b/recipeBuddy/src/styles.css @@ -1 +1,2 @@ /* You can add global styles to this file, and also import other style files */ +@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; -- cgit v1.1