Team Communication Enhancer
Channels
#general
${m.text}
${task.text}
`;
function renderAnnouncements() {
document.getElementById('announcements').innerHTML = announcements.map(a => `${a.text}
`).join('');
}
function renderUserList() {
document.getElementById('userList').innerHTML = users.map(u => `
${u.name}
`).join('');
}
function renderConfigChannelList() {
document.getElementById('configChannelList').innerHTML = channels.map(c => `
# ${c.name}
`).join('');
}
function renderDashboard() {
const channelLabels = channels.map(c => `#${c.name}`);
const channelData = channels.map(c => messages.filter(m => m.channelId === c.id).length);
if (channelChart) channelChart.destroy();
channelChart = new Chart(document.getElementById('channelChart'), {
type: 'doughnut', data: { labels: channelLabels, datasets: [{ data: channelData, backgroundColor: ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6'] }] },
options: { responsive: true, maintainAspectRatio: false }
});
const userLabels = users.map(u => u.name);
const userData = users.map(u => messages.filter(m => m.userId === u.id).length);
if (userChart) userChart.destroy();
userChart = new Chart(document.getElementById('userChart'), {
type: 'bar', data: { labels: userLabels, datasets: [{ label: 'Messages Sent', data: userData, backgroundColor: '#10B981' }] },
options: { responsive: true, maintainAspectRatio: false, indexAxis: 'y' }
});
}
// --- LOGIC & EVENT HANDLERS ---
window.changeTab = (tabName) => {
currentTab = tabName;
Object.values(tabElements).forEach(el => el.classList.add('hidden'));
Object.values(tabButtons).forEach(btn => btn.classList.remove('active'));
tabElements[tabName].classList.remove('hidden');
tabButtons[tabName].classList.add('active');
if (tabName === 'dashboard') renderDashboard();
};
window.switchChannel = (id) => { activeChannelId = id; renderChannelList(); renderMessages(); };
function setupEventListeners() {
document.getElementById('messageForm').addEventListener('submit', (e) => {
e.preventDefault();
const text = document.getElementById('messageInput').value.trim();
const userId = parseInt(document.getElementById('userSelect').value);
if (!text) return;
messages.push({
id: messages.length + 1, userId, channelId: activeChannelId, text,
timestamp: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
});
document.getElementById('messageInput').value = '';
renderMessages();
});
document.getElementById('addUserForm').addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('newUserName').value.trim();
if (!name) return;
users.push({ id: users.length + 1, name });
document.getElementById('newUserName').value = '';
renderUserList();
renderUserSelect();
});
document.getElementById('addChannelForm').addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('newChannelName').value.trim().replace(/\s+/g, '-');
if (!name) return;
channels.push({ id: channels.length + 1, name });
document.getElementById('newChannelName').value = '';
renderChannelList();
renderConfigChannelList();
});
}
window.deleteUser = (id) => {
if (confirm('Are you sure? This will remove the user.')) {
users = users.filter(u => u.id !== id);
renderAll();
}
};
window.deleteChannel = (id) => {
if (id === 1) { alert('Cannot delete the #general channel.'); return; }
if (confirm('Are you sure? This will delete the channel and its messages.')) {
channels = channels.filter(c => c.id !== id);
messages = messages.filter(m => m.channelId !== id);
if (activeChannelId === id) activeChannelId = 1;
renderAll();
}
};
// --- PDF DOWNLOAD ---
window.downloadPDF = function() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'pt', 'a4');
const channelChartImg = document.getElementById('channelChart').toDataURL('image/png');
const userChartImg = document.getElementById('userChart').toDataURL('image/png');
doc.setFontSize(20); doc.text('Team Communication Insights Report', 30, 38);
doc.setFontSize(10); doc.text(`Report Date: ${new Date().toLocaleDateString()}`, 30, 55);
doc.setFontSize(14); doc.text('Message Volume by Channel', 30, 90);
doc.addImage(channelChartImg, 'PNG', 30, 100, 250, 125);
doc.setFontSize(14); doc.text('Top Contributors (by message count)', 300, 90);
doc.addImage(userChartImg, 'PNG', 300, 100, 250, 125);
doc.autoTable({
startY: 250,
head: [['Metric', 'Value']],
body: [
['Total Messages', messages.length],
['Total Channels', channels.length],
['Total Users', users.length],
],
theme: 'grid',
});
doc.save('Communication_Insights_Report.pdf');
};
// --- INITIALIZE ---
initializeApp();
});