[BS5] Replace FooTable with jquery Datatables

This commit is contained in:
FreddleSpl0it 2022-06-03 15:45:36 +02:00
parent 8a86fa491e
commit f13530d8a1
9 changed files with 485 additions and 353 deletions

View File

@ -1179,10 +1179,6 @@ jQuery(function($){
});
};
$('body').on('click', 'span.footable-toggle', function () {
event.stopPropagation();
})
// detect element visibility changes
function onVisible(element, callback) {
$(element).ready(function() {

View File

@ -128,23 +128,15 @@ jQuery(function($){
}
function draw_tla_table() {
ft_tla_table = FooTable.init('#tla_table', {
"columns": [
{"name":"chkbox","title":"","style":{"min-width":"60px","width":"60px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"},
{"name":"address","title":lang.alias},
{"name":"validity","formatter":function unix_time_format(tm) { var date = new Date(tm ? tm * 1000 : 0); return date.toLocaleDateString(undefined, {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"});},"title":lang.alias_valid_until,"style":{"width":"170px"}},
{"sorted": true,"sortValue": function(value){res = new Date(value);return res.getTime();},"direction":"DESC","name":"created","formatter":function date_format(datetime) { var date = new Date(datetime.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.created_on,"style":{"width":"170px"}},
{"name":"action","filterable": false,"sortable": false,"style":{"text-align":"right","min-width":"220px","width":"220px"},"type":"html","title":lang.action,"breakpoints":"xs sm"}
],
"empty": lang.empty,
"rows": $.ajax({
dataType: 'json',
url: '/api/v1/get/time_limited_aliases',
jsonp: false,
error: function () {
console.log('Cannot draw tla table');
},
success: function (data) {
$('#tla_table').DataTable({
processing: true,
serverSide: false,
language: lang_datatables,
ajax: {
type: "GET",
url: "/api/v1/get/time_limited_aliases",
dataSrc: function(data){
console.log(data);
$.each(data, function (i, item) {
if (acl_data.spam_alias === 1) {
item.action = '<div class="btn-group footable-actions">' +
@ -158,46 +150,52 @@ jQuery(function($){
item.action = '<span>-</span>';
}
});
return data;
}
}),
"paging": {
"enabled": true,
"limit": 5,
"size": pagination_size
},
"state": {"enabled": true},
"sorting": {
"enabled": true
columns: [
{
// placeholder, so checkbox will not block child row toggle
title: '',
data: null,
searchable: false,
orderable: false,
defaultContent: ''
},
"toggleSelector": "table tbody span.footable-toggle"
{
title: '',
data: 'chkbox'
},
{
title: lang.alias,
data: 'address'
},
{
title: lang.alias_valid_until,
data: 'validity',
render: function (data, type) {
var date = new Date(data ? data * 1000 : 0);
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'
}
]
});
}
function draw_sync_job_table() {
ft_syncjob_table = FooTable.init('#sync_job_table', {
"columns": [
{"name":"chkbox","title":"","style":{"min-width":"60px","width":"60px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"},
{"sorted": true,"name":"id","title":"ID","style":{"maxWidth":"60px","width":"60px","text-align":"center"}},
{"name":"server_w_port","title":"Server","breakpoints":"xs sm md","style":{"word-break":"break-all"}},
{"name":"enc1","title":lang.encryption,"breakpoints":"all"},
{"name":"user1","title":lang.username},
{"name":"exclude","title":lang.excludes,"breakpoints":"all"},
{"name":"mins_interval","title":lang.interval + " (min)","breakpoints":"all"},
{"name":"last_run","title":lang.last_run,"breakpoints":"xs sm md"},
{"name":"exit_status","filterable": false,"title":lang.syncjob_last_run_result},
{"name":"log","title":"Log"},
{"name":"active","filterable": false,"style":{"maxWidth":"70px","width":"70px"},"title":lang.active,"formatter": function(value){return 1==value?'<i class="bi bi-check-lg"></i>':0==value&&'<i class="bi bi-x-lg"></i>';}},
{"name":"is_running","filterable": false,"style":{"maxWidth":"120px","width":"100px"},"title":lang.status},
{"name":"action","filterable": false,"sortable": false,"style":{"text-align":"right","min-width":"260px","width":"260px"},"type":"html","title":lang.action,"breakpoints":"xs sm"}
],
"empty": lang.empty,
"rows": $.ajax({
dataType: 'json',
$('#sync_job_table').DataTable({
processing: true,
serverSide: false,
language: lang_datatables,
ajax: {
type: "GET",
url: '/api/v1/get/syncjobs/' + encodeURIComponent(mailcow_cc_username) + '/no_log',
jsonp: false,
error: function () {
console.log('Cannot draw sync job table');
},
success: function (data) {
dataSrc: function(data){
console.log(data);
$.each(data, function (i, item) {
item.user1 = escapeHtml(item.user1);
item.log = '<a href="#syncjobLogModal" data-bs-toggle="modal" data-syncjob-id="' + item.id + '">' + lang.open_logs + '</a>'
@ -239,39 +237,87 @@ jQuery(function($){
}
item.exit_status = item.success + ' ' + item.exit_status;
});
return data;
}
}),
"paging": {
"enabled": true,
"limit": 5,
"size": pagination_size
},
"state": {"enabled": true},
"sorting": {
"enabled": true
columns: [
{
// placeholder, so checkbox will not block child row toggle
title: '',
data: null,
searchable: false,
orderable: false,
defaultContent: ''
},
"toggleSelector": "table tbody span.footable-toggle"
{
title: '',
data: 'chkbox'
},
{
title: 'ID',
data: 'id'
},
{
title: 'Server',
data: 'server_w_port'
},
{
title: lang.encryption,
data: 'enc1'
},
{
title: lang.username,
data: 'user1'
},
{
title: lang.excludes,
data: 'exclude'
},
{
title: lang.interval + " (min)",
data: 'mins_interval'
},
{
title: lang.last_run,
data: 'last_run'
},
{
title: lang.syncjob_last_run_result,
data: 'exit_status'
},
{
title: 'Log',
data: 'log'
},
{
title: lang.active,
data: 'active',
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.status,
data: 'is_running'
},
{
title: lang.action,
data: 'action'
}
]
});
}
function draw_app_passwd_table() {
ft_apppasswd_table = FooTable.init('#app_passwd_table', {
"columns": [
{"name":"chkbox","title":"","style":{"maxWidth":"60px","width":"60px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"},
{"sorted": true,"name":"id","title":"ID","style":{"maxWidth":"60px","width":"60px","text-align":"center"}},
{"name":"name","title":lang.app_name},
{"name":"protocols","title":lang.allowed_protocols},
{"name":"active","filterable": false,"style":{"maxWidth":"70px","width":"70px"},"title":lang.active,"formatter": function(value){return 1==value?'<i class="bi bi-check-lg"></i>':0==value&&'<i class="bi bi-x-lg"></i>';}},
{"name":"action","filterable": false,"sortable": false,"style":{"text-align":"right","min-width":"220px","width":"220px"},"type":"html","title":lang.action,"breakpoints":"xs sm"}
],
"empty": lang.empty,
"rows": $.ajax({
dataType: 'json',
$('#app_passwd_table').DataTable({
processing: true,
serverSide: false,
language: lang_datatables,
ajax: {
type: "GET",
url: '/api/v1/get/app-passwd/all',
jsonp: false,
error: function () {
console.log('Cannot draw app passwd table');
},
success: function (data) {
dataSrc: function(data){
console.log(data);
$.each(data, function (i, item) {
item.name = escapeHtml(item.name)
item.protocols = []
@ -294,37 +340,59 @@ jQuery(function($){
item.chkbox = '<input type="checkbox" disabled />';
}
});
return data;
}
}),
"paging": {
"enabled": true,
"limit": 5,
"size": pagination_size
},
"state": {"enabled": true},
"sorting": {
"enabled": true
columns: [
{
// placeholder, so checkbox will not block child row toggle
title: '',
data: null,
searchable: false,
orderable: false,
defaultContent: ''
},
"toggleSelector": "table tbody span.footable-toggle"
{
title: '',
data: 'chkbox'
},
{
title: 'ID',
data: 'id'
},
{
title: lang.app_name,
data: 'name'
},
{
title: lang.allowed_protocols,
data: 'protocols'
},
{
title: lang.active,
data: 'active',
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.action,
data: 'action'
}
]
});
}
function draw_wl_policy_mailbox_table() {
ft_wl_policy_mailbox_table = FooTable.init('#wl_policy_mailbox_table', {
"columns": [
{"name":"chkbox","title":"","style":{"maxWidth":"40px","width":"40px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"},
{"name":"prefid","style":{"maxWidth":"40px","width":"40px"},"title":"ID","filterable": false,"sortable": false},
{"sorted": true,"name":"value","title":lang.spamfilter_table_rule},
{"name":"object","title":"Scope"}
],
"empty": lang.empty,
"rows": $.ajax({
dataType: 'json',
$('#wl_policy_mailbox_table').DataTable({
processing: true,
serverSide: false,
language: lang_datatables,
ajax: {
type: "GET",
url: '/api/v1/get/policy_wl_mailbox',
jsonp: false,
error: function () {
console.log('Cannot draw mailbox policy wl table');
},
success: function (data) {
dataSrc: function(data){
console.log(data);
$.each(data, function (i, item) {
if (validateEmail(item.object)) {
item.chkbox = '<input type="checkbox" data-id="policy_wl_mailbox" name="multi_select" value="' + item.prefid + '" />';
@ -336,36 +404,48 @@ jQuery(function($){
item.chkbox = '<input type="checkbox" disabled />';
}
});
return data;
}
}),
"state": {"enabled": true},
"paging": {
"enabled": true,
"limit": 5,
"size": pagination_size
},
"sorting": {
"enabled": true
columns: [
{
// placeholder, so checkbox will not block child row toggle
title: '',
data: null,
searchable: false,
orderable: false,
defaultContent: ''
},
{
title: '',
data: 'chkbox'
},
{
title: 'ID',
data: 'prefid'
},
{
title: lang.spamfilter_table_rule,
data: 'name'
},
{
title:'Scope',
data: 'object'
}
]
});
}
function draw_bl_policy_mailbox_table() {
ft_bl_policy_mailbox_table = FooTable.init('#bl_policy_mailbox_table', {
"columns": [
{"name":"chkbox","title":"","style":{"maxWidth":"40px","width":"40px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"},
{"name":"prefid","style":{"maxWidth":"40px","width":"40px"},"title":"ID","filterable": false,"sortable": false},
{"sorted": true,"name":"value","title":lang.spamfilter_table_rule},
{"name":"object","title":"Scope"}
],
"empty": lang.empty,
"rows": $.ajax({
dataType: 'json',
$('#bl_policy_mailbox_table').DataTable({
processing: true,
serverSide: false,
language: lang_datatables,
ajax: {
type: "GET",
url: '/api/v1/get/policy_bl_mailbox',
jsonp: false,
error: function () {
console.log('Cannot draw mailbox policy bl table');
},
success: function (data) {
dataSrc: function(data){
console.log(data);
$.each(data, function (i, item) {
if (validateEmail(item.object)) {
item.chkbox = '<input type="checkbox" data-id="policy_bl_mailbox" name="multi_select" value="' + item.prefid + '" />';
@ -377,31 +457,39 @@ jQuery(function($){
item.chkbox = '<input type="checkbox" disabled />';
}
});
return data;
}
}),
"paging": {
"enabled": true,
"limit": 5,
"size": pagination_size
},
"state": {"enabled": true},
"sorting": {
"enabled": true
columns: [
{
// placeholder, so checkbox will not block child row toggle
title: '',
data: null,
searchable: false,
orderable: false,
defaultContent: ''
},
{
title: '',
data: 'chkbox'
},
{
title: 'ID',
data: 'prefid'
},
{
title: lang.spamfilter_table_rule,
data: 'name'
},
{
title:'Scope',
data: 'object'
}
]
});
}
$('body').on('click', 'span.footable-toggle', function () {
event.stopPropagation();
})
draw_sync_job_table();
draw_app_passwd_table();
draw_tla_table();
draw_wl_policy_mailbox_table();
draw_bl_policy_mailbox_table();
last_logins('get');
// FIDO2 friendly name modal
$('#fido2ChangeFn').on('show.bs.modal', function (e) {
rename_link = $(e.relatedTarget)
@ -433,4 +521,29 @@ jQuery(function($){
$('#userFilterModal').on('hidden.bs.modal', function () {
$('#user_sieve_filter').text(lang.loading);
});
// 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^=SpamAliases]", () => draw_tla_table());
onVisible("[id^=Spamfilter]", () => {
draw_wl_policy_mailbox_table();
draw_bl_policy_mailbox_table();
});
onVisible("[id^=Syncjobs]", () => draw_sync_job_table());
onVisible("[id^=AppPasswds]", () => draw_app_passwd_table());
last_logins('get');
});

View File

@ -1,4 +1,7 @@
<div role="tabpanel" class="tab-pane fade" id="AppPasswds" role="tabpanel" aria-labelledby="AppPasswds">
<div class="card">
<div class="card-header">{{ lang.user.app_passwds }}</div>
<div class="card-body">
<p>{{ lang.user.app_hint|raw }}</p>
<div class="table-responsive">
<table class="table table-striped" id="app_passwd_table"></table>
@ -20,4 +23,6 @@
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -1,4 +1,7 @@
<div role="tabpanel" class="tab-pane fade" id="Pushover" role="tabpanel" aria-labelledby="Pushover">
<div class="card">
<div class="card-header">Pushover API</div>
<div class="card-body">
<form data-id="pushover" class="form well" method="post">
<input type="hidden" value="0" name="evaluate_x_prio">
<input type="hidden" value="0" name="only_x_prio">
@ -75,4 +78,6 @@
</div>
</div>
</form>
</div>
</div>
</div>

View File

@ -1,9 +1,10 @@
<div role="tabpanel" class="tab-pane fade" id="SpamAliases" role="tabpanel" aria-labelledby="SpamAliases">
<div class="card">
<div class="card-header">{{ lang.user.spam_aliases }}</div>
<div class="card-body">
<div class="row">
<div class="col-md-12 col-sm-12 col-12">
<div class="table-responsive">
<table class="table table-striped" id="tla_table"></table>
</div>
<table id="tla_table" class="table table-striped dt-responsive w-100"></table>
</div>
</div>
<div class="mass-actions-user">
@ -36,4 +37,6 @@
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -1,4 +1,7 @@
<div role="tabpanel" class="tab-pane fade" id="Spamfilter" role="tabpanel" aria-labelledby="Spamfilter">
<div class="card">
<div class="card-header">{{ lang.user.spamfilter }}</div>
<div class="card-body">
<h4>{{ lang.user.spamfilter_behavior }}</h4>
<div class="row">
<div class="col-sm-12">
@ -74,4 +77,6 @@
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -1,7 +1,8 @@
<div role="tabpanel" class="tab-pane fade" id="Syncjobs" role="tabpanel" aria-labelledby="Syncjobs">
<div class="table-responsive">
<table class="table table-striped" id="sync_job_table"></table>
</div>
<div class="card">
<div class="card-header">{{ lang.user.sync_jobs }}</div>
<div class="card-body">
<table id="sync_job_table" class="table table-striped dt-responsive w-100"></table>
<div class="mass-actions-user">
<div class="btn-group" data-acl="{{ acl.syncjobs }}">
<div class="btn-group">
@ -19,4 +20,6 @@
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -7,4 +7,5 @@
var pagination_size = '{{ pagination_size }}';
var mailcow_cc_username = '{{ mailcow_cc_username }}';
var user_spam_score = [{{ user_spam_score }}];
var lang_datatables = {{ lang_datatables|raw }};
</script>

View File

@ -88,6 +88,7 @@ elseif (isset($_SESSION['mailcow_cc_role']) && $_SESSION['mailcow_cc_role'] == '
'pushover_data' => $pushover_data,
'lang_user' => json_encode($lang['user']),
'number_of_app_passwords' => $number_of_app_passwords,
'lang_datatables' => json_encode($lang['datatables']),
];
}