added events to event system

static/js/notifications.js

@@ -21,6 +21,9 @@ document.addEventListener('DOMContentLoaded', function() {
     const notifDetailsModal = document.getElementById('notifDetailsModal');
     const notifDetailsContent = document.getElementById('notifDetailsContent');
     
+    // Get CSRF token from meta tag
+    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+    
     // Function to update URL with current filters
     function updateURL() {
         const params = new URLSearchParams(window.location.search);
@@ -31,7 +34,7 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     
     // Function to fetch notifications
-    function fetchNotifications() {
+    async function fetchNotifications() {
         if (isFetching) return;
         isFetching = true;
         
@@ -45,54 +48,26 @@ document.addEventListener('DOMContentLoaded', function() {
             ajax: 'true'
         });
         
-        fetch(`${window.location.pathname}?${params.toString()}`, {
-            headers: {
-                'X-Requested-With': 'XMLHttpRequest'
-            }
-        })
-        .then(response => {
+        try {
+            const response = await fetch(`${window.location.pathname}?${params.toString()}`, {
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            });
+            
             if (!response.ok) {
                 throw new Error('Network response was not ok');
             }
-            return response.text();
-        })
-        .then(html => {
-            const parser = new DOMParser();
-            const doc = parser.parseFromString(html, 'text/html');
-            const newTableBody = doc.getElementById('notifsTableBody');
             
-            if (newTableBody) {
-                notifsTableBody.innerHTML = newTableBody.innerHTML;
-                
-                // Update pagination
-                const newCurrentPage = parseInt(doc.getElementById('currentPage').textContent);
-                const newTotalPages = parseInt(doc.getElementById('totalPages').textContent);
-                currentPage = newCurrentPage;
-                totalPages = newTotalPages;
-                currentPageSpan.textContent = currentPage;
-                totalPagesSpan.textContent = totalPages;
-                
-                // Update pagination buttons
-                prevPageBtn.disabled = currentPage === 1;
-                nextPageBtn.disabled = currentPage === totalPages;
-                
-                // Update URL
-                updateURL();
-                
-                // Reattach event listeners
-                attachEventListeners();
-            } else {
-                console.error('Could not find notifications table in response');
-                notifsTableBody.innerHTML = '<tr><td colspan="6" class="text-center">Error loading notifications</td></tr>';
-            }
-        })
-        .catch(error => {
+            const data = await response.json();
+            updateNotificationsTable(data.notifications);
+            updatePagination(data.total_pages, data.current_page);
+        } catch (error) {
             console.error('Error fetching notifications:', error);
             notifsTableBody.innerHTML = '<tr><td colspan="6" class="text-center">Error loading notifications</td></tr>';
-        })
-        .finally(() => {
+        } finally {
             isFetching = false;
-        });
+        }
     }
     
     // Function to get notification type badge
@@ -130,80 +105,123 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     
     // Function to mark notification as read
-    function markAsRead(notifId) {
-        fetch(`/api/notifications/${notifId}/read`, {
-            method: 'POST',
-            headers: {
-                'X-Requested-With': 'XMLHttpRequest',
-                'Content-Type': 'application/json'
-            }
-        })
-        .then(response => {
+    async function markAsRead(notifId) {
+        try {
+            const response = await fetch(`/api/notifications/${notifId}/read`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            });
+            
             if (!response.ok) {
                 throw new Error('Network response was not ok');
             }
-            return response.json();
-        })
-        .then(data => {
+            
+            const data = await response.json();
             if (data.success) {
-                fetchNotifications();
+                // Update the UI to show the notification as read
+                const notifRow = document.querySelector(`tr[data-notif-id="${notifId}"]`);
+                if (notifRow) {
+                    notifRow.classList.remove('table-warning');
+                    const statusCell = notifRow.querySelector('td:nth-last-child(2)');
+                    if (statusCell) {
+                        statusCell.innerHTML = '<span class="badge bg-success">Read</span>';
+                    }
+                    const actionsCell = notifRow.querySelector('td:last-child');
+                    if (actionsCell) {
+                        const markReadBtn = actionsCell.querySelector('.mark-read');
+                        if (markReadBtn) {
+                            markReadBtn.remove();
+                        }
+                    }
+                }
             }
-        })
-        .catch(error => {
+        } catch (error) {
             console.error('Error marking notification as read:', error);
-        });
+        }
     }
     
     // Function to delete notification
-    function deleteNotification(notifId) {
-        if (!confirm('Are you sure you want to delete this notification?')) {
-            return;
-        }
-        
-        fetch(`/api/notifications/${notifId}`, {
-            method: 'DELETE',
-            headers: {
-                'X-Requested-With': 'XMLHttpRequest'
-            }
-        })
-        .then(response => {
+    async function deleteNotification(notifId) {
+        try {
+            const response = await fetch(`/api/notifications/${notifId}`, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            });
+            
             if (!response.ok) {
                 throw new Error('Network response was not ok');
             }
-            return response.json();
-        })
-        .then(data => {
+            
+            const data = await response.json();
             if (data.success) {
-                fetchNotifications();
+                // Remove the notification row from the table
+                const notifRow = document.querySelector(`tr[data-notif-id="${notifId}"]`);
+                if (notifRow) {
+                    notifRow.remove();
+                }
             }
-        })
-        .catch(error => {
+        } catch (error) {
             console.error('Error deleting notification:', error);
-        });
+        }
     }
     
     // Function to mark all notifications as read
-    function markAllAsRead() {
-        fetch('/api/notifications/mark-all-read', {
-            method: 'POST',
-            headers: {
-                'X-Requested-With': 'XMLHttpRequest'
-            }
-        })
-        .then(response => {
+    async function markAllAsRead() {
+        try {
+            const response = await fetch('/api/notifications/mark-all-read', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            });
+            
             if (!response.ok) {
                 throw new Error('Network response was not ok');
             }
-            return response.json();
-        })
-        .then(data => {
+            
+            const data = await response.json();
             if (data.success) {
-                fetchNotifications();
+                // Update all notifications to show as read
+                document.querySelectorAll('tr[data-notif-id]').forEach(row => {
+                    row.classList.remove('table-warning');
+                    const statusCell = row.querySelector('td:nth-last-child(2)');
+                    if (statusCell) {
+                        statusCell.innerHTML = '<span class="badge bg-success">Read</span>';
+                    }
+                    const actionsCell = row.querySelector('td:last-child');
+                    if (actionsCell) {
+                        const markReadBtn = actionsCell.querySelector('.mark-read');
+                        if (markReadBtn) {
+                            markReadBtn.remove();
+                        }
+                    }
+                });
             }
-        })
-        .catch(error => {
+        } catch (error) {
             console.error('Error marking all notifications as read:', error);
-        });
+        }
+    }
+    
+    // Function to handle notification action clicks
+    function handleNotificationAction(notifId, actionType) {
+        // Mark the notification as read when an action is taken
+        markAsRead(notifId);
+        
+        // Additional handling for specific action types can be added here
+        if (actionType === 'view_room' || actionType === 'view_conversation') {
+            // The link will handle the navigation automatically
+            return true;
+        }
     }
     
     // Function to attach event listeners
@@ -231,6 +249,15 @@ document.addEventListener('DOMContentLoaded', function() {
                 loadNotifDetails(notifId);
             });
         });
+        
+        // Action buttons (View Room, View Conversation)
+        document.querySelectorAll('.btn-group a').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const notifId = e.target.closest('tr').dataset.notifId;
+                const actionType = btn.classList.contains('fa-door-open') ? 'view_room' : 'view_conversation';
+                handleNotificationAction(notifId, actionType);
+            });
+        });
     }
     
     // Add event listeners for filters with debounce