[BS5] Replace FooTable with jquery Datatables

mailcow · May 19, 2022 · 3e6a241 · 3e6a241
1 parent 160dcef
commit 3e6a241
Show file tree

Hide file tree

Showing 18 changed files with 216 additions and 185 deletions.
diff --git a/data/web/css/build/013-mailcow.css b/data/web/css/build/013-mailcow.css
@@ -244,10 +244,17 @@ code {
 .dropdown-header {
   font-weight: 600;
 }
+
 .dataTables_info {
-  margin: 15px !important;
+  margin: 15px 0 !important;
   padding: 0px !important;
 }
 .dataTables_paginate, .dataTables_length, .dataTables_filter {
-  margin: 15px !important;
+  margin: 15px 0 !important;
+}
+.dtr-details {
+  width: 100%;
+}
+.dtr-title {
+  width: 20%;
 }
diff --git a/data/web/js/site/debug.js b/data/web/js/site/debug.js
@@ -832,19 +832,35 @@ jQuery(function($){
       });
     }
   })
-  // Initial table drawings
-  draw_postfix_logs();
-  draw_autodiscover_logs();
-  draw_dovecot_logs();
-  draw_sogo_logs();
-  draw_watchdog_logs();
-  draw_acme_logs();
-  draw_api_logs();
-  draw_rl_logs();
-  draw_ui_logs();
-  draw_sasl_logs();
-  draw_netfilter_logs();
-  draw_rspamd_history();
+
+  // detect element visibility changes
+  function onVisible(element, callback) {
+    $(element).ready(function() {
+      element_object = document.querySelector(element)
+      new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+          if(entry.intersectionRatio > 0) {
+            callback(element_object);
+            observer.disconnect();
+          }
+        });
+      }).observe(element_object);
+    });
+  }
+  // Draw Table if tab is active
+  onVisible("[id^=tab-postfix-logs]", () => draw_postfix_logs());
+  onVisible("[id^=tab-dovecot-logs]", () => draw_dovecot_logs());
+  onVisible("[id^=tab-sogo-logs]", () => draw_sogo_logs());
+  onVisible("[id^=tab-watchdog-logs]", () => draw_watchdog_logs());
+  onVisible("[id^=tab-autodiscover-logs]", () => draw_autodiscover_logs());
+  onVisible("[id^=tab-acme-logs]", () => draw_acme_logs());
+  onVisible("[id^=tab-api-logs]", () => draw_api_logs());
+  onVisible("[id^=tab-api-rl]", () => draw_rl_logs());
+  onVisible("[id^=tab-ui]", () => draw_ui_logs());
+  onVisible("[id^=tab-sasl]", () => draw_sasl_logs());
+  onVisible("[id^=tab-netfilter-logs]", () => draw_netfilter_logs());
+  onVisible("[id^=tab-rspamd-history]", () => draw_rspamd_history());
+
   $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
     var target = $(e.target).attr("href");
     if (target == '#tab-rspamd-history') {