146 lines
5.5 KiB
Plaintext
146 lines
5.5 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kitchen Display - Kitchen Agent</title>
|
|
<link rel="stylesheet" href="/public/css/style.css">
|
|
</head>
|
|
<body class="dashboard-page">
|
|
<header class="main-header">
|
|
<div class="header-content">
|
|
<h1>Kitchen Display</h1>
|
|
<div class="connection-status-bar" id="connectionStatusBar">
|
|
<div class="connection-status-item" id="localConnectionStatus" title="Connection to local dashboard server">
|
|
<span class="status-indicator status-checking"></span>
|
|
<span class="status-text">Dashboard</span>
|
|
<span class="status-label" id="localStatusLabel">Checking...</span>
|
|
</div>
|
|
<div class="connection-status-item" id="apiConnectionStatus" title="Connection to api.thinklink.ai">
|
|
<span class="status-indicator status-checking"></span>
|
|
<span class="status-text">API Server</span>
|
|
<span class="status-label" id="apiStatusLabel">Checking...</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-actions">
|
|
<a href="/settings" class="btn btn-secondary">Settings</a>
|
|
<a href="/auth/logout" class="btn btn-secondary">Logout</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<% if (showStats) { %>
|
|
<div class="stats-bar" id="statsBar">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Today</div>
|
|
<div class="stat-value" id="stat-total"><%= stats.total %></div>
|
|
</div>
|
|
<div class="stat-card stat-new">
|
|
<div class="stat-label">New</div>
|
|
<div class="stat-value" id="stat-new"><%= stats.new %></div>
|
|
</div>
|
|
<div class="stat-card stat-preparing">
|
|
<div class="stat-label">Preparing</div>
|
|
<div class="stat-value" id="stat-preparing"><%= stats.preparing %></div>
|
|
</div>
|
|
<div class="stat-card stat-ready">
|
|
<div class="stat-label">Ready</div>
|
|
<div class="stat-value" id="stat-ready"><%= stats.ready %></div>
|
|
</div>
|
|
</div>
|
|
<% } %>
|
|
|
|
<div class="dashboard-controls">
|
|
<div class="filter-buttons">
|
|
<button class="filter-btn active" data-filter="all">All Orders</button>
|
|
<button class="filter-btn" data-filter="new">New</button>
|
|
<button class="filter-btn" data-filter="preparing">Preparing</button>
|
|
<button class="filter-btn" data-filter="ready">Ready</button>
|
|
</div>
|
|
<button class="btn btn-secondary sync-button" id="syncButton" onclick="manualSync()" title="Check for new orders now">
|
|
<span class="sync-spinner"></span>
|
|
<span class="sync-text">Sync Now</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="orders-container" id="ordersContainer">
|
|
<div class="loading">Loading orders...</div>
|
|
</div>
|
|
|
|
<!-- Status Change Confirmation Modal -->
|
|
<div class="modal" id="statusChangeModal">
|
|
<div class="modal-content status-modal-content">
|
|
<div class="status-modal-icon" id="statusModalIcon">
|
|
<!-- Icon will be set dynamically -->
|
|
</div>
|
|
<h2 id="statusModalTitle">Confirm Status Change</h2>
|
|
<div class="status-modal-details">
|
|
<div class="status-modal-row">
|
|
<span class="status-modal-label">Order #:</span>
|
|
<span class="status-modal-value" id="statusModalOrderId">-</span>
|
|
</div>
|
|
<div class="status-modal-row">
|
|
<span class="status-modal-label">Customer:</span>
|
|
<span class="status-modal-value" id="statusModalCustomer">-</span>
|
|
</div>
|
|
<div class="status-modal-row status-transition-row">
|
|
<div class="status-transition">
|
|
<span class="status-badge" id="statusModalFrom">-</span>
|
|
<span class="status-arrow">→</span>
|
|
<span class="status-badge" id="statusModalTo">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="status-modal-message" id="statusModalMessage">
|
|
Are you sure you want to change this order's status?
|
|
</p>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-secondary" onclick="closeStatusChangeModal()">Cancel</button>
|
|
<button class="btn btn-success status-confirm-btn" id="statusConfirmBtn" onclick="confirmStatusChange()">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cancel Modal -->
|
|
<div class="modal" id="cancelModal">
|
|
<div class="modal-content">
|
|
<h2>Cancel Order</h2>
|
|
<p>Are you sure you want to cancel this order?</p>
|
|
<div class="form-group">
|
|
<label for="cancelReason">Reason (optional):</label>
|
|
<textarea id="cancelReason" rows="3" placeholder="Enter cancellation reason..."></textarea>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-secondary" onclick="closeCancelModal()">Cancel</button>
|
|
<button class="btn btn-danger" onclick="confirmCancel()">Confirm Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Details Modal -->
|
|
<div class="modal" id="detailsModal">
|
|
<div class="modal-content modal-large">
|
|
<div class="modal-header">
|
|
<h2>Order Details</h2>
|
|
<button class="close-btn" onclick="closeDetailsModal()">×</button>
|
|
</div>
|
|
<div id="orderDetailsContent">
|
|
<!-- Content will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notification -->
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script>
|
|
const config = {
|
|
dashboardRefreshInterval: <%= config.dashboardRefreshInterval || 10000 %>
|
|
};
|
|
</script>
|
|
<script src="/public/js/common.js"></script>
|
|
<script src="/public/js/dashboard.js"></script>
|
|
</body>
|
|
</html>
|
|
|