${log.timestamp.toLocaleTimeString()}
`);
});
}
function renderTemplates() {
Object.keys(templates).forEach(key => {
const textarea = document.getElementById(key);
if (textarea) textarea.value = templates[key];
});
}
// --- FORMS & EVENT HANDLERS ---
notificationForm.addEventListener('submit', sendNotification);
templatesForm.addEventListener('submit', e => {
e.preventDefault();
Object.keys(templates).forEach(key => {
const textarea = document.getElementById(key);
if (textarea) templates[key] = textarea.value;
});
showToast('Templates saved successfully!');
});
downloadPdfBtn.addEventListener('click', generatePdf);
// --- TABS & NAVIGATION ---
window.switchTab = (tabName) => { currentTab = tabName; Object.values(tabBtns).forEach(b=>b.classList.replace('tab-active', 'tab-inactive')); Object.values(tabContents).forEach(c=>c.style.display='none'); tabBtns[tabName].classList.replace('tab-inactive', 'tab-active'); tabContents[tabName].style.display = 'block'; };
window.navigateTabs = (dir) => { if (dir==='next' && currentTab==='dashboard') switchTab('config'); else if (dir==='prev' && currentTab==='config') switchTab('dashboard'); };
// --- UI HELPERS ---
function showToast(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.classList.remove('opacity-0', 'translate-y-10');
setTimeout(() => {
toast.classList.add('opacity-0', 'translate-y-10');
}, 3000);
}
// --- PDF GENERATION ---
async function generatePdf() {
const { jsPDF } = window.jspdf;
const pdfReportElement = document.getElementById('pdf-report');
document.getElementById('pdf-date').textContent = new Date().toLocaleDateString('en-US');
const pdfTableBody = document.getElementById('pdf-table-body');
pdfTableBody.innerHTML = '';
notificationLog.forEach(log => {
const row = `
| ${log.timestamp.toLocaleString()} |
${log.orderId} |
${log.customer} |
${log.type} |
${log.status} |
`;
pdfTableBody.insertAdjacentHTML('beforeend', row);
});
const canvas = await html2canvas(pdfReportElement, { scale: 2 });
const imgData = canvas.toDataURL('image/jpeg', 0.85);
const pdf = new jsPDF('p', 'mm', 'a4');
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
pdf.save('Notification-Dispatch-Report.pdf');
}
// --- INITIALIZATION ---
function init() {
templates = {
'email-confirmed': `Hi {{customerName}},\n\nYour order {{orderId}} has been confirmed! We'll notify you again once it has shipped.\n\nThanks for your purchase!`,
'email-shipped': `Great news, {{customerName}}!\n\nYour order {{orderId}} has shipped. You can track it with number: {{trackingNumber}}.\n\nIt should arrive soon!`,
'email-delivered': `Hi {{customerName}},\n\nYour order {{orderId}} has been delivered. We hope you enjoy your items!\n\nThank you!`,
'sms-confirmed': `Order {{orderId}} Confirmed! We'll text again when it ships. Thanks!`,
'sms-shipped': `Your order {{orderId}} has shipped! Tracking: {{trackingNumber}}`,
'sms-delivered': `Your order {{orderId}} was delivered. Enjoy!`
};
renderAll();
}
init();
});
