ajout form et list avec LocalStorage

angular.json

@@ -122,5 +122,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/accueil/accueil.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-accueil',
-  standalone: true,
-  imports: [],
-  templateUrl: './accueil.component.html',
-  styleUrl: './accueil.component.scss'
-})
-export class AccueilComponent {
-
-}

src/app/app.component.html

@@ -1,4 +1,4 @@
-<app-header></app-header>
+<app-menu></app-menu>
 <main>
   <router-outlet></router-outlet>
 </main>

src/app/app.component.ts

@@ -1,18 +1,21 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { HeaderComponent } from './header/header.component';
 import { RecipeComponent } from './recipe/recipe.component';
-import { RecipeFormComponent } from './recipe-form/recipe-form.component';
 import { RecipeListComponent } from './recipe-list/recipe-list.component';
+import { MenuComponent } from './menu/menu.component';
+import { RecipeAddComponent } from './recipe-add/recipe-add.component';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [
     RouterOutlet,
-    HeaderComponent,
+    MenuComponent,
     RecipeComponent,
-    RecipeFormComponent,
+    RecipeAddComponent,
     RecipeListComponent,
   ],
   templateUrl: './app.component.html',

src/app/app.routes.ts

@@ -1,20 +1,14 @@
 import { RouterModule, Routes } from '@angular/router';
-import { RecipeFormComponent } from './recipe-form/recipe-form.component';
 import { RecipeComponent } from './recipe/recipe.component';
 import { RecipeListComponent } from './recipe-list/recipe-list.component';
-import { AccueilComponent } from './accueil/accueil.component';
+import { HomeComponent } from './home/home.component';
-import { NgModule } from '@angular/core';
+import { RecipeAddComponent } from './recipe-add/recipe-add.component';
 
 export const routes: Routes = [
-  { path: 'form', component: RecipeFormComponent },
+  { path: 'add', component: RecipeAddComponent },
   { path: 'recipe/:id', component: RecipeComponent },
   { path: 'list', component: RecipeListComponent },
-  { path: '', component: AccueilComponent },
+  { path: '', component: HomeComponent },
   { path: '**', redirectTo: '' },
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule],
-})
 export class AppRoutingModule {}

src/app/home/home.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.scss'
+})
+export class HomeComponent {
+
+}

src/app/menu/menu.component.ts

@@ -6,13 +6,13 @@ import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 
 @Component({
-  selector: 'app-header',
+  selector: 'app-menu',
   standalone: true,
   imports: [MatButtonModule, MatMenuModule, CommonModule, RouterLink],
-  templateUrl: './header.component.html',
+  templateUrl: './menu.component.html',
-  styleUrl: './header.component.scss',
+  styleUrl: './menu.component.scss',
 })
