Spaces:

emeraj24
/

hotel

Running

App Files Files Community

hotel / tables.html

emeraj24

make it working step by stem 1st you create table master, create table, edit, delete - Follow Up Deployment

9c90532 verified 7 months ago

raw

history blame contribute delete

12.4 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Tables - Hotel Management</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	</head>
	<body class="bg-gray-50 font-sans">
	<div class="flex h-screen overflow-hidden">
	<!-- Sidebar -->
	<div class="bg-indigo-800 text-white w-64 flex-shrink-0">
	<div class="p-4 flex items-center space-x-3 border-b border-indigo-700">
	<div class="bg-white p-2 rounded-lg">
	<i data-feather="home" class="text-indigo-800"></i>
	</div>
	<h1 class="text-xl font-bold">Hotel Manager</h1>
	</div>
	<nav class="p-4 space-y-2">
	<a href="index.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 text-indigo-100 hover:text-white">
	<i data-feather="grid"></i>
	<span>Dashboard</span>
	</a>
	<a href="orders.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 text-indigo-100 hover:text-white">
	<i data-feather="clipboard"></i>
	<span>Orders</span>
	</a>
	<a href="tables.html" class="flex items-center space-x-3 p-3 rounded-lg bg-indigo-700 text-white">
	<i data-feather="users"></i>
	<span>Tables</span>
	</a>
	<a href="menu.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 text-indigo-100 hover:text-white">
	<i data-feather="book-open"></i>
	<span>Menu</span>
	</a>
	<a href="billing.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 text-indigo-100 hover:text-white">
	<i data-feather="dollar-sign"></i>
	<span>Billing</span>
	</a>
	<a href="reports.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 text-indigo-100 hover:text-white">
	<i data-feather="pie-chart"></i>
	<span>Reports</span>
	</a>
	</nav>
	</div>

	<!-- Main Content -->
	<div class="flex-1 overflow-auto">
	<!-- Header -->
	<header class="bg-white shadow-sm p-4 flex justify-between items-center">
	<h2 class="text-xl font-semibold text-gray-800">Table Management</h2>
	<div class="flex items-center space-x-4">
	<div class="relative">
	<i data-feather="bell" class="text-gray-500 hover:text-indigo-600 cursor-pointer"></i>
	</div>
	<div class="flex items-center space-x-2">
	<img src="http://static.photos/people/40x40/1" alt="User" class="h-8 w-8 rounded-full">
	<span class="text-sm font-medium">Admin</span>
	</div>
	</div>
	</header>

	<!-- Table Content -->
	<main class="p-6">
	<div class="bg-white rounded-lg shadow overflow-hidden">
	<div class="p-4 border-b flex justify-between items-center">
	<h3 class="font-semibold text-lg">All Tables</h3>
	<button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm flex items-center space-x-2" onclick="openAddTableModal()">
	<i data-feather="plus" class="w-4 h-4"></i>
	<span>Add Table</span>
	</button>
	</div>
	<div class="p-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4" id="tablesGrid">
	<!-- Tables will be loaded here -->
	</div>
	</div>
	</main>
	</div>
	</div>

	<!-- Add Table Modal -->
	<div id="addTableModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
	<div class="bg-white rounded-lg p-6 w-full max-w-md">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-lg font-semibold">Add New Table</h3>
	<button onclick="closeAddTableModal()">
	<i data-feather="x" class="text-gray-500"></i>
	</button>
	</div>
	<form id="addTableForm">
	<div class="mb-4">
	<label class="block text-gray-700 text-sm font-bold mb-2" for="tableNumber">
	Table Number
	</label>
	<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
	id="tableNumber" type="text" placeholder="Table number" required>
	</div>
	<div class="mb-4">
	<label class="block text-gray-700 text-sm font-bold mb-2" for="seatingCapacity">
	Seating Capacity
	</label>
	<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
	id="seatingCapacity" type="number" min="1" placeholder="Number of seats" required>
	</div>
	<div class="flex justify-end space-x-3">
	<button type="button" class="bg-gray-300 text-gray-800 px-4 py-2 rounded-md" onclick="closeAddTableModal()">
	Cancel
	</button>
	<button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-md">
	Add Table
	</button>
	</div>
	</form>
	</div>
	</div>

	<script>
	feather.replace();

	// Table data storage
	let tables = JSON.parse(localStorage.getItem('tables')) \|\| [
	{ id: 1, number: "Table 1", capacity: 4, status: "available" },
	{ id: 2, number: "Table 2", capacity: 6, status: "available" },
	{ id: 3, number: "Table 3", capacity: 2, status: "available" }
	];

	// Save tables to localStorage
	function saveTables() {
	localStorage.setItem('tables', JSON.stringify(tables));
	}

	// Render all tables
	function renderTables() {
	const tablesGrid = document.getElementById('tablesGrid');
	tablesGrid.innerHTML = '';

	tables.forEach(table => {
	const tableCard = document.createElement('div');
	tableCard.className = `table-card bg-white border rounded-lg p-4 text-center cursor-pointer transition-all hover:shadow-md hover:transform hover:-translate-y-1`;
	tableCard.setAttribute('data-status', table.status);
	tableCard.setAttribute('data-id', table.id);

	let statusClass, statusText, icon;
	if (table.status === 'occupied') {
	statusClass = 'text-red-600';
	statusText = 'Occupied';
	icon = 'user';
	} else if (table.status === 'reserved') {
	statusClass = 'text-yellow-600';
	statusText = 'Reserved';
	icon = 'clock';
	} else {
	statusClass = 'text-green-600';
	statusText = 'Available';
	icon = 'check';
	}

	tableCard.innerHTML = `
	<div class="h-16 w-16 mx-auto bg-${statusClass.replace('text-', '').replace('-600', '-100')} rounded-full flex items-center justify-center mb-2">
	<i data-feather="${icon}" class="${statusClass}"></i>
	</div>
	<h4 class="font-medium">${table.number}</h4>
	<p class="text-sm ${statusClass}">${statusText}</p>
	<p class="text-xs text-gray-500">${table.capacity} seats</p>
	<div class="mt-2 flex justify-center space-x-2">
	<button class="text-xs px-2 py-1 bg-gray-100 rounded" onclick="editTable(${table.id})">Edit</button>
	<button class="text-xs px-2 py-1 bg-red-100 text-red-600 rounded" onclick="deleteTable(${table.id})">Delete</button>
	</div>
	`;
	tablesGrid.appendChild(tableCard);
	});
	feather.replace();
	}

	// Initial render
	renderTables();

	// Modal functions
	function openAddTableModal() {
	document.getElementById('addTableModal').classList.remove('hidden');
	}

	function closeAddTableModal() {
	document.getElementById('addTableModal').classList.add('hidden');
	}

	// Add new table
	document.getElementById('addTableForm').addEventListener('submit', function(e) {
	e.preventDefault();
	const tableNumber = document.getElementById('tableNumber').value;
	const seatingCapacity = document.getElementById('seatingCapacity').value;

	// Generate unique ID
	const newId = tables.length > 0 ? Math.max(...tables.map(t => t.id)) + 1 : 1;

	const newTable = {
	id: newId,
	number: tableNumber,
	capacity: seatingCapacity,
	status: "available"
	};

	tables.push(newTable);
	saveTables();
	renderTables();

	this.reset();
	closeAddTableModal();
	});

	// Edit table
	function editTable(id) {
	const table = tables.find(t => t.id === id);
	if (!table) return;

	document.getElementById('tableNumber').value = table.number;
	document.getElementById('seatingCapacity').value = table.capacity;

	// Change modal title and button
	document.querySelector('#addTableModal h3').textContent = 'Edit Table';
	document.querySelector('#addTableModal button[type="submit"]').textContent = 'Update';

	// Remove old submit handler
	const form = document.getElementById('addTableForm');
	form.removeEventListener('submit', form._editHandler);

	// Add new submit handler for edit
	form._editHandler = function(e) {
	e.preventDefault();
	table.number = document.getElementById('tableNumber').value;
	table.capacity = document.getElementById('seatingCapacity').value;

	saveTables();
	renderTables();
	closeAddTableModal();

	// Reset form to add mode
	document.querySelector('#addTableModal h3').textContent = 'Add New Table';
	document.querySelector('#addTableModal button[type="submit"]').textContent = 'Add Table';
	form.reset();
	};

	form.addEventListener('submit', form._editHandler);
	openAddTableModal();
	}

	// Delete table
	function deleteTable(id) {
	if (confirm('Are you sure you want to delete this table?')) {
	tables = tables.filter(t => t.id !== id);
	saveTables();
	renderTables();
	}
	}
	// Reset form to add mode when modal closes
	document.getElementById('addTableModal').addEventListener('hidden.bs.modal', function() {
	const form = document.getElementById('addTableForm');
	document.querySelector('#addTableModal h3').textContent = 'Add New Table';
	document.querySelector('#addTableModal button[type="submit"]').textContent = 'Add Table';
	form.reset();
	});
	</script>
	</body>
	</html>