Another version of RecipeDetail
All checks were successful
Build and Deploy / build-and-push (push) Successful in 25s
All checks were successful
Build and Deploy / build-and-push (push) Successful in 25s
This commit is contained in:
716
js/views/RecipeDetailV2.js
Normal file
716
js/views/RecipeDetailV2.js
Normal file
@@ -0,0 +1,716 @@
|
||||
import { RECIPES, INGREDIENTS } from '../data/catalog.js';
|
||||
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
||||
import { addDays, addMonths, sameDay, sameMonth, startOfDay, startOfMonth, startOfWeekMonday } from '../services/dateUtils.js';
|
||||
import { dateKey, loadPlans, newPlanEntryId, savePlans } from '../services/planStore.js';
|
||||
import { showAppToast } from '../ui/toast.js';
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"');
|
||||
}
|
||||
|
||||
const slotLabelMap = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
|
||||
const MONTHS_LONG = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'];
|
||||
const WEEKDAYS_SHORT = ['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'Nd'];
|
||||
|
||||
export function getRecipeDetailHTML() {
|
||||
return `
|
||||
<div id="recipe-detail-view" class="absolute inset-0 bg-white z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden">
|
||||
<div class="absolute top-0 w-full p-3.5 flex justify-between z-40 mt-3">
|
||||
<button onclick="closeRecipeDetail()" class="w-9 h-9 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-800 hover:bg-white transition-colors">
|
||||
<i class="fas fa-arrow-left text-[13px]"></i>
|
||||
</button>
|
||||
<button id="rd-add-to-planner-btn" class="h-9 px-3 bg-white/90 backdrop-blur rounded-full flex items-center justify-center gap-1.5 shadow-sm text-gray-800 hover:bg-white transition-colors text-[12px] font-semibold">
|
||||
<i class="fas fa-calendar-plus text-[11px]"></i> Zaplanuj
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="rd-planner-picker" class="absolute inset-0 z-50 bg-black/45 hidden flex items-end" style="pointer-events: none">
|
||||
<div id="rd-planner-sheet" class="w-full bg-white rounded-t-3xl shadow-lg p-5 pb-8 max-h-[85vh] overflow-y-auto" style="pointer-events: auto; transform: translateY(100%); transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1)">
|
||||
<div class="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-4"></div>
|
||||
<h3 class="text-[15px] font-bold text-gray-900 mb-1">Zaplanuj</h3>
|
||||
<p id="rd-planner-recipe-name" class="text-[11px] text-gray-500 mb-3"></p>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center gap-1 mb-2">
|
||||
<button id="rd-cal-prev" type="button" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"><i class="fas fa-chevron-left text-xs"></i></button>
|
||||
<p id="rd-cal-title" class="flex-1 min-w-0 text-xs font-medium text-gray-900 text-center tabular-nums leading-none px-1 truncate"></p>
|
||||
<button id="rd-cal-next" type="button" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"><i class="fas fa-chevron-right text-xs"></i></button>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mb-2">
|
||||
<button id="rd-cal-today" type="button" class="h-6 shrink-0 inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-2.5 text-[10px] font-semibold text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 transition-colors hidden">
|
||||
<i class="fas fa-calendar-day text-[9px] opacity-70"></i> Dziś
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-0.5 text-center text-[9px] font-medium text-gray-400 uppercase tracking-wide mb-0.5 leading-none">
|
||||
${WEEKDAYS_SHORT.map((d) => `<div>${d}</div>`).join('')}
|
||||
</div>
|
||||
<div id="rd-cal-grid" class="grid grid-cols-7 gap-0.5"></div>
|
||||
<button id="rd-cal-toggle" type="button" class="w-full flex items-center justify-center py-1 mt-1 text-gray-400 hover:text-gray-600 transition-colors">
|
||||
<i id="rd-cal-toggle-icon" class="fas fa-chevron-down text-[10px]"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Pora posiłku</p>
|
||||
<div id="rd-planner-slots" class="flex flex-wrap gap-1.5 mb-4"></div>
|
||||
|
||||
<div id="rd-planner-variant" class="mb-4 hidden">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wymienne składniki</p>
|
||||
<div id="rd-planner-variant-options"></div>
|
||||
</div>
|
||||
<button id="rd-planner-confirm" type="button" class="w-full bg-gray-900 hover:bg-black text-white py-3 rounded-xl font-semibold text-[13px] transition-colors flex items-center justify-center gap-2">
|
||||
<i class="fas fa-check text-xs"></i> Dodaj
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="rd-hero" class="h-[220px] shrink-0 w-full bg-[#d4d4d4] flex items-center justify-center relative">
|
||||
<span id="rd-hero-label" class="text-white font-medium text-[15px]"></span>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-t-3xl -mt-6 relative z-30 pt-6 flex flex-col flex-1 overflow-hidden">
|
||||
<div class="mb-3 px-5 shrink-0">
|
||||
<div class="flex justify-between items-start mb-2.5">
|
||||
<h1 id="rd-title" class="text-xl font-bold text-gray-900"></h1>
|
||||
</div>
|
||||
<div id="rd-tags" class="flex flex-wrap gap-1.5 mb-3"></div>
|
||||
<div class="flex justify-between items-center text-[13px] text-gray-600 font-medium">
|
||||
<div class="flex gap-3.5">
|
||||
<div class="flex items-center gap-1.5"><i class="fas fa-clock text-gray-400 text-xs"></i><span id="rd-time"></span></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-0.5 bg-gray-100 p-0.5 rounded-lg">
|
||||
<button id="rd-serv-minus" class="w-6 h-6 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-minus text-[9px]"></i></button>
|
||||
<div class="flex items-center gap-1 px-1.5">
|
||||
<span id="rd-servings" class="font-bold text-gray-900 text-[13px] w-3 text-center tabular-nums">1</span>
|
||||
<span class="text-[11px] text-gray-500"><i class="fas fa-user-friends"></i></span>
|
||||
</div>
|
||||
<button id="rd-serv-plus" class="w-6 h-6 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-plus text-[9px]"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex border-b border-gray-200 mb-2 px-5 shrink-0">
|
||||
<button class="flex-1 pb-2.5 text-[13px] font-semibold text-gray-900 border-b-2 border-gray-900 rd-tab-btn" data-rd-tab="ingredients">Składniki</button>
|
||||
<button class="flex-1 pb-2.5 text-[13px] font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 rd-tab-btn" data-rd-tab="steps">Kroki</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto px-5 pt-2 pb-10 no-scrollbar relative">
|
||||
<div id="rd-tab-ingredients" class="rd-tab-content block animate-fade-in"></div>
|
||||
<div id="rd-tab-steps" class="rd-tab-content hidden animate-fade-in"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/* ── state ─────────────────────────────────────────────── */
|
||||
|
||||
let currentRecipeId = null;
|
||||
let currentServings = 1;
|
||||
let currentSubstitutions = {};
|
||||
let expandedAlternatives = new Set();
|
||||
|
||||
function getEffectiveIngredientId(originalId) {
|
||||
return currentSubstitutions[originalId] || originalId;
|
||||
}
|
||||
|
||||
/* ── populate ──────────────────────────────────────────── */
|
||||
|
||||
function populateDetail(recipeId) {
|
||||
const recipe = RECIPES[recipeId];
|
||||
if (!recipe) return;
|
||||
|
||||
currentRecipeId = recipeId;
|
||||
currentServings = 1;
|
||||
currentSubstitutions = {};
|
||||
expandedAlternatives.clear();
|
||||
|
||||
document.getElementById('rd-hero-label').textContent = `Zdjęcie: ${recipe.title}`;
|
||||
document.getElementById('rd-title').textContent = recipe.title;
|
||||
document.getElementById('rd-time').textContent = `${recipe.minutes} min`;
|
||||
updateKcalDisplay();
|
||||
|
||||
const tagsHtml = [];
|
||||
for (const slotId of recipe.allowedSlots) {
|
||||
const label = slotLabelMap[slotId];
|
||||
if (label) tagsHtml.push(`<span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">${escapeHtml(label)}</span>`);
|
||||
}
|
||||
for (const tag of (recipe.tags || [])) {
|
||||
tagsHtml.push(`<span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">${escapeHtml(tag)}</span>`);
|
||||
}
|
||||
document.getElementById('rd-tags').innerHTML = tagsHtml.join('');
|
||||
document.getElementById('rd-servings').textContent = '1';
|
||||
|
||||
renderIngredients(recipe);
|
||||
renderSteps(recipe);
|
||||
|
||||
const tabBtns = document.querySelectorAll('.rd-tab-btn');
|
||||
const tabs = document.querySelectorAll('.rd-tab-content');
|
||||
tabBtns.forEach((b) => {
|
||||
b.classList.remove('text-gray-900', 'border-gray-900', 'font-semibold');
|
||||
b.classList.add('text-gray-500', 'border-transparent', 'font-medium');
|
||||
});
|
||||
tabBtns[0]?.classList.remove('text-gray-500', 'border-transparent', 'font-medium');
|
||||
tabBtns[0]?.classList.add('text-gray-900', 'border-gray-900', 'font-semibold');
|
||||
tabs.forEach((t) => { t.classList.add('hidden'); t.classList.remove('block'); });
|
||||
document.getElementById('rd-tab-ingredients')?.classList.remove('hidden');
|
||||
document.getElementById('rd-tab-ingredients')?.classList.add('block');
|
||||
}
|
||||
|
||||
/* ── helpers ───────────────────────────────────────────── */
|
||||
|
||||
function updateKcalDisplay() {
|
||||
const el = document.getElementById('rd-kcal');
|
||||
if (!el) return;
|
||||
const recipe = RECIPES[currentRecipeId];
|
||||
if (!recipe) return;
|
||||
const kcal = Math.round(recipe.nutritionPerServing.kcal * currentServings);
|
||||
el.textContent = `${kcal} kcal`;
|
||||
}
|
||||
|
||||
function nutritionForAmount(ingredientId, amount) {
|
||||
const def = INGREDIENTS[ingredientId];
|
||||
if (!def?.nutritionPer100g) return null;
|
||||
const f = amount / 100;
|
||||
return {
|
||||
kcal: Math.round(def.nutritionPer100g.kcal * f),
|
||||
protein: Math.round(def.nutritionPer100g.protein * f * 10) / 10,
|
||||
fat: Math.round(def.nutritionPer100g.fat * f * 10) / 10,
|
||||
carbs: Math.round(def.nutritionPer100g.carbs * f * 10) / 10,
|
||||
};
|
||||
}
|
||||
|
||||
function renderNutritionLine(nutrition) {
|
||||
if (!nutrition) return '';
|
||||
return `<div class="text-[10px] text-gray-500 mt-1 flex flex-wrap gap-x-3 gap-y-0.5"><span>${nutrition.kcal} kcal</span><span>${nutrition.protein}g białko</span><span>${nutrition.fat}g tłuszcz</span><span>${nutrition.carbs}g węgle</span></div>`;
|
||||
}
|
||||
|
||||
/* ── ingredients tab with inline nutrition + summary ───── */
|
||||
|
||||
function computeIngredientNutritionTotals(recipe) {
|
||||
let kcal = 0, protein = 0, fat = 0, carbs = 0;
|
||||
for (const ing of recipe.ingredients) {
|
||||
const n = nutritionForAmount(ing.ingredientId, ing.amount * currentServings);
|
||||
if (n) {
|
||||
kcal += n.kcal;
|
||||
protein += n.protein;
|
||||
fat += n.fat;
|
||||
carbs += n.carbs;
|
||||
}
|
||||
}
|
||||
return {
|
||||
kcal: Math.round(kcal),
|
||||
protein: Math.round(protein * 10) / 10,
|
||||
fat: Math.round(fat * 10) / 10,
|
||||
carbs: Math.round(carbs * 10) / 10,
|
||||
};
|
||||
}
|
||||
|
||||
function renderNutritionSummary(recipe) {
|
||||
const n = recipe.nutritionPerServing;
|
||||
const s = currentServings;
|
||||
const total = {
|
||||
kcal: Math.round(n.kcal * s * 10) / 10,
|
||||
protein: Math.round(n.protein * s * 10) / 10,
|
||||
fat: Math.round(n.fat * s * 10) / 10,
|
||||
carbs: Math.round(n.carbs * s * 10) / 10,
|
||||
};
|
||||
|
||||
return `
|
||||
<div class="mb-4 pt-1 pb-3 border-b border-gray-100">
|
||||
${s > 1 ? `<p class="text-[10px] text-gray-400 font-medium mb-2">Wartości dla ${s} porcji</p>` : ''}
|
||||
<div class="grid grid-cols-4 gap-3 text-center">
|
||||
<div>
|
||||
<span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.kcal}</span>
|
||||
<span class="text-[10px] text-gray-500">Kalorie</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.protein} g</span>
|
||||
<span class="text-[10px] text-gray-500">Białko</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.carbs} g</span>
|
||||
<span class="text-[10px] text-gray-500">Węglo.</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.fat} g</span>
|
||||
<span class="text-[10px] text-gray-500">Tłuszcze</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderIngredientCard(name, amount, unit, nutrition, extra) {
|
||||
const displayAmount = Number.isInteger(amount) ? amount : parseFloat(amount.toFixed(1));
|
||||
const macroHtml = nutrition
|
||||
? `<div class="flex flex-wrap gap-x-2.5 text-[10px] text-gray-400 tabular-nums">
|
||||
<span>${nutrition.protein}g B</span><span>${nutrition.fat}g T</span><span>${nutrition.carbs}g W</span>
|
||||
</div>`
|
||||
: '';
|
||||
const kcalHtml = nutrition
|
||||
? `<span class="text-[10px] font-medium text-gray-400 tabular-nums whitespace-nowrap">${nutrition.kcal} kcal</span>`
|
||||
: '';
|
||||
|
||||
return `
|
||||
<div class="${extra?.cls || 'bg-white'} rounded-xl p-2.5 border ${extra?.border || 'border-gray-200'} flex items-center gap-2.5">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
${extra?.prefix || ''}
|
||||
<span class="text-[12px] font-semibold text-gray-900 truncate">${escapeHtml(name)}</span>
|
||||
${extra?.suffix || ''}
|
||||
</div>
|
||||
${macroHtml}
|
||||
${extra?.badge || ''}
|
||||
</div>
|
||||
<div class="flex flex-col items-end shrink-0 gap-0.5">
|
||||
<span class="text-[12px] font-semibold text-gray-900 tabular-nums whitespace-nowrap">${displayAmount} ${escapeHtml(unit)}</span>
|
||||
${kcalHtml}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderIngredients(recipe) {
|
||||
const container = document.getElementById('rd-tab-ingredients');
|
||||
if (!container) return;
|
||||
|
||||
const rows = recipe.ingredients.map((ing) => {
|
||||
const def = INGREDIENTS[ing.ingredientId];
|
||||
const name = def?.name || ing.ingredientId;
|
||||
const scaledAmount = ing.amount * currentServings;
|
||||
const nutrition = nutritionForAmount(ing.ingredientId, scaledAmount);
|
||||
|
||||
const hasAlts = ing.alternatives && ing.alternatives.length > 0;
|
||||
const isExpanded = expandedAlternatives.has(ing.ingredientId);
|
||||
|
||||
const toggleBtn = hasAlts
|
||||
? `<button type="button" class="rd-alt-toggle shrink-0 w-5 h-5 rounded-full ${isExpanded ? 'bg-amber-50 text-amber-500' : 'bg-gray-100 text-gray-400 hover:bg-gray-200'} flex items-center justify-center transition-colors" data-original-id="${escapeHtml(ing.ingredientId)}"><i class="fas fa-shuffle text-[8px]"></i></button>`
|
||||
: '';
|
||||
|
||||
const cardHtml = renderIngredientCard(name, scaledAmount, ing.unit, nutrition, { suffix: toggleBtn });
|
||||
|
||||
let altListHtml = '';
|
||||
if (hasAlts) {
|
||||
const altCards = ing.alternatives.map((altId) => {
|
||||
const altDef = INGREDIENTS[altId];
|
||||
const altName = altDef?.name || altId;
|
||||
const altNutrition = nutritionForAmount(altId, scaledAmount);
|
||||
return renderIngredientCard(altName, scaledAmount, ing.unit, altNutrition, {
|
||||
cls: 'bg-gray-50',
|
||||
border: 'border-gray-100',
|
||||
});
|
||||
});
|
||||
altListHtml = `
|
||||
<div class="rd-alt-list ${isExpanded ? '' : 'hidden'} mt-1.5 space-y-1.5" data-original-id="${escapeHtml(ing.ingredientId)}">
|
||||
<p class="text-[10px] text-gray-400 font-medium mb-1 pl-1">Można zamienić na:</p>
|
||||
${altCards.join('')}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
return `<li>${cardHtml}${altListHtml}</li>`;
|
||||
}).join('');
|
||||
|
||||
container.innerHTML = `
|
||||
${renderNutritionSummary(recipe)}
|
||||
<ul class="space-y-2" id="rd-ingredient-list">${rows}</ul>`;
|
||||
|
||||
container.querySelectorAll('.rd-alt-toggle').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const origId = btn.dataset.originalId;
|
||||
if (expandedAlternatives.has(origId)) {
|
||||
expandedAlternatives.delete(origId);
|
||||
} else {
|
||||
expandedAlternatives.add(origId);
|
||||
}
|
||||
const list = container.querySelector(`.rd-alt-list[data-original-id="${origId}"]`);
|
||||
if (list) list.classList.toggle('hidden');
|
||||
btn.classList.toggle('bg-gray-100');
|
||||
btn.classList.toggle('text-gray-400');
|
||||
btn.classList.toggle('bg-amber-50');
|
||||
btn.classList.toggle('text-amber-500');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ── steps tab ─────────────────────────────────────────── */
|
||||
|
||||
function renderSteps(recipe) {
|
||||
const container = document.getElementById('rd-tab-steps');
|
||||
if (!container) return;
|
||||
|
||||
const steps = recipe.steps || [];
|
||||
if (steps.length === 0) {
|
||||
container.innerHTML = '<p class="text-sm text-gray-500 text-center py-8">Brak kroków przygotowania.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="space-y-5 pb-5">
|
||||
${steps.map((step, i) => `
|
||||
<div class="flex gap-3">
|
||||
<div class="w-6 h-6 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] font-bold shrink-0 shadow-sm">${i + 1}</div>
|
||||
<div class="pt-0.5"><p class="text-[13px] text-gray-600 leading-relaxed">${escapeHtml(step)}</p></div>
|
||||
</div>`).join('')}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/* ── setup ─────────────────────────────────────────────── */
|
||||
|
||||
export function setupRecipeDetail() {
|
||||
document.querySelectorAll('.rd-tab-btn').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const tabId = btn.dataset.rdTab;
|
||||
document.querySelectorAll('.rd-tab-content').forEach((el) => {
|
||||
el.classList.add('hidden');
|
||||
el.classList.remove('block');
|
||||
});
|
||||
const target = document.getElementById(`rd-tab-${tabId}`);
|
||||
if (target) {
|
||||
target.classList.remove('hidden');
|
||||
target.classList.add('block');
|
||||
target.parentElement.scrollTop = 0;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.rd-tab-btn').forEach((b) => {
|
||||
b.classList.remove('text-gray-900', 'border-gray-900', 'font-semibold');
|
||||
b.classList.add('text-gray-500', 'border-transparent', 'font-medium');
|
||||
});
|
||||
btn.classList.remove('text-gray-500', 'border-transparent', 'font-medium');
|
||||
btn.classList.add('text-gray-900', 'border-gray-900', 'font-semibold');
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('rd-serv-minus')?.addEventListener('click', () => {
|
||||
if (currentServings <= 1) return;
|
||||
currentServings--;
|
||||
document.getElementById('rd-servings').textContent = currentServings;
|
||||
const recipe = RECIPES[currentRecipeId];
|
||||
if (recipe) {
|
||||
renderIngredients(recipe);
|
||||
updateKcalDisplay();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('rd-serv-plus')?.addEventListener('click', () => {
|
||||
if (currentServings >= 12) return;
|
||||
currentServings++;
|
||||
document.getElementById('rd-servings').textContent = currentServings;
|
||||
const recipe = RECIPES[currentRecipeId];
|
||||
if (recipe) {
|
||||
renderIngredients(recipe);
|
||||
updateKcalDisplay();
|
||||
}
|
||||
});
|
||||
|
||||
/* ── planner picker ──────────────────────────────── */
|
||||
|
||||
let plannerPickerDay = null;
|
||||
let plannerPickerSlot = null;
|
||||
let calViewDate = null;
|
||||
let calExpanded = false;
|
||||
|
||||
const plannerOverlay = document.getElementById('rd-planner-picker');
|
||||
const plannerSheet = document.getElementById('rd-planner-sheet');
|
||||
|
||||
function renderCalendarCell(d, today, activeMonth) {
|
||||
const isToday = sameDay(d, today);
|
||||
const isSelected = plannerPickerDay && sameDay(d, plannerPickerDay);
|
||||
const isOtherMonth = d.getMonth() !== activeMonth;
|
||||
const isPast = d.getTime() < today.getTime();
|
||||
|
||||
let cls = 'flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors w-full min-h-10 py-1 gap-0.5 leading-tight ';
|
||||
|
||||
if (isSelected) {
|
||||
cls += 'bg-gray-900 text-white ';
|
||||
} else if (isPast) {
|
||||
cls += 'text-gray-300 ';
|
||||
} else if (isOtherMonth) {
|
||||
cls += 'text-gray-300 ';
|
||||
} else {
|
||||
cls += 'text-gray-800 hover:bg-gray-100 ';
|
||||
}
|
||||
|
||||
if (isToday && !isSelected && !isPast) {
|
||||
cls += 'ring-1 ring-inset ring-gray-900 ';
|
||||
}
|
||||
|
||||
const inner = `<span>${d.getDate()}</span><span class="w-1 h-1"></span>`;
|
||||
|
||||
if (isPast && !isSelected) {
|
||||
return `<div class="${cls}">${inner}</div>`;
|
||||
}
|
||||
|
||||
return `<button type="button" class="rd-cal-day ${cls}" data-ts="${d.getTime()}">${inner}</button>`;
|
||||
}
|
||||
|
||||
function renderPlannerCalendar() {
|
||||
const grid = document.getElementById('rd-cal-grid');
|
||||
const titleEl = document.getElementById('rd-cal-title');
|
||||
const todayBtn = document.getElementById('rd-cal-today');
|
||||
const toggleIcon = document.getElementById('rd-cal-toggle-icon');
|
||||
if (!grid || !titleEl) return;
|
||||
|
||||
const today = startOfDay(new Date());
|
||||
|
||||
if (calExpanded) {
|
||||
const ms = startOfMonth(calViewDate);
|
||||
titleEl.textContent = `${MONTHS_LONG[ms.getMonth()]} ${ms.getFullYear()}`;
|
||||
toggleIcon.className = 'fas fa-chevron-up text-[10px]';
|
||||
|
||||
const firstCell = startOfWeekMonday(ms);
|
||||
const cells = [];
|
||||
let d = new Date(firstCell);
|
||||
for (let i = 0; i < 42; i++) {
|
||||
cells.push(new Date(d));
|
||||
d = addDays(d, 1);
|
||||
}
|
||||
while (cells.length > 7) {
|
||||
const last7 = cells.slice(-7);
|
||||
if (last7.every((c) => c.getMonth() !== ms.getMonth())) cells.splice(-7);
|
||||
else break;
|
||||
}
|
||||
|
||||
grid.innerHTML = cells.map((c) => renderCalendarCell(c, today, ms.getMonth())).join('');
|
||||
todayBtn.classList.toggle('hidden', sameMonth(today, calViewDate));
|
||||
} else {
|
||||
const ws = startOfWeekMonday(calViewDate);
|
||||
titleEl.textContent = `${MONTHS_LONG[calViewDate.getMonth()]} ${calViewDate.getFullYear()}`;
|
||||
toggleIcon.className = 'fas fa-chevron-down text-[10px]';
|
||||
|
||||
const cells = [];
|
||||
for (let i = 0; i < 7; i++) cells.push(addDays(ws, i));
|
||||
grid.innerHTML = cells.map((c) => renderCalendarCell(c, today, calViewDate.getMonth())).join('');
|
||||
|
||||
const todayWs = startOfWeekMonday(today);
|
||||
todayBtn.classList.toggle('hidden', sameDay(ws, todayWs));
|
||||
}
|
||||
|
||||
grid.querySelectorAll('.rd-cal-day').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
plannerPickerDay = new Date(Number(btn.dataset.ts));
|
||||
calViewDate = new Date(plannerPickerDay);
|
||||
renderPlannerCalendar();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('rd-cal-prev')?.addEventListener('click', () => {
|
||||
calViewDate = calExpanded ? addMonths(calViewDate, -1) : addDays(calViewDate, -7);
|
||||
renderPlannerCalendar();
|
||||
});
|
||||
document.getElementById('rd-cal-next')?.addEventListener('click', () => {
|
||||
calViewDate = calExpanded ? addMonths(calViewDate, 1) : addDays(calViewDate, 7);
|
||||
renderPlannerCalendar();
|
||||
});
|
||||
document.getElementById('rd-cal-today')?.addEventListener('click', () => {
|
||||
const today = startOfDay(new Date());
|
||||
plannerPickerDay = today;
|
||||
calViewDate = today;
|
||||
renderPlannerCalendar();
|
||||
});
|
||||
document.getElementById('rd-cal-toggle')?.addEventListener('click', () => {
|
||||
calExpanded = !calExpanded;
|
||||
renderPlannerCalendar();
|
||||
});
|
||||
|
||||
/* ── planner variant selection ────────────────────── */
|
||||
|
||||
const expandedVariantGroups = new Set();
|
||||
|
||||
function renderPlannerVariants(recipe) {
|
||||
const section = document.getElementById('rd-planner-variant');
|
||||
const container = document.getElementById('rd-planner-variant-options');
|
||||
if (!section || !container) return;
|
||||
|
||||
const altsIngredients = recipe.ingredients.filter((i) => i.alternatives?.length > 0);
|
||||
if (altsIngredients.length === 0) {
|
||||
section.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
section.classList.remove('hidden');
|
||||
|
||||
let html = '';
|
||||
for (const ing of altsIngredients) {
|
||||
const origId = ing.ingredientId;
|
||||
const scaledAmount = ing.amount * currentServings;
|
||||
const displayAmount = Number.isInteger(scaledAmount) ? scaledAmount : parseFloat(scaledAmount.toFixed(1));
|
||||
const effectiveId = getEffectiveIngredientId(origId);
|
||||
const effectiveDef = INGREDIENTS[effectiveId];
|
||||
const effectiveName = effectiveDef?.name || effectiveId;
|
||||
const isExpanded = expandedVariantGroups.has(origId);
|
||||
const isSwapped = effectiveId !== origId;
|
||||
|
||||
html += `<div class="mb-2 last:mb-0">
|
||||
<button type="button" class="rd-variant-toggle w-full flex items-center gap-2.5 p-2.5 rounded-xl border ${isSwapped ? 'border-amber-200 bg-amber-50/50' : 'border-gray-200 bg-white'} hover:border-gray-300 transition-colors text-left" data-original-id="${escapeHtml(origId)}">
|
||||
<i class="fas fa-shuffle text-[9px] ${isSwapped ? 'text-amber-500' : 'text-gray-400'}"></i>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[12px] font-semibold text-gray-900 truncate">${escapeHtml(effectiveName)}</span>
|
||||
<span class="text-[10px] text-gray-400 tabular-nums shrink-0">${displayAmount} ${escapeHtml(ing.unit)}</span>
|
||||
</div>
|
||||
${renderNutritionLine(nutritionForAmount(effectiveId, scaledAmount))}
|
||||
</div>
|
||||
<i class="fas fa-chevron-${isExpanded ? 'up' : 'down'} text-[9px] text-gray-400 shrink-0"></i>
|
||||
</button>`;
|
||||
|
||||
if (isExpanded) {
|
||||
const allOptions = [origId, ...ing.alternatives];
|
||||
html += '<div class="mt-1.5 space-y-1 pl-2">';
|
||||
for (const altId of allOptions) {
|
||||
const def = INGREDIENTS[altId];
|
||||
const altName = def?.name || altId;
|
||||
const isSelected = effectiveId === altId;
|
||||
const isOriginal = altId === origId;
|
||||
const nutrition = nutritionForAmount(altId, scaledAmount);
|
||||
|
||||
const selectedCls = isSelected
|
||||
? 'border-gray-900 bg-gray-50 ring-1 ring-gray-900'
|
||||
: 'border-gray-200 bg-white hover:border-gray-300';
|
||||
|
||||
let tag = '';
|
||||
if (isOriginal) tag = `<span class="text-[9px] px-1.5 py-0.5 rounded ${isSelected ? 'bg-gray-200 text-gray-600' : 'bg-gray-100 text-gray-400'} font-medium shrink-0">Domyślny</span>`;
|
||||
|
||||
html += `
|
||||
<button type="button" class="rd-variant-option w-full text-left p-2.5 rounded-lg border transition-all ${selectedCls}" data-original-id="${escapeHtml(origId)}" data-alt-id="${escapeHtml(altId)}">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-3.5 h-3.5 rounded-full border-2 shrink-0 ${isSelected ? 'border-gray-900' : 'border-gray-300'} flex items-center justify-center">
|
||||
${isSelected ? '<div class="w-1.5 h-1.5 rounded-full bg-gray-900"></div>' : ''}
|
||||
</div>
|
||||
<span class="text-[12px] font-semibold text-gray-900 truncate">${escapeHtml(altName)}</span>
|
||||
</div>
|
||||
${tag}
|
||||
</div>
|
||||
${renderNutritionLine(nutrition)}
|
||||
</button>`;
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
document.getElementById('rd-planner-variant-options')?.addEventListener('click', (e) => {
|
||||
const toggle = e.target.closest('.rd-variant-toggle');
|
||||
if (toggle) {
|
||||
const origId = toggle.dataset.originalId;
|
||||
if (expandedVariantGroups.has(origId)) expandedVariantGroups.delete(origId);
|
||||
else expandedVariantGroups.add(origId);
|
||||
const recipe = RECIPES[currentRecipeId];
|
||||
if (recipe) renderPlannerVariants(recipe);
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = e.target.closest('.rd-variant-option');
|
||||
if (!btn) return;
|
||||
const originalId = btn.dataset.originalId;
|
||||
const altId = btn.dataset.altId;
|
||||
if (altId === originalId) {
|
||||
delete currentSubstitutions[originalId];
|
||||
} else {
|
||||
currentSubstitutions[originalId] = altId;
|
||||
}
|
||||
expandedVariantGroups.delete(originalId);
|
||||
const recipe = RECIPES[currentRecipeId];
|
||||
if (recipe) renderPlannerVariants(recipe);
|
||||
});
|
||||
|
||||
function openPlannerPicker() {
|
||||
const recipe = RECIPES[currentRecipeId];
|
||||
if (!recipe) return;
|
||||
|
||||
document.getElementById('rd-planner-recipe-name').textContent = recipe.title;
|
||||
currentSubstitutions = {};
|
||||
expandedVariantGroups.clear();
|
||||
|
||||
const today = startOfDay(new Date());
|
||||
plannerPickerDay = today;
|
||||
calViewDate = today;
|
||||
calExpanded = false;
|
||||
renderPlannerCalendar();
|
||||
|
||||
renderPlannerVariants(recipe);
|
||||
|
||||
plannerPickerSlot = recipe.allowedSlots[0] || MEAL_SLOTS[0]?.id;
|
||||
const slotsContainer = document.getElementById('rd-planner-slots');
|
||||
slotsContainer.innerHTML = MEAL_SLOTS.filter((s) => recipe.allowedSlots.includes(s.id)).map((s) => {
|
||||
const sel = s.id === plannerPickerSlot;
|
||||
return `<button type="button" class="rd-plan-slot-btn px-3 py-1.5 rounded-lg border text-[12px] font-semibold transition-all ${sel ? 'border-gray-900 bg-gray-900 text-white' : 'border-gray-200 bg-gray-50 text-gray-700 hover:border-gray-400'}" data-slot-id="${s.id}">${escapeHtml(s.label)}</button>`;
|
||||
}).join('');
|
||||
|
||||
plannerOverlay.classList.remove('hidden');
|
||||
plannerOverlay.style.pointerEvents = 'auto';
|
||||
requestAnimationFrame(() => {
|
||||
plannerSheet.style.transform = 'translateY(0)';
|
||||
});
|
||||
}
|
||||
|
||||
function closePlannerPicker() {
|
||||
plannerSheet.style.transform = 'translateY(100%)';
|
||||
setTimeout(() => {
|
||||
plannerOverlay.classList.add('hidden');
|
||||
plannerOverlay.style.pointerEvents = 'none';
|
||||
}, 300);
|
||||
}
|
||||
|
||||
document.getElementById('rd-add-to-planner-btn')?.addEventListener('click', openPlannerPicker);
|
||||
|
||||
plannerOverlay?.addEventListener('click', (e) => {
|
||||
if (e.target === plannerOverlay) closePlannerPicker();
|
||||
});
|
||||
|
||||
document.getElementById('rd-planner-slots')?.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('.rd-plan-slot-btn');
|
||||
if (!btn) return;
|
||||
plannerPickerSlot = btn.getAttribute('data-slot-id');
|
||||
document.querySelectorAll('.rd-plan-slot-btn').forEach((b) => {
|
||||
b.classList.remove('border-gray-900', 'bg-gray-900', 'text-white');
|
||||
b.classList.add('border-gray-200', 'bg-gray-50', 'text-gray-700');
|
||||
});
|
||||
btn.classList.remove('border-gray-200', 'bg-gray-50', 'text-gray-700');
|
||||
btn.classList.add('border-gray-900', 'bg-gray-900', 'text-white');
|
||||
});
|
||||
|
||||
document.getElementById('rd-planner-confirm')?.addEventListener('click', () => {
|
||||
if (!currentRecipeId || !plannerPickerDay || !plannerPickerSlot) return;
|
||||
const plans = loadPlans();
|
||||
const key = dateKey(plannerPickerDay);
|
||||
if (!plans[key]) plans[key] = {};
|
||||
if (!plans[key][plannerPickerSlot]) plans[key][plannerPickerSlot] = [];
|
||||
|
||||
const entry = {
|
||||
id: newPlanEntryId(),
|
||||
recipeId: currentRecipeId,
|
||||
servings: currentServings,
|
||||
};
|
||||
if (Object.keys(currentSubstitutions).length > 0) {
|
||||
entry.substitutions = { ...currentSubstitutions };
|
||||
}
|
||||
|
||||
plans[key][plannerPickerSlot].push(entry);
|
||||
savePlans(plans);
|
||||
closePlannerPicker();
|
||||
showAppToast('Dodano do planera!');
|
||||
window.refreshPlanner?.();
|
||||
});
|
||||
|
||||
window.openRecipeDetail = (recipeId) => {
|
||||
if (!recipeId || !RECIPES[recipeId]) return;
|
||||
populateDetail(recipeId);
|
||||
const view = document.getElementById('recipe-detail-view');
|
||||
view.classList.remove('translate-x-full', 'opacity-0', 'pointer-events-none');
|
||||
view.classList.add('translate-x-0', 'opacity-100', 'pointer-events-auto');
|
||||
};
|
||||
|
||||
window.closeRecipeDetail = () => {
|
||||
closePlannerPicker();
|
||||
const view = document.getElementById('recipe-detail-view');
|
||||
view.classList.remove('translate-x-0', 'opacity-100', 'pointer-events-auto');
|
||||
view.classList.add('translate-x-full', 'opacity-0', 'pointer-events-none');
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user