Update logs.html

templates/settings/tabs/logs.html

@@ -63,6 +63,7 @@
                                 <th>Description</th>
                                 <th>User</th>
                                 <th>IP Address</th>
+                                <th>Actions</th>
                             </tr>
                         </thead>
                         <tbody id="logsTableBody">
@@ -96,4 +97,188 @@
         </div>
     </div>
 </div>
+
+<script>
+// Function to view log details
+function viewLogDetails(logId) {
+    fetch(`/api/logs/${logId}`)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Failed to fetch log details');
+            }
+            return response.json();
+        })
+        .then(log => {
+            const content = document.getElementById('logDetailsContent');
+            
+            // Format the details in a readable way
+            let details = log.details;
+            let formattedDetails = 'No details available';
+            
+            if (details) {
+                if (typeof details === 'string') {
+                    formattedDetails = details.replace(/\n/g, '<br>');
+                } else if (typeof details === 'object') {
+                    formattedDetails = JSON.stringify(details, null, 2).replace(/\n/g, '<br>');
+                } else {
+                    formattedDetails = String(details);
+                }
+            }
+            
+            content.innerHTML = `
+                <div class="mb-3">
+                    <strong>Timestamp:</strong> ${new Date(log.timestamp).toLocaleString()}
+                </div>
+                <div class="mb-3">
+                    <strong>Level:</strong> <span class="badge bg-${getLogLevelBadgeClass(log.level)}">${log.level}</span>
+                </div>
+                <div class="mb-3">
+                    <strong>Category:</strong> ${log.category || '-'}
+                </div>
+                <div class="mb-3">
+                    <strong>Action:</strong> ${log.action || '-'}
+                </div>
+                <div class="mb-3">
+                    <strong>Description:</strong> ${log.description || '-'}
+                </div>
+                <div class="mb-3">
+                    <strong>User:</strong> ${log.user || '-'}
+                </div>
+                <div class="mb-3">
+                    <strong>IP Address:</strong> ${log.ip_address || '-'}
+                </div>
+                <div class="mb-3">
+                    <strong>Details:</strong>
+                    <div class="mt-2 p-3 bg-light rounded">
+                        ${formattedDetails}
+                    </div>
+                </div>
+            `;
+            
+            // Show modal
+            const modal = new bootstrap.Modal(document.getElementById('logDetailsModal'));
+            modal.show();
+        })
+        .catch(error => {
+            console.error('Error viewing log details:', error);
+            showToast('Error loading log details', 'error');
+        });
+}
+
+// Helper function to get log level badge class
+function getLogLevelBadgeClass(level) {
+    const classes = {
+        'INFO': 'info',
+        'WARNING': 'warning',
+        'ERROR': 'danger',
+        'DEBUG': 'secondary'
+    };
+    return classes[level] || 'secondary';
+}
+
+// Function to fetch logs
+async function fetchLogs(page = 1) {
+    try {
+        const formData = new FormData(document.getElementById('logFiltersForm'));
+        const params = new URLSearchParams();
+        
+        // Add form data to params
+        for (let [key, value] of formData.entries()) {
+            if (value) params.append(key, value);
+        }
+        
+        // Add page number
+        params.append('page', page);
+        
+        const response = await fetch(`/api/logs?${params.toString()}`);
+        if (!response.ok) throw new Error('Failed to fetch logs');
+        
+        const data = await response.json();
+        const logsTableBody = document.getElementById('logsTableBody');
+        logsTableBody.innerHTML = '';
+        
+        data.logs.forEach(log => {
+            const row = document.createElement('tr');
+            row.innerHTML = `
+                <td>${new Date(log.timestamp).toLocaleString()}</td>
+                <td><span class="badge bg-${getLogLevelBadgeClass(log.level)}">${log.level}</span></td>
+                <td>${log.category || '-'}</td>
+                <td>${log.action || '-'}</td>
+                <td>${log.description || '-'}</td>
+                <td>${log.user || '-'}</td>
+                <td>${log.ip_address || '-'}</td>
+                <td>
+                    <button class="btn btn-sm btn-outline-primary" onclick="viewLogDetails(${log.id})">
+                        <i class="fas fa-eye"></i>
+                    </button>
+                </td>
+            `;
+            logsTableBody.appendChild(row);
+        });
+        
+        // Update pagination
+        updateLogsPagination(data.current_page, data.total_pages);
+    } catch (error) {
+        console.error('Error fetching logs:', error);
+        showToast('Error loading logs', 'error');
+    }
+}
+
+// Function to update logs pagination
+function updateLogsPagination(currentPage, totalPages) {
+    const pagination = document.getElementById('logsPagination');
+    if (!pagination) return;
+    
+    pagination.innerHTML = '';
+    
+    // Previous button
+    const prevLi = document.createElement('li');
+    prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
+    prevLi.innerHTML = `
+        <button class="page-link" onclick="fetchLogs(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}>
+            <i class="fas fa-chevron-left"></i>
+        </button>
+    `;
+    pagination.appendChild(prevLi);
+    
+    // Page numbers
+    for (let i = 1; i <= totalPages; i++) {
+        const li = document.createElement('li');
+        li.className = `page-item ${i === currentPage ? 'active' : ''}`;
+        li.innerHTML = `
+            <button class="page-link" onclick="fetchLogs(${i})">${i}</button>
+        `;
+        pagination.appendChild(li);
+    }
+    
+    // Next button
+    const nextLi = document.createElement('li');
+    nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
+    nextLi.innerHTML = `
+        <button class="page-link" onclick="fetchLogs(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}>
+            <i class="fas fa-chevron-right"></i>
+        </button>
+    `;
+    pagination.appendChild(nextLi);
+}
+
+// Event Listeners
+document.addEventListener('DOMContentLoaded', function() {
+    // Initial load
+    fetchLogs();
+    
+    // Form submit handler
+    document.getElementById('logFiltersForm').addEventListener('submit', function(e) {
+        e.preventDefault();
+        fetchLogs(1);
+    });
+    
+    // Form reset handler
+    document.getElementById('logFiltersForm').addEventListener('reset', function(e) {
+        e.preventDefault();
+        this.reset();
+        fetchLogs(1);
+    });
+});
+</script>
 {% endmacro %}