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

feat: implement user profile initialization and order history management for stolik3_api

Browse Source
This commit is contained in:
Bartek
2026-05-25 23:05:10 +02:00
parent a5adf77d44
commit 9e3f648625
2 changed files with 816 additions and 633 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/js/stolik3_api.js
+132 -8
View File
@@ -23,6 +23,98 @@ window.selectedAnimationHtml = null;
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);
}
const now = Date.now();
// Check if profile exists and is valid
if (profile) {
if (profile.declined) {
// User declined in the past, don't ask again.
return;
}
// 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();
}
}
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
initUserProfile();
// UI Elements
const loadingScreen = document.getElementById("loadingScreen");
const loaderMsg = document.getElementById("loaderMsg");
@@ -63,6 +155,10 @@ window.selectedAnimationHtml = null;
setTimeout(() => {
loadingScreen.classList.add("hidden");
clearInterval(msgInterval);
const bottomNav = document.getElementById("bottomNav");
if (bottomNav) {
bottomNav.style.display = "";
}
}, remaining);
}
@@ -98,12 +194,15 @@ window.selectedAnimationHtml = null;
}
function showEmptyState() {
const title = document.getElementById("ordersTitle");
if (title) title.classList.add("hidden");
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();
}
@@ -223,6 +322,14 @@ window.selectedAnimationHtml = null;
});
}
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();
@@ -273,6 +380,9 @@ window.selectedAnimationHtml = null;
}
function renderItems(items) {
const title = document.getElementById("ordersTitle");
if (title) title.classList.remove("hidden");
emptyState.classList.add("hidden");
itemsList.innerHTML = "";
@@ -605,17 +715,23 @@ 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");
@@ -624,24 +740,32 @@ window.selectedAnimationHtml = null;
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 () {
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", {
public/stolik3_api.html
+82 -23
View File
@@ -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">
@@ -24,6 +28,9 @@
<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,20 +53,27 @@
</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>
@@ -76,10 +90,17 @@
</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;">
&copy; 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 +123,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 +171,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 +209,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 +232,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 +246,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 +279,5 @@
<script src="assets/js/stolik3_api.js"></script>
</body>
</html>