Fix JavaScript error when switching between view tabs
Problem: Clicking on tabs other than Map caused JavaScript errors due to incorrect DOM element ID resolution in switchView() method. Root cause: The viewId extraction from button IDs didn't match the expected view element IDs, causing null reference errors when trying to add classes. Solution: - Fixed switchView() to correctly handle view IDs (e.g., "map-view") - Added null checks for DOM elements to prevent crashes - Updated this.currentView initialization and comparisons to match full IDs - Ensured view-specific initialization works with correct baseName extraction Now all tabs (Map, Table, Statistics, Coverage, 3D Radar) work without errors. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
5a4f9e2e20
commit
d73ecc2b20
1 changed files with 17 additions and 7 deletions
|
|
@ -22,7 +22,7 @@ class SkyView {
|
|||
this.heatmapLayer = null;
|
||||
|
||||
// UI state
|
||||
this.currentView = 'map';
|
||||
this.currentView = 'map-view';
|
||||
this.showTrails = false;
|
||||
this.showRange = false;
|
||||
this.showSources = true;
|
||||
|
|
@ -70,16 +70,26 @@ class SkyView {
|
|||
switchView(viewId) {
|
||||
// Update buttons
|
||||
document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active'));
|
||||
document.getElementById(`${viewId}-btn`).classList.add('active');
|
||||
const activeBtn = document.getElementById(`${viewId}-btn`);
|
||||
if (activeBtn) {
|
||||
activeBtn.classList.add('active');
|
||||
}
|
||||
|
||||
// Update views
|
||||
// Update views (viewId already includes the full view ID like "map-view")
|
||||
document.querySelectorAll('.view').forEach(view => view.classList.remove('active'));
|
||||
document.getElementById(`${viewId}-view`).classList.add('active');
|
||||
const activeView = document.getElementById(viewId);
|
||||
if (activeView) {
|
||||
activeView.classList.add('active');
|
||||
} else {
|
||||
console.warn(`View element not found: ${viewId}`);
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentView = viewId;
|
||||
|
||||
// Handle view-specific initialization
|
||||
switch (viewId) {
|
||||
// Handle view-specific initialization (extract base name for switch)
|
||||
const baseName = viewId.replace('-view', '');
|
||||
switch (baseName) {
|
||||
case 'coverage':
|
||||
this.initializeCoverageMap();
|
||||
break;
|
||||
|
|
@ -208,7 +218,7 @@ class SkyView {
|
|||
this.updateStatistics();
|
||||
this.updateHeaderInfo();
|
||||
|
||||
if (this.currentView === 'radar3d') {
|
||||
if (this.currentView === 'radar3d-view') {
|
||||
this.update3DRadar();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue