ulfr/homelab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add pantry and shopping lists

Browse Source
This commit is contained in:
Rafał
2026-03-24 22:39:58 +01:00
parent 091e126744
commit 8672c8da28
13 changed files with 1800 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
stacks/recipe/js/app.js
View File

@@ -2,25 +2,35 @@ 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';
import { getPantryHTML, refreshPantry, setupPantry } from './views/Pantry.js';
import { getShoppingHTML, refreshShopping, setupShopping } from './views/Shopping.js';
function getAppToastHTML() {
return `
<div id="app-toast" class="pointer-events-none absolute left-4 right-4 bottom-28 z-[60] opacity-0 translate-y-2 transition-all duration-300" role="status">
<div class="rounded-xl bg-gray-900 text-white text-sm font-medium px-4 py-3 shadow-lg text-center" id="app-toast-text"></div>
</div>
`;
}
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>
<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-1 py-2.5 pb-6 z-20 gap-0" aria-label="Główna nawigacja">
<button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab flex flex-col items-center gap-0.5 text-black flex-1 min-w-0 max-w-[5.5rem]">
<i class="fas fa-book text-base" aria-hidden="true"></i>
<span class="text-[9px] font-medium leading-tight text-center">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 type="button" data-tab="planner" id="nav-planner" class="nav-tab flex flex-col items-center gap-0.5 text-gray-500 hover:text-gray-700 flex-1 min-w-0 max-w-[5.5rem]">
<i class="far fa-calendar-alt text-base" aria-hidden="true"></i>
<span class="text-[9px] font-medium leading-tight text-center">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 type="button" data-tab="pantry" id="nav-pantry" class="nav-tab flex flex-col items-center gap-0.5 text-gray-500 hover:text-gray-700 flex-1 min-w-0 max-w-[5.5rem]">
<i class="fas fa-warehouse text-base" aria-hidden="true"></i>
<span class="text-[9px] font-medium leading-tight text-center">Spiżarnia</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 type="button" data-tab="shopping" id="nav-shopping" class="nav-tab flex flex-col items-center gap-0.5 text-gray-500 hover:text-gray-700 flex-1 min-w-0 max-w-[5.5rem]">
<i class="fas fa-cart-shopping text-base" aria-hidden="true"></i>
<span class="text-[9px] font-medium leading-tight text-center">Zakupy</span>
</button>
</nav>
`;
@@ -29,21 +39,27 @@ function getBottomNavHTML() {
function setupTabs() {
const main = document.getElementById('main-view');
const planner = document.getElementById('planner-view');
const pantry = document.getElementById('pantry-view');
const shopping = document.getElementById('shopping-view');
const nav = document.getElementById('app-bottom-nav');
if (!main || !planner || !nav) return;
if (!main || !planner || !pantry || !shopping || !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 activeTab = 'nav-tab flex flex-col items-center gap-0.5 text-black flex-1 min-w-0 max-w-[5.5rem]';
const idleTab = 'nav-tab flex flex-col items-center gap-0.5 text-gray-500 hover:text-gray-700 flex-1 min-w-0 max-w-[5.5rem]';
const apply = (tab) => {
const showRecipes = tab === 'recipes';
main.classList.toggle('hidden', !showRecipes);
planner.classList.toggle('hidden', showRecipes);
main.classList.toggle('hidden', tab !== 'recipes');
planner.classList.toggle('hidden', tab !== 'planner');
pantry.classList.toggle('hidden', tab !== 'pantry');
shopping.classList.toggle('hidden', tab !== 'shopping');
if (tab === 'pantry') refreshPantry();
if (tab === 'shopping') refreshShopping();
nav.querySelectorAll('.nav-tab[data-tab]').forEach((btn) => {
const id = btn.getAttribute('data-tab');
if (btn.hasAttribute('disabled')) return;
if (id === 'recipes' || id === 'planner') {
if (id === 'recipes' || id === 'planner' || id === 'pantry' || id === 'shopping') {
btn.className = id === tab ? activeTab : idleTab;
}
});
@@ -53,10 +69,15 @@ function setupTabs() {
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);
if (tab === 'recipes' || tab === 'planner' || tab === 'pantry' || tab === 'shopping') apply(tab);
});
apply('recipes');
window.refreshStockViews = () => {
refreshPantry();
refreshShopping();
};
}
document.addEventListener('DOMContentLoaded', () => {
@@ -65,13 +86,18 @@ document.addEventListener('DOMContentLoaded', () => {
appContainer.innerHTML = `
${getRecipeListHTML()}
${getMealPlannerHTML()}
${getPantryHTML()}
${getShoppingHTML()}
${getBottomNavHTML()}
${getRecipeDetailHTML()}
${getFilterHTML()}
${getAppToastHTML()}
`;
setupTabs();
setupMealPlanner();
setupPantry();
setupShopping();
setupFilter();
setupRecipeDetail();
});
@@ -101,4 +127,4 @@ window.closeFilters = () => {
const fv = document.getElementById('filter-view');
fv.classList.add('hidden');
fv.classList.remove('flex');
};
};