mirror of
https://github.com/jokob-sk/NetAlertX.git
synced 2025-12-07 09:36:05 -08:00
GraphQL 0.12 - devices.php use
This commit is contained in:
jokob-sk
@@ -159,6 +159,7 @@
|
||||
var tableColumnHide = [];
|
||||
var tableColumnOrder = [];
|
||||
var tableColumnVisible = [];
|
||||
headersDefaultOrder = [];
|
||||
|
||||
// Read parameters & Initialize components
|
||||
callAfterAppInitialized(main)
|
||||
@@ -171,7 +172,7 @@ function main () {
|
||||
|
||||
//initialize the table headers in the correct order
|
||||
var availableColumns = getSettingOptions("UI_device_columns").split(",");
|
||||
var headersDefaultOrder = availableColumns.map(val => getString(val));
|
||||
headersDefaultOrder = availableColumns.map(val => getString(val));
|
||||
var selectedColumns = JSON.parse(getSetting("UI_device_columns").replace(/'/g, '"'));
|
||||
|
||||
// generate default order lists of given length
|
||||
@@ -197,18 +198,6 @@ function main () {
|
||||
// Concatenate the inputArray with the missingNumbers
|
||||
tableColumnOrder = [...tableColumnVisible, ...missingNumbers];
|
||||
|
||||
// render table headers
|
||||
html = '';
|
||||
|
||||
for(index = 0; index < tableColumnOrder.length; index++)
|
||||
{
|
||||
html += '<th>' + headersDefaultOrder[tableColumnOrder[index]] + '</th>';
|
||||
}
|
||||
|
||||
$('#tableDevices tr').html(html);
|
||||
|
||||
hideUIelements("UI_DEV_SECTIONS")
|
||||
|
||||
// Initialize components with parameters
|
||||
initializeDatatable(getUrlAnchor('my_devices'));
|
||||
|
||||
@@ -376,12 +365,13 @@ function getDeviceStatus(item)
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
function initializeDatatable_new (status) {
|
||||
function initializeDatatable_n (status) {
|
||||
|
||||
console.log(tableColumnVisible);
|
||||
console.log(tableColumnVisible);
|
||||
|
||||
|
||||
// Build GraphQL query dynamically based on tableColumnVisible
|
||||
let requiredColumns = ['devMac', 'devName', 'devIsNew', 'devPresentLastScan', 'devAlertDown', 'devIsArchived']
|
||||
let columnsToFetch = [
|
||||
'devMac', 'devName', 'devLastConnection', 'devIsArchived', 'devOwner', 'devType',
|
||||
'devIcon', 'devFavorite', 'devGroup', 'devFirstConnection', 'devLastIP', 'devNetworkNodeMAC',
|
||||
@@ -391,6 +381,8 @@ let columnsToFetch = [
|
||||
|
||||
let selectedColumns = columnsToFetch.filter(col => tableColumnVisible.includes(col));
|
||||
|
||||
|
||||
|
||||
// Construct the GraphQL query
|
||||
let graphqlQuery = `
|
||||
query {
|
||||
@@ -536,9 +528,10 @@ $.ajax({
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------
|
||||
function initializeDatatable (status) {
|
||||
|
||||
|
||||
if(!status)
|
||||
{
|
||||
status = 'my_devices'
|
||||
@@ -565,6 +558,17 @@ function initializeDatatable (status) {
|
||||
$('#tableDevicesBox')[0].className = 'box box-'+ color;
|
||||
$('#tableDevicesTitle').html (tableTitle);
|
||||
|
||||
// render table headers
|
||||
html = '';
|
||||
|
||||
for(index = 0; index < tableColumnOrder.length; index++)
|
||||
{
|
||||
html += '<th>' + headersDefaultOrder[tableColumnOrder[index]] + '</th>';
|
||||
}
|
||||
|
||||
$('#tableDevices tr').html(html);
|
||||
|
||||
hideUIelements("UI_DEV_SECTIONS")
|
||||
|
||||
for(i = 0; i < tableColumnOrder.length; i++)
|
||||
{
|
||||
@@ -575,268 +579,322 @@ function initializeDatatable (status) {
|
||||
}
|
||||
}
|
||||
|
||||
$.get('api/table_devices.json?nocache=' + Date.now(), function(result) {
|
||||
|
||||
// refresh devices cache
|
||||
devicesListAll_JSON = result["data"]
|
||||
devicesListAll_JSON_str = JSON.stringify(devicesListAll_JSON)
|
||||
setCache('devicesListAll_JSON', devicesListAll_JSON_str)
|
||||
|
||||
// query data
|
||||
getDevicesTotals(result.data);
|
||||
|
||||
// Filter the data based on deviceStatus
|
||||
var filteredData = filterDataByStatus(result.data, deviceStatus);
|
||||
|
||||
// Convert JSON data into the desired format
|
||||
var dataArray = {
|
||||
data: filteredData.map(function(item) {
|
||||
var originalRow = [
|
||||
item.devName || "",
|
||||
item.devOwner || "",
|
||||
item.devType || "",
|
||||
item.devIcon || "",
|
||||
item.devFavorite || "",
|
||||
item.devGroup || "",
|
||||
// ---
|
||||
item.devFirstConnection || "",
|
||||
item.devLastConnection || "",
|
||||
item.devLastIP || "",
|
||||
(isRandomMAC(item.devMac)) || "", // Check if randomized MAC
|
||||
getDeviceStatus(item) || "",
|
||||
item.devMac || "", // hidden
|
||||
formatIPlong(item.devLastIP) || "", // IP orderable
|
||||
item.rowid || "",
|
||||
item.devParentMAC || "",
|
||||
getNumberOfChildren(item.devMac, result.data) || 0,
|
||||
item.devLocation || "",
|
||||
item.devVendor || "",
|
||||
item.devParentPort || 0,
|
||||
item.devGUID || "",
|
||||
item.devSyncHubNode || "",
|
||||
item.devSite || "",
|
||||
item.devSSID || "",
|
||||
item.devSourcePlugin || ""
|
||||
];
|
||||
|
||||
var newRow = [];
|
||||
|
||||
// reorder data based on user-defined columns order
|
||||
for (index = 0; index < tableColumnOrder.length; index++) {
|
||||
newRow.push(originalRow[tableColumnOrder[index]]);
|
||||
}
|
||||
|
||||
return newRow;
|
||||
})
|
||||
};
|
||||
|
||||
// Check if the DataTable already exists
|
||||
if ($.fn.dataTable.isDataTable('#tableDevices')) {
|
||||
// The DataTable exists, so destroy it
|
||||
var table = $('#tableDevices').DataTable();
|
||||
table.clear().destroy();
|
||||
}
|
||||
|
||||
var table =
|
||||
$('#tableDevices').DataTable({
|
||||
'data' : dataArray["data"],
|
||||
'paging' : true,
|
||||
'lengthChange' : true,
|
||||
'lengthMenu' : [[10, 25, 50, 100, 500, 100000], [10, 25, 50, 100, 500, getString('Device_Tablelenght_all')]],
|
||||
'searching' : true,
|
||||
|
||||
'ordering' : true,
|
||||
'info' : true,
|
||||
'autoWidth' : false,
|
||||
|
||||
// Parameters
|
||||
'pageLength' : tableRows,
|
||||
'order' : tableOrder,
|
||||
'select' : true, // Enable selection
|
||||
|
||||
'columnDefs' : [
|
||||
{visible: false, targets: tableColumnHide },
|
||||
{className: 'text-center', targets: [mapIndx(3), mapIndx(4), mapIndx(9), mapIndx(10), mapIndx(15), mapIndx(18)] },
|
||||
{width: '80px', targets: [mapIndx(6), mapIndx(7), mapIndx(15)] },
|
||||
{width: '30px', targets: [mapIndx(10), mapIndx(13), mapIndx(18)] },
|
||||
{orderData: [mapIndx(12)], targets: mapIndx(8) },
|
||||
|
||||
// Device Name
|
||||
{targets: [mapIndx(0)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
|
||||
// console.log(cellData)
|
||||
$(td).html ('<b class="anonymizeDev"><a href="deviceDetails.php?mac='+ rowData[mapIndx(11)] +'" class="">'+ cellData +'</a></b>');
|
||||
} },
|
||||
|
||||
// Connected Devices
|
||||
{targets: [mapIndx(15)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
// check if this is a network device
|
||||
if(getSetting("NETWORK_DEVICE_TYPES").includes(`'${rowData[mapIndx(2)]}'`) )
|
||||
{
|
||||
$(td).html ('<b><a href="./network.php?mac='+ rowData[mapIndx(11)] +'" class="">'+ cellData +'</a></b>');
|
||||
}
|
||||
else
|
||||
{
|
||||
$(td).html (`<i class="fa-solid fa-xmark" title="${getString("Device_Table_Not_Network_Device")}"></i>`)
|
||||
}
|
||||
|
||||
} },
|
||||
|
||||
// Icon
|
||||
{targets: [mapIndx(3)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
if (!emptyArr.includes(cellData)){
|
||||
$(td).html (atob(cellData));
|
||||
} else {
|
||||
$(td).html ('');
|
||||
}
|
||||
} },
|
||||
|
||||
// Full MAC
|
||||
{targets: [mapIndx(11)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
if (!emptyArr.includes(cellData)){
|
||||
$(td).html ('<span class="anonymizeMac">'+cellData+'</span>');
|
||||
} else {
|
||||
$(td).html ('');
|
||||
}
|
||||
} },
|
||||
|
||||
// IP address
|
||||
{targets: [mapIndx(8)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
if (!emptyArr.includes(cellData)){
|
||||
$(td).html (`<span class="anonymizeIp">
|
||||
<a href="http://${cellData}" class="pointer" target="_blank">
|
||||
${cellData}
|
||||
</a>
|
||||
<a href="https://${cellData}" class="pointer" target="_blank">
|
||||
<i class="fa fa-lock "></i>
|
||||
</a>
|
||||
<span>`);
|
||||
} else {
|
||||
$(td).html ('');
|
||||
}
|
||||
}
|
||||
},
|
||||
// IP address (ordeable)
|
||||
{targets: [mapIndx(12)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
if (!emptyArr.includes(cellData)){
|
||||
$(td).html (`<span class="anonymizeIp">${cellData}<span>`);
|
||||
} else {
|
||||
$(td).html ('');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Favorite
|
||||
{targets: [mapIndx(4)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
if (cellData == 1){
|
||||
$(td).html ('<i class="fa fa-star text-yellow" style="font-size:16px"></i>');
|
||||
} else {
|
||||
$(td).html ('');
|
||||
}
|
||||
} },
|
||||
|
||||
// Dates
|
||||
{targets: [mapIndx(6), mapIndx(7)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
var result = cellData.toString(); // Convert to string
|
||||
if (result.includes("+")) { // Check if timezone offset is present
|
||||
result = result.split('+')[0]; // Remove timezone offset
|
||||
}
|
||||
$(td).html (translateHTMLcodes (result));
|
||||
} },
|
||||
|
||||
// Random MAC
|
||||
{targets: [mapIndx(9)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
// console.log(cellData)
|
||||
if (cellData == 1){
|
||||
$(td).html ('<i data-toggle="tooltip" data-placement="right" title="Random MAC" style="font-size: 16px;" class="text-yellow glyphicon glyphicon-random"></i>');
|
||||
} else {
|
||||
$(td).html ('');
|
||||
}
|
||||
} },
|
||||
|
||||
// Status color
|
||||
{targets: [mapIndx(10)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
|
||||
devData = getDeviceDataByMac(rowData[mapIndx(11)])
|
||||
|
||||
if (devData.devPresentLastScan == 1)
|
||||
{
|
||||
css = "green text-white statusOnline"
|
||||
icon = '<i class="fa-solid fa-plug"></i>'
|
||||
} else if (devData.devPresentLastScan != 1 && devData.devAlertDown == 1)
|
||||
{
|
||||
css = "red text-white statusDown"
|
||||
icon = '<i class="fa-solid fa-triangle-exclamation"></i>'
|
||||
} else if(devData.devPresentLastScan != 1)
|
||||
{
|
||||
css = "gray text-white statusOffline"
|
||||
icon = '<i class="fa-solid fa-xmark"></i>'
|
||||
} else
|
||||
{
|
||||
css = "gray text-white statusUnknown"
|
||||
icon = '<i class="fa-solid fa-question"></i>'
|
||||
}
|
||||
|
||||
$(td).html (`<a href="deviceDetails.php?mac=${rowData[mapIndx(11)]}" class="badge bg-${css}">${icon} ${cellData.replace('-', '')}</a>`);
|
||||
} },
|
||||
],
|
||||
|
||||
// Processing
|
||||
'processing' : true,
|
||||
'language' : {
|
||||
processing: '<table> <td width="130px" align="middle">Loading...</td><td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td> </table>',
|
||||
emptyTable: 'No data',
|
||||
"lengthMenu": "<?= lang('Device_Tablelenght');?>",
|
||||
"search": "<?= lang('Device_Searchbox');?>: ",
|
||||
"paginate": {
|
||||
"next": "<?= lang('Device_Table_nav_next');?>",
|
||||
"previous": "<?= lang('Device_Table_nav_prev');?>"
|
||||
},
|
||||
"info": "<?= lang('Device_Table_info');?>",
|
||||
// Construct the GraphQL query
|
||||
let graphqlQuery = `
|
||||
query {
|
||||
devices {
|
||||
rowid
|
||||
devMac
|
||||
devName
|
||||
devOwner
|
||||
devType
|
||||
devVendor
|
||||
devFavorite
|
||||
devGroup
|
||||
devComments
|
||||
devFirstConnection
|
||||
devLastConnection
|
||||
devLastIP
|
||||
devStaticIP
|
||||
devScan
|
||||
devLogEvents
|
||||
devAlertEvents
|
||||
devAlertDown
|
||||
devSkipRepeated
|
||||
devLastNotification
|
||||
devPresentLastScan
|
||||
devIsNew
|
||||
devLocation
|
||||
devIsArchived
|
||||
devParentMAC
|
||||
devParentPort
|
||||
devIcon
|
||||
devGUID
|
||||
devSite
|
||||
devSSID
|
||||
devSyncHubNode
|
||||
devSourcePlugin
|
||||
}
|
||||
}
|
||||
});
|
||||
`;
|
||||
|
||||
// Save cookie Rows displayed, and Parameters rows & order
|
||||
$('#tableDevices').on( 'length.dt', function ( e, settings, len ) {
|
||||
setCookie ("nax_parTableRows", len, 129600); // save for 90 days
|
||||
} );
|
||||
console.log(graphqlQuery);
|
||||
|
||||
|
||||
$.ajax({
|
||||
url: 'php/server/query_graphql.php', // PHP endpoint that proxies to the GraphQL server
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({
|
||||
query: graphqlQuery,
|
||||
variables: {} // Optional: pass variables if needed
|
||||
}),
|
||||
success: function(result) {
|
||||
|
||||
// refresh devices cache
|
||||
devicesListAll_JSON = result["devices"];
|
||||
console.log(devicesListAll_JSON);
|
||||
|
||||
$('#tableDevices').on( 'order.dt', function () {
|
||||
setCookie ("nax_parTableOrder", JSON.stringify (table.order()), 129600); // save for 90 days
|
||||
} );
|
||||
|
||||
// add multi-edit button
|
||||
$('#multiEditPlc').append(
|
||||
`<button type="submit" id="multiEdit" class="btn btn-primary" style="display:none" onclick="multiEditDevices();">
|
||||
<i class="fa fa-pencil pointer" ></i> ${getString("Device_MultiEdit")}
|
||||
</button>`)
|
||||
|
||||
// Event listener for row selection in DataTable
|
||||
$('#tableDevices').on('click', 'tr', function (e) {
|
||||
setTimeout(function(){
|
||||
// Check if any row is selected
|
||||
var anyRowSelected = $('#tableDevices tr.selected').length > 0;
|
||||
|
||||
// Toggle visibility of element with ID 'multiEdit'
|
||||
$('#multiEdit').toggle(anyRowSelected);
|
||||
}, 200);
|
||||
|
||||
devicesListAll_JSON_str = JSON.stringify(devicesListAll_JSON)
|
||||
setCache('devicesListAll_JSON', devicesListAll_JSON_str)
|
||||
|
||||
});
|
||||
// query data
|
||||
getDevicesTotals(result.devices);
|
||||
|
||||
// Filter the data based on deviceStatus
|
||||
var filteredData = filterDataByStatus(result.devices, deviceStatus);
|
||||
|
||||
hideSpinner();
|
||||
// Convert JSON data into the desired format
|
||||
var dataArray = {
|
||||
data: filteredData.map(function(item) {
|
||||
var originalRow = [
|
||||
item.devName || "",
|
||||
item.devOwner || "",
|
||||
item.devType || "",
|
||||
item.devIcon || "",
|
||||
item.devFavorite || "",
|
||||
item.devGroup || "",
|
||||
item.devFirstConnection || "",
|
||||
item.devLastConnection || "",
|
||||
item.devLastIP || "",
|
||||
(isRandomMAC(item.devMac)) || "", // Check if randomized MAC
|
||||
getDeviceStatus(item) || "",
|
||||
item.devMac || "", // hidden
|
||||
formatIPlong(item.devLastIP) || "", // IP orderable
|
||||
item.rowid || "",
|
||||
item.devParentMAC || "",
|
||||
getNumberOfChildren(item.devMac, result.devices) || 0,
|
||||
item.devLocation || "",
|
||||
item.devVendor || "",
|
||||
item.devParentPort || 0,
|
||||
item.devGUID || "",
|
||||
item.devSyncHubNode || "",
|
||||
item.devSite || "",
|
||||
item.devSSID || "",
|
||||
item.devSourcePlugin || ""
|
||||
];
|
||||
|
||||
});
|
||||
var newRow = [];
|
||||
|
||||
// reorder data based on user-defined columns order
|
||||
for (index = 0; index < tableColumnOrder.length; index++) {
|
||||
newRow.push(originalRow[tableColumnOrder[index]]);
|
||||
}
|
||||
|
||||
return newRow;
|
||||
})
|
||||
};
|
||||
|
||||
// Check if the DataTable already exists
|
||||
if ($.fn.dataTable.isDataTable('#tableDevices')) {
|
||||
// The DataTable exists, so destroy it
|
||||
var table = $('#tableDevices').DataTable();
|
||||
table.clear().destroy();
|
||||
}
|
||||
|
||||
var table =
|
||||
$('#tableDevices').DataTable({
|
||||
'data' : dataArray["data"],
|
||||
'paging' : true,
|
||||
'lengthChange' : true,
|
||||
'lengthMenu' : [[10, 25, 50, 100, 500, 100000], [10, 25, 50, 100, 500, getString('Device_Tablelenght_all')]],
|
||||
'searching' : true,
|
||||
|
||||
'ordering' : true,
|
||||
'info' : true,
|
||||
'autoWidth' : false,
|
||||
|
||||
// Parameters
|
||||
'pageLength' : tableRows,
|
||||
'order' : tableOrder,
|
||||
'select' : true, // Enable selection
|
||||
|
||||
'columnDefs' : [
|
||||
{visible: false, targets: tableColumnHide },
|
||||
{className: 'text-center', targets: [mapIndx(3), mapIndx(4), mapIndx(9), mapIndx(10), mapIndx(15), mapIndx(18)] },
|
||||
{width: '80px', targets: [mapIndx(6), mapIndx(7), mapIndx(15)] },
|
||||
{width: '30px', targets: [mapIndx(10), mapIndx(13), mapIndx(18)] },
|
||||
{orderData: [mapIndx(12)], targets: mapIndx(8) },
|
||||
|
||||
// Device Name
|
||||
{targets: [mapIndx(0)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
|
||||
// console.log(cellData)
|
||||
$(td).html ('<b class="anonymizeDev"><a href="deviceDetails.php?mac='+ rowData[mapIndx(11)] +'" class="">'+ cellData +'</a></b>');
|
||||
} },
|
||||
|
||||
// Connected Devices
|
||||
{targets: [mapIndx(15)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
// check if this is a network device
|
||||
if(getSetting("NETWORK_DEVICE_TYPES").includes(`'${rowData[mapIndx(2)]}'`) )
|
||||
{
|
||||
$(td).html ('<b><a href="./network.php?mac='+ rowData[mapIndx(11)] +'" class="">'+ cellData +'</a></b>');
|
||||
}
|
||||
else
|
||||
{
|
||||
$(td).html (`<i class="fa-solid fa-xmark" title="${getString("Device_Table_Not_Network_Device")}"></i>`)
|
||||
}
|
||||
|
||||
} },
|
||||
|
||||
// Icon
|
||||
{targets: [mapIndx(3)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
if (!emptyArr.includes(cellData)){
|
||||
$(td).html (atob(cellData));
|
||||
} else {
|
||||
$(td).html ('');
|
||||
}
|
||||
} },
|
||||
|
||||
// Full MAC
|
||||
{targets: [mapIndx(11)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
if (!emptyArr.includes(cellData)){
|
||||
$(td).html ('<span class="anonymizeMac">'+cellData+'</span>');
|
||||
} else {
|
||||
$(td).html ('');
|
||||
}
|
||||
} },
|
||||
|
||||
// IP address
|
||||
{targets: [mapIndx(8)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
if (!emptyArr.includes(cellData)){
|
||||
$(td).html (`<span class="anonymizeIp">
|
||||
<a href="http://${cellData}" class="pointer" target="_blank">
|
||||
${cellData}
|
||||
</a>
|
||||
<a href="https://${cellData}" class="pointer" target="_blank">
|
||||
<i class="fa fa-lock "></i>
|
||||
</a>
|
||||
<span>`);
|
||||
} else {
|
||||
$(td).html ('');
|
||||
}
|
||||
}
|
||||
},
|
||||
// IP address (ordeable)
|
||||
{targets: [mapIndx(12)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
if (!emptyArr.includes(cellData)){
|
||||
$(td).html (`<span class="anonymizeIp">${cellData}<span>`);
|
||||
} else {
|
||||
$(td).html ('');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Favorite
|
||||
{targets: [mapIndx(4)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
if (cellData == 1){
|
||||
$(td).html ('<i class="fa fa-star text-yellow" style="font-size:16px"></i>');
|
||||
} else {
|
||||
$(td).html ('');
|
||||
}
|
||||
} },
|
||||
|
||||
// Dates
|
||||
{targets: [mapIndx(6), mapIndx(7)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
var result = cellData.toString(); // Convert to string
|
||||
if (result.includes("+")) { // Check if timezone offset is present
|
||||
result = result.split('+')[0]; // Remove timezone offset
|
||||
}
|
||||
$(td).html (translateHTMLcodes (result));
|
||||
} },
|
||||
|
||||
// Random MAC
|
||||
{targets: [mapIndx(9)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
// console.log(cellData)
|
||||
if (cellData == 1){
|
||||
$(td).html ('<i data-toggle="tooltip" data-placement="right" title="Random MAC" style="font-size: 16px;" class="text-yellow glyphicon glyphicon-random"></i>');
|
||||
} else {
|
||||
$(td).html ('');
|
||||
}
|
||||
} },
|
||||
|
||||
// Status color
|
||||
{targets: [mapIndx(10)],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
|
||||
devData = getDeviceDataByMac(rowData[mapIndx(11)])
|
||||
|
||||
if (devData.devPresentLastScan == 1)
|
||||
{
|
||||
css = "green text-white statusOnline"
|
||||
icon = '<i class="fa-solid fa-plug"></i>'
|
||||
} else if (devData.devPresentLastScan != 1 && devData.devAlertDown == 1)
|
||||
{
|
||||
css = "red text-white statusDown"
|
||||
icon = '<i class="fa-solid fa-triangle-exclamation"></i>'
|
||||
} else if(devData.devPresentLastScan != 1)
|
||||
{
|
||||
css = "gray text-white statusOffline"
|
||||
icon = '<i class="fa-solid fa-xmark"></i>'
|
||||
} else
|
||||
{
|
||||
css = "gray text-white statusUnknown"
|
||||
icon = '<i class="fa-solid fa-question"></i>'
|
||||
}
|
||||
|
||||
$(td).html (`<a href="deviceDetails.php?mac=${rowData[mapIndx(11)]}" class="badge bg-${css}">${icon} ${cellData.replace('-', '')}</a>`);
|
||||
} },
|
||||
],
|
||||
|
||||
// Processing
|
||||
'processing' : true,
|
||||
'language' : {
|
||||
processing: '<table> <td width="130px" align="middle">Loading...</td><td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td> </table>',
|
||||
emptyTable: 'No data',
|
||||
"lengthMenu": "<?= lang('Device_Tablelenght');?>",
|
||||
"search": "<?= lang('Device_Searchbox');?>: ",
|
||||
"paginate": {
|
||||
"next": "<?= lang('Device_Table_nav_next');?>",
|
||||
"previous": "<?= lang('Device_Table_nav_prev');?>"
|
||||
},
|
||||
"info": "<?= lang('Device_Table_info');?>",
|
||||
}
|
||||
});
|
||||
|
||||
// Save cookie Rows displayed, and Parameters rows & order
|
||||
$('#tableDevices').on( 'length.dt', function ( e, settings, len ) {
|
||||
setCookie ("nax_parTableRows", len, 129600); // save for 90 days
|
||||
} );
|
||||
|
||||
$('#tableDevices').on( 'order.dt', function () {
|
||||
setCookie ("nax_parTableOrder", JSON.stringify (table.order()), 129600); // save for 90 days
|
||||
} );
|
||||
|
||||
// add multi-edit button
|
||||
$('#multiEditPlc').append(
|
||||
`<button type="submit" id="multiEdit" class="btn btn-primary" style="display:none" onclick="multiEditDevices();">
|
||||
<i class="fa fa-pencil pointer" ></i> ${getString("Device_MultiEdit")}
|
||||
</button>`)
|
||||
|
||||
// Event listener for row selection in DataTable
|
||||
$('#tableDevices').on('click', 'tr', function (e) {
|
||||
setTimeout(function(){
|
||||
// Check if any row is selected
|
||||
var anyRowSelected = $('#tableDevices tr.selected').length > 0;
|
||||
|
||||
// Toggle visibility of element with ID 'multiEdit'
|
||||
$('#multiEdit').toggle(anyRowSelected);
|
||||
}, 200);
|
||||
|
||||
|
||||
});
|
||||
|
||||
hideSpinner();
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user