Add recipe mockup

2026-03-20 21:29:38 +01:00
parent 6e0d650f54
commit c4d2e74703
9 changed files with 1062 additions and 0 deletions
--- a/stacks/recipe/js/app.js
+++ b/stacks/recipe/js/app.js
@@ -0,0 +1,104 @@
+import { getRecipeListHTML } from './views/RecipeList.js';
+import { getFilterHTML, setupFilter } from './views/Filter.js';
+import { getRecipeDetailHTML, setupRecipeDetail } from './views/RecipeDetail.js';
+import { getMealPlannerHTML, setupMealPlanner } from './views/MealPlanner.js';
+
+function getBottomNavHTML() {
+    return `
+    <nav id="app-bottom-nav" class="absolute bottom-0 left-0 right-0 w-full bg-white border-t border-gray-200 flex justify-between px-4 py-3 pb-6 z-20" aria-label="Główna nawigacja">
+        <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab flex flex-col items-center gap-1 text-black min-w-[3.5rem]">
+            <i class="fas fa-book text-xl" aria-hidden="true"></i>
+            <span class="text-[11px] font-medium">Przepisy</span>
+        </button>
+        <button type="button" data-tab="planner" id="nav-planner" class="nav-tab flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700 min-w-[3.5rem]">
+            <i class="far fa-calendar-alt text-xl" aria-hidden="true"></i>
+            <span class="text-[11px] font-medium">Planer</span>
+        </button>
+        <button type="button" data-tab="shopping" class="nav-tab flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700 min-w-[3.5rem]" disabled title="Wkrótce">
+            <i class="fas fa-shopping-cart text-xl" aria-hidden="true"></i>
+            <span class="text-[11px] font-medium">Zakupy</span>
+        </button>
+        <button type="button" data-tab="pantry" class="nav-tab flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700 min-w-[3.5rem]" disabled title="Wkrótce">
+            <i class="fas fa-box text-xl" aria-hidden="true"></i>
+            <span class="text-[11px] font-medium">Zapasy</span>
+        </button>
+    </nav>
+    `;
+}
+
+function setupTabs() {
+    const main = document.getElementById('main-view');
+    const planner = document.getElementById('planner-view');
+    const nav = document.getElementById('app-bottom-nav');
+    if (!main || !planner || !nav) return;
+
+    const activeTab = 'nav-tab flex flex-col items-center gap-1 text-black min-w-[3.5rem]';
+    const idleTab = 'nav-tab flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700 min-w-[3.5rem]';
+
+    const apply = (tab) => {
+        const showRecipes = tab === 'recipes';
+        main.classList.toggle('hidden', !showRecipes);
+        planner.classList.toggle('hidden', showRecipes);
+
+        nav.querySelectorAll('.nav-tab[data-tab]').forEach((btn) => {
+            const id = btn.getAttribute('data-tab');
+            if (btn.hasAttribute('disabled')) return;
+            if (id === 'recipes' || id === 'planner') {
+                btn.className = id === tab ? activeTab : idleTab;
+            }
+        });
+    };
+
+    nav.addEventListener('click', (e) => {
+        const btn = e.target.closest('.nav-tab[data-tab]');
+        if (!btn || btn.hasAttribute('disabled')) return;
+        const tab = btn.getAttribute('data-tab');
+        if (tab === 'recipes' || tab === 'planner') apply(tab);
+    });
+
+    apply('recipes');
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const appContainer = document.getElementById('app-container');
+
+    appContainer.innerHTML = `
+        ${getRecipeListHTML()}
+        ${getMealPlannerHTML()}
+        ${getBottomNavHTML()}
+        ${getRecipeDetailHTML()}
+        ${getFilterHTML()}
+    `;
+
+    setupTabs();
+    setupMealPlanner();
+    setupFilter();
+    setupRecipeDetail();
+});
+
+// --- GLOBAL NAVIGATION METHODS ---
+window.openRecipeDetail = () => {
+    const view = document.getElementById('recipe-detail-view');
+    // Swap Tailwind classes to slide IN
+    view.classList.remove('translate-x-full', 'opacity-0', 'pointer-events-none');
+    view.classList.add('translate-x-0', 'opacity-100', 'pointer-events-auto');
+};
+
+window.closeRecipeDetail = () => {
+    const view = document.getElementById('recipe-detail-view');
+    // Swap Tailwind classes to slide OUT
+    view.classList.remove('translate-x-0', 'opacity-100', 'pointer-events-auto');
+    view.classList.add('translate-x-full', 'opacity-0', 'pointer-events-none');
+};
+
+window.openFilters = () => {
+    const fv = document.getElementById('filter-view');
+    fv.classList.remove('hidden');
+    fv.classList.add('flex');
+};
+
+window.closeFilters = () => {
+    const fv = document.getElementById('filter-view');
+    fv.classList.add('hidden');
+    fv.classList.remove('flex');
+};