From 05c8157b6d300cc160ab3369098e365c6a37cc8b Mon Sep 17 00:00:00 2001
From: bastien ollier <bastien.ollier@etu.uca.fr>
Date: Mon, 24 Jun 2024 11:38:19 +0200
Subject: [PATCH] add nav

---
 src/app/app.component.html           |  4 ++++
 src/app/app.component.ts             |  4 +++-
 src/app/recipe/recipe.component.html | 28 ++++++++++++++--------------
 src/app/recipe/recipe.component.ts   |  5 ++++-
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5734199..46f646e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,7 @@
 Tiramisu
 
+<button mat-button [routerLink]="['/recipes']">Les recettes</button>
+<button mat-button [routerLink]="['/recipe/add']">Ajout recette</button>
+
+
 <router-outlet></router-outlet>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d81593f..bda1aaa 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,11 +1,13 @@
 import { Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { RecipeService } from './recipe.service';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, RouterLink, RouterLinkActive],
+  imports: [RouterOutlet, RouterLink, RouterLinkActive, MatMenuModule, MatButtonModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
   providers: [RecipeService],
diff --git a/src/app/recipe/recipe.component.html b/src/app/recipe/recipe.component.html
index a0dc0d8..e00b1ee 100644
--- a/src/app/recipe/recipe.component.html
+++ b/src/app/recipe/recipe.component.html
@@ -15,24 +15,24 @@
 }
 </style>
 
+<button mat-button [routerLink]="['/recipe/',recipe.id,'edit']">Update</button>
+
 <div class="container">
-    <img [src]="recipe.image || 'https://placehold.co/200x200'" [alt]="recipe.image ? recipe.name : ''" width="200" height="200">
 
+    <img [src]="recipe.image || 'https://placehold.co/200x200'" [alt]="recipe.image ? recipe.name : ''" width="200" height="200">
 
     <div class="container_text">
-
-     <h1>{{recipe.name}}</h1>
-     <p>
-        {{recipe.description}}
-     </p>
-
-     <h3>Ingredients</h3>
-     <p>
-        <li *ngFor="let ingredient of recipe.ingredients">
-            {{ this.recipes.getIngredientById(ingredient.idIngredient)?.name }}: {{ ingredient.quantity }}g
-        </li>
-     </p>
-
+        <h1>{{recipe.name}}</h1>
+        <p>
+            {{recipe.description}}
+        </p>
+
+        <h3>Ingredients</h3>
+        <p>
+            <li *ngFor="let ingredient of recipe.ingredients">
+                {{ this.recipes.getIngredientById(ingredient.idIngredient)?.name }}: {{ ingredient.quantity }}g
+            </li>
+        </p>
     </div>
 </div>
 
diff --git a/src/app/recipe/recipe.component.ts b/src/app/recipe/recipe.component.ts
index d93933c..4a54e03 100644
--- a/src/app/recipe/recipe.component.ts
+++ b/src/app/recipe/recipe.component.ts
@@ -2,11 +2,14 @@ import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Recipe } from '../../cookbook/type';
 import { RecipeService } from '../recipe.service';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-recipe',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, MatIconModule, MatButtonModule, RouterLink],
   templateUrl: './recipe.component.html',
 })
 export class RecipeComponent {
-- 
2.36.3