No steps currently in list.
';
return;
}
blueprintSteps.forEach(step => {
const div = document.createElement('div');
div.className = 'sdb-step-list-item';
div.innerHTML = `
${step.name}
`;
listContainer.appendChild(div);
});
}
// Custom event listener for dynamically created delete buttons
document.addEventListener('sdb-delete', function(e) {
removeStep(e.detail);
});
function renderDashboard() {
if(blueprintSteps.length === 0) {
visualContainer.innerHTML = '
No steps added yet. Go to Step Builder to begin or load sample data.
';
return;
}
// Helper to create rows
const createSwimlane = (title, bgClass, dataKey) => {
let html = `
`;
html += ``;
html += `
`;
blueprintSteps.forEach(step => {
html += `
${step[dataKey] || '-'}
`;
});
html += `
`;
return html;
};
// Header Row (Step Names)
let headerHtml = `
`;
blueprintSteps.forEach(step => {
headerHtml += `
${step.name}
`;
});
headerHtml += `
`;
let html = headerHtml;
html += createSwimlane(config.evidence, 'sdb-layer-evidence', 'evidence');
html += createSwimlane(config.customer, 'sdb-layer-customer', 'customer');
html += createSwimlane(config.front, 'sdb-layer-front', 'front');
html += createSwimlane(config.back, 'sdb-layer-back', 'back');
html += createSwimlane(config.support, 'sdb-layer-support', 'support');
visualContainer.innerHTML = html;
}
function loadSampleData() {
blueprintSteps = [
{ id: 1, name: "Arrival", evidence: "Signage, Parking Lot", customer: "Arrives at Cafe, parks car", front: "Welcome Guest", back: "N/A", support: "Parking Meter System" },
{ id: 2, name: "Ordering", evidence: "Menu Board, Counter", customer: "Reviews menu, places order", front: "Take Order, Enter into POS", back: "N/A", support: "POS System" },
{ id: 3, name: "Payment", evidence: "Card Terminal, Receipt", customer: "Taps Credit Card", front: "Process Payment, Hand Receipt", back: "Verify transaction", support: "Merchant Gateway (Stripe)" },
{ id: 4, name: "Fulfillment", evidence: "Coffee Cup, Tray", customer: "Waits for order", front: "Call out name", back: "Brew Coffee, Steam Milk", support: "Kitchen Display System" },
{ id: 5, name: "Departure", evidence: "Exit Door, Trash Bin", customer: "Leaves cafe", front: "Say Goodbye", back: "Clean Tables", support: "Shift Scheduling" }
];
updateStepList();
renderDashboard();
alert("Sample data (USA Cafe) loaded.");
}
function generatePDF() {
if (!window.jspdf || !window.jspdf.jsPDF) {
alert('PDF Library loading. Please wait or refresh.');
return;
}
const { jsPDF } = window.jspdf;
const doc = new jsPDF('l', 'mm', 'a4'); // Landscape
doc.setFontSize(18);
doc.text("Service Design Blueprint", 14, 15);
doc.setFontSize(11);
doc.setTextColor(100);
doc.text("Generated Component List", 14, 22);
const headers = [["Phase", config.evidence, config.customer, config.front, config.back, config.support]];
const body = blueprintSteps.map(step => [
step.name,
step.evidence,
step.customer,
step.front,
step.back,
step.support
]);
doc.autoTable({
startY: 30,
head: headers,
body: body,
theme: 'grid',
headStyles: { fillColor: [52, 152, 219] },
styles: { fontSize: 9, overflow: 'linebreak' },
columnStyles: {
0: { fontStyle: 'bold', cellWidth: 30 },
2: { fillColor: [227, 242, 253] } // Blue tint for customer
}
});
doc.save('service-blueprint.pdf');
}
// --- Event Listeners ---
tabs.forEach((tab, idx) => tab.addEventListener('click', () => switchTab(idx)));
prevBtn.addEventListener('click', () => switchTab(currentTabIndex - 1));
nextBtn.addEventListener('click', () => switchTab(currentTabIndex + 1));
document.getElementById('sdb-add-step-btn').addEventListener('click', addStep);
document.getElementById('sdb-clear-all').addEventListener('click', () => {
if(confirm("Clear all steps?")) {
blueprintSteps = [];
updateStepList();
renderDashboard();
}
});
document.getElementById('sdb-save-config').addEventListener('click', () => {
config.evidence = document.getElementById('sdb-cfg-evidence').value;
config.customer = document.getElementById('sdb-cfg-customer').value;
config.front = document.getElementById('sdb-cfg-front').value;
config.back = document.getElementById('sdb-cfg-back').value;
config.support = document.getElementById('sdb-cfg-support').value;
alert("Configuration saved.");
switchTab(0);
});
document.getElementById('sdb-load-sample').addEventListener('click', loadSampleData);
document.getElementById('sdb-download-pdf').addEventListener('click', generatePDF);
// Init
renderDashboard();
});
