${doc.fileName || 'Untitled'}
${new Date(doc.date).toLocaleString()}
`;
div.onclick = () => {
if(doc.data) {
state.data = doc.data;
populateDataDropdown();
showData(0);
}
document.getElementById('history-modal').classList.add('hidden');
toast('History Loaded', 'success');
};
list.appendChild(div);
});
feather.replace();
}
document.getElementById('history-modal').classList.remove('hidden');
}
// Utils
function rgbToHex(rgb) {
if (!rgb) return '#000000';
if (rgb.startsWith('#')) return rgb;
const rgbValues = rgb.match(/\d+/g);
if (!rgbValues) return '#000000';
return "#" + ((1 << 24) + (parseInt(rgbValues[0]) << 16) + (parseInt(rgbValues[1]) << 8) + parseInt(rgbValues[2])).toString(16).slice(1);
}
// --- Complete Usage Examples ---
function showUsageExamples() {
console.log('=== PDF Layout Wizard - Complete Usage Examples ===\n');
console.log('1. BASIC USAGE:');
console.log(' - Load sample data: Click "Load Sample" in sidebar');
console.log(' - Edit field positions: Toggle Design Mode (pencil icon in navbar)');
console.log(' - Download PDF: Click "Download PDF" in sidebar');
console.log('\n2. ADVANCED FEATURES:');
console.log(' ├─ Layout Management:');
console.log(' │ • Export Layout: Design Mode → Export Layout');
console.log(' │ • Import Layout: Sidebar → Import Layout');
console.log(' │ • Save Layout: Design Mode → Save Layout to History');
console.log(' │ • New Layout: Design Mode → New Layout');
console.log(' ├─ Data Management:');
console.log(' │ • JSON Import: Sidebar → Import JSON');
console.log(' │ • Data Dashboard: Navbar → Database icon');
console.log(' │ • Record Switching: Sidebar dropdown');
console.log(' ├─ PDF Features:');
console.log(' │ • PDF Upload: Sidebar → Import PDF');
console.log(' │ • PDF Viewer: Tab switch → PDF Viewer');
console.log(' │ • QR Integration: Navbar → Grid icon');
console.log(' └─ Export Options:');
console.log(' • Single PDF: Sidebar → Download PDF');
console.log(' • Batch Export: Sidebar → Download All');
console.log(' • Layout Export: Design Mode → Export Layout');
console.log('\n3. KEYBOARD SHORTCUTS:');
console.log(' - Ctrl + S: Download PDF');
console.log(' - Ctrl + =: Zoom In');
console.log(' - Ctrl + -: Zoom Out');
console.log(' - ESC: Close modals / Exit Design Mode');
console.log('\n4. DESIGN MODE WORKFLOW:');
console.log(' Step 1: Click Design Mode button (pencil icon)');
console.log(' Step 2: Click and drag fields to position');
console.log(' Step 3: Select field to edit properties (size, color, weight)');
console.log(' Step 4: Export layout for reuse');
console.log(' Step 5: Exit Design Mode (ESC or button)');
console.log('\n5. DATA WORKFLOW:');
console.log(' • JSON Format: Must be array of objects with numbered keys (1-12)');
console.log(' • Dashboard: Open in new tab for full CRUD operations');
console.log(' • Real-time Update: Dashboard changes reflect in main app');
console.log('\n6. PDF WORKFLOW:');
console.log(' • Upload Base PDF: Use PDF as template');
console.log(' • View Mode: Switch to PDF tab to preview');
console.log(' • QR Addition: Add QR codes to existing PDF');
console.log(' • Zoom Controls: Bottom HUD controls');
console.log('\n7. HISTORY & STORAGE:');
console.log(' • Auto-save: All generations saved to history');
console.log(' • Layout Persistence: Saved in browser IndexedDB');
console.log(' • Restore: Click history items to restore');
console.log(' • Export/Import: Share layouts across devices');
console.log('\n8. CUSTOMIZATION:');
console.log(' • CSS Variables: Modify :root colors in style.css');
console.log(' • Field Mapping: Edit fieldToKey object in script.js');
console.log(' • Default Layouts: Create preset layouts');
console.log(' • Branding: Update navbar title and icons');
console.log(' • Theme: Toggle light/dark mode');
console.log('\n9. SAMPLE COMMANDS:');
console.log(' loadSample() // Load demo data');
console.log(' toggleDesignMode() // Toggle field editing');
console.log(' exportLayout() // Save current layout');
console.log(' newLayout() // Reset to blank layout');
console.log(' showData(0) // Show first data record');
console.log(' downloadPDF() // Generate PDF');
console.log(' saveLayoutToDB() // Save layout to history');
console.log(' importLayout(file) // Import layout JSON');
console.log('\n10. TROUBLESHOOTING:');
console.log(' • Images not showing: Enable CORS in browser');
console.log(' • PDF generation slow: Reduce image sizes');
console.log(' • Layout not saving: Check browser storage limits');
console.log(' • QR codes broken: Verify URL includes protocol');
console.log(' • Fields misaligned: Check zoom level is 100%');
console.log('\n=== Ready to use! Check dashboard.html for data management ===');
}
// Auto-show usage on first load
if (!localStorage.getItem('pdf_wizard_usage_shown')) {
setTimeout(showUsageExamples, 2000);
localStorage.setItem('pdf_wizard_usage_shown', 'true');
}
// Example of programmatic usage:
/*
// 1. Create custom data
const customData = [{
"1": "John Doe",
"2": "Senior Developer",
"3": "Engineering",
"4": "https://example.com/photo.jpg",
"5": "2024-01-15",
"6": "2025-01-15",
"7": "Tech Corp",
"8": "San Francisco",
"9": "94105",
"10": "USA",
"11": "EMP001",
"12": "DOC2024001"
}];
// 2. Load data programmatically
state.data = customData;
populateDataDropdown();
showData(0);
// 3. Enable design mode
toggleDesignMode();
// 4. Export layout programmatically
setTimeout(() => {
document.getElementById('layout-name-input').value = 'My Custom Layout';
exportLayout();
}, 5000);
// 5. Generate PDF with data
setTimeout(downloadPDF, 8000);
*/