From 72963b729cb9e0d8647de606ecbed3a96c76663d Mon Sep 17 00:00:00 2001 From: rem Date: Mon, 17 Jun 2024 17:22:03 +0200 Subject: [PATCH] add recipe form and recipe service --- src/app/app.component.html | 339 +----------------- src/app/app.component.ts | 7 +- src/app/model/ingredient.model.ts | 5 + src/app/model/ingredient.ts | 11 - src/app/model/recipe.model.ts | 9 + src/app/model/recipe.ts | 17 - .../recipe-form.component.css} | 0 .../recipe-form/recipe-form.component.html | 32 ++ .../recipe-form/recipe-form.component.spec.ts | 23 ++ src/app/recipe-form/recipe-form.component.ts | 84 +++++ src/app/services/recipe.service.ts | 39 +- 11 files changed, 186 insertions(+), 380 deletions(-) create mode 100644 src/app/model/ingredient.model.ts delete mode 100644 src/app/model/ingredient.ts create mode 100644 src/app/model/recipe.model.ts delete mode 100644 src/app/model/recipe.ts rename src/app/{app.component.css => recipe-form/recipe-form.component.css} (100%) create mode 100644 src/app/recipe-form/recipe-form.component.html create mode 100644 src/app/recipe-form/recipe-form.component.spec.ts create mode 100644 src/app/recipe-form/recipe-form.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..56b1f47 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1,5 @@ - - - - - - - - +

Ratatouille

- - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - +
+ +
\ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 52d4215..c4de968 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import { RecipeFormComponent } from './recipe-form/recipe-form.component'; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet], + imports: [ + RouterOutlet, + RecipeFormComponent + ], templateUrl: './app.component.html', - styleUrl: './app.component.css' }) export class AppComponent { title = 'bromista-nisqa-receta'; diff --git a/src/app/model/ingredient.model.ts b/src/app/model/ingredient.model.ts new file mode 100644 index 0000000..6421c10 --- /dev/null +++ b/src/app/model/ingredient.model.ts @@ -0,0 +1,5 @@ +export interface Ingredient{ + id: number; + name: string; + qty: number; +} diff --git a/src/app/model/ingredient.ts b/src/app/model/ingredient.ts deleted file mode 100644 index ec87696..0000000 --- a/src/app/model/ingredient.ts +++ /dev/null @@ -1,11 +0,0 @@ -export class Ingredient{ - id: number; - name: string; - qty: number; - - constructor(id: number,name: string, qty: number) { - this.name = name; - this.id = id; - this.qty = qty; - } -} diff --git a/src/app/model/recipe.model.ts b/src/app/model/recipe.model.ts new file mode 100644 index 0000000..a86d255 --- /dev/null +++ b/src/app/model/recipe.model.ts @@ -0,0 +1,9 @@ +import { Ingredient } from "./ingredient.model"; + +export interface Recipe { + id: number; + name: string; + description: string; + ingredients: Ingredient[]; + image: string; +} diff --git a/src/app/model/recipe.ts b/src/app/model/recipe.ts deleted file mode 100644 index 3665432..0000000 --- a/src/app/model/recipe.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Ingredient } from "./ingredient"; - -export class Recipe { - id: number; - name: string; - description: string; - ingredients: Ingredient[]; - image: string; - - constructor(id: number, nom: string, description: string, ingredients: Ingredient[], image: string) { - this.id = id; - this.name = nom; - this.description = description; - this.ingredients = ingredients; - this.image = image; - } -} diff --git a/src/app/app.component.css b/src/app/recipe-form/recipe-form.component.css similarity index 100% rename from src/app/app.component.css rename to src/app/recipe-form/recipe-form.component.css diff --git a/src/app/recipe-form/recipe-form.component.html b/src/app/recipe-form/recipe-form.component.html new file mode 100644 index 0000000..2badad1 --- /dev/null +++ b/src/app/recipe-form/recipe-form.component.html @@ -0,0 +1,32 @@ +

New Recipe

+
+ + +
+ + + +
+ + + +
+ +
+

Ingredients

