Add online menu management, modernized and hardened
Adds a public menu page (menu.php) and an admin CRUD interface (admin/menu.php + admin/menu.js) backed by new menu_categories and menu_items tables, replacing the "menu lives on Facebook" placeholder on the homepage. The admin JS/PHP came out of an AI-assisted pass that used outdated JS (var, .then() chains, string-built HTML) and had some rough edges security-wise, so this also: - Rewrites the admin JS to modern ES (const/let, async/await, template literals, dataset API) and splits it out of admin/menu.php into admin/menu.js for proper separation of concerns - Adds declare(strict_types=1) and PHP 8 match-based action dispatch in place of an if-chain - Validates category_id/item_id/category_id server-side before use, so a bad ID returns a clean JSON error instead of an uncaught PDOException or a null item breaking the client - Rejects non-string POST fields instead of crashing trim() on them - Replaces the category-save handler's full-page location.reload() with in-place DOM updates (panel insert/update, resort by sort_order, keep the item modal's category dropdown in sync), so every admin action is now AJAX with no reload - Sets data-name/data-desc via dataset assignment rather than string- interpolating them into an HTML attribute, closing a stored-XSS path through the category name/description fields Removes seed-menu.php, a leftover stub with no working code left in it after the AI's one-time seeding run. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
David DyerandClaude Sonnet 5 committed
1 parent
21ad6c31cf
commit
f1bbf59548
8 files changed
+1382
-27
No files matched your search
@@ -76,6 +76,10 @@ $today = date('Y-m-d');
|
||||
<img src="../assets/knot.png" alt="" class="knot">
|
||||
<span>The Old Fitz Admin</span>
|
||||
</a>
|
||||
<div class="admin-nav-links">
|
||||
<a href="index.php" class="active">Announcements</a>
|
||||
<a href="menu.php">Menu</a>
|
||||
</div>
|
||||
<div class="admin-user">
|
||||
<span>Logged in as <strong><?= htmlspecialchars($user['username']) ?></strong></span>
|
||||
<a href="../" target="_blank" rel="noopener">View Public Site ↗</a>
|
||||
|
||||
+416
@@ -0,0 +1,416 @@
|
||||
// Menu Management admin page: category/item CRUD via fetch, modal handling.
|
||||
// The CSRF token is handed off from PHP via <body data-csrf-token="..."> so
|
||||
// this file stays pure static JS with no server-side templating in it.
|
||||
|
||||
const csrfToken = document.body.dataset.csrfToken;
|
||||
|
||||
// Item Modal helpers
|
||||
const itemModal = document.getElementById('modal-item-backdrop');
|
||||
const catModal = document.getElementById('modal-cat-backdrop');
|
||||
|
||||
function openItemModal(itemData = null) {
|
||||
const title = document.getElementById('modal-item-title');
|
||||
const idField = document.getElementById('item-field-id');
|
||||
const nameField = document.getElementById('item-field-name');
|
||||
const catField = document.getElementById('item-field-cat');
|
||||
const priceField = document.getElementById('item-field-price');
|
||||
const badgeField = document.getElementById('item-field-badge');
|
||||
const descField = document.getElementById('item-field-desc');
|
||||
const sortField = document.getElementById('item-field-sort');
|
||||
const availField = document.getElementById('item-field-available');
|
||||
|
||||
if (itemData) {
|
||||
title.textContent = '✏️ Edit Menu Item';
|
||||
idField.value = itemData.id || 0;
|
||||
nameField.value = itemData.name || '';
|
||||
catField.value = itemData.category_id || catField.options[0]?.value || 0;
|
||||
priceField.value = itemData.price || '';
|
||||
badgeField.value = itemData.badge || '';
|
||||
descField.value = itemData.description || '';
|
||||
sortField.value = itemData.sort_order || 0;
|
||||
availField.checked = parseInt(itemData.is_available, 10) === 1;
|
||||
} else {
|
||||
title.textContent = '✨ Add Menu Item';
|
||||
idField.value = 0;
|
||||
nameField.value = '';
|
||||
priceField.value = '';
|
||||
badgeField.value = '';
|
||||
descField.value = '';
|
||||
sortField.value = 0;
|
||||
availField.checked = true;
|
||||
}
|
||||
|
||||
itemModal.classList.add('is-open');
|
||||
nameField.focus();
|
||||
}
|
||||
|
||||
function closeItemModal() {
|
||||
itemModal.classList.remove('is-open');
|
||||
}
|
||||
|
||||
function openCategoryModal(catData = null) {
|
||||
const title = document.getElementById('modal-cat-title');
|
||||
const idField = document.getElementById('cat-field-id');
|
||||
const nameField = document.getElementById('cat-field-name');
|
||||
const descField = document.getElementById('cat-field-desc');
|
||||
const sortField = document.getElementById('cat-field-sort');
|
||||
|
||||
if (catData) {
|
||||
title.textContent = '✏️ Edit Category';
|
||||
idField.value = catData.id || 0;
|
||||
nameField.value = catData.name || '';
|
||||
descField.value = catData.description || '';
|
||||
sortField.value = catData.sort_order || 0;
|
||||
} else {
|
||||
title.textContent = '✨ Add Category';
|
||||
idField.value = 0;
|
||||
nameField.value = '';
|
||||
descField.value = '';
|
||||
sortField.value = 0;
|
||||
}
|
||||
|
||||
catModal.classList.add('is-open');
|
||||
nameField.focus();
|
||||
}
|
||||
|
||||
function closeCategoryModal() {
|
||||
catModal.classList.remove('is-open');
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text ?? '';
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
async function postForm(formData) {
|
||||
const response = await fetch('menu.php', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
||||
});
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// Modal listeners
|
||||
document.getElementById('btn-new-item').addEventListener('click', () => openItemModal());
|
||||
document.getElementById('btn-new-cat').addEventListener('click', () => openCategoryModal());
|
||||
document.getElementById('btn-create-first-cat')?.addEventListener('click', () => openCategoryModal());
|
||||
document.getElementById('btn-close-item-modal').addEventListener('click', closeItemModal);
|
||||
document.getElementById('btn-cancel-item').addEventListener('click', closeItemModal);
|
||||
document.getElementById('btn-close-cat-modal').addEventListener('click', closeCategoryModal);
|
||||
document.getElementById('btn-cancel-cat').addEventListener('click', closeCategoryModal);
|
||||
|
||||
// Close on backdrop click
|
||||
itemModal.addEventListener('click', (e) => { if (e.target === itemModal) closeItemModal(); });
|
||||
catModal.addEventListener('click', (e) => { if (e.target === catModal) closeCategoryModal(); });
|
||||
|
||||
// Close on Escape key
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
closeItemModal();
|
||||
closeCategoryModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Form submit: Save Item (Async Fetch)
|
||||
document.getElementById('form-item').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const saveBtn = document.getElementById('btn-save-item');
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.textContent = 'Saving...';
|
||||
|
||||
try {
|
||||
const res = await postForm(new FormData(e.target));
|
||||
if (res.success) {
|
||||
closeItemModal();
|
||||
updateOrInsertItemRow(res.item, res.is_new);
|
||||
} else {
|
||||
alert(res.error || 'Failed to save item.');
|
||||
}
|
||||
} catch {
|
||||
alert('Network error. Please try again.');
|
||||
} finally {
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = 'Save Item';
|
||||
}
|
||||
});
|
||||
|
||||
// Form submit: Save Category (Async Fetch)
|
||||
document.getElementById('form-cat').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const saveBtn = document.getElementById('btn-save-cat');
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.textContent = 'Saving...';
|
||||
|
||||
try {
|
||||
const res = await postForm(new FormData(e.target));
|
||||
if (res.success) {
|
||||
closeCategoryModal();
|
||||
updateOrInsertCategoryPanel(res.category);
|
||||
} else {
|
||||
alert(res.error || 'Failed to save category.');
|
||||
}
|
||||
} catch {
|
||||
alert('Network error. Please try again.');
|
||||
} finally {
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = 'Save Category';
|
||||
}
|
||||
});
|
||||
|
||||
// Delegate Table Actions: Edit, Toggle Availability, Delete
|
||||
document.getElementById('categories-container').addEventListener('click', async (e) => {
|
||||
const { target } = e;
|
||||
|
||||
// Edit Item
|
||||
if (target.classList.contains('btn-edit-item')) {
|
||||
const row = target.closest('tr');
|
||||
openItemModal(JSON.parse(row.dataset.item));
|
||||
return;
|
||||
}
|
||||
|
||||
// Edit Category
|
||||
if (target.classList.contains('btn-edit-cat')) {
|
||||
openCategoryModal({
|
||||
id: target.dataset.id,
|
||||
name: target.dataset.name,
|
||||
description: target.dataset.desc,
|
||||
sort_order: target.dataset.sort
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle Availability (Mark Sold Out / Mark Available)
|
||||
if (target.classList.contains('btn-toggle-item')) {
|
||||
const row = target.closest('tr');
|
||||
const statusBadge = row.querySelector('.status-badge');
|
||||
target.disabled = true;
|
||||
|
||||
const fd = new FormData();
|
||||
fd.append('action', 'toggle_item');
|
||||
fd.append('item_id', target.dataset.id);
|
||||
fd.append('csrf_token', csrfToken);
|
||||
|
||||
try {
|
||||
const data = await postForm(fd);
|
||||
if (data.success) {
|
||||
statusBadge.className = `status-badge ${data.status_class}`;
|
||||
statusBadge.textContent = data.status_badge;
|
||||
target.textContent = data.btn_text;
|
||||
|
||||
const currentData = JSON.parse(row.dataset.item);
|
||||
currentData.is_available = data.is_available ? 1 : 0;
|
||||
row.dataset.item = JSON.stringify(currentData);
|
||||
}
|
||||
} catch {
|
||||
alert('Failed to update status.');
|
||||
} finally {
|
||||
target.disabled = false;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Delete Item
|
||||
if (target.classList.contains('btn-delete-item')) {
|
||||
if (!confirm('Are you sure you want to delete this menu item?')) return;
|
||||
const row = target.closest('tr');
|
||||
|
||||
const fd = new FormData();
|
||||
fd.append('action', 'delete_item');
|
||||
fd.append('item_id', target.dataset.id);
|
||||
fd.append('csrf_token', csrfToken);
|
||||
|
||||
try {
|
||||
const data = await postForm(fd);
|
||||
if (data.success && row) {
|
||||
row.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
|
||||
row.style.opacity = '0';
|
||||
row.style.transform = 'translateX(-10px)';
|
||||
setTimeout(() => row.remove(), 200);
|
||||
}
|
||||
} catch {
|
||||
alert('Failed to delete item.');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Delete Category
|
||||
if (target.classList.contains('btn-delete-cat')) {
|
||||
if (!confirm('Are you sure you want to delete this category and ALL its menu items?')) return;
|
||||
const panel = document.getElementById(`cat-panel-${target.dataset.id}`);
|
||||
|
||||
const fd = new FormData();
|
||||
fd.append('action', 'delete_category');
|
||||
fd.append('category_id', target.dataset.id);
|
||||
fd.append('csrf_token', csrfToken);
|
||||
|
||||
try {
|
||||
const data = await postForm(fd);
|
||||
if (data.success && panel) {
|
||||
panel.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
|
||||
panel.style.opacity = '0';
|
||||
panel.style.transform = 'translateY(-10px)';
|
||||
setTimeout(() => panel.remove(), 200);
|
||||
}
|
||||
} catch {
|
||||
alert('Failed to delete category.');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function updateOrInsertItemRow(item, isNew) {
|
||||
const isAvail = parseInt(item.is_available, 10) === 1;
|
||||
const existingRow = document.getElementById(`item-row-${item.id}`);
|
||||
|
||||
if (existingRow) {
|
||||
// Update existing row
|
||||
existingRow.dataset.item = JSON.stringify(item);
|
||||
const statusBadge = existingRow.querySelector('.status-badge');
|
||||
statusBadge.className = `status-badge ${isAvail ? 'active' : 'inactive'}`;
|
||||
statusBadge.textContent = isAvail ? '● Available' : '○ Sold Out / Hidden';
|
||||
|
||||
existingRow.querySelector('.item-name-cell').textContent = item.name;
|
||||
existingRow.querySelector('.item-desc-cell').textContent = item.description || '';
|
||||
existingRow.querySelector('.item-price-cell').textContent = item.price;
|
||||
existingRow.querySelector('.item-sort-cell').textContent = item.sort_order || 0;
|
||||
|
||||
const badgeCell = existingRow.querySelector('.item-badge-cell');
|
||||
badgeCell.innerHTML = item.badge
|
||||
? `<span class="eyebrow" style="font-size: 0.68rem;">${escapeHtml(item.badge)}</span>`
|
||||
: '<span class="muted">—</span>';
|
||||
|
||||
existingRow.querySelector('.btn-toggle-item').textContent = isAvail ? 'Sold Out' : 'Available';
|
||||
return;
|
||||
}
|
||||
|
||||
// Item was created or moved — insert into matching category table
|
||||
const catTable = document.getElementById(`cat-table-${item.category_id}`);
|
||||
if (!catTable) return;
|
||||
|
||||
const tbody = catTable.querySelector('tbody');
|
||||
tbody.querySelector('.no-items-row')?.remove();
|
||||
|
||||
const tr = document.createElement('tr');
|
||||
tr.id = `item-row-${item.id}`;
|
||||
tr.dataset.itemId = item.id;
|
||||
tr.dataset.item = JSON.stringify(item);
|
||||
|
||||
tr.innerHTML = `
|
||||
<td><span class="status-badge ${isAvail ? 'active' : 'inactive'}">${isAvail ? '● Available' : '○ Sold Out / Hidden'}</span></td>
|
||||
<td><strong class="item-name-cell">${escapeHtml(item.name)}</strong><div class="muted item-desc-cell" style="font-size: 0.82rem; margin-top: 0.2rem;">${escapeHtml(item.description || '')}</div></td>
|
||||
<td class="font-mono item-price-cell" style="color: var(--gold-bright); font-weight: 500;">${escapeHtml(item.price)}</td>
|
||||
<td class="item-badge-cell">${item.badge ? `<span class="eyebrow" style="font-size: 0.68rem;">${escapeHtml(item.badge)}</span>` : '<span class="muted">—</span>'}</td>
|
||||
<td class="font-mono item-sort-cell" style="color: var(--ink-muted); font-size: 0.8rem;">${item.sort_order || 0}</td>
|
||||
<td><div class="admin-table-actions">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-edit-item">Edit</button>
|
||||
<button type="button" class="btn btn-outline btn-sm btn-toggle-item" data-id="${item.id}">${isAvail ? 'Sold Out' : 'Available'}</button>
|
||||
<button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="${item.id}">Delete</button>
|
||||
</div></td>
|
||||
`;
|
||||
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
|
||||
// Static shell for a category panel. Only text-content positions use
|
||||
// escapeHtml() here — it does not escape quote characters, so it must never
|
||||
// be used to build an HTML *attribute* string (see applyCategoryData below,
|
||||
// which sets data-name/data-desc directly via dataset instead).
|
||||
function categoryPanelHtml(category) {
|
||||
return `
|
||||
<div class="panel-head">
|
||||
<div>
|
||||
<h2 class="cat-name-heading" style="margin-bottom: 0.25rem;">
|
||||
<span>${escapeHtml(category.name)}</span>
|
||||
</h2>
|
||||
<p class="muted cat-desc-text" style="font-size: 0.88rem;">${escapeHtml(category.description || '')}</p>
|
||||
</div>
|
||||
<div class="admin-table-actions">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-edit-cat">Edit Category</button>
|
||||
<button type="button" class="btn btn-danger btn-sm btn-delete-cat">Delete Category</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-table-wrap">
|
||||
<table class="admin-table" id="cat-table-${category.id}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<th>Item</th>
|
||||
<th>Price</th>
|
||||
<th>Tag</th>
|
||||
<th>Order</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="items-tbody">
|
||||
<tr class="no-items-row">
|
||||
<td colspan="6" class="muted" style="text-align: center; padding: 1.5rem 0;">No items in this category yet.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Sets id/data-* on a category panel via direct property assignment (never
|
||||
// via HTML-string interpolation), so arbitrary characters in the name or
|
||||
// description can't break out of an attribute.
|
||||
function applyCategoryData(panel, category) {
|
||||
panel.id = `cat-panel-${category.id}`;
|
||||
panel.dataset.catId = category.id;
|
||||
panel.dataset.sortOrder = category.sort_order || 0;
|
||||
|
||||
const editBtn = panel.querySelector('.btn-edit-cat');
|
||||
editBtn.dataset.id = category.id;
|
||||
editBtn.dataset.name = category.name;
|
||||
editBtn.dataset.desc = category.description || '';
|
||||
editBtn.dataset.sort = category.sort_order || 0;
|
||||
|
||||
panel.querySelector('.btn-delete-cat').dataset.id = category.id;
|
||||
}
|
||||
|
||||
// Keeps category panels in the same order the server would render them in
|
||||
// (by sort_order, then id) after an in-place create/edit.
|
||||
function resortCategoryPanels() {
|
||||
const container = document.getElementById('categories-container');
|
||||
const panels = [...container.querySelectorAll('.category-panel')];
|
||||
panels.sort((a, b) => {
|
||||
const bySortOrder = (Number(a.dataset.sortOrder) || 0) - (Number(b.dataset.sortOrder) || 0);
|
||||
return bySortOrder !== 0 ? bySortOrder : (Number(a.dataset.catId) || 0) - (Number(b.dataset.catId) || 0);
|
||||
});
|
||||
panels.forEach((panel) => container.appendChild(panel));
|
||||
}
|
||||
|
||||
// Keeps the "Menu Category" dropdown in the item modal in sync so a
|
||||
// newly-created or renamed category is immediately usable without a reload.
|
||||
function syncCategoryOption(category) {
|
||||
const select = document.getElementById('item-field-cat');
|
||||
let option = select.querySelector(`option[value="${category.id}"]`);
|
||||
if (!option) {
|
||||
option = document.createElement('option');
|
||||
option.value = category.id;
|
||||
select.appendChild(option);
|
||||
}
|
||||
option.textContent = category.name;
|
||||
}
|
||||
|
||||
function updateOrInsertCategoryPanel(category) {
|
||||
document.getElementById('empty-menu-panel')?.remove();
|
||||
|
||||
let panel = document.getElementById(`cat-panel-${category.id}`);
|
||||
|
||||
if (panel) {
|
||||
panel.querySelector('.cat-name-heading span').textContent = category.name;
|
||||
panel.querySelector('.cat-desc-text').textContent = category.description || '';
|
||||
} else {
|
||||
panel = document.createElement('div');
|
||||
panel.className = 'panel category-panel';
|
||||
panel.innerHTML = categoryPanelHtml(category);
|
||||
document.getElementById('categories-container').appendChild(panel);
|
||||
}
|
||||
|
||||
applyCategoryData(panel, category);
|
||||
syncCategoryOption(category);
|
||||
resortCategoryPanels();
|
||||
}
|
||||
+385
@@ -0,0 +1,385 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
require_once __DIR__ . '/../inc/auth.php';
|
||||
require_once __DIR__ . '/../inc/menu.php';
|
||||
|
||||
require_auth();
|
||||
$user = get_logged_in_user();
|
||||
|
||||
/**
|
||||
* Safely read a trimmed string from a POST payload, guarding against
|
||||
* unexpected non-string input (e.g. a spoofed `name[]=` array field).
|
||||
*/
|
||||
function post_str(array $data, string $key, string $default = ''): string {
|
||||
$value = $data[$key] ?? $default;
|
||||
return is_string($value) ? trim($value) : $default;
|
||||
}
|
||||
|
||||
function handle_save_item(array $post): array {
|
||||
$categoryId = (int)($post['category_id'] ?? 0);
|
||||
if (!category_exists($categoryId)) {
|
||||
return ['success' => false, 'error' => 'Please choose a valid menu category.'];
|
||||
}
|
||||
|
||||
$name = post_str($post, 'name');
|
||||
$price = post_str($post, 'price');
|
||||
if ($name === '' || $price === '') {
|
||||
return ['success' => false, 'error' => 'Item name and price are required.'];
|
||||
}
|
||||
|
||||
$itemId = !empty($post['item_id']) ? (int)$post['item_id'] : null;
|
||||
if ($itemId !== null && ($itemId <= 0 || !get_menu_item_by_id($itemId))) {
|
||||
return ['success' => false, 'error' => 'Menu item not found.'];
|
||||
}
|
||||
|
||||
$savedId = save_menu_item([
|
||||
'category_id' => $categoryId,
|
||||
'name' => $name,
|
||||
'description' => post_str($post, 'description'),
|
||||
'price' => $price,
|
||||
'badge' => post_str($post, 'badge'),
|
||||
'is_available' => isset($post['is_available']) ? 1 : 0,
|
||||
'sort_order' => (int)($post['sort_order'] ?? 0),
|
||||
], $itemId);
|
||||
|
||||
return ['success' => true, 'item' => get_menu_item_by_id($savedId), 'is_new' => $itemId === null];
|
||||
}
|
||||
|
||||
function handle_toggle_item(array $post): array {
|
||||
$itemId = (int)($post['item_id'] ?? 0);
|
||||
if ($itemId <= 0 || !get_menu_item_by_id($itemId)) {
|
||||
return ['success' => false, 'error' => 'Menu item not found.'];
|
||||
}
|
||||
|
||||
toggle_menu_item_availability($itemId);
|
||||
$item = get_menu_item_by_id($itemId);
|
||||
|
||||
return [
|
||||
'success' => true,
|
||||
'is_available' => (bool)$item['is_available'],
|
||||
'status_badge' => $item['is_available'] ? '● Available' : '○ Sold Out / Hidden',
|
||||
'status_class' => $item['is_available'] ? 'active' : 'inactive',
|
||||
'btn_text' => $item['is_available'] ? 'Sold Out' : 'Available',
|
||||
];
|
||||
}
|
||||
|
||||
function handle_delete_item(array $post): array {
|
||||
$itemId = (int)($post['item_id'] ?? 0);
|
||||
if ($itemId <= 0) {
|
||||
return ['success' => false, 'error' => 'Menu item not found.'];
|
||||
}
|
||||
|
||||
delete_menu_item($itemId);
|
||||
return ['success' => true];
|
||||
}
|
||||
|
||||
function handle_save_category(array $post): array {
|
||||
$name = post_str($post, 'name');
|
||||
if ($name === '') {
|
||||
return ['success' => false, 'error' => 'Category name is required.'];
|
||||
}
|
||||
|
||||
$catId = !empty($post['category_id']) ? (int)$post['category_id'] : null;
|
||||
if ($catId !== null && ($catId <= 0 || !get_category_by_id($catId))) {
|
||||
return ['success' => false, 'error' => 'Category not found.'];
|
||||
}
|
||||
|
||||
$savedId = save_category([
|
||||
'name' => $name,
|
||||
'description' => post_str($post, 'description'),
|
||||
'sort_order' => (int)($post['sort_order'] ?? 0),
|
||||
], $catId);
|
||||
|
||||
return ['success' => true, 'category' => get_category_by_id($savedId), 'is_new' => $catId === null];
|
||||
}
|
||||
|
||||
function handle_delete_category(array $post): array {
|
||||
$catId = (int)($post['category_id'] ?? 0);
|
||||
if ($catId <= 0) {
|
||||
return ['success' => false, 'error' => 'Category not found.'];
|
||||
}
|
||||
|
||||
delete_category($catId);
|
||||
return ['success' => true];
|
||||
}
|
||||
|
||||
function handle_menu_action(string $action, array $post): array {
|
||||
return match ($action) {
|
||||
'save_item' => handle_save_item($post),
|
||||
'toggle_item' => handle_toggle_item($post),
|
||||
'delete_item' => handle_delete_item($post),
|
||||
'save_category' => handle_save_category($post),
|
||||
'delete_category' => handle_delete_category($post),
|
||||
default => ['success' => false, 'error' => 'Unknown action'],
|
||||
};
|
||||
}
|
||||
|
||||
// Handle AJAX actions (JSON response)
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
header('Content-Type: application/json; charset=utf-8');
|
||||
|
||||
$csrfToken = $_POST['csrf_token'] ?? null;
|
||||
if (!verify_csrf_token(is_string($csrfToken) ? $csrfToken : null)) {
|
||||
http_response_code(403);
|
||||
echo json_encode(['success' => false, 'error' => 'Session expired or invalid security token. Please refresh.']);
|
||||
exit;
|
||||
}
|
||||
|
||||
$action = is_string($_POST['action'] ?? null) ? $_POST['action'] : '';
|
||||
echo json_encode(handle_menu_action($action, $_POST));
|
||||
exit;
|
||||
}
|
||||
|
||||
$categories = get_all_categories();
|
||||
$menuGrouped = get_full_menu(false);
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Menu Management | The Old Fitz Admin</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
</head>
|
||||
<body data-csrf-token="<?= htmlspecialchars(get_csrf_token(), ENT_QUOTES, 'UTF-8') ?>">
|
||||
|
||||
<nav class="admin-nav">
|
||||
<div class="container admin-nav-inner">
|
||||
<a href="index.php" class="admin-brand">
|
||||
<img src="../assets/knot.png" alt="" class="knot">
|
||||
<span>The Old Fitz Admin</span>
|
||||
</a>
|
||||
<div class="admin-nav-links">
|
||||
<a href="index.php">Announcements</a>
|
||||
<a href="menu.php" class="active">Menu</a>
|
||||
</div>
|
||||
<div class="admin-user">
|
||||
<span>Logged in as <strong><?= htmlspecialchars($user['username']) ?></strong></span>
|
||||
<a href="../" target="_blank" rel="noopener">View Public Site ↗</a>
|
||||
<a href="logout.php">Sign Out</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="dashboard-layout">
|
||||
<div class="container">
|
||||
<div class="dash-header">
|
||||
<p class="eyebrow">Food & Drink</p>
|
||||
<h1>Online Menu Management</h1>
|
||||
</div>
|
||||
|
||||
<div class="admin-toolbar">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="btn-new-item">+ Add Menu Item</button>
|
||||
<button type="button" class="btn btn-outline btn-sm" id="btn-new-cat">+ Add Category</button>
|
||||
</div>
|
||||
|
||||
<div id="categories-container">
|
||||
<?php if (empty($menuGrouped)): ?>
|
||||
<div class="panel" id="empty-menu-panel">
|
||||
<div class="empty-state">
|
||||
<p>No categories or menu items yet.</p>
|
||||
<button type="button" class="btn btn-primary btn-sm" id="btn-create-first-cat">+ Create First Category</button>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<?php foreach ($menuGrouped as $category): ?>
|
||||
<div class="panel category-panel" id="cat-panel-<?= (int)$category['id'] ?>" data-cat-id="<?= (int)$category['id'] ?>" data-sort-order="<?= (int)$category['sort_order'] ?>">
|
||||
<div class="panel-head">
|
||||
<div>
|
||||
<h2 class="cat-name-heading" style="margin-bottom: 0.25rem;">
|
||||
<span><?= htmlspecialchars($category['name']) ?></span>
|
||||
</h2>
|
||||
<p class="muted cat-desc-text" style="font-size: 0.88rem;"><?= htmlspecialchars($category['description'] ?? '') ?></p>
|
||||
</div>
|
||||
<div class="admin-table-actions">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-edit-cat"
|
||||
data-id="<?= (int)$category['id'] ?>"
|
||||
data-name="<?= htmlspecialchars($category['name']) ?>"
|
||||
data-desc="<?= htmlspecialchars($category['description'] ?? '') ?>"
|
||||
data-sort="<?= (int)$category['sort_order'] ?>">
|
||||
Edit Category
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-sm btn-delete-cat" data-id="<?= (int)$category['id'] ?>">
|
||||
Delete Category
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-table-wrap">
|
||||
<table class="admin-table" id="cat-table-<?= (int)$category['id'] ?>">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<th>Item</th>
|
||||
<th>Price</th>
|
||||
<th>Tag</th>
|
||||
<th>Order</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="items-tbody">
|
||||
<?php if (empty($category['items'])): ?>
|
||||
<tr class="no-items-row">
|
||||
<td colspan="6" class="muted" style="text-align: center; padding: 1.5rem 0;">No items in this category yet.</td>
|
||||
</tr>
|
||||
<?php else: ?>
|
||||
<?php foreach ($category['items'] as $item): ?>
|
||||
<tr id="item-row-<?= (int)$item['id'] ?>" data-item-id="<?= (int)$item['id'] ?>" data-item='<?= htmlspecialchars(json_encode($item), ENT_QUOTES, 'UTF-8') ?>'>
|
||||
<td>
|
||||
<?php if ($item['is_available']): ?>
|
||||
<span class="status-badge active">● Available</span>
|
||||
<?php else: ?>
|
||||
<span class="status-badge inactive">○ Sold Out / Hidden</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td>
|
||||
<strong class="item-name-cell"><?= htmlspecialchars($item['name']) ?></strong>
|
||||
<div class="muted item-desc-cell" style="font-size: 0.82rem; margin-top: 0.2rem;">
|
||||
<?= htmlspecialchars($item['description'] ?? '') ?>
|
||||
</div>
|
||||
</td>
|
||||
<td class="font-mono item-price-cell" style="color: var(--gold-bright); font-weight: 500;">
|
||||
<?= htmlspecialchars($item['price']) ?>
|
||||
</td>
|
||||
<td class="item-badge-cell">
|
||||
<?php if (!empty($item['badge'])): ?>
|
||||
<span class="eyebrow" style="font-size: 0.68rem;"><?= htmlspecialchars($item['badge']) ?></span>
|
||||
<?php else: ?>
|
||||
<span class="muted">—</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td class="font-mono item-sort-cell" style="color: var(--ink-muted); font-size: 0.8rem;">
|
||||
<?= (int)$item['sort_order'] ?>
|
||||
</td>
|
||||
<td>
|
||||
<div class="admin-table-actions">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-edit-item">Edit</button>
|
||||
<button type="button" class="btn btn-outline btn-sm btn-toggle-item" data-id="<?= (int)$item['id'] ?>">
|
||||
<?= $item['is_available'] ? 'Sold Out' : 'Available' ?>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="<?= (int)$item['id'] ?>">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Modal Backdrop: Menu Item -->
|
||||
<div class="admin-modal-backdrop" id="modal-item-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-item-title">
|
||||
<div class="admin-modal">
|
||||
<div class="modal-header">
|
||||
<h2 id="modal-item-title">✨ Add Menu Item</h2>
|
||||
<button type="button" class="modal-close" aria-label="Close dialog" id="btn-close-item-modal">×</button>
|
||||
</div>
|
||||
<form id="form-item">
|
||||
<input type="hidden" name="action" value="save_item">
|
||||
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars(get_csrf_token()) ?>">
|
||||
<input type="hidden" name="item_id" id="item-field-id" value="0">
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group full-width">
|
||||
<label class="checkbox-label checkbox-label-lg">
|
||||
<input type="checkbox" name="is_available" id="item-field-available" value="1" checked>
|
||||
<strong>Available (Uncheck to Mark as Sold Out / Hidden)</strong>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="item-field-cat">Menu Category</label>
|
||||
<select id="item-field-cat" name="category_id" class="form-control" required>
|
||||
<?php foreach ($categories as $cat): ?>
|
||||
<option value="<?= (int)$cat['id'] ?>"><?= htmlspecialchars($cat['name']) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="item-field-name">Item Name</label>
|
||||
<input type="text" id="item-field-name" name="name" class="form-control" placeholder="e.g. Fish & Chips" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="item-field-price">Price</label>
|
||||
<input type="text" id="item-field-price" name="price" class="form-control" placeholder="e.g. $15 or $7 / pint" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="item-field-badge">Badge / Tag (Optional)</label>
|
||||
<input type="text" id="item-field-badge" name="badge" class="form-control" placeholder="e.g. Local Favorite, On Tap">
|
||||
</div>
|
||||
|
||||
<div class="form-group full-width">
|
||||
<label for="item-field-desc">Description</label>
|
||||
<textarea id="item-field-desc" name="description" class="form-control" placeholder="Ingredients, preparation, flavor notes..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="item-field-sort">Sort Order</label>
|
||||
<input type="number" id="item-field-sort" name="sort_order" class="form-control" value="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions" style="display: flex; gap: 0.75rem; align-items: center; margin-top: 1.5rem;">
|
||||
<button type="submit" class="btn btn-primary" id="btn-save-item">Save Item</button>
|
||||
<button type="button" class="btn btn-outline" id="btn-cancel-item">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Backdrop: Category -->
|
||||
<div class="admin-modal-backdrop" id="modal-cat-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-cat-title">
|
||||
<div class="admin-modal">
|
||||
<div class="modal-header">
|
||||
<h2 id="modal-cat-title">✨ Add Category</h2>
|
||||
<button type="button" class="modal-close" aria-label="Close dialog" id="btn-close-cat-modal">×</button>
|
||||
</div>
|
||||
<form id="form-cat">
|
||||
<input type="hidden" name="action" value="save_category">
|
||||
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars(get_csrf_token()) ?>">
|
||||
<input type="hidden" name="category_id" id="cat-field-id" value="0">
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group full-width">
|
||||
<label for="cat-field-name">Category Name</label>
|
||||
<input type="text" id="cat-field-name" name="name" class="form-control" placeholder="e.g. Fare to Share" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group full-width">
|
||||
<label for="cat-field-desc">Description / Subtitle (Optional)</label>
|
||||
<input type="text" id="cat-field-desc" name="description" class="form-control" placeholder="e.g. Small bites and shareable plates.">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="cat-field-sort">Sort Order</label>
|
||||
<input type="number" id="cat-field-sort" name="sort_order" class="form-control" value="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions" style="display: flex; gap: 0.75rem; align-items: center; margin-top: 1.5rem;">
|
||||
<button type="submit" class="btn btn-primary" id="btn-save-cat">Save Category</button>
|
||||
<button type="button" class="btn btn-outline" id="btn-cancel-cat">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="menu.js" defer></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+22
-14
@@ -1,4 +1,6 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* Database connection & schema management for SQLite
|
||||
*/
|
||||
@@ -55,6 +57,26 @@ function init_db_schema(PDO $pdo): void {
|
||||
show_in_hours INTEGER NOT NULL DEFAULT 1,
|
||||
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS menu_categories (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
name TEXT NOT NULL,
|
||||
description TEXT NULL,
|
||||
sort_order INTEGER NOT NULL DEFAULT 0,
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS menu_items (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
category_id INTEGER NOT NULL REFERENCES menu_categories(id) ON DELETE CASCADE,
|
||||
name TEXT NOT NULL,
|
||||
description TEXT NULL,
|
||||
price TEXT NOT NULL,
|
||||
badge TEXT NULL,
|
||||
is_available INTEGER NOT NULL DEFAULT 1,
|
||||
sort_order INTEGER NOT NULL DEFAULT 0,
|
||||
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
");
|
||||
|
||||
// Seed default admin user if table is empty (username: admin / password: password)
|
||||
@@ -65,18 +87,4 @@ function init_db_schema(PDO $pdo): void {
|
||||
$insert = $pdo->prepare("INSERT INTO users (username, password_hash, role) VALUES (?, ?, 'admin')");
|
||||
$insert->execute(['admin', $defaultPassHash]);
|
||||
}
|
||||
|
||||
// Seed default Labor Day announcement row if table is empty
|
||||
$stmtAnn = $pdo->query("SELECT COUNT(*) as count FROM announcements");
|
||||
$annCount = $stmtAnn->fetchColumn();
|
||||
if ($annCount == 0) {
|
||||
$insertAnn = $pdo->prepare("
|
||||
INSERT INTO announcements (
|
||||
is_active, type, headline, message, start_date, end_date, show_banner, show_in_hours
|
||||
) VALUES (
|
||||
1, 'holiday', 'Labor Day Closure', 'The Old Fitz will be closed Thursday, Sept 3 through Saturday, Sept 5 for the holiday weekend. Doors reopen Thursday, Sept 10 at 4:00 PM!', NULL, NULL, 1, 1
|
||||
)
|
||||
");
|
||||
$insertAnn->execute();
|
||||
}
|
||||
}
|
||||
+135
@@ -0,0 +1,135 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* Menu helper functions
|
||||
*/
|
||||
|
||||
require_once __DIR__ . '/db.php';
|
||||
|
||||
function get_full_menu(bool $availableOnly = false): array {
|
||||
$pdo = get_db();
|
||||
|
||||
$catStmt = $pdo->query("SELECT * FROM menu_categories ORDER BY sort_order ASC, id ASC");
|
||||
$categories = $catStmt->fetchAll() ?: [];
|
||||
|
||||
$itemSql = "SELECT * FROM menu_items";
|
||||
if ($availableOnly) {
|
||||
$itemSql .= " WHERE is_available = 1";
|
||||
}
|
||||
$itemSql .= " ORDER BY sort_order ASC, id ASC";
|
||||
|
||||
$itemStmt = $pdo->query($itemSql);
|
||||
$items = $itemStmt->fetchAll() ?: [];
|
||||
|
||||
// Group items by category_id
|
||||
$grouped = [];
|
||||
foreach ($categories as $cat) {
|
||||
$cat['items'] = [];
|
||||
$grouped[$cat['id']] = $cat;
|
||||
}
|
||||
|
||||
foreach ($items as $item) {
|
||||
if (isset($grouped[$item['category_id']])) {
|
||||
$grouped[$item['category_id']]['items'][] = $item;
|
||||
}
|
||||
}
|
||||
|
||||
return array_values($grouped);
|
||||
}
|
||||
|
||||
function get_all_categories(): array {
|
||||
$pdo = get_db();
|
||||
$stmt = $pdo->query("SELECT * FROM menu_categories ORDER BY sort_order ASC, id ASC");
|
||||
return $stmt->fetchAll() ?: [];
|
||||
}
|
||||
|
||||
function get_category_by_id(int $id): ?array {
|
||||
$pdo = get_db();
|
||||
$stmt = $pdo->prepare("SELECT * FROM menu_categories WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
$res = $stmt->fetch();
|
||||
return $res ?: null;
|
||||
}
|
||||
|
||||
function category_exists(int $id): bool {
|
||||
if ($id <= 0) {
|
||||
return false;
|
||||
}
|
||||
$pdo = get_db();
|
||||
$stmt = $pdo->prepare("SELECT 1 FROM menu_categories WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
return (bool)$stmt->fetchColumn();
|
||||
}
|
||||
|
||||
function save_category(array $data, ?int $id = null): int {
|
||||
$pdo = get_db();
|
||||
$name = trim($data['name'] ?? '');
|
||||
$description = trim($data['description'] ?? '');
|
||||
$sortOrder = (int)($data['sort_order'] ?? 0);
|
||||
|
||||
if ($id && $id > 0) {
|
||||
$stmt = $pdo->prepare("UPDATE menu_categories SET name = ?, description = ?, sort_order = ? WHERE id = ?");
|
||||
$stmt->execute([$name, $description, $sortOrder, $id]);
|
||||
return $id;
|
||||
} else {
|
||||
$stmt = $pdo->prepare("INSERT INTO menu_categories (name, description, sort_order) VALUES (?, ?, ?)");
|
||||
$stmt->execute([$name, $description, $sortOrder]);
|
||||
return (int)$pdo->lastInsertId();
|
||||
}
|
||||
}
|
||||
|
||||
function delete_category(int $id): bool {
|
||||
$pdo = get_db();
|
||||
$stmt = $pdo->prepare("DELETE FROM menu_categories WHERE id = ?");
|
||||
return $stmt->execute([$id]);
|
||||
}
|
||||
|
||||
function get_menu_item_by_id(int $id): ?array {
|
||||
$pdo = get_db();
|
||||
$stmt = $pdo->prepare("SELECT * FROM menu_items WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
$res = $stmt->fetch();
|
||||
return $res ?: null;
|
||||
}
|
||||
|
||||
function save_menu_item(array $data, ?int $id = null): int {
|
||||
$pdo = get_db();
|
||||
$categoryId = (int)($data['category_id'] ?? 0);
|
||||
$name = trim($data['name'] ?? '');
|
||||
$description = trim($data['description'] ?? '');
|
||||
$price = trim($data['price'] ?? '');
|
||||
$badge = trim($data['badge'] ?? '');
|
||||
$isAvailable = !empty($data['is_available']) ? 1 : 0;
|
||||
$sortOrder = (int)($data['sort_order'] ?? 0);
|
||||
|
||||
if ($id && $id > 0) {
|
||||
$stmt = $pdo->prepare("
|
||||
UPDATE menu_items SET
|
||||
category_id = ?, name = ?, description = ?, price = ?,
|
||||
badge = ?, is_available = ?, sort_order = ?, updated_at = CURRENT_TIMESTAMP
|
||||
WHERE id = ?
|
||||
");
|
||||
$stmt->execute([$categoryId, $name, $description, $price, $badge, $isAvailable, $sortOrder, $id]);
|
||||
return $id;
|
||||
} else {
|
||||
$stmt = $pdo->prepare("
|
||||
INSERT INTO menu_items (category_id, name, description, price, badge, is_available, sort_order)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?)
|
||||
");
|
||||
$stmt->execute([$categoryId, $name, $description, $price, $badge, $isAvailable, $sortOrder]);
|
||||
return (int)$pdo->lastInsertId();
|
||||
}
|
||||
}
|
||||
|
||||
function toggle_menu_item_availability(int $id): bool {
|
||||
$pdo = get_db();
|
||||
$stmt = $pdo->prepare("UPDATE menu_items SET is_available = CASE WHEN is_available = 1 THEN 0 ELSE 1 END, updated_at = CURRENT_TIMESTAMP WHERE id = ?");
|
||||
return $stmt->execute([$id]);
|
||||
}
|
||||
|
||||
function delete_menu_item(int $id): bool {
|
||||
$pdo = get_db();
|
||||
$stmt = $pdo->prepare("DELETE FROM menu_items WHERE id = ?");
|
||||
return $stmt->execute([$id]);
|
||||
}
|
||||
@@ -46,7 +46,7 @@ $siteUrl = rtrim(SITE_URL, '/');
|
||||
|
||||
<header class="site">
|
||||
<div class="container nav-inner">
|
||||
<a class="brand" href="#main">
|
||||
<a class="brand" href="./">
|
||||
<img class="knot" src="./assets/knot.png" alt="">
|
||||
<span>THE OLD FITZ</span>
|
||||
</a>
|
||||
@@ -54,7 +54,7 @@ $siteUrl = rtrim(SITE_URL, '/');
|
||||
<a href="#about">About</a>
|
||||
<a href="#visit">Hours & Visit</a>
|
||||
<a href="#music">Live Music</a>
|
||||
<a href="#menu">Menu</a>
|
||||
<a href="menu.php">Menu</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
<a class="nav-cta" href="https://www.google.com/maps/search/?api=1&query=100+N+Washington+St+Marion+IN" target="_blank" rel="noopener">Get Directions</a>
|
||||
@@ -62,9 +62,9 @@ $siteUrl = rtrim(SITE_URL, '/');
|
||||
</header>
|
||||
|
||||
<?php
|
||||
$bannerAnnouncements = array_filter($activeAnnouncements, function($a) {
|
||||
return !empty($a['show_banner']);
|
||||
});
|
||||
$bannerAnnouncements = array_filter($activeAnnouncements, function ($a) {
|
||||
return !empty($a['show_banner']);
|
||||
});
|
||||
?>
|
||||
<?php if (!empty($bannerAnnouncements)): ?>
|
||||
<?php foreach ($bannerAnnouncements as $banner): ?>
|
||||
@@ -135,9 +135,9 @@ $siteUrl = rtrim(SITE_URL, '/');
|
||||
<div class="card reveal">
|
||||
<h3>On Tap Thu–Sat</h3>
|
||||
<?php
|
||||
$hoursAnnouncements = array_filter($activeAnnouncements, function($a) {
|
||||
return !empty($a['show_in_hours']);
|
||||
});
|
||||
$hoursAnnouncements = array_filter($activeAnnouncements, function ($a) {
|
||||
return !empty($a['show_in_hours']);
|
||||
});
|
||||
?>
|
||||
<?php foreach ($hoursAnnouncements as $hoursNotice): ?>
|
||||
<div class="hours-alert alert-<?= htmlspecialchars($hoursNotice['type']) ?>">
|
||||
@@ -220,10 +220,10 @@ $siteUrl = rtrim(SITE_URL, '/');
|
||||
<p class="eyebrow">The Menu</p>
|
||||
<h2>Pub food and a full bar, Thursday through Saturday.</h2>
|
||||
</div>
|
||||
<p class="body reveal">The current menu lives behind the bar and gets posted on our Facebook page. Stop in, or send us a message and we'll get you sorted before you arrive.</p>
|
||||
<p class="body reveal">We serve traditional Irish staples, shareable plates, and hearty comfort food until 9 PM, with bar snacks staying out later. Explore our full kitchen menu or check Facebook for weekend chalkboard features.</p>
|
||||
<div class="hero-ctas reveal">
|
||||
<a class="btn btn-primary" href="https://www.facebook.com/profile.php?id=100086635646712" target="_blank" rel="noopener">See Menu Updates on Facebook</a>
|
||||
<a class="btn btn-outline" href="mailto:info@theoldfitzpub.com">Email a Question</a>
|
||||
<a class="btn btn-primary" href="menu.php">Explore Full Menu →</a>
|
||||
<a class="btn btn-outline" href="https://www.facebook.com/profile.php?id=100086635646712" target="_blank" rel="noopener">Daily Specials on Facebook</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -295,4 +295,4 @@ $siteUrl = rtrim(SITE_URL, '/');
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
@@ -0,0 +1,202 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
require __DIR__ . '/config.php';
|
||||
require __DIR__ . '/inc/announcements.php';
|
||||
require __DIR__ . '/inc/menu.php';
|
||||
|
||||
$activeAnnouncements = get_active_announcements();
|
||||
$menuCategories = get_full_menu(true); // available items only
|
||||
$siteUrl = rtrim(SITE_URL, '/');
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Pub Menu | The Old Fitz Public House</title>
|
||||
<meta name="description" content="Explore the authentic food and drink menu at The Old Fitz Public House in Marion, Indiana. Traditional fare, shareable plates, and proper pub classics.">
|
||||
<link rel="canonical" href="<?= $siteUrl ?>/menu.php">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
|
||||
<!-- Social sharing -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="The Old Fitz Public House">
|
||||
<meta property="og:title" content="Pub Menu | The Old Fitz Public House">
|
||||
<meta property="og:description" content="Authentic Irish comfort food, fare to share, and traditional pub staples at The Old Fitz in Marion, Indiana.">
|
||||
<meta property="og:url" content="<?= $siteUrl ?>/menu.php">
|
||||
<meta property="og:image" content="<?= $siteUrl ?>/assets/og-image.png">
|
||||
<meta property="og:locale" content="en_US">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Pub Menu | The Old Fitz Public House">
|
||||
<meta name="twitter:description" content="Authentic Irish comfort food, fare to share, and traditional pub staples at The Old Fitz in Marion, Indiana.">
|
||||
<meta name="twitter:image" content="<?= $siteUrl ?>/assets/og-image.png">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a class="skip-link" href="#main">Skip to content</a>
|
||||
|
||||
<header class="site">
|
||||
<div class="container nav-inner">
|
||||
<a class="brand" href="./">
|
||||
<img class="knot" src="./assets/knot.png" alt="">
|
||||
<span>THE OLD FITZ</span>
|
||||
</a>
|
||||
<nav class="links" aria-label="Primary">
|
||||
<a href="./#about">About</a>
|
||||
<a href="./#visit">Hours & Visit</a>
|
||||
<a href="./#music">Live Music</a>
|
||||
<a href="menu.php" style="color: var(--gold-bright);">Menu</a>
|
||||
<a href="./#contact">Contact</a>
|
||||
</nav>
|
||||
<a class="nav-cta" href="https://www.google.com/maps/search/?api=1&query=100+N+Washington+St+Marion+IN" target="_blank" rel="noopener">Get Directions</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<?php
|
||||
$bannerAnnouncements = array_filter($activeAnnouncements, function($a) {
|
||||
return !empty($a['show_banner']);
|
||||
});
|
||||
?>
|
||||
<?php if (!empty($bannerAnnouncements)): ?>
|
||||
<?php foreach ($bannerAnnouncements as $banner): ?>
|
||||
<div class="announcement-banner banner-<?= htmlspecialchars($banner['type']) ?>" role="region" aria-label="Important Announcement">
|
||||
<div class="container announcement-inner">
|
||||
<span class="announcement-tag"><?= htmlspecialchars($banner['headline']) ?></span>
|
||||
<span class="announcement-sep" aria-hidden="true">·</span>
|
||||
<span class="announcement-text"><?= htmlspecialchars($banner['message']) ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<main id="main">
|
||||
|
||||
<section class="menu-page-header">
|
||||
<div class="container" style="text-align: center;">
|
||||
<p class="eyebrow">The Old Fitz Public House</p>
|
||||
<h1 style="font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--gold-bright); margin-top: 0.5rem;">Pub Menu</h1>
|
||||
<div class="rule-row" style="margin-top: 1.5rem; margin-bottom: 1.5rem;">
|
||||
<span class="line"></span>
|
||||
<img class="knot" src="./assets/knot.png" alt="">
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
<p class="muted" style="max-width: 52ch; margin: 0 auto; font-size: 1.05rem;">
|
||||
Traditional Irish staples, shareable plates, and comforting pub classics cooked fresh. Kitchen serves until 9:00 PM.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="menu-page-content" style="padding-top: 0;">
|
||||
<div class="container" style="max-width: 62rem;">
|
||||
<?php if (!empty($menuCategories)): ?>
|
||||
<div class="menu-grid" style="margin-top: 0;">
|
||||
<?php foreach ($menuCategories as $category): ?>
|
||||
<?php if (!empty($category['items'])): ?>
|
||||
<div class="menu-category">
|
||||
<div class="menu-category-header">
|
||||
<h3><?= htmlspecialchars($category['name']) ?></h3>
|
||||
<?php if (!empty($category['description'])): ?>
|
||||
<p><?= htmlspecialchars($category['description']) ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="menu-items-list">
|
||||
<?php foreach ($category['items'] as $item): ?>
|
||||
<div class="menu-item-row">
|
||||
<div class="menu-item-top">
|
||||
<span class="menu-item-name">
|
||||
<?= htmlspecialchars($item['name']) ?>
|
||||
<?php if (!empty($item['badge'])): ?>
|
||||
<span class="menu-item-badge"><?= htmlspecialchars($item['badge']) ?></span>
|
||||
<?php endif; ?>
|
||||
</span>
|
||||
<span class="menu-item-price"><?= htmlspecialchars($item['price']) ?></span>
|
||||
</div>
|
||||
<?php if (!empty($item['description'])): ?>
|
||||
<p class="menu-item-desc"><?= htmlspecialchars($item['description']) ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="panel" style="text-align: center; padding: 3rem 1.5rem;">
|
||||
<p class="muted">Our kitchen menu is currently being refreshed. Please check our Facebook page for today's specials!</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Allergen / Food Safety Disclaimer from the original print menu -->
|
||||
<div class="menu-disclaimer" style="margin-top: 3.5rem; text-align: center; padding-top: 2rem; border-top: 1px solid var(--rule);">
|
||||
<p class="muted" style="font-size: 0.8rem; line-height: 1.6; max-width: 68ch; margin: 0 auto;">
|
||||
Consuming raw or undercooked meats, poultry, seafood, shellfish, or eggs may increase your risk of foodborne illness. Our kitchen handles a variety of ingredients, and our menu items may contain or come into contact with common allergens such as milk, eggs, wheat, soy, nuts, or shellfish.
|
||||
</p>
|
||||
<div class="hero-ctas" style="margin-top: 2rem; justify-content: center;">
|
||||
<a class="btn btn-primary" href="https://www.facebook.com/profile.php?id=100086635646712" target="_blank" rel="noopener">See Daily Specials on Facebook</a>
|
||||
<a class="btn btn-outline" href="mailto:info@theoldfitzpub.com">Ask a Kitchen Question</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div>
|
||||
<a class="footer-brand" href="./">
|
||||
<img class="knot" src="./assets/knot.png" alt="">
|
||||
<span>THE OLD FITZ PUBLIC HOUSE</span>
|
||||
</a>
|
||||
<address>
|
||||
100 N Washington Street<br>
|
||||
Marion, Indiana
|
||||
</address>
|
||||
</div>
|
||||
<div>
|
||||
<p class="col-title">Hours</p>
|
||||
<div class="hours-mini">
|
||||
<span>Thu — Sat · 4:00–10:00 PM</span>
|
||||
<span>Kitchen closes at 9 PM</span>
|
||||
<span>Sun — Wed · Closed</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="col-title">Get in Touch</p>
|
||||
<a class="email" href="mailto:info@theoldfitzpub.com">info@theoldfitzpub.com</a>
|
||||
<div class="social-row">
|
||||
<a href="https://www.instagram.com/theoldfitzpub/?hl=en" target="_blank" rel="noopener" aria-label="Instagram">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<rect x="3" y="3" width="18" height="18" rx="5" />
|
||||
<circle cx="12" cy="12" r="4.2" />
|
||||
<circle cx="17.2" cy="6.8" r="1" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.facebook.com/profile.php?id=100086635646712" target="_blank" rel="noopener" aria-label="Facebook">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<path d="M15 4h-2.2C10.7 4 9.5 5.3 9.5 7.3V10H7v3.2h2.5V21h3.3v-7.8h2.6l.4-3.2h-3V7.6c0-.8.4-1.3 1.4-1.3H15V4Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<span>© 2026 The Old Fitz Public House</span>
|
||||
<span>A neighborhood pub in Marion, Indiana</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+206
-1
@@ -764,7 +764,7 @@
|
||||
|
||||
/* menu band */
|
||||
.menu-band .container {
|
||||
max-width: 47.5rem;
|
||||
max-width: 60rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -1236,4 +1236,209 @@
|
||||
.empty-state p {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
/* admin nav links */
|
||||
.admin-nav-links {
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-nav-links a {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-decoration: none;
|
||||
color: var(--ink-muted);
|
||||
padding: 0.35rem 0.65rem;
|
||||
border-radius: 0.125rem;
|
||||
transition: color .15s ease, background .15s ease;
|
||||
}
|
||||
|
||||
.admin-nav-links a:hover {
|
||||
color: var(--gold-bright);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.admin-nav-links a.active {
|
||||
color: var(--gold-bright);
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--gold);
|
||||
}
|
||||
|
||||
/* public online menu section */
|
||||
.menu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
||||
gap: 2.5rem;
|
||||
margin-top: 3rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.menu-category {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 0.25rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.menu-category-header {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
.menu-category-header h3 {
|
||||
font-size: 1.45rem;
|
||||
color: var(--gold-bright);
|
||||
}
|
||||
|
||||
.menu-category-header p {
|
||||
margin-top: 0.35rem;
|
||||
font-size: 0.88rem;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.menu-items-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.4rem;
|
||||
}
|
||||
|
||||
.menu-item-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.menu-item-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.menu-item-name {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
color: var(--ink);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.menu-item-price {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
color: var(--gold-bright);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.menu-item-desc {
|
||||
font-size: 0.88rem;
|
||||
color: var(--ink-muted);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.menu-item-badge {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.15rem 0.45rem;
|
||||
border-radius: 0.125rem;
|
||||
background: rgba(201, 163, 92, 0.15);
|
||||
border: 1px solid var(--gold-dim);
|
||||
color: var(--gold-bright);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* ---------- admin modal dialogs ---------- */
|
||||
.admin-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 12, 10, 0.8);
|
||||
backdrop-filter: blur(0.25rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 1.5rem;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .2s ease;
|
||||
}
|
||||
|
||||
.admin-modal-backdrop.is-open {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.admin-modal {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 0.25rem;
|
||||
width: 100%;
|
||||
max-width: 36rem;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.6);
|
||||
transform: translateY(0.75rem);
|
||||
transition: transform .2s ease;
|
||||
}
|
||||
|
||||
.admin-modal-backdrop.is-open .admin-modal {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 1.35rem;
|
||||
color: var(--gold-bright);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--ink-muted);
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
line-height: 1;
|
||||
transition: color .15s ease;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--gold-bright);
|
||||
}
|
||||
|
||||
.admin-toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* menu page specific headers & spacing */
|
||||
.menu-page-header {
|
||||
padding-block: 4.5rem 2.5rem;
|
||||
}
|
||||
|
||||
.menu-page-content {
|
||||
padding-bottom: 5.5rem;
|
||||
}
|
||||
Reference in new issue
Block a user