Add images input
This commit is contained in:
parent
9e2c048895
commit
b49dd76ce4
|
@ -410,7 +410,6 @@ function createVisualConsole(
|
|||
type = 0;
|
||||
}
|
||||
|
||||
console.log("data1: " + type);
|
||||
createOrUpdateVisualConsoleItem(
|
||||
visualConsole,
|
||||
asyncTaskManager,
|
||||
|
@ -1272,69 +1271,6 @@ function getAllVisualConsole(baseUrl, vcId, callback) {
|
|||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch groups access user.
|
||||
* @param {string} baseUrl Base URL to build the API path.
|
||||
* @param {number} vcId Identifier of the Visual Console.
|
||||
* @param {function} callback Function to be executed on request success or fail.
|
||||
* @return {Object} Cancellable. Object which include and .abort([statusText]) function.
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function getImagesVisualConsole(baseUrl, vcId, callback) {
|
||||
var apiPath = baseUrl + "/ajax.php";
|
||||
var jqXHR = null;
|
||||
|
||||
// Cancel the ajax requests.
|
||||
var abort = function(textStatus) {
|
||||
if (textStatus == null) textStatus = "abort";
|
||||
|
||||
// -- XMLHttpRequest.readyState --
|
||||
// Value State Description
|
||||
// 0 UNSENT Client has been created. open() not called yet.
|
||||
// 4 DONE The operation is complete.
|
||||
|
||||
if (jqXHR.readyState !== 0 && jqXHR.readyState !== 4)
|
||||
jqXHR.abort(textStatus);
|
||||
};
|
||||
|
||||
// Failed request handler.
|
||||
var handleFail = function(jqXHR, textStatus, errorThrown) {
|
||||
abort();
|
||||
// Manually aborted or not.
|
||||
if (textStatus === "abort") {
|
||||
callback();
|
||||
} else {
|
||||
var error = new Error(errorThrown);
|
||||
error.request = jqXHR;
|
||||
callback(error);
|
||||
}
|
||||
};
|
||||
|
||||
// Function which handle success case.
|
||||
var handleSuccess = function(data) {
|
||||
callback(null, data);
|
||||
};
|
||||
|
||||
// Visual Console container request.
|
||||
jqXHR = jQuery
|
||||
.get(
|
||||
apiPath,
|
||||
{
|
||||
page: "include/rest-api/index",
|
||||
getImagesVisualConsole: 1,
|
||||
visualConsoleId: vcId
|
||||
},
|
||||
"json"
|
||||
)
|
||||
.done(handleSuccess)
|
||||
.fail(handleFail);
|
||||
|
||||
// Abortable.
|
||||
return {
|
||||
abort: abort
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Copy an item.
|
||||
* @param {string} baseUrl Base URL to build the API path.
|
||||
|
@ -1438,7 +1374,6 @@ function createOrUpdateVisualConsoleItem(
|
|||
url: baseUrl + "ajax.php",
|
||||
ajax_callback: function(response) {
|
||||
var data = JSON.parse(response); //handleFormResponse(response);
|
||||
console.log(data);
|
||||
|
||||
if (data == false) {
|
||||
// Error.
|
||||
|
@ -2161,6 +2096,197 @@ function createOrUpdateVisualConsoleItem(
|
|||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
* Onchange input type module graph or custom graph.
|
||||
* @param {string} type Type graph.
|
||||
* @return {void}
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function typeModuleGraph(type) {
|
||||
$("#MGautoCompleteAgent").removeClass("hidden");
|
||||
$("#MGautoCompleteModule").removeClass("hidden");
|
||||
$("#MGcustomGraph").removeClass("hidden");
|
||||
if (type == "module") {
|
||||
$("#MGautoCompleteAgent").show();
|
||||
$("#MGautoCompleteModule").show();
|
||||
$("#MGcustomGraph").hide();
|
||||
$("#customGraphId").val(0);
|
||||
} else if (type == "custom") {
|
||||
$("#MGautoCompleteAgent").hide();
|
||||
$("#MGautoCompleteModule").hide();
|
||||
$("#MGcustomGraph").show();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Onchange input Linked visual console.
|
||||
* @return {void}
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function linkedVisualConsoleChange() {
|
||||
$("#li-linkedLayoutStatusType").removeClass("hidden");
|
||||
if ($("#getAllVisualConsole :selected").val() != 0) {
|
||||
$("#li-linkedLayoutStatusType").show();
|
||||
} else {
|
||||
$("#li-linkedLayoutStatusType").hide();
|
||||
$("#li-linkedLayoutStatusTypeWeight").removeClass("hidden");
|
||||
$("#li-linkedLayoutStatusTypeCriticalThreshold").removeClass("hidden");
|
||||
$("#li-linkedLayoutStatusTypeWarningThreshold").removeClass("hidden");
|
||||
$("#li-linkedLayoutStatusTypeCriticalThreshold").hide();
|
||||
$("#li-linkedLayoutStatusTypeWarningThreshold").hide();
|
||||
$("#li-linkedLayoutStatusTypeWeight").hide();
|
||||
}
|
||||
|
||||
var linkedLayoutExtract = $("#getAllVisualConsole :selected")
|
||||
.val()
|
||||
.split("|");
|
||||
|
||||
var linkedLayoutNodeId = 0;
|
||||
var linkedLayoutId = 0;
|
||||
if (linkedLayoutExtract instanceof Array) {
|
||||
linkedLayoutId = linkedLayoutExtract[0] ? linkedLayoutExtract[0] : 0;
|
||||
linkedLayoutNodeId = linkedLayoutExtract[1] ? linkedLayoutExtract[1] : 0;
|
||||
}
|
||||
|
||||
$("#hidden-linkedLayoutId").val(linkedLayoutId);
|
||||
$("#hidden-linkedLayoutNodeId").val(linkedLayoutNodeId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Onchange input type Linked visual console.
|
||||
* @return {void}
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function linkedVisualConsoleTypeChange() {
|
||||
$("#li-linkedLayoutStatusTypeWeight").removeClass("hidden");
|
||||
$("#li-linkedLayoutStatusTypeCriticalThreshold").removeClass("hidden");
|
||||
$("#li-linkedLayoutStatusTypeWarningThreshold").removeClass("hidden");
|
||||
if ($("#linkedLayoutStatusType :selected").val() == "service") {
|
||||
$("#li-linkedLayoutStatusTypeCriticalThreshold").show();
|
||||
$("#li-linkedLayoutStatusTypeWarningThreshold").show();
|
||||
$("#li-linkedLayoutStatusTypeWeight").hide();
|
||||
} else if ($("#linkedLayoutStatusType :selected").val() == "weight") {
|
||||
$("#li-linkedLayoutStatusTypeCriticalThreshold").hide();
|
||||
$("#li-linkedLayoutStatusTypeWarningThreshold").hide();
|
||||
$("#li-linkedLayoutStatusTypeWeight").show();
|
||||
} else {
|
||||
$("#li-linkedLayoutStatusTypeCriticalThreshold").hide();
|
||||
$("#li-linkedLayoutStatusTypeWarningThreshold").hide();
|
||||
$("#li-linkedLayoutStatusTypeWeight").hide();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Onchange input image.
|
||||
* @return {void}
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function imageVCChange(baseUrl, vcId, only) {
|
||||
var nameImg = document.getElementById("imageSrc").value;
|
||||
if (!only) {
|
||||
only = 0;
|
||||
}
|
||||
var fncallback = function(error, data) {
|
||||
if (error || !data) {
|
||||
console.log(
|
||||
"[ERROR]",
|
||||
"[VISUAL-CONSOLE-CLIENT]",
|
||||
"[API]",
|
||||
error ? error.message : "Invalid response"
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof data === "string") {
|
||||
try {
|
||||
data = JSON.parse(data);
|
||||
} catch (error) {
|
||||
console.log(
|
||||
"[ERROR]",
|
||||
"[VISUAL-CONSOLE-CLIENT]",
|
||||
"[API]",
|
||||
error ? error.message : "Invalid response"
|
||||
);
|
||||
|
||||
return; // Stop task execution.
|
||||
}
|
||||
}
|
||||
|
||||
$("#li-image-item label").empty();
|
||||
$("#li-image-item label").append(data);
|
||||
return;
|
||||
};
|
||||
|
||||
getImagesVisualConsole(baseUrl, vcId, nameImg, only, fncallback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch groups access user.
|
||||
* @param {string} baseUrl Base URL to build the API path.
|
||||
* @param {int} vcId Identifier of the Visual Console.
|
||||
* @param {string} nameImg Name img.
|
||||
* @param {function} callback Function to be executed on request success or fail.
|
||||
* @return {Object} Cancellable. Object which include and .abort([statusText]) function.
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function getImagesVisualConsole(baseUrl, vcId, nameImg, only, callback) {
|
||||
var apiPath = baseUrl + "/ajax.php";
|
||||
var jqXHR = null;
|
||||
|
||||
// Cancel the ajax requests.
|
||||
var abort = function(textStatus) {
|
||||
if (textStatus == null) textStatus = "abort";
|
||||
|
||||
// -- XMLHttpRequest.readyState --
|
||||
// Value State Description
|
||||
// 0 UNSENT Client has been created. open() not called yet.
|
||||
// 4 DONE The operation is complete.
|
||||
|
||||
if (jqXHR.readyState !== 0 && jqXHR.readyState !== 4)
|
||||
jqXHR.abort(textStatus);
|
||||
};
|
||||
|
||||
// Failed request handler.
|
||||
var handleFail = function(jqXHR, textStatus, errorThrown) {
|
||||
abort();
|
||||
// Manually aborted or not.
|
||||
if (textStatus === "abort") {
|
||||
callback();
|
||||
} else {
|
||||
var error = new Error(errorThrown);
|
||||
error.request = jqXHR;
|
||||
callback(error);
|
||||
}
|
||||
};
|
||||
|
||||
// Function which handle success case.
|
||||
var handleSuccess = function(data) {
|
||||
callback(null, data);
|
||||
};
|
||||
|
||||
// Visual Console container request.
|
||||
jqXHR = jQuery
|
||||
.get(
|
||||
apiPath,
|
||||
{
|
||||
page: "include/rest-api/index",
|
||||
getImagesVisualConsole: 1,
|
||||
visualConsoleId: vcId,
|
||||
nameImg: nameImg,
|
||||
only: only
|
||||
},
|
||||
"json"
|
||||
)
|
||||
.done(handleSuccess)
|
||||
.fail(handleFail);
|
||||
|
||||
// Abortable.
|
||||
return {
|
||||
abort: abort
|
||||
};
|
||||
}
|
||||
|
||||
// TODO: Delete the functions below when you can.
|
||||
/**************************************
|
||||
These functions require jQuery library
|
||||
|
|
|
@ -11,6 +11,7 @@ require_once $config['homedir'].'/vendor/autoload.php';
|
|||
|
||||
use Models\VisualConsole\Container as VisualConsole;
|
||||
use Models\VisualConsole\View as Viewer;
|
||||
use Models\VisualConsole\Item as Item;
|
||||
|
||||
$method = get_parameter('method');
|
||||
if ($method) {
|
||||
|
@ -264,7 +265,11 @@ if ($getVisualConsole === true) {
|
|||
} else if ($getAllVisualConsole === true) {
|
||||
// TODO: Remove.
|
||||
} else if ($getImagesVisualConsole) {
|
||||
// TODO: Remove.
|
||||
$img = get_parameter('nameImg', 'appliance');
|
||||
$only = (bool) get_parameter('only', 0);
|
||||
$count = Item::imagesElementsVC($img, $only);
|
||||
echo json_encode($count);
|
||||
return;
|
||||
} else if ($autocompleteAgentsVisualConsole) {
|
||||
$params = (array) get_parameter('data', []);
|
||||
|
||||
|
|
|
@ -2307,4 +2307,46 @@ class Item extends CachedModel
|
|||
}
|
||||
|
||||
|
||||
/**
|
||||
* Return html images.
|
||||
*
|
||||
* @param string $image Name image.
|
||||
* @param boolean|null $only Only normal image.
|
||||
*
|
||||
* @return string Html images.
|
||||
*/
|
||||
static function imagesElementsVC(string $image, ?bool $only=false):string
|
||||
{
|
||||
$type_image = [''];
|
||||
if ($only === false) {
|
||||
$type_image = [
|
||||
'bad',
|
||||
'ok',
|
||||
'warning',
|
||||
'',
|
||||
];
|
||||
}
|
||||
|
||||
$images = '';
|
||||
foreach ($type_image as $k => $v) {
|
||||
$type = '';
|
||||
if ($v !== '') {
|
||||
$type = '_'.$v;
|
||||
}
|
||||
|
||||
$images .= html_print_image(
|
||||
'images/console/icons/'.$image.$type.'.png',
|
||||
true,
|
||||
[
|
||||
'title' => __('Image Vc'),
|
||||
'alt' => __('Image Vc'),
|
||||
'style' => 'max-width:70px; max-height:70px;',
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
return $images;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
@ -469,7 +469,12 @@ final class Group extends Item
|
|||
|
||||
if ($values['tabSelected'] === 'specific') {
|
||||
// List images VC.
|
||||
// TODO: Show images.
|
||||
if (isset($values['imageSrc']) === false) {
|
||||
$values['imageSrc'] = 'appliance';
|
||||
}
|
||||
|
||||
$baseUrl = ui_get_full_url('/', false, false, false);
|
||||
|
||||
$inputs[] = [
|
||||
'label' => __('Image'),
|
||||
'arguments' => [
|
||||
|
@ -477,10 +482,22 @@ final class Group extends Item
|
|||
'fields' => self::getListImagesVC(),
|
||||
'name' => 'imageSrc',
|
||||
'selected' => $values['imageSrc'],
|
||||
'script' => 'imageVCChange(\''.$baseUrl.'\',\''.$values['vCId'].'\')',
|
||||
'return' => true,
|
||||
],
|
||||
];
|
||||
|
||||
$images = self::imagesElementsVC($values['imageSrc']);
|
||||
|
||||
$inputs[] = [
|
||||
'block_id' => 'image-item',
|
||||
'class' => 'flex-row flex-end w100p',
|
||||
'direct' => 1,
|
||||
'block_content' => [
|
||||
['label' => $images],
|
||||
],
|
||||
];
|
||||
|
||||
// Show statistics.
|
||||
$inputs[] = [
|
||||
'label' => __('Show statistics'),
|
||||
|
|
|
@ -151,7 +151,20 @@ final class Icon extends Item
|
|||
|
||||
if ($values['tabSelected'] === 'specific') {
|
||||
// List images VC.
|
||||
// TODO: Show images.
|
||||
if (isset($values['imageSrc']) === false) {
|
||||
$values['imageSrc'] = 'appliance';
|
||||
} else {
|
||||
$explode_url = explode('/', $values['imageSrc']);
|
||||
$total = count($explode_url);
|
||||
$values['imageSrc'] = substr(
|
||||
$explode_url[($total - 1)],
|
||||
0,
|
||||
-4
|
||||
);
|
||||
}
|
||||
|
||||
$baseUrl = ui_get_full_url('/', false, false, false);
|
||||
|
||||
$inputs[] = [
|
||||
'label' => __('Image'),
|
||||
'arguments' => [
|
||||
|
@ -159,10 +172,22 @@ final class Icon extends Item
|
|||
'fields' => self::getListImagesVC(),
|
||||
'name' => 'imageSrc',
|
||||
'selected' => $values['imageSrc'],
|
||||
'script' => 'imageVCChange(\''.$baseUrl.'\',\''.$values['vCId'].'\',1)',
|
||||
'return' => true,
|
||||
],
|
||||
];
|
||||
|
||||
$images = self::imagesElementsVC($values['imageSrc'], true);
|
||||
|
||||
$inputs[] = [
|
||||
'block_id' => 'image-item',
|
||||
'class' => 'flex-row flex-end w100p',
|
||||
'direct' => 1,
|
||||
'block_content' => [
|
||||
['label' => $images],
|
||||
],
|
||||
];
|
||||
|
||||
// Inputs LinkedVisualConsole.
|
||||
$inputsLinkedVisualConsole = self::inputsLinkedVisualConsole(
|
||||
$values
|
||||
|
|
|
@ -263,7 +263,12 @@ final class StaticGraph extends Item
|
|||
|
||||
if ($values['tabSelected'] === 'specific') {
|
||||
// List images VC.
|
||||
// TODO: Show images.
|
||||
if (isset($values['imageSrc']) === false) {
|
||||
$values['imageSrc'] = 'appliance';
|
||||
}
|
||||
|
||||
$baseUrl = ui_get_full_url('/', false, false, false);
|
||||
|
||||
$inputs[] = [
|
||||
'label' => __('Image'),
|
||||
'arguments' => [
|
||||
|
@ -271,10 +276,22 @@ final class StaticGraph extends Item
|
|||
'fields' => self::getListImagesVC(),
|
||||
'name' => 'imageSrc',
|
||||
'selected' => $values['imageSrc'],
|
||||
'script' => 'imageVCChange(\''.$baseUrl.'\',\''.$values['vCId'].'\')',
|
||||
'return' => true,
|
||||
],
|
||||
];
|
||||
|
||||
$images = self::imagesElementsVC($values['imageSrc']);
|
||||
|
||||
$inputs[] = [
|
||||
'block_id' => 'image-item',
|
||||
'class' => 'flex-row flex-end w100p',
|
||||
'direct' => 1,
|
||||
'block_content' => [
|
||||
['label' => $images],
|
||||
],
|
||||
];
|
||||
|
||||
// Autocomplete agents.
|
||||
$inputs[] = [
|
||||
'label' => __('Agent'),
|
||||
|
|
|
@ -177,79 +177,6 @@ class View extends \HTML
|
|||
true
|
||||
);
|
||||
|
||||
// TODO:XXX very ugly.
|
||||
$jsforms = '<script>';
|
||||
$jsforms .= "function typeModuleGraph(type){
|
||||
$('#MGautoCompleteAgent').removeClass('hidden');
|
||||
$('#MGautoCompleteModule').removeClass('hidden');
|
||||
$('#MGcustomGraph').removeClass('hidden');
|
||||
if (type == 'module') {
|
||||
$('#MGautoCompleteAgent').show();
|
||||
$('#MGautoCompleteModule').show();
|
||||
$('#MGcustomGraph').hide();
|
||||
$('#customGraphId').val(0);
|
||||
}
|
||||
else if (type == 'custom') {
|
||||
$('#MGautoCompleteAgent').hide();
|
||||
$('#MGautoCompleteModule').hide();
|
||||
$('#MGcustomGraph').show();
|
||||
}
|
||||
}";
|
||||
|
||||
$jsforms .= 'function linkedVisualConsoleChange(){
|
||||
$("#li-linkedLayoutStatusType").removeClass("hidden");
|
||||
if ($("#getAllVisualConsole :selected").val() != 0) {
|
||||
$("#li-linkedLayoutStatusType").show();
|
||||
} else {
|
||||
$("#li-linkedLayoutStatusType").hide();
|
||||
$("#li-linkedLayoutStatusTypeWeight").removeClass("hidden");
|
||||
$("#li-linkedLayoutStatusTypeCriticalThreshold")
|
||||
.removeClass("hidden");
|
||||
$("#li-linkedLayoutStatusTypeWarningThreshold")
|
||||
.removeClass("hidden");
|
||||
$("#li-linkedLayoutStatusTypeCriticalThreshold").hide();
|
||||
$("#li-linkedLayoutStatusTypeWarningThreshold").hide();
|
||||
$("#li-linkedLayoutStatusTypeWeight").hide();
|
||||
}
|
||||
|
||||
var linkedLayoutExtract = $("#getAllVisualConsole :selected")
|
||||
.val()
|
||||
.split("|");
|
||||
|
||||
var linkedLayoutNodeId = 0;
|
||||
var linkedLayoutId = 0;
|
||||
if (linkedLayoutExtract instanceof Array) {
|
||||
linkedLayoutId = (linkedLayoutExtract[0]) ? linkedLayoutExtract[0] : 0;
|
||||
linkedLayoutNodeId = (linkedLayoutExtract[1]) ? linkedLayoutExtract[1] : 0;
|
||||
}
|
||||
|
||||
$("#hidden-linkedLayoutId").val(linkedLayoutId);
|
||||
$("#hidden-linkedLayoutNodeId").val(linkedLayoutNodeId);
|
||||
}';
|
||||
|
||||
$jsforms .= 'function linkedVisualConsoleTypeChange(){
|
||||
$("#li-linkedLayoutStatusTypeWeight").removeClass("hidden");
|
||||
$("#li-linkedLayoutStatusTypeCriticalThreshold")
|
||||
.removeClass("hidden");
|
||||
$("#li-linkedLayoutStatusTypeWarningThreshold")
|
||||
.removeClass("hidden");
|
||||
if ($("#linkedLayoutStatusType :selected").val() == "service") {
|
||||
$("#li-linkedLayoutStatusTypeCriticalThreshold").show();
|
||||
$("#li-linkedLayoutStatusTypeWarningThreshold").show();
|
||||
$("#li-linkedLayoutStatusTypeWeight").hide();
|
||||
} else if ($("#linkedLayoutStatusType :selected").val() == "weight") {
|
||||
$("#li-linkedLayoutStatusTypeCriticalThreshold").hide();
|
||||
$("#li-linkedLayoutStatusTypeWarningThreshold").hide();
|
||||
$("#li-linkedLayoutStatusTypeWeight").show();
|
||||
} else {
|
||||
$("#li-linkedLayoutStatusTypeCriticalThreshold").hide();
|
||||
$("#li-linkedLayoutStatusTypeWarningThreshold").hide();
|
||||
$("#li-linkedLayoutStatusTypeWeight").hide();
|
||||
}
|
||||
}';
|
||||
|
||||
$jsforms .= '</script>';
|
||||
|
||||
return $form.$jsforms;
|
||||
|
||||
}
|
||||
|
|
|
@ -499,4 +499,14 @@ li#li-position-item > label:not(:first-child) {
|
|||
margin-left: 15px;
|
||||
}
|
||||
|
||||
li#li-image-item label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
li#li-image-item label img {
|
||||
flex: initial;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=vc.main.css.map*/
|
||||
|
|
Loading…
Reference in New Issue