[BS5] Replace FooTable with jquery Datatables
This commit is contained in:
parent
8a86fa491e
commit
f13530d8a1
@ -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() {
|
||||
|
@ -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');
|
||||
});
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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']),
|
||||
];
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user