Hugging Face's logo

Spaces:
Subbu1304
/
tables
Runtime error

App Files Community
Subbu1304 commited on
Commit
228101b
·
verified ·
1 Parent(s): 633c3b7

Update templets/index.html

Browse files
Files changed (1) hide show
  1. templets/index.html +285 -29
templets/index.html CHANGED
@@ -3,46 +3,302 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Restaurant Table Availability</title>
7
- <link rel="stylesheet" href="styles.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
  <body>
10
  <div class="container">
11
- <h1>Check Table Availability</h1>
12
- <div class="qr-code">
13
- <input type="text" id="table-id" placeholder="Enter Table ID (e.g. 1)" />
14
- <button onclick="checkAvailability()">Check Availability</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  </div>
16
- <div id="table-info" class="table-info"></div>
17
  </div>
18
 
19
  <script>
20
- function checkAvailability() {
21
- let tableId = document.getElementById('table-id').value;
22
- if (!tableId) {
23
- alert("Please enter a table ID.");
24
- return;
25
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
 
27
- // Call the backend to get table status
28
- fetch(`/get_table_status/${tableId}`)
29
- .then(response => response.json())
30
- .then(data => {
31
- let tableInfo = document.getElementById('table-info');
32
- tableInfo.innerHTML = ''; // Clear previous info
33
-
34
- if (data.status === "Available") {
35
- tableInfo.innerHTML = `<h2>Table ${tableId} is Available!</h2>`;
36
- } else if (data.status === "Reserved") {
37
- tableInfo.innerHTML = `<h2>Table ${tableId} is Reserved.</h2><p>${data.message}</p>`;
 
38
  } else {
39
- tableInfo.innerHTML = `<h2>${data.error}</h2>`;
 
40
  }
41
- })
42
- .catch(error => {
43
- console.error('Error:', error);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  });
 
 
 
 
 
 
 
 
 
 
 
 
45
  }
 
 
 
 
 
 
 
46
  </script>
47
  </body>
48
- </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Restaurant Table Booking</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 0;
11
+ padding: 0;
12
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
13
+ color: #fff;
14
+ display: flex;
15
+ flex-direction: column;
16
+ align-items: center;
17
+ min-height: 100vh;
18
+ }
19
+ .container {
20
+ text-align: center;
21
+ padding: 20px;
22
+ }
23
+ h1 {
24
+ font-size: 2.5em;
25
+ margin-bottom: 20px;
26
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
27
+ }
28
+ .tables {
29
+ display: flex;
30
+ flex-wrap: wrap;
31
+ justify-content: center;
32
+ gap: 20px;
33
+ }
34
+ .table {
35
+ background: rgba(255, 255, 255, 0.1);
36
+ border-radius: 10px;
37
+ padding: 20px;
38
+ width: 120px;
39
+ text-align: center;
40
+ cursor: pointer;
41
+ transition: transform 0.3s, background 0.3s;
42
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
43
+ }
44
+ .table:hover {
45
+ transform: scale(1.1);
46
+ background: rgba(255, 255, 255, 0.2);
47
+ }
48
+ .table h3 {
49
+ margin: 0;
50
+ font-size: 1.2em;
51
+ }
52
+ .table p {
53
+ margin: 5px 0 0;
54
+ font-size: 0.9em;
55
+ color: #ddd;
56
+ }
57
+ .availability-text {
58
+ font-size: 0.8em;
59
+ color: #ffd700; /* Yellow for visibility */
60
+ margin-top: 10px;
61
+ }
62
+ /* Modal Styles */
63
+ .modal {
64
+ display: none;
65
+ position: fixed;
66
+ top: 0;
67
+ left: 0;
68
+ width: 100%;
69
+ height: 100%;
70
+ background: rgba(0, 0, 0, 0.7);
71
+ justify-content: center;
72
+ align-items: center;
73
+ z-index: 1000;
74
+ }
75
+ .modal-content {
76
+ background: #fff;
77
+ color: #333;
78
+ border-radius: 10px;
79
+ padding: 20px;
80
+ width: 90%;
81
+ max-width: 500px;
82
+ max-height: 80vh;
83
+ overflow-y: auto;
84
+ position: relative;
85
+ }
86
+ .modal-content h2 {
87
+ margin-top: 0;
88
+ color: #6e8efb;
89
+ }
90
+ .close {
91
+ position: absolute;
92
+ top: 10px;
93
+ right: 15px;
94
+ font-size: 1.5em;
95
+ cursor: pointer;
96
+ color: #333;
97
+ }
98
+ .menu-item {
99
+ margin: 10px 0;
100
+ }
101
+ .menu-item h4 {
102
+ margin: 5px 0;
103
+ color: #a777e3;
104
+ }
105
+ select, button {
106
+ padding: 10px;
107
+ margin: 10px 0;
108
+ border: none;
109
+ border-radius: 5px;
110
+ font-size: 1em;
111
+ }
112
+ select {
113
+ width: 100%;
114
+ background: #f0f0f0;
115
+ }
116
+ button {
117
+ background: #6e8efb;
118
+ color: #fff;
119
+ cursor: pointer;
120
+ transition: background 0.3s;
121
+ }
122
+ button:hover {
123
+ background: #a777e3;
124
+ }
125
+ .availability {
126
+ margin: 10px 0;
127
+ font-size: 0.9em;
128
+ color: #555;
129
+ }
130
+ </style>
131
  </head>
