Device Icons 0.3

front/deviceDetails.php

@@ -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>
@@ -901,6 +902,7 @@ function initializeCombos () {
   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 
+  // Ask overwrite icon types 
-  showModalWarning ('<?php echo lang('DevDetail_button_DeleteEvents');?>', '<?php echo lang('DevDetail_button_DeleteEvents_Warning');?>',
+  showModalWarning ('<?php echo lang('DevDetail_button_OverwriteIcons');?>', '<?php echo lang('DevDetail_button_OverwriteIcons_Warning');?>',
-    '<?php echo lang('Gen_Cancel');?>', '<?php echo lang('Gen_Delete');?>', 'deleteDeviceEvents');
+    '<?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);

front/devices.php

@@ -154,6 +154,7 @@
                   <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_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 },
+      {visible:   false,         targets: tableColumnHide },      
-      {className: 'text-center', targets: [3, 8, 9] },
+      {className: 'text-center', targets: [3, 4, 9, 10] },      
-      {width:     '80px',        targets: [5, 6] },
+      {width:     '80px',        targets: [6, 7] },      
-      {width:     '0px',         targets: 9 },
+      {width:     '30px',        targets: [10, 13] },      
-      {orderData: [11],          targets: 7 },
+      {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
+  // 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(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() // 
 

front/network.php

@@ -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 = "";
@@ -47,10 +47,15 @@
           $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,6 +300,7 @@
                               'online'                  => $row['online'],
                               'node_type'               => $row['node_type'],
                               'parent_mac'              => $row['parent_mac'],
+                              'node_icon'               => $row['node_icon'],
                               'node_ports_count'        => $row['node_ports_count']);
     }
 
@@ -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

front/php/server/devices.php

@@ -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;
     }
@@ -607,6 +609,7 @@ function getDevicesList() {
     $tableData['data'][] = array ($row['dev_Name'],
                                   $row['dev_Owner'],
                                   $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
 //------------------------------------------------------------------------------

front/php/templates/language/en_us.php

@@ -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_OverwriteIcons' => 'Overwrite Icons',
-'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_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',