336 lines
13 KiB
PHP
336 lines
13 KiB
PHP
<?php
|
|
require_once __DIR__ . '/db/config.php';
|
|
$pdo = db();
|
|
|
|
// Fetch active advertisement images
|
|
$stmt = $pdo->prepare("SELECT * FROM ads_images WHERE is_active = 1 ORDER BY sort_order ASC");
|
|
$stmt->execute();
|
|
$ads = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
|
|
// Get current outlet (default to 1 if not specified)
|
|
$outlet_id = isset($_GET['outlet_id']) ? (int)$_GET['outlet_id'] : 1;
|
|
$debug = isset($_GET['debug']) ? true : false;
|
|
|
|
// Fetch company settings for branding
|
|
$stmt = $pdo->query("SELECT * FROM company_settings LIMIT 1");
|
|
$company = $stmt->fetch(PDO::FETCH_ASSOC);
|
|
$companyName = $company['company_name'] ?? 'Foody';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Now Serving & Ads - <?= htmlspecialchars($companyName) ?></title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
|
<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=Inter:wght@400;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary-color: #0d6efd;
|
|
--ready-color: #198754;
|
|
--preparing-color: #0dcaf0;
|
|
--bg-dark: #121212;
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--bg-dark);
|
|
color: white;
|
|
overflow: hidden;
|
|
height: 100vh !important;
|
|
width: 100vw !important;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.main-container {
|
|
display: flex;
|
|
height: 100vh !important;
|
|
width: 100vw !important;
|
|
transition: all 0.5s ease;
|
|
position: relative;
|
|
border: <?= $debug ? '10px solid orange' : 'none' ?>;
|
|
box-sizing: border-box;
|
|
}
|
|
.serving-board {
|
|
flex: 0 0 35%;
|
|
background-color: #1a1a1a;
|
|
border-right: 2px solid #333;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 2rem;
|
|
transition: all 0.5s ease;
|
|
z-index: 20;
|
|
overflow: hidden;
|
|
}
|
|
.ads-slider {
|
|
flex: 1;
|
|
position: relative;
|
|
background-color: <?= $debug ? '#222' : '#000' ?>;
|
|
overflow: hidden;
|
|
height: 100vh !important;
|
|
z-index: 10;
|
|
border: <?= $debug ? '10px solid lime' : 'none' ?>;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#adCarousel, .carousel-inner {
|
|
height: 100% !important;
|
|
width: 100% !important;
|
|
position: relative;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Fullscreen Ads Class */
|
|
.fullscreen-ads .serving-board {
|
|
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; }
|
|
|
|
/* Debug styling */
|
|
.debug-panel {
|
|
position: absolute;
|
|
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>
|
|
</head>
|
|
<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="serving-board">
|
|
<div class="board-header">
|
|
<h1 class="board-title">Order Status</h1>
|
|
<p class="text-muted"><?= htmlspecialchars($companyName) ?> #<?= $outlet_id ?></p>
|
|
</div>
|
|
<div class="mb-5">
|
|
<h2 class="section-title text-success"><i class="bi bi-bell-fill"></i> Ready</h2>
|
|
<div id="ready-orders" class="order-grid"><div class="empty-msg">...</div></div>
|
|
</div>
|
|
<div>
|
|
<h2 class="section-title text-info"><i class="bi bi-hourglass-split"></i> Preparing</h2>
|
|
<div id="preparing-orders" class="order-grid"><div class="empty-msg">...</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="ads-slider">
|
|
<?php if (!empty($ads)): ?>
|
|
<div id="adCarousel" class="carousel slide" data-bs-ride="carousel">
|
|
<div class="carousel-inner">
|
|
<?php foreach ($ads as $index => $ad): ?>
|
|
<div class="carousel-item <?= $index === 0 ? 'active' : '' ?>" data-index="<?= $index ?>">
|
|
<?php if ($debug): ?>
|
|
<div class="debug-marker">SLIDE <?= $index ?></div>
|
|
<?php endif; ?>
|
|
<img src="<?= htmlspecialchars($ad['image_path']) ?>?v=<?= time() ?>"
|
|
class="ad-image"
|
|
onload="imgLog(<?= $index ?>, this, 'OK')"
|
|
onerror="imgLog(<?= $index ?>, this, 'FAIL')">
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
<?php else: ?>
|
|
<div class="h-100 d-flex align-items-center justify-content-center">No Ads Found</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</button>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
function imgLog(idx, el, status) {
|
|
if (status === 'OK') {
|
|
// Log immediately
|
|
console.log(`IMG ${idx}: LOADED (${el.naturalWidth}x${el.naturalHeight})`);
|
|
|
|
// Log again after a delay to catch rendered dimensions
|
|
setTimeout(() => {
|
|
console.log(`IMG ${idx} RENDERED SIZE: ${el.clientWidth}x${el.clientHeight}`);
|
|
if (el.clientWidth === 0 || el.clientHeight === 0) {
|
|
console.error(`CRITICAL: IMG ${idx} has ZERO rendered dimensions!`);
|
|
}
|
|
}, 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 checkAllImages() {
|
|
console.log('--- MANUAL DIMENSION CHECK ---');
|
|
document.querySelectorAll('.ad-image').forEach((img, idx) => {
|
|
const parent = img.closest('.carousel-item');
|
|
const isActive = parent.classList.contains('active');
|
|
console.log(`[${idx}] Active: ${isActive} | Natural: ${img.naturalWidth}x${img.naturalHeight} | Rendered: ${img.clientWidth}x${img.clientHeight}`);
|
|
});
|
|
}
|
|
|
|
function toggleTest() {
|
|
document.body.classList.toggle('fullscreen-ads');
|
|
console.log('View Toggled');
|
|
}
|
|
|
|
// Debugging logic
|
|
<?php if ($debug): ?>
|
|
(function() {
|
|
const consoleDiv = document.getElementById('on-screen-console');
|
|
const originalLog = console.log;
|
|
const originalError = console.error;
|
|
|
|
function logToScreen(msg, color = '#0f0') {
|
|
const div = document.createElement('div');
|
|
div.style.marginBottom = '4px';
|
|
div.style.color = color;
|
|
div.textContent = '[' + new Date().toLocaleTimeString() + '] ' + msg;
|
|
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');
|
|
}
|
|
});
|
|
|
|
document.getElementById('toggle-view').addEventListener('click', toggleTest);
|
|
|
|
// Orders polling
|
|
async function fetchOrders() {
|
|
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();
|
|
|
|
setInterval(() => {
|
|
const clock = document.getElementById('clock');
|
|
if (clock) clock.textContent = new Date().toLocaleTimeString();
|
|
}, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|