into alternating grid cells.
const contentLayout = state.expanded
? 'display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; align-items: start;'
: 'display: flex; flex-direction: column;';
body += `
`;
let mainContent = '';
let statusText = state.status.toUpperCase();
if (state.status === 'awaiting-manual') statusText = 'PAUSED';
mainContent += `
STATUS: ${statusText} ${state.step ? '(' + state.step + ')' : ''}
`;
mainContent += `
Auto-Advance Mode:
${state.autoMode ? 'ON' : 'OFF'}
`;
if (state.status === 'idle') {
if (type === 'group-list') {
mainContent += `
Navigate to the Event Groups list, set per-page to 100, and click Scan.
`;
mainContent += btn('Scan Page for Cabanas', 'cba-scan', 'primary');
} else {
mainContent += `
Go to the Event Groups list page to scan.
`;
}
}
else if (state.status === 'reviewing') {
// SWAPPED: Now the Cabana selection menu takes up the primary prominent area on the left/main column
mainContent += `
Select Cabanas to Process:
`;
// Full height prominent scrolling container for cabanas
const listHeight = state.expanded ? '320px' : '220px';
mainContent += `
`;
state.scanned.forEach((item, idx) => {
const isChecked = item.selected !== false ? 'checked' : '';
mainContent += `
`;
});
mainContent += `
`;
mainContent += `
`;
if (state.startDate && state.endDate) {
mainContent += btn(`Start Selected Items`, 'cba-start-btn', 'success');
} else {
mainContent += `
Please set both Start and End dates to continue.
`;
}
// Cancel is now a neat compact button instead of a giant blank box block
mainContent += btn('Cancel', 'cba-clear', 'secondary');
}
else if (state.status === 'running') {
mainContent += `
`;
mainContent += `
Currently Processing:
`;
mainContent += `
${state.current ? escapeHtml(state.current.name) : '—'}
`;
mainContent += `
Queue remaining: ${state.pending.length}
`;
mainContent += `
`;
mainContent += btn('Stop Automation', 'cba-stop', 'danger');
if (state.history.length > 0) mainContent += btn('← Previous', 'cba-prev', 'warning');
}
else if (state.status === 'awaiting-manual') {
mainContent += `
`;
mainContent += `
Paused for Manual Review
`;
mainContent += `
Please verify the popup, then click Continue.
`;
mainContent += `
`;
mainContent += btn('Continue → Next', 'cba-continue', 'success');
mainContent += btn('Skip This Item', 'cba-skip', 'secondary');
mainContent += `
`;
if (state.history.length > 0) mainContent += btn('← Previous', 'cba-prev', 'warning');
mainContent += btn('Retry Step', 'cba-retry', 'secondary');
mainContent += btn('Stop Entirely', 'cba-stop', 'danger');
mainContent += `
`;
}
else if (state.status === 'finished') {
let doneCount = state.history.filter(h => h.action === 'done').length;
let skipCount = state.history.filter(h => h.action === 'skipped').length;
mainContent += `
`;
mainContent += `
Batch Complete!
`;
mainContent += `
Processed: ${doneCount}
`;
mainContent += `
Skipped: ${skipCount}
`;
mainContent += `
`;
mainContent += btn('Reset / Start Fresh', 'cba-clear', 'primary');
}
// FIX: wrap mainContent in a single container div. Previously this was
// concatenated directly into the grid container as many sibling top-level
// divs, so CSS Grid auto-placement scattered them across BOTH columns
// (col1/col2/col1/col2...) instead of keeping them together in column 1.
// That's what caused the "Start Selected Items" button to jump into the
// right column and left huge empty gaps in expanded mode.
body += `
${mainContent}
`;
// Side Column in Expanded View
if (state.expanded) {
let sideCol = `
`;
sideCol += `
SYSTEM & CONTROLS
`;
sideCol += `
`;
sideCol += `
Batch Diagnostics
`;
sideCol += `
Processed History: ${state.history.length} items
`;
sideCol += `
Current Mode: ${state.theme}
`;
sideCol += `
`;
sideCol += `
ACTIVITY LOG
`;
sideCol += `
`;
sideCol += `
`;
body += sideCol;
} else {
body += `
ACTIVITY LOG
`;
body += `
`;
}
body += `
`;
el.innerHTML = body;
renderLog();
wireButtons();
}
function wireButtons() {
const dragHandle = document.getElementById('cba-drag-handle');
if (dragHandle) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
dragHandle.onmousedown = (e) => {
if (e.target.closest('button')) return;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = () => {
document.onmouseup = null;
document.onmousemove = null;
dragHandle.style.cursor = 'grab';
state.panelPos = state.panelPos || {};
state.panelPos.top = panelEl.style.top;
state.panelPos.left = panelEl.style.left;
saveState(state);
};
document.onmousemove = (e) => {
e.preventDefault();
dragHandle.style.cursor = 'grabbing';
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
const rect = panelEl.getBoundingClientRect();
if (!panelEl.style.top || panelEl.style.top === 'auto') panelEl.style.top = rect.top + "px";
if (!panelEl.style.left || panelEl.style.left === 'auto') panelEl.style.left = rect.left + "px";
panelEl.style.bottom = "auto";
panelEl.style.right = "auto";
panelEl.style.top = (panelEl.offsetTop - pos2) + "px";
panelEl.style.left = (panelEl.offsetLeft - pos1) + "px";
};
};
}
const toggleThemeBtn = document.getElementById('cba-toggle-theme');
if (toggleThemeBtn) toggleThemeBtn.onclick = () => {
state.theme = state.theme === 'dark' ? 'light' : 'dark';
saveState(state);
renderPanel();
};
const toggleExpandBtn = document.getElementById('cba-toggle-expand');
if (toggleExpandBtn) toggleExpandBtn.onclick = () => {
state.expanded = !state.expanded;
saveState(state);
renderPanel();
};
const toggleAutoBtn = document.getElementById('cba-toggle-auto');
if (toggleAutoBtn) toggleAutoBtn.onclick = () => {
if (state.status === 'reviewing' && state.scanned) {
state.scanned.forEach((item, idx) => {
const chk = document.getElementById(`chk-${idx}`);
if (chk) item.selected = chk.checked;
});
}
state.autoMode = !state.autoMode;
saveState(state);
renderPanel();
};
const startInput = document.getElementById('cba-start');
if (startInput) startInput.onchange = (e) => { state.startDate = e.target.value; saveState(state); renderPanel(); };
const endInput = document.getElementById('cba-end');
if (endInput) endInput.onchange = (e) => { state.endDate = e.target.value; saveState(state); renderPanel(); };
const scanBtn = document.getElementById('cba-scan');
if (scanBtn) scanBtn.onclick = scanCurrentPage;
const selAllBtn = document.getElementById('cba-sel-all');
if (selAllBtn) selAllBtn.onclick = (e) => {
e.preventDefault();
state.scanned.forEach((item, idx) => {
item.selected = true;
const chk = document.getElementById(`chk-${idx}`);
if (chk) chk.checked = true;
});
saveState(state);
};
const selNoneBtn = document.getElementById('cba-sel-none');
if (selNoneBtn) selNoneBtn.onclick = (e) => {
e.preventDefault();
state.scanned.forEach((item, idx) => {
item.selected = false;
const chk = document.getElementById(`chk-${idx}`);
if (chk) chk.checked = false;
});
saveState(state);
};
const startBtn = document.getElementById('cba-start-btn');
if (startBtn) startBtn.onclick = () => {
const finalQueue = [];
state.scanned.forEach((item, idx) => {
const chk = document.getElementById(`chk-${idx}`);
if (chk) item.selected = chk.checked;
if (item.selected) finalQueue.push(item);
});
if (finalQueue.length === 0) { log('No items selected.'); return; }
state.pending = finalQueue; state.scanned = []; state.current = state.pending.shift();
state.status = 'running'; saveState(state);
log(`Starting automated queue with ${state.pending.length + 1} items.`);
goToTemplatesTabForCurrent();
};
const clearBtn = document.getElementById('cba-clear');
if (clearBtn) clearBtn.onclick = () => { state = defaultState(); clearState(); renderPanel(); };
const stopBtn = document.getElementById('cba-stop');
if (stopBtn) stopBtn.onclick = () => {
state.status = 'idle'; state.current = null; state.scanned = []; state.pending = []; saveState(state); renderPanel();
};
const continueBtn = document.getElementById('cba-continue');
if (continueBtn) continueBtn.onclick = () => advanceToNext(false);
const skipBtn = document.getElementById('cba-skip');
if (skipBtn) skipBtn.onclick = () => advanceToNext(true);
const prevBtn = document.getElementById('cba-prev');
if (prevBtn) prevBtn.onclick = goPrevious;
const retryBtn = document.getElementById('cba-retry');
if (retryBtn) retryBtn.onclick = () => { state.status = 'running'; saveState(state); runStepForCurrentPage(); };
}
// ---------- MAIN DISPATCH ----------
async function runStepForCurrentPage() {
if (state.status !== 'running') { return; }
const type = pageType();
if (type === 'group-templates' && state.step === 'templates') {
await handleGroupTemplatesPage();
} else if (type === 'template-detail' && state.step === 'action') {
await handleTemplateDetailPage();
} else if (type === 'template-detail' && state.step === 'modal_fill') {
await handleModalFill();
}
}
// ---------- INITIALIZATION & SPA OBSERVER ----------
let lastUrl = location.href;
let lastStep = state.step;
function init() {
renderPanel();
runStepForCurrentPage();
setInterval(() => {
if (!document.getElementById('cba-panel')) { renderPanel(); }
if (location.href !== lastUrl || state.step !== lastStep) {
lastUrl = location.href;
lastStep = state.step;
renderPanel();
runStepForCurrentPage();
}
}, 500);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();