Devices Columns 0.1

This commit is contained in:
Jokob-sk
2023-01-17 23:42:00 +11:00
parent b9d65ea0e2
commit a1444659ea
5 changed files with 158 additions and 26 deletions

View File

@@ -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;
}

View File

@@ -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) {
var result = JSON.parse(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) {
tableColumnShow = numberArrayFromString(data);
result = parseInt(result, 10)
if (Number.isInteger (result) ) {
tableRows = result;
}
console.log(tableColumnShow);
// 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) ) {
tableOrder = result;
result = parseInt(result, 10)
if (Number.isInteger (result) ) {
tableRows = result;
}
// Initialize components with parameters
initializeDatatable();
// get parameter value
$.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
getDevicesTotals();
getDevicesList (deviceStatus);
});
// Initialize components with parameters
initializeDatatable();
// 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) {
// 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 tableColumnHide = [10, 11, 12];
var tableColumnHide = [11, 12, 13];
};
if (window.screen.width < 400) {
// 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 = [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>

View File

@@ -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

View File

@@ -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>

View File

@@ -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',