mirror of
https://github.com/jokob-sk/NetAlertX.git
synced 2025-12-07 09:36:05 -08:00
refactor, tab async loading on focus
This commit is contained in:
@@ -24,77 +24,126 @@
|
||||
|
||||
<script>
|
||||
|
||||
var parSessionsRows = 'Front_Details_Sessions_Rows';
|
||||
|
||||
|
||||
function initializeSessionsDatatable (sessionsRows) {
|
||||
// Sessions datatable
|
||||
$('#tableSessions').DataTable({
|
||||
'paging' : true,
|
||||
'lengthChange': true,
|
||||
'lengthMenu' : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'All']],
|
||||
'searching' : true,
|
||||
'ordering' : true,
|
||||
'info' : true,
|
||||
'autoWidth' : false,
|
||||
'order' : [[0,'desc'], [1,'desc']],
|
||||
|
||||
// Parameters
|
||||
'pageLength' : sessionsRows,
|
||||
|
||||
'columnDefs' : [
|
||||
{visible: false, targets: [0]},
|
||||
|
||||
// Replace HTML codes
|
||||
{targets: [3,5],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
$(td).html (translateHTMLcodes (cellData));
|
||||
} },
|
||||
// Date
|
||||
{targets: [1,2],
|
||||
"createdCell": function (td, cellData, rowData, row, col) {
|
||||
// console.log(cellData);
|
||||
|
||||
if (!cellData.includes("missing event") && !cellData.includes("..."))
|
||||
{
|
||||
if (cellData.includes("+")) { // Check if timezone offset is present
|
||||
cellData = cellData.split('+')[0]; // Remove timezone offset
|
||||
}
|
||||
// console.log(cellData);
|
||||
result = localizeTimestamp(cellData);
|
||||
} else
|
||||
{
|
||||
result = translateHTMLcodes(cellData)
|
||||
}
|
||||
|
||||
$(td).html (result);
|
||||
} }
|
||||
],
|
||||
|
||||
// Processing
|
||||
'processing' : true,
|
||||
'language' : {
|
||||
processing: '<table><td width="130px" align="middle"><?= lang("DevDetail_Loading");?></td>'+
|
||||
'<td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw">'+
|
||||
'</td></table>',
|
||||
emptyTable: 'No data',
|
||||
"lengthMenu": "<?= lang('Events_Tablelenght');?>",
|
||||
"search": "<?= lang('Events_Searchbox');?>: ",
|
||||
"paginate": {
|
||||
"next": "<?= lang('Events_Table_nav_next');?>",
|
||||
"previous": "<?= lang('Events_Table_nav_prev');?>"
|
||||
},
|
||||
"info": "<?= lang('Events_Table_info');?>",
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// -----------------------------------------------
|
||||
// INIT with polling for panel element visibility
|
||||
// -----------------------------------------------
|
||||
|
||||
// -----------------------------------------------------------
|
||||
// Init datatable
|
||||
function loadSessionsData(period){
|
||||
const table = $('#tableSessions').DataTable();
|
||||
|
||||
showSpinner();
|
||||
|
||||
// table.clear().draw(); // Clear existing data before reloading
|
||||
|
||||
table.ajax
|
||||
.url('php/server/events.php?action=getDeviceSessions&mac=' + getMac() + '&period=' + period)
|
||||
.load(function () {
|
||||
hideSpinner();
|
||||
});
|
||||
}
|
||||
|
||||
var sessionsPageInitialized = false;
|
||||
|
||||
// -----------------------------------------------------------
|
||||
// Main init function
|
||||
function initDeviceSessionsPage()
|
||||
{
|
||||
// Only proceed if .plugin-content is visible
|
||||
if (!$('#panSessions:visible').length) {
|
||||
return; // exit early if nothing is visible
|
||||
}
|
||||
|
||||
// init page once
|
||||
if (sessionsPageInitialized) return;
|
||||
sessionsPageInitialized = true;
|
||||
|
||||
showSpinner();
|
||||
|
||||
var sessionsRows = 10;
|
||||
var period = '1 month';
|
||||
|
||||
function initializeSessionsDatatable () {
|
||||
// Sessions datatable
|
||||
$('#tableSessions').DataTable({
|
||||
'paging' : true,
|
||||
'lengthChange': true,
|
||||
'lengthMenu' : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'All']],
|
||||
'searching' : true,
|
||||
'ordering' : true,
|
||||
'info' : true,
|
||||
'autoWidth' : false,
|
||||
'order' : [[0,'desc'], [1,'desc']],
|
||||
initializeSessionsDatatable(sessionsRows);
|
||||
loadSessionsData(period);
|
||||
}
|
||||
|
||||
// Parameters
|
||||
'pageLength' : sessionsRows,
|
||||
// -----------------------------------------------------------------------------
|
||||
// Recurring function to monitor the URL and reinitialize if needed
|
||||
function deviceSessionsPageUpdater() {
|
||||
initDeviceSessionsPage();
|
||||
|
||||
'columnDefs' : [
|
||||
{visible: false, targets: [0]},
|
||||
// Run updater again after delay
|
||||
setTimeout(deviceSessionsPageUpdater, 200);
|
||||
}
|
||||
|
||||
// Replace HTML codes
|
||||
{targets: [3,5],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
$(td).html (translateHTMLcodes (cellData));
|
||||
} },
|
||||
// Date
|
||||
{targets: [1,2],
|
||||
"createdCell": function (td, cellData, rowData, row, col) {
|
||||
// console.log(cellData);
|
||||
|
||||
if (!cellData.includes("missing event") && !cellData.includes("..."))
|
||||
{
|
||||
if (cellData.includes("+")) { // Check if timezone offset is present
|
||||
cellData = cellData.split('+')[0]; // Remove timezone offset
|
||||
}
|
||||
// console.log(cellData);
|
||||
result = localizeTimestamp(cellData);
|
||||
} else
|
||||
{
|
||||
result = translateHTMLcodes(cellData)
|
||||
}
|
||||
|
||||
$(td).html (result);
|
||||
} }
|
||||
],
|
||||
|
||||
// Processing
|
||||
'processing' : true,
|
||||
'language' : {
|
||||
processing: '<table><td width="130px" align="middle"><?= lang("DevDetail_Loading");?></td>'+
|
||||
'<td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw">'+
|
||||
'</td></table>',
|
||||
emptyTable: 'No data',
|
||||
"lengthMenu": "<?= lang('Events_Tablelenght');?>",
|
||||
"search": "<?= lang('Events_Searchbox');?>: ",
|
||||
"paginate": {
|
||||
"next": "<?= lang('Events_Table_nav_next');?>",
|
||||
"previous": "<?= lang('Events_Table_nav_prev');?>"
|
||||
},
|
||||
"info": "<?= lang('Events_Table_info');?>",
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadSessionsData(){
|
||||
$('#tableSessions').DataTable().ajax.url('php/server/events.php?action=getDeviceSessions&mac=' + getMac() +'&period='+ period).load();
|
||||
}
|
||||
|
||||
initializeSessionsDatatable();
|
||||
loadSessionsData();
|
||||
// start updater
|
||||
deviceSessionsPageUpdater();
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user