Unpacked Items
${unpackedItems.length}
Volume Efficiency
${efficiency}%
`;
// Render packed boxes
packedBoxes.forEach((box, i) => {
const boxHtml = `
Box ${i + 1}: ${box.original.name}
Dimensions: ${box.original.dims.join(' x ')} in
${box.items.map(item => `- ${item.name} (${item.dims.join(' x ')} in)
`).join('')}
`;
solutionDetails.innerHTML += boxHtml;
});
// Render unpacked items
if (unpackedItems.length > 0) {
const unpackedHtml = `
Unpacked Items
These items could not be packed, likely because they are too large for any available box.
${unpackedItems.map(item => `- ${item.name} (${item.dims.join(' x ')} in)
`).join('')}
`;
solutionDetails.innerHTML += unpackedHtml;
}
}
// --- Tab Logic ---
function switchTab(targetTab) {
tabs.forEach(tab => tab.classList.toggle('active', tab.dataset.tab === targetTab));
tabContents.forEach(content => content.classList.toggle('active', content.id === targetTab));
updateNavButtons();
}
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = tab.dataset.tab;
if (target === 'solution') {
const solution = runPackingOptimization();
if (solution) {
renderSolution(solution);
switchTab(target);
}
} else {
switchTab(target);
}
});
});
nextBtn.addEventListener('click', () => {
const solution = runPackingOptimization();
if (solution) {
renderSolution(solution);
switchTab('solution');
}
});
prevBtn.addEventListener('click', () => switchTab('configuration'));
function updateNavButtons() {
const currentTabId = document.querySelector('.tab-content.active').id;
if (currentTabId === 'configuration') {
prevBtn.disabled = true;
nextBtn.style.display = 'inline-flex';
pdfButtonContainer.style.display = 'none';
nextBtn.innerHTML = 'Calculate & See Solution';
} else {
prevBtn.disabled = false;
nextBtn.style.display = 'none';
pdfButtonContainer.style.display = 'block';
}
}
// --- PDF Download ---
downloadPdfBtn.addEventListener('click', async () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' });
const content = document.getElementById('pdf-content');
doc.setFont('helvetica', 'bold');
doc.setFontSize(18);
doc.text('Order Packing Plan', 14, 22);
doc.setFontSize(11);
doc.setTextColor(100);
doc.text(`Generated on: ${new Date().toLocaleDateString()}`, 14, 28);
const canvas = await html2canvas(content, { scale: 2 });
const imgData = canvas.toDataURL('image/jpeg', 1.0);
const imgProps = doc.getImageProperties(imgData);
const pdfWidth = doc.internal.pageSize.getWidth() - 28;
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
doc.addImage(imgData, 'JPEG', 14, 40, pdfWidth, pdfHeight);
doc.save(`Packing-Plan-${new Date().toISOString().slice(0,10)}.pdf`);
});
// --- Initial Load ---
populateSampleData();
updateNavButtons();
});
