Fix: Alle inline onclick-Handler durch programmatische Event-Listener ersetzt

- Bearbeiten- und Löschen-Buttons in Tee-Karten verwenden jetzt data-Attributes und Event-Listener
- 'Erste Tee hinzufügen'-Button verwendet jetzt Event-Listener
- setupTeaCardEventListeners() Methode hinzugefügt
- Keine Abhängigkeit mehr von globalem app-Scope in HTML

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
This commit is contained in:
Vibe Nuage Agent
2026-06-06 11:31:30 +00:00
parent b586eb3804
commit b2f632c07f

34
app.js
View File

@ -1321,9 +1321,14 @@ class TeeTracker {
<div class="empty-state-icon">🍃</div>
<div class="empty-state-text">Keine Tee-Sorten vorhanden</div>
<div class="empty-state-subtext">Füge deine erste Tee-Sorte hinzu!</div>
<button class="btn btn-primary" onclick="app.openTeaModal()"> Tee hinzufügen</button>
<button class="btn btn-primary add-first-tea-btn"> Tee hinzufügen</button>
</div>
`;
// Add event listener for the add button
const addBtn = container.querySelector('.add-first-tea-btn');
if (addBtn) {
addBtn.addEventListener('click', () => this.openTeaModal());
}
return;
}
@ -1369,7 +1374,7 @@ class TeeTracker {
}
container.innerHTML = teas.map(tea => `
<div class="tea-card" style="--tea-color: ${tea.color}">
<div class="tea-card" style="--tea-color: ${tea.color}" data-tea-id="${tea.id}">
<div class="tea-card-header">
<div class="tea-card-name">${tea.name} ${tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</div>
<div class="tea-card-type">${tea.type}</div>
@ -1380,15 +1385,36 @@ class TeeTracker {
${tea.rating ? this.renderStarRatingStatic(tea.rating) : ''}
</div>
<div class="tea-card-footer">
<button class="btn-icon" onclick="app.editTea('${tea.id}')" title="Bearbeiten">
<button class="btn-icon tea-edit-btn" title="Bearbeiten" data-tea-id="${tea.id}">
<span class="icon">✏️</span>
</button>
<button class="btn-icon btn-danger" onclick="app.showDeleteTeaConfirm('${tea.id}')" title="Löschen">
<button class="btn-icon btn-danger tea-delete-btn" title="Löschen" data-tea-id="${tea.id}">
<span class="icon">🗑️</span>
</button>
</div>
</div>
`).join('');
// Add event listeners to all edit and delete buttons
this.setupTeaCardEventListeners();
}
setupTeaCardEventListeners() {
// Edit buttons
document.querySelectorAll('.tea-edit-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const teaId = e.target.closest('.tea-edit-btn').dataset.teaId;
if (teaId) this.editTea(teaId);
});
});
// Delete buttons
document.querySelectorAll('.tea-delete-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const teaId = e.target.closest('.tea-delete-btn').dataset.teaId;
if (teaId) this.showDeleteTeaConfirm(teaId);
});
});
}
// ============================================