Show multi-menu UI when Claude detects separate menus
When the import detects multiple menus (Brunch, Lunch, Dinner, etc.), shows checkboxes for each menu instead of a single menu name input. Passes selectedMenus array to saveWizard for separate menu creation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
John Mizerek
parent
0578d7ed88
commit
6862d97350
1 changed files with 76 additions and 34 deletions
|
|
@ -917,19 +917,28 @@
|
|||
<h3>Menu Summary</h3>
|
||||
</div>
|
||||
<div class="summary-card-body">
|
||||
<div class="summary-stat" style="flex-direction: column; align-items: stretch; gap: 8px;">
|
||||
<span class="summary-stat-label">Menu Name</span>
|
||||
<input type="text" id="menuNameInput" value="Main Menu" placeholder="e.g., Main Menu, Lunch, Dinner"
|
||||
style="padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 14px;">
|
||||
</div>
|
||||
<div class="summary-stat" style="flex-direction: column; align-items: stretch; gap: 8px;">
|
||||
<span class="summary-stat-label">Menu Hours</span>
|
||||
<div style="display: flex; gap: 12px; align-items: center;">
|
||||
<input type="time" id="menuStartTime" style="padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 14px; flex: 1;">
|
||||
<span style="color: var(--gray-500);">to</span>
|
||||
<input type="time" id="menuEndTime" style="padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 14px; flex: 1;">
|
||||
<div id="singleMenuSection">
|
||||
<div class="summary-stat" style="flex-direction: column; align-items: stretch; gap: 8px;">
|
||||
<span class="summary-stat-label">Menu Name</span>
|
||||
<input type="text" id="menuNameInput" value="Main Menu" placeholder="e.g., Main Menu, Lunch, Dinner"
|
||||
style="padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 14px;">
|
||||
</div>
|
||||
<div class="summary-stat" style="flex-direction: column; align-items: stretch; gap: 8px;">
|
||||
<span class="summary-stat-label">Menu Hours</span>
|
||||
<div style="display: flex; gap: 12px; align-items: center;">
|
||||
<input type="time" id="menuStartTime" style="padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 14px; flex: 1;">
|
||||
<span style="color: var(--gray-500);">to</span>
|
||||
<input type="time" id="menuEndTime" style="padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 14px; flex: 1;">
|
||||
</div>
|
||||
<small style="color: var(--gray-500);">Leave empty for all-day availability. You can create additional menus later in the Menu Builder.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div id="multiMenuSection" style="display: none;">
|
||||
<div class="summary-stat" style="flex-direction: column; align-items: stretch; gap: 8px;">
|
||||
<span class="summary-stat-label">Detected Menus</span>
|
||||
<div id="multiMenuList"></div>
|
||||
<small style="color: var(--gray-500);">Each menu will be created separately with its own items and categories.</small>
|
||||
</div>
|
||||
<small style="color: var(--gray-500);">Leave empty for all-day availability. You can create additional menus later in the Menu Builder.</small>
|
||||
</div>
|
||||
<div class="summary-stat">
|
||||
<span class="summary-stat-label">Categories</span>
|
||||
|
|
@ -3100,11 +3109,28 @@
|
|||
}
|
||||
|
||||
// In add-menu mode, hide menu name/hours/community meal (already set during menu creation)
|
||||
const detectedMenus = config.extractedData.menus || [];
|
||||
if (config.menuId) {
|
||||
document.getElementById('menuNameInput').parentElement.style.display = 'none';
|
||||
document.getElementById('menuStartTime').closest('.summary-stat').style.display = 'none';
|
||||
document.getElementById('singleMenuSection').style.display = 'none';
|
||||
document.getElementById('multiMenuSection').style.display = 'none';
|
||||
document.getElementById('communityMealCard').style.display = 'none';
|
||||
} else if (detectedMenus.length > 1) {
|
||||
// Multiple menus detected — show multi-menu UI
|
||||
document.getElementById('singleMenuSection').style.display = 'none';
|
||||
document.getElementById('multiMenuSection').style.display = '';
|
||||
const menuListHtml = detectedMenus.map((m, i) => {
|
||||
const menuItems = (config.extractedData.items || []).filter(item => item.menu === m.name);
|
||||
return `<div style="display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:6px;margin-bottom:6px;">
|
||||
<input type="checkbox" id="menu_${i}" checked style="width:18px;height:18px;">
|
||||
<label for="menu_${i}" style="flex:1;font-weight:500;">${m.name}</label>
|
||||
<span style="color:var(--gray-500);font-size:13px;">${menuItems.length} items</span>
|
||||
</div>`;
|
||||
}).join('');
|
||||
document.getElementById('multiMenuList').innerHTML = menuListHtml;
|
||||
} else {
|
||||
// Single menu — show normal UI
|
||||
document.getElementById('singleMenuSection').style.display = '';
|
||||
document.getElementById('multiMenuSection').style.display = 'none';
|
||||
// Set default menu hours based on business hours (earliest open, latest close)
|
||||
const hoursSchedule = business.hoursSchedule || [];
|
||||
if (hoursSchedule.length > 0) {
|
||||
|
|
@ -3145,31 +3171,47 @@
|
|||
|
||||
// In add-menu mode, skip menu name/hours/community meal — already set
|
||||
if (!config.menuId) {
|
||||
const menuName = document.getElementById('menuNameInput').value.trim() || 'Main Menu';
|
||||
const menuStartTime = document.getElementById('menuStartTime')?.value || '';
|
||||
const menuEndTime = document.getElementById('menuEndTime')?.value || '';
|
||||
const detectedMenus = config.extractedData.menus || [];
|
||||
if (detectedMenus.length > 1) {
|
||||
// Multi-menu mode — collect selected menus
|
||||
const selectedMenus = [];
|
||||
detectedMenus.forEach((m, i) => {
|
||||
const cb = document.getElementById(`menu_${i}`);
|
||||
if (cb && cb.checked) selectedMenus.push(m.name);
|
||||
});
|
||||
if (selectedMenus.length === 0) {
|
||||
showToast('Please select at least one menu', 'error');
|
||||
return;
|
||||
}
|
||||
config.extractedData.selectedMenus = selectedMenus;
|
||||
config.extractedData.menuName = selectedMenus[0]; // fallback
|
||||
} else {
|
||||
const menuName = document.getElementById('menuNameInput').value.trim() || 'Main Menu';
|
||||
const menuStartTime = document.getElementById('menuStartTime')?.value || '';
|
||||
const menuEndTime = document.getElementById('menuEndTime')?.value || '';
|
||||
|
||||
// Validate menu hours fall within business operating hours
|
||||
if (menuStartTime && menuEndTime) {
|
||||
const hoursSchedule = config.extractedData.business.hoursSchedule || [];
|
||||
if (hoursSchedule.length > 0) {
|
||||
let earliestOpen = '23:59';
|
||||
let latestClose = '00:00';
|
||||
hoursSchedule.forEach(day => {
|
||||
if (day.open && day.open < earliestOpen) earliestOpen = day.open;
|
||||
if (day.close && day.close > latestClose) latestClose = day.close;
|
||||
});
|
||||
// Validate menu hours fall within business operating hours
|
||||
if (menuStartTime && menuEndTime) {
|
||||
const hoursSchedule = config.extractedData.business.hoursSchedule || [];
|
||||
if (hoursSchedule.length > 0) {
|
||||
let earliestOpen = '23:59';
|
||||
let latestClose = '00:00';
|
||||
hoursSchedule.forEach(day => {
|
||||
if (day.open && day.open < earliestOpen) earliestOpen = day.open;
|
||||
if (day.close && day.close > latestClose) latestClose = day.close;
|
||||
});
|
||||
|
||||
if (menuStartTime < earliestOpen || menuEndTime > latestClose) {
|
||||
showToast(`Menu hours must be within business operating hours (${earliestOpen} - ${latestClose})`, 'error');
|
||||
return;
|
||||
if (menuStartTime < earliestOpen || menuEndTime > latestClose) {
|
||||
showToast(`Menu hours must be within business operating hours (${earliestOpen} - ${latestClose})`, 'error');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
config.extractedData.menuName = menuName;
|
||||
config.extractedData.menuStartTime = menuStartTime;
|
||||
config.extractedData.menuEndTime = menuEndTime;
|
||||
config.extractedData.menuName = menuName;
|
||||
config.extractedData.menuStartTime = menuStartTime;
|
||||
config.extractedData.menuEndTime = menuEndTime;
|
||||
}
|
||||
|
||||
// Community meal participation type (1=provide meals, 2=food bank)
|
||||
const communityMealRadio = document.querySelector('input[name="communityMealType"]:checked');
|
||||
|
|
|
|||
Reference in a new issue