-export class HeaderComponent implements OnInit {
+export class MenuComponent implements OnInit {
   menuItems: { label: string; link: string }[] | undefined;
 
   constructor(private menuService: MenuService) {}

src/app/recipe-add/recipe-add.component.html

@@ -0,0 +1,37 @@
+<form (ngSubmit)="onSubmit()" #recipeForm="ngForm">
+  <div>
+    <label for="name">Name:</label>
+    <input
+      type="text"
+      id="name"
+      [(ngModel)]="recipe.name"
+      name="name"
+      required
+    />
+  </div>
+  <div>
+    <label for="description">Description:</label>
+    <textarea
+      id="description"
+      [(ngModel)]="recipe.description"
+      name="description"
+      required
+    ></textarea>
+  </div>
+  <div>
+    <label for="image">Image:</label>
+    <input type="file" id="image" (change)="onFileChange($event)" />
+    <div *ngIf="imageError" style="color: red">{{ imageError }}</div>
+  </div>
+  <div *ngFor="let ingredient of ingredients">
+    <label>
+      {{ ingredient.name }}:
+      <input
+        type="number"
+        [(ngModel)]="ingredientQuantities[ingredient.id]"
+        name="quantity{{ ingredient.id }}"
+      />
+    </label>
+  </div>
+  <button type="submit" [disabled]="!recipeForm.form.valid">Add Recipe</button>
+</form>

src/app/recipe-add/recipe-add.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { IngredientService } from '../services/ingredient.service';
+import { Ingredient } from '../models/ingredient';
+import { Recipe } from '../models/recipe';
+
+@Component({
+  selector: 'app-recipe-add',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './recipe-add.component.html',
+  styleUrls: ['./recipe-add.component.scss'],
+})
+export class RecipeAddComponent implements OnInit {
+  recipe: Recipe = new Recipe(0, '', '', '', []);
+  ingredients: Ingredient[] = [];
+  ingredientQuantities: { [key: number]: number } = {};
+  imageError: string | null = null;
+
+  constructor(private ingredientService: IngredientService) {}
+
+  ngOnInit(): void {
+    this.ingredients = this.ingredientService.getIngredients();
+  }
+
+  onFileChange(event: any): void {
+    const file = event.target.files[0];
+    if (file) {
+      const validImageTypes = [
+        'image/jpeg',
+        'image/png',
+        'image/gif',
+        'image/jpg',
+      ];
+      if (!validImageTypes.includes(file.type)) {
+        this.imageError = 'Invalid file type. Please select an image file.';
+        return;
+      }
+
+      this.imageError = null;
+
+      const reader = new FileReader();
+      reader.onload = () => {
+        this.recipe.image = reader.result as string;
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+
+  onSubmit(): void {
+    this.recipe.ingredients = Object.keys(this.ingredientQuantities).map(
+      (id) => {
+        const ingredient = this.ingredientService.getIngredient(Number(id));
+        return new Ingredient(Number(id), ingredient.name);
+      }
+    );
+
+    const recipes = JSON.parse(localStorage.getItem('recipes') || '[]');
+    this.recipe.id = recipes.length ? recipes[recipes.length - 1].id + 1 : 1;
+    recipes.push(this.recipe);
+    localStorage.setItem('recipes', JSON.stringify(recipes));
+  }
+}

src/app/recipe-form/recipe-form.component.html

@@ -1 +0,0 @@
-<p>recipe-form works!</p>

src/app/recipe-form/recipe-form.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-recipe-form',
-  standalone: true,
-  imports: [],
-  templateUrl: './recipe-form.component.html',
-  styleUrl: './recipe-form.component.scss'
-})
-export class RecipeFormComponent {
-
-}

src/app/recipe-list/recipe-list.component.html

@@ -1 +1,11 @@
-<p>recipe-list works!</p>
+<button (click)="navToAddRecipe()">Add Recipe</button>
+<div *ngFor="let recipe of recipes">
+  <h3>{{ recipe.name }}</h3>
+  <p>{{ recipe.description }}</p>
+  <img *ngIf="recipe.image" [src]="recipe.image" alt="{{ recipe.name }}" />
+  <ul>
+    <li *ngFor="let ingredient of recipe.ingredients">
+      {{ ingredient.name }}: {{ getQuantity(recipe.id, ingredient.id) }}
+    </li>
+  </ul>
+</div>

src/app/recipe-list/recipe-list.component.ts

@@ -1,12 +1,40 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Recipe } from '../models/recipe';
+import { Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-recipe-list',
   standalone: true,
-  imports: [],
   templateUrl: './recipe-list.component.html',
-  styleUrl: './recipe-list.component.scss'
+  styleUrls: ['./recipe-list.component.scss'],
+  imports: [CommonModule],
 })
-export class RecipeListComponent {
+export class RecipeListComponent implements OnInit {
+  recipes: Recipe[] = [];
 
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.recipes = JSON.parse(localStorage.getItem('recipes') || '[]');
+  }
+
+  getQuantity(recipeId: number, ingredientId: number): number {
+    const recipe = this.recipes.find((r) => r.id === recipeId);
+    const ingredientRecipe = recipe?.ingredients.find(
+      (i) => i.id === ingredientId
+    );
+    return ingredientRecipe
+      ? this.getIngredientQuantity(recipeId, ingredientId)
+      : 0;
+  }
+
+  getIngredientQuantity(recipeId: number, ingredientId: number): number {
+    // Implémenter la logique pour retourner la quantité d'ingrédient
+    return 0;
+  }
+
+  navToAddRecipe(): void {
+    this.router.navigate(['/add']);
+  }
 }

src/app/services/menu.service.ts

@@ -10,9 +10,9 @@ interface MenuItem {
 })
 export class MenuService {
   private menuItems: MenuItem[] = [
-    { label: 'Accueil', link: '/accueil' },
+    { label: 'Home', link: '/home' },
-    { label: 'List', link: '/list' },
+    { label: 'List recipes', link: '/list' },
-    { label: 'Add', link: '/form' },
+    { label: 'Add new recipe', link: '/add' },
   ];
 
   getMenuItems(): MenuItem[] {

src/app/services/recipe.service.ts

@@ -1,9 +1,20 @@
 import { Injectable } from '@angular/core';
+import { Recipe } from '../models/recipe';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class RecipeService {
+  private localStorageKey = 'recipes';
 
-  constructor() { }
+  getRecipes(): Recipe[] {
+    const recipesJson = localStorage.getItem(this.localStorageKey);
+    return recipesJson ? JSON.parse(recipesJson) : [];
+  }
+
+  addRecipe(recipe: Recipe): void {
+    const recipes = this.getRecipes();
+    recipes.push(recipe);
+    localStorage.setItem(this.localStorageKey, JSON.stringify(recipes));
+  }
 }