@@ -1,272 +0,0 @@
|
||||
/**
|
||||
* @fileoverview Manages the events page functionality.
|
||||
* This file handles event filtering, pagination, and modal interactions.
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Elements
|
||||
const eventTypeFilter = document.getElementById('eventTypeFilter');
|
||||
const dateRangeFilter = document.getElementById('dateRangeFilter');
|
||||
const userFilter = document.getElementById('userFilter');
|
||||
const applyFiltersBtn = document.getElementById('applyFilters');
|
||||
const eventsTableBody = document.getElementById('eventsTableBody');
|
||||
const prevPageBtn = document.getElementById('prevPage');
|
||||
const nextPageBtn = document.getElementById('nextPage');
|
||||
const currentPageSpan = document.getElementById('currentPage');
|
||||
const totalPagesSpan = document.getElementById('totalPages');
|
||||
const eventDetailsModal = document.getElementById('eventDetailsModal');
|
||||
const eventDetailsContent = document.getElementById('eventDetailsContent');
|
||||
|
||||
// State
|
||||
let currentPage = 1;
|
||||
let totalPages = 1;
|
||||
let currentFilters = {
|
||||
eventType: '',
|
||||
dateRange: '24h',
|
||||
userId: ''
|
||||
};
|
||||
|
||||
/**
|
||||
* Loads events based on current filters and page
|
||||
*/
|
||||
async function loadEvents() {
|
||||
try {
|
||||
const response = await fetch(`/api/events?page=${currentPage}&${new URLSearchParams(currentFilters)}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
renderEvents(data.events);
|
||||
updatePagination(data.total_pages);
|
||||
} else {
|
||||
console.error('Failed to load events:', data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading events:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders events in the table
|
||||
*/
|
||||
function renderEvents(events) {
|
||||
if (!Array.isArray(events)) {
|
||||
console.error('Invalid events data received:', events);
|
||||
return;
|
||||
}
|
||||
|
||||
const eventRows = events.map(event => {
|
||||
if (!event || typeof event !== 'object') {
|
||||
console.error('Invalid event data:', event);
|
||||
return '';
|
||||
}
|
||||
|
||||
// Determine badge color and text based on event type
|
||||
let badgeClass = 'bg-secondary';
|
||||
let eventText = event.event_type || 'Unknown Event';
|
||||
|
||||
switch(event.event_type) {
|
||||
case 'user_login':
|
||||
badgeClass = 'bg-success';
|
||||
eventText = 'User Login';
|
||||
break;
|
||||
case 'user_logout':
|
||||
badgeClass = 'bg-secondary';
|
||||
eventText = 'User Logout';
|
||||
break;
|
||||
case 'user_register':
|
||||
badgeClass = 'bg-info';
|
||||
eventText = 'User Registration';
|
||||
break;
|
||||
case 'user_update':
|
||||
badgeClass = 'bg-primary';
|
||||
eventText = 'User Update';
|
||||
break;
|
||||
case 'file_upload':
|
||||
badgeClass = 'bg-success';
|
||||
eventText = 'File Upload';
|
||||
break;
|
||||
case 'file_delete':
|
||||
badgeClass = 'bg-danger';
|
||||
eventText = 'File Delete';
|
||||
break;
|
||||
case 'file_download':
|
||||
badgeClass = 'bg-info';
|
||||
eventText = 'File Download';
|
||||
break;
|
||||
case 'file_restore':
|
||||
badgeClass = 'bg-warning';
|
||||
eventText = 'File Restore';
|
||||
break;
|
||||
case 'file_move':
|
||||
badgeClass = 'bg-primary';
|
||||
eventText = 'File Move';
|
||||
break;
|
||||
case 'file_rename':
|
||||
badgeClass = 'bg-info';
|
||||
eventText = 'File Rename';
|
||||
break;
|
||||
case 'file_star':
|
||||
badgeClass = 'bg-warning';
|
||||
eventText = 'File Star';
|
||||
break;
|
||||
case 'file_unstar':
|
||||
badgeClass = 'bg-secondary';
|
||||
eventText = 'File Unstar';
|
||||
break;
|
||||
case 'room_create':
|
||||
badgeClass = 'bg-success';
|
||||
eventText = 'Room Create';
|
||||
break;
|
||||
case 'room_delete':
|
||||
badgeClass = 'bg-danger';
|
||||
eventText = 'Room Delete';
|
||||
break;
|
||||
case 'room_update':
|
||||
badgeClass = 'bg-primary';
|
||||
eventText = 'Room Update';
|
||||
break;
|
||||
case 'room_join':
|
||||
badgeClass = 'bg-info';
|
||||
eventText = 'Room Join';
|
||||
break;
|
||||
case 'room_leave':
|
||||
badgeClass = 'bg-secondary';
|
||||
eventText = 'Room Leave';
|
||||
break;
|
||||
case 'conversation_create':
|
||||
badgeClass = 'bg-success';
|
||||
eventText = 'Conversation Create';
|
||||
break;
|
||||
case 'conversation_delete':
|
||||
badgeClass = 'bg-danger';
|
||||
eventText = 'Conversation Delete';
|
||||
break;
|
||||
case 'message_sent':
|
||||
badgeClass = 'bg-primary';
|
||||
eventText = 'Message Sent';
|
||||
break;
|
||||
case 'attachment_download':
|
||||
badgeClass = 'bg-info';
|
||||
eventText = 'Attachment Download';
|
||||
break;
|
||||
}
|
||||
|
||||
const timestamp = event.timestamp ? new Date(event.timestamp).toLocaleString() : '-';
|
||||
const username = event.user?.username || 'Unknown User';
|
||||
const lastName = event.user?.last_name || '';
|
||||
const eventId = event.id || '';
|
||||
const ipAddress = event.ip_address || '-';
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td>${timestamp}</td>
|
||||
<td><span class="badge ${badgeClass}">${eventText}</span></td>
|
||||
<td>${username} ${lastName}</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-outline-secondary"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#eventDetailsModal"
|
||||
data-event-id="${eventId}">
|
||||
<i class="fas fa-info-circle"></i> View Details
|
||||
</button>
|
||||
</td>
|
||||
<td>${ipAddress}</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
eventsTableBody.innerHTML = eventRows;
|
||||
|
||||
// Add event listeners to detail buttons
|
||||
document.querySelectorAll('[data-event-id]').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const eventId = button.dataset.eventId;
|
||||
if (eventId) {
|
||||
showEventDetails(eventId);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates pagination controls
|
||||
*/
|
||||
function updatePagination(total) {
|
||||
totalPages = total;
|
||||
currentPageSpan.textContent = currentPage;
|
||||
totalPagesSpan.textContent = totalPages;
|
||||
|
||||
prevPageBtn.classList.toggle('disabled', currentPage === 1);
|
||||
nextPageBtn.classList.toggle('disabled', currentPage === totalPages);
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows event details in modal
|
||||
*/
|
||||
async function showEventDetails(eventId) {
|
||||
try {
|
||||
const response = await fetch(`/api/events/${eventId}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
const event = data.event;
|
||||
eventDetailsContent.textContent = JSON.stringify(event.details, null, 2);
|
||||
} else {
|
||||
console.error('Failed to load event details:', data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading event details:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads users for the user filter
|
||||
*/
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const response = await fetch('/api/users');
|
||||
const data = await response.json();
|
||||
|
||||
const userFilter = document.getElementById('userFilter');
|
||||
userFilter.innerHTML = '<option value="">All Users</option>';
|
||||
|
||||
data.users.forEach(user => {
|
||||
const option = document.createElement('option');
|
||||
option.value = user.id;
|
||||
option.textContent = `${user.username} ${user.last_name || ''}`.trim();
|
||||
userFilter.appendChild(option);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error loading users:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Event Listeners
|
||||
applyFiltersBtn.addEventListener('click', () => {
|
||||
currentFilters = {
|
||||
eventType: eventTypeFilter.value,
|
||||
dateRange: dateRangeFilter.value,
|
||||
userId: userFilter.value
|
||||
};
|
||||
currentPage = 1;
|
||||
loadEvents();
|
||||
});
|
||||
|
||||
prevPageBtn.addEventListener('click', () => {
|
||||
if (currentPage > 1) {
|
||||
currentPage--;
|
||||
loadEvents();
|
||||
}
|
||||
});
|
||||
|
||||
nextPageBtn.addEventListener('click', () => {
|
||||
if (currentPage < totalPages) {
|
||||
currentPage++;
|
||||
loadEvents();
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize
|
||||
loadUsers();
|
||||
loadEvents();
|
||||
});
|
||||
Reference in New Issue
Block a user