Fix delete button for manual track mappings

- Use data attributes instead of inline onclick to avoid quote escaping issues
- Add event listeners after rendering the table
- Fixes issue where Remove button didn't work due to escaped quotes in onclick attribute
This commit is contained in:
2026-02-06 11:42:01 -05:00
parent a56b2c3ea3
commit 2155c4a9d5

View File

@@ -1400,7 +1400,7 @@
return; return;
} }
tbody.innerHTML = data.mappings.map(m => { tbody.innerHTML = data.mappings.map((m, index) => {
const typeColor = m.type === 'jellyfin' ? 'var(--accent)' : 'var(--success)'; const typeColor = m.type === 'jellyfin' ? 'var(--accent)' : 'var(--success)';
const typeBadge = `<span style="display:inline-block;padding:2px 8px;border-radius:4px;font-size:0.8rem;background:${typeColor}20;color:${typeColor};font-weight:500;">${m.type}</span>`; const typeBadge = `<span style="display:inline-block;padding:2px 8px;border-radius:4px;font-size:0.8rem;background:${typeColor}20;color:${typeColor};font-weight:500;">${m.type}</span>`;
@@ -1421,11 +1421,20 @@
<td>${targetDisplay}</td> <td>${targetDisplay}</td>
<td style="color:var(--text-secondary);font-size:0.85rem;">${createdDate}</td> <td style="color:var(--text-secondary);font-size:0.85rem;">${createdDate}</td>
<td> <td>
<button class="danger" style="padding:4px 12px;font-size:0.8rem;" onclick="deleteTrackMapping('${escapeHtml(m.playlist)}', '${m.spotifyId}')">Remove</button> <button class="danger delete-mapping-btn" style="padding:4px 12px;font-size:0.8rem;" data-playlist="${escapeHtml(m.playlist)}" data-spotify-id="${m.spotifyId}">Remove</button>
</td> </td>
</tr> </tr>
`; `;
}).join(''); }).join('');
// Add event listeners to all delete buttons
document.querySelectorAll('.delete-mapping-btn').forEach(btn => {
btn.addEventListener('click', function() {
const playlist = this.getAttribute('data-playlist');
const spotifyId = this.getAttribute('data-spotify-id');
deleteTrackMapping(playlist, spotifyId);
});
});
} catch (error) { } catch (error) {
console.error('Failed to fetch track mappings:', error); console.error('Failed to fetch track mappings:', error);
showToast('Failed to fetch track mappings', 'error'); showToast('Failed to fetch track mappings', 'error');