From d8e99623986708c7b64984f8bf638a9fbec4a3d2 Mon Sep 17 00:00:00 2001 From: Tucker Evans Date: Tue, 10 Dec 2019 12:27:46 -0500 Subject: Add edit-recipe form/page Mostly copied from add recipe page. Updates recipe successfully, but doesn't pull ingredients/steps into form, and doesn't use pass service to get recipe. --- recipeBuddy/src/app/app-routing.module.ts | 4 +- recipeBuddy/src/app/app.module.ts | 6 +- .../src/app/edit-recipe/edit-recipe.component.css | 43 +++++ .../src/app/edit-recipe/edit-recipe.component.html | 110 ++++++++++++ .../app/edit-recipe/edit-recipe.component.spec.ts | 25 +++ .../src/app/edit-recipe/edit-recipe.component.ts | 188 +++++++++++++++++++++ 6 files changed, 372 insertions(+), 4 deletions(-) create mode 100644 recipeBuddy/src/app/edit-recipe/edit-recipe.component.css create mode 100644 recipeBuddy/src/app/edit-recipe/edit-recipe.component.html create mode 100644 recipeBuddy/src/app/edit-recipe/edit-recipe.component.spec.ts create mode 100644 recipeBuddy/src/app/edit-recipe/edit-recipe.component.ts (limited to 'recipeBuddy') diff --git a/recipeBuddy/src/app/app-routing.module.ts b/recipeBuddy/src/app/app-routing.module.ts index bb7c96e..9620f04 100644 --- a/recipeBuddy/src/app/app-routing.module.ts +++ b/recipeBuddy/src/app/app-routing.module.ts @@ -3,11 +3,13 @@ import { RouterModule, Routes } from '@angular/router'; import { CookPageComponent } from './cook-page/cook-page.component'; import { AddRecipeComponent } from './add-recipe/add-recipe.component'; +import { EditRecipeComponent } from './edit-recipe/edit-recipe.component'; const routes: Routes = [ { path: '', redirectTo: '/cook', pathMatch: 'full' }, { path: 'cook', component: CookPageComponent }, - { path: 'add', component: AddRecipeComponent } + { path: 'add', component: AddRecipeComponent }, + { path: 'edit', component: EditRecipeComponent }, ]; @NgModule({ diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts index 359254e..4acbaa6 100644 --- a/recipeBuddy/src/app/app.module.ts +++ b/recipeBuddy/src/app/app.module.ts @@ -5,7 +5,6 @@ import { MatCardModule } from '@angular/material'; import { AppComponent } from './app.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'; @@ -19,13 +18,14 @@ import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material'; import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; +import { EditRecipeComponent } from './edit-recipe/edit-recipe.component'; @NgModule({ declarations: [ AppComponent, CookPageComponent, - StepCardComponent, - AddRecipeComponent + AddRecipeComponent, + EditRecipeComponent ], imports: [ BrowserModule, diff --git a/recipeBuddy/src/app/edit-recipe/edit-recipe.component.css b/recipeBuddy/src/app/edit-recipe/edit-recipe.component.css new file mode 100644 index 0000000..9d74c53 --- /dev/null +++ b/recipeBuddy/src/app/edit-recipe/edit-recipe.component.css @@ -0,0 +1,43 @@ +.form { + min-width: 150px; + max-width: 750px; + width: 95%; + margin-left: auto; + margin-right: auto; + padding-left: 5px; + padding-right: 5px; +} + +.full-width { + width: 100%; +} + +.half-width { + width: 50%; + padding: 1%; + margin-left:auto; + margin-right:auto; +} + +.quarter-width { + width: 25%; + padding: 1%; + margin-left:auto; + margin-right:auto; +} + +.third-width { + width: 33%; + padding: 1%; + margin-left:auto; + margin-right:auto; +} + +td { + padding-right: 8px; +} + +.center { + margin-left:auto; + margin-right:auto; +} diff --git a/recipeBuddy/src/app/edit-recipe/edit-recipe.component.html b/recipeBuddy/src/app/edit-recipe/edit-recipe.component.html new file mode 100644 index 0000000..a8f2e97 --- /dev/null +++ b/recipeBuddy/src/app/edit-recipe/edit-recipe.component.html @@ -0,0 +1,110 @@ +
+

Add Recipe

+ + + + Name is required + + + Name is required + + + + + + + + + Servings must be a number. + + + + + Minutes + + Must be in the form hh:mm + + + + Keywords/Tags + + + + Photos (URLS) + + + +
+

Ingredients

+
+
+

Ingredient {{ i + 1 }}

+
+ + + + + + + Amount must be a number. + + + + + + +
+
+
+
+ +
+
+ +
+

Steps

+
+
+

Step {{ i + 1 }}

+
+ + + + + + Minutes + + +
+
+
+
+ +
+
+ + +
diff --git a/recipeBuddy/src/app/edit-recipe/edit-recipe.component.spec.ts b/recipeBuddy/src/app/edit-recipe/edit-recipe.component.spec.ts new file mode 100644 index 0000000..e92d28b --- /dev/null +++ b/recipeBuddy/src/app/edit-recipe/edit-recipe.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditRecipeComponent } from './edit-recipe.component'; + +describe('EditRecipeComponent', () => { + let component: EditRecipeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EditRecipeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EditRecipeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/recipeBuddy/src/app/edit-recipe/edit-recipe.component.ts b/recipeBuddy/src/app/edit-recipe/edit-recipe.component.ts new file mode 100644 index 0000000..203f733 --- /dev/null +++ b/recipeBuddy/src/app/edit-recipe/edit-recipe.component.ts @@ -0,0 +1,188 @@ +import { Component, OnInit } from '@angular/core'; + +import { FormControl } from '@angular/forms'; + +import { FormBuilder } from '@angular/forms'; +import { FormArray } from '@angular/forms'; + +import { Validators } from '@angular/forms'; + +import { Router } from '@angular/router'; + +import { Recipe } from '../DataModels/recipe'; +import { Ingredient } from '../DataModels/ingredient' +import { Step } from '../DataModels/step'; +import { BackendService } from '../REST_service/backend.service'; + +@Component({ + selector: 'app-edit-recipe', + templateUrl: './edit-recipe.component.html', + styleUrls: ['./edit-recipe.component.css'] +}) +export class EditRecipeComponent implements OnInit { + + baseRecipe: Recipe = new Recipe (15, //id + '', //name + '', //description + [], //ingredients + [], //steps + 0, //servingSize + 0, //cookTime + 0, //timesCooked + 0, //rating + [], //tags + [] //photos + ); + + recipeForm = this.fb.group({ + recipeName: ['', Validators.required], + desc: [''], + ingredients: this.fb.array([ + this.fb.group({ + name: [''], + amount: ['', Validators.pattern('^[0-9]*(\.[0-9]*)?$')], + unit: [''] + }) + ]), + steps: this.fb.array([ + this.fb.group({ + instruction: [''], + timer: [''] + }) + ]), + servingSize: ['', Validators.pattern('^[0-9]*(\.[0-9]*)?$')], + cookTime: ['', Validators.pattern('^[0-9]*$')], + tags: [''], + photos: [''] + }); + + constructor(private fb: FormBuilder, + private restService: BackendService, + private router: Router, + /*private passService: PassService,*/ + ) + { + restService.getRecipe(this.baseRecipe.id).subscribe( + res=> this.updateRecipe(res), + err=> console.log('EditRecipeComponent:restService:getRecipes: id='+ this.baseRecipe.id + 'err=' + err), + () => console.log('EditRecipe:restService:getRecipes: completed') + ) + + this.rmIngredient(0); + this.rmStep(0); + } + + updateRecipe(r: Recipe) + { + var i: number; + + this.recipeForm.patchValue( + { + recipeName: r.name, + desc: r.description, + servingSize: r.servingSize, + cookTime: r.cookTime, + tags: r.tags.join(','), + photos: r.photos.join(','), + } + ) + + console.log(r.tags.join(',')); + + for(i = 0; i < r.ingredients.length; i++) { + this.addIngredient(); + this.ingredients.controls[0].setValue(r.ingredients[i]); + } + for(i = 0; i < r.steps.length; i++) { + this.addStep(); + console.log(r.steps[i]) + this.steps.controls[0].setValue(r.steps[i]); + } + } + + ngOnInit() { + } + + get ingredients() { + return this.recipeForm.get('ingredients') as FormArray; + } + + addIngredient() { + this.ingredients.push( + this.fb.group({ + name: [''], + amount: ['', Validators.pattern('^[0-9]*(\.[0-9]*)?$')], + unit: [''] + }) + ); + } + + rmIngredient(i) { + this.ingredients.removeAt(i); + } + + get steps() { + return this.recipeForm.get('steps') as FormArray; + } + + addStep() { + this.steps.push( + this.fb.group({ + instruction: [''], + timer: ['', Validators.pattern('^[0-9]*$')] + }) + ); + } + + rmStep(i) { + this.steps.removeAt(i); + } + + onSubmit() { + var formData = this.recipeForm.value; + + var ingredients = [] + var i; + for (i = 0; i < formData.ingredients.length; i++) { + var tmp_amount = parseFloat(formData.ingredients[0].amount) + ingredients.push(new Ingredient(formData.ingredients[0].name, + (isNaN(tmp_amount) ? 0 : tmp_amount), + formData.ingredients[0].unit, + "" + )); + } + + var steps = [] + for (i = 0; i < formData.steps.length; i++) { + var tmp_timer = parseInt(formData.steps[0].timer) + steps.push(new Step(formData.steps[0].instruction, + (isNaN(tmp_timer) ? 0 : tmp_timer) + )); + } + + console.log(steps); + + var servingsTmp = parseFloat(formData.servingSize) + var cookTimeTmp = parseInt(formData.cookTime) + + var recipe = new Recipe (this.baseRecipe.id, //id + formData.recipeName, //name + formData.desc, //description + ingredients, //ingredients + steps, //steps + (isNaN(servingsTmp) ? 0 :servingsTmp), //servingSize + (isNaN(cookTimeTmp) ? 0 :cookTimeTmp), //cookTime + 0, //timesCooked + 0, //rating + formData.tags.split(',').filter(word => !(word==="")), //tags + formData.photos.split(',').filter(word => !(word==="")) //photos + ); + console.log(recipe) + this.restService.updateRecipe(recipe).subscribe() + this.router.navigate(['/']); + } + + onCancel() { + this.router.navigate(['/']); + } +} -- cgit v1.1