+ +
+ + + + + +
+
+
+ + +
\ No newline at end of file diff --git a/src/app/recipe-form/recipe-form.component.spec.ts b/src/app/recipe-form/recipe-form.component.spec.ts new file mode 100644 index 0000000..acc4e95 --- /dev/null +++ b/src/app/recipe-form/recipe-form.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RecipeFormComponent } from './recipe-form.component'; + +describe('RecipeFormComponent', () => { + let component: RecipeFormComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [RecipeFormComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(RecipeFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/recipe-form/recipe-form.component.ts b/src/app/recipe-form/recipe-form.component.ts new file mode 100644 index 0000000..f12038b --- /dev/null +++ b/src/app/recipe-form/recipe-form.component.ts @@ -0,0 +1,84 @@ +import { Component } from '@angular/core'; +import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Recipe } from '../model/recipe.model'; +import { Ingredient } from '../model/ingredient.model'; +import { CommonModule } from '@angular/common'; +import { ReactiveFormsModule } from '@angular/forms'; +import { RecipeService } from '../services/recipe.service'; + +@Component({ + selector: 'app-recipe-form', + standalone: true, + imports: [ + CommonModule, + ReactiveFormsModule + ], + templateUrl: './recipe-form.component.html', + styleUrls: ['./recipe-form.component.css'] +}) + +export class RecipeFormComponent { + recipeForm: FormGroup; + base64Image: string | ArrayBuffer | null = null; + ingredientsOptions = ['Champignon', 'Tomata', 'Mozarella']; + defaultOption : string = this.ingredientsOptions[2]; + + constructor(private fb: FormBuilder, private recipeService: RecipeService) { + this.recipeForm = this.fb.group({ + name: ['', Validators.required], + description: ['', Validators.required], + image: ['', Validators.required], + ingredients: this.fb.array([]), + }); + } + + get ingredients(): FormArray { + return this.recipeForm.get('ingredients') as FormArray; + } + + addIngredient(): void { + this.ingredients.push(this.fb.group({ + name: ['', Validators.required], + qty: ['', Validators.required] + })); + } + + removeIngredient(index: number): void { + this.ingredients.removeAt(index); + } + + onFileChange(event: Event) { + const input = event.target as HTMLInputElement; + if (input.files && input.files[0]) { + const file = input.files[0]; + const reader = new FileReader(); + reader.onload = () => { + this.base64Image = reader.result; + }; + reader.readAsDataURL(file); + } + } + + onSubmit(): void { + if (this.recipeForm.valid) { + const newRecipe: Recipe = { + id: 0, + name: this.recipeForm.value.name, + description: this.recipeForm.value.description, + image: this.base64Image?.toString() || "no-data", + ingredients: this.recipeForm.value.ingredients.map((ingredient: Ingredient, idx: number) => ({ + id: idx, + name: ingredient.name, + qty: ingredient.qty, + })) + }; + console.log('Recipe added:', newRecipe); + this.recipeService.addRecipe(newRecipe); + } else { + console.log('Form is invalid'); + } + + this.recipeForm.reset(); + } +} + diff --git a/src/app/services/recipe.service.ts b/src/app/services/recipe.service.ts index 2456e2c..c93ec58 100644 --- a/src/app/services/recipe.service.ts +++ b/src/app/services/recipe.service.ts @@ -1,20 +1,29 @@ -import { Recipe } from "../model/recipe"; -import { RECIPES } from "../datas/recipe.stub"; -import { Injectable } from "@angular/core"; +import { Injectable } from '@angular/core'; +import { Recipe } from '../model/recipe.model'; -@Injectable() -export class BookService { - private recipes: Recipe[]; +@Injectable({ + providedIn: 'root' +}) +export class RecipeService { + private localStorageKey = 'recipes'; - constructor(){ - this.recipes = RECIPES; - } + constructor() { } - getAll(): Recipe[]{ - return this.recipes; - } + // Get recipes from local storage + getRecipes(): Recipe[] { + const recipesJson = localStorage.getItem(this.localStorageKey); + return recipesJson ? JSON.parse(recipesJson) : []; + } - addBook(recipe: Recipe): void { - this.recipes.push(recipe); - } + // Add a new recipe + addRecipe(recipe: Recipe): void { + const recipes = this.getRecipes(); + recipes.push(recipe); + localStorage.setItem(this.localStorageKey, JSON.stringify(recipes)); + } + + // Clear all recipes (for example, if needed) + clearRecipes(): void { + localStorage.removeItem(this.localStorageKey); + } }