|
|
<!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; |
|
|
} |
|
|
|
|
|
|
|
|
fetch(`/get_table_status/${tableId}`) |
|
|
.then(response => response.json()) |
|
|
.then(data => { |
|
|
let tableInfo = document.getElementById('table-info'); |
|
|
tableInfo.innerHTML = ''; |
|
|
|
|
|
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> |
|
|
|
