Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 297ef31eca | |||
| 05dfe4c3a6 | |||
| 9e3f648625 |
+510
-172
File diff suppressed because it is too large
Load Diff
+392
-119
@@ -7,11 +7,11 @@ window.kitchenAnimations = [
|
||||
];
|
||||
window.selectedAnimationHtml = null;
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
let hashParam = (params.get("h") || "").trim();
|
||||
const params = new URLSearchParams(location.search);
|
||||
let hashParam = (params.get("h") || "").trim();
|
||||
|
||||
// Jeśli brak hasha w URL – zapytaj użytkownika (np. do testów)
|
||||
if (!hashParam) {
|
||||
// Jeśli brak hasha w URL – zapytaj użytkownika (np. do testów)
|
||||
if (!hashParam) {
|
||||
const input = prompt("Podaj bezpieczny hash stolika (wymagane):");
|
||||
const trimmed = (input || "").trim();
|
||||
if (trimmed) {
|
||||
@@ -19,54 +19,150 @@ window.selectedAnimationHtml = null;
|
||||
newUrl.searchParams.set("h", trimmed);
|
||||
location.replace(newUrl.toString());
|
||||
}
|
||||
}
|
||||
|
||||
let tableParam = ""; // Puste, zostanie uzupełnione przez backend
|
||||
|
||||
// USER PROFILE LOGIC
|
||||
const userProfileKey = "karczma_user_profile";
|
||||
const USER_PROFILE_EXPIRE_MS = 180 * 24 * 60 * 60 * 1000; // ~6 months
|
||||
|
||||
function initUserProfile() {
|
||||
try {
|
||||
const raw = localStorage.getItem(userProfileKey);
|
||||
let profile = null;
|
||||
if (raw) {
|
||||
profile = JSON.parse(raw);
|
||||
}
|
||||
|
||||
let tableParam = ""; // Puste, zostanie uzupełnione przez backend
|
||||
const now = Date.now();
|
||||
|
||||
// UI Elements
|
||||
const loadingScreen = document.getElementById("loadingScreen");
|
||||
const loaderMsg = document.getElementById("loaderMsg");
|
||||
const tableLabel = document.getElementById("tableLabel");
|
||||
const prepStatus = document.getElementById("prepStatus");
|
||||
const progressBar = document.getElementById("progressBar");
|
||||
const statusMeta = document.getElementById("statusMeta");
|
||||
const itemsList = document.getElementById("itemsList");
|
||||
const emptyState = document.getElementById("emptyState");
|
||||
const metaFooter = document.getElementById("metaFooter");
|
||||
const statusIcon = document.getElementById("statusIcon");
|
||||
const storageKey = `stolik2_state_${(tableParam || "unknown").toLowerCase()}`;
|
||||
const historyKey = "stolik2_global_history";
|
||||
const historySection = document.getElementById("historySection");
|
||||
const historyList = document.getElementById("historyList");
|
||||
const SIX_MONTHS_MS = 180 * 24 * 60 * 60 * 1000;
|
||||
const HOT_WINDOW_MS = 5 * 60 * 60 * 1000;
|
||||
// Check if profile exists and is valid
|
||||
if (profile) {
|
||||
if (profile.declined) {
|
||||
// User declined in the past, don't ask again.
|
||||
return;
|
||||
}
|
||||
|
||||
// Dynamic Loader Messages
|
||||
const LOADER_MIN_MS = 10_000;
|
||||
const loadStartTime = Date.now();
|
||||
// If expired, maybe we want to ask again or we could just keep it if they didn't decline.
|
||||
// The user said: "trzymamy przez wiele miesięcy (odnawiamy datę przy każdej wizycie)"
|
||||
if (now - profile.lastVisit > USER_PROFILE_EXPIRE_MS) {
|
||||
// Profile expired. Ask again.
|
||||
showNameDialog();
|
||||
} else {
|
||||
// Profile valid, renew date and show greeting
|
||||
profile.lastVisit = now;
|
||||
localStorage.setItem(userProfileKey, JSON.stringify(profile));
|
||||
showGreeting(profile.name, profile.firstVisit || profile.lastVisit);
|
||||
}
|
||||
} else {
|
||||
// No profile, ask for name
|
||||
showNameDialog();
|
||||
}
|
||||
} catch (err) {
|
||||
// If error parsing, ask again
|
||||
showNameDialog();
|
||||
}
|
||||
}
|
||||
|
||||
const msgs = ["Rozgrzewamy piece...", "Szef kuchni sprawdza składniki...", "Łączenie z sercem restauracji...", "Prawie gotowe..."];
|
||||
let msgIdx = 0;
|
||||
const msgInterval = setInterval(() => {
|
||||
function showNameDialog() {
|
||||
const modal = document.getElementById("nameModal");
|
||||
if (modal) {
|
||||
modal.classList.add("active");
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
function hideNameDialog() {
|
||||
const modal = document.getElementById("nameModal");
|
||||
if (modal) {
|
||||
modal.classList.remove("active");
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
}
|
||||
|
||||
window.saveUserName = function () {
|
||||
const input = document.getElementById("userNameInput").value.trim();
|
||||
if (input) {
|
||||
const now = Date.now();
|
||||
const profile = { name: input, firstVisit: now, lastVisit: now, declined: false };
|
||||
localStorage.setItem(userProfileKey, JSON.stringify(profile));
|
||||
hideNameDialog();
|
||||
showGreeting(profile.name, profile.firstVisit);
|
||||
}
|
||||
};
|
||||
|
||||
window.declineUserName = function () {
|
||||
const profile = { name: null, firstVisit: Date.now(), lastVisit: Date.now(), declined: true };
|
||||
localStorage.setItem(userProfileKey, JSON.stringify(profile));
|
||||
hideNameDialog();
|
||||
};
|
||||
|
||||
function showGreeting(name, firstVisitTime) {
|
||||
const banner = document.getElementById("greetingBanner");
|
||||
if (banner && name) {
|
||||
const isToday = new Date(firstVisitTime).toDateString() === new Date().toDateString();
|
||||
|
||||
if (isToday) {
|
||||
banner.innerHTML = `Cześć ${name}, życzymy pysznego posiłku!`;
|
||||
} else {
|
||||
banner.innerHTML = `Witaj ${name}, super że do nas wracasz!`;
|
||||
}
|
||||
banner.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
// Call init is now delayed until geolocation succeeds
|
||||
// initUserProfile();
|
||||
|
||||
// UI Elements
|
||||
const loadingScreen = document.getElementById("loadingScreen");
|
||||
const loaderMsg = document.getElementById("loaderMsg");
|
||||
const tableLabel = document.getElementById("tableLabel");
|
||||
const prepStatus = document.getElementById("prepStatus");
|
||||
const progressBar = document.getElementById("progressBar");
|
||||
const statusMeta = document.getElementById("statusMeta");
|
||||
const itemsList = document.getElementById("itemsList");
|
||||
const emptyState = document.getElementById("emptyState");
|
||||
const metaFooter = document.getElementById("metaFooter");
|
||||
const statusIcon = document.getElementById("statusIcon");
|
||||
const storageKey = `stolik2_state_${(tableParam || "unknown").toLowerCase()}`;
|
||||
const historyKey = "stolik2_global_history";
|
||||
const historySection = document.getElementById("historySection");
|
||||
const historyList = document.getElementById("historyList");
|
||||
const SIX_MONTHS_MS = 180 * 24 * 60 * 60 * 1000;
|
||||
const HOT_WINDOW_MS = 5 * 60 * 60 * 1000;
|
||||
|
||||
// Dynamic Loader Messages
|
||||
const LOADER_MIN_MS = 10_000;
|
||||
const loadStartTime = Date.now();
|
||||
|
||||
const msgs = ["Rozgrzewamy piece...", "Szef kuchni sprawdza składniki...", "Łączenie z sercem restauracji...", "Prawie gotowe..."];
|
||||
let msgIdx = 0;
|
||||
const msgInterval = setInterval(() => {
|
||||
msgIdx = (msgIdx + 1) % msgs.length;
|
||||
loaderMsg.textContent = msgs[msgIdx];
|
||||
}, 4000);
|
||||
}, 4000);
|
||||
|
||||
// Initial State
|
||||
if (tableParam) {
|
||||
// Initial State
|
||||
if (tableParam) {
|
||||
tableLabel.textContent = `Stolik ${tableParam}`;
|
||||
}
|
||||
}
|
||||
|
||||
function hideLoader() {
|
||||
function hideLoader() {
|
||||
const elapsed = Date.now() - loadStartTime;
|
||||
const remaining = Math.max(0, LOADER_MIN_MS - elapsed);
|
||||
setTimeout(() => {
|
||||
loadingScreen.classList.add("hidden");
|
||||
clearInterval(msgInterval);
|
||||
}, remaining);
|
||||
const bottomNav = document.getElementById("bottomNav");
|
||||
if (bottomNav) {
|
||||
bottomNav.style.display = "";
|
||||
}
|
||||
}, remaining);
|
||||
}
|
||||
|
||||
function updateUI(bills) {
|
||||
function updateUI(bills) {
|
||||
// Hide loader after minimum display time
|
||||
hideLoader();
|
||||
|
||||
@@ -81,9 +177,9 @@ window.selectedAnimationHtml = null;
|
||||
|
||||
renderItems(items);
|
||||
updateStatus(bills, items);
|
||||
}
|
||||
}
|
||||
|
||||
function detectTableCandidates(bill) {
|
||||
function detectTableCandidates(bill) {
|
||||
const remark = String(bill?.Remark || "");
|
||||
const description = String(bill?.Description || "").trim();
|
||||
|
||||
@@ -95,20 +191,23 @@ window.selectedAnimationHtml = null;
|
||||
const fromDescription = description.toLowerCase();
|
||||
|
||||
return { fromRemark, fromDescription, remark: remark.toLowerCase() };
|
||||
}
|
||||
}
|
||||
|
||||
function showEmptyState() {
|
||||
const title = document.getElementById("ordersTitle");
|
||||
if (title) title.classList.add("hidden");
|
||||
|
||||
function showEmptyState() {
|
||||
emptyState.classList.remove("hidden");
|
||||
itemsList.innerHTML = "";
|
||||
prepStatus.textContent = "Brak aktywnych zamówień";
|
||||
statusIcon.textContent = "🍃";
|
||||
progressBar.style.width = "0%";
|
||||
statusMeta.textContent = "Zapraszamy do złożenia zamówienia u kelnera.";
|
||||
statusMeta.textContent = "Zapraszamy do sprawdzenia naszego menu.";
|
||||
// Historia może istnieć nawet gdy brak bieżących pozycji
|
||||
renderGlobalHistory();
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeArticleName(rawName) {
|
||||
function normalizeArticleName(rawName) {
|
||||
const name = String(rawName || "Pozycja");
|
||||
|
||||
// Usuwa gramatury typu: "300G", "250 G", "500/200/150G".
|
||||
@@ -121,9 +220,9 @@ window.selectedAnimationHtml = null;
|
||||
.replace(/\s{2,}/g, " ")
|
||||
.replace(/\s+([,.;:!?])/g, "$1")
|
||||
.trim() || "Pozycja";
|
||||
}
|
||||
}
|
||||
|
||||
function loadPersistedItems() {
|
||||
function loadPersistedItems() {
|
||||
try {
|
||||
const raw = localStorage.getItem(storageKey);
|
||||
if (!raw) return [];
|
||||
@@ -132,17 +231,17 @@ window.selectedAnimationHtml = null;
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function savePersistedItems(items) {
|
||||
function savePersistedItems(items) {
|
||||
try {
|
||||
localStorage.setItem(storageKey, JSON.stringify(items));
|
||||
} catch {
|
||||
// brak miejsca/tryb prywatny
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loadGlobalHistory() {
|
||||
function loadGlobalHistory() {
|
||||
try {
|
||||
const raw = localStorage.getItem(historyKey);
|
||||
if (!raw) return [];
|
||||
@@ -151,9 +250,9 @@ window.selectedAnimationHtml = null;
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function saveGlobalHistory(entries) {
|
||||
function saveGlobalHistory(entries) {
|
||||
const now = Date.now();
|
||||
const cleaned = entries
|
||||
.filter((e) => e && e.name && Number.isFinite(e.archivedAt))
|
||||
@@ -164,9 +263,9 @@ window.selectedAnimationHtml = null;
|
||||
} catch {
|
||||
// ignore storage errors
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addItemsToGlobalHistory(items, sourceTable) {
|
||||
function addItemsToGlobalHistory(items, sourceTable) {
|
||||
if (!items.length) return;
|
||||
const now = Date.now();
|
||||
const existing = loadGlobalHistory();
|
||||
@@ -189,9 +288,9 @@ window.selectedAnimationHtml = null;
|
||||
|
||||
if (!toAdd.length) return;
|
||||
saveGlobalHistory([...existing, ...toAdd]);
|
||||
}
|
||||
}
|
||||
|
||||
function renderGlobalHistory() {
|
||||
function renderGlobalHistory() {
|
||||
const now = Date.now();
|
||||
const history = loadGlobalHistory()
|
||||
.filter((e) => (now - (e.archivedAt || 0)) <= SIX_MONTHS_MS)
|
||||
@@ -215,21 +314,29 @@ window.selectedAnimationHtml = null;
|
||||
div.innerHTML = `
|
||||
<div class="item-info">
|
||||
<span class="item-name">${entry.name}</span>
|
||||
<span class="item-meta">Stolik ${entry.sourceTable || "?"} • ${dt.toLocaleDateString("pl-PL")} ${dt.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})}</span>
|
||||
<span class="item-meta">Stolik ${entry.sourceTable || "?"} • ${dt.toLocaleDateString("pl-PL")} ${dt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
|
||||
</div>
|
||||
<div class="item-qty">x${entry.qty}</div>
|
||||
`;
|
||||
historyList.appendChild(div);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function mergeWithPersistedItems(articles) {
|
||||
window.clearGlobalHistory = function (e) {
|
||||
if (e) e.preventDefault();
|
||||
if (confirm("Czy na pewno chcesz usunąć historię swoich poprzednich zamówień?")) {
|
||||
localStorage.removeItem(historyKey);
|
||||
renderGlobalHistory();
|
||||
}
|
||||
};
|
||||
|
||||
function mergeWithPersistedItems(articles) {
|
||||
const current = new Map();
|
||||
|
||||
articles.forEach(a => {
|
||||
const name = normalizeArticleName(a.Name);
|
||||
const todo = parseFloat(String(a.QuantityToDo || a.QuantitySet || "0").replace(",","."));
|
||||
const done = parseFloat(String(a.QuantityDone || "0").replace(",","."));
|
||||
const todo = parseFloat(String(a.QuantityToDo || a.QuantitySet || "0").replace(",", "."));
|
||||
const done = parseFloat(String(a.QuantityDone || "0").replace(",", "."));
|
||||
|
||||
if (!current.has(name)) {
|
||||
current.set(name, { name, qty: 0, done: 0, present: true, completedByDisappear: false });
|
||||
@@ -270,9 +377,12 @@ window.selectedAnimationHtml = null;
|
||||
|
||||
savePersistedItems(merged);
|
||||
return merged;
|
||||
}
|
||||
}
|
||||
|
||||
function renderItems(items) {
|
||||
const title = document.getElementById("ordersTitle");
|
||||
if (title) title.classList.remove("hidden");
|
||||
|
||||
function renderItems(items) {
|
||||
emptyState.classList.add("hidden");
|
||||
itemsList.innerHTML = "";
|
||||
|
||||
@@ -299,9 +409,9 @@ window.selectedAnimationHtml = null;
|
||||
});
|
||||
|
||||
renderGlobalHistory();
|
||||
}
|
||||
}
|
||||
|
||||
function updateStatus(bills, items) {
|
||||
function updateStatus(bills, items) {
|
||||
let total = 0;
|
||||
let done = 0;
|
||||
items.forEach(i => {
|
||||
@@ -330,15 +440,15 @@ window.selectedAnimationHtml = null;
|
||||
}
|
||||
|
||||
// Footer meta
|
||||
const newest = [...bills].sort((a,b) => new Date(b?.Date || 0) - new Date(a?.Date || 0))[0];
|
||||
const newest = [...bills].sort((a, b) => new Date(b?.Date || 0) - new Date(a?.Date || 0))[0];
|
||||
const time = newest?.Date
|
||||
? new Date(newest.Date).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
|
||||
? new Date(newest.Date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||
: "--:--";
|
||||
metaFooter.textContent = `Zamówienie złożone o godzinie ${time} • Stolik ${tableParam}`;
|
||||
}
|
||||
}
|
||||
|
||||
// API Fetch Logic
|
||||
async function fetchOrders() {
|
||||
// API Fetch Logic
|
||||
async function fetchOrders() {
|
||||
try {
|
||||
if (!hashParam) {
|
||||
updateUI([]);
|
||||
@@ -382,7 +492,7 @@ window.selectedAnimationHtml = null;
|
||||
|
||||
// Najnowszy czas dodania (do pokazania w stopce)
|
||||
const latestDate = matches.length > 0
|
||||
? matches.sort((a,b) => new Date(b.DataDodania) - new Date(a.DataDodania))[0].DataDodania
|
||||
? matches.sort((a, b) => new Date(b.DataDodania) - new Date(a.DataDodania))[0].DataDodania
|
||||
: null;
|
||||
|
||||
// Przekazanie do dotychczasowej logiki aktualizującej UI (w odpowiednim formacie)
|
||||
@@ -397,15 +507,15 @@ window.selectedAnimationHtml = null;
|
||||
} catch (err) {
|
||||
loaderMsg.textContent = "Problem z połączeniem. Próbujemy ponownie...";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchOrders();
|
||||
setInterval(fetchOrders, 10000);
|
||||
// fetchOrders();
|
||||
// setInterval(fetchOrders, 10000);
|
||||
|
||||
// --- CALL WAITER LOGIC ---
|
||||
let billState = { payment: '', doc: '', nip: '', company: null };
|
||||
// --- CALL WAITER LOGIC ---
|
||||
let billState = { payment: '', doc: '', nip: '', company: null };
|
||||
|
||||
function showToast(msg) {
|
||||
function showToast(msg) {
|
||||
const t = document.getElementById("toastMsg");
|
||||
document.getElementById("toastText").textContent = msg;
|
||||
|
||||
@@ -414,39 +524,39 @@ window.selectedAnimationHtml = null;
|
||||
t.classList.add("active");
|
||||
|
||||
setTimeout(() => t.classList.remove("active"), 3500);
|
||||
}
|
||||
}
|
||||
|
||||
function sendApiSimulated(actionName, details) {
|
||||
function sendApiSimulated(actionName, details) {
|
||||
console.log(`[SYMULACJA API] Akcja: ${actionName}`, details);
|
||||
// Przykładowe wysłanie docelowo:
|
||||
// if (window.socket && window.socket.readyState === WebSocket.OPEN) {
|
||||
// window.socket.send(JSON.stringify({ action: "sendUpstream", payload: { type: actionName, table: tableParam, ...details } }));
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
window.callWaiter = function(type) {
|
||||
window.callWaiter = function (type) {
|
||||
if (type === 'order') {
|
||||
sendApiSimulated("CallWaiter_Order", { table: tableParam });
|
||||
showToast("Kelner wkrótce do Ciebie podejdzie!");
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
window.openWaiterDialog = function() {
|
||||
window.openWaiterDialog = function () {
|
||||
document.getElementById("waiterModal").classList.add("active");
|
||||
document.body.style.overflow = 'hidden';
|
||||
};
|
||||
};
|
||||
|
||||
window.closeWaiterDialog = function() {
|
||||
window.closeWaiterDialog = function () {
|
||||
document.getElementById("waiterModal").classList.remove("active");
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
};
|
||||
|
||||
window.confirmCallWaiter = function() {
|
||||
window.confirmCallWaiter = function () {
|
||||
closeWaiterDialog();
|
||||
callWaiter('order');
|
||||
};
|
||||
};
|
||||
|
||||
window.openBillDialog = async function() {
|
||||
window.openBillDialog = async function () {
|
||||
billState = { payment: '', doc: '', nip: '', company: null, selectedBillId: null };
|
||||
document.getElementById("billModal").classList.add("active");
|
||||
document.body.style.overflow = 'hidden'; // Zablokuj scroll tła
|
||||
@@ -475,9 +585,9 @@ window.selectedAnimationHtml = null;
|
||||
} catch (err) {
|
||||
document.getElementById("billLoading").innerHTML = "Błąd pobierania rachunków.";
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
function renderBillList(bills) {
|
||||
function renderBillList(bills) {
|
||||
document.getElementById("billLoading").classList.add("hidden");
|
||||
document.getElementById("billListContainer").classList.remove("hidden");
|
||||
|
||||
@@ -502,13 +612,13 @@ window.selectedAnimationHtml = null;
|
||||
`;
|
||||
container.appendChild(div);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.goBackToBillList = function() {
|
||||
window.goBackToBillList = function () {
|
||||
goToStep("stepBillList");
|
||||
};
|
||||
};
|
||||
|
||||
window.showBillReview = function(bill) {
|
||||
window.showBillReview = function (bill) {
|
||||
billState.selectedBillId = bill.id;
|
||||
|
||||
const content = document.getElementById("billReviewContent");
|
||||
@@ -534,20 +644,20 @@ window.selectedAnimationHtml = null;
|
||||
|
||||
document.getElementById("billTotalAmount").textContent = bill.suma.toFixed(2) + " PLN";
|
||||
goToStep("stepBillReview");
|
||||
};
|
||||
};
|
||||
|
||||
window.closeBillDialog = function() {
|
||||
window.closeBillDialog = function () {
|
||||
document.getElementById("billModal").classList.remove("active");
|
||||
document.body.style.overflow = ''; // Odblokuj scroll tła
|
||||
};
|
||||
};
|
||||
|
||||
window.goToStep = function(stepId) {
|
||||
window.goToStep = function (stepId) {
|
||||
document.querySelectorAll('.step').forEach(el => el.classList.remove('active'));
|
||||
document.getElementById(stepId).classList.add('active');
|
||||
};
|
||||
};
|
||||
|
||||
// --- SPA NAVIGATION LOGIC ---
|
||||
window.switchTab = function(tabName) {
|
||||
// --- SPA NAVIGATION LOGIC ---
|
||||
window.switchTab = function (tabName) {
|
||||
// 1. Zdejmij .active z widoków i ikonek nav
|
||||
document.querySelectorAll('.view-section').forEach(el => el.classList.add('hidden'));
|
||||
document.querySelectorAll('.view-section').forEach(el => el.classList.remove('active'));
|
||||
@@ -555,27 +665,87 @@ window.selectedAnimationHtml = null;
|
||||
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);
|
||||
};
|
||||
|
||||
window.selectPayment = function(method) {
|
||||
// --- 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) {
|
||||
billState.payment = method;
|
||||
goToStep("stepDocument");
|
||||
};
|
||||
};
|
||||
|
||||
window.selectDocument = function(docType) {
|
||||
window.selectDocument = function (docType) {
|
||||
billState.doc = docType;
|
||||
if (docType === 'paragon') {
|
||||
closeBillDialog();
|
||||
@@ -586,9 +756,9 @@ window.selectedAnimationHtml = null;
|
||||
document.getElementById("nipInput").value = '';
|
||||
setTimeout(() => document.getElementById("nipInput").focus(), 100);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
window.fetchGUS = function() {
|
||||
window.fetchGUS = function () {
|
||||
const nip = document.getElementById("nipInput").value.replace(/[\s-]/g, '');
|
||||
if (nip.length < 10) {
|
||||
alert("Wprowadź poprawny numer NIP.");
|
||||
@@ -605,43 +775,57 @@ window.selectedAnimationHtml = null;
|
||||
billState.nip = nip;
|
||||
billState.company = {
|
||||
name: "Przykładowa Firma Sp. z o.o.",
|
||||
address: "ul. Gastronomiczna 12/4, 00-120 Warszawa",
|
||||
street: "ul. Gastronomiczna 12/4",
|
||||
zip: "00-120",
|
||||
city: "Warszawa",
|
||||
nip: nip
|
||||
};
|
||||
|
||||
document.getElementById("cmpName").value = billState.company.name;
|
||||
document.getElementById("cmpAddress").value = billState.company.address;
|
||||
document.getElementById("cmpStreet").value = billState.company.street;
|
||||
document.getElementById("cmpZip").value = billState.company.zip;
|
||||
document.getElementById("cmpCity").value = billState.company.city;
|
||||
document.getElementById("cmpNip").value = "NIP: " + billState.company.nip;
|
||||
|
||||
// reset do readonly
|
||||
document.getElementById("cmpName").readOnly = true;
|
||||
document.getElementById("cmpAddress").readOnly = true;
|
||||
document.getElementById("cmpStreet").readOnly = true;
|
||||
document.getElementById("cmpZip").readOnly = true;
|
||||
document.getElementById("cmpCity").readOnly = true;
|
||||
document.getElementById("btnEditCompany").textContent = "Popraw ręcznie";
|
||||
|
||||
goToStep("stepVerify");
|
||||
}, 1200);
|
||||
};
|
||||
};
|
||||
|
||||
window.editCompanyData = function() {
|
||||
window.editCompanyData = function () {
|
||||
const n = document.getElementById("cmpName");
|
||||
const a = document.getElementById("cmpAddress");
|
||||
const s = document.getElementById("cmpStreet");
|
||||
const z = document.getElementById("cmpZip");
|
||||
const c = document.getElementById("cmpCity");
|
||||
const btn = document.getElementById("btnEditCompany");
|
||||
|
||||
if (n.readOnly) {
|
||||
n.readOnly = false;
|
||||
a.readOnly = false;
|
||||
s.readOnly = false;
|
||||
z.readOnly = false;
|
||||
c.readOnly = false;
|
||||
n.focus();
|
||||
btn.textContent = "Zakończ edycję";
|
||||
} else {
|
||||
n.readOnly = true;
|
||||
a.readOnly = true;
|
||||
s.readOnly = true;
|
||||
z.readOnly = true;
|
||||
c.readOnly = true;
|
||||
btn.textContent = "Popraw ręcznie";
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
window.confirmInvoice = function() {
|
||||
window.confirmInvoice = function () {
|
||||
billState.company.name = document.getElementById("cmpName").value;
|
||||
billState.company.address = document.getElementById("cmpAddress").value;
|
||||
billState.company.street = document.getElementById("cmpStreet").value;
|
||||
billState.company.zip = document.getElementById("cmpZip").value;
|
||||
billState.company.city = document.getElementById("cmpCity").value;
|
||||
|
||||
closeBillDialog();
|
||||
sendApiSimulated("CallWaiter_Bill", {
|
||||
@@ -653,11 +837,100 @@ window.selectedAnimationHtml = null;
|
||||
company: billState.company
|
||||
});
|
||||
showToast("Dziękujemy! Prośba o fakturę została wysłana.");
|
||||
};
|
||||
};
|
||||
|
||||
// --- GEOLOCATION LOGIC ---
|
||||
const RESTAURANT_LAT = 50.5624963;
|
||||
const RESTAURANT_LNG = 22.0608059;
|
||||
const MAX_DISTANCE_METERS = 200;
|
||||
|
||||
function haversineDistance(lat1, lon1, lat2, lon2) {
|
||||
const R = 6371e3;
|
||||
const p1 = lat1 * Math.PI / 180;
|
||||
const p2 = lat2 * Math.PI / 180;
|
||||
const dp = (lat2 - lat1) * Math.PI / 180;
|
||||
const dl = (lon2 - lon1) * Math.PI / 180;
|
||||
|
||||
const a = Math.sin(dp / 2) * Math.sin(dp / 2) +
|
||||
Math.cos(p1) * Math.cos(p2) *
|
||||
Math.sin(dl / 2) * Math.sin(dl / 2);
|
||||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||
return R * c;
|
||||
}
|
||||
|
||||
function startApp() {
|
||||
document.getElementById("geoScreen").classList.add("hidden");
|
||||
document.getElementById("loadingScreen").classList.remove("hidden");
|
||||
|
||||
initUserProfile();
|
||||
fetchOrders();
|
||||
if (!window.ordersInterval) {
|
||||
window.ordersInterval = setInterval(fetchOrders, 10000);
|
||||
}
|
||||
|
||||
// Fallback: If no data after 25s, show empty state anyway
|
||||
setTimeout(() => {
|
||||
if (!loadingScreen.classList.contains("hidden")) {
|
||||
if (!document.getElementById("loadingScreen").classList.contains("hidden")) {
|
||||
updateUI([]);
|
||||
}
|
||||
}, 25000);
|
||||
}
|
||||
|
||||
window.initGeolocation = function () {
|
||||
const geoScreen = document.getElementById("geoScreen");
|
||||
const loadingScreen = document.getElementById("loadingScreen");
|
||||
const geoMsg = document.getElementById("geoMsg");
|
||||
|
||||
if (window.location.protocol === 'http:' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
|
||||
console.warn("Bypassing geolocation on local HTTP environment.");
|
||||
startApp();
|
||||
return;
|
||||
}
|
||||
|
||||
loadingScreen.classList.add("hidden");
|
||||
geoScreen.classList.remove("hidden");
|
||||
|
||||
if (!navigator.geolocation) {
|
||||
geoMsg.innerHTML = "Twoja przeglądarka nie wspiera geolokalizacji. Aplikacja wymaga nowszej przeglądarki.";
|
||||
return;
|
||||
}
|
||||
|
||||
geoMsg.innerHTML = "Pobieranie lokalizacji...";
|
||||
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
const dist = haversineDistance(
|
||||
RESTAURANT_LAT, RESTAURANT_LNG,
|
||||
position.coords.latitude, position.coords.longitude
|
||||
);
|
||||
|
||||
const accuracy = position.coords.accuracy;
|
||||
console.log(`[GEO] Lat: ${position.coords.latitude}, Lng: ${position.coords.longitude}, Dist: ${dist}m, Accuracy: ${accuracy}m`);
|
||||
|
||||
if (dist <= MAX_DISTANCE_METERS) {
|
||||
startApp();
|
||||
setTimeout(() => showToast(`Lokalizacja zweryfikowana (Dystans: ${Math.round(dist)}m, Dokładność: ${Math.round(accuracy)}m)`), 2000);
|
||||
} else {
|
||||
geoMsg.innerHTML = `Wydaje się, że jesteś poza restauracją (ok. ${Math.round(dist)}m od nas).<br>Nasza aplikacja działa tylko na miejscu.<br><br>
|
||||
<small style="color: #888;">Debug: Twoja odległość: ${Math.round(dist)}m, Dokładność sygnału: ${Math.round(accuracy)}m</small><br><br>
|
||||
Jeśli to błąd GPS lub słaby sygnał, spróbuj ponownie za chwilę.`;
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
if (error.code === error.PERMISSION_DENIED) {
|
||||
geoMsg.innerHTML = `<b style="color: #ff6b6b;">Nie mamy Twojej zgody na lokalizację.</b><br><br>
|
||||
Przeglądarka zapamiętała Twoją odmowę i nie możemy ponownie wyświetlić okienka z zapytaniem. Aby odblokować dostęp:<br><br>
|
||||
1. Kliknij ikonkę <b>kłódki / ustawień</b> 🔒 obok adresu strony na samej górze przeglądarki.<br>
|
||||
2. Znajdź <b>Uprawnienia</b> (Lokalizacja) i zmień z "Zablokuj" na "Zezwalaj".<br>
|
||||
3. Odśwież stronę.`;
|
||||
} else {
|
||||
geoMsg.innerHTML = "Nie udało się pobrać lokalizacji. Sprawdź zasięg lub włącz GPS i spróbuj ponownie.";
|
||||
}
|
||||
},
|
||||
{ enableHighAccuracy: true, timeout: 15000, maximumAge: 0 }
|
||||
);
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
initGeolocation();
|
||||
}, 600);
|
||||
+178
-30
@@ -1,14 +1,18 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Karczma Biesiada – Twoje Zamówienie</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/css/stolik3_api.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="loadingScreen">
|
||||
@@ -19,11 +23,25 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="geoScreen" class="hidden">
|
||||
<div class="geo-icon">📍</div>
|
||||
<div class="geo-text">
|
||||
<h2>Prywatność i Lokalizacja</h2>
|
||||
<div class="geo-msg" id="geoMsg">
|
||||
Aby zapewnić bezpieczeństwo Twojego zamówienia, musimy upewnić się, że znajdujesz się na terenie restauracji.<br><br>Prosimy o udzielenie zgody na dostęp do lokalizacji w przeglądarce.
|
||||
</div>
|
||||
<button class="btn btn-primary" style="margin-top: 24px; max-width: 250px; margin-left: auto; margin-right: auto;" onclick="initGeolocation()">Udziel zgody / Sprawdź</button>
|
||||
</div>
|
||||
</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>
|
||||
<div id="greetingBanner"
|
||||
style="display:none; text-align:center; padding: 10px; font-weight:600; color:var(--primary); font-family:'Playfair Display', serif; font-size:18px;">
|
||||
</div>
|
||||
|
||||
<main id="mainContent">
|
||||
<div id="statusView" class="view-section active">
|
||||
@@ -46,40 +64,132 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="items-container">
|
||||
<h3>Twoje zamówione dania</h3>
|
||||
<section class="items-container" id="ordersContainer">
|
||||
<h3 id="ordersTitle">Twoje zamówione dania</h3>
|
||||
<div id="emptyState" class="empty-state hidden">
|
||||
<div class="empty-icon">🍽️</div>
|
||||
<p style="color: var(--text-muted)">Aktualnie nie przygotowujemy niczego dla tego stolika.</p>
|
||||
<p style="font-size: 14px">Jeśli właśnie złożyłeś zamówienie, daj nam chwilkę na jego przetworzenie.</p>
|
||||
<div class="empty-icon">📖</div>
|
||||
<p style="color: var(--text-muted)">Jeśli właśnie złożyłeś zamówienie, daj nam chwilkę na jego
|
||||
przetworzenie.</p>
|
||||
<button class="btn btn-primary" style="margin-top: 15px; padding: 12px 20px; font-size: 15px;"
|
||||
onclick="switchTab('menu')">Przeglądaj menu</button>
|
||||
</div>
|
||||
<div id="itemsList"></div>
|
||||
</section>
|
||||
|
||||
<section id="historySection" class="items-container history-section hidden">
|
||||
<h3>Twoje poprzednie zamówienia</h3>
|
||||
<p class="history-note">To są pozycje z innych wizyt, które były widoczne na tym telefonie po zeskanowaniu kodów QR. Jeśli kiedyś byłeś w restauracji bez skanowania kodu, tych pozycji tu nie będzie 🙂</p>
|
||||
<p class="history-note">To są pozycje z innych wizyt, które były widoczne na tym telefonie po zeskanowaniu
|
||||
kodów QR. Jeśli kiedyś byłeś w restauracji bez skanowania kodu, tych pozycji tu nie będzie 🙂</p>
|
||||
<div id="historyList"></div>
|
||||
<div style="text-align: center; margin-top: 15px;">
|
||||
<a href="#" onclick="clearGlobalHistory(event)"
|
||||
style="font-size: 12px; color: var(--text-muted); text-decoration: underline;">Usuń historię</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="metaFooter" class="meta-footer"></div>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
</div> <!-- Koniec menuView -->
|
||||
|
||||
</main>
|
||||
|
||||
<footer style="text-align: center; padding: 10px 0 20px; margin-top: 5px;">
|
||||
<a href="https://magico.pl" target="_blank"
|
||||
style="font-size: 12px; color: var(--text-muted); text-decoration: none;">
|
||||
© Magico Software
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="bottom-nav">
|
||||
<nav class="bottom-nav" id="bottomNav" style="display: none;">
|
||||
<div class="nav-item active" onclick="switchTab('status')" id="navStatus">
|
||||
<span class="nav-icon">🍽️</span>
|
||||
<span class="nav-label">Zamówienie</span>
|
||||
@@ -102,17 +212,40 @@
|
||||
<div class="modal-overlay" id="waiterModal">
|
||||
<div class="modal-content" style="text-align: center;">
|
||||
<div style="font-size: 48px; margin-bottom: 15px;">🛎️</div>
|
||||
<h3 style="margin-top: 0; color: var(--text-main); font-family: 'Playfair Display', serif; font-size: 24px;">Przywołać obsługę?</h3>
|
||||
<h3 style="margin-top: 0; color: var(--text-main); font-family: 'Playfair Display', serif; font-size: 24px;">
|
||||
Przywołać obsługę?</h3>
|
||||
<p style="color: var(--text-muted); font-size: 15px; margin-bottom: 25px; line-height: 1.5;">
|
||||
Kelner otrzyma natychmiastowe powiadomienie na swoim panelu i podejdzie do Twojego stolika najszybciej jak to możliwe.
|
||||
Kelner otrzyma natychmiastowe powiadomienie na swoim panelu i podejdzie do Twojego stolika najszybciej jak to
|
||||
możliwe.
|
||||
</p>
|
||||
<div style="display: flex; gap: 12px; flex-direction: column;">
|
||||
<button class="btn btn-primary" onclick="confirmCallWaiter()" style="padding: 14px; font-size: 16px;">Tak, poproś kelnera</button>
|
||||
<button class="btn btn-primary" onclick="confirmCallWaiter()" style="padding: 14px; font-size: 16px;">Tak,
|
||||
poproś kelnera</button>
|
||||
<button class="btn btn-secondary" onclick="closeWaiterDialog()" style="padding: 14px;">Anuluj</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NAME DIALOG -->
|
||||
<div class="modal-overlay" id="nameModal">
|
||||
<div class="modal-content" style="text-align: center;">
|
||||
<div style="font-size: 48px; margin-bottom: 15px;">👋</div>
|
||||
<h3 style="margin-top: 0; color: var(--text-main); font-family: 'Playfair Display', serif; font-size: 24px;">Podaj
|
||||
swoje imię</h3>
|
||||
<p style="color: var(--text-muted); font-size: 15px; margin-bottom: 20px; line-height: 1.5;">
|
||||
Dzięki temu będziemy mogli powitać Cię osobiście podczas Twojej wizyty!
|
||||
</p>
|
||||
<div class="input-group" style="margin-bottom: 25px; text-align: left;">
|
||||
<input type="text" id="userNameInput" class="input-field" placeholder="Twoje imię..." autocomplete="off" />
|
||||
</div>
|
||||
<div style="display: flex; gap: 12px; flex-direction: column;">
|
||||
<button class="btn btn-primary" onclick="saveUserName()" style="padding: 14px; font-size: 16px;">Idę
|
||||
dalej</button>
|
||||
<button class="btn btn-secondary" onclick="declineUserName()" style="padding: 14px;">Nie chcę podawać</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BILL DIALOG -->
|
||||
<div class="modal-overlay" id="billModal">
|
||||
<div class="modal-content">
|
||||
@@ -127,29 +260,34 @@
|
||||
⏳ Pobieranie rachunków...
|
||||
</div>
|
||||
<div id="billListContainer" class="hidden">
|
||||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Mamy kilka otwartych rachunków na tym stoliku. Który chcesz opłacić?</p>
|
||||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Mamy kilka otwartych
|
||||
rachunków na tym stoliku. Który chcesz opłacić?</p>
|
||||
<div id="billListItems" style="display:flex; flex-direction:column; gap:10px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 0.5: Bill Review -->
|
||||
<div class="step" id="stepBillReview">
|
||||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Podsumowanie rachunku:</p>
|
||||
<div id="billReviewContent" style="background: var(--surface-light); padding: 15px; border-radius: 12px; max-height: 40vh; overflow-y: auto; margin-bottom: 15px;">
|
||||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Podsumowanie rachunku:
|
||||
</p>
|
||||
<div id="billReviewContent"
|
||||
style="background: var(--surface-light); padding: 15px; border-radius: 12px; max-height: 40vh; overflow-y: auto; margin-bottom: 15px;">
|
||||
</div>
|
||||
<div style="display:flex; justify-content:space-between; font-weight:700; font-size:18px; margin-bottom: 20px;">
|
||||
<span>Do zapłaty:</span>
|
||||
<span id="billTotalAmount" style="color:var(--primary);">0.00 PLN</span>
|
||||
</div>
|
||||
<div style="display:flex; gap:12px;">
|
||||
<button class="btn btn-secondary" style="flex:1;" onclick="goBackToBillList()" id="btnBackToBills">Wróć</button>
|
||||
<button class="btn btn-primary" style="flex:2;" onclick="goToStep('stepPayment')">Dalej</button>
|
||||
<button class="btn btn-secondary" style="flex:1;" onclick="goBackToBillList()"
|
||||
id="btnBackToBills">Wróć</button>
|
||||
<button class="btn btn-primary" style="flex:2;" onclick="goToStep('stepPayment')">Poproś rachunek</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 1: Payment Method -->
|
||||
<div class="step" id="stepPayment">
|
||||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Wybierz preferowaną formę płatności:</p>
|
||||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Wybierz preferowaną formę
|
||||
płatności:</p>
|
||||
<div class="option-grid">
|
||||
<div class="option-card" onclick="selectPayment('karta')">
|
||||
<span class="option-icon">💳</span>
|
||||
@@ -160,12 +298,14 @@
|
||||
<span class="option-label">Gotówka</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-secondary" onclick="goToStep('stepBillReview')" style="margin-top: 15px;">Wróć do podsumowania</button>
|
||||
<button class="btn btn-secondary" onclick="goToStep('stepBillReview')" style="margin-top: 15px;">Wróć do
|
||||
podsumowania</button>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Document Type -->
|
||||
<div class="step" id="stepDocument">
|
||||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Jakiego dokumentu potrzebujesz?</p>
|
||||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Jakiego dokumentu
|
||||
potrzebujesz?</p>
|
||||
<div class="option-grid">
|
||||
<div class="option-card" onclick="selectDocument('paragon')">
|
||||
<span class="option-icon">🧾</span>
|
||||
@@ -181,10 +321,11 @@
|
||||
|
||||
<!-- Step 3: NIP Input -->
|
||||
<div class="step" id="stepNIP">
|
||||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Wprowadź NIP firmy, abyśmy mogli automatycznie pobrać dane.</p>
|
||||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Wprowadź NIP firmy,
|
||||
abyśmy mogli automatycznie pobrać dane.</p>
|
||||
<div class="input-group">
|
||||
<label class="input-label">Numer NIP</label>
|
||||
<input type="text" id="nipInput" class="input-field" placeholder="np. 1234567890" autocomplete="off" />
|
||||
<input type="number" id="nipInput" class="input-field" placeholder="np. 1234567890" autocomplete="off" />
|
||||
</div>
|
||||
<div style="display:flex; gap:12px; margin-top: 24px;">
|
||||
<button class="btn btn-secondary" style="flex:1;" onclick="goToStep('stepDocument')">Wróć</button>
|
||||
@@ -194,11 +335,17 @@
|
||||
|
||||
<!-- Step 4: Verify Data -->
|
||||
<div class="step" id="stepVerify">
|
||||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Czy poniższe dane do faktury są prawidłowe?</p>
|
||||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Czy poniższe dane do
|
||||
faktury są prawidłowe?</p>
|
||||
|
||||
<div class="company-details">
|
||||
<input type="text" id="cmpName" class="company-input" style="font-weight:700; margin-bottom:4px;" readonly />
|
||||
<input type="text" id="cmpAddress" class="company-input" style="margin-bottom:4px;" readonly />
|
||||
<input type="text" id="cmpStreet" class="company-input" placeholder="Ulica i numer" style="margin-bottom:4px;"
|
||||
readonly />
|
||||
<div style="display: flex; gap: 8px; margin-bottom: 4px;">
|
||||
<input type="text" id="cmpZip" class="company-input" placeholder="Kod" style="flex: 1;" readonly />
|
||||
<input type="text" id="cmpCity" class="company-input" placeholder="Miasto" style="flex: 2;" readonly />
|
||||
</div>
|
||||
<input type="text" id="cmpNip" class="company-input muted" readonly />
|
||||
</div>
|
||||
|
||||
@@ -221,4 +368,5 @@
|
||||
|
||||
<script src="assets/js/stolik3_api.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user