split templates

oedb/resources/demo/static/traffic_tabs.js

@@ -0,0 +1,63 @@
+// traffic_tabs.js - Handle query parameters for tab selection in traffic.html
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Get all tab items
+    const tabItems = document.querySelectorAll('.tab-item');
+    
+    // Function to activate a tab
+    function activateTab(tabName) {
+        // Find the tab item with the given tab name
+        const tabItem = document.querySelector(`.tab-item[data-tab="${tabName}"]`);
+        if (!tabItem) return;
+        
+        // Remove active class from all tab items
+        tabItems.forEach(item => item.classList.remove('active'));
+        
+        // Add active class to the selected tab item
+        tabItem.classList.add('active');
+        
+        // Get all tab panes
+        const tabPanes = document.querySelectorAll('.tab-pane');
+        
+        // Remove active class from all tab panes
+        tabPanes.forEach(pane => pane.classList.remove('active'));
+        
+        // Add active class to the corresponding tab pane
+        document.getElementById(tabName + '-tab').classList.add('active');
+        
+        // Save active tab to localStorage
+        localStorage.setItem('activeTab', tabName);
+        
+        // Update URL with query parameter
+        const url = new URL(window.location.href);
+        url.searchParams.set('tab', tabName);
+        history.replaceState(null, '', url);
+    }
+    
+    // Add click event listener to each tab item
+    tabItems.forEach(tab => {
+        tab.addEventListener('click', function() {
+            // Get the tab name from data-tab attribute
+            const tabName = this.getAttribute('data-tab');
+            
+            // Activate the tab
+            activateTab(tabName);
+        });
+    });
+    
+    // Check for tab query parameter
+    const urlParams = new URLSearchParams(window.location.search);
+    const tabParam = urlParams.get('tab');
+    
+    if (tabParam) {
+        // Activate the tab from query parameter
+        activateTab(tabParam);
+    } else {
+        // Restore active tab from localStorage if no query parameter
+        const activeTab = localStorage.getItem('activeTab');
+        if (activeTab) {
+            // Activate the tab from localStorage
+            activateTab(activeTab);
+        }
+    }
+});