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:
@@ -1,31 +1,49 @@
|
|||||||
// GigLez - Capture Detail Modal
|
// GigLez - Capture Detail Modal
|
||||||
|
|
||||||
async function viewCaptureDetails(captureId) {
|
async function viewCaptureDetails(captureId) {
|
||||||
|
console.log('viewCaptureDetails called with ID:', captureId);
|
||||||
|
|
||||||
const modal = document.getElementById('detail-modal');
|
const modal = document.getElementById('detail-modal');
|
||||||
const modalBody = document.getElementById('modal-body-content');
|
const modalBody = document.getElementById('modal-body-content');
|
||||||
|
|
||||||
|
console.log('Modal element:', modal);
|
||||||
|
console.log('Modal body element:', modalBody);
|
||||||
|
|
||||||
// Show loading state
|
// Show loading state
|
||||||
modal.classList.add('active');
|
modal.classList.add('active');
|
||||||
modalBody.innerHTML = '<div style="text-align: center; padding: 2rem;">Loading...</div>';
|
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 {
|
try {
|
||||||
// Fetch capture details
|
// Fetch capture details
|
||||||
const response = await fetch(`/api/v1/captures/${captureId}`);
|
const response = await fetch(`/api/v1/captures/${captureId}`);
|
||||||
|
|
||||||
|
console.log('Response status:', response.status);
|
||||||
|
console.log('Response ok:', response.ok);
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error('Failed to fetch capture details');
|
throw new Error('Failed to fetch capture details');
|
||||||
}
|
}
|
||||||
|
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
|
console.log('Received data:', data);
|
||||||
|
|
||||||
if (!data.success) {
|
if (!data.success) {
|
||||||
throw new Error(data.message);
|
throw new Error(data.message);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log('About to render capture:', data.capture);
|
||||||
|
|
||||||
// Render detail view
|
// 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) {
|
} catch (error) {
|
||||||
|
console.error('Error in viewCaptureDetails:', error);
|
||||||
modalBody.innerHTML = `
|
modalBody.innerHTML = `
|
||||||
<div style="text-align: center; padding: 2rem; color: var(--danger-color);">
|
<div style="text-align: center; padding: 2rem; color: var(--danger-color);">
|
||||||
<p><strong>Error loading details:</strong></p>
|
<p><strong>Error loading details:</strong></p>
|
||||||
|
|||||||
Reference in New Issue
Block a user