Instruction file imported from diabolo-68/oemanagergui-webapp (.github/instructions/javascript-patterns.instructions.md). Copyright stays with the author.

JavaScript Patterns

Mixin Pattern

Views are implemented as mixins applied to OeManagerApp:

const ViewMixin = {
    loadData() { /* ... */ },
    renderView() { /* ... */ }
};
Object.assign(OeManagerApp.prototype, ViewMixin);

Template Functions

HTML generation via static Templates class:

const row = Templates.agentRow(agent, isSelected, stateClass);

API Calls

All REST calls through AgentService - never use fetch() directly:

await this.agentService.fetchAgents(this.selectedApplication);

Error Handling

try {
    await this.agentService.someMethod(args);
    this.showToast('Success message', 'success');
} catch (error) {
    console.error('[Context]', error);
    this.showToast(`Failed: ${error.message}`, 'error');
}

State Management

• Application state stored as class properties
• Configuration in localStorage (except password)
• UI state via CSS classes (hidden, selected, active)

Event Delegation

Use document-level listeners for dynamic content:

document.addEventListener('click', (e) => {
    if (e.target.matches('.action-btn')) { /* handle */ }
});

Timer Management

• Store timer IDs for cleanup: this.refreshTimer = setInterval(...)
• Clear timers on view switch: clearInterval(this.refreshTimer)
• Configurable intervals from settings