File size: 1,771 Bytes
2af84dd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant Table Availability</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Check Table Availability</h1>
<div class="qr-code">
<input type="text" id="table-id" placeholder="Enter Table ID (e.g. 1)" />
<button onclick="checkAvailability()">Check Availability</button>
</div>
<div id="table-info" class="table-info"></div>
</div>
<script>
function checkAvailability() {
let tableId = document.getElementById('table-id').value;
if (!tableId) {
alert("Please enter a table ID.");
return;
}
// Call the backend to get table status
fetch(`/get_table_status/${tableId}`)
.then(response => response.json())
.then(data => {
let tableInfo = document.getElementById('table-info');
tableInfo.innerHTML = ''; // Clear previous info
if (data.status === "Available") {
tableInfo.innerHTML = `<h2>Table ${tableId} is Available!</h2>`;
} else if (data.status === "Reserved") {
tableInfo.innerHTML = `<h2>Table ${tableId} is Reserved.</h2><p>${data.message}</p>`;
} else {
tableInfo.innerHTML = `<h2>${data.error}</h2>`;
}
})
.catch(error => {
console.error('Error:', error);
});
}
</script>
</body>
</html>
|