Devices Columns 0.4 - backup

front/css/pialert.css

@@ -571,8 +571,8 @@
     display: table-cell;
     text-align: center; 
     padding: 10px; 
-    min-width: 180px; 
+    /* min-width: 180px;  */
-    width: 20%; 
+    width: 25%; 
     vertical-align: middle;
 }
 .db_tools_table_cell_b {
@@ -720,20 +720,42 @@ height: 50px;
     font-size: large;
 }
 
+#columnsSelectNew li
+{
+    list-style-type: none;
+    padding: 1px;
+}
+
 .pointer
 {
     cursor:pointer;
 }
-.db_info_table_row .select2-container--default .select2-selection--multiple .select2-selection__choice
+.mainDrgLi
 {
-    background-color:#258744;
+    padding: 3px;
+    text-align: start;
+    width: 100%;    
 }
-.db_info_table_row .select2-container--default .select2-selection--multiple
+.drgLiLeft i
 {
-    background-color:#606060;
+    width:25px;
+}
+.drgLiLeft
+{
+    width:92%;
+    float: left;
+}
+.drgLiRight
+{
+    width:5%;    
 }
 
-.select2-container .select2-dropdown
+.fullwidth
 {
-    background-color:#606060;
+    width:100%
+}
+
+.columnsOrder
+{
+    display:block;
 }

front/devices.php

@@ -193,8 +193,7 @@
   var tableRows       = 10;
   var tableOrder      = [[3,'desc'], [0,'asc']];
   var tableColumnVisible = [0,1,2,3,4,5,6,7,8,9,10,12,13]