132
  <body>
133
  <div class="container">
134
+ <h1>Restaurant Table Booking</h1>
135
+ <div class="tables" id="tables">
136
+ <!-- Tables will be populated dynamically -->
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Modal for Menu and Booking -->
141
+ <div id="modal" class="modal">
142
+ <div class="modal-content">
143
+ <span class="close" onclick="closeModal()">×</span>
144
+ <h2 id="modal-title">Table Menu</h2>
145
+ <div id="availability" class="availability"></div>
146
+ <h3>Menu</h3>
147
+ <div id="menu">
148
+ <div class="menu-item">
149
+ <h4>Margherita Pizza</h4>
150
+ <p>Classic pizza with tomato, mozzarella, and basil. $12</p>
151
+ </div>
152
+ <div class="menu-item">
153
+ <h4>Caesar Salad</h4>
154
+ <p>Fresh romaine, croutons, and Caesar dressing. $8</p>
155
+ </div>
156
+ <div class="menu-item">
157
+ <h4>Spaghetti Carbonara</h4>
158
+ <p>Pasta with creamy sauce, pancetta, and parmesan. $15</p>
159
+ </div>
160
+ </div>
161
+ <h3>Book Table</h3>
162
+ <select id="time-slot">
163
+ <!-- Time slots will be populated dynamically -->
164
+ </select>
165
+ <button onclick="bookTable()">Book Now</button>
166
  </div>
 
167
  </div>
168
 
169
  <script>
170
+ const tables = [
171
+ { id: 1, name: "Table 1" },
172
+ { id: 2, name: "Table 2" },
173
+ { id: 3, name: "Table 3" },
174
+ { id: 4, name: "Table 4" },
175
+ { id: 5, name: "Table 5" }
176
+ ];
177
+
178
+ // Populate tables
179
+ const tablesContainer = document.getElementById("tables");
180
+ tables.forEach(table => {
181
+ const tableDiv = document.createElement("div");
182
+ tableDiv.className = "table";
183
+ tableDiv.id = `table-${table.id}`;
184
+ tableDiv.innerHTML = `
185
+ <h3>${table.name}</h3>
186
+ <p>Click to view menu</p>
187
+ <p class="availability-text" id="availability-${table.id}">Loading...</p>
188
+ `;
189
+ tableDiv.onclick = () => openModal(table.id, table.name);
190
+ tablesContainer.appendChild(tableDiv);
191
+ });
192
 
