mirror of
https://github.com/jokob-sk/NetAlertX.git
synced 2025-12-07 09:36:05 -08:00
333 lines
11 KiB
PHP
Executable File
333 lines
11 KiB
PHP
Executable File
|
|
|
|
|
|
|
|
<div class="col-md-12">
|
|
<div class="callout callout-warning">
|
|
<h4><?= lang('Gen_Warning');?></h4>
|
|
|
|
<p><?= lang('Device_MultiEdit_Backup');?></p>
|
|
</div>
|
|
<div class="box box-default">
|
|
|
|
<div class="box-header">
|
|
|
|
<h3 class="box-title"><?= lang('Gen_Selected_Devices');?></h3>
|
|
|
|
</div>
|
|
<div class="deviceSelector col-md-9" style="z-index:5"></div>
|
|
|
|
<div class="col-md-3">
|
|
<button type="button" class="btn btn-default" onclick="markAllSelected()">
|
|
<i class="fa-solid fa-circle-check"></i> <?= lang('Gen_Add_All');?>
|
|
</button>
|
|
<button type="button" class="btn btn-default" onclick="markAllNotSelected()">
|
|
<i class="fa-solid fa-circle-xmark"></i> <?= lang('Gen_Remove_All');?>
|
|
</button>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-md-12">
|
|
<div class="box box-default">
|
|
|
|
<div class="box-header">
|
|
<h3 class="box-title"><?= lang('Device_MultiEdit_Fields');?></h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<form id="multi-edit-form">
|
|
<!-- Form fields will be appended here -->
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-md-12">
|
|
<div class="box box-default">
|
|
<div class="box-header ">
|
|
<h3 class="box-title"><?= lang('Device_MultiEdit_MassActions');?></h3>
|
|
</div>
|
|
<div class="box-body">
|
|
|
|
<div class="col-md-2" style="">
|
|
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-red" id="btnDeleteMAC" onclick="askDeleteSelectedDevices()"><?= lang('Maintenance_Tool_del_selecteddev');?></button>
|
|
</div>
|
|
<div class="col-md-10"><?= lang('Maintenance_Tool_del_selecteddev_text');?></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script defer>
|
|
|
|
// -------------------------------------------------------------------
|
|
// Get plugin and settings data from API endpoints
|
|
function getData(){
|
|
|
|
// some race condition, need to implement delay
|
|
setTimeout(() => {
|
|
$.get('api/table_settings.json?nocache=' + Date.now(), function(res) {
|
|
|
|
settingsData = res["data"];
|
|
|
|
excludedColumns = ["NEWDEV_dev_MAC", "NEWDEV_dev_FirstConnection", "NEWDEV_dev_LastConnection", "NEWDEV_dev_LastNotification", "NEWDEV_dev_LastIP", "NEWDEV_dev_StaticIP", "NEWDEV_dev_ScanCycle", "NEWDEV_dev_PresentLastScan" ]
|
|
|
|
const relevantColumns = settingsData.filter(set =>
|
|
set.Group === "NEWDEV" &&
|
|
set.Code_Name.includes("_dev_") &&
|
|
!excludedColumns.includes(set.Code_Name) &&
|
|
!set.Code_Name.includes("__metadata")
|
|
);
|
|
|
|
const generateSimpleForm = columns => {
|
|
const form = $('#multi-edit-form');
|
|
const numColumns = 2; // Number of columns
|
|
|
|
// Calculate number of elements per column
|
|
const elementsPerColumn = Math.ceil(columns.length / numColumns);
|
|
|
|
// Divide columns equally
|
|
for (let i = 0; i < numColumns; i++) {
|
|
const column = $('<div>').addClass('col-md-6');
|
|
|
|
// Append form groups to the column
|
|
for (let j = i * elementsPerColumn; j < Math.min((i + 1) * elementsPerColumn, columns.length); j++) {
|
|
|
|
let inputType;
|
|
|
|
switch (columns[j].Type) {
|
|
case 'integer.checkbox':
|
|
case 'checkbox':
|
|
inputType = 'checkbox';
|
|
break;
|
|
case 'text.select':
|
|
inputType = 'text.select';
|
|
break;
|
|
default:
|
|
inputType = 'text';
|
|
break;
|
|
}
|
|
|
|
if (inputType === 'text.select') {
|
|
|
|
targetLocation = columns[j].Code_Name + "_initSettingDropdown"
|
|
|
|
initSettingDropdown(columns[j].Code_Name, [], targetLocation, generateDropdownOptions)
|
|
|
|
// Handle Icons as tehy need a preview
|
|
if(columns[j].Code_Name == 'NEWDEV_dev_Icon')
|
|
{
|
|
input = `
|
|
<span class="input-group-addon" id="txtIconFA"></span>
|
|
<select class="form-control"
|
|
onChange="updateIconPreview('#NEWDEV_dev_Icon')"
|
|
id="${columns[j].Code_Name}"
|
|
data-my-column="${columns[j].Code_Name}"
|
|
data-my-targetColumns="${columns[j].Code_Name.replace('NEWDEV_','')}" >
|
|
<option id="${targetLocation}"></option>
|
|
</select>`
|
|
|
|
} else{
|
|
|
|
input = `<select class="form-control"
|
|
id="${columns[j].Code_Name}"
|
|
data-my-column="${columns[j].Code_Name}"
|
|
data-my-targetColumns="${columns[j].Code_Name.replace('NEWDEV_','')}" >
|
|
<option id="${targetLocation}"></option>
|
|
</select>`
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
// Add classes specifically for checkboxes
|
|
if (inputType === 'checkbox') {
|
|
inputClass = 'checkbox';
|
|
|
|
} else {
|
|
inputClass = 'form-control';
|
|
}
|
|
|
|
input = `<input class="${inputClass}"
|
|
id="${columns[j].Code_Name}"
|
|
data-my-column="${columns[j].Code_Name}"
|
|
data-my-targetColumns="${columns[j].Code_Name.replace('NEWDEV_','')}"
|
|
type="${inputType}">`
|
|
}
|
|
|
|
|
|
const inputEntry = `<div class="form-group col-sm-12" >
|
|
<label class="col-sm-3 control-label">${columns[j].Display_Name}</label>
|
|
<div class="col-sm-9">
|
|
<div class="input-group red-hover-border">
|
|
${input}
|
|
<span class="input-group-addon pointer red-hover-background" onclick="massUpdateField('${columns[j].Code_Name}');" title="${getString('Device_MultiEdit_Tooltip')}">
|
|
<i class="fa fa-save"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
|
|
|
|
column.append(inputEntry);
|
|
}
|
|
|
|
form.append(column);
|
|
}
|
|
};
|
|
|
|
console.log(relevantColumns)
|
|
|
|
generateSimpleForm(relevantColumns);
|
|
|
|
|
|
})
|
|
|
|
}, 500);
|
|
|
|
}
|
|
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Get selected devices Macs
|
|
function selectorMacs () {
|
|
return $('.deviceSelector select').val().join(',');
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Select All
|
|
function markAllSelected() {
|
|
// Get the <select> element with the class 'deviceSelector'
|
|
var selectElement = $('.deviceSelector select');
|
|
|
|
// Iterate over each option within the select element
|
|
selectElement.find('option').each(function() {
|
|
// Mark each option as selected
|
|
$(this).prop('selected', true);
|
|
});
|
|
|
|
// Trigger the 'change' event to notify Bootstrap Select of the changes
|
|
selectElement.trigger('change');
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// UN-Select All
|
|
function markAllNotSelected() {
|
|
// Get the <select> element with the class 'deviceSelector'
|
|
var selectElement = $('.deviceSelector select');
|
|
|
|
// Iterate over each option within the select element
|
|
selectElement.find('option').each(function() {
|
|
// Unselect each option
|
|
$(this).prop('selected', false);
|
|
});
|
|
|
|
// Trigger the 'change' event to notify Bootstrap Select of the changes
|
|
selectElement.trigger('change');
|
|
}
|
|
|
|
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Update specified field over the specified DB column and selected entry(ies)
|
|
function massUpdateField(id) {
|
|
|
|
// Get the input element
|
|
var inputElement = $(`#${id}`);
|
|
|
|
console.log(inputElement);
|
|
console.log(id);
|
|
|
|
// Initialize columnValue variable
|
|
var columnValue;
|
|
|
|
// Check the type of the input element
|
|
if (inputElement.is(':checkbox')) {
|
|
// For checkboxes, set the value to 1 if checked, otherwise set it to 0
|
|
columnValue = inputElement.is(':checked') ? 1 : 0;
|
|
} else {
|
|
// For other input types (like textboxes), simply retrieve their values
|
|
columnValue = inputElement.val();
|
|
}
|
|
|
|
var targetColumns = inputElement.attr('data-my-targetColumns');
|
|
|
|
|
|
console.log(targetColumns);
|
|
console.log(columnValue);
|
|
|
|
// update selected
|
|
executeAction('update', 'dev_MAC', selectorMacs(), targetColumns, columnValue )
|
|
|
|
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// action: Represents the action to be performed, a CRUD operation like "update", "delete", etc.
|
|
// whereColumnName: Specifies the name of the column used in the WHERE or SELECT statement for filtering.
|
|
// key: Represents the unique identifier of the row or record to be acted upon.
|
|
// targetColumns: Indicates the columns to be updated or affected by the action.
|
|
// newTargetColumnValue: Specifies the new value to be assigned to the specified column(s).
|
|
function executeAction(action, whereColumnName, key, targetColumns, newTargetColumnValue )
|
|
{
|
|
$.get(`php/server/dbHelper.php?action=${action}&dbtable=Devices&columnName=${whereColumnName}&id=${key}&columns=${targetColumns}&values=${newTargetColumnValue}`, function(data) {
|
|
// console.log(data);
|
|
|
|
if (sanitize(data) == 'OK') {
|
|
showMessage(getString('Gen_DataUpdatedUITakesTime'));
|
|
// Remove navigation prompt "Are you sure you want to leave..."
|
|
window.onbeforeunload = null;
|
|
|
|
// update API endpoints to refresh the UI
|
|
updateApi()
|
|
|
|
} else {
|
|
showMessage(getString('Gen_LockedDB'));
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Ask to delete selected devices
|
|
function askDeleteSelectedDevices () {
|
|
// Ask
|
|
showModalWarning(
|
|
getString('Maintenance_Tool_del_alldev_noti'),
|
|
getString('Gen_AreYouSure'),
|
|
getString('Gen_Cancel'),
|
|
getString('Gen_Delete'),
|
|
'deleteSelectedDevices');
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Delete selected devices
|
|
function deleteSelectedDevices()
|
|
{
|
|
|
|
executeAction('delete', 'dev_MAC', selectorMacs() )
|
|
|
|
}
|
|
|
|
|
|
getData();
|
|
|
|
|
|
</script>
|
|
|
|
<!-- ----------------------------------------------------------------------- -->
|
|
|
|
<script src="js/db_methods.js?v=<?php include 'php/templates/version.php'; ?>"></script>
|
|
<!-- ----------------------------------------------------------------------- -->
|
|
|
|
|