Adding recipe-details front

.idea/workspace.xml

@@ -4,24 +4,13 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="c5a06892-a370-4c6a-a9cf-5d61f93a285b" name="Changes" comment="Adding Form front with the new form">
+    <list default="true" id="c5a06892-a370-4c6a-a9cf-5d61f93a285b" name="Changes" comment="Adding recipe-details front">
-      <change afterPath="$PROJECT_DIR$/daidokoro/src/app/component/command/command.component.html" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/daidokoro/src/app/model/quantified-ingredient-getter.model.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/daidokoro/src/app/component/command/command.component.spec.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/daidokoro/src/app/component/command/command.component.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/app.component.css" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-detail/recipe-detail.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-detail/recipe-detail.component.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/app.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/app.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-detail/recipe-detail.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-detail/recipe-detail.component.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/app.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/app.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/model/quantified-ingredient.model.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/model/quantified-ingredient.model.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/app.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/app.config.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/model/recipe.model.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/model/recipe.model.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/app.routes.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/app.routes.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/ingredients/ingredients.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/ingredients/ingredients.component.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/ingredients/ingredients.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/ingredients/ingredients.component.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/data/link.stub.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/data/link.stub.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/model/ingredient.model.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/model/ingredient.model.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/service/ingredient.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/service/ingredient.service.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -98,7 +87,7 @@
       <workItem from="1718625479373" duration="4985000" />
       <workItem from="1719217543390" duration="31000" />
       <workItem from="1719217580949" duration="135000" />
-      <workItem from="1719755658119" duration="2002000" />
+      <workItem from="1719755658119" duration="5058000" />
     </task>
     <task id="LOCAL-00001" summary="Adding Front">
       <option name="closed" value="true" />
@@ -116,7 +105,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719666928847</updated>
     </task>
-    <option name="localTasksCounter" value="3" />
+    <task id="LOCAL-00003" summary="Adding Ingredients from API, add and edit working good, front of the ingredients page">
+      <option name="closed" value="true" />
+      <created>1719757925681</created>
+      <option name="number" value="00003" />
+      <option name="presentableId" value="LOCAL-00003" />
+      <option name="project" value="LOCAL" />
+      <updated>1719757925681</updated>
+    </task>
+    <option name="localTasksCounter" value="4" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -137,6 +134,8 @@
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
     <MESSAGE value="Adding Front" />
     <MESSAGE value="Adding Form front with the new form" />
-    <option name="LAST_COMMIT_MESSAGE" value="Adding Form front with the new form" />
+    <MESSAGE value="Adding Ingredients from API, add and edit working good, front of the ingredients page" />
+    <MESSAGE value="Adding recipe-details front" />
+    <option name="LAST_COMMIT_MESSAGE" value="Adding recipe-details front" />
   </component>
 </project>

daidokoro/src/app/component/recipe-detail/recipe-detail.component.html

