|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Menu</title> |
|
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
background-color: #f8f9fa; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
.container { |
|
max-width: 900px; |
|
} |
|
.menu-card { |
|
max-width: 350px; |
|
border-radius: 15px; |
|
overflow: hidden; |
|
background-color: #fff; |
|
margin: auto; |
|
} |
|
.menu-image { |
|
height: 200px; |
|
width: 100%; |
|
object-fit: cover; |
|
border-radius: 15px 15px 0 0; |
|
} |
|
.card-title { |
|
font-size: 1.2rem; |
|
font-weight: bold; |
|
} |
|
.card-text { |
|
font-size: 1rem; |
|
color: #6c757d; |
|
} |
|
.btn-primary { |
|
font-size: 0.9rem; |
|
border-radius: 20px; |
|
width: 100px; |
|
} |
|
.filter-container { |
|
margin-bottom: 15px; |
|
} |
|
.addons-container { |
|
max-height: 150px; |
|
overflow-y: auto; |
|
border: 1px solid #ddd; |
|
padding: 10px; |
|
background-color: #f8f9fa; |
|
border-radius: 5px; |
|
} |
|
.addons-container::-webkit-scrollbar { |
|
width: 6px; |
|
} |
|
.addons-container::-webkit-scrollbar-thumb { |
|
background-color: #aaa; |
|
border-radius: 3px; |
|
} |
|
.addons-container::-webkit-scrollbar-track { |
|
background-color: #f1f1f1; |
|
} |
|
.view-cart-container { |
|
position: fixed; |
|
bottom: 20px; |
|
right: 20px; |
|
z-index: 999; |
|
} |
|
.view-cart-button { |
|
background-color: #007bff; |
|
color: #fff; |
|
padding: 10px 20px; |
|
border-radius: 50px; |
|
font-size: 1rem; |
|
font-weight: bold; |
|
text-decoration: none; |
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.view-cart-button:hover { |
|
background-color: #0056b3; |
|
text-decoration: none; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container mt-4"> |
|
<h1 class="text-center">Menu</h1> |
|
|
|
|
|
<form method="get" action="/menu" class="text-center mb-4"> |
|
<label for="category" class="form-label fw-bold">Filter by Category:</label> |
|
<select id="category" name="category" class="form-select" onchange="this.form.submit()"> |
|
<option value="All" {% if selected_category == 'All' %}selected{% endif %}>All</option> |
|
{% for category in categories %} |
|
<option value="{{ category }}" {% if selected_category == category %}selected{% endif %}> |
|
{{ category }} |
|
</option> |
|
{% endfor %} |
|
</select> |
|
</form> |
|
|
|
|
|
<div class="row"> |
|
{% for item in food_items %} |
|
<div class="col-md-6 mb-4"> |
|
<div class="card menu-card"> |
|
<img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';"> |
|
<div class="card-body"> |
|
<h5 class="card-title">{{ item.Name }}</h5> |
|
<p class="card-text">${{ item.Price__c }}</p> |
|
<p class="card-text"><small class="text-muted">{{ item.Category__c }}</small></p> |
|
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" |
|
onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image1__c }}', '{{ item.Description__c }}')"> |
|
Add + |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
{% endfor %} |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="view-cart-container"> |
|
<a href="/cart" class="view-cart-button"> |
|
View Cart |
|
</a> |
|
</div> |
|
|
|
|
|
<div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true"> |
|
<div class="modal-dialog modal-dialog-centered"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h5 class="modal-title" id="itemModalLabel">Item Details</h5> |
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
|
</div> |
|
<div class="modal-body"> |
|
|
|
<img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;"> |
|
|
|
<h5 id="modal-name" class="fw-bold text-center"></h5> |
|
|
|
<p id="modal-price" class="text-muted text-center"></p> |
|
|
|
<p id="modal-description" class="text-secondary"></p> |
|
|
|
<div id="modal-addons" class="modal-addons mt-4"> |
|
<h6>Add-ons</h6> |
|
<div id="addons-list" class="addons-container">Loading add-ons...</div> |
|
</div> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button> |
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<script> |
|
function showItemDetails(name, price, image, description) { |
|
|
|
document.getElementById('modal-name').innerText = name; |
|
document.getElementById('modal-price').innerText = `$${price}`; |
|
document.getElementById('modal-img').src = image || '/static/placeholder.jpg'; |
|
document.getElementById('modal-description').innerText = description || 'No description available.'; |
|
document.getElementById('addons-list').innerHTML = 'Loading add-ons...'; |
|
|
|
fetch(`/api/addons?item_name=${encodeURIComponent(name)}`) |
|
.then(response => response.json()) |
|
.then(data => { |
|
const addonsList = document.getElementById('addons-list'); |
|
addonsList.innerHTML = ''; |
|
if (!data.success || !data.addons || data.addons.length === 0) { |
|
addonsList.innerHTML = 'No add-ons available.'; |
|
return; |
|
} |
|
|
|
data.addons.forEach(addon => { |
|
const listItem = document.createElement('div'); |
|
listItem.innerHTML = ` |
|
<input type="checkbox" id="addon-${addon.Id}" value="${addon.Id}" /> |
|
<label for="addon-${addon.Id}">${addon.Name} - $${addon.Price__c}</label> |
|
`; |
|
addonsList.appendChild(listItem); |
|
}); |
|
}) |
|
.catch(err => { |
|
console.error('Error fetching add-ons:', err); |
|
document.getElementById('addons-list').innerHTML = 'Unable to fetch add-ons. Please try again later.'; |
|
}); |
|
} |
|
function addToCartFromModal() { |
|
const itemName = document.getElementById('modal-name').innerText; |
|
const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', '')); |
|
const itemImage = document.getElementById('modal-img').src; |
|
const selectedAddOns = Array.from( |
|
document.querySelectorAll('#addons-list input[type="checkbox"]:checked') |
|
).map(addon => addon.value); |
|
|
|
|
|
if (!itemName || !itemPrice) { |
|
alert('Failed to add item to cart. Please try again.'); |
|
return; |
|
} |
|
|
|
|
|
const cartPayload = { |
|
itemName: itemName, |
|
itemPrice: itemPrice, |
|
itemImage: itemImage, |
|
addons: selectedAddOns |
|
}; |
|
|
|
|
|
fetch('/cart/add', { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json', |
|
}, |
|
body: JSON.stringify(cartPayload) |
|
}) |
|
.then(response => response.json()) |
|
.then(data => { |
|
if (data.success) { |
|
alert('Item added to cart successfully!'); |
|
window.location.href = '/cart'; |
|
} else { |
|
console.error('Error adding item to cart:', data.error); |
|
alert(data.error || 'Failed to add item to cart.'); |
|
} |
|
}) |
|
.catch(err => { |
|
console.error('Error adding item to cart:', err); |
|
alert('An error occurred while adding the item to the cart.'); |
|
}); |
|
} |
|
|
|
</script> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> |
|
</body> |
|
</html> |
