[BS5] fix datatables

data/web/js/site/admin.js

@@ -62,6 +62,12 @@ jQuery(function($){
     $('#' + table_name).DataTable().ajax.reload();
   });
   function draw_domain_admins() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#domainadminstable') ) {
+      $('#domainadminstable').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#domainadminstable').DataTable({
       processing: true,
       serverSide: false,
@@ -70,6 +76,7 @@ jQuery(function($){
         type: "GET",
         url: "/api/v1/get/domain-admin/all",
         dataSrc: function(data){
+          console.log(data);
           return process_table_data(data, 'domainadminstable');
         }
       },
@@ -94,6 +101,11 @@ jQuery(function($){
             data: 'username',
             defaultContent: ''
           },
+          {
+            title: lang.admin_domains,
+            data: 'selected_domains',
+            defaultContent: '',
+          },
           {
             title: "TFA",
             data: 'tfa_active',
@@ -103,14 +115,6 @@ jQuery(function($){
               else return '<i class="bi bi-x-lg"></i>'
             }
           },
-          {
-            title: lang.admin_domains,
-            data: 'tfa_active',
-            defaultContent: '',
-            render: function (data, type) {
-              return data;
-            }
-          },
           {
             title: lang.active,
             data: 'active',
@@ -128,11 +132,17 @@ jQuery(function($){
           },
       ],
       initComplete: function(settings, json){
-        console.log(settings.aoColumns);
+        console.log(settings);
       }
     });
   }
   function draw_oauth2_clients() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#oauth2clientstable') ) {
+      $('#oauth2clientstable').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#oauth2clientstable').DataTable({
       processing: true,
       serverSide: false,
@@ -190,6 +200,12 @@ jQuery(function($){
     });
   }
   function draw_admins() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#adminstable') ) {
+      $('#adminstable').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#adminstable').DataTable({
       processing: true,
       serverSide: false,
@@ -250,6 +266,12 @@ jQuery(function($){
     });
   }
   function draw_fwd_hosts() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#forwardinghoststable') ) {
+      $('#forwardinghoststable').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#forwardinghoststable').DataTable({
       processing: true,
       serverSide: false,
@@ -302,6 +324,12 @@ jQuery(function($){
     });
   }
   function draw_relayhosts() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#relayhoststable') ) {
+      $('#relayhoststable').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#relayhoststable').DataTable({
       processing: true,
       serverSide: false,
