diff --git a/assets/static/js/app.js b/assets/static/js/app.js index a82a33c..e81b62f 100644 --- a/assets/static/js/app.js +++ b/assets/static/js/app.js @@ -28,6 +28,14 @@ class SkyView { this.selectedAircraft = null; this.selectedTrailEnabled = false; + // Debug/verbose logging control + // Enable verbose logging with: ?verbose in URL or localStorage.setItem('skyview-verbose', 'true') + const urlParams = new URLSearchParams(window.location.search); + this.verbose = urlParams.has('verbose') || localStorage.getItem('skyview-verbose') === 'true'; + + // Set global verbose flag for other modules + window.skyviewVerbose = this.verbose; + this.init(); } @@ -228,7 +236,10 @@ class SkyView { handleWebSocketMessage(message) { const aircraftCount = Object.keys(message.data.aircraft || {}).length; - console.debug(`WebSocket message: ${message.type}, ${aircraftCount} aircraft, timestamp: ${message.timestamp}`); + // Only log WebSocket messages in verbose mode + if (this.verbose) { + console.debug(`WebSocket message: ${message.type}, ${aircraftCount} aircraft, timestamp: ${message.timestamp}`); + } switch (message.type) { case 'initial_data': @@ -247,7 +258,10 @@ class SkyView { updateData(data) { // Update all managers with new data - ORDER MATTERS - console.debug(`Updating data: ${Object.keys(data.aircraft || {}).length} aircraft`); + // Only log data updates in verbose mode + if (this.verbose) { + console.debug(`Updating data: ${Object.keys(data.aircraft || {}).length} aircraft`); + } this.uiManager.updateData(data); this.aircraftManager.updateAircraftData(data); @@ -277,7 +291,10 @@ class SkyView { this.update3DRadar(); } - console.debug(`Data update complete: ${this.aircraftManager.aircraftMarkers.size} markers displayed`); + // Only log completion messages in verbose mode + if (this.verbose) { + console.debug(`Data update complete: ${this.aircraftManager.aircraftMarkers.size} markers displayed`); + } } // View switching @@ -377,7 +394,9 @@ class SkyView { // 3D Radar (basic implementation) initialize3DRadar() { - console.log('🚀 Starting 3D radar initialization'); + if (this.verbose) { + console.log('🚀 Starting 3D radar initialization'); + } try { const container = document.getElementById('radar3d-container'); @@ -386,23 +405,28 @@ class SkyView { return; } - console.log('✅ Container found:', container, 'Size:', container.clientWidth, 'x', container.clientHeight); - - // Check if container is visible - const containerStyles = window.getComputedStyle(container); - console.log('📋 Container styles:', { - display: containerStyles.display, - visibility: containerStyles.visibility, - width: containerStyles.width, - height: containerStyles.height - }); + if (this.verbose) { + console.log('✅ Container found:', container, 'Size:', container.clientWidth, 'x', container.clientHeight); + + // Check if container is visible + const containerStyles = window.getComputedStyle(container); + console.log('📋 Container styles:', { + display: containerStyles.display, + visibility: containerStyles.visibility, + width: containerStyles.width, + height: containerStyles.height + }); + } // Check if Three.js is available if (typeof THREE === 'undefined') { console.error('❌ Three.js is not available'); return; } - console.log('✅ Three.js available, version:', THREE.REVISION); + + if (this.verbose) { + console.log('✅ Three.js available, version:', THREE.REVISION); + } // Quick WebGL test const testCanvas = document.createElement('canvas'); @@ -412,7 +436,10 @@ class SkyView { container.innerHTML = '
WebGL not supported. Please use a modern browser that supports WebGL.
'; return; } - console.log('✅ WebGL is supported'); + + if (this.verbose) { + console.log('✅ WebGL is supported'); + } // Check container dimensions first if (container.clientWidth === 0 || container.clientHeight === 0) { @@ -420,7 +447,9 @@ class SkyView { // Force minimum size for initialization const width = Math.max(container.clientWidth, 800); const height = Math.max(container.clientHeight, 600); - console.log('📐 Using forced dimensions:', width, 'x', height); + if (this.verbose) { + console.log('📐 Using forced dimensions:', width, 'x', height); + } // Create scene with forced dimensions this.radar3d = { @@ -447,11 +476,13 @@ class SkyView { this.radar3d.renderer.setSize(container.clientWidth, container.clientHeight); } - console.log('✅ Three.js objects created:', { - scene: this.radar3d.scene, - camera: this.radar3d.camera, - renderer: this.radar3d.renderer - }); + if (this.verbose) { + console.log('✅ Three.js objects created:', { + scene: this.radar3d.scene, + camera: this.radar3d.camera, + renderer: this.radar3d.renderer + }); + } // Check WebGL context const rendererGL = this.radar3d.renderer.getContext(); @@ -459,11 +490,17 @@ class SkyView { console.error('❌ Failed to get WebGL context'); return; } - console.log('✅ WebGL context created'); + + if (this.verbose) { + console.log('✅ WebGL context created'); + } this.radar3d.renderer.setClearColor(0x0a0a0a, 0.9); container.appendChild(this.radar3d.renderer.domElement); - console.log('✅ Renderer added to container'); + + if (this.verbose) { + console.log('✅ Renderer added to container'); + } // Add lighting - ensure the scene is visible const ambientLight = new THREE.AmbientLight(0x404040, 1.0); // Increased intensity @@ -483,7 +520,9 @@ class SkyView { this.radar3d.camera.lookAt(0, 0, 0); // Add controls - console.log('🎮 Adding OrbitControls...'); + if (this.verbose) { + console.log('🎮 Adding OrbitControls...'); + } if (typeof OrbitControls === 'undefined') { console.error('❌ OrbitControls not available'); return; @@ -492,7 +531,10 @@ class SkyView { this.radar3d.controls = new OrbitControls(this.radar3d.camera, this.radar3d.renderer.domElement); this.radar3d.controls.enableDamping = true; this.radar3d.controls.dampingFactor = 0.05; - console.log('✅ OrbitControls added'); + + if (this.verbose) { + console.log('✅ OrbitControls added'); + } // Store default camera position for reset functionality this.radar3d.defaultPosition = { x: 0, y: 50, z: 50 }; @@ -530,11 +572,13 @@ class SkyView { cube.position.set(10, 1, 10); this.radar3d.scene.add(cube); - console.log('3D Radar initialized successfully', { - scene: this.radar3d.scene, - camera: this.radar3d.camera, - renderer: this.radar3d.renderer - }); + if (this.verbose) { + console.log('3D Radar initialized successfully', { + scene: this.radar3d.scene, + camera: this.radar3d.camera, + renderer: this.radar3d.renderer + }); + } // Start render loop this.render3DRadar(); @@ -697,7 +741,9 @@ class SkyView { if (response.ok) { const origin = await response.json(); this.radar3d.origin = origin; - console.log('3D Radar origin set to:', origin); + if (this.verbose) { + console.log('3D Radar origin set to:', origin); + } } } catch (error) { console.warn('Failed to fetch origin, using fallback:', error); diff --git a/assets/static/js/modules/aircraft-manager.js b/assets/static/js/modules/aircraft-manager.js index ce5cbed..3f018c6 100644 --- a/assets/static/js/modules/aircraft-manager.js +++ b/assets/static/js/modules/aircraft-manager.js @@ -109,8 +109,8 @@ export class AircraftManager { this.aircraftData.set(icao, aircraft); } - // Debug logging for track propagation issues - if (newCount > 0 || positionChanges > 0) { + // Debug logging for track propagation issues (only if significant changes) + if (newCount > 0 || (positionChanges > 5 && window.skyviewVerbose)) { console.debug(`Aircraft update: ${newCount} new, ${updatedCount} updated, ${positionChanges} position changes`); } } @@ -167,7 +167,10 @@ export class AircraftManager { // If no coordinates, we still want to process for other updates (trails, etc.) } - console.debug(`Markers update complete: ${this.aircraftMarkers.size} active markers, ${this.aircraftData.size} aircraft`); + // Only log marker updates in verbose mode + if (window.skyviewVerbose) { + console.debug(`Markers update complete: ${this.aircraftMarkers.size} active markers, ${this.aircraftData.size} aircraft`); + } } updateAircraftMarker(icao, aircraft) { @@ -196,7 +199,10 @@ export class AircraftManager { if (positionChanged) { // Debug significant position updates - console.debug(`Position change for ${icao}: [${pos[0].toFixed(4)}, ${pos[1].toFixed(4)}] (was [${oldPos.lat.toFixed(4)}, ${oldPos.lng.toFixed(4)}])`); + // Only log individual position changes in verbose mode + if (window.skyviewVerbose) { + console.debug(`Position change for ${icao}: [${pos[0].toFixed(4)}, ${pos[1].toFixed(4)}] (was [${oldPos.lat.toFixed(4)}, ${oldPos.lng.toFixed(4)}])`); + } } // Check if icon needs to be updated (track rotation, aircraft type, or ground status changes) diff --git a/assets/static/js/modules/websocket.js b/assets/static/js/modules/websocket.js index 74c2212..4dadbb2 100644 --- a/assets/static/js/modules/websocket.js +++ b/assets/static/js/modules/websocket.js @@ -53,8 +53,8 @@ export class WebSocketManager { this.lastMessageTime = Date.now(); this.messageCount++; - // Log message reception for debugging - if (this.messageCount % 10 === 0) { + // Only log message counts in verbose mode and less frequently + if (window.skyviewVerbose && this.messageCount % 500 === 0) { console.debug(`Received ${this.messageCount} WebSocket messages`); }