`;
}).join('');
};
const renderAllGroups = () => {
const listEl = document.getElementById('all-groups-list');
if (!listEl) return;
listEl.innerHTML = allGroups.map(group => {
const isMember = myGroups.includes(group.id);
return `
${group.name}
${group.subject}
${group.description}
${group.members} members
`;
}).join('');
};
// --- Tab Switching Logic ---
const switchToTab = (tabId) => {
mainContent.innerHTML = panelTemplates[tabId];
tabButtons.forEach(btn => {
btn.classList.toggle('active', btn.dataset.tab === tabId);
});
// Post-render logic
if (tabId === 'dashboard') {
renderMyGroups();
document.getElementById('download-my-groups-pdf').addEventListener('click', generatePdf);
} else if (tabId === 'find') {
renderAllGroups();
} else if (tabId === 'create') {
document.getElementById('create-group-btn').addEventListener('click', createNewGroup);
}
};
// --- Event Handlers ---
tabButtons.forEach(btn => {
btn.addEventListener('click', () => switchToTab(btn.dataset.tab));
});
mainContent.addEventListener('click', (e) => {
const target = e.target;
const groupId = parseInt(target.dataset.groupId);
// Join Group
if (target.textContent.trim() === 'Join' && groupId) {
myGroups.push(groupId);
renderAllGroups();
}
// Leave Group
if (target.textContent.trim() === 'Leave' && groupId) {
myGroups = myGroups.filter(id => id !== groupId);
renderMyGroups();
}
});
const createNewGroup = () => {
const name = document.getElementById('group-name').value;
const subject = document.getElementById('group-subject').value;
const description = document.getElementById('group-description').value;
if (!name || !subject || !description) {
alert("Please fill out all fields.");
return;
}
const newGroup = {
id: allGroups.length + 1,
name, subject, description, members: 1
};
allGroups.push(newGroup);
myGroups.push(newGroup.id);
alert(`Group "${name}" created successfully!`);
switchToTab('dashboard');
};
// --- PDF Generation ---
const generatePdf = () => {
const buildPdfHtml = () => {
const date = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
const groupsHtml = myGroups.map(id => {
const group = allGroups.find(g => g.id === id);
return `
${group.name}
Subject: ${group.subject}
${group.description}
`;
}).join('');
return `
My Study Groups Report
Generated on: ${date}
${groupsHtml || '
You have not joined any groups yet.
'}
`;
};
pdfRenderContainer.innerHTML = buildPdfHtml();
html2canvas(pdfRenderContainer, { scale: 2, useCORS: true })
.then(canvas => {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: 'a4' });
const imgData = canvas.toDataURL('image/png');
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const imgWidth = canvas.width;
const imgHeight = canvas.height;
const ratio = imgWidth / imgHeight;
let finalWidth = pdfWidth - 40;
let finalHeight = finalWidth / ratio;
pdf.addImage(imgData, 'PNG', 20, 20, finalWidth, finalHeight);
pdf.save('My_Study_Groups.pdf');
});
};
// --- Initial Load ---
switchToTab('dashboard');
});