-  var tableColumnOrder = [0,1,2,3,4,5,6,7,8,9,10,12,13]
+  var tableColumnOrder = [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();

front/maintenance.php

@@ -202,8 +202,8 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
                     <div class="db_info_table_row">
                         <div class="db_tools_table_cell_a" style="text-align:center;">
                             <form method="post" action="maintenance.php">
-                              <div style="display: inline-block;">
+                              <div style="">
-                                  <select name="langselector" id="langselector" class="form-control bg-green"  style="width:160px; margin-bottom:5px;">
+                                  <select name="langselector" id="langselector" class="fullwidth form-control bg-green"  style="margin-bottom:5px;">
                                       <option value=""><?php echo lang('Maintenance_lang_selector_empty');?></option>
                                       <option value="en_us"><?php echo lang('Maintenance_lang_en_us');?></option>
                                       <option value="de_de"><?php echo lang('Maintenance_lang_de_de');?></option>
@@ -219,8 +219,8 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
                     <div class="db_info_table_row">
                         <div class="db_tools_table_cell_a" style="text-align: center;">
                             <form method="post" action="maintenance.php">
-                            <div style="display: inline-block; text-align: center;">
+                            <div style=" text-align: center;">
-                                <select name="skinselector" class="form-control bg-green" style="width:160px; margin-bottom:5px;">
+                                <select name="skinselector" class="form-control bg-green" style="margin-bottom:5px;">
                                     <option value=""><?php echo lang('Maintenance_themeselector_empty');?></option>
                                     <option value="skin-black-light">black light</option>
                                     <option value="skin-black">black</option>
@@ -235,7 +235,7 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
                                     <option value="skin-yellow-light">yellow light</option>
                                     <option value="skin-yellow">yellow</option>
                                 </select></div>
-                            <div style="display: block;"><input type="submit" name="skinselector_set" value="<?php echo lang('Maintenance_themeselector_apply');?>" class="btn bg-green" style="width:160px;">
+                            <div style="display: block;"><input type="submit" name="skinselector_set" value="<?php echo lang('Maintenance_themeselector_apply');?>" class="fullwidth btn bg-green">
                                 <?php // echo $pia_skin_test; ?>
                             </div>
                             </form>
@@ -246,7 +246,7 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
                     </div>
                     <div class="db_info_table_row">
                         <div class="db_tools_table_cell_a">
-                            <button type="button" class="btn bg-green dbtools-button" id="btnToggleDarkmode" onclick="askToggleDarkmode()"><?php echo lang('Maintenance_Tool_darkmode');?></button>
+                            <button type="button" class="btn bg-green dbtools-button fullwidth" 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>   
@@ -278,6 +278,24 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
                         
                         <div class="db_tools_table_cell_b"><?php echo lang('Maintenance_Tool_displayed_columns_text');?></div>
                     </div>  
+
+
+                    <div class="db_info_table_row">
+                      <div class="db_tools_table_cell_a">
+                          <div class="form-group" > 
+                            <div class="" > 
+                              <ul id="columnsSelectNew" class="" multiple=""    tabindex="-1" aria-hidden="true">
+                              </ul>
+                              <span class="input-group-addon"><i title="<?php echo lang('Gen_Save');?>" class="fa fa-save  pointer" onclick="saveSelectedColumns();"></i></span>   
+                            </div>
+                          </div>
+
+                        </div>
+                        <div class="db_tools_table_cell_b"><?php echo lang('Maintenance_Tool_order_columns_text');?></div>
+                        </div>
+                        
+                        
+                    
                     
                     
                 </div>
@@ -760,6 +778,21 @@ function scrollDown()
 // Manage displayed columns
 // --------------------------------------------------------
 
+var columnLabels = [    '<?php echo lang('Device_TableHead_Name');?>',
+                        '<?php echo lang('Device_TableHead_Owner');?>',
+                        '<?php echo lang('Device_TableHead_Type');?>',
+                        '<?php echo lang('Device_TableHead_Icon');?>',
+                        '<?php echo lang('Device_TableHead_Favorite');?>',
+                        '<?php echo lang('Device_TableHead_Group');?>',
+                        '<?php echo lang('Device_TableHead_FirstSession');?>',
+                        '<?php echo lang('Device_TableHead_LastSession');?>',
+                        '<?php echo lang('Device_TableHead_LastIP');?>',
+                        '<?php echo lang('Device_TableHead_MAC');?>',
+                        '<?php echo lang('Device_TableHead_Status');?>',                            
+                        '<?php echo lang('Device_TableHead_MAC_full');?>',                            
+                        '<?php echo lang('Device_TableHead_LastIPOrder');?>',
+                        '<?php echo lang('Device_TableHead_Rowid');?>'];
+
 function saveSelectedColumns () { 
   $.get('php/server/parameters.php?action=set&expireMinutes=525600&value=['+ $('#columnsSelect').val().toString() +']&parameter=Front_Devices_Columns_Visible', function(data) {
     // save full order of all columns to simplify mapping later on
@@ -770,16 +803,16 @@ function saveSelectedColumns () {
 
     colNewOrder = colDisplayed;
 
+    // append the remaining columns in the previous order
     for(i = 0; i < colDefaultOrder.length; i++)
     {
       if(!colDisplayed.includes(colDefaultOrder[i]))
       {
         colNewOrder.push(colDefaultOrder[i])
       }
-    }
+    }    
-
-    console.log(colNewOrder);
 
+    // save the setting in the DB
     $.get('php/server/parameters.php?action=set&expireMinutes=525600&value=['+ colNewOrder.toString() +']&parameter=Front_Devices_Columns_Order', function(data) {
 
       showMessage(data);
@@ -794,6 +827,8 @@ function initializeSelectedColumns () {
 
     tableColumnShow = numberArrayFromString(data);
 
+    listItems = ''
+
     for(i=0; i < tableColumnShow.length; i++)
     {
       // create the option and append to Select2
@@ -801,9 +836,22 @@ function initializeSelectedColumns () {
       
       $("#columnsSelect").append(option).trigger('change');
 
-      $(option).attr('eee','eee')
+
-    }
+      listItems += '<li value="'+tableColumnShow[i]+'" class="ui-state-default pointer">\
-    
+                                  <div class="mainDrgLi  btn-sm btn bg-olive ">\
+                                    <div class="drgLiLeft">  \
+                                      <i title="<?php echo lang('Maintenance_Tool_drag_me');?>" class="fa fa-grip  pointer" ></i>\
+                                      '+columnLabels[tableColumnShow[i]]+'\
+                                    </div>\
+                                    <div class="drgLiRight">\
+                                      <input class="flat-red" title="<?php echo lang('Maintenance_Tool_check_visible');?>" type="checkbox"  checked >\
+                                    </div>\
+                                  </div>\
+                                </li>';
+    }    
+
+    $("#columnsSelectNew").html(listItems);
+
   });
 } 
 
@@ -813,20 +861,26 @@ function initializeSelectedColumns () {
 $(function () {    
     selectEl = $('.select2').select2();
    
+    console.log('------------')
     selectEl.next().children().children().children().sortable({
       containment: 'parent', stop: function (event, ui) {
         ui.item.parent().children('[title]').each(function () {
           var title = $(this).attr('title');
+          console.log(title)
           var original = $( 'option:contains(' + title + ')', selectEl ).first();
           original.detach();
           selectEl.append(original)
         });
-        selectEl.change();
+        // selectEl.change();
       }
     });
 });
 
 
+$( function() {
+    $( "#columnsSelectNew" ).sortable();
+  } );
+
 
 // --------------------------------------------------------
 // General initialization

front/php/templates/language/en_us.php

@@ -15,6 +15,8 @@ $lang['en_us'] = array(
 'Gen_Delete' => 'Delete',
 'Gen_Cancel' => 'Cancel',
 'Gen_Okay' => 'Ok',
+'Gen_Save' => 'Save',
+'Gen_Saved' => 'Saved',
 'Gen_Purge' => 'Purge',
 'Gen_Backup' => 'Run Backup',
 'Gen_Restore' => 'Run Restore',
@@ -254,7 +256,10 @@ $lang['en_us'] = array(
 '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_order_columns_text' => 'Change the order of the columns 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_drag_me' => 'Drag me to reorder columns.',
+'Maintenance_Tool_check_visible' => 'Uncheck to hide column.',
 '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',
 'Maintenance_Tool_darkmode_noti_text' => 'After the theme switch, the page tries to reload itself to activate the change. If necessary, the cache must be cleared.',