63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
|
|
function getCourseSections() {
|
|
const table = document.querySelector('table');
|
|
if (!table) return [];
|
|
|
|
const rows = Array.from(table.querySelectorAll('tr'));
|
|
const sections: { header: HTMLTableRowElement; children: HTMLTableRowElement[] }[] = [];
|
|
let currentSection: { header: HTMLTableRowElement; children: HTMLTableRowElement[] } | null = null;
|
|
|
|
for (const row of rows) {
|
|
const headerCell = row.querySelector('td.course_header');
|
|
if (headerCell) {
|
|
if (currentSection) sections.push(currentSection);
|
|
currentSection = { header: row, children: [] };
|
|
} else if (currentSection) {
|
|
currentSection.children.push(row);
|
|
}
|
|
}
|
|
if (currentSection) sections.push(currentSection);
|
|
return sections;
|
|
}
|
|
|
|
const CollapsibleSection: React.FC<{
|
|
header: HTMLTableRowElement;
|
|
childrenRows: HTMLTableRowElement[];
|
|
}> = ({ header, childrenRows }) => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Hide children rows initially
|
|
childrenRows.forEach(row => (row.style.display = open ? '' : 'none'));
|
|
// Clean up on unmount
|
|
return () => {
|
|
childrenRows.forEach(row => (row.style.display = ''));
|
|
};
|
|
}, [open, childrenRows]);
|
|
|
|
// Inject a button into the header cell
|
|
useEffect(() => {
|
|
const cell = header.querySelector('td.course_header');
|
|
if (!cell) return;
|
|
let button = cell.querySelector('.utrp-collapse-btn') as HTMLButtonElement | null;
|
|
if (!button) {
|
|
button = document.createElement('button');
|
|
button.className = 'utrp-collapse-btn';
|
|
button.style.marginRight = '8px';
|
|
cell.prepend(button);
|
|
}
|
|
button.textContent = open ? '▼' : '►';
|
|
button.onclick = () => setOpen(o => !o);
|
|
// Clean up
|
|
return () => {
|
|
button?.remove();
|
|
};
|
|
}, [header, open]);
|
|
|
|
return null;
|
|
};
|
|
|
|
export default
|