Device Icons 0.3

This commit is contained in:
Jokob-sk
2023-01-16 21:18:35 +11:00
parent 7675ebc7d3
commit 8ef6f420e4
5 changed files with 163 additions and 43 deletions

View File

@@ -151,7 +151,7 @@
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" id="txtName" type="text" value="--">
<span class="input-group-addon"><i class="fa fa-pencil drp-edit" onclick="editDrp('txtName');"></i></span>
<span class="input-group-addon"><i class="fa fa-pencil pointer" onclick="editDrp('txtName');"></i></span>
</div>
</div>
</div>
@@ -162,7 +162,7 @@
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" id="txtOwner" type="text" value="--">
<span class="input-group-addon"><i class="fa fa-pencil drp-edit" onclick="editDrp('txtOwner');"></i></span>
<span class="input-group-addon"><i class="fa fa-pencil pointer" onclick="editDrp('txtOwner');"></i></span>
<div class="input-group-btn">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="fa fa-caret-down "></span></button>
@@ -179,7 +179,7 @@
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" id="txtDeviceType" type="text" value="--">
<span class="input-group-addon"><i class="fa fa-pencil drp-edit" onclick="editDrp('txtDeviceType');"></i></span>
<span class="input-group-addon"><i class="fa fa-pencil pointer" onclick="editDrp('txtDeviceType');"></i></span>
<div class="input-group-btn">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false" >
<span class="fa fa-caret-down"></span></button>
@@ -200,7 +200,8 @@
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" title="<?php echo lang('DevDetail_Icon_Descr');?>" id="txtIcon" type="text" value="--">
<span class="input-group-addon"><i class="fa fa-pencil drp-edit" onclick="editDrp('txtIcon');"></i></span>
<span class="input-group-addon" title='<?php echo lang('DevDetail_button_OverwriteIcons_Tooltip');?>'><i class="fa fa-copy pointer" onclick="askOverwriteIconType();"></i></span>
<span class="input-group-addon"><i class="fa fa-pencil pointer" onclick="editDrp('txtIcon');"></i></span>
<div class="input-group-btn">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="fa fa-caret-down"></span>
@@ -234,7 +235,7 @@
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" id="txtGroup" type="text" value="--">
<span class="input-group-addon"><i class="fa fa-pencil drp-edit" onclick="editDrp('txtGroup');"></i></span>
<span class="input-group-addon"><i class="fa fa-pencil pointer" onclick="editDrp('txtGroup');"></i></span>
<div class="input-group-btn">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="fa fa-caret-down"></span>
@@ -252,7 +253,7 @@
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" id="txtLocation" type="text" value="--">
<span class="input-group-addon"><i class="fa fa-pencil drp-edit" onclick="editDrp('txtLocation');"></i></span>
<span class="input-group-addon"><i class="fa fa-pencil pointer" onclick="editDrp('txtLocation');"></i></span>
<div class="input-group-btn">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="fa fa-caret-down"></span></button>
@@ -330,7 +331,7 @@
<div class="input-group">
<input class="form-control" id="txtNetworkNodeMac" type="text" value="--">
<span class="input-group-addon"><i title="<?php echo lang('DevDetail_GoToNetworkNode');?>" class="fa fa-square-up-right drp-edit" onclick="goToNetworkNode('txtNetworkNodeMac');"></i></span>
<span class="input-group-addon"><i title="<?php echo lang('DevDetail_GoToNetworkNode');?>" class="fa fa-square-up-right pointer" onclick="goToNetworkNode('txtNetworkNodeMac');"></i></span>
<div class="input-group-btn">
<button type="button" class="btn btn-info dropdown-toggle" data-mynodemac="" data-toggle="dropdown" aria-expanded="false" id="buttonNetworkNodeMac">
<span class="fa fa-caret-down"></span></button>
@@ -896,11 +897,12 @@ function initializeiCheck () {
// -----------------------------------------------------------------------------
function initializeCombos () {
// Initialize combos with queries
initializeCombo ( '#dropdownOwner', 'getOwners', 'txtOwner', true);
initializeCombo ( '#dropdownDeviceType', 'getDeviceTypes', 'txtDeviceType', true);
initializeCombo ( '#dropdownGroup', 'getGroups', 'txtGroup', true);
initializeCombo ( '#dropdownLocation', 'getLocations', 'txtLocation', true);
initializeCombo ( '#dropdownNetworkNodeMac', 'getNetworkNodes', 'txtNetworkNodeMac', false);
initializeCombo ( '#dropdownOwner', 'getOwners', 'txtOwner', true);
initializeCombo ( '#dropdownDeviceType', 'getDeviceTypes', 'txtDeviceType', true);
initializeCombo ( '#dropdownGroup', 'getGroups', 'txtGroup', true);
initializeCombo ( '#dropdownLocation', 'getLocations', 'txtLocation', true);
initializeCombo ( '#dropdownNetworkNodeMac', 'getNetworkNodes', 'txtNetworkNodeMac', false);
initializeCombo ( '#dropdownIcon', 'getIcons', 'txtIcon', false);
// Initialize static combos
initializeComboSkipRepeated ();
@@ -948,7 +950,6 @@ function initializeCombo (dropdownId, queryAction, txtDataField, useCache) {
}
}
// -----------------------------------------------------------------------------
// Edit dropdown value
function editDrp(dropdownId)
{
@@ -1553,26 +1554,29 @@ function skipNotifications () {
}
// -----------------------------------------------------------------------------
function askDeleteDeviceEvents () {
// Overwrite all devices of the same type with the currently selected icon
function askOverwriteIconType () {
// Check MAC
if (mac == '') {
return;
}
// Ask delete device Events
showModalWarning ('<?php echo lang('DevDetail_button_DeleteEvents');?>', '<?php echo lang('DevDetail_button_DeleteEvents_Warning');?>',
'<?php echo lang('Gen_Cancel');?>', '<?php echo lang('Gen_Delete');?>', 'deleteDeviceEvents');
// Ask overwrite icon types
showModalWarning ('<?php echo lang('DevDetail_button_OverwriteIcons');?>', '<?php echo lang('DevDetail_button_OverwriteIcons_Warning');?>',
'<?php echo lang('Gen_Cancel');?>', '<?php echo lang('Gen_Okay');?>', 'overwriteIconType');
}
// -----------------------------------------------------------------------------
function deleteDeviceEvents () {
function overwriteIconType () {
// Check MAC
if (mac == '') {
return;
}
var icon = $('#txtIcon').val();
// Delete device events
$.get('php/server/devices.php?action=deleteDeviceEvents&mac='+ mac, function(msg) {
$.get('php/server/devices.php?action=overwriteIconType&mac='+ mac + '&icon=' + icon, function(msg) {
showMessage (msg);
});
@@ -1593,6 +1597,34 @@ function askDeleteDevice () {
}
// -----------------------------------------------------------------------------
function deleteDevice () {
// Check MAC
if (mac == '') {
return;
}
// Delete device
$.get('php/server/devices.php?action=deleteDevice&mac='+ mac, function(msg) {
showMessage (msg);
});
// Deactivate controls
$('#panDetails :input').attr('disabled', true);
}
// -----------------------------------------------------------------------------
function askDeleteDevice () {
// Check MAC
if (mac == '') {
return;
}
// Ask delete device
showModalWarning ('Delete Device', 'Are you sure you want to delete this device?<br>(maybe you prefer to archive it)',
'<?php echo lang('Gen_Cancel');?>', '<?php echo lang('Gen_Delete');?>', 'deleteDevice');
}
// -----------------------------------------------------------------------------
function deleteDevice () {
// Check MAC
@@ -1644,11 +1676,12 @@ $(document).on('input', 'input:text', function() {
});
// -----------------------------------------------------------------------------
// Initialize a text input with the correct value
function setTextValue (textElement, textValue) {
if(textElement == "txtNetworkNodeMac")
{
$('#'+textElement).attr ('data-mynodemac', textValue);
$('#'+textElement).val (getDevicesListValue('mac', textValue ,'name') ); //here
$('#'+textElement).val (getDevicesListValue('mac', textValue ,'name') );
} else
{
$('#'+textElement).attr ('data-myvalue', textValue);

View File

@@ -153,7 +153,8 @@
<tr>
<th><?php echo lang('Device_TableHead_Name');?></th>
<th><?php echo lang('Device_TableHead_Owner');?></th>
<th><?php echo lang('Device_TableHead_Type');?></th>
<th><?php echo lang('Device_TableHead_Type');?></th>
<th><?php echo lang('Device_TableHead_Icon');?></th>
<th><?php echo lang('Device_TableHead_Favorite');?></th>
<th><?php echo lang('Device_TableHead_Group');?></th>
<th><?php echo lang('Device_TableHead_FirstSession');?></th>
@@ -164,6 +165,7 @@
<th><?php echo lang('Device_TableHead_MAC');?></th>
<th><?php echo lang('Device_TableHead_LastIPOrder');?></th>
<th><?php echo lang('Device_TableHead_Rowid');?></th>
</tr>
</thead>
</table>
@@ -244,9 +246,11 @@ function main () {
function initializeDatatable () {
// If the device has a small width (mobile) only show name, ip, and status columns.
if (window.screen.width < 400) {
var tableColumnShow = [10,11,12,1,2,3,4,5,6,8];
// var tableColumnHide = [10,11,12,1,2,3,4,5,6,8];
var tableColumnHide = [11,12,13,1,2,4,5,6,7,9];
} else {
var tableColumnShow = [10, 11, 12];
// var tableColumnHide = [10, 11, 12];
var tableColumnHide = [11, 12, 13];
};
var table=
$('#tableDevices').DataTable({
@@ -265,20 +269,30 @@ function initializeDatatable () {
// 'order' : [[3,'desc'], [0,'asc']],
'columnDefs' : [
{visible: false, targets: tableColumnShow },
{className: 'text-center', targets: [3, 8, 9] },
{width: '80px', targets: [5, 6] },
{width: '0px', targets: 9 },
{orderData: [11], targets: 7 },
{visible: false, targets: tableColumnHide },
{className: 'text-center', targets: [3, 4, 9, 10] },
{width: '80px', targets: [6, 7] },
{width: '30px', targets: [10, 13] },
{orderData: [11], targets: 8 },
// Device Name
{targets: [0],
'createdCell': function (td, cellData, rowData, row, col) {
$(td).html ('<b><a href="deviceDetails.php?mac='+ rowData[10] +'" class="">'+ cellData +'</a></b>');
$(td).html ('<b><a href="deviceDetails.php?mac='+ rowData[11] +'" class="">'+ cellData +'</a></b>');
} },
// Favorite
// Icon
{targets: [3],
'createdCell': function (td, cellData, rowData, row, col) {
if (!emptyArr.includes(cellData)){
$(td).html ('<i class="fa fa-'+cellData+' " style="font-size:16px"></i>');
} else {
$(td).html ('');
}
} },
// Favorite
// {targets: [3],
{targets: [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>');
@@ -288,13 +302,15 @@ function initializeDatatable () {
} },
// Dates
{targets: [5, 6],
// {targets: [5, 6],
{targets: [6, 7],
'createdCell': function (td, cellData, rowData, row, col) {
$(td).html (translateHTMLcodes (cellData));
} },
// Random MAC
{targets: [8],
// {targets: [8],
{targets: [9],
'createdCell': function (td, cellData, rowData, row, col) {
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>');
@@ -304,7 +320,8 @@ function initializeDatatable () {
} },
// Status color
{targets: [9],
// {targets: [9],
{targets: [10],
'createdCell': function (td, cellData, rowData, row, col) {
switch (cellData) {
case 'Down': color='red'; break;
@@ -355,8 +372,10 @@ function initializeDatatable () {
// Gets a JSON list of rowID and mac from the displayed table in the UI
function getDevicesFromTable(table)
{
rowIDs = table.column(12, { 'search': 'applied' }).data().toArray() // rowID is in hidden column 12
rowMACs = table.column(10, { 'search': 'applied' }).data().toArray() // MAC is in hidden column 10
// rowIDs = table.column(12, { 'search': 'applied' }).data().toArray() // rowID is in hidden column 12
rowIDs = table.column(13, { 'search': 'applied' }).data().toArray() // rowID is in hidden column 12
// rowMACs = table.column(10, { 'search': 'applied' }).data().toArray() // MAC is in hidden column 10
rowMACs = table.column(11, { 'search': 'applied' }).data().toArray() // MAC is in hidden column 10
rowNames = table.column(0, { 'search': 'applied' }).data().toArray() //
rowTypes = table.column(2, { 'search': 'applied' }).data().toArray() //

View File

@@ -29,7 +29,7 @@
<?php
// Create top-level node (network devices) tabs
function createDeviceTabs($node_mac, $node_name, $node_status, $node_type, $node_ports_count, $activetab) {
function createDeviceTabs($node_mac, $node_name, $node_status, $node_type, $node_ports_count, $icon, $activetab) {
// prepare string with port number in brackets if available
$str_port = "";
@@ -46,11 +46,16 @@
{
$node_badge = circle_offline;
}
if($icon != '')
{
$icon = '<i class="fa fa-'.$icon.'"></i> ';
}
$idFromMac = str_replace(":", "_", $node_mac);
$str_tab_header = '<li class="'.$activetab.'">
<a href="#'.$idFromMac.'" id="'.$idFromMac.'_id" data-toggle="tab" >' // _id is added so it doesn't conflict with AdminLTE tab behavior
.$node_name.' ' .$str_port.$node_badge.
.$icon.$node_name.' ' .$str_port.$node_badge.
'</a>
</li>';
@@ -262,14 +267,15 @@
// \
// PC (leaf)
$sql = "SELECT node_name, node_mac, online, node_type, node_ports_count, parent_mac
$sql = "SELECT node_name, node_mac, online, node_type, node_ports_count, parent_mac, node_icon
FROM
(
SELECT a.dev_Name as node_name,
a.dev_MAC as node_mac,
a.dev_PresentLastScan as online,
a.dev_DeviceType as node_type,
a.dev_Network_Node_MAC_ADDR as parent_mac
a.dev_Network_Node_MAC_ADDR as parent_mac,
a.dev_Icon as node_icon
FROM Devices a
WHERE a.dev_DeviceType in ('AP', 'Gateway', 'Powerline', 'Switch', 'WLAN', 'PLC', 'Router','USB LAN Adapter', 'USB WIFI Adapter', 'Internet')
) t1
@@ -294,7 +300,8 @@
'online' => $row['online'],
'node_type' => $row['node_type'],
'parent_mac' => $row['parent_mac'],
'node_ports_count' => $row['node_ports_count']);
'node_icon' => $row['node_icon'],
'node_ports_count' => $row['node_ports_count']);
}
// Control no rows
@@ -312,6 +319,7 @@
$row['online'],
$row['node_type'],
$row['node_ports_count'],
$row['node_icon'],
$activetab);
$activetab = ""; // reset active tab indicator, only the first tab is active

View File

@@ -59,6 +59,8 @@
case 'getNmap': getNmap(); break;
case 'saveNmapPort': saveNmapPort(); break;
case 'updateNetworkLeaf': updateNetworkLeaf(); break;
case 'overwriteIconType': overwriteIconType(); break;
case 'getIcons': getIcons(); break;
default: logServerConsole ('Action: '. $action); break;
}
@@ -606,7 +608,8 @@ function getDevicesList() {
while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
$tableData['data'][] = array ($row['dev_Name'],
$row['dev_Owner'],
$row['dev_DeviceType'],
$row['dev_DeviceType'],
$row['dev_Icon'],
$row['dev_Favorite'],
$row['dev_Group'],
formatDate ($row['dev_FirstConnection']),
@@ -617,6 +620,7 @@ function getDevicesList() {
$row['dev_MAC'], // MAC (hidden)
formatIPlong ($row['dev_LastIP']), // IP orderable
$row['rowid'] // Rowid (hidden)
);
}
@@ -718,6 +722,32 @@ function getNetworkNodes() {
echo (json_encode ($tableData));
}
//------------------------------------------------------------------------------
function getIcons() {
global $db;
// Device Data
$sql = 'select dev_Icon from Devices group by dev_Icon';
$result = $db->query($sql);
// arrays of rows
$tableData = array();
while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
// Push row data
$tableData[] = array('id' => $row['dev_Icon'],
'name' => '<i class="fa fa-'.$row['dev_Icon'].'"></i> - '.$row['dev_Icon'] );
}
// Control no rows
if (empty($tableData)) {
$tableData = [];
}
// Return json
echo (json_encode ($tableData));
}
//------------------------------------------------------------------------------
// Query the List of types
@@ -1019,6 +1049,33 @@ function updateNetworkLeaf()
}
// ----------------------------------------------------------------------------------------
function overwriteIconType()
{
$mac = $_REQUEST['mac'];
$icon = $_REQUEST['icon'];
if ((false === filter_var($mac , FILTER_VALIDATE_MAC) && $mac != "Internet" && $mac != "") ) {
throw new Exception('Invalid mac address');
}
else
{
global $db;
// sql
$sql = 'UPDATE Devices SET "dev_Icon" = "'. $icon .'" where dev_DeviceType in (select dev_DeviceType from Devices where dev_MAC = "' . $mac.'")' ;
// update Data
$result = $db->query($sql);
// check result
if ($result == TRUE) {
echo 'OK';
} else {
echo 'KO';
}
}
}
//------------------------------------------------------------------------------
// Status Where conditions
//------------------------------------------------------------------------------

View File

@@ -64,6 +64,8 @@ $lang['en_us'] = array(
'Device_TableHead_Name' => 'Name',
'Device_TableHead_Owner' => 'Owner',
'Device_TableHead_Type' => 'Type',
'Device_TableHead_Icon' => 'Icon',
'Device_TableHead_RowID' => 'Row ID',
'Device_TableHead_Favorite' => 'Favorite',
'Device_TableHead_Group' => 'Group',
'Device_TableHead_FirstSession' => 'First Session',
@@ -197,8 +199,9 @@ $lang['en_us'] = array(
'DevDetail_button_DeleteEvents_Warning' => 'Are you sure you want to delete all Events of this device?<br><br>(this will clear the <b>Events history</b> and the <b>Sessions</b> and might help with constant (persistent) notifications)',
'DevDetail_button_Reset' => 'Reset Changes',
'DevDetail_button_Save' => 'Save',
'DevDetail_button_DeleteEvents' => 'Delete Events',
'DevDetail_button_DeleteEvents_Warning' => 'Are you sure you want to delete all Events of this device?<br><br>(this will clear the <b>Events history</b> and the <b>Sessions</b> and might help with constant (persistent) notifications)',
'DevDetail_button_OverwriteIcons' => 'Overwrite Icons',
'DevDetail_button_OverwriteIcons_Tooltip' => 'Overwrite icons of all devices with the same type',
'DevDetail_button_OverwriteIcons_Warning' => 'Are you sure you want to overwrite all icons of all devices with the same device type as the current device type?',
'DevDetail_SessionTable_Order' => 'Order',
'DevDetail_SessionTable_Connection' => 'Connection',
'DevDetail_SessionTable_Disconnection' => 'Disconnection',