`;
}).join('');
if (data.kudos.length === 0) {
displayEl.innerHTML = `
The Kudos Wall is empty. Be the first to give a shoutout!
`;
}
// Form submission
form.onsubmit = (e) => {
e.preventDefault();
const newKudos = {
to: parseInt(toSelect.value),
from: document.getElementById('kudos-from').value || 'Anonymous',
message: document.getElementById('kudos-message').value,
category: categorySelect.value
};
if (newKudos.message) {
data.kudos.unshift(newKudos); // Add to the beginning
renderKudosTab();
form.reset();
}
};
// PDF Download
document.getElementById('download-kudos-pdf-btn').onclick = downloadKudosPDF;
};
const renderConfigTab = () => {
// Employees
const empTable = document.getElementById('config-employees-table');
empTable.innerHTML = data.employees.map(emp => `
| ${emp.id} |
|
|
`).join('');
// Icebreakers
const icebreakersTextarea = document.getElementById('config-icebreakers');
icebreakersTextarea.value = data.icebreakers.join('\n');
// Kudos Categories
const catTable = document.getElementById('config-kudos-categories-table');
catTable.innerHTML = data.kudosCategories.map((cat, index) => `
|
|
`).join('');
};
// --- DATA MANIPULATION (made global for inline onclick) ---
window.addEmployee = () => {
const nameInput = document.getElementById('new-employee-name');
if (nameInput.value) {
const newId = data.employees.length > 0 ? Math.max(...data.employees.map(e => e.id)) + 1 : 1;
data.employees.push({ id: newId, name: nameInput.value });
nameInput.value = '';
fullRender();
}
};
window.updateEmployee = (id, newName) => {
const employee = data.employees.find(e => e.id === id);
if (employee) employee.name = newName;
fullRender();
};
window.deleteEmployee = (id) => {
data.employees = data.employees.filter(e => e.id !== id);
fullRender();
};
window.saveIcebreakers = () => {
const textarea = document.getElementById('config-icebreakers');
data.icebreakers = textarea.value.split('\n').filter(q => q.trim() !== '');
// In a real app, show a success message.
console.log("Icebreakers saved!");
fullRender();
};
window.addKudosCategory = () => {
const catInput = document.getElementById('new-kudos-category');
if (catInput.value) {
data.kudosCategories.push(catInput.value);
catInput.value = '';
fullRender();
}
};
window.updateKudosCategory = (index, newName) => {
data.kudosCategories[index] = newName;
fullRender();
};
window.deleteKudosCategory = (index) => {
data.kudosCategories.splice(index, 1);
fullRender();
};
// --- PDF DOWNLOAD ---
const downloadKudosPDF = () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.setFontSize(20);
doc.text("Team Kudos Wall", 14, 22);
doc.setFontSize(11);
doc.setTextColor(100);
doc.text(`Report Generated: ${new Date().toLocaleDateString('en-US')}`, 14, 30);
const kudosData = data.kudos.map(k => {
const recipient = data.employees.find(e => e.id === k.to);
return [
recipient ? recipient.name : 'Unknown',
k.from,
k.category,
k.message
];
});
doc.autoTable({
startY: 40,
head: [['To', 'From', 'Category', 'Message']],
body: kudosData,
theme: 'striped',
headStyles: { fillColor: [79, 70, 229] }, // indigo-600
didParseCell: function (data) {
if (data.column.dataKey === 3) { // Message column
data.cell.styles.cellWidth = 'wrap';
}
}
});
doc.save('Team-Kudos-Wall.pdf');
};
// --- TAB NAVIGATION ---
let currentTabIndex = 0;
const switchTab = (newIndex) => {
tabs.forEach((tab, index) => {
const panel = document.getElementById(tab.getAttribute('aria-controls'));
if (index === newIndex) {
tab.classList.remove('tab-inactive');
tab.classList.add('tab-active');
if (panel) panel.classList.remove('hidden');
} else {
tab.classList.remove('tab-active');
tab.classList.add('tab-inactive');
if (panel) panel.classList.add('hidden');
}
});
currentTabIndex = newIndex;
updateNavButtons();
};
const updateNavButtons = () => {
prevBtn.disabled = currentTabIndex === 0;
nextBtn.disabled = currentTabIndex === tabs.length - 1;
prevBtn.classList.toggle('opacity-50', prevBtn.disabled);
nextBtn.classList.toggle('opacity-50', nextBtn.disabled);
};
tabs.forEach((tab, index) => tab.addEventListener('click', () => switchTab(index)));
prevBtn.addEventListener('click', () => { if (currentTabIndex > 0) switchTab(currentTabIndex - 1); });
nextBtn.addEventListener('click', () => { if (currentTabIndex < tabs.length - 1) switchTab(currentTabIndex + 1); });
// --- INITIALIZATION ---
const fullRender = () => {
renderKickstartTab();
renderKudosTab();
renderConfigTab();
};
fullRender();
updateNavButtons();
});