@@ -1,7 +1,85 @@
-<h1>{{recipe?.$name}}</h1>
+<style>
-<p> {{recipe?.$createdAt}}</p>
+  .recipe-details {
+    font-family: Arial, sans-serif;
+    background-color: #bab6b6;
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 
-<h3>{{recipe?.$description}}</h3>
+  .recipe-card {
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    transition: transform 0.2s;
+    width: 80%;
+    margin: 20px;
+    padding: 20px;
+  }
 
-<img [src]="recipe?.$image" alt="Recette 1" class="recipe-image"
+  .recipe-card:hover {
-     onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
+    transform: scale(1.05);
+  }
+
+  .recipe-image {
+    width: 100%;
+    max-width: 300px;
+    border-radius: 10px;
+  }
+
+  .recipe-content {
+    padding: 15px;
+    text-align: center;
+  }
+
+  .recipe-title {
+    font-size: 2em;
+    margin: 0 0 10px;
+  }
+
+  .recipe-date {
+    color: #777;
+    margin-bottom: 20px;
+  }
+
+  .recipe-description {
+    font-size: 1.2em;
+    margin: 20px 0;
+  }
+
+  .ingredient-list {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  .ingredient-item {
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 10px;
+    margin: 5px 0;
+  }
+
+</style>
+
+
+<div class="recipe-details">
+  <div class="recipe-card">
+    <h1 class="recipe-title">{{ recipe?.$name }}</h1>
+    <p class="recipe-date">{{ recipe?.$createdAt }}</p>
+    <img [src]="recipe?.$image" alt="{{ recipe?.$name }}" class="recipe-image"
+         onerror="this.onerror=null;this.src='https://placehold.co/300x300/black/white?text=Not+Found';">
+    <div class="recipe-content">
+      <h3 class="recipe-description">{{ recipe?.$description }}</h3>
+      <h4>Ingrédients</h4>
+      <ul class="ingredient-list">
+        <li class="ingredient-item" *ngFor="let ingredient of ingredients">
+          {{ ingredient.ingredient.name }} : {{ ingredient.quantity }} {{ ingredient.unit }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>

daidokoro/src/app/component/recipe-detail/recipe-detail.component.ts

@@ -3,6 +3,7 @@ import {Recipe} from "../../model/recipe.model";
 import {RecipeService} from "../../service/recipe.service";
 import {RouterLink, RouterLinkActive, RouterOutlet} from "@angular/router";
 import {NgFor} from "@angular/common";
+import {QuantifiedIngredientGetter} from "../../model/quantified-ingredient-getter.model";
 
 @Component({
   selector: 'app-recipe-detail',
@@ -14,6 +15,7 @@ import {NgFor} from "@angular/common";
 export class RecipeDetailComponent {
 
   recipe : Recipe|null = null;
+  ingredients : QuantifiedIngredientGetter[] = [];
 
   constructor(private recipeService : RecipeService) {
   }
@@ -21,6 +23,9 @@ export class RecipeDetailComponent {
   @Input()
   set id(id: number) {
     this.recipe = this.recipeService.getRecipe(id)!;
+    this.ingredients = this.recipe.$ingredients;
   }
 
+
+
 }

daidokoro/src/app/model/quantified-ingredient-getter.model.ts

@@ -0,0 +1,23 @@
+import { Unity } from "./unity";
+import { Ingredient } from "./ingredient.model";
+import { QuantifiedIngredient } from "./quantified-ingredient.model";
+
+export class QuantifiedIngredientGetter implements QuantifiedIngredient {
+  constructor(
+    public $quantity: number,
+    public $unit: Unity,
+    public $ingredient: Ingredient
+  ) {}
+
+  get quantity(): number {
+    return this.$quantity;
+  }
+
+  get unit(): Unity {
+    return this.$unit;
+  }
+
+  get ingredient(): Ingredient {
+    return this.$ingredient;
+  }
+}

daidokoro/src/app/model/quantified-ingredient.model.ts

@@ -1,8 +1,8 @@
-import {Unity} from "./unity";
+import { Unity } from "./unity";
-import {Ingredient} from "./ingredient.model";
+import { Ingredient } from "./ingredient.model";
 
 export interface QuantifiedIngredient {
-  $quantity : number,
+  $quantity: number;
-  $unit : Unity,
+  $unit: Unity;
-  $ingredient : Ingredient
+  $ingredient: Ingredient;
 }

daidokoro/src/app/model/recipe.model.ts

@@ -1,10 +1,10 @@
-import {QuantifiedIngredient} from "./quantified-ingredient.model";
+import {QuantifiedIngredientGetter} from "./quantified-ingredient-getter.model";
 
 export interface Recipe {
   $id : number,
   $name : string,
   $description: string,
   $createdAt : Date,
-  $ingredients: QuantifiedIngredient[],
+  $ingredients: QuantifiedIngredientGetter[],
   $image?: string
 }