No steps in workflow. Add one above!
";
}
appState.steps.forEach(step => {
const item = document.createElement("div");
item.className = "paw-step-item";
item.innerHTML = `
${step.name}
(${step.type})
`;
currentStepsList.appendChild(item);
});
}
function renderDashboardTab() {
visualContainer.innerHTML = "";
tableBody.innerHTML = "";
if (appState.steps.length === 0) {
visualContainer.innerHTML = "
No steps configured. Go to the Configuration tab to add some.
";
tableBody.innerHTML = "
| No steps configured. |
";
return;
}
appState.steps.forEach(step => {
// 1. Render Visual Node
const node = document.createElement("div");
node.className = `paw-node paw-node-${step.type}`;
node.innerHTML = `
${step.name}
${step.type}
`;
visualContainer.appendChild(node);
// 2. Render Table Row
const tr = document.createElement("tr");
tr.innerHTML = `
${step.name} |
${step.type.charAt(0).toUpperCase() + step.type.slice(1)} |
${step.desc} |
`;
tableBody.appendChild(tr);
});
}
// --- Event Handlers ---
// Update Dashboard Button
updateBtn.addEventListener("click", () => {
// Data is already in appState, just re-render dashboard
renderDashboardTab();
// Switch to dashboard tab
showTab(0);
});
// Add Step
addStepForm.addEventListener("submit", (e) => {
e.preventDefault();
const name = stepName.value.trim();
const type = stepType.value;
const desc = stepDesc.value.trim();
if (!name) {
alert("Please enter a step name.");
return;
}
const newStep = {
id: Date.now(), // Simple unique ID
name: name,
type: type,
desc: desc
};
appState.steps.push(newStep);
saveState();
renderConfigTab();
// Clear form
stepName.value = "";
stepDesc.value = "";
stepType.value = "manual";
});
// Remove Step (Event Delegation)
currentStepsList.addEventListener("click", (e) => {
if (e.target.classList.contains("paw-remove-btn")) {
const id = parseInt(e.target.dataset.id);
appState.steps = appState.steps.filter(s => s.id !== id);
saveState();
renderConfigTab();
}
});
// PDF Download
pdfBtn.addEventListener("click", () => {
const { jsPDF } = window.jspdf;
const fileName = 'Workflow_Diagram.pdf';
html2canvas(exportArea, {
scale: 2, // Improve resolution
useCORS: true,
backgroundColor: '#ffffff'
}).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const doc = new jsPDF({
orientation: 'p',
unit: 'pt',
format: 'a4'
});
const pdfWidth = doc.internal.pageSize.getWidth();
const pdfHeight = doc.internal.pageSize.getHeight();
const imgProps = doc.getImageProperties(imgData);
const imgWidth = imgProps.width;
const imgHeight = imgProps.height;
const margin = 40;
const usableWidth = pdfWidth - (2 * margin);
const ratio = usableWidth / imgWidth;
const scaledHeight = imgHeight * ratio;
doc.addImage(imgData, 'PNG', margin, margin, usableWidth, scaledHeight);
doc.save(fileName);
}).catch(err => {
console.error("PAW PDF Error:", err);
// alert("An error occurred while generating the PDF."); // Per spec
});
});
// --- Local Storage ---
function saveState() {
try {
localStorage.setItem("pawAppState", JSON.stringify(appState));
} catch (e) {
console.warn("PAW: Could not save state to localStorage.");
}
}
function loadState() {
try {
const storedState = localStorage.getItem("pawAppState");
if (storedState) {
appState = JSON.parse(storedState);
}
} catch (e) {
console.warn("PAW: Could not load state, using defaults.");
}
}
// --- Initial Load ---
loadState();
renderConfigTab();
renderDashboardTab();
showTab(0); // Start on Dashboard
});
