BartekGit/karczma-aplikacja-stoliki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Zmiana aplikacji na wersje lang

Browse Source
This commit is contained in:
BartekGit
2026-09-25 16:59:37 +02:00
parent 9d25de0d89
commit 3056eb6c3d
24 changed files with 1308 additions and 1105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/js/modules/menu.js
+73 -31
View File
@@ -1,4 +1,5 @@
import { MENU_ASSET_VERSION } from "./config.js";
import { endpoints } from "./config.js";
import { getLang, onLangChange, t } from "./i18n.js";
import { trackEvent } from "./analytics.js";
let itemModalKeys = [];
@@ -6,6 +7,7 @@ let itemModalIndex = -1;
let itemModalTouchStart = null;
let itemModalDragging = false;
let itemModalAnimating = false;
let menuLangChangeBound = false;
function resetItemModalPane() {
const pane = document.getElementById("itemModalPane");
@@ -78,13 +80,13 @@ function renderMenuListImage(url) {
const srcAttr = hasUrl ? ` src="${url}"` : "";
const onerror = hasUrl ? ' onerror="handleMenuImageError(this)"' : "";
return `<div class="rmc-image-wrap"><img class="${imgClass}"${srcAttr} alt="" loading="lazy"${onerror}><div class="${placeholderClass}" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span>Brak zdjęcia</span></div></div>`;
return `<div class="rmc-image-wrap"><img class="${imgClass}"${srcAttr} alt="" loading="lazy"${onerror}><div class="${placeholderClass}" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span>${t("menu.no_image")}</span></div></div>`;
}
function findMenuItem(categoryId, position) {
if (!window.menuDataRaw) return null;
for (const cat of window.menuDataRaw) {
for (const item of cat.items) {
for (const item of cat.items || []) {
if (item.categoryId == categoryId && item.position == position) {
return item;
}
@@ -243,33 +245,62 @@ export function bindItemModalSwipe() {
});
}
export async function loadMenu() {
function renderCategoryNav(categories) {
const ul = document.querySelector(".menu-categories-nav ul");
if (!ul) return;
const list = Array.isArray(categories) ? categories : [];
let html = `<li><a href="#" class="active" data-category-badge="0" onclick="showCategory(0); return false;">${t("menu.all")}</a></li>`;
list.forEach((cat) => {
const id = String(cat?.id ?? "").trim();
const name = String(cat?.name ?? "").trim();
if (!id || !name) return;
html += `<li><a href="#" data-category-badge="${id}" onclick="showCategory('${id}'); return false;">${name}</a></li>`;
});
ul.innerHTML = html;
}
function showMenuLoadError(container) {
if (!container) return;
container.innerHTML = `<p style="text-align:center; padding: 20px; color: var(--text-muted);">${t("menu.load_error")}</p>`;
}
export async function loadMenu(lang = getLang()) {
const container = document.getElementById("menuContainer");
try {
const response = await fetch(`menu.json?v=${encodeURIComponent(MENU_ASSET_VERSION)}`);
if (!response.ok) throw new Error("Nie udało się załadować menu");
const menuData = await response.json();
window.menuDataRaw = menuData;
const container = document.getElementById("menuContainer");
const response = await fetch(`${endpoints.menu}?lang=${encodeURIComponent(lang)}`);
if (!response.ok) throw new Error(t("menu.load_error"));
const payload = await response.json();
if (payload.status !== "success" || !Array.isArray(payload.sections)) {
throw new Error(t("menu.load_error"));
}
const sections = payload.sections;
window.menuDataRaw = sections;
if (!container) return;
container.innerHTML = "";
menuData.forEach((category) => {
const catId = category.items.length > 0 ? category.items[0].categoryId : "";
sections.forEach((section) => {
const items = Array.isArray(section.items) ? section.items : [];
const catId = items.length > 0 ? items[0].categoryId : "";
const catDiv = document.createElement("div");
catDiv.className = "rm-category";
catDiv.setAttribute("data-cat-id", catId);
let html = `<div class="restaurant-menu-category">${category.categoryName}</div>
let html = `<div class="restaurant-menu-category">${section.categoryName || ""}</div>
<div class="rmc-positions">`;
category.items.forEach((item) => {
items.forEach((item) => {
html += `
<div class="rmc-position" data-position="${item.position}" data-category-id="${item.categoryId}" onclick="openItemModal('${item.categoryId}', '${item.position}')" style="cursor: pointer;">
${renderMenuListImage(item.image)}
<div class="rmc-title">
<h4>${item.title}<span>${item.description}</span></h4>
<h4>${item.title}<span>${item.description || ""}</span></h4>
</div>
<div class="rmc-other"><span>${item.price}</span></div>
</div>
@@ -280,16 +311,28 @@ export async function loadMenu() {
catDiv.innerHTML = html;
container.appendChild(catDiv);
});
renderCategoryNav(payload.categories);
showCategory(0);
const searchInput = document.getElementById("menuSearchInput");
if (searchInput?.value) {
filterMenu();
}
} catch (err) {
console.error("Błąd ładowania menu:", err);
const container = document.getElementById("menuContainer");
if (container) {
container.innerHTML =
'<p style="text-align:center; padding: 20px; color: var(--text-muted);">Nie udało się załadować menu.</p>';
}
showMenuLoadError(container);
}
}
export function setMenuLanguageReload() {
if (menuLangChangeBound) return;
menuLangChangeBound = true;
onLangChange(() => loadMenu());
}
setMenuLanguageReload();
export function openItemModal(categoryId, position) {
itemModalKeys = buildVisibleMenuItemKeys();
itemModalIndex = itemModalKeys.findIndex(
@@ -366,17 +409,16 @@ export function showCategory(categoryId) {
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";
}
}
const showAll = categoryId === 0 || categoryId === "0";
const targetId = String(categoryId);
document.querySelectorAll(".rm-category").forEach((section) => {
let hasVisible = false;
section.querySelectorAll(".rmc-position").forEach((item) => {
const match = showAll || String(item.getAttribute("data-category-id")) === targetId;
item.style.display = match ? "" : "none";
if (match) hasVisible = true;
});
section.style.display = hasVisible ? "" : "none";
});
}