@@ -352,7 +380,11 @@ jQuery(function($){
           {
             title: lang.active,
             data: 'active',
-            defaultContent: ''
+            defaultContent: '',
+            render: function (data, type) {
+              if(data == 1) return '<i class="bi bi-check-lg"></i>';
+              else return '<i class="bi bi-x-lg"></i>'
+            }
           },
           {
             title: lang.action,
@@ -364,6 +396,12 @@ jQuery(function($){
     });
   }
   function draw_transport_maps() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#transportstable') ) {
+      $('#transportstable').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#transportstable').DataTable({
       processing: true,
       serverSide: false,
@@ -414,7 +452,11 @@ jQuery(function($){
           {
             title: lang.active,
             data: 'active',
-            defaultContent: ''
+            defaultContent: '',
+            render: function (data, type) {
+              if(data == 1) return '<i class="bi bi-check-lg"></i>';
+              else return '<i class="bi bi-x-lg"></i>'
+            }
           },
           {
             title: lang.action,
@@ -426,6 +468,12 @@ jQuery(function($){
     });
   }
   function draw_queue() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#queuetable') ) {
+      $('#queuetable').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#queuetable').DataTable({
       processing: true,
       serverSide: false,
@@ -594,7 +642,6 @@ jQuery(function($){
         entries.forEach(entry => {
           if(entry.intersectionRatio > 0) {
             callback(element_object);
-            observer.disconnect();
           }
         });
       }).observe(element_object);
@@ -687,7 +734,7 @@ jQuery(function($){
     e.preventDefault();
     prev = $('#test_transport').text();
     $(this).prop("disabled",true);
-    $(this).html('<i class="bi bi-arrow-repeat icon-spin"></i> ');
+    $(this).html('<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div> ');
     $.ajax({
         type: 'GET',
         url: 'inc/ajax/transport_check.php',

data/web/js/site/debug.js

@@ -55,6 +55,12 @@ jQuery(function($){
     $('#' + table_name).DataTable().ajax.reload();
   });
   function draw_autodiscover_logs() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#autodiscover_log') ) {
+      $('#autodiscover_log').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#autodiscover_log').DataTable({
       processing: true,
       serverSide: false,
@@ -101,6 +107,12 @@ jQuery(function($){
     });
   }
   function draw_postfix_logs() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#postfix_log') ) {
+      $('#postfix_log').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#postfix_log').DataTable({
       processing: true,
       serverSide: false,
@@ -137,6 +149,12 @@ jQuery(function($){
     });
   }
   function draw_watchdog_logs() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#watchdog_log') ) {
+      $('#watchdog_log').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#watchdog_log').DataTable({
       processing: true,
       serverSide: false,
@@ -178,6 +196,12 @@ jQuery(function($){
     });
   }
   function draw_api_logs() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#api_log') ) {
+      $('#api_log').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#api_log').DataTable({
       processing: true,
       serverSide: false,
@@ -224,6 +248,12 @@ jQuery(function($){
     });
   }
   function draw_rl_logs() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#rl_log') ) {
+      $('#rl_log').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#rl_log').DataTable({
       processing: true,
       serverSide: false,
@@ -310,6 +340,12 @@ jQuery(function($){
     });
   }
   function draw_ui_logs() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#ui_logs') ) {
+      $('#ui_logs').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#ui_logs').DataTable({
       processing: true,
       serverSide: false,
@@ -371,6 +407,12 @@ jQuery(function($){
     });
   }
   function draw_sasl_logs() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#sasl_logs') ) {
+      $('#sasl_logs').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#sasl_logs').DataTable({
       processing: true,
       serverSide: false,
@@ -412,6 +454,12 @@ jQuery(function($){
     });
   }
   function draw_acme_logs() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#acme_log') ) {
+      $('#acme_log').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#acme_log').DataTable({
       processing: true,
       serverSide: false,
@@ -443,6 +491,12 @@ jQuery(function($){
     });
   }
   function draw_netfilter_logs() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#netfilter_log') ) {
+      $('#netfilter_log').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#netfilter_log').DataTable({
       processing: true,
       serverSide: false,
@@ -479,6 +533,12 @@ jQuery(function($){
     });
   }
   function draw_sogo_logs() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#sogo_log') ) {
+      $('#sogo_log').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#sogo_log').DataTable({
       processing: true,
       serverSide: false,
@@ -515,6 +575,12 @@ jQuery(function($){
     });
   }
   function draw_dovecot_logs() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#dovecot_log') ) {
+      $('#dovecot_log').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#dovecot_log').DataTable({
       processing: true,
       serverSide: false,
@@ -612,6 +678,12 @@ jQuery(function($){
     });
   }
   function draw_rspamd_history() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#rspamd_history') ) {
+      $('#rspamd_history').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#rspamd_history').DataTable({
       processing: true,
       serverSide: false,
@@ -906,7 +978,6 @@ jQuery(function($){
         entries.forEach(entry => {
           if(entry.intersectionRatio > 0) {
             callback(element_object);
-            observer.disconnect();
           }
         });
       }).observe(element_object);

data/web/js/site/mailbox.js

@@ -186,19 +186,25 @@ $(document).ready(function() {
     $("#multiple_bookings").val($("#multiple_bookings_custom").val());
   });
 
-
 });
 jQuery(function($){
   // 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<B.length-1);return i.toFixed(1)+" "+B[e]}
-  function unix_time_format(i){return""==i?'<i class="bi bi-x-lg"></i>':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"})}
+  function unix_time_format(i){return""==i?'<i class="bi bi-x"></i>':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"})}
+  
   $(".refresh_table").on('click', function(e) {
     e.preventDefault();
     var table_name = $(this).data('table');
     $('#' + table_name).DataTable().ajax.reload();
   });
   function draw_domain_table() {
-    $('#domain_table').DataTable({
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#domain_table') ) {
+      $('#domain_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
+    var table = $('#domain_table').DataTable({
       processing: true,
       serverSide: false,
       language: lang_datatables,
@@ -282,12 +288,12 @@ jQuery(function($){
         },
         {
           title: lang.aliases,
-          data: 'aliases_in_domain',
+          data: 'aliases',
           defaultContent: ''
         },
         {
           title: lang.mailboxes,
-          data: 'mboxes_in_domain',
+          data: 'mailboxes',
           responsivePriority: 4,
           defaultContent: ''
         },
@@ -346,6 +352,7 @@ jQuery(function($){
           title: lang.active,
           data: 'active',
           defaultContent: '',
+          responsivePriority: 5,
           render: function (data, type) {
             return 1==data?'<i class="bi bi-check-lg"></i>':(0==data?'<i class="bi bi-x-lg"></i>':2==data&&'&#8212;');
           }
@@ -361,6 +368,12 @@ jQuery(function($){
     });  
   }
   function draw_mailbox_table() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#mailbox_table') ) {
+      $('#mailbox_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#mailbox_table').DataTable({
 			responsive : true,
       processing: true,
@@ -472,9 +485,43 @@ jQuery(function($){
           {
             title: lang.username,
             data: 'username',
-            responsivePriority: 3,
+            responsivePriority: 1,
             defaultContent: ''
           },
+          {
+            title: lang.domain_quota,
+            data: 'quota',
+            responsivePriority: 2,
+            defaultContent: '',
+            render: function (data, type) {
+              data = data.split("/");
+              var of_q = (data[1] == 0 ? "∞" : humanFileSize(data[1]));
+              return humanFileSize(data[0]) + " / " + of_q;
+            }
+          },
+          {
+            title: lang.last_mail_login,
+            data: 'last_mail_login',
+            defaultContent: '',
+            responsivePriority: 3,
+            render: function (data, type) {
+              res = data.split("/");
+              return '<div class="badge bg-info mb-2">IMAP @ ' + unix_time_format(Number(res[0])) + '</div><br>' +
+                '<div class="badge bg-info mb-2">POP3 @ ' + unix_time_format(Number(res[1])) + '</div><br>' +
+                '<div class="badge bg-info">SMTP @ ' + unix_time_format(Number(res[2])) + '</div>';
+            }
+          },
+          {
+            title: lang.last_pw_change,
+            data: 'last_pw_change',
+            defaultContent: ''
+          },
+          {
+            title: lang.in_use,
+            data: 'in_use',
+            defaultContent: '',
+            responsivePriority: 4
+          },
           {
             title: lang.fname,
             data: 'name',
@@ -485,17 +532,6 @@ jQuery(function($){
             data: 'domain',
             defaultContent: ''
           },
-          {
-            title: lang.domain_quota,
-            data: 'quota',
-            responsivePriority: 4,
-            defaultContent: '',
-            render: function (data, type) {
-              data = data.split("/");
-              var of_q = (data[1] == 0 ? "∞" : humanFileSize(data[1]));
-              return humanFileSize(data[0]) + " / " + of_q;
-            }
-          },
           {
             title: lang.tls_enforce_in,
             data: 'tls_enforce_in',
@@ -521,16 +557,6 @@ jQuery(function($){
             data: 'pop3_access',
             defaultContent: ''
           },
-          {
-            title: lang.last_mail_login,
-            data: 'last_mail_login',
-            defaultContent: ''
-          },
-          {
-            title: lang.last_pw_change,
-            data: 'last_pw_change',
-            defaultContent: ''
-          },
           {
             title: lang.quarantine_notification,
             data: 'quarantine_notification',
@@ -541,15 +567,11 @@ jQuery(function($){
             data: 'quarantine_category',
             defaultContent: ''
           },
-          {
-            title: lang.in_use,
-            data: 'in_use',
-            defaultContent: ''
-          },
           {
             title: lang.msg_num,
             data: 'messages',
-            defaultContent: ''
+            defaultContent: '',
+            responsivePriority: 5
           },
           {
             title: 'Tags',
@@ -560,6 +582,7 @@ jQuery(function($){
             title: lang.active,
             data: 'active',
             defaultContent: '',
+            responsivePriority: 6,
             render: function (data, type) {
               return 1==data?'<i class="bi bi-check-lg"></i>':(0==data?'<i class="bi bi-x-lg"></i>':2==data&&'&#8212;');
             }
@@ -575,6 +598,12 @@ jQuery(function($){
     });
   }
   function draw_resource_table() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#resource_table') ) {
+      $('#resource_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#resource_table').DataTable({
       processing: true,
       serverSide: false,
@@ -667,6 +696,40 @@ jQuery(function($){
     });
   }
   function draw_bcc_table() {
+    $.get("/api/v1/get/bcc-destination-options", function(data){
+      // Domains
+      var optgroup = "<optgroup label='" + lang.domains + "'>";
+      $.each(data.domains, function(index, domain){
+        optgroup += "<option value='" + domain + "'>" + domain + "</option>"
+      });
+      optgroup += "</optgroup>"
+      $('#bcc-local-dest').append(optgroup);
+      // Alias domains
+      var optgroup = "<optgroup label='" + lang.domain_aliases + "'>";
+      $.each(data.alias_domains, function(index, alias_domain){
+        optgroup += "<option value='" + alias_domain + "'>" + alias_domain + "</option>"
+      });
+      optgroup += "</optgroup>"
+      $('#bcc-local-dest').append(optgroup);
+      // Mailboxes and aliases
+      $.each(data.mailboxes, function(mailbox, aliases){
+        var optgroup = "<optgroup label='" + mailbox + "'>";
+        $.each(aliases, function(index, alias){
+          optgroup += "<option value='" + alias + "'>" + alias + "</option>"
+        });
+        optgroup += "</optgroup>"
+        $('#bcc-local-dest').append(optgroup);
+      });
+      // Finish
+      $('#bcc-local-dest').selectpicker('refresh');
+    });
+
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#bcc_table') ) {
+      $('#bcc_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+    
     $('#bcc_table').DataTable({
       processing: true,
       serverSide: false,
@@ -757,6 +820,12 @@ jQuery(function($){
     });
   }
   function draw_recipient_map_table() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#recipient_map_table') ) {
+      $('#recipient_map_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#recipient_map_table').DataTable({
       processing: true,
       serverSide: false,
@@ -833,6 +902,12 @@ jQuery(function($){
     });
   }
   function draw_tls_policy_table() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#tls_policy_table') ) {
+      $('#tls_policy_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#tls_policy_table').DataTable({
       processing: true,
       serverSide: false,
@@ -925,6 +1000,12 @@ jQuery(function($){
     });
   }
   function draw_alias_table() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#alias_table') ) {
+      $('#alias_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#alias_table').DataTable({
       processing: true,
       serverSide: false,
@@ -1010,15 +1091,24 @@ jQuery(function($){
             data: 'goto',
             defaultContent: ''
           },
+          {
+            title: lang.domain,
+            data: 'domain',
+            defaultContent: '',
+            responsivePriority: 5,
+          },
           {
             title: lang.bcc_destinations,
             data: 'bcc_dest',
             defaultContent: ''
           },
           {
-            title: lang.domain,
+            title: lang.sogo_visible,
-            data: 'domain',
+            data: 'sogo_visible',
-            defaultContent: ''
+            defaultContent: '',
+            render: function(data, type){
+              return 1==data?'<i class="bi bi-check-lg"></i>':0==data&&'<i class="bi bi-x-lg"></i>';
+            }
           },
           {
             title: lang.public_comment,
@@ -1030,15 +1120,11 @@ jQuery(function($){
             data: 'private_comment',
             defaultContent: ''
           },
-          {
-            title: lang.sogo_visible,
-            data: 'sogo_visible',
-            defaultContent: ''
-          },
           {
             title: lang.active,
             data: 'active',
             defaultContent: '',
+            responsivePriority: 6,
             render: function (data, type) {
               return 1==data?'<i class="bi bi-check-lg"></i>':0==data&&'<i class="bi bi-x-lg"></i>';
             }
@@ -1054,6 +1140,12 @@ jQuery(function($){
     });
   }
   function draw_aliasdomain_table() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#aliasdomain_table') ) {
+      $('#aliasdomain_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#aliasdomain_table').DataTable({
       processing: true,
       serverSide: false,
@@ -1109,21 +1201,6 @@ jQuery(function($){
             responsivePriority: 4,
             defaultContent: ''
           },
-          {
-            title: lang.bcc_local_dest,
-            data: 'local_dest',
-            defaultContent: ''
-          },
-          {
-            title: lang.bcc_destinations,
-            data: 'bcc_dest',
-            defaultContent: ''
-          },
-          {
-            title: lang.domain,
-            data: 'domain',
-            defaultContent: ''
-          },
           {
             title: lang.active,
             data: 'active',
@@ -1143,6 +1220,12 @@ jQuery(function($){
     });
   }
   function draw_sync_job_table() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#sync_job_table') ) {
+      $('#sync_job_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#sync_job_table').DataTable({
       processing: true,
       serverSide: false,
@@ -1225,16 +1308,6 @@ jQuery(function($){
             data: 'server_w_port',
             defaultContent: ''
           },
-          {
-            title: lang.excludes,
-            data: 'exclude',
-            defaultContent: ''
-          },
-          {
-            title: lang.mins_interval,
-            data: 'mins_interval',
-            defaultContent: ''
-          },
           {
             title: lang.last_run,
             data: 'last_run',
@@ -1246,8 +1319,8 @@ jQuery(function($){
             defaultContent: ''
           },
           {
-            title: lang.status,
+            title: 'Log',
-            data: 'is_running',
+            data: 'log',
             defaultContent: ''
           },
           {
@@ -1259,8 +1332,18 @@ jQuery(function($){
             }
           },
           {
-            title: 'Log',
+            title: lang.status,
-            data: 'log',
+            data: 'is_running',
+            defaultContent: ''
+          },
+          {
+            title: lang.excludes,
+            data: 'exclude',
+            defaultContent: ''
+          },
+          {
+            title: lang.mins_interval,
+            data: 'mins_interval',
             defaultContent: ''
           },
           {
@@ -1274,7 +1357,14 @@ jQuery(function($){
     });
   }
   function draw_filter_table() {
-    $('#filter_table').DataTable({
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#filter_table') ) {
+      $('#filter_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
+    var table = $('#filter_table').DataTable({
+      autoWidth: false,
       processing: true,
       serverSide: false,
       language: lang_datatables,
@@ -1321,12 +1411,13 @@ jQuery(function($){
           {
             title: 'ID',
             data: 'id',
-            responsivePriority: 3,
+            responsivePriority: 2,
             defaultContent: ''
           },
           {
             title: lang.active,
             data: 'active',
+            responsivePriority: 3,
             defaultContent: ''
           },
           {
@@ -1348,7 +1439,8 @@ jQuery(function($){
           {
             title: 'Script',
             data: 'script_data',
-            defaultContent: ''
+            defaultContent: '',
+            className: 'none'
           },
           {
             title: lang.action,
@@ -1371,7 +1463,6 @@ jQuery(function($){
         entries.forEach(entry => {
           if(entry.intersectionRatio > 0) {
             callback(element_object);
-            observer.disconnect();
           }
         });
       }).observe(element_object);

data/web/js/site/user.js

@@ -128,6 +128,12 @@ jQuery(function($){
   }
 
   function draw_tla_table() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#tla_table') ) {
+      $('#tla_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#tla_table').DataTable({
       processing: true,
       serverSide: false,
@@ -184,6 +190,15 @@ jQuery(function($){
             return date.toLocaleDateString(undefined, {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"});
           }
         },
+        {
+          title: lang.created_on,
+          data: 'created',
+          defaultContent: '',
+          render: function (data, type) {
+            var date = new Date(data.replace(/-/g, "/"));
+            return date.toLocaleDateString(undefined, {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"});
+          }
+        },
         {
           title: lang.action,
           data: 'action',
@@ -194,6 +209,12 @@ jQuery(function($){
     });
   }
   function draw_sync_job_table() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#sync_job_table') ) {
+      $('#sync_job_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#sync_job_table').DataTable({
       processing: true,
       serverSide: false,
@@ -267,33 +288,19 @@ jQuery(function($){
         {
           title: 'ID',
           data: 'id',
-          defaultContent: ''
+          defaultContent: '',
+          responsivePriority: 3
         },
         {
           title: 'Server',
           data: 'server_w_port',
           defaultContent: ''
         },
-        {
-          title: lang.encryption,
-          data: 'enc1',
-          defaultContent: ''
-        },
         {
           title: lang.username,
           data: 'user1',
           defaultContent: ''
         },
-        {
-          title: lang.excludes,
-          data: 'exclude',
-          defaultContent: ''
-        },
-        {
-          title: lang.interval + " (min)",
-          data: 'mins_interval',
-          defaultContent: ''
-        },
         {
           title: lang.last_run,
           data: 'last_run',
@@ -320,18 +327,41 @@ jQuery(function($){
         {
           title: lang.status,
           data: 'is_running',
+          defaultContent: '',
+          responsivePriority: 4
+        },
+        {
+          title: lang.encryption,
+          data: 'enc1',
+          defaultContent: ''
+        },
+        {
+          title: lang.excludes,
+          data: 'exclude',
+          defaultContent: ''
+        },
+        {
+          title: lang.interval + " (min)",
+          data: 'mins_interval',
           defaultContent: ''
         },
         {
           title: lang.action,
           data: 'action',
           className: 'text-md-end dt-sm-head-hidden dt-body-right',
-          defaultContent: ''
+          defaultContent: '',
+          responsivePriority: 5
         }
       ]
     });
   }
   function draw_app_passwd_table() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#app_passwd_table') ) {
+      $('#app_passwd_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#app_passwd_table').DataTable({
       processing: true,
       serverSide: false,
@@ -416,6 +446,12 @@ jQuery(function($){
     });
   }
   function draw_wl_policy_mailbox_table() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#wl_policy_mailbox_table') ) {
+      $('#wl_policy_mailbox_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#wl_policy_mailbox_table').DataTable({
       processing: true,
       serverSide: false,
@@ -463,7 +499,7 @@ jQuery(function($){
         },
         {
           title: lang.spamfilter_table_rule,
-          data: 'name',
+          data: 'value',
           defaultContent: ''
         },
         {
@@ -475,6 +511,12 @@ jQuery(function($){
     });
   }
   function draw_bl_policy_mailbox_table() {
+    // just recalc width if instance already exists
+    if ($.fn.DataTable.isDataTable('#bl_policy_mailbox_table') ) {
+      $('#bl_policy_mailbox_table').DataTable().columns.adjust().responsive.recalc();
+      return;
+    }
+
     $('#bl_policy_mailbox_table').DataTable({
       processing: true,
       serverSide: false,
@@ -522,7 +564,7 @@ jQuery(function($){
         },
         {
           title: lang.spamfilter_table_rule,
-          data: 'name',
+          data: 'value',
           defaultContent: ''
         },
         {
@@ -576,7 +618,6 @@ jQuery(function($){
         entries.forEach(entry => {
           if(entry.intersectionRatio > 0) {
             callback(element_object);
-            observer.disconnect();
           }
         });
       }).observe(element_object);