`;
}
function renderGroups() {
const groupsEl = document.getElementById('groups');
groupsEl.innerHTML = `
Groups
${groups.map(group => `
${group.name}
${group.description}
`).join('')}
`;
}
function renderEvents() {
const eventsEl = document.getElementById('events');
eventsEl.innerHTML = `
Events
${events.map(event => `
${event.name}
${event.date}
${event.description}
`).join('')}
`;
}
function renderMessages() {
const messages = document.getElementById('messages');
messages.innerHTML = `
Messages
Jane Smith
I'm good, thanks! Just working on the new project.
`;
}
function renderDataConfig() {
const dataConfig = document.getElementById('dataConfig');
dataConfig.innerHTML = `
Data Configuration
Here you can manually configure the sample data for the platform.
Users
Groups
Events
`;
}
// Initial Render
renderDashboard();
renderProfile();
renderConnections();
renderGroups();
renderEvents();
renderMessages();
renderDataConfig();
// Event Handlers
window.changeTab = function(event, tabName) {
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => tab.classList.remove('active'));
event.target.classList.add('active');
const tabContents = document.querySelectorAll('.tab-content');
tabContents.forEach(content => content.classList.remove('active'));
document.getElementById(tabName).classList.add('active');
}
window.updateProfile = function() {
currentUser.name = document.getElementById('name').value;
currentUser.title = document.getElementById('title').value;
currentUser.company = document.getElementById('company').value;
renderProfile();
alert('Profile updated successfully!');
}
window.updateData = function() {
try {
users = JSON.parse(document.getElementById('usersData').value);
groups = JSON.parse(document.getElementById('groupsData').value);
events = JSON.parse(document.getElementById('eventsData').value);
currentUser = users[0];
renderDashboard();
renderProfile();
renderConnections();
renderGroups();
renderEvents();
renderMessages();
alert('Data updated successfully!');
} catch (error) {
alert('Invalid JSON format. Please check your data.');
}
}
document.getElementById('pdf-download-button').addEventListener('click', function() {
const { jsPDF } = window.jspdf;
const dashboard = document.getElementById('dashboard');
html2canvas(dashboard).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
const imgProps= pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('dashboard.pdf');
});
});
// Style for tabs
const style = document.createElement('style');
style.innerHTML = `
.tab {
padding: 1rem 1.5rem;
cursor: pointer;
border-bottom: 2px solid transparent;
color: #6B7280;
}
.tab:hover {
color: #4F46E5;
}
`;
document.head.appendChild(style);
});
