|
|
|
@ -3,17 +3,21 @@ import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angu
|
|
|
|
|
import { Router } from '@angular/router';
|
|
|
|
|
import { Ingredient, IngredientEntry, Recipe } from '../../cookbook/type';
|
|
|
|
|
import { RecipeService } from '../recipe.service';
|
|
|
|
|
import { MatInputModule } from '@angular/material/input';
|
|
|
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
|
|
|
import { MatButton } from '@angular/material/button';
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
|
selector: 'app-recipe-add',
|
|
|
|
|
standalone: true,
|
|
|
|
|
imports: [ReactiveFormsModule, FormsModule],
|
|
|
|
|
imports: [ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatButton, MatFormFieldModule],
|
|
|
|
|
templateUrl: './recipe-add.component.html',
|
|
|
|
|
})
|
|
|
|
|
export class RecipeAddComponent {
|
|
|
|
|
createForm = this.formBuilder.group({
|
|
|
|
|
name: ['', Validators.maxLength(256)],
|
|
|
|
|
description: ['', Validators.maxLength(512)],
|
|
|
|
|
image: '',
|
|
|
|
|
selectedIngredient: '',
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
@ -23,9 +27,11 @@ export class RecipeAddComponent {
|
|
|
|
|
name: 'Paprika',
|
|
|
|
|
}];
|
|
|
|
|
|
|
|
|
|
selectedFilename: string = '';
|
|
|
|
|
|
|
|
|
|
#recipeId: number = -1;
|
|
|
|
|
@Input()
|
|
|
|
|
set recipeId(recipeId: string) {
|
|
|
|
|
set id(recipeId: string) {
|
|
|
|
|
if (recipeId === undefined) return;
|
|
|
|
|
this.#recipeId = parseInt(recipeId);
|
|
|
|
|
const recipe = this.recipes.get(this.#recipeId);
|
|
|
|
@ -38,6 +44,9 @@ export class RecipeAddComponent {
|
|
|
|
|
description: recipe.description,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
get recipeId() {
|
|
|
|
|
return this.#recipeId;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
constructor(private formBuilder: FormBuilder, private recipes: RecipeService, private router: Router) {}
|
|
|
|
|
|
|
|
|
@ -49,7 +58,7 @@ export class RecipeAddComponent {
|
|
|
|
|
const partial: Omit<Recipe, 'id'> = {
|
|
|
|
|
name: value.name!,
|
|
|
|
|
description: value.description!,
|
|
|
|
|
image: '',
|
|
|
|
|
image: value.image ?? '',
|
|
|
|
|
ingredients: this.ingredientEntries,
|
|
|
|
|
};
|
|
|
|
|
if (this.#recipeId === -1) {
|
|
|
|
@ -75,4 +84,18 @@ export class RecipeAddComponent {
|
|
|
|
|
quantity: 1,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onFileSelected(event: Event): void {
|
|
|
|
|
const file = (event.target as HTMLInputElement).files![0];
|
|
|
|
|
if (file) {
|
|
|
|
|
this.selectedFilename = file.name;
|
|
|
|
|
const reader = new FileReader();
|
|
|
|
|
reader.onload = (event) => {
|
|
|
|
|
this.createForm.patchValue({
|
|
|
|
|
image: event.target!.result?.toString()
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
reader.readAsDataURL(file);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|