Devices Columns 0.2

front/deviceDetails.php

@@ -1755,7 +1755,7 @@ function loadNmap()
                           <td>\
                             <div class="input-group">\
                               <input class="form-control" id="port_'+item.Index+'" type="text" value="'+item.Extra+'">\
-                              <span class="input-group-addon"><i class="fa fa-save " onclick="saveNmapPort('+item.Index+')"></i></span>\
+                              <span class="input-group-addon"><i class="fa fa-save pointer" onclick="saveNmapPort('+item.Index+')"></i></span>\
                             </div>\
                           </td>\
                         </tr>';

front/devices.php

@@ -237,6 +237,9 @@ function main () {
       $.get('php/server/parameters.php?action=get&defaultValue=[[3,"desc"],[0,"asc"]]&parameter='+ parTableOrder, function(data) {
         var result = JSON.parse(data);
         result = JSON.parse(result);
+
+        
+
         if (Array.isArray (result) ) {
           tableOrder = result;
         }
@@ -253,9 +256,16 @@ function main () {
 }
 
 // -----------------------------------------------------------------------------
+var tableColumnHide = [];
+
+function mapIndx(oldIndex)
+{
+  newIndex = oldIndex;
+  return newIndex;
+}
+
+
 function initializeDatatable () {
-  //
-  var tableColumnHide = [];
   for(i = 0; i < tableColumnAll.length; i++)
   {    
     // hide this coolumn if not in the tableColumnShow variable
@@ -292,19 +302,19 @@ function initializeDatatable () {
 
     'columnDefs'   : [
       {visible:   false,         targets: tableColumnHide },      
-      {className: 'text-center', targets: [3, 4, 9, 10] },      
+      {className: 'text-center', targets: [mapIndx(3), mapIndx(4), mapIndx(9), mapIndx(10)] },      
-      {width:     '80px',        targets: [6, 7] },      
+      {width:     '80px',        targets: [mapIndx(6), mapIndx(7)] },      
-      {width:     '30px',        targets: [10, 13] },      
+      {width:     '30px',        targets: [mapIndx(10), mapIndx(13)] },      
-      {orderData: [11],          targets: 8 },
+      {orderData: [mapIndx(11)],          targets: mapIndx(8) },
 
       // Device Name
-      {targets: [0],
+      {targets: [mapIndx(0)],
         'createdCell': function (td, cellData, rowData, row, col) {
             $(td).html ('<b><a href="deviceDetails.php?mac='+ rowData[11] +'" class="">'+ cellData +'</a></b>');
       } },
 
       // Icon      
-      {targets: [3],
+      {targets: [mapIndx(3)],
         'createdCell': function (td, cellData, rowData, row, col) {
           if (!emptyArr.includes(cellData)){
             $(td).html ('<i class="fa fa-'+cellData+' " style="font-size:16px"></i>');
@@ -314,7 +324,7 @@ function initializeDatatable () {
       } },
       // Favorite
       // {targets: [3],
-      {targets: [4],
+      {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>');
@@ -325,14 +335,14 @@ function initializeDatatable () {
         
       // Dates
       // {targets: [5, 6],
-      {targets: [6, 7],
+      {targets: [mapIndx(6), mapIndx(7)],
         'createdCell': function (td, cellData, rowData, row, col) {
           $(td).html (translateHTMLcodes (cellData));
       } },
 
       // Random MAC
       // {targets: [8],
-      {targets: [9],
+      {targets: [mapIndx(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>');
@@ -343,7 +353,7 @@ function initializeDatatable () {
 
       // Status color
       // {targets: [9],
-      {targets: [10],
+      {targets: [mapIndx(10)],
         'createdCell': function (td, cellData, rowData, row, col) {
           switch (cellData) {
             case 'Down':      color='red';              break;
@@ -395,11 +405,11 @@ function initializeDatatable () {
 function getDevicesFromTable(table)
 {
   // 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
+  rowIDs = table.column(mapIndx(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
+  rowMACs = table.column(mapIndx(11), { 'search': 'applied' }).data().toArray() // MAC is in hidden column 10
-  rowNames = table.column(0, { 'search': 'applied' }).data().toArray() // 
+  rowNames = table.column(mapIndx(0), { 'search': 'applied' }).data().toArray() // 
-  rowTypes = table.column(2, { 'search': 'applied' }).data().toArray() // 
+  rowTypes = table.column(mapIndx(2), { 'search': 'applied' }).data().toArray() // 
 
   result = []
 

front/js/helper_objects.js

@@ -0,0 +1 @@
+var deviceColumns = {'Icon':4, 'Owner':5}

front/maintenance.php

@@ -253,7 +253,8 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
                     <div class="db_info_table_row">
                         <div class="db_tools_table_cell_a">
                           <div class="form-group" > 
-                          <select id="columnsSelect" class="form-control select2 select2-hidden-accessible" multiple=""  onchange="saveSelectedColumns()" style="width: 100%;"  tabindex="-1" aria-hidden="true">
+                            <div class="input-group" > 
+                              <select id="columnsSelect" class="form-control select2 select2-hidden-accessible" multiple=""   style="width: 100%;"  tabindex="-1" aria-hidden="true">
                                 <option value="0"><?php echo lang('Device_TableHead_Name');?></option>
                                 <option value="1"><?php echo lang('Device_TableHead_Owner');?></option>
                                 <option value="2"><?php echo lang('Device_TableHead_Type');?></option>
@@ -269,10 +270,12 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
                                 <option value="12"><?php echo lang('Device_TableHead_LastIPOrder');?></option>
                                 <option value="13"><?php echo lang('Device_TableHead_Rowid');?></option>
                               </select>
-                          
+                              <span class="input-group-addon"><i title="<?php echo lang('DevDetail_GoToNetworkNode');?>" class="fa fa-save  pointer" onclick="saveSelectedColumns();"></i></span>   
                             </div>
                           </div>
 
+                        </div>
+                        
                         <div class="db_tools_table_cell_b"><?php echo lang('Maintenance_Tool_displayed_columns_text');?></div>
                     </div>  
                     
@@ -509,6 +512,8 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
 <!-- ----------------------------------------------------------------------- -->
 
 
+
+
 <script>
 
 var emptyArr = ['undefined', "", undefined, null];
@@ -752,10 +757,12 @@ function scrollDown()
 }
 
 // --------------------------------------------------------
-//  $.get('php/server/parameters.php?action=set&parameter=Front_Dark_Mode_Enabled&expireMinutes=525600&value='+ darkModeEnabled,
+// Manage displayed columns
+// --------------------------------------------------------
+
 function saveSelectedColumns () { 
   $.get('php/server/parameters.php?action=set&expireMinutes=525600&value=['+ $('#columnsSelect').val().toString() +']&parameter=Front_Devices_Columns', function(data) {
-
+      showMessage(data)
   });
 }
 
@@ -763,36 +770,44 @@ function saveSelectedColumns () {
 function initializeSelectedColumns () { 
   $.get('php/server/parameters.php?action=get&expireMinutes=525600&defaultValue=[0,1,2,3,4,5,6,7,8,9,10,12,13]&parameter=Front_Devices_Columns', function(data) {
 
-    // console.log(data);
-
     tableColumnShow = numberArrayFromString(data);
 
-    // console.log(tableColumnShow);
-    
-
     for(i=0; i < tableColumnShow.length; i++)
     {
-      // console.log(tableColumnShow)
-
-      // $("#columnsSelect").select2('data', {id: '1049', text: 'MyLabel'});
-
       // create the option and append to Select2
       var option = new Option($('#columnsSelect option[value='+tableColumnShow[i]+']').html(), tableColumnShow[i] , true, true);
+      
       $("#columnsSelect").append(option).trigger('change');
 
-      // // manually trigger the `select2:select` event
+      $(option).attr('eee','eee')
-      // $("#columnsSelect").trigger({
-      //     type: 'select2:select',
-      //     params: {
-      //         data: data
-      //     }
-      // });
-      
-      // $('#'+columnsSelect+' option[value='+tableColumnShow[i]+']').html()
     }
     
   });
 } 
+
+// --------------------------------------------------------
+//Initialize Select2 Elements and make them sortable
+
+$(function () {    
+    selectEl = $('.select2').select2();
+   
+    selectEl.next().children().children().children().sortable({
+      containment: 'parent', stop: function (event, ui) {
+        ui.item.parent().children('[title]').each(function () {
+          var title = $(this).attr('title');
+          var original = $( 'option:contains(' + title + ')', selectEl ).first();
+          original.detach();
+          selectEl.append(original)
+        });
+        selectEl.change();
+      }
+    });
+});
+
+
+
+// --------------------------------------------------------
+// General initialization
 // --------------------------------------------------------
 function initializeTabs () {  
 
@@ -866,14 +881,9 @@ window.onload = function asyncFooter()
 
 <link rel="stylesheet" href="lib/AdminLTE/bower_components/select2/dist/css/select2.min.css">
 <script src="lib/AdminLTE/bower_components/select2/dist/js/select2.full.min.js"></script>
+<script src="lib/AdminLTE/bower_components/jquery-ui/jquery-ui.min.js"></script>
 
 
-<script>
-$(function () {
-    //Initialize Select2 Elements   
-    $('.select2').select2();
-});
-</script>
 
 <!-- ----------------------------------------------------------------------- -->
 <script src="js/pialert_common.js"></script>

front/php/server/devices.php

@@ -569,6 +569,51 @@ function getDevicesTotals() {
 function getDevicesList() {
   global $db;
 
+
+  $columnOrderMapping = array(
+    array("dev_Name", 0, -1),               //  2
+    array("dev_Owner", 1, -1),              //    5
+    array("dev_DeviceType", 2, -1),         //    6  
+    array("dev_Icon", 3, -1),               //  0
+    array("dev_Favorite", 4, -1),           //    7
+    array("dev_Group", 5, -1),              //    8
+    array("dev_FirstConnection", 6, -1),    //    9
+    array("dev_LastConnection", 7, -1),     //    10
+    array("dev_LastIP", 8, -1),             //  4
+    array("dev_MAC", 9, -1),                //    11
+    array("dev_Status", 10, -1),            //  1
+    array("dev_MAC_full", 11, -1),          //  3
+    array("dev_LastIP_orderable", 12, -1),  //    12
+    array("rowid", 13, -1)                  //    13
+  );
+
+  // get device columns order
+  $sql = 'SELECT par_Value FROM Parameters  where par_ID = "Front_Devices_Columns"';
+  $result = $db->query($sql);
+  $row = $result -> fetchArray (SQLITE3_NUM);  
+
+  if($row != NULL && count($row) == 1)
+  {
+    $displayedColumns = createArray($row[0]);
+
+    // init ordered columns
+    $index = 0;
+    foreach ($displayedColumns as $columnIndex) {     
+      
+      $columnOrderMapping[$columnIndex][2] = $index;
+
+      $index = $index + 1;
+    }
+
+    foreach ($columnOrderMapping as $mapping) {
+      if($mapping[2] == -1)
+      {
+        $mapping[2] = $index;
+        $index = $index + 1;
+      }
+    }
+  } 
+
   // SQL
   $condition = getDeviceCondition ($_REQUEST['status']);
 
@@ -581,9 +626,12 @@ function getDevicesList() {
           FROM Devices '. $condition;
   $result = $db->query($sql);
 
+
+
   // arrays of rows
   $tableData = array();
   while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
+
     $tableData['data'][] = array ($row['dev_Name'],
                                   $row['dev_Owner'],
                                   $row['dev_DeviceType'],