Add images input

This commit is contained in:
Daniel Barbero Martin 2020-01-07 15:43:44 +01:00
parent 9e2c048895
commit b49dd76ce4
8 changed files with 311 additions and 142 deletions

View File

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

View File

@ -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', []);

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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