193
+ let currentTableId = null;
194
+
195
+ // Update live availability for all tables
196
+ async function updateLiveAvailability() {
197
+ for (const table of tables) {
198
+ try {
199
+ const response = await fetch(`/api/availability/${table.id}`);
200
+ const data = await response.json();
201
+ const availabilityText = document.getElementById(`availability-${table.id}`);
202
+ if (data.next_slot) {
203
+ availabilityText.textContent = `Next: ${data.next_slot}`;
204
+ availabilityText.style.color = "#ffd700";
205
  } else {
206
+ availabilityText.textContent = "Booked";
207
+ availabilityText.style.color = "#ff4d4d";
208
  }
209
+ } catch (error) {
210
+ console.error(`Error fetching availability for table ${table.id}:`, error);
211
+ document.getElementById(`availability-${table.id}`).textContent = "Error";
212
+ }
213
+ }
214
+ }
215
+
216
+ // Initial load and periodic updates
217
+ updateLiveAvailability();
218
+ setInterval(updateLiveAvailability, 30000); // Update every 30 seconds
219
+
220
+ // Open modal with menu and availability
221
+ async function openModal(tableId, tableName) {
222
+ currentTableId = tableId;
223
+ document.getElementById("modal-title").textContent = `${tableName} Menu`;
224
+ document.getElementById("modal").style.display = "flex";
225
+
226
+ // Fetch availability
227
+ try {
228
+ const response = await fetch(`/api/availability/${tableId}`);
229
+ const data = await response.json();
230
+ const availableSlots = data.available_slots;
231
+
232
+ // Update availability display
233
+ const availabilityDiv = document.getElementById("availability");
234
+ availabilityDiv.innerHTML = availableSlots.length > 0
235
+ ? `Available slots: ${availableSlots.join(", ")}`
236
+ : "No available slots";
237
+
238
+ // Populate time slot dropdown
239
+ const timeSlotSelect = document.getElementById("time-slot");
240
+ timeSlotSelect.innerHTML = "";
241
+ if (availableSlots.length > 0) {
242
+ availableSlots.forEach(slot => {
243
+ const option = document.createElement("option");
244
+ option.value = slot;
245
+ option.textContent = slot;
246
+ timeSlotSelect.appendChild(option);
247
+ });
248
+ } else {
249
+ const option = document.createElement("option");
250
+ option.value = "";
251
+ option.textContent = "No slots available";
252
+ timeSlotSelect.appendChild(option);
253
+ }
254
+ } catch (error) {
255
+ console.error("Error fetching availability:", error);
256
+ document.getElementById("availability").innerHTML = "Error loading availability";
257
+ }
258
+ }
259
+
260
+ // Close modal
261
+ function closeModal() {
262
+ document.getElementById("modal").style.display = "none";
263
+ currentTableId = null;
264
+ }
265
+
266
+ // Book table
267
+ async function bookTable() {
268
+ if (!currentTableId) return;
269
+
270
+ const timeSlot = document.getElementById("time-slot").value;
271
+ if (!timeSlot) {
272
+ alert("Please select a time slot");
273
+ return;
274
+ }
275
+
276
+ try {
277
+ const response = await fetch("/api/book", {
278
+ method: "POST",
279
+ headers: { "Content-Type": "application/json" },
280
+ body: JSON.stringify({ table_id: currentTableId, time_slot: timeSlot })
281
  });
282
+ const result = await response.json();
283
+ if (result.success) {
284
+ alert(`Table ${currentTableId} booked for ${timeSlot}`);
285
+ closeModal();
286
+ updateLiveAvailability(); // Refresh availability after booking
287
+ } else {
288
+ alert("Booking failed: " + result.message);
289
+ }
290
+ } catch (error) {
291
+ console.error("Error booking table:", error);
292
+ alert("Error booking table");
293
+ }
294
  }
295
+
296
+ // Close modal when clicking outside
297
+ window.onclick = function(event) {
298
+ if (event.target === document.getElementById("modal")) {
299
+ closeModal();
300
+ }
301
+ };
302
  </script>
303
  </body>
304
+ </html>