@@ -41,12 +76,61 @@ export default function RecipeFinder() {
if (!user) return null;
+ const handleLogout = () => {
+ logout();
+ router.replace("/");
+ }
const handleProfil = () => {
setOpen(false);
console.log("Profil ansehen");
router.push("/profile");
};
+ const handleAdd = (ingredient: IngredientInput) => {
+ setIngredients(prev => [...prev, ingredient]);
+ };
+
+ const handleRemoveIngredient = (name: string) => {
+ setIngredients(prev => prev.filter(z => z.name !== name));
+ }
+
+ const handleEditSave = (name: string) => {
+ const amountNum = parseFloat(editAmount);
+ if (!editAmount || isNaN(amountNum) || amountNum <= 0) return;
+ setIngredients(prev => prev.map(i =>
+ i.name === name ? { ...i, amount: amountNum, unit: editUnit } : i
+ ));
+ setEditingIngredient(null);
+ };
+
+ const handleEditStart = (i: IngredientInput) => {
+ setEditingIngredient(i.name);
+ setEditAmount(String(i.amount));
+ setEditUnit(i.unit);
+ };
+
+ const handleSearch = async () => {
+ if (ingredients.length === 0) {
+ setSearchError("Bitte mindestens eine Zutat hinzufügen.");
+ return;
+ }
+ setSearchError("");
+ setSearching(true);
+ try {
+ const res = await fetchWithAuth('/recipes/search', {
+ method: "POST",
+ headers: {"Content-Type": "application/json"},
+ body: JSON.stringify({zutaten: ingredients, servings}),
+ });
+ const data = await res.json();
+ setResults(data.rezepte ?? []);
+ } catch {
+ setSearchError("Suche fehlgeschlagen.");
+ } finally {
+ setSearching(false);
+ }
+ };
+
return (
{/* Navbar */}
@@ -58,9 +142,7 @@ export default function RecipeFinder() {
@@ -85,7 +167,7 @@ export default function RecipeFinder() {
Profil ansehen
- {/* Dashboard Content */}
-
- Dashboard
- Willkommen zurück, {user.name}!
+
);
}
\ No newline at end of file
diff --git a/project/frontend/app/recipeFinder/popup.tsx b/project/frontend/app/recipeFinder/popup.tsx
new file mode 100644
index 0000000..ec2f81b
--- /dev/null
+++ b/project/frontend/app/recipeFinder/popup.tsx
@@ -0,0 +1,81 @@
+import { useState } from "react";
+import "./style.css";
+
+const EINHEITEN = ["Stück", "g", "kg", "ml", "l", "EL", "TL", "Prise"];
+
+export interface IngredientInput {
+ name: string;
+ amount: number;
+ unit: string;
+}
+
+interface Props {
+ ingredients: IngredientInput[];
+ onAdd: (ingredient: IngredientInput) => void;
+ servings: number;
+ onServingsChange: (s: number) => void;
+}
+
+export default function AddIngredientsPopup({ ingredients, onAdd}: Props) {
+ const [ingredientName, setIngredientName] = useState("");
+ const [ingredientAmount, setIngredientAmount] = useState("");
+ const [ingredientUnit, setIngredientUnit] = useState("Stück");
+ const [inputError, setInputError] = useState("");
+
+ const handleAddIngredient = () => {
+ const trimmedName = ingredientName.trim();
+ const amountNum = parseFloat(ingredientAmount);
+
+ if (!trimmedName) { setInputError("Bitte eine Zutat eingeben."); return; }
+ if (!ingredientAmount || isNaN(amountNum) || amountNum <= 0) { setInputError("Bitte eine gültige Menge eingeben."); return; }
+ if (ingredients.some(z => z.name.toLowerCase() === trimmedName.toLowerCase())) {
+ setInputError("Diese Zutat wurde bereits hinzugefügt.");
+ return;
+ }
+
+ onAdd({ name: trimmedName, amount: amountNum, unit: ingredientUnit });
+ setIngredientName("");
+ setIngredientAmount("");
+ setIngredientUnit("Stück");
+ setInputError("");
+ };
+
+ return (
+
+
Zutaten Hinzufügen
+
+
+ setIngredientName(e.target.value)}
+ onKeyDown={e => e.key === "Enter" && handleAddIngredient()}
+ placeholder="z.B. Tomaten"
+ className="popup__input"
+ />
+ setIngredientAmount(e.target.value)}
+ onKeyDown={e => e.key === "Enter" && handleAddIngredient()}
+ placeholder="Menge"
+ min={0}
+ className="popup__input popup__input--amount"
+ />
+
+
+
+ {inputError &&
{inputError}
}
+
+
+