111 lines
3.9 KiB
HTML
111 lines
3.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Table Booking</title>
|
||
|
|
<link rel="stylesheet" href="styles.css">
|
||
|
|
<script src="script.js" defer></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1>Table and Booking Management</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<!-- Section to display and manage tables -->
|
||
|
|
<section id="manage-tables">
|
||
|
|
<h2>Manage Tables</h2>
|
||
|
|
<table id="tables">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>ID</th>
|
||
|
|
<th>Name (Number)</th>
|
||
|
|
<th>Max People</th>
|
||
|
|
<th>Room</th>
|
||
|
|
<th>Actions</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<!-- Data will be populated here -->
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h3>Create/Update Table</h3>
|
||
|
|
<form id="table-form">
|
||
|
|
<label for="table-id">Table ID (leave blank to create new):</label>
|
||
|
|
<input type="number" id="table-id" name="id">
|
||
|
|
|
||
|
|
<label for="table-name">Name (Number):</label>
|
||
|
|
<input type="number" id="table-name" name="name" required>
|
||
|
|
|
||
|
|
<label for="table-max-people">Max People:</label>
|
||
|
|
<input type="number" id="table-max-people" name="max_people" required>
|
||
|
|
|
||
|
|
<label for="table-room">Room:</label>
|
||
|
|
<input type="text" id="table-room" name="room" required>
|
||
|
|
|
||
|
|
<button type="submit">Save Table</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<h3>Find Table by ID</h3>
|
||
|
|
<form id="find-table-form">
|
||
|
|
<label for="find-table-id">Enter Table ID:</label>
|
||
|
|
<input type="number" id="find-table-id" name="id" required>
|
||
|
|
<button type="submit">Find Table</button>
|
||
|
|
</form>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Section to display and manage bookings -->
|
||
|
|
<section id="manage-bookings">
|
||
|
|
<h2>Manage Bookings</h2>
|
||
|
|
<table id="bookings">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>ID</th>
|
||
|
|
<th>Table ID</th>
|
||
|
|
<th>Reservation DateTime</th>
|
||
|
|
<th>Time Reserve</th>
|
||
|
|
<th>Who Booked</th>
|
||
|
|
<th>Actions</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<!-- Data will be populated here -->
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h3>Create/Update Booking</h3>
|
||
|
|
<form id="booking-form">
|
||
|
|
<label for="booking-id">Booking ID (leave blank to create new):</label>
|
||
|
|
<input type="number" id="booking-id" name="id">
|
||
|
|
|
||
|
|
<label for="booking-table-id">Table ID:</label>
|
||
|
|
<input type="number" id="booking-table-id" name="id_tables" required>
|
||
|
|
|
||
|
|
<label for="reservation-datetime">Reservation Date & Time:</label>
|
||
|
|
<input type="datetime-local" id="reservation-datetime" name="reservation" required>
|
||
|
|
|
||
|
|
<label for="time-reserve">Time Reserve:</label>
|
||
|
|
<input type="text" id="time-reserve" name="time_reserve" placeholder="e.g., 2 hours" required>
|
||
|
|
|
||
|
|
<label for="who-booked">Who Booked:</label>
|
||
|
|
<input type="text" id="who-booked" name="who_booked" required>
|
||
|
|
|
||
|
|
<button type="submit">Save Booking</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- Section to find a booking by ID -->
|
||
|
|
<h3>Find Booking by ID</h3>
|
||
|
|
<form id="find-booking-form">
|
||
|
|
<label for="find-booking-id">Enter Booking ID:</label>
|
||
|
|
<input type="number" id="find-booking-id" name="id" required>
|
||
|
|
<button type="submit">Find Booking</button>
|
||
|
|
</form>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|