add servings information to recipe

frontend/src/App.css

@@ -41,7 +41,7 @@
   }
 
   .subsection-heading {
-    @apply font-semibold mb-2;
+    @apply font-semibold mb-2 mt-4;
   }
 
   /* buttons */
@@ -59,18 +59,18 @@
 
   /* input field */
   .input-field {
-    @apply border p-2 w-full mb-2 rounded;
+    @apply border p-2 w-full mb-2 rounded placeholder-gray-400;
   }
 
   .text-area {
-    @apply border p-2 w-full mb-2 rounded;
+    @apply border p-2 w-full mb-2 rounded placeholder-gray-400;
   }
 
   /* groups */
   .button-group{
     @apply flex gap-4 mt-4;
   }
-  
+
   /* lists */
   .default-list-item {
     @apply list-disc pl-6 mb-6

frontend/src/components/IngredientListEditor.tsx

@@ -1,6 +1,9 @@
-import { useState } from "react"
 import type { Ingredient } from "../types/ingredient"
 
+/** 
+ * Editor for handling the ingredient list
+ * Ingredients can be edited, added and removed
+ */
 type IngredientListEditorProps = {
   ingredients: Ingredient[]
   onChange: (ingredients: Ingredient[]) => void

frontend/src/components/RecipeDetailView.tsx

@@ -29,6 +29,7 @@ export default function RecipeDetailView() {
 
       {/* Ingredients */}
       <h2 className="section-heading">Zutaten</h2>
+      <p>For {recipe.servings.amount} {recipe.servings.unit}</p>
       <ul className="default-list-item">
         {recipe.ingredients.map((ing, i) => (
         <li key={i}>

frontend/src/components/RecipeEditor.tsx

@@ -34,7 +34,32 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
         value={draft.title}
         onChange={e => setDraft({ ...draft, title: e.target.value })}
       />
-
+      {/* Servings */}
+      <h3 className="subsection-heading">Servings</h3>
+      <div className="columns-3 gap-2 flex items-center">
+        <label>For</label>
+        <input
+          type="number"
+          className="input-field w-20"
+          placeholder="1"
+          value={draft.servings.amount}
+          onChange={e => {
+            let tempServings = draft.servings
+            tempServings.amount = Number(e.target.value)
+            setDraft({...draft, servings: tempServings})
+          }}
+        />
+        <input
+          className="input-field"
+          placeholder="Persons"
+          value={draft.servings.unit}
+          onChange={e => {
+            let tempServings = draft.servings
+            tempServings.unit = e.target.value
+            setDraft({...draft, servings: tempServings})
+          }}
+        />
+      </div>
       {/* Ingredient List */}
       <IngredientListEditor
         ingredients={draft.ingredients}

frontend/src/mock_data/recipes.ts

@@ -8,12 +8,28 @@ export const recipes: Recipe[] = [
   {
   id: "1",
   title: "Spaghetti Bolognese",
+  servings: { amount: 1, unit: "Person"},
   ingredients: [
     { name: "Spaghetti", amount: 200, unit: "g" },
     { name: "Ground Beef", amount: 300, unit: "g" },
     { name: "Tomato Sauce", amount: 400, unit: "ml" }
   ],
   instructions: "Cook pasta. Prepare sauce. Mix together. Serve hot.",
-  photoUrl: "https://source.unsplash.com/400x300/?spaghetti"
-}
+  imageUrl: "https://source.unsplash.com/400x300/?spaghetti"
+},
+{
+  id: "2",
+  title: "Spaghetti Carbonara",
+  servings: { amount: 4, unit: "Persons"},
+  ingredients: [
+    { name: "Spaghetti", amount: 500, unit: "g" },
+    { name: "Bacon", amount: 150, unit: "g" },
+    { name: "Cream", amount: 200, unit: "ml" },
+    { name: "Onion", amount: 1},
+    { name: "Parmesan cheese", amount: 200, unit: "g"},
+    { name: "Olives", amount: 100, unit: "g"}
+  ],
+  instructions: "Cook pasta. Prepare sauce. Mix together. Serve hot.",
+  imageUrl: "https://source.unsplash.com/400x300/?spaghetti"
+},
 ]

frontend/src/types/recipe.ts

@@ -1,4 +1,5 @@
 import type { Ingredient } from "./ingredient"
+import type { Servings } from "./servings"
 
 /**
  * Represents a recipe object in the application.
@@ -16,6 +17,11 @@ export interface Recipe {
   /** Preparation instructions */
   instructions: string
 
+  /** Number of servings, e.g., for 4 person, 12 cupcakes, 2 glasses */
+  servings: Servings
+
+  /** Unit for the quantity */
+
   /** Optional image URL for the recipe */
   imageUrl?: string
 }

frontend/src/types/servings.ts

@@ -0,0 +1,12 @@
+/**
+ * Defines how many servings of the dish are prepared when following the recipe
+ */
+
+export interface Servings{
+    /** Amount of servings */
+    amount: number,
+
+    /** Unit, e.g. 4 persons, 2 glasses, 12 cupcakes */
+    unit: string
+
+}