From d73ecc2b202580bcb24ed5b0e7be26e3c2e51c0c Mon Sep 17 00:00:00 2001
From: Ole-Morten Duesund <olemd@glemt.net>
Date: Sun, 24 Aug 2025 00:09:25 +0200
Subject: [PATCH] Fix JavaScript error when switching between view tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 static/js/app.js | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index 5c7fa58..0ca2c8d 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -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();
         }
     }