954 lines
30 KiB
JavaScript
954 lines
30 KiB
JavaScript
|
// Dashboard functionality
|
|||
|
|
|
|||
|
|
let currentFilter = 'all';
|
|||
|
|
let currentOrderIdForCancel = null;
|
|||
|
|
let pendingStatusChange = {
|
|||
|
|
orderId: null,
|
|||
|
|
newStatus: null,
|
|||
|
|
currentStatus: null,
|
|||
|
|
orderData: null
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Track orders for notification detection
|
|||
|
|
let previousOrderIds = new Set();
|
|||
|
|
let previousCanceledOrderIds = new Set();
|
|||
|
|
let isFirstLoad = true;
|
|||
|
|
|
|||
|
|
// Connection status tracking
|
|||
|
|
const connectionStatus = {
|
|||
|
|
local: {
|
|||
|
|
status: 'checking',
|
|||
|
|
lastCheck: null,
|
|||
|
|
consecutiveFailures: 0
|
|||
|
|
},
|
|||
|
|
api: {
|
|||
|
|
status: 'checking',
|
|||
|
|
lastCheck: null,
|
|||
|
|
consecutiveFailures: 0,
|
|||
|
|
responseTime: null
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Audio notification system
|
|||
|
|
const audioNotification = {
|
|||
|
|
newOrderSound: null,
|
|||
|
|
canceledOrderSound: null,
|
|||
|
|
enabled: true,
|
|||
|
|
|
|||
|
|
init: function() {
|
|||
|
|
// Load notification settings from server
|
|||
|
|
fetch('/api/notification-settings')
|
|||
|
|
.then(response => response.json())
|
|||
|
|
.then(data => {
|
|||
|
|
if (!data.error) {
|
|||
|
|
this.enabled = data.soundNotificationsEnabled !== 'false';
|
|||
|
|
const newOrderPath = data.newOrderSoundPath || '/public/sounds/new-order-notification.mp3';
|
|||
|
|
const canceledOrderPath = data.canceledOrderSoundPath || '/public/sounds/new-order-notification.mp3';
|
|||
|
|
|
|||
|
|
// Preload audio files
|
|||
|
|
this.newOrderSound = new Audio(newOrderPath);
|
|||
|
|
this.canceledOrderSound = new Audio(canceledOrderPath);
|
|||
|
|
|
|||
|
|
// Set volume if specified
|
|||
|
|
if (data.soundVolume) {
|
|||
|
|
const volume = parseInt(data.soundVolume, 10) / 100;
|
|||
|
|
this.newOrderSound.volume = volume;
|
|||
|
|
this.canceledOrderSound.volume = volume;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.warn('Failed to load notification settings:', error);
|
|||
|
|
// Use default sound
|
|||
|
|
this.newOrderSound = new Audio('/public/sounds/new-order-notification.mp3');
|
|||
|
|
this.canceledOrderSound = new Audio('/public/sounds/new-order-notification.mp3');
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
playNewOrderSound: function() {
|
|||
|
|
if (this.enabled && this.newOrderSound) {
|
|||
|
|
this.newOrderSound.currentTime = 0;
|
|||
|
|
this.newOrderSound.play().catch(error => {
|
|||
|
|
console.warn('Failed to play new order sound:', error);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
playCanceledOrderSound: function() {
|
|||
|
|
if (this.enabled && this.canceledOrderSound) {
|
|||
|
|
this.canceledOrderSound.currentTime = 0;
|
|||
|
|
this.canceledOrderSound.play().catch(error => {
|
|||
|
|
console.warn('Failed to play canceled order sound:', error);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Initialize dashboard
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
setupFilterButtons();
|
|||
|
|
audioNotification.init();
|
|||
|
|
refreshOrders();
|
|||
|
|
|
|||
|
|
// Set up auto-refresh
|
|||
|
|
setInterval(refreshOrders, config.dashboardRefreshInterval || 10000);
|
|||
|
|
|
|||
|
|
// Initialize connection monitoring
|
|||
|
|
checkConnectionStatus();
|
|||
|
|
// Check connection status every 15 seconds
|
|||
|
|
setInterval(checkConnectionStatus, 15000);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function setupFilterButtons() {
|
|||
|
|
const filterButtons = document.querySelectorAll('.filter-btn');
|
|||
|
|
|
|||
|
|
filterButtons.forEach(button => {
|
|||
|
|
button.addEventListener('click', function() {
|
|||
|
|
// Remove active class from all buttons
|
|||
|
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
|||
|
|
|
|||
|
|
// Add active class to clicked button
|
|||
|
|
this.classList.add('active');
|
|||
|
|
|
|||
|
|
// Update filter and refresh
|
|||
|
|
currentFilter = this.dataset.filter;
|
|||
|
|
refreshOrders();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function refreshOrders() {
|
|||
|
|
const syncButton = document.getElementById('syncButton');
|
|||
|
|
const syncText = syncButton ? syncButton.querySelector('.sync-text') : null;
|
|||
|
|
|
|||
|
|
if (syncButton) {
|
|||
|
|
syncButton.classList.add('loading');
|
|||
|
|
syncButton.disabled = true;
|
|||
|
|
if (syncText) {
|
|||
|
|
syncText.textContent = 'Syncing...';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const statusParam = currentFilter === 'all' ? '' : currentFilter;
|
|||
|
|
const url = '/api/orders' + (statusParam ? '?status=' + statusParam : '');
|
|||
|
|
|
|||
|
|
fetch(url)
|
|||
|
|
.then(response => response.json())
|
|||
|
|
.then(data => {
|
|||
|
|
if (!data.error) {
|
|||
|
|
updateOrderCards(data.orders);
|
|||
|
|
updateStats(data.stats);
|
|||
|
|
|
|||
|
|
// Connection successful - reset local connection failure counter
|
|||
|
|
if (connectionStatus.local.consecutiveFailures > 0) {
|
|||
|
|
connectionStatus.local.consecutiveFailures = 0;
|
|||
|
|
connectionStatus.local.status = 'online';
|
|||
|
|
updateConnectionUI('local', 'online', 'Connected');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('Failed to refresh orders:', error);
|
|||
|
|
|
|||
|
|
// Mark local connection as potentially offline
|
|||
|
|
connectionStatus.local.consecutiveFailures++;
|
|||
|
|
if (connectionStatus.local.consecutiveFailures >= 2) {
|
|||
|
|
connectionStatus.local.status = 'offline';
|
|||
|
|
updateConnectionUI('local', 'offline', 'Disconnected');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
if (syncButton) {
|
|||
|
|
syncButton.classList.remove('loading');
|
|||
|
|
syncButton.disabled = false;
|
|||
|
|
if (syncText) {
|
|||
|
|
syncText.textContent = 'Sync Now';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateStats(stats) {
|
|||
|
|
if (!stats) return;
|
|||
|
|
|
|||
|
|
const totalEl = document.getElementById('stat-total');
|
|||
|
|
const newEl = document.getElementById('stat-new');
|
|||
|
|
const preparingEl = document.getElementById('stat-preparing');
|
|||
|
|
const readyEl = document.getElementById('stat-ready');
|
|||
|
|
|
|||
|
|
if (totalEl) totalEl.textContent = stats.total || 0;
|
|||
|
|
if (newEl) newEl.textContent = stats.new || 0;
|
|||
|
|
if (preparingEl) preparingEl.textContent = stats.preparing || 0;
|
|||
|
|
if (readyEl) readyEl.textContent = stats.ready || 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateOrderCards(orders) {
|
|||
|
|
const container = document.getElementById('ordersContainer');
|
|||
|
|
|
|||
|
|
if (!orders || orders.length === 0) {
|
|||
|
|
container.innerHTML = '<div class="no-orders">No orders to display</div>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Detect new orders and canceled orders for sound notifications
|
|||
|
|
if (!isFirstLoad) {
|
|||
|
|
const currentOrderIds = new Set();
|
|||
|
|
const currentCanceledOrderIds = new Set();
|
|||
|
|
|
|||
|
|
orders.forEach(order => {
|
|||
|
|
const orderId = order.id;
|
|||
|
|
const status = order.localStatus || order.status || 'new';
|
|||
|
|
|
|||
|
|
currentOrderIds.add(orderId);
|
|||
|
|
|
|||
|
|
if (status === 'canceled') {
|
|||
|
|
currentCanceledOrderIds.add(orderId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Check for new orders (not in previous set)
|
|||
|
|
if (!previousOrderIds.has(orderId) && status === 'new') {
|
|||
|
|
console.log('New order detected:', orderId);
|
|||
|
|
audioNotification.playNewOrderSound();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Check for newly canceled orders
|
|||
|
|
if (!previousCanceledOrderIds.has(orderId) && status === 'canceled') {
|
|||
|
|
console.log('Order canceled:', orderId);
|
|||
|
|
audioNotification.playCanceledOrderSound();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Update tracking sets
|
|||
|
|
previousOrderIds = currentOrderIds;
|
|||
|
|
previousCanceledOrderIds = currentCanceledOrderIds;
|
|||
|
|
} else {
|
|||
|
|
// On first load, just populate the tracking sets without playing sounds
|
|||
|
|
orders.forEach(order => {
|
|||
|
|
previousOrderIds.add(order.id);
|
|||
|
|
const status = order.localStatus || order.status || 'new';
|
|||
|
|
if (status === 'canceled') {
|
|||
|
|
previousCanceledOrderIds.add(order.id);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
isFirstLoad = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
container.innerHTML = orders.map(order => createOrderCard(order)).join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function createOrderCard(order) {
|
|||
|
|
const status = order.localStatus || order.status || 'new';
|
|||
|
|
const statusBadge = getStatusBadge(status);
|
|||
|
|
const orderType = order.order.type || 'pickup';
|
|||
|
|
const typeIcon = orderType === 'delivery' ? '🚚' : '🛍️';
|
|||
|
|
|
|||
|
|
// Determine which actions to show based on status
|
|||
|
|
let actions = '';
|
|||
|
|
if (status === 'new') {
|
|||
|
|
actions = `
|
|||
|
|
<button class="btn btn-success" onclick="changeStatus(${order.id}, 'preparing')">Start Preparing</button>
|
|||
|
|
`;
|
|||
|
|
} else if (status === 'preparing') {
|
|||
|
|
actions = `
|
|||
|
|
<button class="btn btn-success" onclick="changeStatus(${order.id}, 'ready')">Mark Ready</button>
|
|||
|
|
`;
|
|||
|
|
} else if (status === 'ready') {
|
|||
|
|
actions = `
|
|||
|
|
<button class="btn btn-success" onclick="changeStatus(${order.id}, 'completed')">Complete</button>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Add cancel and reprint buttons for non-completed orders
|
|||
|
|
if (status !== 'canceled' && status !== 'completed') {
|
|||
|
|
actions += `
|
|||
|
|
<button class="btn btn-danger" onclick="openCancelModal(${order.id})">Cancel</button>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
actions += `
|
|||
|
|
<button class="btn btn-secondary" onclick="reprintOrder(${order.id})">Reprint</button>
|
|||
|
|
<button class="btn btn-secondary" onclick="showOrderDetails(${order.id})">Details</button>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// Build detailed items list with addons and excludes
|
|||
|
|
let itemsDetailedHtml = '';
|
|||
|
|
if (order.order.items && order.order.items.length > 0) {
|
|||
|
|
// Sort items alphabetically by name for better kitchen organization
|
|||
|
|
const sortedItems = [...order.order.items].sort((a, b) => {
|
|||
|
|
const nameA = (a.itemName || a.name || 'Item').toLowerCase();
|
|||
|
|
const nameB = (b.itemName || b.name || 'Item').toLowerCase();
|
|||
|
|
return nameA.localeCompare(nameB);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
itemsDetailedHtml = sortedItems.map(item => {
|
|||
|
|
let modifiersHtml = '';
|
|||
|
|
|
|||
|
|
// Add addons
|
|||
|
|
if (item.addons && item.addons.length > 0) {
|
|||
|
|
const addonsList = item.addons.map(a => a.name || a).join(', ');
|
|||
|
|
modifiersHtml += `<div class="item-modifier item-addon">+ Add: ${addonsList}</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Add excludes
|
|||
|
|
if (item.exclude && item.exclude.length > 0) {
|
|||
|
|
const excludeList = item.exclude.map(e => e.name || e).join(', ');
|
|||
|
|
modifiersHtml += `<div class="item-modifier item-exclude">− NO: ${excludeList}</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return `
|
|||
|
|
<div class="order-item">
|
|||
|
|
<div class="item-qty-name">
|
|||
|
|
<span class="item-qty">${item.qty}x</span>
|
|||
|
|
<span class="item-name">${item.itemName || item.name || 'Item'}</span>
|
|||
|
|
</div>
|
|||
|
|
${modifiersHtml}
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}).join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Food allergy warning (prominent)
|
|||
|
|
let allergyWarning = '';
|
|||
|
|
if (order.order.foodAllergy) {
|
|||
|
|
const allergyNotes = order.order.foodAllergyNotes || 'Customer has food allergies';
|
|||
|
|
allergyWarning = `
|
|||
|
|
<div class="allergy-warning">
|
|||
|
|
<div class="allergy-icon">⚠️</div>
|
|||
|
|
<div class="allergy-content">
|
|||
|
|
<div class="allergy-title">FOOD ALLERGY ALERT</div>
|
|||
|
|
<div class="allergy-notes">${allergyNotes}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Special instructions
|
|||
|
|
let specialInstructionsHtml = '';
|
|||
|
|
if (order.order.specialInstructions) {
|
|||
|
|
specialInstructionsHtml = `
|
|||
|
|
<div class="special-instructions">
|
|||
|
|
<div class="special-instructions-label">📝 Special Instructions:</div>
|
|||
|
|
<div class="special-instructions-text">${order.order.specialInstructions}</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return `
|
|||
|
|
<div class="order-card status-${status}">
|
|||
|
|
<div class="order-header">
|
|||
|
|
<div class="order-number">#${order.id}</div>
|
|||
|
|
<div class="order-badge badge-${status}">${statusBadge}</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
${allergyWarning}
|
|||
|
|
|
|||
|
|
<div class="order-info">
|
|||
|
|
<div class="order-info-row">
|
|||
|
|
<span class="order-info-label">Time:</span>
|
|||
|
|
<span class="order-info-value">${formatTime(order.createdAt)}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="order-info-row">
|
|||
|
|
<span class="order-info-label">Customer:</span>
|
|||
|
|
<span class="order-info-value">${order.customer.name || 'N/A'}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="order-info-row">
|
|||
|
|
<span class="order-info-label">Type:</span>
|
|||
|
|
<span class="order-info-value"><span class="order-type-icon">${typeIcon}</span>${orderType}</span>
|
|||
|
|
</div>
|
|||
|
|
${order.order.deliveryAddress ? `<div class="order-info-row"><span class="order-info-label">Address:</span><span class="order-info-value">${order.order.deliveryAddress}</span></div>` : ''}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="order-items-section">
|
|||
|
|
<div class="order-items-title">Order Items:</div>
|
|||
|
|
${itemsDetailedHtml}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
${specialInstructionsHtml}
|
|||
|
|
|
|||
|
|
<div class="order-total">
|
|||
|
|
<span class="order-total-label">Total:</span>
|
|||
|
|
<span class="order-total-value">${formatCurrency(order.totalAmount)}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="order-actions">
|
|||
|
|
${actions}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getStatusBadge(status) {
|
|||
|
|
const badges = {
|
|||
|
|
'new': 'New',
|
|||
|
|
'preparing': 'Preparing',
|
|||
|
|
'ready': 'Ready',
|
|||
|
|
'completed': 'Completed',
|
|||
|
|
'canceled': 'Canceled'
|
|||
|
|
};
|
|||
|
|
return badges[status] || status;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function changeStatus(orderId, newStatus) {
|
|||
|
|
// Fetch the order data first to show in the confirmation modal
|
|||
|
|
fetch(`/api/orders/${orderId}`)
|
|||
|
|
.then(response => response.json())
|
|||
|
|
.then(data => {
|
|||
|
|
if (!data.error && data.order) {
|
|||
|
|
openStatusChangeModal(orderId, newStatus, data.order);
|
|||
|
|
} else {
|
|||
|
|
showToast('Failed to fetch order details', 'error');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('Error fetching order:', error);
|
|||
|
|
showToast('Failed to fetch order details', 'error');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openStatusChangeModal(orderId, newStatus, orderData) {
|
|||
|
|
const currentStatus = orderData.localStatus || orderData.status || 'new';
|
|||
|
|
|
|||
|
|
// Store pending status change
|
|||
|
|
pendingStatusChange = {
|
|||
|
|
orderId: orderId,
|
|||
|
|
newStatus: newStatus,
|
|||
|
|
currentStatus: currentStatus,
|
|||
|
|
orderData: orderData
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Get status information
|
|||
|
|
const statusInfo = getStatusInfo(newStatus);
|
|||
|
|
|
|||
|
|
// Update modal icon
|
|||
|
|
const iconEl = document.getElementById('statusModalIcon');
|
|||
|
|
iconEl.textContent = statusInfo.icon;
|
|||
|
|
iconEl.className = 'status-modal-icon ' + newStatus;
|
|||
|
|
|
|||
|
|
// Update modal title
|
|||
|
|
document.getElementById('statusModalTitle').textContent = statusInfo.title;
|
|||
|
|
|
|||
|
|
// Update order details
|
|||
|
|
document.getElementById('statusModalOrderId').textContent = orderId;
|
|||
|
|
document.getElementById('statusModalCustomer').textContent = orderData.customer.name || 'N/A';
|
|||
|
|
|
|||
|
|
// Update status badges
|
|||
|
|
const fromBadge = document.getElementById('statusModalFrom');
|
|||
|
|
const toBadge = document.getElementById('statusModalTo');
|
|||
|
|
|
|||
|
|
fromBadge.textContent = getStatusBadge(currentStatus);
|
|||
|
|
fromBadge.className = 'status-badge badge-' + currentStatus;
|
|||
|
|
|
|||
|
|
toBadge.textContent = getStatusBadge(newStatus);
|
|||
|
|
toBadge.className = 'status-badge badge-' + newStatus;
|
|||
|
|
|
|||
|
|
// Update message
|
|||
|
|
document.getElementById('statusModalMessage').textContent = statusInfo.message;
|
|||
|
|
|
|||
|
|
// Update confirm button
|
|||
|
|
const confirmBtn = document.getElementById('statusConfirmBtn');
|
|||
|
|
confirmBtn.textContent = statusInfo.buttonText;
|
|||
|
|
|
|||
|
|
// Show modal
|
|||
|
|
document.getElementById('statusChangeModal').classList.add('visible');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getStatusInfo(status) {
|
|||
|
|
const statusMap = {
|
|||
|
|
'preparing': {
|
|||
|
|
icon: '👨🍳',
|
|||
|
|
title: 'Start Preparing Order?',
|
|||
|
|
message: 'This will mark the order as being prepared in the kitchen.',
|
|||
|
|
buttonText: 'Start Preparing'
|
|||
|
|
},
|
|||
|
|
'ready': {
|
|||
|
|
icon: '✅',
|
|||
|
|
title: 'Mark Order as Ready?',
|
|||
|
|
message: 'This will notify that the order is ready for pickup or delivery.',
|
|||
|
|
buttonText: 'Mark Ready'
|
|||
|
|
},
|
|||
|
|
'completed': {
|
|||
|
|
icon: '🎉',
|
|||
|
|
title: 'Complete Order?',
|
|||
|
|
message: 'This will mark the order as completed and it will be archived.',
|
|||
|
|
buttonText: 'Complete Order'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return statusMap[status] || {
|
|||
|
|
icon: '📋',
|
|||
|
|
title: 'Change Order Status?',
|
|||
|
|
message: 'This will update the order status.',
|
|||
|
|
buttonText: 'Confirm'
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeStatusChangeModal() {
|
|||
|
|
document.getElementById('statusChangeModal').classList.remove('visible');
|
|||
|
|
pendingStatusChange = {
|
|||
|
|
orderId: null,
|
|||
|
|
newStatus: null,
|
|||
|
|
currentStatus: null,
|
|||
|
|
orderData: null
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function confirmStatusChange() {
|
|||
|
|
if (!pendingStatusChange.orderId || !pendingStatusChange.newStatus) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const orderId = pendingStatusChange.orderId;
|
|||
|
|
const newStatus = pendingStatusChange.newStatus;
|
|||
|
|
|
|||
|
|
// Close modal immediately for better UX
|
|||
|
|
closeStatusChangeModal();
|
|||
|
|
|
|||
|
|
// Make the API call
|
|||
|
|
fetch(`/api/orders/${orderId}/status`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({ status: newStatus })
|
|||
|
|
})
|
|||
|
|
.then(response => response.json())
|
|||
|
|
.then(data => {
|
|||
|
|
if (!data.error) {
|
|||
|
|
showToast(`Order #${orderId} updated to ${newStatus}`, 'success');
|
|||
|
|
refreshOrders();
|
|||
|
|
} else {
|
|||
|
|
showToast(data.message || 'Failed to update order', 'error');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('Error updating order:', error);
|
|||
|
|
showToast('Failed to update order', 'error');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openCancelModal(orderId) {
|
|||
|
|
currentOrderIdForCancel = orderId;
|
|||
|
|
document.getElementById('cancelReason').value = '';
|
|||
|
|
document.getElementById('cancelModal').classList.add('visible');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeCancelModal() {
|
|||
|
|
currentOrderIdForCancel = null;
|
|||
|
|
document.getElementById('cancelModal').classList.remove('visible');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function confirmCancel() {
|
|||
|
|
if (!currentOrderIdForCancel) return;
|
|||
|
|
|
|||
|
|
const reason = document.getElementById('cancelReason').value;
|
|||
|
|
|
|||
|
|
fetch(`/api/orders/${currentOrderIdForCancel}/cancel`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({ reason: reason || 'Canceled by kitchen' })
|
|||
|
|
})
|
|||
|
|
.then(response => response.json())
|
|||
|
|
.then(data => {
|
|||
|
|
if (!data.error) {
|
|||
|
|
showToast(`Order #${currentOrderIdForCancel} canceled`, 'success');
|
|||
|
|
closeCancelModal();
|
|||
|
|
refreshOrders();
|
|||
|
|
} else {
|
|||
|
|
showToast(data.message || 'Failed to cancel order', 'error');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('Error canceling order:', error);
|
|||
|
|
showToast('Failed to cancel order', 'error');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let reprintInProgressByOrder = {};
|
|||
|
|
function reprintOrder(orderId) {
|
|||
|
|
if (reprintInProgressByOrder[orderId]) {
|
|||
|
|
return; // guard against rapid double clicks
|
|||
|
|
}
|
|||
|
|
reprintInProgressByOrder[orderId] = true;
|
|||
|
|
fetch(`/api/orders/${orderId}/reprint`, {
|
|||
|
|
method: 'POST'
|
|||
|
|
})
|
|||
|
|
.then(response => response.json())
|
|||
|
|
.then(data => {
|
|||
|
|
if (!data.error) {
|
|||
|
|
showToast((data && data.message) ? data.message : 'Receipt sent to printer', 'success');
|
|||
|
|
} else {
|
|||
|
|
showToast(data.message || 'Failed to print receipt', 'error');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('Error reprinting order:', error);
|
|||
|
|
showToast('Failed to print receipt', 'error');
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
reprintInProgressByOrder[orderId] = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showOrderDetails(orderId) {
|
|||
|
|
fetch(`/api/orders/${orderId}`)
|
|||
|
|
.then(response => response.json())
|
|||
|
|
.then(data => {
|
|||
|
|
if (!data.error && data.order) {
|
|||
|
|
displayOrderDetails(data.order);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('Error fetching order details:', error);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function displayOrderDetails(order) {
|
|||
|
|
const modal = document.getElementById('detailsModal');
|
|||
|
|
const content = document.getElementById('orderDetailsContent');
|
|||
|
|
|
|||
|
|
let itemsHtml = '';
|
|||
|
|
if (order.order.items && order.order.items.length > 0) {
|
|||
|
|
itemsHtml = order.order.items.map(item => {
|
|||
|
|
let modifiersHtml = '';
|
|||
|
|
|
|||
|
|
// Add addons with prices if available
|
|||
|
|
if (item.addons && item.addons.length > 0) {
|
|||
|
|
item.addons.forEach(addon => {
|
|||
|
|
const addonName = addon.name || addon;
|
|||
|
|
const addonPrice = typeof addon === 'object' && addon.price != null ? addon.price : null;
|
|||
|
|
|
|||
|
|
if (addonPrice != null && addonPrice > 0) {
|
|||
|
|
modifiersHtml += `<br><small style="color: #28a745; margin-left: 20px;">+ ${addonName} <span style="color: #666;">(+${formatCurrency(addonPrice)})</span></small>`;
|
|||
|
|
} else if (addonPrice === 0) {
|
|||
|
|
modifiersHtml += `<br><small style="color: #28a745; margin-left: 20px;">+ ${addonName} <span style="color: #666;">(Free)</span></small>`;
|
|||
|
|
} else {
|
|||
|
|
modifiersHtml += `<br><small style="color: #28a745; margin-left: 20px;">+ ${addonName}</small>`;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Add excludes (no price)
|
|||
|
|
if (item.exclude && item.exclude.length > 0) {
|
|||
|
|
item.exclude.forEach(exc => {
|
|||
|
|
const excName = exc.name || exc;
|
|||
|
|
modifiersHtml += `<br><small style="color: #dc3545; margin-left: 20px;">− NO ${excName}</small>`;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return `
|
|||
|
|
<tr>
|
|||
|
|
<td style="vertical-align: top; padding: 8px;">${item.qty}x</td>
|
|||
|
|
<td style="padding: 8px;">
|
|||
|
|
<strong>${item.itemName || item.name}</strong>
|
|||
|
|
${modifiersHtml}
|
|||
|
|
</td>
|
|||
|
|
<td style="text-align: right; vertical-align: top; padding: 8px;">${formatCurrency(item.price * item.qty)}</td>
|
|||
|
|
</tr>
|
|||
|
|
`;
|
|||
|
|
}).join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
content.innerHTML = `
|
|||
|
|
<div class="order-details">
|
|||
|
|
<div class="detail-section">
|
|||
|
|
<h3>Order Information</h3>
|
|||
|
|
<p><strong>Order ID:</strong> ${order.id}</p>
|
|||
|
|
<p><strong>Status:</strong> ${getStatusBadge(order.localStatus || order.status)}</p>
|
|||
|
|
<p><strong>Time:</strong> ${formatDateTime(order.createdAt)}</p>
|
|||
|
|
<p><strong>Type:</strong> ${order.order.type || 'N/A'}</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="detail-section">
|
|||
|
|
<h3>Customer Information</h3>
|
|||
|
|
<p><strong>Name:</strong> ${order.customer.name || 'N/A'}</p>
|
|||
|
|
<p><strong>Phone:</strong> ${order.customer.phoneNumber || 'N/A'}</p>
|
|||
|
|
${order.customer.email ? '<p><strong>Email:</strong> ' + order.customer.email + '</p>' : ''}
|
|||
|
|
${order.order.deliveryAddress ? '<p><strong>Address:</strong> ' + order.order.deliveryAddress + '</p>' : ''}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="detail-section">
|
|||
|
|
<h3>Order Items</h3>
|
|||
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|||
|
|
<thead>
|
|||
|
|
<tr style="border-bottom: 2px solid #ddd;">
|
|||
|
|
<th style="text-align: left; padding: 8px;">Qty</th>
|
|||
|
|
<th style="text-align: left; padding: 8px;">Item</th>
|
|||
|
|
<th style="text-align: right; padding: 8px;">Price</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
${itemsHtml}
|
|||
|
|
</tbody>
|
|||
|
|
<tfoot>
|
|||
|
|
<tr style="border-top: 2px solid #ddd;">
|
|||
|
|
<td colspan="2" style="text-align: right; padding: 8px;"><strong>Subtotal:</strong></td>
|
|||
|
|
<td style="text-align: right; padding: 8px;"><strong>${formatCurrency(order.order.amount)}</strong></td>
|
|||
|
|
</tr>
|
|||
|
|
${order.order.taxAmount ? `
|
|||
|
|
<tr>
|
|||
|
|
<td colspan="2" style="text-align: right; padding: 8px;">Tax (${order.order.taxRate || 0}%):</td>
|
|||
|
|
<td style="text-align: right; padding: 8px;">${formatCurrency(order.order.taxAmount)}</td>
|
|||
|
|
</tr>` : ''}
|
|||
|
|
${order.order.deliveryFee ? `
|
|||
|
|
<tr>
|
|||
|
|
<td colspan="2" style="text-align: right; padding: 8px;">Delivery Fee:</td>
|
|||
|
|
<td style="text-align: right; padding: 8px;">${formatCurrency(order.order.deliveryFee)}</td>
|
|||
|
|
</tr>` : ''}
|
|||
|
|
<tr style="border-top: 2px solid #333;">
|
|||
|
|
<td colspan="2" style="text-align: right; padding: 8px;"><strong>TOTAL:</strong></td>
|
|||
|
|
<td style="text-align: right; padding: 8px;"><strong>${formatCurrency(order.totalAmount)}</strong></td>
|
|||
|
|
</tr>
|
|||
|
|
</tfoot>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
${order.order.specialInstructions ? `
|
|||
|
|
<div class="detail-section">
|
|||
|
|
<h3>Special Instructions</h3>
|
|||
|
|
<p>${order.order.specialInstructions}</p>
|
|||
|
|
</div>` : ''}
|
|||
|
|
|
|||
|
|
${order.order.deliveryInstructions ? `
|
|||
|
|
<div class="detail-section">
|
|||
|
|
<h3>Delivery Instructions</h3>
|
|||
|
|
<p>${order.order.deliveryInstructions}</p>
|
|||
|
|
</div>` : ''}
|
|||
|
|
|
|||
|
|
${order.order.foodAllergy ? `
|
|||
|
|
<div class="detail-section" style="background: #ffe6e6; padding: 15px; border-radius: 4px;">
|
|||
|
|
<h3 style="color: #dc3545;">⚠ Food Allergy Warning</h3>
|
|||
|
|
<p><strong>${order.order.foodAllergyNotes || 'Customer has food allergies'}</strong></p>
|
|||
|
|
</div>` : ''}
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
modal.classList.add('visible');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeDetailsModal() {
|
|||
|
|
document.getElementById('detailsModal').classList.remove('visible');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Close modals when clicking outside
|
|||
|
|
window.addEventListener('click', function(event) {
|
|||
|
|
const statusChangeModal = document.getElementById('statusChangeModal');
|
|||
|
|
const cancelModal = document.getElementById('cancelModal');
|
|||
|
|
const detailsModal = document.getElementById('detailsModal');
|
|||
|
|
|
|||
|
|
if (event.target === statusChangeModal) {
|
|||
|
|
closeStatusChangeModal();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (event.target === cancelModal) {
|
|||
|
|
closeCancelModal();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (event.target === detailsModal) {
|
|||
|
|
closeDetailsModal();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Close modals with Escape key
|
|||
|
|
document.addEventListener('keydown', function(event) {
|
|||
|
|
if (event.key === 'Escape') {
|
|||
|
|
closeStatusChangeModal();
|
|||
|
|
closeCancelModal();
|
|||
|
|
closeDetailsModal();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Connection status monitoring
|
|||
|
|
function checkConnectionStatus() {
|
|||
|
|
// Check local connection (dashboard server)
|
|||
|
|
checkLocalConnection();
|
|||
|
|
|
|||
|
|
// Check external API connection
|
|||
|
|
checkAPIConnection();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function checkLocalConnection() {
|
|||
|
|
const startTime = Date.now();
|
|||
|
|
|
|||
|
|
fetch('/api/health/local')
|
|||
|
|
.then(response => {
|
|||
|
|
if (response.ok) {
|
|||
|
|
return response.json();
|
|||
|
|
} else {
|
|||
|
|
throw new Error('Server returned error status');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.then(data => {
|
|||
|
|
connectionStatus.local.status = 'online';
|
|||
|
|
connectionStatus.local.lastCheck = new Date();
|
|||
|
|
connectionStatus.local.consecutiveFailures = 0;
|
|||
|
|
updateConnectionUI('local', 'online', 'Connected');
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('Local connection check failed:', error);
|
|||
|
|
connectionStatus.local.consecutiveFailures++;
|
|||
|
|
|
|||
|
|
if (connectionStatus.local.consecutiveFailures >= 2) {
|
|||
|
|
connectionStatus.local.status = 'offline';
|
|||
|
|
updateConnectionUI('local', 'offline', 'Disconnected');
|
|||
|
|
|
|||
|
|
// Show warning toast on first detection of offline
|
|||
|
|
if (connectionStatus.local.consecutiveFailures === 2) {
|
|||
|
|
showToast('Dashboard server connection lost', 'error');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function checkAPIConnection() {
|
|||
|
|
const startTime = Date.now();
|
|||
|
|
|
|||
|
|
fetch('/api/health/external')
|
|||
|
|
.then(response => {
|
|||
|
|
if (response.ok) {
|
|||
|
|
return response.json();
|
|||
|
|
} else {
|
|||
|
|
throw new Error('Server returned error status');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.then(data => {
|
|||
|
|
connectionStatus.api.lastCheck = new Date();
|
|||
|
|
|
|||
|
|
if (data.status === 'online') {
|
|||
|
|
// Was offline, now online - notify user
|
|||
|
|
if (connectionStatus.api.status === 'offline' && connectionStatus.api.consecutiveFailures >= 2) {
|
|||
|
|
showToast('API server connection restored', 'success');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
connectionStatus.api.status = 'online';
|
|||
|
|
connectionStatus.api.consecutiveFailures = 0;
|
|||
|
|
connectionStatus.api.responseTime = data.responseTime;
|
|||
|
|
|
|||
|
|
let label = 'Connected';
|
|||
|
|
if (data.responseTime) {
|
|||
|
|
label = `${data.responseTime}ms`;
|
|||
|
|
}
|
|||
|
|
updateConnectionUI('api', 'online', label);
|
|||
|
|
} else if (data.status === 'unconfigured') {
|
|||
|
|
connectionStatus.api.status = 'unconfigured';
|
|||
|
|
connectionStatus.api.consecutiveFailures = 0;
|
|||
|
|
updateConnectionUI('api', 'unconfigured', 'Not Configured');
|
|||
|
|
} else {
|
|||
|
|
connectionStatus.api.consecutiveFailures++;
|
|||
|
|
|
|||
|
|
if (connectionStatus.api.consecutiveFailures >= 2) {
|
|||
|
|
connectionStatus.api.status = 'offline';
|
|||
|
|
updateConnectionUI('api', 'offline', data.message || 'Disconnected');
|
|||
|
|
|
|||
|
|
// Show warning toast on first detection of offline
|
|||
|
|
if (connectionStatus.api.consecutiveFailures === 2) {
|
|||
|
|
showToast('API server connection lost: ' + (data.message || 'Disconnected'), 'error');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('API connection check failed:', error);
|
|||
|
|
connectionStatus.api.consecutiveFailures++;
|
|||
|
|
|
|||
|
|
if (connectionStatus.api.consecutiveFailures >= 2) {
|
|||
|
|
connectionStatus.api.status = 'offline';
|
|||
|
|
updateConnectionUI('api', 'offline', 'Check Failed');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateConnectionUI(type, status, label) {
|
|||
|
|
let statusItem, statusIndicator, statusLabel;
|
|||
|
|
|
|||
|
|
if (type === 'local') {
|
|||
|
|
statusItem = document.getElementById('localConnectionStatus');
|
|||
|
|
statusLabel = document.getElementById('localStatusLabel');
|
|||
|
|
} else if (type === 'api') {
|
|||
|
|
statusItem = document.getElementById('apiConnectionStatus');
|
|||
|
|
statusLabel = document.getElementById('apiStatusLabel');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!statusItem || !statusLabel) return;
|
|||
|
|
|
|||
|
|
statusIndicator = statusItem.querySelector('.status-indicator');
|
|||
|
|
|
|||
|
|
// Remove all status classes
|
|||
|
|
statusIndicator.classList.remove('status-online', 'status-offline', 'status-checking', 'status-unconfigured');
|
|||
|
|
|
|||
|
|
// Add new status class
|
|||
|
|
statusIndicator.classList.add('status-' + status);
|
|||
|
|
|
|||
|
|
// Update label text
|
|||
|
|
statusLabel.textContent = label;
|
|||
|
|
|
|||
|
|
// Update title attribute for tooltip
|
|||
|
|
let tooltipText = '';
|
|||
|
|
if (type === 'local') {
|
|||
|
|
tooltipText = 'Dashboard Server: ';
|
|||
|
|
} else {
|
|||
|
|
tooltipText = 'API Server (api.thinklink.ai): ';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
tooltipText += label;
|
|||
|
|
if (connectionStatus[type].lastCheck) {
|
|||
|
|
const lastCheckTime = connectionStatus[type].lastCheck.toLocaleTimeString();
|
|||
|
|
tooltipText += ' (Last checked: ' + lastCheckTime + ')';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
statusItem.title = tooltipText;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Manual sync trigger
|
|||
|
|
function manualSync() {
|
|||
|
|
const syncButton = document.getElementById('syncButton');
|
|||
|
|
const syncText = syncButton ? syncButton.querySelector('.sync-text') : null;
|
|||
|
|
|
|||
|
|
// Prevent multiple simultaneous sync requests
|
|||
|
|
if (syncButton && syncButton.classList.contains('loading')) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (syncButton) {
|
|||
|
|
syncButton.classList.add('loading');
|
|||
|
|
syncButton.disabled = true;
|
|||
|
|
if (syncText) {
|
|||
|
|
syncText.textContent = 'Syncing...';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fetch('/api/sync-now', {
|
|||
|
|
method: 'POST'
|
|||
|
|
})
|
|||
|
|
.then(response => response.json())
|
|||
|
|
.then(data => {
|
|||
|
|
if (!data.error) {
|
|||
|
|
showToast('Checking for new orders...', 'success');
|
|||
|
|
// Refresh after a short delay to allow sync to complete
|
|||
|
|
setTimeout(() => {
|
|||
|
|
refreshOrders();
|
|||
|
|
}, 2000);
|
|||
|
|
} else {
|
|||
|
|
showToast(data.message || 'Sync failed', 'error');
|
|||
|
|
// Remove loading state on error
|
|||
|
|
if (syncButton) {
|
|||
|
|
syncButton.classList.remove('loading');
|
|||
|
|
syncButton.disabled = false;
|
|||
|
|
if (syncText) {
|
|||
|
|
syncText.textContent = 'Sync Now';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('Manual sync error:', error);
|
|||
|
|
showToast('Sync failed', 'error');
|
|||
|
|
// Remove loading state on error
|
|||
|
|
if (syncButton) {
|
|||
|
|
syncButton.classList.remove('loading');
|
|||
|
|
syncButton.disabled = false;
|
|||
|
|
if (syncText) {
|
|||
|
|
syncText.textContent = 'Sync Now';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|