diff --git a/front/css/pialert.css b/front/css/pialert.css index 180a416e..68d4e34d 100755 --- a/front/css/pialert.css +++ b/front/css/pialert.css @@ -571,8 +571,8 @@ display: table-cell; text-align: center; padding: 10px; - min-width: 180px; - width: 20%; + /* min-width: 180px; */ + 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; } \ No newline at end of file diff --git a/front/devices.php b/front/devices.php index 0f79c467..a880b61d 100755 --- a/front/devices.php +++ b/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 tableColumnAll = [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] // Read parameters & Initialize components main(); diff --git a/front/maintenance.php b/front/maintenance.php index c4234965..33bc2db0 100755 --- a/front/maintenance.php +++ b/front/maintenance.php @@ -202,8 +202,8 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
-
- @@ -219,8 +219,8 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
-
- @@ -235,7 +235,7 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
-
+
@@ -246,7 +246,7 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
- +
@@ -278,6 +278,24 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
+ + +
+
+
+
+ + +
+
+ +
+
+
+ + +
@@ -760,6 +778,21 @@ function scrollDown() // Manage displayed columns // -------------------------------------------------------- +var columnLabels = [ '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '']; + function saveSelectedColumns () { $.get('php/server/parameters.php?action=set&expireMinutes=525600&value=['+ $('#columnsSelect').val().toString() +']¶meter=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() +']¶meter=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 += '
  • \ +
    \ +
    \ + \ + '+columnLabels[tableColumnShow[i]]+'\ +
    \ +
    \ + \ +
    \ +
    \ +
    • '; + } + + $("#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 diff --git a/front/php/templates/language/en_us.php b/front/php/templates/language/en_us.php index 09a68d44..8b54df2e 100755 --- a/front/php/templates/language/en_us.php +++ b/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 Devices page.', +'Maintenance_Tool_order_columns_text' => 'Change the order of the columns in the Devices 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.',