Devices Columns 0.1

front/css/pialert.css

@@ -723,4 +723,17 @@ height: 50px;
 .pointer
 {
     cursor:pointer;
+}
+.db_info_table_row .select2-container--default .select2-selection--multiple .select2-selection__choice
+{
+    background-color:#258744;
+}
+.db_info_table_row .select2-container--default .select2-selection--multiple
+{
+    background-color:#606060;
+}
+
+.select2-container .select2-dropdown
+{
+    background-color:#606060;
 }

front/devices.php

@@ -162,7 +162,7 @@
                   <th><?php echo lang('Device_TableHead_LastIP');?></th>
                   <th><?php echo lang('Device_TableHead_MAC');?></th>
                   <th><?php echo lang('Device_TableHead_Status');?></th>
-                  <th><?php echo lang('Device_TableHead_MAC');?></th>
+                  <th><?php echo lang('Device_TableHead_MAC_full');?></th>
                   <th><?php echo lang('Device_TableHead_LastIPOrder');?></th>
                   <th><?php echo lang('Device_TableHead_Rowid');?></th>
                   
@@ -206,6 +206,8 @@
   var parTableOrder   = 'Front_Devices_Order';
   var tableRows       = 10;
   var tableOrder      = [[3,'desc'], [0,'asc']];
+  var tableColumnShow = [0,1,2,3,4,5,6,7,8,9,10,12,13]
+  var tableColumnAll  = [0,1,2,3,4,5,6,7,8,9,10,12,13]
 
   // Read parameters & Initialize components
   main();
