Widok - koncept wyświetlania menu.

This commit is contained in:
2026-05-25 23:14:38 +02:00
parent 9e3f648625
commit 05dfe4c3a6
3 changed files with 941 additions and 503 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -665,19 +665,79 @@ window.switchTab = function (tabName) {
document.getElementById('navStatus').classList.remove('active');
document.getElementById('navMenu').classList.remove('active');
const header = document.getElementById('mainHeader');
const greetingBanner = document.getElementById('greetingBanner');
// 2. Nadaj .active wybranym elementom
if (tabName === 'status') {
const view = document.getElementById('statusView');
view.classList.remove('hidden');
view.classList.add('active');
document.getElementById('navStatus').classList.add('active');
if (header) header.style.display = '';
// Show greeting banner only if it was rendered initially or has content
if (greetingBanner && greetingBanner.innerHTML.trim() !== '') greetingBanner.style.display = '';
}
else if (tabName === 'menu') {
const view = document.getElementById('menuView');
view.classList.remove('hidden');
view.classList.add('active');
document.getElementById('navMenu').classList.add('active');
if (header) header.style.display = 'none';
if (greetingBanner) greetingBanner.style.display = 'none';
}
window.scrollTo(0, 0);
};
// --- MENU LOGIC ---
window.filterMenu = function() {
const query = document.getElementById('menuSearchInput').value.toLowerCase();
const categories = document.querySelectorAll('.rm-category');
categories.forEach(category => {
let hasVisibleItems = false;
const items = category.querySelectorAll('.rmc-position');
items.forEach(item => {
const title = item.querySelector('.rmc-title h4').textContent.toLowerCase();
if (title.includes(query)) {
item.style.display = '';
hasVisibleItems = true;
} else {
item.style.display = 'none';
}
});
if (hasVisibleItems) {
category.style.display = '';
} else {
category.style.display = 'none';
}
});
};
window.showCategory = function(categoryId) {
document.querySelectorAll('.menu-categories-nav a').forEach(a => a.classList.remove('active'));
const clickedLink = document.querySelector(`.menu-categories-nav a[data-category-badge="${categoryId}"]`);
if (clickedLink) {
clickedLink.classList.add('active');
clickedLink.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
}
const categories = document.querySelectorAll('.rm-category');
categories.forEach(cat => {
if (categoryId === 0) {
cat.style.display = '';
} else {
const catId = parseInt(cat.getAttribute('data-cat-id'), 10);
if (catId === categoryId) {
cat.style.display = '';
} else {
cat.style.display = 'none';
}
}
});
};
window.selectPayment = function (method) {

View File

@@ -24,7 +24,7 @@
</div>
<div class="container">
<header>
<header id="mainHeader">
<h1 class="logo-text">Karczma Biesiada</h1>
<div id="tableLabel" class="table-badge">Wybierz stolik</div>
</header>
@@ -80,13 +80,91 @@
</div> <!-- Koniec statusView -->
<div id="menuView" class="view-section hidden">
<section class="items-container" style="margin-top: 10px;">
<h3>Menu Restauracji</h3>
<div class="empty-state">
<div class="empty-icon">📖</div>
<p style="color: var(--text-muted)">Nasza wspaniała karta dań pojawi się tutaj niebawem.</p>
<div class="menu-search-container">
<input type="text" id="menuSearchInput" placeholder="Szukaj dania..." oninput="filterMenu()" />
</div>
<div class="restaurant-menu-container">
<nav class="menu-categories-nav">
<ul>
<li><a href="#" class="active" data-category-badge="0" onclick="showCategory(0)">Wszystko</a></li>
<li><a href="#" onclick="showCategory(1)" data-category-badge="1">Przystawki</a></li>
<li><a href="#" onclick="showCategory(2)" data-category-badge="2">Zupy</a></li>
<li><a href="#" onclick="showCategory(3)" data-category-badge="3">Dania główne</a></li>
<li><a href="#" onclick="showCategory(4)" data-category-badge="4">Dania swojskie</a></li>
<li><a href="#" onclick="showCategory(5)" data-category-badge="5">Ryby</a></li>
<li><a href="#" onclick="showCategory(7)" data-category-badge="7">Sałatki</a></li>
<li><a href="#" onclick="showCategory(6)" data-category-badge="6">Makarony</a></li>
<li><a href="#" onclick="showCategory(9)" data-category-badge="9">Dla dzieci</a></li>
<li><a href="#" onclick="showCategory(8)" data-category-badge="8">Dodatki</a></li>
<li><a href="#" onclick="showCategory(10)" data-category-badge="10">Desery</a></li>
<li><a href="#" onclick="showCategory(11)" data-category-badge="11">Napoje</a></li>
</ul>
</nav>
<div class="restaurant-menu-scroll">
<div class="rm-category" data-cat-id="1">
<div class="restaurant-menu-category">Na dobry początek</div>
<div class="rmc-positions">
<div class="rmc-position" data-position="331" data-category-id="1">
<img class="rmc-image" src="https://www.karczmabiesiada.eu/cache/images/files/potrawy/400_320_crop/losos-na-placku.webp" alt="" loading="lazy">
<div class="rmc-title">
<h4>Wędzony łosoś na chrupkim placku ziemniaczanym<span>ze śmietaną i sosem a'la duńskim</span></h4>
</div>
<div class="rmc-other"><span>31,00</span></div>
</div>
<div class="rmc-position" data-position="11" data-category-id="1">
<img class="rmc-image" src="https://www.karczmabiesiada.eu/cache/images/files/menu/400_320_crop/smalczyk.webp" alt="" loading="lazy">
<div class="rmc-title">
<h4>Skiśnięte ogórki i smolec swojej roboty z pieczywem<span></span></h4>
</div>
<div class="rmc-other"><span>28,00</span></div>
</div>
<div class="rmc-position" data-position="12" data-category-id="1">
<img class="rmc-image" src="https://www.karczmabiesiada.eu/cache/images/files/potrawy/400_320_crop/przystawki-Tatar-siekany.webp" alt="" loading="lazy">
<div class="rmc-title">
<h4>Tatar siekany z wołowiny z piklami i pieczywem<span></span></h4>
</div>
<div class="rmc-other"><span>62,00</span></div>
</div>
</div>
</div>
<div class="rm-category" data-cat-id="2">
<div class="restaurant-menu-category">Polywki</div>
<div class="rmc-positions">
<div class="rmc-position" data-position="18" data-category-id="2">
<img class="rmc-image" src="https://www.karczmabiesiada.eu/cache/images/files/wielkanocne-2020/400_320_crop/Karczma-biesiada-stalowa-wola-dania-na-wielkanoc.webp" alt="" loading="lazy">
<div class="rmc-title">
<h4>Żurek na wędzonce z jajkiem w chlebie<span></span></h4>
</div>
<div class="rmc-other"><span>31,00</span></div>
</div>
<div class="rmc-position" data-position="22" data-category-id="2">
<img class="rmc-image" src="https://www.karczmabiesiada.eu/cache/images/files/potrawy/400_320_crop/rosol-z-makaronem.webp" alt="" loading="lazy">
<div class="rmc-title">
<h4>Rosół wiejski z trzech rodzajów mięs z makaronem<span></span></h4>
</div>
<div class="rmc-other"><span>19,00</span></div>
</div>
</div>
</div>
<div class="rm-category" data-cat-id="3">
<div class="restaurant-menu-category">Co przez gospodarza lubiane</div>
<div class="rmc-positions">
<div class="rmc-position" data-position="363" data-category-id="3">
<img class="rmc-image" src="https://www.karczmabiesiada.eu/cache/images/files/aktualnosci/nowe-smaki-lato-2024/400_320_crop/pyszne-jedzenie-karczma-biesiada-6.webp" alt="" loading="lazy">
<div class="rmc-title">
<h4>Schab po zbóju z ogórkiem kiszonym podany z białym sosem i ziemniakami opiekanymi<span></span></h4>
</div>
<div class="rmc-other"><span>53,00</span></div>
</div>
</div>
</div>
</div>
</section>
</div>
</div> <!-- Koniec menuView -->
</main>