summaryrefslogtreecommitdiff
path: root/recipeBuddy
diff options
context:
space:
mode:
Diffstat (limited to 'recipeBuddy')
-rw-r--r--recipeBuddy/src/app/app-routing.module.ts4
-rw-r--r--recipeBuddy/src/app/app.component.css10
-rw-r--r--recipeBuddy/src/app/app.component.html20
-rw-r--r--recipeBuddy/src/app/app.module.ts12
-rw-r--r--recipeBuddy/src/app/recipe-card/recipe-card.component.css73
-rw-r--r--recipeBuddy/src/app/recipe-card/recipe-card.component.html34
-rw-r--r--recipeBuddy/src/app/recipe-card/recipe-card.component.spec.ts25
-rw-r--r--recipeBuddy/src/app/recipe-card/recipe-card.component.ts60
-rw-r--r--recipeBuddy/src/styles.css1
9 files changed, 234 insertions, 5 deletions
diff --git a/recipeBuddy/src/app/app-routing.module.ts b/recipeBuddy/src/app/app-routing.module.ts
index bb7c96e..12a8f58 100644
--- a/recipeBuddy/src/app/app-routing.module.ts
+++ b/recipeBuddy/src/app/app-routing.module.ts
@@ -2,11 +2,13 @@ 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';
import { AddRecipeComponent } from './add-recipe/add-recipe.component';
const routes: Routes = [
- { path: '', redirectTo: '/cook', pathMatch: 'full' },
+ { path: '', redirectTo: '/main', pathMatch: 'full' },
{ path: 'cook', component: CookPageComponent },
+ { path: 'main', component: RecipeCardComponent },
{ path: 'add', component: AddRecipeComponent }
];
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 @@
-<h1>{{title}}</h1>
+<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 (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>
<router-outlet></router-outlet>
diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts
index 359254e..71f236f 100644
--- a/recipeBuddy/src/app/app.module.ts
+++ b/recipeBuddy/src/app/app.module.ts
@@ -4,12 +4,16 @@ import { FormsModule } from '@angular/forms';
import { MatCardModule } from '@angular/material';
import { AppComponent } from './app.component';
+import { RecipeCardComponent } from './recipe-card/recipe-card.component';
import { CookPageComponent} from './cook-page/cook-page.component';
-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';
import { AddRecipeComponent } from './add-recipe/add-recipe.component';
import { ReactiveFormsModule } from '@angular/forms';
@@ -23,8 +27,8 @@ import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [
AppComponent,
+ RecipeCardComponent,
CookPageComponent,
- StepCardComponent,
AddRecipeComponent
],
imports: [
@@ -32,6 +36,8 @@ import { MatButtonModule } from '@angular/material/button';
AppRoutingModule,
MatCardModule,
HttpClientModule,
+ ScrollingModule,
+ ScrollDispatchModule,
ReactiveFormsModule,
NoopAnimationsModule,
MatInputModule,
diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.css b/recipeBuddy/src/app/recipe-card/recipe-card.component.css
new file mode 100644
index 0000000..7b0fd3b
--- /dev/null
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.css
@@ -0,0 +1,73 @@
+.example-viewport {
+ height: 500px;
+ width: 100%;
+ display: flex;
+ margin-left: auto;
+ margin-right: auto;
+}
+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 {
+ float: left;
+ width: 100%;
+ margin: 10px;
+}
+#edit {
+ padding: 10px;
+}
+.edit:hover{
+ border:solid;
+}
+#cart {
+ padding: 10px;
+}
+#delete {
+ padding: 10px;
+}
+.example-card:hover {
+ border: solid;
+}
+#card-title {
+ 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
new file mode 100644
index 0000000..7a9f8d4
--- /dev/null
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.html
@@ -0,0 +1,34 @@
+<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>{{recipe.name}}</mat-card-title>
+ </div>
+ <div id="edit">
+ <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(getId(recipe))" type="image" src="https://image.flaticon.com/icons/svg/61/61391.svg" alt="delete" width="24" height="32">
+ </div>
+ </mat-card-header>
+ <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>
+ </div>
+</cdk-virtual-scroll-viewport>
+
+<!--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.spec.ts b/recipeBuddy/src/app/recipe-card/recipe-card.component.spec.ts
new file mode 100644
index 0000000..ea6f5b7
--- /dev/null
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecipeCardComponent } from './recipe-card.component';
+
+describe('RecipeCardComponent', () => {
+ let component: RecipeCardComponent;
+ let fixture: ComponentFixture<RecipeCardComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ RecipeCardComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(RecipeCardComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.ts b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts
new file mode 100644
index 0000000..a9a4618
--- /dev/null
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts
@@ -0,0 +1,60 @@
+import {Component,OnInit} from '@angular/core';
+import{BackendService} from '../REST_service/backend.service';
+import{Recipe} from '../DataModels/recipe';
+
+/**
+ * @title Card with multiple sections
+ */
+@Component({
+ selector: 'RecipeCardComponent',
+ templateUrl: 'recipe-card.component.html',
+ styleUrls: ['recipe-card.component.css']
+})
+export class RecipeCardComponent implements OnInit {
+
+ constructor(private restService: BackendService) {}
+
+
+ recipes: Recipe[] = []; //array of recipe objects
+
+ ngOnInit() {
+ this.restService.getRecipes().subscribe(
+ res => {
+ var i: number;
+ for(i = 0; i < res.length; i++) {
+ this.restService.getRecipe(res[i]).subscribe(
+ res2 => {
+ this.recipes = [...this.recipes, res2]
+ console.log(res2.photos)
+ }, err => {/*Deal with error*/}, () => {/*Code for complete observable*/}
+
+ );
+ }
+ },
+ err => {
+//Deal with error
+ },
+ () => {
+//Complete observable
+ }
+);
+ }
+
+ shoppingCart() {
+ /**Code here to open shopping cart */
+ }
+
+ cookPage(id){
+ /**Code here to go to cook page for recipe with id */
+ //this.recipes[id];
+ }
+
+ edit(id) {
+ /**Code here to edit recipe with id */
+ }
+
+ delete(id) {
+ /**Code here to delete recipe with id */
+ }
+}
+ \ No newline at end of file
diff --git a/recipeBuddy/src/styles.css b/recipeBuddy/src/styles.css
index 7e7239a..c7564ff 100644
--- a/recipeBuddy/src/styles.css
+++ b/recipeBuddy/src/styles.css
@@ -1,4 +1,5 @@
/* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }