From 3e6a241c697722e24f41c23827d3b04663a966a7 Mon Sep 17 00:00:00 2001 From: FreddleSpl0it Date: Thu, 19 May 2022 21:29:01 +0200 Subject: [PATCH] [BS5] Replace FooTable with jquery Datatables --- data/web/css/build/013-mailcow.css | 11 +- data/web/js/site/debug.js | 42 ++- data/web/js/site/mailbox.js | 269 ++++++++++-------- .../templates/admin/tab-config-admins.twig | 4 +- .../templates/admin/tab-config-fwdhosts.twig | 2 +- .../templates/admin/tab-config-oauth2.twig | 2 +- data/web/templates/admin/tab-mailq.twig | 2 +- data/web/templates/admin/tab-routing.twig | 2 +- data/web/templates/debug.twig | 47 +-- data/web/templates/mailbox/tab-bcc.twig | 4 +- .../templates/mailbox/tab-domain-aliases.twig | 2 +- data/web/templates/mailbox/tab-domains.twig | 2 +- data/web/templates/mailbox/tab-filters.twig | 2 +- data/web/templates/mailbox/tab-mailboxes.twig | 2 +- .../templates/mailbox/tab-mbox-aliases.twig | 2 +- data/web/templates/mailbox/tab-resources.twig | 2 +- data/web/templates/mailbox/tab-syncjobs.twig | 2 +- .../web/templates/mailbox/tab-tls-policy.twig | 2 +- 18 files changed, 216 insertions(+), 185 deletions(-) diff --git a/data/web/css/build/013-mailcow.css b/data/web/css/build/013-mailcow.css index 932857da..b4314132 100644 --- 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%; } \ No newline at end of file diff --git a/data/web/js/site/debug.js b/data/web/js/site/debug.js index 9a239159..a6b92054 100644 --- 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') { diff --git a/data/web/js/site/mailbox.js b/data/web/js/site/mailbox.js index 5a3cf8a7..92e90753 100644 --- a/data/web/js/site/mailbox.js +++ b/data/web/js/site/mailbox.js @@ -220,6 +220,9 @@ $(document).ready(function() { }); jQuery(function($){ + // http://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery + var entityMap={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="}; + function escapeHtml(n){return String(n).replace(/[&<>"'`=\/]/g,function(n){return entityMap[n]})} // http://stackoverflow.com/questions/46155/validate-email-address-in-javascript function humanFileSize(i){if(Math.abs(i)<1024)return i+" B";var B=["KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"],e=-1;do{i/=1024,++e}while(Math.abs(i)>=1024&&e':new Date(i?1e3*i:0).toLocaleDateString(void 0,{year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"})} @@ -228,26 +231,6 @@ jQuery(function($){ var table_name = $(this).data('table'); $('#' + table_name).DataTable().ajax.reload(); }); - function table_mailbox_ready(ft, name) { - if(is_dual) { - $('.login_as').data("toggle", "tooltip") - .attr("disabled", true) - .removeAttr("href") - .attr("title", "Dual login cannot be used twice") - .tooltip(); - } - $('.refresh_table').prop("disabled", false); - heading = ft.$el.parents('.card').find('.card-header') - var ft_paging = ft.use(FooTable.Paging) - $(heading).children('.table-lines').text(function(){ - var total_rows = ft_paging.totalRows; - var size = ft_paging.size; - if (size > total_rows) { - size = total_rows; - } - return size + ' / ' + total_rows; - }) - } function draw_domain_table() { $('#domain_table').DataTable({ processing: true, @@ -257,6 +240,7 @@ jQuery(function($){ type: "GET", url: "/api/v1/get/domain/all", dataSrc: function(json){ + console.log(json); $.each(json, function(i, item) { item.aliases = item.aliases_in_domain + " / " + item.max_num_aliases_for_domain; item.mailboxes = item.mboxes_in_domain + " / " + item.max_num_mboxes_for_domain; @@ -370,6 +354,7 @@ jQuery(function($){ } function draw_mailbox_table() { $('#mailbox_table').DataTable({ + responsive : true, processing: true, serverSide: false, language: lang_datatables, @@ -451,6 +436,18 @@ jQuery(function($){ } }, columns: [ + { + // placeholder, so checkbox will not block child row toggle + title: '', + data: null, + searchable: false, + orderable: false, + defaultContent: '' + }, + { + title: '', + data: 'chkbox' + }, { title: lang.username, data: 'username' @@ -520,7 +517,7 @@ jQuery(function($){ title: lang.active, data: 'active', render: function (data, type) { - return 1==value?'':(0==value?'':2==value&&'—'); + return 1==data?'':(0==data?'':2==data&&'—'); } }, { @@ -570,6 +567,18 @@ jQuery(function($){ } }, columns: [ + { + // placeholder, so checkbox will not block child row toggle + title: '', + data: null, + searchable: false, + orderable: false, + defaultContent: '' + }, + { + title: '', + data: 'chkbox' + }, { title: lang.description, data: 'description' @@ -599,17 +608,7 @@ jQuery(function($){ }, { title: lang.action, - data: null, - render: function (data, type) { - return `
- - Bearbeiten - - - Entfernen - -
`; - } + data: 'action' }, ] }); @@ -643,6 +642,18 @@ jQuery(function($){ } }, columns: [ + { + // placeholder, so checkbox will not block child row toggle + title: '', + data: null, + searchable: false, + orderable: false, + defaultContent: '' + }, + { + title: '', + data: 'chkbox' + }, { title: 'ID', data: 'id' @@ -672,17 +683,7 @@ jQuery(function($){ }, { title: lang.action, - data: null, - render: function (data, type) { - return `
- - Bearbeiten - - - Entfernen - -
`; - } + data: 'action' }, ] }); @@ -713,6 +714,18 @@ jQuery(function($){ } }, columns: [ + { + // placeholder, so checkbox will not block child row toggle + title: '', + data: null, + searchable: false, + orderable: false, + defaultContent: '' + }, + { + title: '', + data: 'chkbox' + }, { title: 'ID', data: 'id' @@ -734,17 +747,7 @@ jQuery(function($){ }, { title: lang.action, - data: null, - render: function (data, type) { - return `
- - Bearbeiten - - - Entfernen - -
`; - } + data: 'action' }, ] }); @@ -780,6 +783,18 @@ jQuery(function($){ } }, columns: [ + { + // placeholder, so checkbox will not block child row toggle + title: '', + data: null, + searchable: false, + orderable: false, + defaultContent: '' + }, + { + title: '', + data: 'chkbox' + }, { title: 'ID', data: 'id' @@ -809,17 +824,7 @@ jQuery(function($){ }, { title: lang.action, - data: null, - render: function (data, type) { - return `
- - Bearbeiten - - - Entfernen - -
`; - } + data: 'action' }, ] }); @@ -877,6 +882,18 @@ jQuery(function($){ } }, columns: [ + { + // placeholder, so checkbox will not block child row toggle + title: '', + data: null, + searchable: false, + orderable: false, + defaultContent: '' + }, + { + title: '', + data: 'chkbox' + }, { title: 'ID', data: 'id' @@ -918,17 +935,7 @@ jQuery(function($){ }, { title: lang.action, - data: null, - render: function (data, type) { - return `
- - Bearbeiten - - - Entfernen - -
`; - } + data: 'action' }, ] }); @@ -961,6 +968,18 @@ jQuery(function($){ } }, columns: [ + { + // placeholder, so checkbox will not block child row toggle + title: '', + data: null, + searchable: false, + orderable: false, + defaultContent: '' + }, + { + title: '', + data: 'chkbox' + }, { title: lang.alias, data: 'alias_domain' @@ -990,17 +1009,7 @@ jQuery(function($){ }, { title: lang.action, - data: null, - render: function (data, type) { - return `
- - Bearbeiten - - - Entfernen - -
`; - } + data: 'action' }, ] }); @@ -1055,6 +1064,18 @@ jQuery(function($){ } }, columns: [ + { + // placeholder, so checkbox will not block child row toggle + title: '', + data: null, + searchable: false, + orderable: false, + defaultContent: '' + }, + { + title: '', + data: 'chkbox' + }, { title: 'ID', data: 'id' @@ -1100,17 +1121,7 @@ jQuery(function($){ }, { title: lang.action, - data: null, - render: function (data, type) { - return `
- - Bearbeiten - - - Entfernen - -
`; - } + data: 'action' }, ] }); @@ -1144,6 +1155,18 @@ jQuery(function($){ } }, columns: [ + { + // placeholder, so checkbox will not block child row toggle + title: '', + data: null, + searchable: false, + orderable: false, + defaultContent: '' + }, + { + title: '', + data: 'chkbox' + }, { title: 'ID', data: 'id' @@ -1170,17 +1193,7 @@ jQuery(function($){ }, { title: lang.action, - data: null, - render: function (data, type) { - return `
- - Bearbeiten - - - Entfernen - -
`; - } + data: 'action' }, ] }); @@ -1190,15 +1203,33 @@ jQuery(function($){ event.stopPropagation(); }) - draw_domain_table(); - draw_mailbox_table(); - draw_resource_table(); - draw_alias_table(); - draw_aliasdomain_table(); - draw_sync_job_table(); - draw_filter_table(); - draw_bcc_table(); - draw_recipient_map_table(); - draw_tls_policy_table(); + // 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); + }); + } + + // Load only if the tab is visible + onVisible("[id^=tab-domains]", () => draw_domain_table()); + onVisible("[id^=tab-mailboxes]", () => draw_mailbox_table()); + onVisible("[id^=tab-resources]", () => draw_resource_table()); + onVisible("[id^=tab-mbox-aliases]", () => draw_alias_table()); + onVisible("[id^=tab-domain-aliases]", () => draw_aliasdomain_table()); + onVisible("[id^=tab-syncjobs]", () => draw_sync_job_table()); + onVisible("[id^=tab-filters]", () => draw_filter_table()); + onVisible("[id^=tab-bcc]", () => { + draw_bcc_table(); + draw_recipient_map_table(); + }); + onVisible("[id^=tab-tls-policy]", () => draw_tls_policy_table()); }); diff --git a/data/web/templates/admin/tab-config-admins.twig b/data/web/templates/admin/tab-config-admins.twig index 004017de..8b5fa414 100644 --- a/data/web/templates/admin/tab-config-admins.twig +++ b/data/web/templates/admin/tab-config-admins.twig @@ -2,7 +2,7 @@
{{ lang.admin.admin_details }}
-
+
{{ lang.mailbox.toggle_all }} @@ -224,7 +224,7 @@
{{ lang.admin.domain_admins }}
-
+
{{ lang.mailbox.toggle_all }} diff --git a/data/web/templates/admin/tab-config-fwdhosts.twig b/data/web/templates/admin/tab-config-fwdhosts.twig index 9326e185..07f77deb 100644 --- a/data/web/templates/admin/tab-config-fwdhosts.twig +++ b/data/web/templates/admin/tab-config-fwdhosts.twig @@ -3,7 +3,7 @@
{{ lang.admin.forwarding_hosts }}

{{ lang.admin.forwarding_hosts_hint }}

-
+
diff --git a/data/web/templates/admin/tab-config-oauth2.twig b/data/web/templates/admin/tab-config-oauth2.twig index d0795442..d0aa140d 100644 --- a/data/web/templates/admin/tab-config-oauth2.twig +++ b/data/web/templates/admin/tab-config-oauth2.twig @@ -3,7 +3,7 @@
{{ lang.admin.oauth2_apps }}

{{ lang.admin.oauth2_info|raw }}

-
+
{{ lang.mailbox.toggle_all }} diff --git a/data/web/templates/admin/tab-mailq.twig b/data/web/templates/admin/tab-mailq.twig index 20055626..115ecce2 100644 --- a/data/web/templates/admin/tab-mailq.twig +++ b/data/web/templates/admin/tab-mailq.twig @@ -7,7 +7,7 @@
-
+
{{ lang.mailbox.toggle_all }} diff --git a/data/web/templates/admin/tab-routing.twig b/data/web/templates/admin/tab-routing.twig index 81328554..6d8a9682 100644 --- a/data/web/templates/admin/tab-routing.twig +++ b/data/web/templates/admin/tab-routing.twig @@ -3,7 +3,7 @@
{{ lang.admin.relayhosts }}

{{ lang.admin.relayhosts_hint|raw }}

-
+
diff --git a/data/web/templates/debug.twig b/data/web/templates/debug.twig index a7324de8..24407439 100644 --- a/data/web/templates/debug.twig +++ b/data/web/templates/debug.twig @@ -116,9 +116,7 @@
-
-
-
+
@@ -133,9 +131,7 @@
-
-
-
+
@@ -150,9 +146,7 @@
-
-
-
+
@@ -167,9 +161,7 @@
-
-
-
+
@@ -184,9 +176,7 @@
-
-
-
+
@@ -201,9 +191,7 @@
-
-
-
+
@@ -223,9 +211,7 @@ {{ lang.debug.history_all_servers }}
-
-
-
+
@@ -240,9 +226,7 @@
-
-
-
+
@@ -257,9 +241,7 @@
-
-
-
+
@@ -274,9 +256,7 @@
-
-
-
+
@@ -291,9 +271,7 @@
-
-
-
+
@@ -309,9 +287,8 @@

{{ lang.admin.hash_remove_info }}

+
-
-
diff --git a/data/web/templates/mailbox/tab-bcc.twig b/data/web/templates/mailbox/tab-bcc.twig index 0fbeed03..78b7eb9d 100644 --- a/data/web/templates/mailbox/tab-bcc.twig +++ b/data/web/templates/mailbox/tab-bcc.twig @@ -10,7 +10,7 @@

{{ lang.mailbox.bcc_info|raw }}

{#
#} -
+
{{ lang.mailbox.toggle_all }} @@ -40,7 +40,7 @@

{{ lang.mailbox.recipient_map_info }}

{#
#} -
+
{{ lang.mailbox.toggle_all }} diff --git a/data/web/templates/mailbox/tab-domain-aliases.twig b/data/web/templates/mailbox/tab-domain-aliases.twig index c05ba01b..0374b7d5 100644 --- a/data/web/templates/mailbox/tab-domain-aliases.twig +++ b/data/web/templates/mailbox/tab-domain-aliases.twig @@ -9,7 +9,7 @@
{#
#} -
+
{{ lang.mailbox.toggle_all }} diff --git a/data/web/templates/mailbox/tab-domains.twig b/data/web/templates/mailbox/tab-domains.twig index 600abc96..98c1823f 100644 --- a/data/web/templates/mailbox/tab-domains.twig +++ b/data/web/templates/mailbox/tab-domains.twig @@ -11,7 +11,7 @@
{#
#} -
+
{{ lang.mailbox.toggle_all }} diff --git a/data/web/templates/mailbox/tab-filters.twig b/data/web/templates/mailbox/tab-filters.twig index d74333e6..56e6d54a 100644 --- a/data/web/templates/mailbox/tab-filters.twig +++ b/data/web/templates/mailbox/tab-filters.twig @@ -10,7 +10,7 @@

{{ lang.mailbox.sieve_info|raw }}


{#
#} -
+
{{ lang.mailbox.toggle_all }} diff --git a/data/web/templates/mailbox/tab-mailboxes.twig b/data/web/templates/mailbox/tab-mailboxes.twig index 2c20a1e8..20734825 100644 --- a/data/web/templates/mailbox/tab-mailboxes.twig +++ b/data/web/templates/mailbox/tab-mailboxes.twig @@ -9,7 +9,7 @@
-
+
{{ lang.mailbox.toggle_all }} diff --git a/data/web/templates/mailbox/tab-mbox-aliases.twig b/data/web/templates/mailbox/tab-mbox-aliases.twig index fb900ba7..b91003b5 100644 --- a/data/web/templates/mailbox/tab-mbox-aliases.twig +++ b/data/web/templates/mailbox/tab-mbox-aliases.twig @@ -10,7 +10,7 @@

{{ lang.mailbox.alias_domain_alias_hint|raw }}

-
+
{{ lang.mailbox.toggle_all }} diff --git a/data/web/templates/mailbox/tab-resources.twig b/data/web/templates/mailbox/tab-resources.twig index ea047d6f..f2f60bb1 100644 --- a/data/web/templates/mailbox/tab-resources.twig +++ b/data/web/templates/mailbox/tab-resources.twig @@ -12,7 +12,7 @@

{{ lang.mailbox.booking_lt0_short }} - {{ lang.mailbox.booking_ltnull }}

{{ lang.mailbox.booking_custom_short }} - {{ lang.mailbox.booking_custom }}

{#
#} -
+
{{ lang.mailbox.toggle_all }} diff --git a/data/web/templates/mailbox/tab-syncjobs.twig b/data/web/templates/mailbox/tab-syncjobs.twig index 13bf3c75..30e5b8fd 100644 --- a/data/web/templates/mailbox/tab-syncjobs.twig +++ b/data/web/templates/mailbox/tab-syncjobs.twig @@ -9,7 +9,7 @@
-
+
{{ lang.mailbox.toggle_all }} diff --git a/data/web/templates/mailbox/tab-tls-policy.twig b/data/web/templates/mailbox/tab-tls-policy.twig index acb74d4e..addc6c62 100644 --- a/data/web/templates/mailbox/tab-tls-policy.twig +++ b/data/web/templates/mailbox/tab-tls-policy.twig @@ -10,7 +10,7 @@

{{ lang.mailbox.tls_policy_maps_info|raw }}

{#
#} -
+
{{ lang.mailbox.toggle_all }}