feat: add recipes module with CRUD functionality and integrate with meals
- Implemented new recipes page with UI for managing recipes. - Added REST API routes for recipes including create, read, update, and delete operations. - Introduced database schema for recipes and recipe ingredients. - Updated meals to link with recipes, allowing meals to reference specific recipes. - Enhanced validation for recipe-related fields in meals. - Added styles for the recipes page and components.
This commit is contained in:
Serhiy Bobrov
committed by
Ulas Kalayci
Ulas Kalayci
parent
41467a84b6
commit
0b54fe255b
+194
-11
@@ -36,6 +36,7 @@ const EXCLUDED_MEAL_CATEGORY_NAMES = new Set(['Haushalt', 'Drogerie']);
|
||||
let state = {
|
||||
currentWeek: null, // YYYY-MM-DD (Montag)
|
||||
meals: [],
|
||||
recipes: [],
|
||||
lists: [], // Einkaufslisten für Transfer-Dropdown
|
||||
categories: [], // Einkaufskategorien für Zutaten
|
||||
modal: null,
|
||||
@@ -115,6 +116,15 @@ async function loadCategories() {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadRecipes() {
|
||||
try {
|
||||
const res = await api.get('/recipes');
|
||||
state.recipes = res.data;
|
||||
} catch {
|
||||
state.recipes = [];
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPreferences() {
|
||||
try {
|
||||
const res = await api.get('/preferences');
|
||||
@@ -157,10 +167,19 @@ export async function render(container, { user }) {
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
const monday = getMondayOf(today);
|
||||
|
||||
await Promise.all([loadWeek(monday), loadLists(), loadPreferences(), loadCategories()]);
|
||||
await Promise.all([loadWeek(monday), loadLists(), loadPreferences(), loadCategories(), loadRecipes()]);
|
||||
renderWeekGrid();
|
||||
wireNav();
|
||||
|
||||
const selectedRecipeId = Number(new URLSearchParams(window.location.search).get('recipe'));
|
||||
if (selectedRecipeId) {
|
||||
const selectedRecipe = state.recipes.find((r) => r.id === selectedRecipeId);
|
||||
if (selectedRecipe) {
|
||||
const firstType = state.visibleMealTypes[0] ?? 'lunch';
|
||||
openMealModal({ mode: 'create', date: today, mealType: firstType, presetRecipeId: selectedRecipe.id });
|
||||
}
|
||||
}
|
||||
|
||||
container.querySelector('#fab-new-meal').addEventListener('click', () => {
|
||||
const firstType = state.visibleMealTypes[0] ?? 'lunch';
|
||||
openMealModal({ mode: 'create', date: today, mealType: firstType });
|
||||
@@ -473,7 +492,7 @@ async function moveMeal(mealId, sourceDate, sourceType, targetDate, targetType,
|
||||
|
||||
function openMealModal(opts) {
|
||||
state.modal = opts;
|
||||
const { mode, date, mealType, meal } = opts;
|
||||
const { mode, date, mealType, meal, presetRecipeId = null } = opts;
|
||||
const isEdit = mode === 'edit';
|
||||
|
||||
const content = buildModalContent(opts);
|
||||
@@ -523,6 +542,144 @@ function openMealModal(opts) {
|
||||
// Zutaten
|
||||
const ingList = panel.querySelector('#ingredient-list');
|
||||
const addIngBtn = panel.querySelector('#add-ingredient-btn');
|
||||
const recipeSelect = panel.querySelector('#modal-recipe-id');
|
||||
const recipeScaleInput = panel.querySelector('#modal-recipe-scale');
|
||||
const saveAsRecipeBtn = panel.querySelector('#modal-save-as-recipe');
|
||||
let currentAppliedRecipe = null;
|
||||
|
||||
const scaleQuantityText = (quantity, factor) => {
|
||||
if (!quantity || factor === 1) return quantity;
|
||||
|
||||
const formatNumber = (num, useComma = false) => {
|
||||
const rounded = Math.round(num * 100) / 100;
|
||||
if (Number.isInteger(rounded)) return String(rounded);
|
||||
const text = String(rounded);
|
||||
return useComma ? text.replace('.', ',') : text;
|
||||
};
|
||||
|
||||
const mixed = quantity.match(/^(\d+)\s+(\d+)\/(\d+)(.*)$/);
|
||||
if (mixed) {
|
||||
const whole = Number(mixed[1]);
|
||||
const num = Number(mixed[2]);
|
||||
const den = Number(mixed[3]);
|
||||
if (den > 0) {
|
||||
const value = (whole + (num / den)) * factor;
|
||||
return `${formatNumber(value)}${mixed[4]}`;
|
||||
}
|
||||
}
|
||||
|
||||
const frac = quantity.match(/^(\d+)\/(\d+)(.*)$/);
|
||||
if (frac) {
|
||||
const num = Number(frac[1]);
|
||||
const den = Number(frac[2]);
|
||||
if (den > 0) {
|
||||
const value = (num / den) * factor;
|
||||
return `${formatNumber(value)}${frac[3]}`;
|
||||
}
|
||||
}
|
||||
|
||||
const dec = quantity.match(/^(\d+(?:[.,]\d+)?)(.*)$/);
|
||||
if (dec) {
|
||||
const useComma = dec[1].includes(',');
|
||||
const base = Number(dec[1].replace(',', '.'));
|
||||
if (Number.isFinite(base)) {
|
||||
return `${formatNumber(base * factor, useComma)}${dec[2]}`;
|
||||
}
|
||||
}
|
||||
|
||||
return quantity;
|
||||
};
|
||||
|
||||
const applyRecipe = (recipeId) => {
|
||||
const id = Number(recipeId);
|
||||
const factor = Math.max(Number(recipeScaleInput?.value || 1), 0.1);
|
||||
if (!id) {
|
||||
currentAppliedRecipe = null;
|
||||
return;
|
||||
}
|
||||
const recipe = state.recipes.find((r) => r.id === id);
|
||||
if (!recipe) return;
|
||||
|
||||
currentAppliedRecipe = recipe;
|
||||
|
||||
panel.querySelector('#modal-title').value = recipe.title || '';
|
||||
panel.querySelector('#modal-notes').value = recipe.notes || '';
|
||||
panel.querySelector('#modal-recipe-url').value = recipe.recipe_url || '';
|
||||
|
||||
ingList.innerHTML = (recipe.ingredients || [])
|
||||
.map((ing) => {
|
||||
const scaledQty = scaleQuantityText(ing.quantity ?? '', factor);
|
||||
return ingredientRowHTML(ing.name, scaledQty, null, ing.category ?? DEFAULT_CATEGORY_NAME);
|
||||
})
|
||||
.join('');
|
||||
|
||||
if (window.lucide) lucide.createIcons();
|
||||
};
|
||||
|
||||
recipeSelect?.addEventListener('change', () => {
|
||||
if (recipeScaleInput) recipeScaleInput.value = '1';
|
||||
applyRecipe(recipeSelect.value);
|
||||
});
|
||||
|
||||
recipeScaleInput?.addEventListener('input', () => {
|
||||
const currentRecipeId = Number(recipeSelect?.value || 0);
|
||||
if (!currentRecipeId || !currentAppliedRecipe) return;
|
||||
|
||||
const factor = Number(recipeScaleInput.value || 1);
|
||||
if (!Number.isFinite(factor) || factor <= 0) return;
|
||||
|
||||
ingList.innerHTML = (currentAppliedRecipe.ingredients || [])
|
||||
.map((ing) => ingredientRowHTML(
|
||||
ing.name,
|
||||
scaleQuantityText(ing.quantity ?? '', Math.max(factor, 0.1)),
|
||||
null,
|
||||
ing.category ?? DEFAULT_CATEGORY_NAME
|
||||
))
|
||||
.join('');
|
||||
|
||||
if (window.lucide) lucide.createIcons();
|
||||
});
|
||||
|
||||
saveAsRecipeBtn?.addEventListener('click', async () => {
|
||||
const title = panel.querySelector('#modal-title').value.trim();
|
||||
if (!title) {
|
||||
window.oikos?.showToast(t('meals.titleRequired'), 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const notes = panel.querySelector('#modal-notes').value.trim() || null;
|
||||
const recipe_url = panel.querySelector('#modal-recipe-url').value.trim() || null;
|
||||
const ingredients = collectModalIngredients(panel).map((ing) => ({
|
||||
name: ing.name,
|
||||
quantity: ing.quantity,
|
||||
category: ing.category,
|
||||
}));
|
||||
|
||||
saveAsRecipeBtn.disabled = true;
|
||||
try {
|
||||
const created = await api.post('/recipes', { title, notes, recipe_url, ingredients });
|
||||
state.recipes.push(created.data);
|
||||
|
||||
if (recipeSelect) {
|
||||
const option = document.createElement('option');
|
||||
option.value = String(created.data.id);
|
||||
option.textContent = created.data.title;
|
||||
recipeSelect.appendChild(option);
|
||||
recipeSelect.value = String(created.data.id);
|
||||
}
|
||||
|
||||
window.oikos?.showToast(t('recipes.created'), 'success');
|
||||
} catch (err) {
|
||||
window.oikos?.showToast(err.data?.error ?? t('common.errorGeneric'), 'error');
|
||||
} finally {
|
||||
saveAsRecipeBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (presetRecipeId && recipeSelect) {
|
||||
recipeSelect.value = String(presetRecipeId);
|
||||
applyRecipe(presetRecipeId);
|
||||
}
|
||||
|
||||
addIngBtn.addEventListener('click', () => {
|
||||
const tmp = document.createElement('div');
|
||||
@@ -584,6 +741,11 @@ function buildModalContent({ mode, date, mealType, meal }) {
|
||||
|
||||
const hasIngOpen = isEdit && meal.ingredients?.some((i) => !i.on_shopping_list);
|
||||
|
||||
const recipeOptions = [
|
||||
`<option value="">${t('meals.savedRecipePlaceholder')}</option>`,
|
||||
...state.recipes.map((r) => `<option value="${r.id}" ${isEdit && meal.recipe_id === r.id ? 'selected' : ''}>${esc(r.title)}</option>`),
|
||||
].join('');
|
||||
|
||||
return `
|
||||
<div class="modal-grid modal-grid--2">
|
||||
<div class="form-group">
|
||||
@@ -605,6 +767,21 @@ function buildModalContent({ mode, date, mealType, meal }) {
|
||||
<div id="modal-autocomplete" class="meal-modal__autocomplete" hidden></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="modal-recipe-id">${t('meals.savedRecipeLabel')}</label>
|
||||
<select class="form-input" id="modal-recipe-id">${recipeOptions}</select>
|
||||
</div>
|
||||
|
||||
<div class="modal-grid modal-grid--2">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="modal-recipe-scale">${t('meals.recipeScaleLabel')}</label>
|
||||
<input type="number" class="form-input" id="modal-recipe-scale" min="0.1" step="0.1" value="1">
|
||||
</div>
|
||||
<div class="form-group" style="display:flex;align-items:flex-end;">
|
||||
<button class="btn btn--secondary" id="modal-save-as-recipe" type="button">${t('meals.saveAsRecipe')}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="modal-notes">${t('meals.notesLabel')}</label>
|
||||
<textarea class="form-input" id="modal-notes" rows="2"
|
||||
@@ -678,19 +855,14 @@ async function saveModal(overlay) {
|
||||
const title = overlay.querySelector('#modal-title').value.trim();
|
||||
const notes = overlay.querySelector('#modal-notes').value.trim() || null;
|
||||
const recipe_url = overlay.querySelector('#modal-recipe-url').value.trim() || null;
|
||||
const recipe_id = overlay.querySelector('#modal-recipe-id')?.value || null;
|
||||
|
||||
if (!title) {
|
||||
window.oikos?.showToast(t('meals.titleRequired'), 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const ingredients = [];
|
||||
overlay.querySelectorAll('.ingredient-row').forEach((row) => {
|
||||
const name = row.querySelector('.ingredient-row__name').value.trim();
|
||||
const qty = row.querySelector('.ingredient-row__qty').value.trim() || null;
|
||||
const category = row.querySelector('.ingredient-row__cat')?.value || DEFAULT_CATEGORY_NAME;
|
||||
if (name) ingredients.push({ name, quantity: qty, category, id: row.dataset.ingId || null });
|
||||
});
|
||||
const ingredients = collectModalIngredients(overlay);
|
||||
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.textContent = '…';
|
||||
@@ -699,11 +871,11 @@ async function saveModal(overlay) {
|
||||
const { mode, meal } = state.modal;
|
||||
|
||||
if (mode === 'create') {
|
||||
const res = await api.post('/meals', { date, meal_type, title, notes, recipe_url, ingredients });
|
||||
const res = await api.post('/meals', { date, meal_type, title, notes, recipe_url, recipe_id, ingredients });
|
||||
state.meals.push(res.data);
|
||||
} else {
|
||||
// Update meal meta
|
||||
await api.put(`/meals/${meal.id}`, { date, meal_type, title, notes, recipe_url });
|
||||
await api.put(`/meals/${meal.id}`, { date, meal_type, title, notes, recipe_url, recipe_id });
|
||||
|
||||
// Sync ingredients
|
||||
const existingIds = new Set((meal.ingredients ?? []).map((i) => i.id));
|
||||
@@ -732,6 +904,17 @@ async function saveModal(overlay) {
|
||||
}
|
||||
}
|
||||
|
||||
function collectModalIngredients(overlay) {
|
||||
const ingredients = [];
|
||||
overlay.querySelectorAll('.ingredient-row').forEach((row) => {
|
||||
const name = row.querySelector('.ingredient-row__name').value.trim();
|
||||
const qty = row.querySelector('.ingredient-row__qty').value.trim() || null;
|
||||
const category = row.querySelector('.ingredient-row__cat')?.value || DEFAULT_CATEGORY_NAME;
|
||||
if (name) ingredients.push({ name, quantity: qty, category, id: row.dataset.ingId || null });
|
||||
});
|
||||
return ingredients;
|
||||
}
|
||||
|
||||
// --------------------------------------------------------
|
||||
// Mahlzeit löschen
|
||||
// --------------------------------------------------------
|
||||
|
||||
@@ -0,0 +1,372 @@
|
||||
/**
|
||||
* Modul: Rezepte (Recipes)
|
||||
* Zweck: Gespeicherte Rezepte verwalten und in den Essensplan uebernehmen
|
||||
*/
|
||||
|
||||
import { api } from '/api.js';
|
||||
import { t } from '/i18n.js';
|
||||
import { esc } from '/utils/html.js';
|
||||
import { openModal as openSharedModal, closeModal as closeSharedModal, confirmModal } from '/components/modal.js';
|
||||
import { DEFAULT_CATEGORY_NAME, categoryLabel } from '/utils/shopping-categories.js';
|
||||
|
||||
let _container = null;
|
||||
|
||||
const state = {
|
||||
recipes: [],
|
||||
categories: [],
|
||||
};
|
||||
|
||||
function mealCategories() {
|
||||
return state.categories.filter((c) => c.name !== 'Haushalt' && c.name !== 'Drogerie');
|
||||
}
|
||||
|
||||
async function loadRecipes() {
|
||||
const res = await api.get('/recipes');
|
||||
state.recipes = res.data;
|
||||
}
|
||||
|
||||
async function loadCategories() {
|
||||
try {
|
||||
const res = await api.get('/shopping/categories');
|
||||
state.categories = res.data;
|
||||
} catch {
|
||||
state.categories = [];
|
||||
}
|
||||
}
|
||||
|
||||
export async function render(container) {
|
||||
_container = container;
|
||||
|
||||
const page = document.createElement('div');
|
||||
page.className = 'recipes-page';
|
||||
|
||||
const header = document.createElement('div');
|
||||
header.className = 'recipes-header';
|
||||
|
||||
const title = document.createElement('h1');
|
||||
title.className = 'recipes-header__title';
|
||||
title.textContent = t('recipes.title');
|
||||
|
||||
const addBtn = document.createElement('button');
|
||||
addBtn.className = 'btn btn--primary';
|
||||
addBtn.type = 'button';
|
||||
addBtn.id = 'recipes-add';
|
||||
addBtn.textContent = t('recipes.addRecipe');
|
||||
|
||||
header.append(title, addBtn);
|
||||
|
||||
const list = document.createElement('div');
|
||||
list.className = 'recipes-list';
|
||||
list.id = 'recipes-list';
|
||||
|
||||
const fab = document.createElement('button');
|
||||
fab.className = 'page-fab';
|
||||
fab.type = 'button';
|
||||
fab.id = 'recipes-fab';
|
||||
fab.setAttribute('aria-label', t('recipes.addRecipe'));
|
||||
const fabIcon = document.createElement('i');
|
||||
fabIcon.dataset.lucide = 'plus';
|
||||
fabIcon.setAttribute('aria-hidden', 'true');
|
||||
fab.appendChild(fabIcon);
|
||||
|
||||
page.append(header, list, fab);
|
||||
container.replaceChildren(page);
|
||||
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
|
||||
await Promise.all([loadRecipes(), loadCategories()]);
|
||||
renderRecipeList();
|
||||
|
||||
addBtn.addEventListener('click', () => openRecipeModal('create'));
|
||||
fab.addEventListener('click', () => openRecipeModal('create'));
|
||||
|
||||
list.addEventListener('click', async (e) => {
|
||||
const actionBtn = e.target.closest('[data-action]');
|
||||
if (!actionBtn) return;
|
||||
|
||||
const recipeId = Number(actionBtn.dataset.id);
|
||||
const recipe = state.recipes.find((r) => r.id === recipeId);
|
||||
if (!recipe) return;
|
||||
|
||||
if (actionBtn.dataset.action === 'edit') {
|
||||
openRecipeModal('edit', recipe);
|
||||
return;
|
||||
}
|
||||
|
||||
if (actionBtn.dataset.action === 'delete') {
|
||||
await removeRecipe(recipe);
|
||||
return;
|
||||
}
|
||||
|
||||
if (actionBtn.dataset.action === 'duplicate') {
|
||||
await duplicateRecipe(recipe);
|
||||
return;
|
||||
}
|
||||
|
||||
if (actionBtn.dataset.action === 'add-to-meals') {
|
||||
window.oikos?.navigate(`/meals?recipe=${recipe.id}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderRecipeList() {
|
||||
const list = _container.querySelector('#recipes-list');
|
||||
if (!list) return;
|
||||
|
||||
list.replaceChildren();
|
||||
|
||||
if (!state.recipes.length) {
|
||||
const empty = document.createElement('div');
|
||||
empty.className = 'empty-state';
|
||||
|
||||
const emptyTitle = document.createElement('div');
|
||||
emptyTitle.className = 'empty-state__title';
|
||||
emptyTitle.textContent = t('recipes.emptyTitle');
|
||||
|
||||
const emptyDesc = document.createElement('div');
|
||||
emptyDesc.className = 'empty-state__description';
|
||||
emptyDesc.textContent = t('recipes.emptyDescription');
|
||||
|
||||
empty.append(emptyTitle, emptyDesc);
|
||||
list.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const recipe of state.recipes) {
|
||||
const card = document.createElement('article');
|
||||
card.className = 'recipe-card';
|
||||
|
||||
const h = document.createElement('h2');
|
||||
h.className = 'recipe-card__title';
|
||||
h.textContent = recipe.title;
|
||||
|
||||
card.appendChild(h);
|
||||
|
||||
if (recipe.notes) {
|
||||
const notes = document.createElement('p');
|
||||
notes.className = 'recipe-card__notes';
|
||||
notes.textContent = recipe.notes;
|
||||
card.appendChild(notes);
|
||||
}
|
||||
|
||||
if (recipe.recipe_url) {
|
||||
const link = document.createElement('a');
|
||||
link.className = 'btn btn--ghost';
|
||||
link.href = recipe.recipe_url;
|
||||
link.target = '_blank';
|
||||
link.rel = 'noopener noreferrer';
|
||||
link.textContent = t('recipes.openLink');
|
||||
card.appendChild(link);
|
||||
}
|
||||
|
||||
const ingredients = recipe.ingredients ?? [];
|
||||
if (ingredients.length) {
|
||||
const ul = document.createElement('ul');
|
||||
ul.className = 'recipe-card__ingredients';
|
||||
for (const ing of ingredients) {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'recipe-card__ingredient';
|
||||
const qty = ing.quantity ? `${ing.quantity} · ` : '';
|
||||
li.textContent = `${qty}${ing.name}`;
|
||||
ul.appendChild(li);
|
||||
}
|
||||
card.appendChild(ul);
|
||||
}
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'recipe-card__actions';
|
||||
|
||||
const addToMeals = document.createElement('button');
|
||||
addToMeals.className = 'btn btn--secondary';
|
||||
addToMeals.type = 'button';
|
||||
addToMeals.dataset.action = 'add-to-meals';
|
||||
addToMeals.dataset.id = String(recipe.id);
|
||||
addToMeals.textContent = t('recipes.addToMeals');
|
||||
|
||||
const edit = document.createElement('button');
|
||||
edit.className = 'btn btn--secondary';
|
||||
edit.type = 'button';
|
||||
edit.dataset.action = 'edit';
|
||||
edit.dataset.id = String(recipe.id);
|
||||
edit.textContent = t('common.edit');
|
||||
|
||||
const del = document.createElement('button');
|
||||
del.className = 'btn btn--danger';
|
||||
del.type = 'button';
|
||||
del.dataset.action = 'delete';
|
||||
del.dataset.id = String(recipe.id);
|
||||
del.textContent = t('common.delete');
|
||||
|
||||
const duplicate = document.createElement('button');
|
||||
duplicate.className = 'btn btn--secondary';
|
||||
duplicate.type = 'button';
|
||||
duplicate.dataset.action = 'duplicate';
|
||||
duplicate.dataset.id = String(recipe.id);
|
||||
duplicate.textContent = t('recipes.duplicate');
|
||||
|
||||
actions.append(addToMeals, edit, duplicate, del);
|
||||
card.appendChild(actions);
|
||||
|
||||
list.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
function recipeIngredientRowHTML(name, qty, category = DEFAULT_CATEGORY_NAME) {
|
||||
const categories = mealCategories();
|
||||
const resolvedCategory = categories.some((c) => c.name === category)
|
||||
? category
|
||||
: (categories[0]?.name ?? DEFAULT_CATEGORY_NAME);
|
||||
const catOptions = categories.length
|
||||
? categories.map((c) => `<option value="${esc(c.name)}" ${c.name === resolvedCategory ? 'selected' : ''}>${esc(categoryLabel(c.name))}</option>`).join('')
|
||||
: `<option value="${DEFAULT_CATEGORY_NAME}" selected>${t('meals.ingredientCategoryDefault')}</option>`;
|
||||
|
||||
return `
|
||||
<div class="recipe-ingredient-row">
|
||||
<input type="text" class="form-input recipe-ingredient-row__name" placeholder="${t('meals.ingredientNamePlaceholder')}" value="${esc(name)}">
|
||||
<input type="text" class="form-input recipe-ingredient-row__qty" placeholder="${t('meals.ingredientQtyPlaceholder')}" value="${esc(qty)}">
|
||||
<select class="form-input recipe-ingredient-row__cat" aria-label="${t('meals.ingredientCategoryLabel')}">${catOptions}</select>
|
||||
<button class="recipe-ingredient-row__remove" data-action="remove-ingredient" type="button" aria-label="${t('meals.removeIngredient')}">
|
||||
<i data-lucide="x" style="width:14px;height:14px;" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function openRecipeModal(mode, recipe = null) {
|
||||
const isEdit = mode === 'edit';
|
||||
const ingredientRows = isEdit && recipe.ingredients?.length
|
||||
? recipe.ingredients.map((i) => recipeIngredientRowHTML(i.name, i.quantity ?? '', i.category ?? DEFAULT_CATEGORY_NAME)).join('')
|
||||
: '';
|
||||
|
||||
openSharedModal({
|
||||
title: isEdit ? t('recipes.editRecipe') : t('recipes.addRecipe'),
|
||||
size: 'md',
|
||||
content: `
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="recipe-title">${t('recipes.titleLabel')}</label>
|
||||
<input id="recipe-title" class="form-input" type="text" value="${esc(isEdit ? recipe.title : '')}" placeholder="${t('recipes.titlePlaceholder')}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="recipe-notes">${t('recipes.notesLabel')}</label>
|
||||
<textarea id="recipe-notes" class="form-input" rows="3" placeholder="${t('recipes.notesPlaceholder')}">${esc(isEdit && recipe.notes ? recipe.notes : '')}</textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="recipe-url">${t('recipes.urlLabel')}</label>
|
||||
<input id="recipe-url" class="form-input" type="url" value="${esc(isEdit && recipe.recipe_url ? recipe.recipe_url : '')}" placeholder="${t('recipes.urlPlaceholder')}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">${t('recipes.ingredientsLabel')}</label>
|
||||
<div class="recipe-ingredient-list" id="recipe-ingredient-list">${ingredientRows}</div>
|
||||
<button class="btn btn--secondary recipe-add-ingredient" type="button" id="recipe-add-ingredient">${t('meals.addIngredient')}</button>
|
||||
</div>
|
||||
<div class="modal-panel__footer" style="border:none;padding:0;margin-top:var(--space-4)">
|
||||
<button class="btn btn--secondary" id="recipe-cancel">${t('common.cancel')}</button>
|
||||
<button class="btn btn--primary" id="recipe-save">${isEdit ? t('common.save') : t('common.add')}</button>
|
||||
</div>
|
||||
`,
|
||||
onSave(panel) {
|
||||
const ingList = panel.querySelector('#recipe-ingredient-list');
|
||||
panel.querySelector('#recipe-add-ingredient')?.addEventListener('click', () => {
|
||||
const tmp = document.createElement('div');
|
||||
tmp.innerHTML = recipeIngredientRowHTML('', '', null);
|
||||
const row = tmp.firstElementChild;
|
||||
ingList.appendChild(row);
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
});
|
||||
|
||||
ingList.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('[data-action="remove-ingredient"]');
|
||||
if (!btn) return;
|
||||
btn.closest('.recipe-ingredient-row')?.remove();
|
||||
});
|
||||
|
||||
panel.querySelector('#recipe-cancel')?.addEventListener('click', closeModal);
|
||||
panel.querySelector('#recipe-save')?.addEventListener('click', () => saveRecipe(panel, mode, recipe));
|
||||
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
closeSharedModal();
|
||||
}
|
||||
|
||||
async function saveRecipe(panel, mode, recipe) {
|
||||
const saveBtn = panel.querySelector('#recipe-save');
|
||||
const title = panel.querySelector('#recipe-title')?.value.trim() || '';
|
||||
const notes = panel.querySelector('#recipe-notes')?.value.trim() || null;
|
||||
const recipe_url = panel.querySelector('#recipe-url')?.value.trim() || null;
|
||||
|
||||
if (!title) {
|
||||
window.oikos?.showToast(t('recipes.titleRequired'), 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const ingredients = [];
|
||||
panel.querySelectorAll('.recipe-ingredient-row').forEach((row) => {
|
||||
const name = row.querySelector('.recipe-ingredient-row__name')?.value.trim() || '';
|
||||
const quantity = row.querySelector('.recipe-ingredient-row__qty')?.value.trim() || null;
|
||||
const category = row.querySelector('.recipe-ingredient-row__cat')?.value || DEFAULT_CATEGORY_NAME;
|
||||
if (name) ingredients.push({ name, quantity, category });
|
||||
});
|
||||
|
||||
saveBtn.disabled = true;
|
||||
|
||||
try {
|
||||
if (mode === 'create') {
|
||||
const res = await api.post('/recipes', { title, notes, recipe_url, ingredients });
|
||||
state.recipes.push(res.data);
|
||||
} else {
|
||||
const res = await api.put(`/recipes/${recipe.id}`, { title, notes, recipe_url, ingredients });
|
||||
const idx = state.recipes.findIndex((r) => r.id === recipe.id);
|
||||
if (idx >= 0) state.recipes[idx] = res.data;
|
||||
}
|
||||
|
||||
closeModal();
|
||||
renderRecipeList();
|
||||
window.oikos?.showToast(mode === 'create' ? t('recipes.created') : t('recipes.updated'), 'success');
|
||||
} catch (err) {
|
||||
saveBtn.disabled = false;
|
||||
window.oikos?.showToast(err.data?.error ?? t('common.errorGeneric'), 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function removeRecipe(recipe) {
|
||||
const ok = await confirmModal(t('recipes.deleteConfirm', { title: recipe.title }), {
|
||||
danger: true,
|
||||
confirmLabel: t('common.delete'),
|
||||
});
|
||||
|
||||
if (!ok) return;
|
||||
|
||||
try {
|
||||
await api.delete(`/recipes/${recipe.id}`);
|
||||
state.recipes = state.recipes.filter((r) => r.id !== recipe.id);
|
||||
renderRecipeList();
|
||||
window.oikos?.showToast(t('recipes.deleted'), 'success');
|
||||
} catch (err) {
|
||||
window.oikos?.showToast(err.data?.error ?? t('common.errorGeneric'), 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function duplicateRecipe(recipe) {
|
||||
const copySuffix = t('recipes.copySuffix');
|
||||
const title = `${recipe.title} (${copySuffix})`;
|
||||
const notes = recipe.notes || null;
|
||||
const recipe_url = recipe.recipe_url || null;
|
||||
const ingredients = (recipe.ingredients || []).map((ing) => ({
|
||||
name: ing.name,
|
||||
quantity: ing.quantity || null,
|
||||
category: ing.category || DEFAULT_CATEGORY_NAME,
|
||||
}));
|
||||
|
||||
try {
|
||||
await api.post('/recipes', { title, notes, recipe_url, ingredients });
|
||||
await loadRecipes();
|
||||
renderRecipeList();
|
||||
window.oikos?.showToast(t('recipes.duplicated'), 'success');
|
||||
} catch (err) {
|
||||
window.oikos?.showToast(err.data?.error ?? t('common.errorGeneric'), 'error');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user