fix: rozdílné jednotky u receptů

feat: vazby a trvání receptů

client/src/components/MealTemplateCard.tsx

@@ -1,13 +1,20 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFilePdf, faPenToSquare, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faClock, faFilePdf, faPenToSquare, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { MealTemplate } from "../../../types";
 import { RECIPE_FLAVOR_NAMES } from "../enums";
-import { deriveRecipe, formatCalories, formatCount, formatPrice, formatWeight, getIngredientCalories } from "../Utils";
+import {
+    deriveRecipe, formatCalories, formatCount, formatIngredientAmount, formatPrepTime, formatPrice, formatWeight,
+    getIngredientCalories,
+} from "../Utils";
 import RecipeNote from "./RecipeNote";
+import RecipeLinks from "./RecipeLinks";
 
 type Props = {
     template: MealTemplate,
     busy?: boolean,
+    /** Všechny recepty — bez nich se vazby na jiné recepty nezobrazí. */
+    recipeList?: MealTemplate[],
+    onOpenRecipe?: (recipe: MealTemplate) => void,
     /** Bez úpravy a smazání je karta jen k nahlédnutí (kolo štěstí). */
     onEdit?: () => void,
     onDelete?: () => void,
@@ -18,7 +25,7 @@ type Props = {
  * Karta receptu uvnitř jídla v seznamu jídel — suroviny, hodnoty celého hrnce
  * i jedné porce a postup. Název a zdroj neopakuje, nese je jídlo.
  */
-const MealTemplateCard = ({ template, busy, onEdit, onDelete, onExport }: Readonly<Props>) => {
+const MealTemplateCard = ({ template, busy, recipeList, onOpenRecipe, onEdit, onDelete, onExport }: Readonly<Props>) => {
     const recipe = deriveRecipe(template.ingredients, template.servings, template.cookedWeight);
 
     return (
@@ -28,6 +35,11 @@ const MealTemplateCard = ({ template, busy, onEdit, onDelete, onExport }: Readon
                     Recept
                     {template.category && <span className="tag">{template.category}</span>}
                     <span className="tag">{RECIPE_FLAVOR_NAMES[template.flavor].toLowerCase()}</span>
+                    {template.prepMinutes != null && (
+                        <span className="tag" title="Čas přípravy">
+                            <FontAwesomeIcon icon={faClock} /> {formatPrepTime(template.prepMinutes)}
+                        </span>
+                    )}
                     {template.weight != null && <span className="tag">porce {formatWeight(template.weight)}</span>}
                     {(template.servings ?? 1) > 1 && (
                         <span className="tag">{formatCount(template.servings ?? 1, 'porce', 'porce', 'porcí')}</span>
@@ -74,9 +86,7 @@ const MealTemplateCard = ({ template, busy, onEdit, onDelete, onExport }: Readon
                         // Suroviny nemají vlastní id, v rámci jednoho receptu je index stabilní
                         <li key={index}>
                             <span className="template-item-name">{ingredient.name}</span>
-                            <span className="template-item-quantity">
-                                {ingredient.weight != null ? formatWeight(ingredient.weight) : ''}
-                            </span>
+                            <span className="template-item-quantity">{formatIngredientAmount(ingredient)}</span>
                             <span className="template-item-calories">
                                 {formatCalories(getIngredientCalories(ingredient))}
                             </span>
@@ -92,6 +102,8 @@ const MealTemplateCard = ({ template, busy, onEdit, onDelete, onExport }: Readon
                 {recipe.totalPrice != null && <> · {formatPrice(recipe.totalPrice)}</>}
             </div>
 
+            {recipeList && <RecipeLinks template={template} recipeList={recipeList} onOpen={onOpenRecipe} />}
+
             {template.note && <RecipeNote note={template.note} />}
         </div>
     );