`;
// Store table data
table.dataset.number = i;
table.dataset.capacity = randomCapacity;
table.dataset.status = randomStatus;
table.dataset.server = randomServer;
// Add click event
table.addEventListener('click', function() {
openTableModal(this);
});
floorPlanContent.appendChild(table);
}
}
// Open table modal
function openTableModal(table) {
modalTableNumber.textContent = table.dataset.number;
modalCapacity.textContent = table.dataset.capacity;
modalStatus.textContent = capitalizeFirstLetter(table.dataset.status);
modalServer.textContent = table.dataset.server;
// Store current table for updates
tableModal.dataset.currentTable = table.dataset.number;
// Show modal
tableModal.style.display = 'flex';
}
// Close table modal
modalClose.addEventListener('click', function() {
tableModal.style.display = 'none';
});
// Update table status buttons
btnAvailable.addEventListener('click', function() {
updateTableStatus('available');
});
btnOccupy.addEventListener('click', function() {
updateTableStatus('occupied');
});
btnCleaning.addEventListener('click', function() {
updateTableStatus('cleaning');
});
// Update table status
function updateTableStatus(status) {
const tableNumber = tableModal.dataset.currentTable;
const table = document.querySelector(`.table[data-number="${tableNumber}"]`);
// Remove all status classes
table.classList.remove('available', 'occupied', 'cleaning');
// Add new status class
table.classList.add(status);
// Update data attribute
table.dataset.status = status;
// Update modal
modalStatus.textContent = capitalizeFirstLetter(status);
// Randomly assign server if occupied
if (status === 'occupied') {
const servers = ['John', 'Sarah', 'Michael', 'Emma'];
const randomServer = servers[Math.floor(Math.random() * servers.length)];
table.dataset.server = randomServer;
modalServer.textContent = randomServer;
} else if (status === 'available') {
table.dataset.server = 'Unassigned';
modalServer.textContent = 'Unassigned';
}
}
// Area buttons
document.getElementById('dining-btn').addEventListener('click', function() {
generateTables('dining');
});
document.getElementById('bar-btn').addEventListener('click', function() {
generateTables('bar');
});
document.getElementById('patio-btn').addEventListener('click', function() {
generateTables('patio');
});
// Helper function to capitalize first letter
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
// Close modal when clicking outside
tableModal.addEventListener('click', function(e) {
if (e.target === tableModal) {
tableModal.style.display = 'none';
}
});
// Initialize with dining room tables
generateTables('dining');
// Navbar scroll effect
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
});
credit_card
EMV Processing Integration
attach_money
Cash Discount Programs
access_time
Time Clock and Labor Management
analytics
Site-Level Reporting and Automatic Email Reporting
takeout_dining
Takeout Management and Delivery
file_copy
Payroll Export
book_online
Reservations and Internal Waitlist
qr_code_scanner
Barcode Scanning and QR Code Scanning
g_translate
Multi-Language Ability
card_giftcard
House Accounts and Internal Gift Cards