+
+
+
-
+
+
+
+
+
+
+ {{ selectedFilename }}
@@ -19,7 +25,7 @@
}
-
+
-
+
diff --git a/src/app/recipe-add/recipe-add.component.ts b/src/app/recipe-add/recipe-add.component.ts
index 4e39fb8..75949af 100644
--- a/src/app/recipe-add/recipe-add.component.ts
+++ b/src/app/recipe-add/recipe-add.component.ts
@@ -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
= {
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);
+ }
+ }
}
diff --git a/src/app/recipes/recipes.component.html b/src/app/recipes/recipes.component.html
index 602f7e1..d9e2334 100644
--- a/src/app/recipes/recipes.component.html
+++ b/src/app/recipes/recipes.component.html
@@ -26,7 +26,7 @@
image |
-
+
|