Schematic placeholder for component placement.
';
const locationMap = {
'Central': 'top-[45%] left-[40%]',
'Top Left': 'top-[10%] left-[5%]',
'Top Right': 'top-[10%] right-[5%]',
'Bottom Left': 'bottom-[10%] left-[5%]',
'Bottom Right': 'bottom-[10%] right-[5%]',
'Perimeter': 'top-[2%] left-[45%]', // Simple generic perimeter
};
diagramComponents.forEach(item => {
const div = document.createElement('div');
div.className = `sketch-component ${locationMap[item.location] || locationMap['Central']}`;
div.textContent = `${item.name}`;
div.title = `${item.name} (${item.location})`;
diagramSketchArea.appendChild(div);
});
// 3. Update Review Table Body
reviewTableBody.innerHTML = '';
if (diagramComponents.length === 0) {
reviewTableBody.innerHTML = '
| No components added yet. |
';
return;
}
diagramComponents.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
${item.name} |
${item.function} |
${item.location} |
${item.type || 'N/A'} |
`;
reviewTableBody.appendChild(row);
});
}
const downloadPDF = () => {
const meta = getMeta();
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'pt', 'a4');
let currentY = 40;
const margin = 40;
const pageWidth = doc.internal.pageSize.width;
// --- PDF Header ---
doc.setFontSize(22);
doc.setFont('Helvetica', 'bold');
doc.setTextColor(76, 175, 80);
doc.text(`${meta.title.toUpperCase()} DIAGRAM PLAN`, pageWidth / 2, currentY, { align: 'center' });
currentY += 15;
doc.setFontSize(12);
doc.setFont('Helvetica', 'normal');
doc.setTextColor(108, 117, 125);
doc.text(`Concept: ${meta.type} | Date: ${formatDate(meta.date)}`, pageWidth / 2, currentY, { align: 'center' });
currentY += 30;
doc.setTextColor(0);
// --- 1. Component Table ---
doc.setFontSize(16);
doc.setFont('Helvetica', 'bold');
doc.setTextColor(76, 175, 80);
doc.text("1. Component and Label List", margin, currentY);
currentY += 15;
doc.setTextColor(0);
const finalHeaders = ["Component/Label", "Function/Description", "Location", "Visual Type"];
const tableBody = diagramComponents.map(item => [
item.name,
item.function,
item.location,
item.type || 'N/A'
]);
doc.autoTable({
startY: currentY,
head: [finalHeaders],
body: tableBody,
theme: 'grid',
styles: {
fontSize: 10,
cellPadding: 6,
font: 'Helvetica',
valign: 'middle'
},
headStyles: {
fillColor: [76, 175, 80],
textColor: [255, 255, 255],
fontStyle: 'bold'
},
columnStyles: {
1: { cellWidth: 150 } // Make function column wider
}
});
currentY = doc.autoTable.previous.finalY + 30;
// --- 2. Visual Guide (Textual Representation) ---
doc.setFontSize(16);
doc.setFont('Helvetica', 'bold');
doc.setTextColor(76, 175, 80);
doc.text("2. Visual Placement Guide (Sketch Map)", margin, currentY);
currentY += 15;
doc.setTextColor(0);
// Group components by location for a structured list
const groupedComponents = diagramComponents.reduce((acc, item) => {
acc[item.location] = acc[item.location] || [];
acc[item.location].push(`${item.name} (${item.type || 'N/A'})`);
return acc;
}, {});
doc.setFontSize(11);
doc.setFont('Helvetica', 'normal');
Object.entries(groupedComponents).forEach(([location, names]) => {
currentY += 10;
doc.setFont('Helvetica', 'bold');
doc.text(`Location: ${location}`, margin, currentY);
currentY += 8;
doc.setFont('Helvetica', 'normal');
const listText = names.join(', ');
const lines = doc.splitTextToSize(listText, pageWidth - margin * 2 - 10);
doc.text(lines, margin + 10, currentY);
currentY += (lines.length * 10) + 5;
});
doc.save(`${meta.title.replace(/\s/g, '_')}_Diagram_Plan.pdf`);
}
// --- Tab Navigation ---
const switchTab = (tabIndex) => {
tabs.forEach((tab, index) => {
tab.classList.toggle('active', index === tabIndex);
contents[index].classList.toggle('active', index === tabIndex);
});
currentTab = tabIndex;
updateNavButtons();
if (tabIndex === 1) { // Review tab
generateDiagramPlan();
}
}
const updateNavButtons = () => {
prevBtn.disabled = currentTab === 0;
nextBtn.disabled = currentTab === tabs.length - 1;
}
// Attach listeners to tab buttons
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => {
// Find actual index based on position in DOM
const tabNode = tab.closest('.planner-tab-button');
const newIndex = Array.from(tabNode.parentNode.children).indexOf(tabNode);
switchTab(newIndex);
});
});
nextBtn.addEventListener('click', () => { if (currentTab < tabs.length - 1) switchTab(currentTab + 1); });
prevBtn.addEventListener('click', () => { if (currentTab > 0) switchTab(currentTab - 1); });
// --- Event Listeners ---
pdfDownloadBtn.addEventListener('click', downloadPDF);
metaForm.addEventListener('input', generateDiagramPlan);
// --- Initial Setup ---
const today = new Date();
const yyyy = today.getFullYear();
const mm = String(today.getMonth() + 1).padStart(2, '0');
const dd = String(today.getDate()).padStart(2, '0');
diagramDateInput.value = `${yyyy}-${mm}-${dd}`;
renderComponentTable();
renderLibraryTable();
updateNavButtons();
generateDiagramPlan();
});
