-
-
+
![]()
-
+
+
-
+
-
+
-
-
-
+
+
-
+
+
-
-
-
- 1
-
-
-
+
+
+
-
-
+
+
+
-
+
@@ -104,13 +132,12 @@ function populateDetail(recipeId) {
const tagsHtml = [];
for (const slotId of recipe.allowedSlots) {
const label = slotLabelMap[slotId];
- if (label) tagsHtml.push(`${escapeHtml(label)}`);
+ if (label) tagsHtml.push(renderTagChip(label));
}
for (const tag of (recipe.tags || [])) {
- tagsHtml.push(`${escapeHtml(tag)}`);
+ tagsHtml.push(renderTagChip(tag));
}
document.getElementById('rd-tags').innerHTML = tagsHtml.join('');
- document.getElementById('rd-servings').textContent = '1';
renderIngredients(recipe);
renderSteps(recipe);
@@ -118,11 +145,9 @@ function populateDetail(recipeId) {
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');
+ setTabButtonState(b, false);
});
- tabBtns[0]?.classList.remove('text-gray-500', 'border-transparent', 'font-medium');
- tabBtns[0]?.classList.add('text-gray-900', 'border-gray-900', 'font-semibold');
+ setTabButtonState(tabBtns[0], true);
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');
@@ -155,6 +180,10 @@ function nutritionForAmount(ingredientId, amount, unit) {
};
}
+function fmtAmt(n) {
+ return Number.isInteger(n) ? String(n) : String(parseFloat(n.toFixed(1)));
+}
+
/* ── ingredients tab with inline nutrition + summary ───── */
function computeEffectiveNutritionTotals(recipe) {
@@ -178,58 +207,42 @@ function computeEffectiveNutritionTotals(recipe) {
}
function renderNutritionSummary(recipe) {
- const s = currentServings;
const total = computeEffectiveNutritionTotals(recipe);
return `
-
- ${s > 1 ? `
Wartości dla ${s} porcji
` : ''} -
-
- ${total.kcal}
- Kalorie
+
+
+
`;
-}
-
-function renderIngredientCard(name, amount, unit, nutrition, extra) {
- const displayAmount = Number.isInteger(amount) ? amount : parseFloat(amount.toFixed(1));
- const macroHtml = nutrition
- ? `
+
-
+
Wartości odżywcze
+
+
+
+
+
+
+ ${total.kcal}kcal
+ ${total.protein}gBiałko
+ ${total.carbs}gWęgle
+ ${total.fat}gTłuszcze
+
- ${total.protein} g
- Białko
+
-
+
-
+
Porcje
+
+
+
+
+ ${currentServings}
+
+
+
- ${total.carbs} g
- Węglo.
-
-
- ${total.fat} g
- Tłuszcze
-
-
- ${nutrition.protein}g B${nutrition.fat}g T${nutrition.carbs}g W
-
`
- : '';
- const kcalHtml = nutrition
- ? `${nutrition.kcal} kcal`
- : '';
-
- return `
-
-
`;
}
@@ -245,21 +258,24 @@ function renderIngredients(recipe) {
const effectiveDef = INGREDIENTS[effectiveId];
const effectiveName = effectiveDef?.name || effectiveId;
const scaledAmount = ing.amount * currentServings;
- const nutrition = nutritionForAmount(effectiveId, scaledAmount, ing.unit);
- const isSwapped = effectiveId !== origId;
const isExpanded = expandedAlternatives.has(origId);
+ const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:none !important; border:none !important;';
const toggleBtn = hasAlts
- ? ``
+ ? ``
: '';
- const cardBorder = isSwapped ? 'border-amber-200' : 'border-gray-200';
- const cardCls = isSwapped ? 'bg-amber-50/30' : 'bg-white';
- const cardHtml = renderIngredientCard(effectiveName, scaledAmount, ing.unit, nutrition, {
- suffix: toggleBtn,
- border: cardBorder,
- cls: cardCls,
- });
+ let rowHtml = `
-
-
- ${extra?.prefix || ''}
- ${escapeHtml(name)}
- ${extra?.suffix || ''}
-
- ${macroHtml}
- ${extra?.badge || ''}
-
- ${displayAmount} ${escapeHtml(unit)}
- ${kcalHtml}
`;
+ rowHtml += '${rowHtml} `;
}).join('');
container.innerHTML = `
${renderNutritionSummary(recipe)}
-
';
+ rowHtml += `
';
let altListHtml = '';
if (hasAlts && isExpanded) {
@@ -268,32 +284,46 @@ function renderIngredients(recipe) {
const def = INGREDIENTS[altId];
const altName = def?.name || altId;
const isSelected = effectiveId === altId;
- const isOriginal = altId === origId;
const altNutrition = nutritionForAmount(altId, scaledAmount, ing.unit);
+ const checkbox = `
+
+ ${isSelected ? '' : ''}
+ `;
+ const nutritionLine = altNutrition
+ ? `${escapeHtml(effectiveName)}
`;
+ rowHtml += '';
+ rowHtml += toggleBtn;
+ rowHtml += `
';
+ rowHtml += '
+ ${fmtAmt(scaledAmount)}
+ ${escapeHtml(ing.unit)}
+
`;
+ rowHtml += '${altNutrition.kcal} kcal · ${altNutrition.protein}g B · ${altNutrition.fat}g T · ${altNutrition.carbs}g W
`
+ : '';
- const radioDot = `${isSelected ? '' : ''}
`;
- const defaultTag = isOriginal ? `Domyślny` : '';
-
- return renderIngredientCard(altName, scaledAmount, ing.unit, altNutrition, {
- cls: isSelected ? 'bg-gray-50' : 'bg-white hover:bg-gray-50 cursor-pointer',
- border: isSelected ? 'border-gray-900 ring-1 ring-gray-900' : 'border-gray-100',
- prefix: radioDot,
- badge: defaultTag,
- dataAttrs: `data-original-id="${escapeHtml(origId)}" data-alt-id="${escapeHtml(altId)}"`,
- });
+ return ``;
});
altListHtml = `
-
+ ${cardHtml}${altListHtml} `;
+ rowHtml += altListHtml;
+ rowHtml += '
';
+ return `
${optionCards.join('')}
`;
}
- return `- ${rows}
- ${rows}
Brak kroków przygotowania.
'; + container.innerHTML = `Brak kroków przygotowania.
`; return; } container.innerHTML = ` -
+
${steps.map((step, i) => `
-
-
+
`;
}
@@ -364,36 +394,12 @@ export function setupRecipeDetail() {
}
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');
+ setTabButtonState(b, false);
});
- btn.classList.remove('text-gray-500', 'border-transparent', 'font-medium');
- btn.classList.add('text-gray-900', 'border-gray-900', 'font-semibold');
+ setTabButtonState(btn, true);
});
});
- 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 — delegate to MealPlanEditor ─────── */
document.getElementById('rd-add-to-planner-btn')?.addEventListener('click', () => {
${i + 1}
- ${escapeHtml(step)}
+
`).join('')}
${i + 1}
+ ${escapeHtml(step)}