`;
routingFlowDisplay.appendChild(card);
});
};
/**
* Handles the form submission to add a new rule.
*/
const handleAddRule = (e) => {
e.preventDefault();
const ruleNameInput = document.getElementById('rule-name');
if (!ruleNameInput || !ruleNameInput.value.trim()) {
alert('Please provide a name for the rule.');
return;
}
const name = ruleNameInput.value.trim();
// Construct condition string
let condition = '';
const selectedCondition = conditionType.value;
switch (selectedCondition) {
case 'Time of Day':
const startTime = document.getElementById('start-time')?.value || 'N/A';
const endTime = document.getElementById('end-time')?.value || 'N/A';
const days = document.getElementById('days')?.value || 'N/A';
condition = `Time of Day: ${days}, ${startTime} - ${endTime}`;
break;
case 'Caller Input (IVR)':
const ivrOption = document.getElementById('ivr-option')?.value || 'N/A';
condition = `Caller Input (IVR): Press ${ivrOption}`;
break;
case 'Agent Skill':
const skill = document.getElementById('skill-required')?.value || 'N/A';
condition = `Agent Skill: ${skill}`;
break;
case 'Default (Catch-All)':
condition = 'Default (Catch-All)';
break;
}
// Construct action string
let action = '';
const selectedAction = actionType.value;
switch (selectedAction) {
case 'Route to Agent/Group':
const agentGroup = document.getElementById('agent-group')?.value || 'N/A';
action = `Route to Agent/Group: ${agentGroup}`;
break;
case 'Route to Voicemail':
const voicemailBox = document.getElementById('voicemail-box')?.value || 'N/A';
action = `Route to Voicemail: ${voicemailBox}`;
break;
case 'Play Message & Hang Up':
const message = document.getElementById('message-text')?.value || 'N/A';
action = `Play Message: "${message}"`;
break;
}
// Add new rule to the array
routingRules.push({
id: Date.now(),
name,
condition,
action
});
renderRoutingFlow();
ruleForm.reset();
renderConditionDetails();
renderActionDetails();
// Switch to dashboard to show the new rule
currentTab = 'dashboard';
updateTabs();
};
/**
* Handles deleting a rule from the dashboard.
*/
const handleDeleteRule = (e) => {
if (e.target.classList.contains('delete-rule-btn')) {
const ruleId = parseInt(e.target.dataset.id, 10);
routingRules = routingRules.filter(rule => rule.id !== ruleId);
renderRoutingFlow();
}
};
/**
* Handles PDF download functionality.
*/
const handlePdfDownload = () => {
const { jsPDF } = window.jspdf;
const content = document.getElementById('pdf-content');
if (!content) return;
// Temporarily hide delete buttons for PDF output
const deleteButtons = content.querySelectorAll('.delete-rule-btn');
deleteButtons.forEach(btn => btn.style.display = 'none');
html2canvas(content, { scale: 2 }).then(canvas => {
// Restore delete buttons after capture
deleteButtons.forEach(btn => btn.style.display = 'block');
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'pt',
format: '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;
const width = pdfWidth - 40; // with margin
const height = width / ratio;
pdf.setFont('Inter', 'normal');
pdf.text("Smart Call Routing System - Flow", 20, 30);
pdf.addImage(imgData, 'PNG', 20, 60, width, height);
pdf.save('call-routing-flow.pdf');
});
};
// --- Event Listeners ---
tabs.dashboard.addEventListener('click', () => {
currentTab = 'dashboard';
updateTabs();
});
tabs.config.addEventListener('click', () => {
currentTab = 'config';
updateTabs();
});
navButtons.next.addEventListener('click', () => {
currentTab = 'config';
updateTabs();
});
navButtons.prev.addEventListener('click', () => {
currentTab = 'dashboard';
updateTabs();
});
conditionType.addEventListener('change', renderConditionDetails);
actionType.addEventListener('change', renderActionDetails);
ruleForm.addEventListener('submit', handleAddRule);
routingFlowDisplay.addEventListener('click', handleDeleteRule);
downloadPdfBtn.addEventListener('click', handlePdfDownload);
// --- Initializations ---
updateTabs();
renderConditionDetails();
renderActionDetails();
renderRoutingFlow();
});
