// 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 = '

Loading...

'; 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 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 = `

Error loading details:

${error.message}

`; } } function renderCaptureDetail(capture) { const freqMHz = (capture.frequency / 1e6).toFixed(2); const date = new Date(capture.timestamp || Date.now()).toLocaleString(); // Device identification section const deviceSection = capture.device_name ? renderDeviceSection(capture) : renderNoDeviceSection(); // Matched devices section const matchedSection = capture.matched_devices && capture.matched_devices.length > 0 ? renderMatchedDevices(capture.matched_devices) : ''; return ` ${deviceSection}

Signal Information

Frequency ${freqMHz} MHz

Protocol ${capture.protocol || 'RAW'}

Modulation ${capture.preset || 'Unknown'}

Filename ${capture.filename}

Location Information

Latitude ${capture.latitude.toFixed(6)}

Longitude ${capture.longitude.toFixed(6)}

GPS Source ${capture.gps_source || 'unknown'}

Timestamp ${date}

${matchedSection}

Metadata

Capture ID ${capture.id}

Data Source ${capture.data_source || 'production'}

${capture.session_id ? `

Session ID ${capture.session_id}

` : ''}

`; } function renderDeviceSection(capture) { const confidencePercent = (capture.match_confidence * 100).toFixed(0); const confidenceClass = capture.match_confidence >= 0.8 ? '' : capture.match_confidence >= 0.6 ? 'medium' : 'low'; return `

Device Identification

Device Name ${capture.device_name}

Category ${capture.device_category}

Match Method ${capture.match_method || 'unknown'}

Confidence ${confidencePercent}%

${capture.device_description ? `

Description: ${capture.device_description}

` : ''}

`; } function renderNoDeviceSection() { return `

Device Identification

No device match found for this capture.

This could be an unknown or custom protocol.

`; } function renderMatchedDevices(matches) { if (!matches || matches.length === 0) return ''; const matchesHtml = matches.map(match => { const confidencePercent = (match.confidence * 100).toFixed(0); return `

${match.device_name} ${confidencePercent}%

${match.category}

${match.description}

Matched via: ${match.method}

`; }).join(''); return `

Alternative Matches

${matchesHtml}

`; } function closeDetailModal() { const modal = document.getElementById('detail-modal'); modal.classList.remove('active'); } // Initialize modal event listeners document.addEventListener('DOMContentLoaded', () => { const modal = document.getElementById('detail-modal'); const closeBtn = document.getElementById('modal-close-btn'); // Close button click if (closeBtn) { closeBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); closeDetailModal(); }); } // Click outside modal if (modal) { modal.addEventListener('click', (e) => { if (e.target === modal) { closeDetailModal(); } }); } // Escape key document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modal && modal.classList.contains('active')) { closeDetailModal(); } }); console.log('Detail modal initialized'); }); // Export for use in other modules window.viewCaptureDetails = viewCaptureDetails; window.closeDetailModal = closeDetailModal;