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(['/']); } }