debug: Add extensive console logging to modal functionality

- Log function entry with captureId
- Log DOM element lookups
- Log fetch request URL and response status
- Log received data and rendered HTML
- Log error details to console.error
- This will help identify exact failure point in modal display
This commit is contained in:
2026-01-14 11:02:21 -08:00
parent 86d88aa3df
commit 007f206648
+19 -1
View File
@@ -1,31 +1,49 @@
// GigLez - Capture Detail Modal
async function viewCaptureDetails(captureId) {
console.log('viewCaptureDetails called with ID:', captureId);
const modal = document.getElementById('detail-modal');
const modalBody = document.getElementById('modal-body-content');
console.log('Modal element:', modal);
console.log('Modal body element:', modalBody);
// Show loading state
modal.classList.add('active');
modalBody.innerHTML = '<div style="text-align: center; padding: 2rem;">Loading...</div>';
console.log('Loading state set, about to fetch from:', `/api/v1/captures/${captureId}`);
try {
// Fetch capture details
const response = await fetch(`/api/v1/captures/${captureId}`);
console.log('Response status:', response.status);
console.log('Response ok:', response.ok);
if (!response.ok) {
throw new Error('Failed to fetch capture details');
}
const data = await response.json();
console.log('Received data:', data);
if (!data.success) {
throw new Error(data.message);
}
console.log('About to render capture:', data.capture);
// Render detail view
modalBody.innerHTML = renderCaptureDetail(data.capture);
const renderedHtml = renderCaptureDetail(data.capture);
console.log('Rendered HTML length:', renderedHtml.length);
modalBody.innerHTML = renderedHtml;
console.log('Modal body innerHTML set');
} catch (error) {
console.error('Error in viewCaptureDetails:', error);
modalBody.innerHTML = `
<div style="text-align: center; padding: 2rem; color: var(--danger-color);">
<p><strong>Error loading details:</strong></p>