Add mobile nav toggle, responsive admin tables, and menu reordering
- Public site: replace the always-hidden mobile nav with a hamburger toggle (index.php, menu.php, main.js, styles.css) - Admin: render the Menu/Announcements/Users tables as labeled cards below ~760px instead of squeezing descriptions into unreadable single-word-per-line columns - Admin menu: replace the manual "Order" number (which allowed duplicates and never reflected in real time) with ↑/↓ buttons that reorder items and categories immediately and renumber sort_order sequentially on every move, self-healing any stale duplicates Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
7c96b952e9
commit
40f4c102b4
10 files changed
+553
-94
No files matched your search
+6
-6
@@ -219,7 +219,7 @@ $today = date('Y-m-d');
|
||||
(empty($ann['end_date']) || $ann['end_date'] >= $today);
|
||||
?>
|
||||
<tr>
|
||||
<td>
|
||||
<td data-label="Status">
|
||||
<?php if ($isCurrentlyActive): ?>
|
||||
<span class="status-badge active">● Live</span>
|
||||
<?php elseif ($ann['is_active']): ?>
|
||||
@@ -228,23 +228,23 @@ $today = date('Y-m-d');
|
||||
<span class="status-badge inactive">○ Off</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td>
|
||||
<td data-label="Headline">
|
||||
<strong><?= htmlspecialchars($ann['headline']) ?></strong>
|
||||
<div class="muted" style="font-size: 0.82rem; margin-top: 0.2rem; max-width: 32ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||||
<?= htmlspecialchars($ann['message']) ?>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<td data-label="Type">
|
||||
<span class="eyebrow"><?= htmlspecialchars($ann['type']) ?></span>
|
||||
</td>
|
||||
<td class="font-mono" style="font-size: 0.8rem; color: var(--ink-muted);">
|
||||
<td class="font-mono" data-label="Schedule" style="font-size: 0.8rem; color: var(--ink-muted);">
|
||||
<?php if (!empty($ann['start_date']) || !empty($ann['end_date'])): ?>
|
||||
<?= htmlspecialchars($ann['start_date'] ?: 'Now') ?> → <?= htmlspecialchars($ann['end_date'] ?: 'Ongoing') ?>
|
||||
<?php else: ?>
|
||||
Always (while on)
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td style="font-size: 0.82rem; color: var(--ink-muted);">
|
||||
<td data-label="Placements" style="font-size: 0.82rem; color: var(--ink-muted);">
|
||||
<?php
|
||||
$locs = [];
|
||||
if (!empty($ann['show_banner'])) $locs[] = 'Top Banner';
|
||||
@@ -252,7 +252,7 @@ $today = date('Y-m-d');
|
||||
echo implode(', ', $locs) ?: 'None';
|
||||
?>
|
||||
</td>
|
||||
<td>
|
||||
<td data-label="Actions">
|
||||
<div class="admin-table-actions">
|
||||
<a href="index.php?edit=<?= (int)$ann['id'] ?>" class="btn btn-outline btn-sm">Edit</a>
|
||||
|
||||
|
||||
+147
-29
@@ -16,7 +16,6 @@ function openItemModal(itemData = null) {
|
||||
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) {
|
||||
@@ -27,7 +26,6 @@ function openItemModal(itemData = null) {
|
||||
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';
|
||||
@@ -36,7 +34,6 @@ function openItemModal(itemData = null) {
|
||||
priceField.value = '';
|
||||
badgeField.value = '';
|
||||
descField.value = '';
|
||||
sortField.value = 0;
|
||||
availField.checked = true;
|
||||
}
|
||||
|
||||
@@ -53,20 +50,17 @@ function openCategoryModal(catData = null) {
|
||||
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');
|
||||
@@ -163,12 +157,84 @@ document.getElementById('categories-container').addEventListener('click', async
|
||||
openCategoryModal({
|
||||
id: target.dataset.id,
|
||||
name: target.dataset.name,
|
||||
description: target.dataset.desc,
|
||||
sort_order: target.dataset.sort
|
||||
description: target.dataset.desc
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Move Item Up/Down
|
||||
if (target.classList.contains('btn-move-item')) {
|
||||
const direction = target.dataset.direction;
|
||||
const row = target.closest('tr');
|
||||
const tbody = row.parentElement;
|
||||
const sibling = direction === 'up' ? row.previousElementSibling : row.nextElementSibling;
|
||||
if (!sibling) return; // already at this edge; button should be disabled anyway
|
||||
|
||||
target.disabled = true;
|
||||
const fd = new FormData();
|
||||
fd.append('action', 'move_item');
|
||||
fd.append('item_id', row.dataset.itemId);
|
||||
fd.append('direction', direction);
|
||||
fd.append('csrf_token', csrfToken);
|
||||
|
||||
try {
|
||||
const data = await postForm(fd);
|
||||
if (!data.success) {
|
||||
alert(data.error || 'Failed to reorder item.');
|
||||
target.disabled = false;
|
||||
return;
|
||||
}
|
||||
if (direction === 'up') {
|
||||
tbody.insertBefore(row, sibling);
|
||||
} else {
|
||||
tbody.insertBefore(sibling, row);
|
||||
}
|
||||
// Re-derives disabled state from DOM position rather than re-enabling
|
||||
// `target` unconditionally, since the swap may have just moved it
|
||||
// onto an edge (e.g. into the first/last slot) where it should stay disabled.
|
||||
refreshMoveButtonStates(tbody);
|
||||
} catch {
|
||||
alert('Network error. Please try again.');
|
||||
target.disabled = false;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Move Category Up/Down
|
||||
if (target.classList.contains('btn-move-cat')) {
|
||||
const direction = target.dataset.direction;
|
||||
const panel = target.closest('.category-panel');
|
||||
const container = panel.parentElement;
|
||||
const sibling = direction === 'up' ? panel.previousElementSibling : panel.nextElementSibling;
|
||||
if (!sibling) return;
|
||||
|
||||
target.disabled = true;
|
||||
const fd = new FormData();
|
||||
fd.append('action', 'move_category');
|
||||
fd.append('category_id', target.dataset.id);
|
||||
fd.append('direction', direction);
|
||||
fd.append('csrf_token', csrfToken);
|
||||
|
||||
try {
|
||||
const data = await postForm(fd);
|
||||
if (!data.success) {
|
||||
alert(data.error || 'Failed to reorder category.');
|
||||
target.disabled = false;
|
||||
return;
|
||||
}
|
||||
if (direction === 'up') {
|
||||
container.insertBefore(panel, sibling);
|
||||
} else {
|
||||
container.insertBefore(sibling, panel);
|
||||
}
|
||||
refreshCategoryMoveButtonStates();
|
||||
} catch {
|
||||
alert('Network error. Please try again.');
|
||||
target.disabled = false;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle Availability (Mark Sold Out / Mark Available)
|
||||
if (target.classList.contains('btn-toggle-item')) {
|
||||
const row = target.closest('tr');
|
||||
@@ -203,6 +269,7 @@ document.getElementById('categories-container').addEventListener('click', async
|
||||
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 tbody = row?.parentElement;
|
||||
|
||||
const fd = new FormData();
|
||||
fd.append('action', 'delete_item');
|
||||
@@ -215,7 +282,10 @@ document.getElementById('categories-container').addEventListener('click', async
|
||||
row.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
|
||||
row.style.opacity = '0';
|
||||
row.style.transform = 'translateX(-10px)';
|
||||
setTimeout(() => row.remove(), 200);
|
||||
setTimeout(() => {
|
||||
row.remove();
|
||||
refreshMoveButtonStates(tbody);
|
||||
}, 200);
|
||||
}
|
||||
} catch {
|
||||
alert('Failed to delete item.');
|
||||
@@ -239,7 +309,10 @@ document.getElementById('categories-container').addEventListener('click', async
|
||||
panel.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
|
||||
panel.style.opacity = '0';
|
||||
panel.style.transform = 'translateY(-10px)';
|
||||
setTimeout(() => panel.remove(), 200);
|
||||
setTimeout(() => {
|
||||
panel.remove();
|
||||
refreshCategoryMoveButtonStates();
|
||||
}, 200);
|
||||
}
|
||||
} catch {
|
||||
alert('Failed to delete category.');
|
||||
@@ -247,9 +320,64 @@ document.getElementById('categories-container').addEventListener('click', async
|
||||
}
|
||||
});
|
||||
|
||||
// Sets the up/down move buttons' disabled state from each row's actual DOM
|
||||
// position, rather than tracking indices by hand — first row can't move up,
|
||||
// last can't move down, everything in between can do either. Call this
|
||||
// after any insert/remove/reorder in a category's tbody.
|
||||
function refreshMoveButtonStates(tbody) {
|
||||
if (!tbody) return;
|
||||
const rows = [...tbody.querySelectorAll('tr[data-item-id]')];
|
||||
rows.forEach((row, index) => {
|
||||
const upBtn = row.querySelector('.btn-move-item[data-direction="up"]');
|
||||
const downBtn = row.querySelector('.btn-move-item[data-direction="down"]');
|
||||
if (upBtn) upBtn.disabled = index === 0;
|
||||
if (downBtn) downBtn.disabled = index === rows.length - 1;
|
||||
});
|
||||
}
|
||||
|
||||
// Same idea as refreshMoveButtonStates(), for category panels.
|
||||
function refreshCategoryMoveButtonStates() {
|
||||
const panels = [...document.querySelectorAll('#categories-container .category-panel')];
|
||||
panels.forEach((panel, index) => {
|
||||
const upBtn = panel.querySelector('.btn-move-cat[data-direction="up"]');
|
||||
const downBtn = panel.querySelector('.btn-move-cat[data-direction="down"]');
|
||||
if (upBtn) upBtn.disabled = index === 0;
|
||||
if (downBtn) downBtn.disabled = index === panels.length - 1;
|
||||
});
|
||||
}
|
||||
|
||||
function itemRowHtml(item, isAvail) {
|
||||
return `
|
||||
<td data-label="Status"><span class="status-badge ${isAvail ? 'active' : 'inactive'}">${isAvail ? '● Available' : '○ Sold Out / Hidden'}</span></td>
|
||||
<td data-label="Item"><strong class="item-name-cell">${escapeHtml(item.name)}</strong><div class="muted item-desc-cell">${escapeHtml(item.description || '')}</div></td>
|
||||
<td class="font-mono item-price-cell" data-label="Price">${escapeHtml(item.price)}</td>
|
||||
<td class="item-badge-cell" data-label="Tag">${item.badge ? `<span class="eyebrow">${escapeHtml(item.badge)}</span>` : '<span class="muted">—</span>'}</td>
|
||||
<td data-label="Actions"><div class="admin-table-actions">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="up" aria-label="Move ${escapeHtml(item.name)} up">↑</button>
|
||||
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="down" aria-label="Move ${escapeHtml(item.name)} down">↓</button>
|
||||
<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 ? 'Mark Sold Out' : 'Mark Available'}</button>
|
||||
<button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="${item.id}">Delete</button>
|
||||
</div></td>
|
||||
`;
|
||||
}
|
||||
|
||||
function updateOrInsertItemRow(item, isNew) {
|
||||
const isAvail = parseInt(item.is_available, 10) === 1;
|
||||
const existingRow = document.getElementById(`item-row-${item.id}`);
|
||||
let existingRow = document.getElementById(`item-row-${item.id}`);
|
||||
|
||||
// An edit can reassign an item to a different category — when that
|
||||
// happens the row needs to move tables, not just update in place, so
|
||||
// detach it here and let it fall through to the insert path below.
|
||||
if (existingRow && existingRow.closest('table')?.id !== `cat-table-${item.category_id}`) {
|
||||
const oldTbody = existingRow.parentElement;
|
||||
existingRow.remove();
|
||||
existingRow = null;
|
||||
refreshMoveButtonStates(oldTbody);
|
||||
if (oldTbody && !oldTbody.querySelector('tr[data-item-id]')) {
|
||||
oldTbody.innerHTML = '<tr class="no-items-row"><td colspan="5" class="muted">No items in this category yet.</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
if (existingRow) {
|
||||
// Update existing row
|
||||
@@ -261,7 +389,6 @@ function updateOrInsertItemRow(item, isNew) {
|
||||
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
|
||||
@@ -272,7 +399,8 @@ function updateOrInsertItemRow(item, isNew) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Item was created or moved — insert into matching category table
|
||||
// Item was created or moved to this category — it always joins at the
|
||||
// end (see next_item_sort_order() server-side), so just append it.
|
||||
const catTable = document.getElementById(`cat-table-${item.category_id}`);
|
||||
if (!catTable) return;
|
||||
|
||||
@@ -283,21 +411,10 @@ function updateOrInsertItemRow(item, isNew) {
|
||||
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">${escapeHtml(item.description || '')}</div></td>
|
||||
<td class="font-mono item-price-cell">${escapeHtml(item.price)}</td>
|
||||
<td class="item-badge-cell">${item.badge ? `<span class="eyebrow">${escapeHtml(item.badge)}</span>` : '<span class="muted">—</span>'}</td>
|
||||
<td class="font-mono item-sort-cell">${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 ? 'Mark Sold Out' : 'Mark Available'}</button>
|
||||
<button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="${item.id}">Delete</button>
|
||||
</div></td>
|
||||
`;
|
||||
tr.innerHTML = itemRowHtml(item, isAvail);
|
||||
|
||||
tbody.appendChild(tr);
|
||||
refreshMoveButtonStates(tbody);
|
||||
}
|
||||
|
||||
// Static shell for a category panel. Only text-content positions use
|
||||
@@ -314,6 +431,8 @@ function categoryPanelHtml(category) {
|
||||
<p class="muted cat-desc-text">${escapeHtml(category.description || '')}</p>
|
||||
</div>
|
||||
<div class="admin-table-actions">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="up" data-id="${category.id}" aria-label="Move category up">↑</button>
|
||||
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="down" data-id="${category.id}" aria-label="Move category down">↓</button>
|
||||
<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>
|
||||
@@ -327,13 +446,12 @@ function categoryPanelHtml(category) {
|
||||
<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">No items in this category yet.</td>
|
||||
<td colspan="5" class="muted">No items in this category yet.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -353,7 +471,6 @@ function applyCategoryData(panel, category) {
|
||||
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;
|
||||
}
|
||||
@@ -401,4 +518,5 @@ function updateOrInsertCategoryPanel(category) {
|
||||
applyCategoryData(panel, category);
|
||||
syncCategoryOption(category);
|
||||
resortCategoryPanels();
|
||||
refreshCategoryMoveButtonStates();
|
||||
}
|
||||
+45
-26
@@ -42,7 +42,6 @@ function handle_save_item(array $post): array
|
||||
'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];
|
||||
@@ -67,6 +66,20 @@ function handle_toggle_item(array $post): array
|
||||
];
|
||||
}
|
||||
|
||||
function handle_move_item(array $post): array
|
||||
{
|
||||
$itemId = (int) ($post['item_id'] ?? 0);
|
||||
$direction = post_str($post, 'direction');
|
||||
if ($itemId <= 0 || !get_menu_item_by_id($itemId)) {
|
||||
return ['success' => false, 'error' => 'Menu item not found.'];
|
||||
}
|
||||
if (!in_array($direction, ['up', 'down'], true)) {
|
||||
return ['success' => false, 'error' => 'Invalid direction.'];
|
||||
}
|
||||
|
||||
return move_menu_item($itemId, $direction);
|
||||
}
|
||||
|
||||
function handle_delete_item(array $post): array
|
||||
{
|
||||
$itemId = (int) ($post['item_id'] ?? 0);
|
||||
@@ -93,12 +106,25 @@ function handle_save_category(array $post): array
|
||||
$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_move_category(array $post): array
|
||||
{
|
||||
$catId = (int) ($post['category_id'] ?? 0);
|
||||
$direction = post_str($post, 'direction');
|
||||
if ($catId <= 0 || !get_category_by_id($catId)) {
|
||||
return ['success' => false, 'error' => 'Category not found.'];
|
||||
}
|
||||
if (!in_array($direction, ['up', 'down'], true)) {
|
||||
return ['success' => false, 'error' => 'Invalid direction.'];
|
||||
}
|
||||
|
||||
return move_category($catId, $direction);
|
||||
}
|
||||
|
||||
function handle_delete_category(array $post): array
|
||||
{
|
||||
$catId = (int) ($post['category_id'] ?? 0);
|
||||
@@ -115,8 +141,10 @@ function handle_menu_action(string $action, array $post): array
|
||||
return match ($action) {
|
||||
'save_item' => handle_save_item($post),
|
||||
'toggle_item' => handle_toggle_item($post),
|
||||
'move_item' => handle_move_item($post),
|
||||
'delete_item' => handle_delete_item($post),
|
||||
'save_category' => handle_save_category($post),
|
||||
'move_category' => handle_move_category($post),
|
||||
'delete_category' => handle_delete_category($post),
|
||||
default => ['success' => false, 'error' => 'Unknown action'],
|
||||
};
|
||||
@@ -196,7 +224,8 @@ $menuGrouped = get_full_menu(false);
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<?php foreach ($menuGrouped as $category): ?>
|
||||
<?php $catCount = count($menuGrouped); ?>
|
||||
<?php foreach ($menuGrouped as $catIndex => $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>
|
||||
@@ -206,11 +235,12 @@ $menuGrouped = get_full_menu(false);
|
||||
<p class="muted cat-desc-text"><?= htmlspecialchars($category['description'] ?? '') ?></p>
|
||||
</div>
|
||||
<div class="admin-table-actions">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="up" data-id="<?= (int) $category['id'] ?>" aria-label="Move <?= htmlspecialchars($category['name']) ?> category up" <?= $catIndex === 0 ? 'disabled' : '' ?>>↑</button>
|
||||
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="down" data-id="<?= (int) $category['id'] ?>" aria-label="Move <?= htmlspecialchars($category['name']) ?> category down" <?= $catIndex === $catCount - 1 ? 'disabled' : '' ?>>↓</button>
|
||||
<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'] ?>">
|
||||
data-desc="<?= htmlspecialchars($category['description'] ?? '') ?>">
|
||||
Edit Category
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-sm btn-delete-cat" data-id="<?= (int) $category['id'] ?>">
|
||||
@@ -227,46 +257,45 @@ $menuGrouped = get_full_menu(false);
|
||||
<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">No items in this category yet.</td>
|
||||
<td colspan="5" class="muted">No items in this category yet.</td>
|
||||
</tr>
|
||||
<?php else: ?>
|
||||
<?php foreach ($category['items'] as $item): ?>
|
||||
<?php $itemCount = count($category['items']); ?>
|
||||
<?php foreach ($category['items'] as $itemIndex => $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>
|
||||
<td data-label="Status">
|
||||
<?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>
|
||||
<td data-label="Item">
|
||||
<strong class="item-name-cell"><?= htmlspecialchars($item['name']) ?></strong>
|
||||
<div class="muted item-desc-cell">
|
||||
<?= htmlspecialchars($item['description'] ?? '') ?>
|
||||
</div>
|
||||
</td>
|
||||
<td class="font-mono item-price-cell">
|
||||
<td class="font-mono item-price-cell" data-label="Price">
|
||||
<?= htmlspecialchars($item['price']) ?>
|
||||
</td>
|
||||
<td class="item-badge-cell">
|
||||
<td class="item-badge-cell" data-label="Tag">
|
||||
<?php if (!empty($item['badge'])): ?>
|
||||
<span class="eyebrow"><?= htmlspecialchars($item['badge']) ?></span>
|
||||
<?php else: ?>
|
||||
<span class="muted">—</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td class="font-mono item-sort-cell">
|
||||
<?= (int) $item['sort_order'] ?>
|
||||
</td>
|
||||
<td>
|
||||
<td data-label="Actions">
|
||||
<div class="admin-table-actions">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="up" aria-label="Move <?= htmlspecialchars($item['name']) ?> up" <?= $itemIndex === 0 ? 'disabled' : '' ?>>↑</button>
|
||||
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="down" aria-label="Move <?= htmlspecialchars($item['name']) ?> down" <?= $itemIndex === $itemCount - 1 ? 'disabled' : '' ?>>↓</button>
|
||||
<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'] ? 'Mark Sold Out' : 'Mark Available' ?>
|
||||
@@ -337,11 +366,6 @@ $menuGrouped = get_full_menu(false);
|
||||
<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">
|
||||
@@ -374,11 +398,6 @@ $menuGrouped = get_full_menu(false);
|
||||
<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">
|
||||
|
||||
+4
-4
@@ -197,10 +197,10 @@ function insertUserRow(user) {
|
||||
// HTML string — escapeHtml() only escapes for text-content positions,
|
||||
// not attribute values, so it can't safely build an attribute string.
|
||||
tr.innerHTML = `
|
||||
<td><strong>${escapeHtml(user.username)}</strong></td>
|
||||
<td>${escapeHtml(user.role.charAt(0).toUpperCase() + user.role.slice(1))}</td>
|
||||
<td class="font-mono item-sort-cell">${escapeHtml(user.created_at)}</td>
|
||||
<td><div class="admin-table-actions">
|
||||
<td data-label="Username"><strong>${escapeHtml(user.username)}</strong></td>
|
||||
<td data-label="Role">${escapeHtml(user.role.charAt(0).toUpperCase() + user.role.slice(1))}</td>
|
||||
<td class="font-mono item-sort-cell" data-label="Created">${escapeHtml(user.created_at)}</td>
|
||||
<td data-label="Actions"><div class="admin-table-actions">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-change-password" data-id="${user.id}">Change Password</button>
|
||||
<button type="button" class="btn btn-danger btn-sm btn-delete-user" data-id="${user.id}">Delete</button>
|
||||
</div></td>
|
||||
|
||||
+4
-4
@@ -195,15 +195,15 @@ $users = get_all_users();
|
||||
<tbody id="users-tbody">
|
||||
<?php foreach ($users as $row): ?>
|
||||
<tr id="user-row-<?= (int) $row['id'] ?>" data-user-id="<?= (int) $row['id'] ?>">
|
||||
<td>
|
||||
<td data-label="Username">
|
||||
<strong><?= htmlspecialchars($row['username']) ?></strong>
|
||||
<?php if ((int) $row['id'] === (int) $user['id']): ?>
|
||||
<span class="muted"> (you)</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td><?= htmlspecialchars(ucfirst($row['role'])) ?></td>
|
||||
<td class="font-mono item-sort-cell"><?= htmlspecialchars($row['created_at']) ?></td>
|
||||
<td>
|
||||
<td data-label="Role"><?= htmlspecialchars(ucfirst($row['role'])) ?></td>
|
||||
<td class="font-mono item-sort-cell" data-label="Created"><?= htmlspecialchars($row['created_at']) ?></td>
|
||||
<td data-label="Actions">
|
||||
<div class="admin-table-actions">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-change-password"
|
||||
data-id="<?= (int) $row['id'] ?>"
|
||||
|
||||
Reference in new issue
Block a user