Autosave: 20260223-072710
This commit is contained in:
Flatlogic Bot
parent
37dfb898e7
commit
21321721fc
@ -230,7 +230,7 @@ function getGroupToggleClass($pages) {
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<?php $posGroup = ['orders.php', 'ads.php']; ?>
|
<?php $posGroup = ['orders.php', 'ads.php', 'ad_edit.php']; ?>
|
||||||
<div class="nav-group">
|
<div class="nav-group">
|
||||||
<a class="sidebar-heading d-flex justify-content-between align-items-center text-decoration-none <?= getGroupToggleClass($posGroup) ?>"
|
<a class="sidebar-heading d-flex justify-content-between align-items-center text-decoration-none <?= getGroupToggleClass($posGroup) ?>"
|
||||||
data-bs-toggle="collapse" href="#collapsePos" role="button" aria-expanded="<?= isGroupExpanded($posGroup) ?>" aria-controls="collapsePos">
|
data-bs-toggle="collapse" href="#collapsePos" role="button" aria-expanded="<?= isGroupExpanded($posGroup) ?>" aria-controls="collapsePos">
|
||||||
@ -254,6 +254,11 @@ function getGroupToggleClass($pages) {
|
|||||||
<i class="bi bi-fire me-2"></i> Kitchen View
|
<i class="bi bi-fire me-2"></i> Kitchen View
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link <?= isActive('ads.php') || isActive('ad_edit.php') ? 'active' : '' ?>" href="ads.php">
|
||||||
|
<i class="bi bi-megaphone me-2"></i> Ads Management
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
412
ads.php
412
ads.php
@ -9,6 +9,7 @@ $ads = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|||||||
|
|
||||||
// Get current outlet (default to 1 if not specified)
|
// Get current outlet (default to 1 if not specified)
|
||||||
$outlet_id = isset($_GET['outlet_id']) ? (int)$_GET['outlet_id'] : 1;
|
$outlet_id = isset($_GET['outlet_id']) ? (int)$_GET['outlet_id'] : 1;
|
||||||
|
$debug = isset($_GET['debug']) ? true : false;
|
||||||
|
|
||||||
// Fetch company settings for branding
|
// Fetch company settings for branding
|
||||||
$stmt = $pdo->query("SELECT * FROM company_settings LIMIT 1");
|
$stmt = $pdo->query("SELECT * FROM company_settings LIMIT 1");
|
||||||
@ -38,13 +39,19 @@ $companyName = $company['company_name'] ?? 'Foody';
|
|||||||
background-color: var(--bg-dark);
|
background-color: var(--bg-dark);
|
||||||
color: white;
|
color: white;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 100vh;
|
height: 100vh !important;
|
||||||
|
width: 100vw !important;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
.main-container {
|
.main-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100vh;
|
height: 100vh !important;
|
||||||
width: 100vw;
|
width: 100vw !important;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
position: relative;
|
||||||
|
border: <?= $debug ? '10px solid orange' : 'none' ?>;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.serving-board {
|
.serving-board {
|
||||||
flex: 0 0 35%;
|
flex: 0 0 35%;
|
||||||
@ -53,250 +60,277 @@ $companyName = $company['company_name'] ?? 'Foody';
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
z-index: 20;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.ads-slider {
|
.ads-slider {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: black;
|
background-color: <?= $debug ? '#222' : '#000' ?>;
|
||||||
}
|
overflow: hidden;
|
||||||
.board-header {
|
height: 100vh !important;
|
||||||
text-align: center;
|
z-index: 10;
|
||||||
margin-bottom: 2rem;
|
border: <?= $debug ? '10px solid lime' : 'none' ?>;
|
||||||
border-bottom: 1px solid #333;
|
box-sizing: border-box;
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.board-title {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 800;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
.order-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
||||||
gap: 15px;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
.order-number {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 800;
|
|
||||||
padding: 1rem 0.5rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.order-ready {
|
|
||||||
background-color: var(--ready-color);
|
|
||||||
color: white;
|
|
||||||
animation: pulse 2s infinite;
|
|
||||||
}
|
|
||||||
.order-preparing {
|
|
||||||
background-color: #333;
|
|
||||||
color: #aaa;
|
|
||||||
border: 1px solid #444;
|
|
||||||
}
|
|
||||||
@keyframes pulse {
|
|
||||||
0% { transform: scale(1); }
|
|
||||||
50% { transform: scale(1.05); }
|
|
||||||
100% { transform: scale(1); }
|
|
||||||
}
|
|
||||||
.carousel-item img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
.carousel-caption {
|
|
||||||
background: rgba(0,0,0,0.6);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 1.5rem 2rem;
|
|
||||||
bottom: 5%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: fit-content;
|
|
||||||
max-width: 80%;
|
|
||||||
}
|
|
||||||
.caption-title {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 800;
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Toggle View Button */
|
#adCarousel, .carousel-inner {
|
||||||
#toggle-view {
|
height: 100% !important;
|
||||||
position: fixed;
|
width: 100% !important;
|
||||||
bottom: 20px;
|
position: relative;
|
||||||
right: 20px;
|
margin: 0 !important;
|
||||||
z-index: 1000;
|
padding: 0 !important;
|
||||||
opacity: 0.3;
|
}
|
||||||
transition: opacity 0.3s;
|
|
||||||
|
.carousel-item {
|
||||||
|
height: 100% !important;
|
||||||
|
width: 100% !important;
|
||||||
|
background-color: <?= $debug ? '#440044' : '#000' ?>;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-item.active {
|
||||||
|
display: block !important; /* Ensure active item is visible */
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-item img {
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
max-width: none !important;
|
||||||
|
max-height: none !important;
|
||||||
|
object-fit: contain !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
border: <?= $debug ? '8px solid cyan' : 'none' ?>;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: <?= $debug ? 'deeppink' : 'transparent' ?>;
|
||||||
|
position: relative;
|
||||||
|
z-index: 50;
|
||||||
}
|
}
|
||||||
#toggle-view:hover { opacity: 1; }
|
|
||||||
|
|
||||||
/* Fullscreen Ads Class */
|
/* Fullscreen Ads Class */
|
||||||
.fullscreen-ads .serving-board { display: none; }
|
.fullscreen-ads .serving-board {
|
||||||
.fullscreen-ads .ads-slider { flex: 0 0 100%; }
|
flex: 0 0 0% !important;
|
||||||
|
width: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
border: none !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
opacity: 0 !important;
|
||||||
|
}
|
||||||
|
.fullscreen-ads .ads-slider { flex: 0 0 100% !important; width: 100% !important; }
|
||||||
|
|
||||||
.empty-msg {
|
/* Debug styling */
|
||||||
font-size: 1.2rem;
|
.debug-panel {
|
||||||
color: #555;
|
position: absolute;
|
||||||
font-style: italic;
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
background: rgba(255,0,0,0.95);
|
||||||
|
color: white;
|
||||||
|
padding: 15px;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
z-index: 999999;
|
||||||
|
border-radius: 8px;
|
||||||
|
max-width: 500px;
|
||||||
|
box-shadow: 0 0 20px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
#on-screen-console {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 20px;
|
||||||
|
width: 550px;
|
||||||
|
max-height: 400px;
|
||||||
|
background: rgba(0,0,0,0.95);
|
||||||
|
color: #0f0;
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 15px;
|
||||||
|
overflow-y: auto;
|
||||||
|
z-index: 999999;
|
||||||
|
border: 3px solid #0f0;
|
||||||
|
display: <?= $debug ? 'block' : 'none' ?>;
|
||||||
|
}
|
||||||
|
.debug-marker {
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
right: 40px;
|
||||||
|
font-size: 4rem;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #fff;
|
||||||
|
z-index: 1000;
|
||||||
|
background: rgba(0,0,0,0.7);
|
||||||
|
padding: 20px;
|
||||||
|
pointer-events: none;
|
||||||
|
border: 4px solid white;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="split-view">
|
<body class="split-view">
|
||||||
|
|
||||||
|
<?php if ($debug): ?>
|
||||||
|
<div class="debug-panel">
|
||||||
|
<strong>STRICT DEBUG PANEL</strong><br>
|
||||||
|
Ads Found: <?= count($ads) ?><br>
|
||||||
|
Viewport: <span id="vp-info">?</span><br>
|
||||||
|
<hr>
|
||||||
|
<div class="d-flex flex-wrap gap-1">
|
||||||
|
<button onclick="checkAllImages()" class="btn btn-warning btn-sm">FORCE DIMENSION CHECK</button>
|
||||||
|
<button onclick="location.href='?'" class="btn btn-light btn-sm">Exit Debug</button>
|
||||||
|
<button onclick="location.reload()" class="btn btn-info btn-sm">Reload</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="on-screen-console"></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
<div class="main-container" id="main-view">
|
<div class="main-container" id="main-view">
|
||||||
<!-- Left: Serving Board -->
|
|
||||||
<div class="serving-board">
|
<div class="serving-board">
|
||||||
<div class="board-header">
|
<div class="board-header">
|
||||||
<h1 class="board-title">Order Status</h1>
|
<h1 class="board-title">Order Status</h1>
|
||||||
<p class="text-muted"><?= htmlspecialchars($companyName) ?> Outlet #<?= $outlet_id ?></p>
|
<p class="text-muted"><?= htmlspecialchars($companyName) ?> #<?= $outlet_id ?></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-5">
|
<div class="mb-5">
|
||||||
<h2 class="section-title text-success">
|
<h2 class="section-title text-success"><i class="bi bi-bell-fill"></i> Ready</h2>
|
||||||
<i class="bi bi-bell-fill"></i> Now Serving
|
<div id="ready-orders" class="order-grid"><div class="empty-msg">...</div></div>
|
||||||
</h2>
|
|
||||||
<div id="ready-orders" class="order-grid">
|
|
||||||
<!-- Ready orders injected here -->
|
|
||||||
<div class="empty-msg">No orders ready</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h2 class="section-title text-info">
|
<h2 class="section-title text-info"><i class="bi bi-hourglass-split"></i> Preparing</h2>
|
||||||
<i class="bi bi-hourglass-split"></i> Preparing
|
<div id="preparing-orders" class="order-grid"><div class="empty-msg">...</div></div>
|
||||||
</h2>
|
|
||||||
<div id="preparing-orders" class="order-grid">
|
|
||||||
<!-- Preparing orders injected here -->
|
|
||||||
<div class="empty-msg">No orders preparing</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-auto pt-4 border-top border-dark text-center text-muted">
|
|
||||||
<small id="clock"></small>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mt-auto pt-4 border-top border-dark text-center text-muted"><small id="clock"></small></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Right: Ads Slider -->
|
|
||||||
<div class="ads-slider">
|
<div class="ads-slider">
|
||||||
<?php if (!empty($ads)): ?>
|
<?php if (!empty($ads)): ?>
|
||||||
<div id="adCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="10000">
|
<div id="adCarousel" class="carousel slide" data-bs-ride="carousel">
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<?php foreach ($ads as $index => $ad): ?>
|
<?php foreach ($ads as $index => $ad): ?>
|
||||||
<div class="carousel-item <?= $index === 0 ? 'active' : '' ?>">
|
<div class="carousel-item <?= $index === 0 ? 'active' : '' ?>" data-index="<?= $index ?>">
|
||||||
<img src="<?= htmlspecialchars($ad['image_path']) ?>" alt="<?= htmlspecialchars($ad['title'] ?? '') ?>">
|
<?php if ($debug): ?>
|
||||||
<?php if (!empty($ad['title'])): ?>
|
<div class="debug-marker">SLIDE <?= $index ?></div>
|
||||||
<div class="carousel-caption d-none d-md-block">
|
|
||||||
<h5 class="caption-title"><?= htmlspecialchars($ad['title']) ?></h5>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
<img src="<?= htmlspecialchars($ad['image_path']) ?>?v=<?= time() ?>"
|
||||||
|
class="ad-image"
|
||||||
|
onload="imgLog(<?= $index ?>, this, 'OK')"
|
||||||
|
onerror="imgLog(<?= $index ?>, this, 'FAIL')">
|
||||||
</div>
|
</div>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted">
|
<div class="h-100 d-flex align-items-center justify-content-center">No Ads Found</div>
|
||||||
<i class="bi bi-images fs-1 mb-3"></i>
|
|
||||||
<p>No advertisements uploaded yet.</p>
|
|
||||||
<small>Go to Admin > Ads Management to upload pictures.</small>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button id="toggle-view" class="btn btn-dark btn-sm rounded-circle shadow">
|
<button id="toggle-view" class="btn btn-dark btn-sm rounded-circle shadow" style="position:fixed; bottom:20px; right:20px; z-index:10000; opacity:0.5;">
|
||||||
<i class="bi bi-fullscreen"></i>
|
<i class="bi bi-fullscreen"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
const OUTLET_ID = <?= $outlet_id ?>;
|
function imgLog(idx, el, status) {
|
||||||
let isFullscreen = false;
|
if (status === 'OK') {
|
||||||
|
// Log immediately
|
||||||
// Fetch Orders for the Board
|
console.log(`IMG ${idx}: LOADED (${el.naturalWidth}x${el.naturalHeight})`);
|
||||||
async function fetchBoardOrders() {
|
|
||||||
try {
|
// Log again after a delay to catch rendered dimensions
|
||||||
const response = await fetch('api/kitchen.php?outlet_id=' + OUTLET_ID);
|
setTimeout(() => {
|
||||||
if (!response.ok) throw new Error('Network response was not ok');
|
console.log(`IMG ${idx} RENDERED SIZE: ${el.clientWidth}x${el.clientHeight}`);
|
||||||
const orders = await response.json();
|
if (el.clientWidth === 0 || el.clientHeight === 0) {
|
||||||
updateBoard(orders);
|
console.error(`CRITICAL: IMG ${idx} has ZERO rendered dimensions!`);
|
||||||
} catch (error) {
|
}
|
||||||
console.error('Error fetching orders:', error);
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
console.error(`IMG ${idx}: FAILED TO LOAD - check path: ${el.src}`);
|
||||||
|
el.src = 'https://via.placeholder.com/1920x1080/cc0000/FFFFFF?text=ERROR+LOADING+IMAGE+'+idx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateBoard(orders) {
|
function checkAllImages() {
|
||||||
const readyContainer = document.getElementById('ready-orders');
|
console.log('--- MANUAL DIMENSION CHECK ---');
|
||||||
const preparingContainer = document.getElementById('preparing-orders');
|
document.querySelectorAll('.ad-image').forEach((img, idx) => {
|
||||||
|
const parent = img.closest('.carousel-item');
|
||||||
const readyOrders = orders.filter(o => o.status === 'ready');
|
const isActive = parent.classList.contains('active');
|
||||||
const preparingOrders = orders.filter(o => o.status === 'preparing');
|
console.log(`[${idx}] Active: ${isActive} | Natural: ${img.naturalWidth}x${img.naturalHeight} | Rendered: ${img.clientWidth}x${img.clientHeight}`);
|
||||||
|
});
|
||||||
// Render Ready
|
|
||||||
if (readyOrders.length > 0) {
|
|
||||||
readyContainer.innerHTML = readyOrders.map(o => `
|
|
||||||
<div class="order-number order-ready">${o.id}</div>
|
|
||||||
`).join('');
|
|
||||||
} else {
|
|
||||||
readyContainer.innerHTML = '<div class="empty-msg">Waiting for orders...</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Render Preparing
|
|
||||||
if (preparingOrders.length > 0) {
|
|
||||||
preparingContainer.innerHTML = preparingOrders.map(o => `
|
|
||||||
<div class="order-number order-preparing">${o.id}</div>
|
|
||||||
`).join('');
|
|
||||||
} else {
|
|
||||||
preparingContainer.innerHTML = '<div class="empty-msg">No active prep</div>';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Toggle View Logic (Alternate between Split and Fullscreen Ads)
|
function toggleTest() {
|
||||||
const toggleBtn = document.getElementById('toggle-view');
|
document.body.classList.toggle('fullscreen-ads');
|
||||||
toggleBtn.addEventListener('click', () => {
|
console.log('View Toggled');
|
||||||
isFullscreen = !isFullscreen;
|
}
|
||||||
const body = document.body;
|
|
||||||
const icon = toggleBtn.querySelector('i');
|
// Debugging logic
|
||||||
|
<?php if ($debug): ?>
|
||||||
|
(function() {
|
||||||
|
const consoleDiv = document.getElementById('on-screen-console');
|
||||||
|
const originalLog = console.log;
|
||||||
|
const originalError = console.error;
|
||||||
|
|
||||||
if (isFullscreen) {
|
function logToScreen(msg, color = '#0f0') {
|
||||||
body.classList.add('fullscreen-ads');
|
const div = document.createElement('div');
|
||||||
icon.classList.replace('bi-fullscreen', 'bi-fullscreen-exit');
|
div.style.marginBottom = '4px';
|
||||||
} else {
|
div.style.color = color;
|
||||||
body.classList.remove('fullscreen-ads');
|
div.textContent = '[' + new Date().toLocaleTimeString() + '] ' + msg;
|
||||||
icon.classList.replace('bi-fullscreen-exit', 'bi-fullscreen');
|
consoleDiv.appendChild(div);
|
||||||
|
consoleDiv.scrollTop = consoleDiv.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log = function() {
|
||||||
|
originalLog.apply(console, arguments);
|
||||||
|
logToScreen(Array.from(arguments).join(' '), '#0f0');
|
||||||
|
};
|
||||||
|
console.error = function() {
|
||||||
|
originalError.apply(console, arguments);
|
||||||
|
logToScreen(Array.from(arguments).join(' '), '#f55');
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
document.getElementById('vp-info').textContent = window.innerWidth + 'x' + window.innerHeight;
|
||||||
|
console.log('Window Load Complete');
|
||||||
|
const slider = document.querySelector('.ads-slider');
|
||||||
|
console.log('Slider Container Viewport Size: ' + slider.clientWidth + 'x' + slider.clientHeight);
|
||||||
|
|
||||||
|
// Auto check after 2 seconds
|
||||||
|
setTimeout(checkAllImages, 2000);
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const el = document.querySelector('#adCarousel');
|
||||||
|
if (el) {
|
||||||
|
new bootstrap.Carousel(el, { interval: 5000, ride: 'carousel', pause: false });
|
||||||
|
console.log('Bootstrap Carousel Initialized');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Auto-alternate every 30 seconds (Optional, but user mentioned "alternatively")
|
document.getElementById('toggle-view').addEventListener('click', toggleTest);
|
||||||
setInterval(() => {
|
|
||||||
// If you want it to auto-switch, uncomment below:
|
// Orders polling
|
||||||
toggleBtn.click();
|
async function fetchOrders() {
|
||||||
}, 15000);
|
try {
|
||||||
|
const res = await fetch('api/kitchen.php?outlet_id=<?= $outlet_id ?>');
|
||||||
|
if (!res.ok) throw new Error('API Error');
|
||||||
|
const orders = await res.json();
|
||||||
|
const r = document.getElementById('ready-orders');
|
||||||
|
const p = document.getElementById('preparing-orders');
|
||||||
|
const ready = orders.filter(o => o.status === 'ready');
|
||||||
|
const prep = orders.filter(o => o.status === 'preparing');
|
||||||
|
r.innerHTML = ready.length ? ready.map(o => `<div class="order-number order-ready" style="background:#198754; color:white; padding:10px; margin:5px; border-radius:5px; display:inline-block; font-size:2rem; font-weight:bold;">${o.id}</div>`).join('') : '<div class="text-muted">No orders ready</div>';
|
||||||
|
p.innerHTML = prep.length ? prep.map(o => `<div class="order-number order-preparing" style="background:#0dcaf0; color:black; padding:10px; margin:5px; border-radius:5px; display:inline-block; font-size:2rem; font-weight:bold;">${o.id}</div>`).join('') : '<div class="text-muted">No orders preparing</div>';
|
||||||
|
} catch(e) {
|
||||||
|
if (typeof console.error === 'function') console.error('Fetch Orders Failed: ' + e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setInterval(fetchOrders, 5000);
|
||||||
|
fetchOrders();
|
||||||
|
|
||||||
// Clock
|
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
const clock = document.getElementById('clock');
|
const clock = document.getElementById('clock');
|
||||||
if (clock) {
|
if (clock) clock.textContent = new Date().toLocaleTimeString();
|
||||||
const now = new Date();
|
|
||||||
clock.textContent = now.toLocaleDateString() + ' ' + now.toLocaleTimeString();
|
|
||||||
}
|
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
|
||||||
// Initial Fetch & Poll
|
|
||||||
fetchBoardOrders();
|
|
||||||
setInterval(fetchBoardOrders, 5000); // Poll every 5s for the board
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -57,8 +57,29 @@ if ($_SERVER['REQUEST_METHOD'] === 'GET') {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
// Update order status
|
// Update order status or bulk action
|
||||||
$data = json_decode(file_get_contents('php://input'), true);
|
$data = json_decode(file_get_contents('php://input'), true);
|
||||||
|
$action = $data['action'] ?? null;
|
||||||
|
$outletId = $data['outlet_id'] ?? null;
|
||||||
|
|
||||||
|
if ($action === 'serve_all') {
|
||||||
|
if (!$outletId) {
|
||||||
|
http_response_code(400);
|
||||||
|
echo json_encode(['error' => 'Missing outlet_id for serve_all']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
$stmt = $pdo->prepare("UPDATE orders SET status = 'completed' WHERE outlet_id = ? AND status IN ('pending', 'preparing', 'ready')");
|
||||||
|
$stmt->execute([$outletId]);
|
||||||
|
echo json_encode(['success' => true]);
|
||||||
|
} catch (Exception $e) {
|
||||||
|
http_response_code(500);
|
||||||
|
echo json_encode(['error' => $e->getMessage()]);
|
||||||
|
}
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
$orderId = $data['order_id'] ?? null;
|
$orderId = $data['order_id'] ?? null;
|
||||||
$newStatus = $data['status'] ?? null;
|
$newStatus = $data['status'] ?? null;
|
||||||
|
|
||||||
|
|||||||
BIN
assets/images/ads/ad_699bf2574849b.jpeg
Normal file
BIN
assets/images/ads/ad_699bf2574849b.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
assets/images/ads/ad_699bf270e9a69.jpeg
Normal file
BIN
assets/images/ads/ad_699bf270e9a69.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
BIN
assets/images/ads/ad_699bf288c457c.jpg
Normal file
BIN
assets/images/ads/ad_699bf288c457c.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
36
kitchen.php
36
kitchen.php
@ -101,6 +101,10 @@ if (!has_permission('all')) {
|
|||||||
</select>
|
</select>
|
||||||
<span id="clock" class="text-muted d-none d-md-inline"></span>
|
<span id="clock" class="text-muted d-none d-md-inline"></span>
|
||||||
|
|
||||||
|
<button class="btn btn-danger btn-sm" onclick="serveAll()">
|
||||||
|
<i class="bi bi-check2-all"></i> Serve All
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<button class="btn btn-sm btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
<button class="btn btn-sm btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||||||
<i class="bi bi-person-circle"></i> <?= htmlspecialchars($currentUser['username']) ?>
|
<i class="bi bi-person-circle"></i> <?= htmlspecialchars($currentUser['username']) ?>
|
||||||
@ -246,6 +250,38 @@ async function performUpdate(orderId, newStatus) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function serveAll() {
|
||||||
|
const result = await Swal.fire({
|
||||||
|
title: 'Serve All Orders?',
|
||||||
|
text: "This will mark all active orders as completed and clear the screen.",
|
||||||
|
icon: 'warning',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonColor: '#d33',
|
||||||
|
cancelButtonColor: '#3085d6',
|
||||||
|
confirmButtonText: 'Yes, Serve All!'
|
||||||
|
});
|
||||||
|
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
try {
|
||||||
|
const response = await fetch('api/kitchen.php', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ action: 'serve_all', outlet_id: OUTLET_ID })
|
||||||
|
});
|
||||||
|
const data = await response.json();
|
||||||
|
if (data.success) {
|
||||||
|
fetchOrders();
|
||||||
|
Swal.fire('Cleared!', 'All orders have been served.', 'success');
|
||||||
|
} else {
|
||||||
|
Swal.fire('Error', data.error || 'Failed to clear orders', 'error');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error:', error);
|
||||||
|
Swal.fire('Error', 'Server connection failed', 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Outlet Selector Logic
|
// Outlet Selector Logic
|
||||||
const outletSelector = document.getElementById('outlet-selector');
|
const outletSelector = document.getElementById('outlet-selector');
|
||||||
if (outletSelector) {
|
if (outletSelector) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user