`;
// 2. Flow Diagram
let flowHtml = `START (Source: ${meta.triggerApp})
`; flowHtml += `IF: ${meta.triggerEvent}
`; if (filters.length > 0) { flowHtml += `
FILTER: Apply Conditions
`; } flowHtml += `
THEN: Execute ${actions.length} Steps
`; flowHtml += `
END`; html += `
`;
// Filters
if (filters.length > 0) {
html += `
`;
}
// Actions
if (actions.length > 0) {
html += `
`;
}
container.innerHTML = html;
}
function wasoSwitchTab(tabId) {
document.querySelectorAll('.waso-tab-btn').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.waso-content').forEach(c => c.classList.remove('active'));
const idx = tabId === 'builder' ? 0 : 1;
document.querySelectorAll('.waso-tab-btn')[idx].classList.add('active');
document.getElementById('waso-' + tabId).classList.add('active');
if (tabId === 'preview') {
wasoRenderOutline();
}
}
/* --- PDF Generation --- */
async function wasoGeneratePDF() {
wasoRenderOutline(); // Final render
const meta = {
name: document.getElementById('inp-name').value || "Unnamed Workflow",
triggerApp: document.getElementById('inp-trigger-app').value || "N/A App",
triggerEvent: document.getElementById('inp-trigger-event').value || "N/A Event"
};
if (wasoGetRowData('#waso-action-rows-container .waso-dynamic-row', ['desc', 'data']).length === 0) {
alert("Please define at least one action step before generating the PDF.");
return;
}
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'mm', 'a4');
const navy = [30, 58, 138];
let y = 20;
// 1. Header
doc.setFillColor(...navy);
doc.rect(0, 0, 210, 20, 'F');
doc.setTextColor(255, 255, 255);
doc.setFontSize(16);
doc.text(`Automation Workflow Specification: ${meta.name}`, 14, 13);
// 2. Metadata Block
doc.setTextColor(0, 0, 0);
doc.setFontSize(10);
doc.setFont("helvetica", "bold");
doc.text("WORKFLOW NAME:", 14, y + 10);
doc.text("TRIGGER SOURCE:", 105, y + 10);
y += 15;
doc.setFont("helvetica", "normal");
doc.text(meta.name, 14, y);
doc.text(meta.triggerApp, 105, y);
y += 10;
// 3. Logic Tables
const filters = wasoGetRowData('#waso-filter-rows-container .waso-dynamic-row', ['logic', 'field', 'condition', 'value']);
const actions = wasoGetRowData('#waso-action-rows-container .waso-dynamic-row', ['desc', 'data']);
// Trigger
doc.setFontSize(12);
doc.setFont("helvetica", "bold");
doc.text("I. TRIGGER DEFINITION (IF)", 14, y);
y += 5;
const triggerBody = [['Trigger Event', meta.triggerEvent]];
doc.autoTable({
startY: y,
body: triggerBody,
theme: 'grid',
headStyles: { fillColor: [240, 240, 240] },
styles: { fontSize: 10 },
columnStyles: { 0: { fontStyle: 'bold', cellWidth: 30 } }
});
y = doc.lastAutoTable.finalY + 10;
// Filters
if (filters.length > 0) {
doc.setFontSize(12);
doc.text("II. CONDITIONAL FILTERING (AND/OR)", 14, y);
y += 5;
const filterBody = filters.map(f => [
f.logic, f.field, f.condition, f.value
]);
doc.autoTable({
startY: y,
head: [['Logic', 'Field', 'Condition', 'Value']],
body: filterBody,
theme: 'grid',
headStyles: { fillColor: [180, 200, 230], textColor: navy },
styles: { fontSize: 9 },
columnStyles: { 0: { cellWidth: 15, fontStyle: 'bold' } }
});
y = doc.lastAutoTable.finalY + 10;
}
// Actions
doc.setFontSize(12);
doc.text("III. ACTION SEQUENCE (THEN)", 14, y);
y += 5;
const actionBody = actions.map((a, index) => [
index + 1, a.desc, a.data
]);
doc.autoTable({
startY: y,
head: [['Step', 'Action Description', 'Data Mapped (Payload)']],
body: actionBody,
theme: 'grid',
headStyles: { fillColor: navy, fontSize: 10 },
styles: { fontSize: 9 },
columnStyles: {
0: { cellWidth: 10, halign: 'center', fontStyle: 'bold' },
1: { cellWidth: 70, overflow: 'linebreak' },
2: { cellWidth: 'auto', overflow: 'linebreak', fontStyle: 'italic' }
}
});
doc.save(`Automation_Spec_${meta.name.replace(/\s/g, '_')}.pdf`);
}
`; flowHtml += `IF: ${meta.triggerEvent}
`; if (filters.length > 0) { flowHtml += `
FILTER: Apply Conditions
`; } flowHtml += `
THEN: Execute ${actions.length} Steps
`; flowHtml += `
END`; html += `
${flowHtml}
`;
// 3. Logic Tables
// Trigger
html += `I. TRIGGER DEFINITION (IF)
`; html += `| Source App | Trigger Event |
|---|---|
| ${meta.triggerApp} | ${meta.triggerEvent} |
II. CONDITIONAL FILTERING (AND/OR)
`; html += `| Logic | Field | Condition | Value |
|---|---|---|---|
| ${f.logic} | ${f.field} | ${f.condition} | ${f.value} |
III. ACTION SEQUENCE (THEN)
`; html += `| Step | Action Description | Data Mapped (Payload) |
|---|---|---|
| ${index + 1} | ${a.desc} | ${a.data} |
