WebApps/Observium_CE
1
0
Fork 0
Code Pull Requests Activity

Commit version 24.12.13800

Browse Source
This commit is contained in:
Chris Hammer
2025-01-06 17:35:06 -05:00
parent b7f6a79c2c
commit 55d9218816
6133 changed files with 4239740 additions and 1374287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
html/js/observium-entities.js
View File

@ -5,56 +5,138 @@
*
* @package observium
* @subpackage js
* @copyright (C) 2006-2013 Adam Armstrong, (C) 2013-2015 Observium Limited
* @copyright (C) 2006-2013 Adam Armstrong, (C) 2013-2023 Observium Limited
*
*/
var ajax = new Array();
/**
* Populates select elements with data based on a given entity type.
* It uses the array key as a fallback for the value attribute if no explicit value field is provided.
*
* @param {string|null} device_id - The ID of the device or null if not applicable.
* @param {string} target_id - The ID of the target select element to populate with entities.
* @param {string} entity_type - The type of entity to fetch (e.g., sensor, port, device).
*/
async function getEntityList(device_id, target_id, entity_type) {
const targetSelect = document.getElementById(target_id);
targetSelect.innerHTML = ''; // Clear the select options
function getInterfaceList(sel, target_id)
{
var deviceId = sel.options[sel.selectedIndex].value;
document.getElementById(target_id).options.length = 0; // Empty city select box
if (deviceId.length>0) {
var index = ajax.length;
ajax[index] = new sack();
try {
// Construct the query based on whether device_id is provided
const query = device_id ? `device_id=${encodeURIComponent(device_id)}&` : '';
const response = await fetch(`ajax/get_entities.php?${query}entity_type=${encodeURIComponent(entity_type)}`);
if (!response.ok) throw new Error('Network response was not ok.');
ajax[index].requestFile = 'ajax/device_ports.php?device_id='+deviceId; // Specifying which file to get
ajax[index].onCompletion = function() { createInterfaces(index, target_id) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
const data = await response.json();
populateSelect(targetSelect, data);
} catch (error) {
console.error('There has been a problem with your fetch operation:', error);
// Optionally, handle errors, e.g., show a user-friendly message
}
// Refresh the select picker to update the UI
$('.selectpicker').selectpicker('refresh');
}
function createInterfaces(index, target_id)
{
var obj = document.getElementById(target_id);
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
$('.selectpicker').selectpicker('refresh');
/**
* Converts the object data from the server into an array, sorts it by the 'name' field, and populates
* the provided select element with options or optgroups based on the provided data.
* If an option doesn't have a 'value' field, the key from the original data object is used as its value.
*
* @param {HTMLElement} selectElement - The select element to populate.
* @param {Object} data - The data used to populate the select element, in key-value pairs.
*/
function populateSelect(selectElement, data) {
// Convert object to array of entries, sort by 'name', and map to a new structure
const dataArray = Object.entries(data).sort(([keyA, a], [keyB, b]) => {
// Case-insensitive comparison of names
const nameA = a.name.toLowerCase();
const nameB = b.name.toLowerCase();
return nameA.localeCompare(nameB);
}).map(([key, item]) => {
// Use key as the value if 'value' field is not present
return { ...item, value: item.value || key };
});
// Group data by the 'group' field
const groupedData = dataArray.reduce((acc, item) => {
const group = item.group || 'Other'; // Default group name if not specified
acc[group] = acc[group] || [];
acc[group].push(item);
return acc;
}, {});
// Generate HTML for each group and its options
const optionsHtml = Object.keys(groupedData).map(group => {
const groupOptions = groupedData[group].map(item => createOption(item)).join('');
return `<optgroup label="${group}">${groupOptions}</optgroup>`;
}).join('');
selectElement.innerHTML = optionsHtml;
}
function getEntityListNeo(device_id, target_id, entity_type)
{
document.getElementById(target_id).options.length = 0; // Empty city select box
if (device_id.length>0) {
var index = ajax.length;
ajax[index] = new sack();
/**
* Creates an HTML string for an option element based on the provided item data.
*
* @param {Object} item - The item data containing information for the option element.
* @returns {string} - The HTML string for the option element.
*/
function createOption(item) {
// Prepare additional attributes if they exist
const subtextAttr = item.subtext ? `data-subtext="${item.subtext}"` : '';
const iconAttr = item.icon ? `data-icon="${item.icon}"` : '';
const classAttr = item.class ? `class="${item.class}"` : '';
const contentAttr = item.content ? `data-content="${item.content}"` : '';
ajax[index].requestFile = 'ajax/device_entities.php?device_id='+device_id+'&entity_type='+entity_type; // Specifying which file to get
ajax[index].onCompletion = function() { createInterfaces(index, target_id) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
// Return the HTML string for the option element
return `<option value="${item.value}" ${subtextAttr} ${iconAttr} ${classAttr} ${contentAttr}>${item.name}</option>`;
}
function getEntityList(sel, target_id, entity_type)
{
var deviceId = sel.options[sel.selectedIndex].value;
document.getElementById(target_id).options.length = 0; // Empty city select box
if (deviceId.length>0) {
var index = ajax.length;
ajax[index] = new sack();
// Example usage:
// getEntityList('123', 'select-target', 'sensor'); // For a specific device
// getEntityList(null, 'select-target', 'device'); // For a device list
ajax[index].requestFile = 'ajax/device_entities.php?device_id='+deviceId+'&entity_type='+entity_type; // Specifying which file to get
ajax[index].onCompletion = function() { createInterfaces(index, target_id) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
function loadDevicesIntoSelects() {
document.querySelectorAll('select[data-load="devices"]').forEach(selectElement => {
console.log('Loading devices into :');
console.log(selectElement);
getEntityList(null, selectElement.id, 'device');
});
}
document.addEventListener('DOMContentLoaded', loadDevicesIntoSelects);
// Function to make an element draggable
function makeDraggable(element) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
var draghandle = element.querySelector('.drag-handle');
draghandle.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
element.style.top = (element.offsetTop - pos2) + "px";
element.style.left = (element.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}