276 lines
10 KiB
JavaScript
276 lines
10 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize variables
|
|
let currentPage = parseInt(document.getElementById('currentPage').textContent) || 1;
|
|
let totalPages = parseInt(document.getElementById('totalPages').textContent) || 1;
|
|
let isFetching = false;
|
|
|
|
// Get filter elements
|
|
const eventTypeFilter = document.getElementById('eventTypeFilter');
|
|
const dateRangeFilter = document.getElementById('dateRangeFilter');
|
|
const userFilter = document.getElementById('userFilter');
|
|
const clearFiltersBtn = document.getElementById('clearFilters');
|
|
|
|
// Get pagination elements
|
|
const prevPageBtn = document.getElementById('prevPage');
|
|
const nextPageBtn = document.getElementById('nextPage');
|
|
const currentPageSpan = document.getElementById('currentPage');
|
|
const totalPagesSpan = document.getElementById('totalPages');
|
|
const eventsTableBody = document.getElementById('eventsTableBody');
|
|
|
|
// Event details modal
|
|
const eventDetailsModal = document.getElementById('eventDetailsModal');
|
|
const eventDetailsContent = document.getElementById('eventDetailsContent');
|
|
|
|
// Function to update URL with current filters
|
|
function updateURL() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
params.set('tab', 'events');
|
|
params.set('page', currentPage);
|
|
params.set('event_type', eventTypeFilter.value);
|
|
params.set('date_range', dateRangeFilter.value);
|
|
params.set('user_id', userFilter.value);
|
|
window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
|
|
}
|
|
|
|
// Function to update pagination UI
|
|
function updatePaginationUI(page, total) {
|
|
currentPage = page;
|
|
totalPages = total;
|
|
currentPageSpan.textContent = currentPage;
|
|
totalPagesSpan.textContent = totalPages;
|
|
prevPageBtn.disabled = currentPage === 1;
|
|
nextPageBtn.disabled = currentPage === totalPages;
|
|
}
|
|
|
|
// Function to fetch filtered events
|
|
function fetchEvents() {
|
|
if (isFetching) return;
|
|
isFetching = true;
|
|
|
|
// Show loading state
|
|
if (eventsTableBody) {
|
|
eventsTableBody.innerHTML = '<tr><td colspan="5" class="text-center">Loading...</td></tr>';
|
|
}
|
|
|
|
const params = new URLSearchParams({
|
|
event_type: eventTypeFilter.value,
|
|
date_range: dateRangeFilter.value,
|
|
user_id: userFilter.value,
|
|
page: currentPage
|
|
});
|
|
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
|
|
fetch(`/api/events?${params.toString()}`, {
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-CSRF-Token': csrfToken
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('Received events data:', data);
|
|
|
|
if (!eventsTableBody) {
|
|
console.error('Could not find events table body element');
|
|
return;
|
|
}
|
|
|
|
// Update table content
|
|
let tableHtml = '';
|
|
if (data.events && data.events.length > 0) {
|
|
data.events.forEach(event => {
|
|
tableHtml += `
|
|
<tr>
|
|
<td>${new Date(event.timestamp).toLocaleString()}</td>
|
|
<td>
|
|
<span class="badge ${getEventBadgeClass(event.event_type)}">
|
|
${formatEventType(event.event_type)}
|
|
</span>
|
|
</td>
|
|
<td>${event.user ? `${event.user.username} ${event.user.last_name}` : 'Unknown'}</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-secondary"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#eventDetailsModal"
|
|
data-event-id="${event.id}">
|
|
<i class="fas fa-info-circle"></i> View Details
|
|
</button>
|
|
</td>
|
|
<td>${event.ip_address || '-'}</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
} else {
|
|
tableHtml = '<tr><td colspan="5" class="text-center">No events found</td></tr>';
|
|
}
|
|
|
|
// Update the table body
|
|
eventsTableBody.innerHTML = tableHtml;
|
|
console.log('Updated table content with', data.events.length, 'events');
|
|
|
|
// Update pagination
|
|
updatePaginationUI(data.current_page, data.total_pages);
|
|
|
|
// Update URL
|
|
updateURL();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching events:', error);
|
|
if (eventsTableBody) {
|
|
eventsTableBody.innerHTML = '<tr><td colspan="5" class="text-center">Error loading events</td></tr>';
|
|
}
|
|
})
|
|
.finally(() => {
|
|
isFetching = false;
|
|
});
|
|
}
|
|
|
|
// Helper function to get badge class based on event type
|
|
function getEventBadgeClass(eventType) {
|
|
const badgeClasses = {
|
|
'user_login': 'bg-info',
|
|
'user_logout': 'bg-info',
|
|
'user_create': 'bg-success',
|
|
'user_delete': 'bg-danger',
|
|
'user_update': 'bg-warning',
|
|
'file_upload': 'bg-success',
|
|
'file_delete': 'bg-danger',
|
|
'file_download': 'bg-info',
|
|
'file_preview': 'bg-info',
|
|
'file_restore': 'bg-warning',
|
|
'file_move': 'bg-warning',
|
|
'file_rename': 'bg-warning',
|
|
'file_star': 'bg-warning',
|
|
'file_unstar': 'bg-warning',
|
|
'file_delete_permanent': 'bg-danger',
|
|
'folder_create': 'bg-success',
|
|
'room_create': 'bg-success',
|
|
'room_delete': 'bg-danger',
|
|
'room_update': 'bg-warning',
|
|
'room_open': 'bg-info',
|
|
'room_member_add': 'bg-success',
|
|
'room_member_remove': 'bg-danger',
|
|
'room_member_permissions_update': 'bg-warning',
|
|
'room_permission_update': 'bg-warning',
|
|
'conversation_create': 'bg-success',
|
|
'conversation_update': 'bg-warning',
|
|
'conversation_delete': 'bg-danger',
|
|
'conversation_open': 'bg-info',
|
|
'message_create': 'bg-success',
|
|
'attachment_download': 'bg-info'
|
|
};
|
|
return badgeClasses[eventType] || 'bg-secondary';
|
|
}
|
|
|
|
// Helper function to format event type for display
|
|
function formatEventType(eventType) {
|
|
return eventType.split('_')
|
|
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
|
.join(' ');
|
|
}
|
|
|
|
// Function to load event details
|
|
function loadEventDetails(eventId) {
|
|
console.log('Loading details for event:', eventId);
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
|
|
fetch(`/api/events/${eventId}`, {
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-CSRF-Token': csrfToken
|
|
}
|
|
})
|
|
.then(response => {
|
|
console.log('Response status:', response.status);
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('Received event data:', data);
|
|
|
|
// Format the details for display
|
|
const formattedDetails = {};
|
|
|
|
// Handle details separately
|
|
if (data.details) {
|
|
if (typeof data.details === 'object') {
|
|
formattedDetails['Details'] = JSON.stringify(data.details, null, 2);
|
|
} else {
|
|
formattedDetails['Details'] = data.details;
|
|
}
|
|
} else {
|
|
formattedDetails['Details'] = 'No additional details';
|
|
}
|
|
|
|
// Convert to formatted string
|
|
const detailsText = Object.entries(formattedDetails)
|
|
.map(([key, value]) => `${key}: ${value}`)
|
|
.join('\n\n');
|
|
|
|
console.log('Formatted details:', detailsText);
|
|
eventDetailsContent.textContent = detailsText;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading event details:', error);
|
|
eventDetailsContent.textContent = 'Error loading event details. Please try again.';
|
|
});
|
|
}
|
|
|
|
// Add event listeners for filters with debounce
|
|
let filterTimeout;
|
|
function debouncedFetch() {
|
|
clearTimeout(filterTimeout);
|
|
filterTimeout = setTimeout(() => {
|
|
currentPage = 1; // Reset to first page when filters change
|
|
fetchEvents();
|
|
}, 300);
|
|
}
|
|
|
|
eventTypeFilter.addEventListener('change', debouncedFetch);
|
|
dateRangeFilter.addEventListener('change', debouncedFetch);
|
|
userFilter.addEventListener('change', debouncedFetch);
|
|
|
|
// Event listener for clear filters
|
|
clearFiltersBtn.addEventListener('click', function() {
|
|
eventTypeFilter.value = '';
|
|
dateRangeFilter.value = '24h';
|
|
userFilter.value = '';
|
|
currentPage = 1;
|
|
fetchEvents();
|
|
});
|
|
|
|
// Event listeners for pagination
|
|
prevPageBtn.addEventListener('click', function() {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
fetchEvents();
|
|
}
|
|
});
|
|
|
|
nextPageBtn.addEventListener('click', function() {
|
|
if (currentPage < totalPages) {
|
|
currentPage++;
|
|
fetchEvents();
|
|
}
|
|
});
|
|
|
|
// Event listener for event details modal
|
|
eventDetailsModal.addEventListener('show.bs.modal', function(event) {
|
|
const button = event.relatedTarget;
|
|
const eventId = button.getAttribute('data-event-id');
|
|
loadEventDetails(eventId);
|
|
});
|
|
|
|
// Initialize filters from URL parameters
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
eventTypeFilter.value = urlParams.get('event_type') || '';
|
|
dateRangeFilter.value = urlParams.get('date_range') || '24h';
|
|
userFilter.value = urlParams.get('user_id') || '';
|
|
currentPage = parseInt(urlParams.get('page')) || 1;
|
|
|
|
// Initial fetch to ensure pagination is correct
|
|
fetchEvents();
|
|
});
|