fix event filtering

This commit is contained in:
2025-05-31 23:15:46 +02:00
parent 1c74706736
commit e1390a8adc
4 changed files with 106 additions and 4 deletions

View File

@@ -66,14 +66,68 @@ document.addEventListener('DOMContentLoaded', function() {
}
const data = await response.json();
updateNotificationsTable(data.notifications);
updatePagination(data.total_pages, data.current_page);
// Reinitialize tooltips after updating the table
// Update the table with the notifications
if (data.notifications && data.notifications.length > 0) {
notifsTableBody.innerHTML = data.notifications.map(notif => `
<tr class="${notif.read ? '' : 'table-warning'}" data-notif-id="${notif.id}">
<td>${notif.timestamp}</td>
<td>${getNotifTypeBadge(notif.notif_type)}</td>
<td>${notif.sender ? `${notif.sender.username} ${notif.sender.last_name}` : 'System'}</td>
<td>
${notif.read ?
'<span class="badge bg-success">Read</span>' :
'<span class="badge bg-warning">Unread</span>'}
</td>
<td>
<div class="btn-group">
${getActionButtons(notif)}
<button class="btn btn-sm btn-secondary"
data-bs-toggle="modal"
data-bs-target="#notifDetailsModal"
data-notif-id="${notif.id}"
data-bs-toggle="tooltip"
title="View Details">
<i class="fas fa-info-circle"></i>
</button>
${!notif.read ? `
<button class="btn btn-sm btn-success mark-read"
data-notif-id="${notif.id}"
data-bs-toggle="tooltip"
title="Mark as Read">
<i class="fas fa-check"></i>
</button>
` : ''}
<button class="btn btn-sm btn-danger delete-notif"
data-notif-id="${notif.id}"
data-bs-toggle="tooltip"
title="Delete">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
`).join('');
} else {
notifsTableBody.innerHTML = '<tr><td colspan="5" class="text-center">No notifications found</td></tr>';
}
// Update pagination
totalPages = data.total_pages;
currentPage = data.current_page;
currentPageSpan.textContent = currentPage;
totalPagesSpan.textContent = totalPages;
prevPageBtn.disabled = currentPage <= 1;
nextPageBtn.disabled = currentPage >= totalPages;
// Reinitialize tooltips
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// Reattach event listeners
attachEventListeners();
} catch (error) {
console.error('Error fetching notifications:', error);
notifsTableBody.innerHTML = '<tr><td colspan="6" class="text-center">Error loading notifications</td></tr>';
@@ -330,4 +384,34 @@ document.addEventListener('DOMContentLoaded', function() {
updateURL();
}
});
});
});
// Function to get action buttons based on notification type
function getActionButtons(notif) {
if (notif.notif_type === 'room_invite' || notif.notif_type === 'room_invite_removed') {
if (notif.details && notif.details.room_id) {
return `
<a href="/rooms/${notif.details.room_id}"
class="btn btn-sm btn-primary"
data-bs-toggle="tooltip"
title="View Room">
<i class="fas fa-door-open"></i>
</a>
`;
}
} else if (notif.notif_type === 'conversation_invite' ||
notif.notif_type === 'conversation_invite_removed' ||
notif.notif_type === 'conversation_message') {
if (notif.details && notif.details.conversation_id) {
return `
<a href="/conversations/${notif.details.conversation_id}"
class="btn btn-sm btn-primary"
data-bs-toggle="tooltip"
title="View Conversation">
<i class="fas fa-comments"></i>
</a>
`;
}
}
return '';
}