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';
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|