Remote Team Dashboard
Team Size
0
Online
0
Projects In-Flight
0
Team Status
Project Progress
${member.role}
${m.name} (${m.role})
`).join('');
elements.projectListConfig.innerHTML = projects.map(p => `${p.name} (${p.progress}%)
`).join('');
}
function attachEventListeners() {
elements.addMemberForm.addEventListener('submit', e => {
e.preventDefault();
const name = document.getElementById('rtd-member-name').value;
const role = document.getElementById('rtd-member-role').value;
if (name && role) {
teamMembers.push({ id: Date.now(), name, role, status: 'Available' });
e.target.reset();
renderAll();
}
});
elements.addProjectForm.addEventListener('submit', e => {
e.preventDefault();
const name = document.getElementById('rtd-project-name').value;
const progress = parseInt(document.getElementById('rtd-project-progress').value);
if (name && !isNaN(progress)) {
projects.push({ id: Date.now(), name, progress });
e.target.reset();
renderAll();
}
});
// Delegated listener for status changes on dashboard
elements.statusBoard.addEventListener('change', e => {
if (e.target.classList.contains('rtd-status-select')) {
const memberId = parseInt(e.target.dataset.id);
const newStatus = e.target.value;
const member = teamMembers.find(m => m.id === memberId);
if(member) {
member.status = newStatus;
renderAll();
}
}
});
// Delegated listener for delete buttons in config
document.getElementById('dataConfig').addEventListener('click', e => {
const button = e.target.closest('button');
if (!button) return;
const action = button.dataset.action;
const id = parseInt(button.dataset.id);
if (action === 'delete-member') {
teamMembers = teamMembers.filter(m => m.id !== id);
renderAll();
} else if (action === 'delete-project') {
projects = projects.filter(p => p.id !== id);
renderAll();
}
});
elements.downloadPdfBtn.addEventListener('click', () => {
const exportArea = document.getElementById('rtd-pdf-export-area');
html2canvas(exportArea, { scale: 2, backgroundColor: '#ffffff' }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' });
const imgProps = pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, 'PNG', 10, 10, pdfWidth - 20, pdfHeight - 20);
pdf.save('Remote-Team-Status.pdf');
});
});
}
// Tab Navigation
let currentTabIndex = 0;
const updateNavButtons = () => {
elements.prevBtn.disabled = currentTabIndex === 0;
elements.nextBtn.disabled = currentTabIndex === elements.tabs.length - 1;
};
window.rtd_changeTab = (event, tabName) => {
document.querySelectorAll('.rtd-tab-button').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.rtd-tab-content').forEach(c => c.classList.remove('active'));
event.currentTarget.classList.add('active');
document.getElementById(tabName).classList.add('active');
currentTabIndex = Array.from(elements.tabs).findIndex(btn => btn === event.currentTarget);
updateNavButtons();
};
window.rtd_navigateTabs = (direction) => {
const newIndex = currentTabIndex + direction;
if (newIndex >= 0 && newIndex < elements.tabs.length) {
elements.tabs[newIndex].click();
}
};
loadState();
renderAll();
attachEventListeners();
updateNavButtons();
});
})();