80 lines
2.3 KiB
JavaScript
80 lines
2.3 KiB
JavaScript
// Module List Component
|
|
export class ModuleList {
|
|
constructor(onModuleClick) {
|
|
this.container = document.getElementById('moduleList');
|
|
this.onModuleClick = onModuleClick;
|
|
this.init();
|
|
}
|
|
|
|
async init() {
|
|
await this.loadModuleList();
|
|
}
|
|
|
|
async loadModuleList() {
|
|
try {
|
|
const response = await fetch('/modules');
|
|
const data = await response.json();
|
|
|
|
const list = document.createElement('div');
|
|
list.className = 'module-items';
|
|
|
|
// Add builtins section
|
|
if (data.builtins && data.builtins.length > 0) {
|
|
const builtinsSection = this.createSection('Builtins', data.builtins.slice(0, 20));
|
|
list.appendChild(builtinsSection);
|
|
}
|
|
|
|
// Add modules section
|
|
if (data.modules && data.modules.length > 0) {
|
|
const modulesSection = this.createSection('Standard Library', data.modules);
|
|
list.appendChild(modulesSection);
|
|
}
|
|
|
|
if (this.container) {
|
|
this.container.innerHTML = '';
|
|
this.container.appendChild(list);
|
|
}
|
|
} catch (error) {
|
|
if (this.container) {
|
|
this.container.innerHTML = `<div class="error-message">Error loading modules: ${error.message}</div>`;
|
|
}
|
|
}
|
|
}
|
|
|
|
createSection(title, items) {
|
|
const section = document.createElement('div');
|
|
section.className = 'module-section';
|
|
|
|
const sectionTitle = document.createElement('h4');
|
|
sectionTitle.textContent = title;
|
|
sectionTitle.className = 'module-section-title';
|
|
section.appendChild(sectionTitle);
|
|
|
|
const itemsList = document.createElement('div');
|
|
itemsList.className = 'module-items-list';
|
|
|
|
items.forEach(item => {
|
|
const fullName = item.full_name || (title === 'Builtins' ? `builtins.${item.name}` : item.name);
|
|
const btn = this.createModuleButton(fullName, item.name);
|
|
itemsList.appendChild(btn);
|
|
});
|
|
|
|
section.appendChild(itemsList);
|
|
return section;
|
|
}
|
|
|
|
createModuleButton(fullName, displayName) {
|
|
const btn = document.createElement('button');
|
|
btn.className = 'module-item';
|
|
btn.textContent = displayName;
|
|
btn.title = fullName;
|
|
btn.addEventListener('click', () => {
|
|
if (this.onModuleClick) {
|
|
this.onModuleClick(fullName);
|
|
}
|
|
});
|
|
return btn;
|
|
}
|
|
}
|
|
|