diff --git a/js/views/RecipeDetail.js b/js/views/RecipeDetail.js index 3482329..d43ed9b 100644 --- a/js/views/RecipeDetail.js +++ b/js/views/RecipeDetail.js @@ -12,31 +12,32 @@ export function getRecipeDetailHTML() {
- Pancakes Hero Image + Zdjęcie: Serek z owocami
-

Fluffy Pancakes

+

Serek wiejski z orzechami i owocami

- Breakfast - Vegetarian + Śniadanie + Wegetariańskie + Słodkie
-
15 min
-
320 cal
+
5 min
+
642 kcal
- 2 + 1
@@ -45,34 +46,67 @@ export function getRecipeDetailHTML() {
- - - + + +
-
+
+
+ Zaznacz, by dodać do listy zakupów +
+
  • - All-purpose flour - 1 cup + Serek wiejski + 200 g
  • +
  • - Milk - 0.75 cup + Miód + 10 g
  • +
  • - Eggs - 1 large + Orzechy włoskie +
    + + 50 g +
    +
  • + +
  • +
    + Truskawki +
    + + 100 g +
    +
  • + +
  • +
    + Borówki ameryk. +
    + + 100 g +
@@ -80,36 +114,82 @@ export function getRecipeDetailHTML() {
1
-

Whisk the flour, sugar, baking powder, and salt together in a large bowl.

+

Przełóż serek wiejski do miseczki.

2
-

Create a well in the center and add milk, egg, and melted butter. Mix until just combined.

+

Dodaj miód i delikatnie wymieszaj.

+
+
+
3
+

Orzechy posiekaj na mniejsze kawałki i posyp nimi serek z miodem.

+
+
+
4
+

Umyj owoce (ew. pokrój na połówki) i ułóż na wierzchu. Gotowe!

+ + + +
+
+

Zmień składnik

+ +
+ +
+
+
+
`; } export function setupRecipeDetail() { - let currentServings = 2; - const defaultServings = 2; + let currentServings = 1; // Domślnie 1 porcja dla tego przepisu + const defaultServings = 1; + let currentlySwapping = null; + + // Dane do dynamicznego modala + const swapOptions = { + 'orzechy': [ + { name: 'Orzechy włoskie', hint: 'Bazowe', color: 'gray' }, + { name: 'Migdały', hint: '+ Białko', color: 'blue' }, + { name: 'Orzechy laskowe', hint: 'Klasyk', color: 'gray' }, + { name: 'Orzechy nerkowca', hint: 'Słodsze', color: 'gray' }, + { name: 'Orzechy pekan', hint: '+ Tłuszcz', color: 'green' } + ], + 'owoce1': [ + { name: 'Truskawki', hint: 'Bazowe', color: 'gray' }, + { name: 'Gruszka konferencja', hint: '+ Węgle', color: 'blue' }, + { name: 'Banany', hint: '+ Kalorie', color: 'green' } + ], + 'owoce2': [ + { name: 'Borówki ameryk.', hint: 'Bazowe', color: 'gray' }, + { name: 'Jagody leśne', hint: 'Sezonowe', color: 'blue' }, + { name: 'Maliny', hint: '- Kalorie', color: 'green' } + ] + }; window.switchTab = (tabId, clickedBtn) => { document.querySelectorAll('.tab-content').forEach(el => { @@ -149,9 +229,64 @@ export function setupRecipeDetail() { if (!isNaN(baseAmount)) { let newAmount = baseAmount * ratio; - newAmount = Number.isInteger(newAmount) ? newAmount : parseFloat(newAmount.toFixed(2)); + newAmount = Number.isInteger(newAmount) ? newAmount : parseFloat(newAmount.toFixed(1)); el.innerText = `${newAmount} ${unit}`; } }); }; + + window.openSwapModal = (type) => { + currentlySwapping = type; + + let title = ''; + if(type === 'orzechy') title = 'Orzechy'; + if(type === 'owoce1') title = 'Owoce bazy'; + if(type === 'owoce2') title = 'Dodatki owocowe'; + + document.getElementById('swap-title-target').innerText = title; + + // Wygeneruj opcje na podstawie słownika + const container = document.getElementById('swap-options-container'); + container.innerHTML = swapOptions[type].map(opt => { + let badgeClass = 'text-gray-600 bg-gray-200'; // Domyślny gray + if (opt.color === 'blue') badgeClass = 'text-blue-600 bg-blue-100'; + if (opt.color === 'green') badgeClass = 'text-green-600 bg-green-100'; + + return ` + + `; + }).join(''); + + const backdrop = document.getElementById('swap-backdrop'); + backdrop.classList.remove('hidden'); + setTimeout(() => backdrop.classList.remove('opacity-0'), 10); + + const modal = document.getElementById('swap-modal'); + modal.classList.remove('translate-y-full'); + modal.classList.add('translate-y-0'); + }; + + window.closeSwapModal = () => { + const backdrop = document.getElementById('swap-backdrop'); + backdrop.classList.add('opacity-0'); + setTimeout(() => backdrop.classList.add('hidden'), 300); + + const modal = document.getElementById('swap-modal'); + modal.classList.remove('translate-y-0'); + modal.classList.add('translate-y-full'); + }; + + window.confirmSwap = (newItemName) => { + if (currentlySwapping === 'orzechy') { + document.getElementById('ingredient-orzechy').innerText = newItemName; + } else if (currentlySwapping === 'owoce1') { + document.getElementById('ingredient-owoce1').innerText = newItemName; + } else if (currentlySwapping === 'owoce2') { + document.getElementById('ingredient-owoce2').innerText = newItemName; + } + closeSwapModal(); + }; } \ No newline at end of file