semi functional

custom/otssignange/js/theme.js

@@ -131,6 +131,123 @@
     });
   }
 
+  /**
+   * Prevent Chart.js errors when chart elements are missing
+   */
+  function initChartSafeguard() {
+    if (!window.Chart) return;
+
+    if (typeof window.Chart.acquireContext === 'function') {
+      window.Chart.acquireContext = function(item) {
+        if (!item) return null;
+
+        const candidate = item.length ? item[0] : item;
+        if (candidate && typeof candidate.getContext === 'function') {
+          return candidate.getContext('2d');
+        }
+
+        return null;
+      };
+      return;
+    }
+
+    if (window.Chart.prototype && typeof window.Chart.prototype.acquireContext === 'function') {
+      window.Chart.prototype.acquireContext = function(item) {
+        if (!item) return null;
+
+        const candidate = item.length ? item[0] : item;
+        if (candidate && typeof candidate.getContext === 'function') {
+          return candidate.getContext('2d');
+        }
+
+        return null;
+      };
+    }
+  }
+
+  /**
+   * Enhance tables: wrap in card, add per-table search box, client-side filtering
+   * Non-destructive: skips tables already enhanced
+   */
+  function enhanceTables() {
+    const selector = '.ots-content table, .content table, .container table, .card table, table';
+    const tables = Array.from(document.querySelectorAll(selector));
+    let counter = 0;
+
+    tables.forEach(table => {
+      // only enhance tables that have a thead and tbody
+      if (!table || table.classList.contains('modern-table')) return;
+      if (!table.querySelector('thead') || !table.querySelector('tbody')) return;
+
+      counter += 1;
+      table.classList.add('modern-table');
+
+      // Build wrapper structure
+      const wrapper = document.createElement('div');
+      wrapper.className = 'modern-table-card';
+
+      const controls = document.createElement('div');
+      controls.className = 'table-controls';
+
+      const input = document.createElement('input');
+      input.type = 'search';
+      input.placeholder = 'Search…';
+      input.className = 'table-search-input';
+      input.setAttribute('aria-label', 'Table search');
+      input.style.minWidth = '180px';
+
+      controls.appendChild(input);
+
+      const tableWrapper = document.createElement('div');
+      tableWrapper.className = 'table-wrapper';
+      tableWrapper.style.overflow = 'auto';
+
+      // Insert wrapper into DOM in place of the table
+      const parent = table.parentNode;
+      parent.replaceChild(wrapper, table);
+      wrapper.appendChild(controls);
+      wrapper.appendChild(tableWrapper);
+      tableWrapper.appendChild(table);
+
+      // Simple, light-weight search filtering for this table only
+      input.addEventListener('input', function (e) {
+        const term = (e.target.value || '').toLowerCase();
+        table.querySelectorAll('tbody tr').forEach(tr => {
+          const text = tr.textContent.toLowerCase();
+          tr.style.display = term === '' || text.includes(term) ? '' : 'none';
+        });
+      });
+    });
+  }
+
+  /**
+   * Initialize DataTables for enhanced behavior when available.
+   * Falls back gracefully if DataTables or jQuery are not present.
+   */
+  function initDataTables() {
+    if (!window.jQuery) return;
+    const $ = window.jQuery;
+    if (!$.fn || !$.fn.dataTable) return;
+
+    $('.modern-table, table').each(function () {
+      try {
+        if (!$.fn.dataTable.isDataTable(this)) {
+          $(this).DataTable({
+            responsive: true,
+            lengthChange: false,
+            pageLength: 10,
+            autoWidth: false,
+            dom: '<"table-controls"f>rt<"table-meta"ip>',
+            language: { search: '' }
+          });
+        }
+      } catch (err) {
+        // If initialization fails, ignore and allow fallback enhancer
+        console.warn('DataTables init failed for table', this, err);
+      }
+    });
+  }
+
   /**
    * Initialize all features when DOM is ready
    */
@@ -139,35 +256,13 @@
     initDropdowns();
     initSearch();
     initPageInteractions();
+    initDataTables();
+    enhanceTables();
     makeResponsive();
+    initChartSafeguard();
   }
 
   // Wait for DOM to be ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init);
-  } else {
-    init();
-  }
-})();
-
-    themeBtn.addEventListener('click', function() {
-      const currentTheme = html.getAttribute('data-theme') || 'light';
-      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-
-      html.setAttribute('data-theme', newTheme);
-      localStorage.setItem(STORAGE_KEYS.themeMode, newTheme);
-      themeBtn.setAttribute('aria-pressed', newTheme === 'dark');
-    });
-  }
-
-  /**
-   * Initialize page on DOM ready
-   */
-  function init() {
-    initSidebarToggle();
-    initThemeToggle();
-  }
-
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', init);
   } else {