Docs + Device list rework v0.2 🔨

This commit is contained in:
Jokob-sk
2023-10-12 21:45:05 +11:00
parent d433d8e956
commit f87ea210c7
2 changed files with 248 additions and 273 deletions

View File

@@ -42,7 +42,7 @@
<!-- top small box 1 ------------------------------------------------------- -->
<div class="row">
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('all');">
<a href="#" onclick="javascript: initializeDatatable('all');">
<div class="small-box bg-aqua">
<div class="inner"><h3 id="devicesAll"> -- </h3>
<p class="infobox_label"><?= lang('Device_Shortcut_AllDevices');?></p>
@@ -54,7 +54,7 @@
<!-- top small box 2 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('connected');">
<a href="#" onclick="javascript: initializeDatatable('connected');">
<div class="small-box bg-green">
<div class="inner"><h3 id="devicesConnected"> -- </h3>
<p class="infobox_label"><?= lang('Device_Shortcut_Connected');?></p>
@@ -66,7 +66,7 @@
<!-- top small box 3 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('favorites');">
<a href="#" onclick="javascript: initializeDatatable('favorites');">
<div class="small-box bg-yellow">
<div class="inner"><h3 id="devicesFavorites"> -- </h3>
<p class="infobox_label"><?= lang('Device_Shortcut_Favorites');?></p>
@@ -78,7 +78,7 @@
<!-- top small box 4 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('new');">
<a href="#" onclick="javascript: initializeDatatable('new');">
<div class="small-box bg-yellow">
<div class="inner"><h3 id="devicesNew"> -- </h3>
<p class="infobox_label"><?= lang('Device_Shortcut_NewDevices');?></p>
@@ -90,7 +90,7 @@
<!-- top small box 5 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('down');">
<a href="#" onclick="javascript: initializeDatatable('down');">
<div class="small-box bg-red">
<div class="inner"><h3 id="devicesDown"> -- </h3>
<p class="infobox_label"><?= lang('Device_Shortcut_DownAlerts');?></p>
@@ -102,7 +102,7 @@
<!-- top small box 6 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('archived');">
<a href="#" onclick="javascript: initializeDatatable('archived');">
<div class="small-box bg-gray top_small_box_gray_text">
<div class="inner"><h3 id="devicesArchived"> -- </h3>
<p class="infobox_label"><?= lang('Device_Shortcut_Archived');?></p>
@@ -236,24 +236,24 @@ function main () {
//initialize the table headers in the correct order
var headersDefaultOrder = [ '<?= lang('Device_TableHead_Name');?>',
'<?= lang('Device_TableHead_Owner');?>',
'<?= lang('Device_TableHead_Type');?>',
'<?= lang('Device_TableHead_Icon');?>',
'<?= lang('Device_TableHead_Favorite');?>',
'<?= lang('Device_TableHead_Group');?>',
'<?= lang('Device_TableHead_FirstSession');?>',
'<?= lang('Device_TableHead_LastSession');?>',
'<?= lang('Device_TableHead_LastIP');?>',
'<?= lang('Device_TableHead_MAC');?>',
'<?= lang('Device_TableHead_Status');?>',
'<?= lang('Device_TableHead_MAC_full');?>',
'<?= lang('Device_TableHead_LastIPOrder');?>',
'<?= lang('Device_TableHead_Rowid');?>',
'<?= lang('Device_TableHead_Parent_MAC');?>',
'<?= lang('Device_TableHead_Connected_Devices');?>',
'<?= lang('Device_TableHead_Location');?>',
'<?= lang('Device_TableHead_Vendor');?>'
var headersDefaultOrder = [ getString('Device_TableHead_Name'),
getString('Device_TableHead_Owner'),
getString('Device_TableHead_Type'),
getString('Device_TableHead_Icon'),
getString('Device_TableHead_Favorite'),
getString('Device_TableHead_Group'),
getString('Device_TableHead_FirstSession'),
getString('Device_TableHead_LastSession'),
getString('Device_TableHead_LastIP'),
getString('Device_TableHead_MAC'),
getString('Device_TableHead_Status'),
getString('Device_TableHead_MAC_full'),
getString('Device_TableHead_LastIPOrder'),
getString('Device_TableHead_Rowid'),
getString('Device_TableHead_Parent_MAC'),
getString('Device_TableHead_Connected_Devices'),
getString('Device_TableHead_Location'),
getString('Device_TableHead_Vendor')
];
html = '';
@@ -291,7 +291,6 @@ function main () {
// query data
getDevicesTotals();
getDevicesList (deviceStatus);
});
});
});
@@ -313,9 +312,53 @@ function mapIndx(oldIndex)
}
}
// -----------------------------------------------------------------------------
// Define a function to filter data based on deviceStatus
function filterDataByStatus(data, status) {
return data.filter(function(item) {
switch (status) {
case 'all':
return true; // Include all items for 'all' status
case 'connected':
return item.dev_PresentLastScan === 1;
case 'favorites':
return item.dev_Favorite === 1;
case 'new':
return item.dev_NewDevice === 1;
case 'down':
return item.dev_PresentLastScan === 0 && item.dev_AlertDeviceDown === 1;
case 'archived':
return item.dev_Archived === 1;
default:
return true; // Include all items for unknown statuses
}
});
}
// -----------------------------------------------------------------------------
function initializeDatatable () {
function initializeDatatable (status) {
// Save status selected
deviceStatus = status;
// Define color & title for the status selected
switch (deviceStatus) {
case 'all': tableTitle = getString('Device_Shortcut_AllDevices'); color = 'aqua'; break;
case 'connected': tableTitle = getString('Device_Shortcut_Connected'); color = 'green'; break;
case 'favorites': tableTitle = getString('Device_Shortcut_Favorites'); color = 'yellow'; break;
case 'new': tableTitle = getString('Device_Shortcut_NewDevices'); color = 'yellow'; break;
case 'down': tableTitle = getString('Device_Shortcut_DownAlerts'); color = 'red'; break;
case 'archived': tableTitle = getString('Device_Shortcut_Archived'); color = 'gray'; break;
default: tableTitle = getString('Device_Shortcut_Devices'); color = 'gray'; break;
}
// Set title and color
$('#tableDevicesTitle')[0].className = 'box-title text-'+ color;
$('#tableDevicesBox')[0].className = 'box box-'+ color;
$('#tableDevicesTitle').html (tableTitle);
for(i = 0; i < tableColumnOrder.length; i++)
{
// hide this column if not in the tableColumnVisible variable (we need to keep the MAC address (index 11) for functionality reasons)
@@ -325,51 +368,59 @@ function initializeDatatable () {
}
}
console.log(tableColumnOrder)
console.log(tableColumnVisible)
console.log(tableColumnHide)
$.get('api/table_devices.json', function(result) {
// var list = data["data"];
// Filter the data based on deviceStatus
var filteredData = filterDataByStatus(result.data, deviceStatus);
// Convert JSON data into the desired format
var dataArray = {
data: result.data.map(function(item) {
data: filteredData.map(function(item) {
return [
item.dev_Icon || "",
item.dev_Name || "",
item.dev_Status || "",
item.dev_MAC || "",
item.dev_LastIP || "",
item.dev_Group || "",
item.dev_Owner || "",
item.dev_DeviceType || "",
item.dev_StaticIP || 0,
item.dev_Icon || "",
item.dev_Favorite || "",
item.dev_Group || "",
item.dev_FirstConnection || "",
item.dev_LastConnection || "",
item.dev_NewDevice || 0,
item.dev_MAC_full || "",
item.dev_LastIP || "",
item.dev_MAC || "", // TODO handle internet node mac
"status",
item.dev_MAC || "", // hidden
item.dev_StaticIP || 0,
item.dev_LastIP || "", // IP orderable
item.rowid || "",
item.dev_Network_Node_MAC_ADDR || "",
item.connected_devices || 0,
item.dev_Network_Node_MAC_ADDR || "",
item.dev_Network_Node_port || 0,
item.dev_Network_Node_MAC_ADDR || "",
item.dev_Location || "",
item.dev_Vendor || "",
item.dev_Network_Node_port || ""
item.dev_Network_Node_port || 0
];
})
};
console.log("aaaaa")
console.log(JSON.stringify(dataArray))
console.log(dataArray)
console.log()
// TODO Filter
// TODO displayed columns
// TODO columns order
// 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, -1], [10, 25, 50, 100, 500, '<?= lang('Device_Tablelenght_all');?>']],
'lengthMenu' : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, getString('Device_Tablelenght_all')]],
'searching' : true,
'ordering' : true,
@@ -379,7 +430,6 @@ function initializeDatatable () {
// Parameters
'pageLength' : tableRows,
'order' : tableOrder,
// 'order' : [[3,'desc'], [0,'asc']],
'columnDefs' : [
{visible: false, targets: tableColumnHide },
@@ -461,6 +511,8 @@ function initializeDatatable () {
// Status color
{targets: [mapIndx(10)],
'createdCell': function (td, cellData, rowData, row, col) {
console.log(cellData)
switch (cellData) {
case 'Down': color='red'; break;
case 'New': color='yellow'; break;
@@ -470,7 +522,7 @@ function initializeDatatable () {
default: color='aqua'; break;
};
$(td).html ('<a href="deviceDetails.php?mac='+ rowData[mapIndx(11)] +'" class="badge bg-'+ color +'">'+ cellData.replace('-', '') +'</a>');
// $(td).html ('<a href="deviceDetails.php?mac='+ rowData[mapIndx(11)] +'" class="badge bg-'+ color +'">'+ cellData.replace('-', '') +'</a>');
} },
],
@@ -505,8 +557,6 @@ function initializeDatatable () {
});
};
@@ -560,82 +610,6 @@ function getDevicesTotals () {
}
// -----------------------------------------------------------------------------
function getDevicesList (status) {
// Save status selected
deviceStatus = status;
// Define color & title for the status selected
switch (deviceStatus) {
case 'all': tableTitle = '<?= lang('Device_Shortcut_AllDevices');?>'; color = 'aqua'; break;
case 'connected': tableTitle = '<?= lang('Device_Shortcut_Connected');?>'; color = 'green'; break;
case 'favorites': tableTitle = '<?= lang('Device_Shortcut_Favorites');?>'; color = 'yellow'; break;
case 'new': tableTitle = '<?= lang('Device_Shortcut_NewDevices');?>'; color = 'yellow'; break;
case 'down': tableTitle = '<?= lang('Device_Shortcut_DownAlerts');?>'; color = 'red'; break;
case 'archived': tableTitle = '<?= lang('Device_Shortcut_Archived');?>'; color = 'gray'; break;
default: tableTitle = '<?= lang('Device_Shortcut_Devices');?>'; color = 'gray'; break;
}
// Set title and color
$('#tableDevicesTitle')[0].className = 'box-title text-'+ color;
$('#tableDevicesBox')[0].className = 'box box-'+ color;
$('#tableDevicesTitle').html (tableTitle);
$.get('api/table_devices.json', function(result_1) {
// var list = data["data"];
// Convert JSON data into the desired format
var dataArray = {
data: result_1.data.map(function(item) {
return [
item.dev_Icon || "",
item.dev_Name || "",
item.dev_Status || "",
item.dev_MAC || "",
item.dev_LastIP || "",
item.dev_Group || "",
item.dev_DeviceType || "",
item.dev_StaticIP || 0,
item.dev_Favorite || "",
item.dev_FirstConnection || "",
item.dev_LastConnection || "",
item.dev_NewDevice || 0,
item.dev_MAC_full || "",
item.connected_devices || 0,
item.dev_Network_Node_MAC_ADDR || "",
item.dev_Network_Node_port || 0,
item.dev_Network_Node_MAC_ADDR || "",
item.dev_Vendor || "",
item.dev_Network_Node_port || ""
];
})
};
console.log("aaaaa")
console.log(JSON.stringify(dataArray))
console.log(dataArray)
console.log(dataArray["data"])
// console.log(result_2)
// $('#tableDevices').DataTable();
// TODO Filter
// TODO displayed columns
// TODO columns order
// Initialize DataTable with your data
// $('#tableDevices').DataTable(dataArray);
});
// Define new datasource URL and reload
// $('#tableDevices').DataTable().ajax.url(
// 'php/server/devices.php?action=getDevicesList&status=' + deviceStatus
// ).load();
};
function handleLoadingDialog()
{
$.get('api/app_state.json?nocache=' + Date.now(), function(appState) {

View File

@@ -23,11 +23,12 @@ vendorsPath9 = '/usr/share/arp-scan/ieee-iab.txt'
#===============================================================================
# SQL queries
#===============================================================================
sql_devices_all = """select dev_MAC, dev_Name, dev_DeviceType, dev_Vendor, dev_Group,
dev_FirstConnection, dev_LastConnection, dev_LastIP, dev_StaticIP,
dev_PresentLastScan, dev_LastNotification, dev_NewDevice,
dev_Network_Node_MAC_ADDR, dev_Network_Node_port,
dev_Icon from Devices"""
# sql_devices_all = """select dev_MAC, dev_Name, dev_DeviceType, dev_Vendor, dev_Group,
# dev_FirstConnection, dev_LastConnection, dev_LastIP, dev_StaticIP,
# dev_PresentLastScan, dev_LastNotification, dev_NewDevice,
# dev_Network_Node_MAC_ADDR, dev_Network_Node_port,
# dev_Icon from Devices"""
sql_devices_all = """select rowid, * from Devices"""
sql_devices_stats = """SELECT Online_Devices as online, Down_Devices as down, All_Devices as 'all', Archived_Devices as archived,
(select count(*) from Devices a where dev_NewDevice = 1 ) as new,
(select count(*) from Devices a where dev_Name = '(unknown)' or dev_Name = '(name not found)' ) as unknown