@@ -215,43 +217,63 @@
 function main () {
   
   // get parameter value
-  $.get('php/server/parameters.php?action=get&defaultValue=50&parameter='+ parTableRows, function(data) {
+  $.get('php/server/parameters.php?action=get&expireMinutes=525600&defaultValue=[0,1,2,3,4,5,6,7,8,9,10,11,12,13]&parameter=Front_Devices_Columns', function(data) {
-    var result = JSON.parse(data);
+    
+    tableColumnShow = numberArrayFromString(data);
 
-    result = parseInt(result, 10)
+    console.log(tableColumnShow);
-
-    if (Number.isInteger (result) ) {
-        tableRows = result;  
-    }
 
     // get parameter value
-    $.get('php/server/parameters.php?action=get&defaultValue=[[3,"desc"],[0,"asc"]]&parameter='+ parTableOrder, function(data) {
+    $.get('php/server/parameters.php?action=get&defaultValue=50&parameter='+ parTableRows, function(data) {
       var result = JSON.parse(data);
-      result = JSON.parse(result);
+
-      if (Array.isArray (result) ) {
+      result = parseInt(result, 10)
-        tableOrder = result;
+
+      if (Number.isInteger (result) ) {
+          tableRows = result;  
       }
 
-      // Initialize components with parameters
+      // get parameter value
-      initializeDatatable();
+      $.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;
+        }
 
-      // query data
+        // Initialize components with parameters
-      getDevicesTotals();
+        initializeDatatable();
-      getDevicesList (deviceStatus);
+
-     });
+        // query data
+        getDevicesTotals();
+        getDevicesList (deviceStatus);
+      });
+    });
    });
 }
 
 // -----------------------------------------------------------------------------
 function initializeDatatable () {
+  //
+  var tableColumnHide = [];
+  for(i = 0; i < tableColumnAll.length; i++)
+  {    
+    // hide this coolumn if not in the tableColumnShow variable
+    if(tableColumnShow.includes(tableColumnAll[i]) == false)
+    {
+      tableColumnHide.push(tableColumnAll[i]);
+    }    
+  }
+
   // If the device has a small width (mobile) only show name, ip, and status columns. 
-  if (window.screen.width < 400) {
+  if (window.screen.width < 400) {    
-    // var tableColumnHide = [10,11,12,1,2,3,4,5,6,8];
+    // var tableColumnHide = [11,12,13,1,2,4,5,6,7,9];
-    var tableColumnHide = [11,12,13,1,2,4,5,6,7,9];
+    tableColumnHide = [11,12,13,1,2,4,5,6,7,9];
-  } else {
+  } 
-    // var tableColumnHide = [10, 11, 12];
+  // else {  
-    var tableColumnHide = [11, 12, 13];
+  //   // var tableColumnHide = [11, 12, 13];
-  };
+  //   tableColumnHide = [11, 12, 13];
+  // };
   var table=
   $('#tableDevices').DataTable({
     'paging'       : true,
@@ -410,6 +432,10 @@ function getDevicesTotals () {
 }
 
 
+// -----------------------------------------------------------------------------
+function getDeviceColumns () {
+
+}
 // -----------------------------------------------------------------------------
 function getDevicesList (status) {
   // Save status selected
@@ -437,3 +463,5 @@ function getDevicesList (status) {
 };
 
 </script>
+
+<script src="js/pialert_common.js"></script>

front/js/pialert_common.js

@@ -206,6 +206,13 @@ function sanitize(data)
   return data.replace(/(\r\n|\n|\r)/gm,"").replace(/[^\x00-\x7F]/g, "")
 }
 
+// -----------------------------------------------------------------------------
+function numberArrayFromString(data)
+{
+  data = JSON.parse(sanitize(data));
+  return data.replace(/\[|\]/g, '').split(',').map(Number);
+}
+
 // -----------------------------------------------------------------------------
 function setParameter (parameter, value) {
   // Retry

front/maintenance.php

@@ -249,7 +249,34 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
                             <button type="button" class="btn bg-green dbtools-button" id="btnToggleDarkmode" onclick="askToggleDarkmode()"><?php echo lang('Maintenance_Tool_darkmode');?></button>
                         </div>
                         <div class="db_tools_table_cell_b"><?php echo lang('Maintenance_Tool_darkmode_text');?></div>
-                    </div>                    
+                    </div>   
+                    <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">
+                            <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>
+                            <option value="3"><?php echo lang('Device_TableHead_Icon');?></option>
+                            <option value="4"><?php echo lang('Device_TableHead_Favorite');?></option>
+                            <option value="5"><?php echo lang('Device_TableHead_Group');?></option>
+                            <option value="6"><?php echo lang('Device_TableHead_FirstSession');?></option>
+                            <option value="7"><?php echo lang('Device_TableHead_LastSession');?></option>
+                            <option value="8"><?php echo lang('Device_TableHead_LastIP');?></option>
+                            <option value="9"><?php echo lang('Device_TableHead_MAC');?></option>
+                            <option value="10"><?php echo lang('Device_TableHead_Status');?></option>                            
+                            <option value="11"><?php echo lang('Device_TableHead_MAC_full');?></option>                            
+                            <option value="12"><?php echo lang('Device_TableHead_LastIPOrder');?></option>
+                            <option value="13"><?php echo lang('Device_TableHead_Rowid');?></option>
+                          </select>
+                          
+                        </div>
+                        </div>
+                        
+                        <div class="db_tools_table_cell_b"><?php echo lang('Maintenance_Tool_displayed_columns_text');?></div>
+                    </div>  
+                    
+                    
                 </div>
         </div>
         <div class="tab-pane" id="tab_DBTools">
@@ -724,6 +751,48 @@ function scrollDown()
   }
 }
 
+// --------------------------------------------------------
+//  $.get('php/server/parameters.php?action=set&parameter=Front_Dark_Mode_Enabled&expireMinutes=525600&value='+ darkModeEnabled,
+function saveSelectedColumns () { 
+  $.get('php/server/parameters.php?action=set&expireMinutes=525600&value=['+ $('#columnsSelect').val().toString() +']&parameter=Front_Devices_Columns', function(data) {
+
+  });
+}
+
+// --------------------------------------------------------
+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
+      // $("#columnsSelect").trigger({
+      //     type: 'select2:select',
+      //     params: {
+      //         data: data
+      //     }
+      // });
+      
+      // $('#'+columnsSelect+' option[value='+tableColumnShow[i]+']').html()
+    }
+    
+  });
+} 
 // --------------------------------------------------------
 function initializeTabs () {  
 
@@ -780,6 +849,8 @@ $('#langselector').on('change', function (e) {
 // load footer asynchronously not to block the page load/other sections
 window.onload = function asyncFooter()
 {
+  initializeSelectedColumns();
+
   scrollDown();
 
   initializeTabs();
@@ -793,5 +864,16 @@ window.onload = function asyncFooter()
 
 </script>
 
+<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>
+$(function () {
+    //Initialize Select2 Elements   
+    $('.select2').select2();
+});
+</script>
+
+<!-- ----------------------------------------------------------------------- -->
+<script src="js/pialert_common.js"></script>

front/php/templates/language/en_us.php

@@ -72,6 +72,7 @@ $lang['en_us'] = array(
 'Device_TableHead_LastSession' => 'Last Session',
 'Device_TableHead_LastIP' => 'Last IP',
 'Device_TableHead_MAC' => 'MAC',
+'Device_TableHead_MAC_full' => 'Full MAC',
 'Device_TableHead_LastIPOrder' => 'Last IP Order',
 'Device_TableHead_Rowid' => 'Rowid',
 'Device_TableHead_Status' => 'Status',
@@ -252,6 +253,7 @@ $lang['en_us'] = array(
 'Maintenance_Tools_Tab_Tools' => 'Tools',
 'Maintenance_Tools_Tab_BackupRestore' => 'Backup / Restore',
 'Maintenance_Tools_Tab_Logging' => 'Logs',
+'Maintenance_Tool_displayed_columns_text' => 'Which columns should be displayed in the <a href="devices.php"><b> <i class="fa fa-laptop"></i> Devices</b></a> page.',
 'Maintenance_Tool_darkmode' => 'Toggle Modes (Dark/Light)',
 'Maintenance_Tool_darkmode_text' => 'Toggle between dark mode and light mode. If the switch does not work properly, try to clear the browser cache. The change takes place on the server side, so it affects all devices in use.',
 'Maintenance_Tool_darkmode_noti' => 'Toggle Modes',