385 lines
13 KiB
PHP
385 lines
13 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>KDS - Podgląd Zamówień</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-color: #0f172a;
|
|
--card-bg: #1e293b;
|
|
--text-main: #f8fafc;
|
|
--text-muted: #94a3b8;
|
|
--accent: #3b82f6;
|
|
--danger: #ef4444;
|
|
--success: #22c55e;
|
|
--warning: #f59e0b;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-main);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 30px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid #334155;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(to right, #60a5fa, #a78bfa);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 0.9rem;
|
|
color: var(--text-muted);
|
|
background: #1e293b;
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
border: 1px solid #334155;
|
|
}
|
|
|
|
.dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: var(--success);
|
|
box-shadow: 0 0 10px var(--success);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { transform: scale(0.95); opacity: 0.8; }
|
|
50% { transform: scale(1.2); opacity: 1; }
|
|
100% { transform: scale(0.95); opacity: 0.8; }
|
|
}
|
|
|
|
.kds-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
.order-card {
|
|
background-color: var(--card-bg);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
|
border: 1px solid #334155;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.order-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 15px 35px rgba(0,0,0,0.4);
|
|
border-color: #475569;
|
|
}
|
|
|
|
.order-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 2px solid #334155;
|
|
padding-bottom: 12px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.order-number {
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.order-time {
|
|
font-size: 0.9rem;
|
|
color: var(--text-muted);
|
|
background: #0f172a;
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
border: 1px solid #334155;
|
|
}
|
|
|
|
.order-table {
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 15px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.order-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: 8px;
|
|
border-left: 4px solid var(--warning);
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.item:hover {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.item-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.item-name {
|
|
font-weight: 600;
|
|
font-size: 1.05rem;
|
|
margin-bottom: 4px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.item-note {
|
|
font-size: 0.85rem;
|
|
color: var(--danger);
|
|
font-style: italic;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.item-note::before {
|
|
content: "•";
|
|
color: var(--danger);
|
|
}
|
|
|
|
.item-qty {
|
|
font-weight: 800;
|
|
font-size: 1.3rem;
|
|
background: var(--bg-color);
|
|
min-width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
margin-left: 15px;
|
|
color: var(--warning);
|
|
border: 1px solid #334155;
|
|
}
|
|
|
|
#loading {
|
|
grid-column: 1 / -1;
|
|
text-align: center;
|
|
padding: 50px;
|
|
color: var(--text-muted);
|
|
font-size: 1.2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.loader-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid #334155;
|
|
border-top: 4px solid var(--accent);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1>Widok KDS</h1>
|
|
<div class="status-indicator">
|
|
<div class="dot" id="connection-dot"></div>
|
|
<span id="last-sync">Łączenie z bazą...</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="kds-grid" class="kds-grid">
|
|
<div id="loading">
|
|
<div class="loader-spinner"></div>
|
|
Pobieranie zamówień...
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const grid = document.getElementById('kds-grid');
|
|
const lastSyncEl = document.getElementById('last-sync');
|
|
const dotEl = document.getElementById('connection-dot');
|
|
let previousDataString = "";
|
|
|
|
async function fetchOrders() {
|
|
try {
|
|
const response = await fetch('../../api/kds.php?kds_secret=karczma_kuchnia');
|
|
const result = await response.json();
|
|
|
|
if (result.status === 'success') {
|
|
const dataString = JSON.stringify(result.data);
|
|
|
|
// Odśwież DOM tylko gdy dane się zmieniły (żeby kafelki nie mrugały co 3s)
|
|
if (dataString !== previousDataString) {
|
|
renderKDS(result.data);
|
|
previousDataString = dataString;
|
|
}
|
|
|
|
const now = new Date();
|
|
lastSyncEl.innerText = `Ostatnia synchronizacja: ${now.toLocaleTimeString()}`;
|
|
dotEl.style.backgroundColor = 'var(--success)';
|
|
dotEl.style.boxShadow = '0 0 10px var(--success)';
|
|
} else {
|
|
showError(result.message);
|
|
}
|
|
} catch (err) {
|
|
showError("Błąd połączenia z API (sprawdź serwer)");
|
|
}
|
|
}
|
|
|
|
function showError(msg) {
|
|
lastSyncEl.innerText = `Problem: ${msg}`;
|
|
dotEl.style.backgroundColor = 'var(--danger)';
|
|
dotEl.style.boxShadow = '0 0 10px var(--danger)';
|
|
}
|
|
|
|
function renderKDS(items) {
|
|
if (items.length === 0) {
|
|
grid.innerHTML = '<div id="loading" style="font-weight: 600;">Brak aktywnych zamówień na ten moment.<br><span style="font-size:0.9rem;font-weight:400;opacity:0.7">Oczekuję na nowe wpisy...</span></div>';
|
|
return;
|
|
}
|
|
|
|
// Grupowanie po rachunku
|
|
const orders = {};
|
|
items.forEach(item => {
|
|
const orderId = item.NumerRachunku || item.NumerRecznyRachunku || 'Nieznany';
|
|
if (!orders[orderId]) {
|
|
orders[orderId] = {
|
|
number: orderId,
|
|
stolik: item.NazwaStolika || item.StolikID,
|
|
time: item.DataDodania,
|
|
groups: {}
|
|
};
|
|
}
|
|
|
|
// Identyfikator grupy: jeśli item ma GrupaZestawuID, to należy do zestawu, w przeciwnym razie jest osobnym bytem
|
|
const groupId = item.GrupaZestawuID || item.PozycjaID;
|
|
|
|
if (!orders[orderId].groups[groupId]) {
|
|
orders[orderId].groups[groupId] = {
|
|
isZestaw: !!item.GrupaZestawuID,
|
|
name: item.NazwaZestawu || item.NazwaTowaru,
|
|
qty: item.GrupaZestawuID ? 1 : parseFloat(item.Ilosc), // dla zestawu zakładamy x1 (lub można by wyciągnąć z bazy)
|
|
note: item.GrupaZestawuID ? '' : item.Notatka,
|
|
subitems: []
|
|
};
|
|
}
|
|
|
|
if (item.GrupaZestawuID) {
|
|
// Jest to składnik/subprodukt zestawu
|
|
orders[orderId].groups[groupId].subitems.push({
|
|
name: item.NazwaTowaru,
|
|
qty: parseFloat(item.Ilosc),
|
|
note: item.Notatka
|
|
});
|
|
}
|
|
});
|
|
|
|
grid.innerHTML = '';
|
|
|
|
const sortedOrders = Object.values(orders).sort((a, b) => new Date(a.time) - new Date(b.time));
|
|
|
|
sortedOrders.forEach(order => {
|
|
const timeStr = new Date(order.time).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
|
const stolikText = order.stolik ? `STOLIK: ${order.stolik}` : 'BRAK STOLIKA';
|
|
|
|
let itemsHtml = '';
|
|
|
|
Object.values(order.groups).forEach(grp => {
|
|
const mainNoteHtml = grp.note ? `<div class="item-note">${grp.note}</div>` : '';
|
|
|
|
let subItemsHtml = '';
|
|
if (grp.subitems.length > 0) {
|
|
subItemsHtml = '<div style="margin-top: 5px; font-size: 0.95rem; color: var(--text-muted); padding-left: 10px;">';
|
|
grp.subitems.forEach(sub => {
|
|
const subNote = sub.note ? `<span style="color:var(--danger); font-style:italic; font-size:0.8rem"> (${sub.note})</span>` : '';
|
|
subItemsHtml += `<div style="margin-bottom: 3px;">* ${sub.name} ${subNote}</div>`;
|
|
});
|
|
subItemsHtml += '</div>';
|
|
}
|
|
|
|
itemsHtml += `
|
|
<div class="item" style="flex-direction: column; align-items: stretch;">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
|
|
<div class="item-details">
|
|
<div class="item-name">${grp.name || 'Nieznana pozycja'}</div>
|
|
${mainNoteHtml}
|
|
</div>
|
|
<div class="item-qty">x${grp.qty}</div>
|
|
</div>
|
|
${subItemsHtml}
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
const cardHtml = `
|
|
<div class="order-card">
|
|
<div class="order-header">
|
|
<div class="order-number">#${order.number}</div>
|
|
<div class="order-time">${timeStr}</div>
|
|
</div>
|
|
<div class="order-table">${stolikText}</div>
|
|
<div class="order-items">
|
|
${itemsHtml}
|
|
</div>
|
|
</div>
|
|
`;
|
|
grid.insertAdjacentHTML('beforeend', cardHtml);
|
|
});
|
|
}
|
|
|
|
// Pierwsze pobranie
|
|
fetchOrders();
|
|
|
|
// Pętla odświeżania co 3 sekundy
|
|
setInterval(fetchOrders, 3000);
|
|
</script>
|
|
</body>
|
|
</html>
|