Backend/WEBROOT/js/AjaxRenderTables.js

function renderTable(wrapperEl, entries, spaltenKonfig, idSpalte, onDelete) {

    if (entries && !Array.isArray(entries)) {
        console.warn('entries war kein Array:', entries);
        entries = Object.values(entries);
    }

    if (!entries || entries.length === 0) {
        wrapperEl.innerHTML = '<p>Keine Einträge vorhanden.</p>';
        return;
    }

    let html = `
<table class="db-table mobile-responsive-table">
    <thead>
        <tr>
            ${spaltenKonfig.map(s => `<th>${escapeHtml(s.label)}</th>`).join('')}
        </tr>
    </thead>
    <tbody>
        `;

    for (const entry of entries) {
        html += `<tr>`;
        for (const s of spaltenKonfig) {
            html += `<td data-label="${escapeHtml(s.label)}">${escapeHtml(entry[s.key])}</td>`;
        }
    }

    html += `</tbody>
</table>`;
    wrapperEl.innerHTML = html;

    wrapperEl.querySelectorAll('.btn-delete').forEach(btn => {
        btn.addEventListener('click', async () => {
            if (!confirm('Möchtest du diesen Eintrag wirklich löschen?')) return;
            await onDelete(btn.dataset.id);
        });
    });
}

function renderTableWithDelete(wrapperEl, entries, spaltenKonfig, idSpalte, onDelete) {

    if (entries && !Array.isArray(entries)) {
        console.warn('entries war kein Array:', entries);
        entries = Object.values(entries);
    }

    if (!entries || entries.length === 0) {
        wrapperEl.innerHTML = '<p>Keine Einträge vorhanden.</p>';
        return;
    }

    let html = `
<table class="db-table mobile-responsive-table">
    <thead>
        <tr>
            ${spaltenKonfig.map(s => `<th>${escapeHtml(s.label)}</th>`).join('')}
            <th style="width: 100px;">Aktion</th>
        </tr>
    </thead>
    <tbody>
        `;

    for (const entry of entries) {
        html += `<tr>`;
        for (const s of spaltenKonfig) {
            html += `<td data-label="${escapeHtml(s.label)}">${escapeHtml(entry[s.key])}</td>`;
        }
        html += `
            <td data-label="Aktion">
                <button type="button" class="btn-delete" data-id="${escapeHtml(entry[idSpalte])}">
                    Löschen
                </button>
            </td>
        </tr>`;
    }

    html += `</tbody>
</table>`;
    wrapperEl.innerHTML = html;

    wrapperEl.querySelectorAll('.btn-delete').forEach(btn => {
        btn.addEventListener('click', async () => {
            if (!confirm('Möchtest du diesen Eintrag wirklich löschen?')) return;
            await onDelete(btn.dataset.id);
        });
    });
}

// [Erweiterung für /js/AjaxMethods.js]
function renderTableWithEdit(wrapperEl, entries, spaltenKonfig, idSpalte, onEdit, onDelete) {

    if (entries && !Array.isArray(entries)) {
        console.warn('entries war kein Array:', entries);
        entries = Object.values(entries);
    }

    if (!entries || entries.length === 0) {
        wrapperEl.innerHTML = '<p>Keine Einträge vorhanden.</p>';
        return;
    }

    let html = `
<table class="db-table mobile-responsive-table">
    <thead>
        <tr>
            ${spaltenKonfig.map(s => `<th>${escapeHtml(s.label)}</th>`).join('')}
            <th style="width: 180px;">Aktion</th>
        </tr>
    </thead>
    <tbody>
        `;

    for (const entry of entries) {
        html += `<tr>`;
        for (const s of spaltenKonfig) {
            html += `<td data-label="${escapeHtml(s.label)}">${escapeHtml(entry[s.key])}</td>`;
        }
        html += `
            <td data-label="Aktion">
                <button type="button" class="btn-edit" data-id="${escapeHtml(entry[idSpalte])}" style="margin-right: 5px; padding: 6px 12px;">
                    Bearbeiten
                </button>

            </td>
        </tr>`;
    }

    html += `</tbody>
</table>`;
    wrapperEl.innerHTML = html;

    // Event-Listener für Edit
    wrapperEl.querySelectorAll('.btn-edit').forEach(btn => {
        btn.addEventListener('click', async () => {
            await onEdit(btn.dataset.id);
        });
    });

    // Event-Listener für Löschen
    wrapperEl.querySelectorAll('.btn-delete').forEach(btn => {
        btn.addEventListener('click', async () => {
            if (!confirm('Möchtest du diesen Eintrag wirklich löschen?')) return;
            await onDelete(btn.dataset.id);
        });
    });
}

function renderTableWithEditAndDelete(wrapperEl, entries, spaltenKonfig, idSpalte, onEdit, onDelete) {

    if (entries && !Array.isArray(entries)) {
        console.warn('entries war kein Array:', entries);
        entries = Object.values(entries);
    }

    if (!entries || entries.length === 0) {
        wrapperEl.innerHTML = '<p>Keine Einträge vorhanden.</p>';
        return;
    }

    let html = `
<table class="db-table mobile-responsive-table">
    <thead>
        <tr>
            ${spaltenKonfig.map(s => `<th>${escapeHtml(s.label)}</th>`).join('')}
            <th style="width: 180px;">Aktion</th>
        </tr>
    </thead>
    <tbody>
        `;

    for (const entry of entries) {
        html += `<tr>`;
        for (const s of spaltenKonfig) {
            html += `<td data-label="${escapeHtml(s.label)}">${escapeHtml(entry[s.key])}</td>`;
        }
        html += `
            <td data-label="Aktion">
                <button type="button" class="btn-edit" data-id="${escapeHtml(entry[idSpalte])}" style="margin-right: 5px; padding: 6px 12px;">
                    Bearbeiten
                </button>
                <button type="button" class="btn-delete" data-id="${escapeHtml(entry[idSpalte])}" style="margin-right: 5px; padding: 6px 12px;">
                    Löschen
                </button>

            </td>
        </tr>`;
    }

    html += `</tbody>
</table>`;
    wrapperEl.innerHTML = html;

    // Event-Listener für Edit
    wrapperEl.querySelectorAll('.btn-edit').forEach(btn => {
        btn.addEventListener('click', async () => {
            await onEdit(btn.dataset.id);
        });
    });

    // Event-Listener für Löschen
    wrapperEl.querySelectorAll('.btn-delete').forEach(btn => {
        btn.addEventListener('click', async () => {
            if (!confirm('Möchtest du diesen Eintrag wirklich löschen?')) return;
            await onDelete(btn.dataset.id);
        });
    });
}