To: ${data.to}
From: ${data.from}
Date: ${new Date().toLocaleDateString()}
Subject: ${data.subject}
${data.body.replace(/\n/g, '
')}
`
},
report: {
name: "Status Report",
fields: [
{ id: 'projectName', label: 'Project Name', type: 'text', placeholder: 'e.g., Marketing Campaign' },
{ id: 'reportingPeriod', label: 'Reporting Period', type: 'text', placeholder: 'e.g., August 1-15, 2025' },
{ id: 'completed', label: 'Completed Tasks', type: 'textarea', placeholder: 'List tasks finished this period...' },
{ id: 'inProgress', label: 'Tasks in Progress', type: 'textarea', placeholder: 'List ongoing tasks...' },
{ id: 'blockers', label: 'Blockers / Issues', type: 'textarea', placeholder: 'List any challenges or roadblocks...' }
],
generate: (data) => `
Status Report: ${data.projectName}
Reporting Period: ${data.reportingPeriod}
Tasks Completed
${data.completed.split('\n').map(item => `- ${item}
`).join('')}
Tasks In Progress
${data.inProgress.split('\n').map(item => `- ${item}
`).join('')}
Blockers & Issues
${data.blockers.split('\n').map(item => `- ${item}
`).join('')}
`
}
};
// --- DOM REFERENCES ---
const templateSelect = document.getElementById('template-select');
const templateFieldsContainer = document.getElementById('template-fields');
const generateBtn = document.getElementById('generate-btn');
const documentPreview = document.getElementById('document-preview');
const downloadSection = document.getElementById('download-section');
const downloadPdfBtn = document.getElementById('download-pdf-btn');
// --- CORE FUNCTIONS ---
const renderFields = () => {
const selectedTemplateKey = templateSelect.value;
const template = templates[selectedTemplateKey];
templateFieldsContainer.innerHTML = ''; // Clear previous fields
template.fields.forEach(field => {
const fieldWrapper = document.createElement('div');
let fieldHtml = `
`;
if (field.type === 'textarea') {
fieldHtml += `
`;
} else {
fieldHtml += `
`;
}
fieldWrapper.innerHTML = fieldHtml;
templateFieldsContainer.appendChild(fieldWrapper);
});
};
const handleGenerate = () => {
const selectedTemplateKey = templateSelect.value;
const template = templates[selectedTemplateKey];
const data = {};
let allFieldsFilled = true;
template.fields.forEach(field => {
const element = document.getElementById(field.id);
if (element.value.trim() === '') {
allFieldsFilled = false;
}
data[field.id] = element.value;
});
if (!allFieldsFilled) {
alert("Please fill in all the details before generating the document.");
return;
}
documentPreview.innerHTML = template.generate(data);
downloadSection.classList.remove('hidden');
};
const handleDownloadPdf = () => {
const { jsPDF } = window.jspdf;
const contentToPrint = document.getElementById('document-preview');
html2canvas(contentToPrint, { scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'mm', 'a4');
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
const ratio = canvasWidth / canvasHeight;
let imgWidth = pdfWidth - 20;
let imgHeight = imgWidth / ratio;
if (imgHeight > pdfHeight - 20) {
imgHeight = pdfHeight - 20;
imgWidth = imgHeight * ratio;
}
const x = (pdfWidth - imgWidth) / 2;
const y = 10;
pdf.addImage(imgData, 'PNG', x, y, imgWidth, imgHeight);
const fileName = `${templates[templateSelect.value].name.replace(' ', '_')}.pdf`;
pdf.save(fileName);
});
};
// --- EVENT LISTENERS ---
templateSelect.addEventListener('change', renderFields);
generateBtn.addEventListener('click', handleGenerate);
downloadPdfBtn.addEventListener('click', handleDownloadPdf);
// --- INITIAL LOAD ---
renderFields(); // Render fields for the default selected template
});
