tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fixed autocomplete agent

This commit is contained in:
Daniel Barbero Martin 2019-08-22 10:11:06 +02:00
parent ee1eed93b4
commit 46fdfc4445
10 changed files with 461 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
pandora_console/include/javascript/pandora_visual_console.js
View File

@ -341,7 +341,6 @@ function createVisualConsole(
case "autocomplete-agent":
asyncTaskManager
.add(identifier + "-" + params.id, function(doneAsyncTask) {
console.log("prarms.agentName: " + params.value);
var dataObject = {
value: params.value
};
@ -393,6 +392,58 @@ function createVisualConsole(
})
.init();
break;
case "autocomplete-module":
asyncTaskManager
.add(identifier + "-" + params.id, function(doneAsyncTask) {
var abortable = autocompleteModuleVisualConsole(
baseUrl,
visualConsole.props.id,
params,
function(error, data) {
if (error || !data) {
console.log(
"[ERROR]",
"[VISUAL-CONSOLE-CLIENT]",
"[API]",
error ? error.message : "Invalid response"
);
done(error);
doneAsyncTask();
return;
}
if (typeof data === "string") {
try {
data = JSON.parse(data);
} catch (error) {
console.log(
"[ERROR]",
"[VISUAL-CONSOLE-CLIENT]",
"[API]",
error ? error.message : "Invalid response"
);
done(error);
doneAsyncTask();
return; // Stop task execution.
}
}
done(null, data);
doneAsyncTask();
}
);
return {
cancel: function() {
abortable.abort();
}
};
})
.init();
break;
default:
done(new Error("identifier not found"));
}
@ -993,6 +1044,73 @@ function autocompleteAgentsVisualConsole(baseUrl, vcId, data, callback) {
};
}
/**
* Fetch a Visual Console's structure and its items.
* @param {string} baseUrl Base URL to build the API path.
* @param {number} vcId Identifier of the Visual Console.
* @param {number} vcItemId Identifier of the Visual Console's item.
* @param {Object} data Data we want to save.
* @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 autocompleteModuleVisualConsole(baseUrl, vcId, data, callback) {
// var apiPath = baseUrl + "/include/rest-api";
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
.post(
apiPath,
{
page: "include/rest-api/index",
autocompleteModuleVisualConsole: 1,
visualConsoleId: vcId,
data: data
},
"json"
)
.done(handleSuccess)
.fail(handleFail);
// Abortable.
return {
abort: abort
};
}
/**
* Fetch a Visual Console's structure and its items.
* @param {string} baseUrl Base URL to build the API path.

381
pandora_console/include/rest-api/index.php
View File

@ -22,6 +22,7 @@ $getGroupsVisualConsoleItem = (bool) get_parameter('getGroupsVisualConsoleItem')
$getAllVisualConsole = (bool) get_parameter('getAllVisualConsole');
$getImagesVisualConsole = (bool) get_parameter('getImagesVisualConsole');
$autocompleteAgentsVisualConsole = (bool) get_parameter('autocompleteAgentsVisualConsole');
$autocompleteModuleVisualConsole = (bool) get_parameter('autocompleteModuleVisualConsole');
ob_clean();
@ -292,278 +293,162 @@ if ($getVisualConsole === true) {
} else if ($autocompleteAgentsVisualConsole) {
$params = (array) get_parameter('data', []);
$string = $params['value'];
// if ($search_agents && (!is_metaconsole() || $force_local)) {
// $id_agent = (int) get_parameter('id_agent');
$string = $params['value'];
$id_group = (int) get_parameter('id_group', -1);
$filter = [];
// TODO: ACL.
$id_group = (int) get_parameter('id_group', -1);
if ($id_group != -1) {
if ($id_group == 0) {
$user_groups = users_get_groups($config['id_user'], 'AR', true);
$user_groups = users_get_groups(
$config['id_user'],
'AR',
true
);
$filter['id_grupo'] = array_keys($user_groups);
} else {
$filter['id_grupo'] = $id_group;
}
}
$filter = [];
$filter['disabled'] = 0;
$data = [];
// Get agents for only the alias.
$filter_alias = $filter;
$filter_alias[] = '(alias LIKE "%'.$string.'%")';
$agents = agents_get_agents($filter_alias, ['id_agente', 'nombre', 'direccion', 'alias']);
if ($agents !== false) {
foreach ($agents as $agent) {
$data[] = [
'id' => $agent['id_agente'],
'name' => io_safe_output($agent['nombre']),
'alias' => io_safe_output($agent['alias']),
'ip' => io_safe_output($agent['direccion']),
'filter' => 'alias',
];
}
}
// Get agents for only the name.
$filter_alias = $filter;
$filter_agents[] = '(alias NOT LIKE "%'.$string.'%" AND nombre COLLATE utf8_general_ci LIKE "%'.$string.'%")';
$agents = agents_get_agents(
$filter_agents,
[
'id_agente',
'nombre',
'direccion',
'alias',
]
$filter[] = sprintf(
'(alias LIKE "%%%s%%")
OR (alias NOT LIKE "%%%s%%"
AND nombre COLLATE utf8_general_ci LIKE "%%%s%%")
OR (alias NOT LIKE "%%%s%%"
AND nombre COLLATE utf8_general_ci NOT LIKE "%%%s%%"
AND direccion LIKE "%%%s%%")
OR (alias NOT LIKE "%%%s%%"
AND nombre COLLATE utf8_general_ci NOT LIKE "%%%s%%"
AND direccion NOT LIKE "%%%s%%"
AND comentarios LIKE "%%%s%%"
)',
$string,
$string,
$string,
$string,
$string,
$string,
$string,
$string,
$string,
$string
);
if ($agents !== false) {
foreach ($agents as $agent) {
$data[] = [
'id' => $agent['id_agente'],
'name' => io_safe_output($agent['nombre']),
'alias' => io_safe_output($agent['alias']),
'ip' => io_safe_output($agent['direccion']),
'filter' => 'agent',
];
$data = [];
if (is_metaconsole() === true) {
enterprise_include_once('include/functions_metaconsole.php');
$metaconsole_connections = metaconsole_get_connection_names();
// For all nodes.
if (isset($metaconsole_connections) === true
&& is_array($metaconsole_connections) === true
) {
foreach ($metaconsole_connections as $metaconsole) {
// Get server connection data.
$server_data = metaconsole_get_connection($metaconsole);
// Establishes connection.
if (metaconsole_load_external_db($server_data) !== NOERR) {
continue;
}
$agents = agents_get_agents(
$filter,
[
'id_agente',
'nombre',
'direccion',
'alias',
]
);
if (isset($agents) === true && is_array($agents) === true) {
foreach ($agents as $agent) {
$data[] = [
'id' => $agent['id_agente'],
'name' => io_safe_output(
$agent['nombre']
),
'alias' => io_safe_output(
$agent['alias']
),
'ip' => io_safe_output(
$agent['direccion']
),
'filter' => 'alias',
'metaconsoleId' => $server_data['id'],
'metaconsoleName' => $metaconsole,
];
}
}
metaconsole_restore_db();
}
}
} else {
$agents = agents_get_agents(
$filter_alias,
[
'id_agente',
'nombre',
'direccion',
'alias',
]
);
if (isset($agents) === true && is_array($agents) === true) {
foreach ($agents as $agent) {
$data[] = [
'id' => $agent['id_agente'],
'name' => io_safe_output($agent['nombre']),
'alias' => io_safe_output($agent['alias']),
'ip' => io_safe_output($agent['direccion']),
'filter' => 'alias',
];
}
}
}
// Get agents for only the address.
$filter_alias = $filter;
$filter_address[] = '(alias NOT LIKE "%'.$string.'%" AND nombre COLLATE utf8_general_ci NOT LIKE "%'.$string.'%" AND direccion LIKE "%'.$string.'%")';
echo json_encode($data);
return;
} else if ($autocompleteModuleVisualConsole) {
$data = (array) get_parameter('data', []);
$agents = agents_get_agents($filter_address, ['id_agente', 'nombre', 'direccion', 'alias']);
if ($agents !== false) {
foreach ($agents as $agent) {
$data[] = [
'id' => $agent['id_agente'],
'name' => io_safe_output($agent['nombre']),
'alias' => io_safe_output($agent['alias']),
'ip' => io_safe_output($agent['direccion']),
'filter' => 'address',
];
$result = [];
if (is_metaconsole()) {
enterprise_include_once('include/functions_metaconsole.php');
$connection = metaconsole_get_connection_by_id($data['metaconsoleId']);
if (metaconsole_connect($connection) !== NOERR) {
echo json_encode($result);
return;
}
}
// Get agents for only the description.
$filter_alias = $filter;
$filter_description[] = '(alias NOT LIKE "%'.$string.'%" AND nombre COLLATE utf8_general_ci NOT LIKE "%'.$string.'%" AND direccion NOT LIKE "%'.$string.'%" AND comentarios LIKE "%'.$string.'%")';
$agent_modules = agents_get_modules(
$data['agentId']
);
$agents = agents_get_agents($filter_description, ['id_agente', 'nombre', 'direccion', 'alias']);
if ($agents !== false) {
foreach ($agents as $agent) {
$data[] = [
'id' => $agent['id_agente'],
'name' => io_safe_output($agent['nombre']),
'alias' => io_safe_output($agent['alias']),
'ip' => io_safe_output($agent['direccion']),
'filter' => 'description',
];
}
if (is_metaconsole()) {
// Restore db connection.
metaconsole_restore_db();
}
echo json_encode($data);
return;
/*
} else if ($search_agents && is_metaconsole()) {
$id_agent = (int) get_parameter('id_agent');
$string = (string) get_parameter('q');
// q is what autocomplete plugin gives
$id_group = (int) get_parameter('id_group', -1);
$addedItems = html_entity_decode((string) get_parameter('add'));
$addedItems = json_decode($addedItems);
$all = (string) get_parameter('all', 'all');
if (isset($agent_modules) === true && is_array($agent_modules) === true) {
$result = array_map(
function ($id) use ($agent_modules) {
return [
'moduleId' => $id,
'moduleName' => io_safe_output($agent_modules[$id]),
];
},
array_keys($agent_modules)
);
}
if ($addedItems != null) {
foreach ($addedItems as $item) {
echo $item."|\n";
}
}
$data = [];
$fields = [
'id_tagente AS id_agente',
'nombre',
'alias',
'direccion',
'id_tmetaconsole_setup AS id_server',
];
$filter = [];
if ($id_group != -1) {
if ($id_group == 0) {
$user_groups = users_get_groups($config['id_user'], 'AR', true);
$filter['id_grupo'] = array_keys($user_groups);
} else {
$filter['id_grupo'] = $id_group;
}
}
switch ($all) {
case 'enabled':
$filter['disabled'] = 0;
break;
}
if (!empty($id_agent)) {
$filter['id_agente'] = $id_agent;
}
if (!empty($string)) {
// Get agents for only the alias.
$filter_alias = $filter;
switch ($config['dbtype']) {
case 'mysql':
$filter_alias[] = '(alias COLLATE utf8_general_ci LIKE "%'.$string.'%")';
break;
case 'postgresql':
$filter_alias[] = '(alias LIKE \'%'.$string.'%\')';
break;
case 'oracle':
$filter_alias[] = '(UPPER(alias) LIKE UPPER(\'%'.$string.'%\'))';
break;
}
$agents = db_get_all_rows_filter('tmetaconsole_agent', $filter_alias, $fields);
if ($agents !== false) {
foreach ($agents as $agent) {
$data[] = [
'id' => $agent['id_agente'],
'name' => io_safe_output($agent['nombre']),
'alias' => io_safe_output($agent['alias']),
'ip' => io_safe_output($agent['direccion']),
'id_server' => $agent['id_server'],
'filter' => 'alias',
];
}
}
// Get agents for only the name.
$filter_agents = $filter;
switch ($config['dbtype']) {
case 'mysql':
$filter_agents[] = '(alias COLLATE utf8_general_ci NOT LIKE "%'.$string.'%" AND nombre COLLATE utf8_general_ci LIKE "%'.$string.'%")';
break;
case 'postgresql':
$filter_agents[] = '(alias NOT LIKE \'%'.$string.'%\' AND nombre LIKE \'%'.$string.'%\')';
break;
case 'oracle':
$filter_agents[] = '(UPPER(alias) NOT LIKE UPPER(\'%'.$string.'%\') AND UPPER(nombre) LIKE UPPER(\'%'.$string.'%\'))';
break;
}
$agents = db_get_all_rows_filter('tmetaconsole_agent', $filter_agents, $fields);
if ($agents !== false) {
foreach ($agents as $agent) {
$data[] = [
'id' => $agent['id_agente'],
'name' => io_safe_output($agent['nombre']),
'alias' => io_safe_output($agent['alias']),
'ip' => io_safe_output($agent['direccion']),
'id_server' => $agent['id_server'],
'filter' => 'agent',
];
}
}
// Get agents for only the address
$filter_address = $filter;
switch ($config['dbtype']) {
case 'mysql':
$filter_address[] = '(alias COLLATE utf8_general_ci NOT LIKE "%'.$string.'%" AND nombre COLLATE utf8_general_ci NOT LIKE "%'.$string.'%" AND direccion LIKE "%'.$string.'%")';
break;
case 'postgresql':
$filter_address[] = '(alias NOT LIKE \'%'.$string.'%\' AND nombre NOT LIKE \'%'.$string.'%\' AND direccion LIKE \'%'.$string.'%\')';
break;
case 'oracle':
$filter_address[] = '(UPPER(alias) NOT LIKE UPPER(\'%'.$string.'%\') AND UPPER(nombre) NOT LIKE UPPER(\'%'.$string.'%\') AND UPPER(direccion) LIKE UPPER(\'%'.$string.'%\'))';
break;
}
$agents = db_get_all_rows_filter('tmetaconsole_agent', $filter_address, $fields);
if ($agents !== false) {
foreach ($agents as $agent) {
$data[] = [
'id' => $agent['id_agente'],
'name' => io_safe_output($agent['nombre']),
'alias' => io_safe_output($agent['alias']),
'ip' => io_safe_output($agent['direccion']),
'id_server' => $agent['id_server'],
'filter' => 'address',
];
}
}
// Get agents for only the description
$filter_description = $filter;
switch ($config['dbtype']) {
case 'mysql':
$filter_description[] = '(alias COLLATE utf8_general_ci NOT LIKE "%'.$string.'%" AND nombre COLLATE utf8_general_ci NOT LIKE "%'.$string.'%" AND direccion NOT LIKE "%'.$string.'%" AND comentarios LIKE "%'.$string.'%")';
break;
case 'postgresql':
$filter_description[] = '(alias NOT LIKE \'%'.$string.'%\' AND nombre NOT LIKE \'%'.$string.'%\' AND direccion NOT LIKE \'%'.$string.'%\' AND comentarios LIKE \'%'.$string.'%\')';
break;
case 'oracle':
$filter_description[] = '(UPPER(alias) NOT LIKE UPPER(\'%'.$string.'%\') AND UPPER(nombre) NOT LIKE UPPER(\'%'.$string.'%\') AND UPPER(direccion) NOT LIKE UPPER(\'%'.$string.'%\') AND UPPER(comentarios) LIKE UPPER(\'%'.$string.'%\'))';
break;
}
$agents = db_get_all_rows_filter('tmetaconsole_agent', $filter_description, $fields);
if ($agents !== false) {
foreach ($agents as $agent) {
$data[] = [
'id' => $agent['id_agente'],
'name' => io_safe_output($agent['nombre']),
'alias' => io_safe_output($agent['alias']),
'ip' => io_safe_output($agent['direccion']),
'id_server' => $agent['id_server'],
'filter' => 'description',
];
}
}
}
echo json_encode($data);
return;
}
*/
echo json_encode($result);
return;
}
exit;

159
pandora_console/include/visual-console-client/vc.main.css
View File

@ -23,6 +23,11 @@
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
z-index: 1;
}
.visual-console-item.is-on-top {
z-index: 2;
}
.visual-console-item.is-editing {
@ -50,17 +55,32 @@
cursor: se-resize;
}
.visual-console-item.is-editing svg {
.visual-console-item.is-editing :first-child {
pointer-events: none;
}
.visual-console-spinner,
.visual-console-spinner :after {
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
@-webkit-keyframes spinner-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@keyframes spinner-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
.visual-console-spinner {
background-color: transparent;
margin: 0px auto;
@ -79,25 +99,19 @@
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes spinner-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
.visual-console-spinner,
.visual-console-spinner :after {
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
}
@keyframes spinner-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
.visual-console-spinner.small,
.visual-console-spinner.small :after {
width: 12px;
height: 12px;
}
.div-visual-console-spinner {
@ -124,6 +138,101 @@ form.visual-console-item-edition > input[type="submit"] {
right: 15px;
}
/* Styles for the solid icons */
.fa {
display: inline-block;
margin: 0;
}
.fa,
.fa > svg,
.fa.medium,
.fa.medium > svg {
width: 28px;
height: 28px;
}
.fa.fa-small,
.fa.fa-small > svg {
width: 14px;
height: 14px;
}
.fa.fa-large,
.fa.fa-large > svg {
width: 44px;
height: 44px;
}
.fa-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.fa-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
}
.autocomplete input {
/*background: pink;*/
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
overflow: visible;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
@font-face {
font-family: Alarm Clock;
src: url(alarm-clock.ttf);

2
pandora_console/include/visual-console-client/vc.main.css.map
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.min.js.map
View File

File diff suppressed because one or more lines are too long

91
visual_console_client/src/Item.ts
View File

@ -925,7 +925,9 @@ interface AgentAutocompleteData {
* This item consists of a label and agent select.
* Agent and module is stored in the property
*/
export class AgentModuleInputGroup extends InputGroup<Partial<WithAgentProps>> {
export class AgentModuleInputGroup extends InputGroup<
Partial<WithModuleProps>
> {
protected createContent(): HTMLElement | HTMLElement[] {
const agentLabel = document.createElement("label");
agentLabel.textContent = t("Agent");
@ -934,19 +936,23 @@ export class AgentModuleInputGroup extends InputGroup<Partial<WithAgentProps>> {
agentInput.type = "text";
agentInput.required = true;
agentInput.className = "autocomplete-agent";
//const imgeAgent = "";
//agentInput.style.backgroundImage = `url(${imgeAgent})`;
//agentInput.value = `${this.currentData.width ||
// this.initialData.width ||
// 0}`;
agentInput.value = `${this.currentData.agentId ||
this.initialData.agentId ||
0}`;
const handleDataRequested = (
value: string,
done: (data: AgentAutocompleteData[]) => void
) => {
this.requestData("autocomplete-agent", { value }, (error, data) => {
// Remove Item agentModule.
const deleteAgentModuleItem = document.getElementById(
"select-autocomplete-agent-module"
);
if (deleteAgentModuleItem) {
deleteAgentModuleItem.remove();
}
if (error) {
done([]);
return;
@ -993,18 +999,55 @@ export class AgentModuleInputGroup extends InputGroup<Partial<WithAgentProps>> {
? `${item.agentAlias} - ${item.agentAddress}`
: item.agentAlias;
agentLabel.appendChild(this.agentModuleInput(item));
return `${selectedItem || ""}`;
};
const initialAutocompleteInput = this.initialData.agentAddress
? `${this.initialData.agentAlias} - ${this.initialData.agentAddress}`
: this.initialData.agentAlias;
agentLabel.appendChild(
autocompleteInput("", handleDataRequested, renderListItem, handleSelected)
autocompleteInput(
notEmptyStringOr(initialAutocompleteInput, null),
handleDataRequested,
renderListItem,
handleSelected
)
);
const initialAgentId = parseIntOr(this.initialData.agentId, null);
if (initialAgentId !== null) {
agentLabel.appendChild(
this.agentModuleInput({
agentId: initialAgentId,
agentName: notEmptyStringOr(this.initialData.agentName, null),
agentAlias: notEmptyStringOr(this.initialData.agentAlias, null),
agentAddress: notEmptyStringOr(this.initialData.agentAddress, null),
agentDescription: notEmptyStringOr(
this.initialData.agentDescription,
null
),
metaconsoleId: parseIntOr(this.initialData.metaconsoleId, null)
})
);
}
return agentLabel;
}
private agentModuleInput(item: AgentAutocompleteData): HTMLElement {
// Remove Item agentModule.
const deleteAgentModuleItem = document.getElementById(
"select-autocomplete-agent-module"
);
if (deleteAgentModuleItem) {
deleteAgentModuleItem.remove();
}
const agentModuleLabel = document.createElement("label");
agentModuleLabel.id = "select-autocomplete-agent-module";
agentModuleLabel.textContent = t("Module");
// Create element Spinner.
@ -1014,8 +1057,8 @@ export class AgentModuleInputGroup extends InputGroup<Partial<WithAgentProps>> {
});
agentModuleLabel.appendChild(spinner);
// Init request
this.requestData("autocomplete-module", {}, (error, data) => {
// Init request.
this.requestData("autocomplete-module", { ...item }, (error, data) => {
// Remove Spinner.
spinner.remove();
@ -1036,28 +1079,20 @@ export class AgentModuleInputGroup extends InputGroup<Partial<WithAgentProps>> {
data.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option.name;
optionElement.textContent = option.name;
optionElement.value = option.moduleId;
optionElement.textContent = option.moduleName;
agentModuleSelect.appendChild(optionElement);
});
/*
labelSelect.addEventListener("change", event => {
const imageSrc = (event.target as HTMLSelectElement).value;
this.updateData({ [imageKey]: imageSrc });
if (imageSrc != null) {
const imageItem = data.find(item => item.name === imageSrc);
this.getImage(imageItem, divImage);
}
agentModuleSelect.addEventListener("change", event => {
this.updateData({
moduleId: parseIntOr((event.target as HTMLSelectElement).value, 0)
});
});
const valueImage = `${this.currentData[imageKey] ||
this.initialData[imageKey] ||
null}`;
labelSelect.value = valueImage;
*/
agentModuleSelect.value = `${this.currentData.moduleId ||
this.initialData.moduleId ||
0}`;
agentModuleLabel.appendChild(agentModuleSelect);
}

4
visual_console_client/src/items/ColorCloud.ts
View File

@ -1,7 +1,8 @@
import {
WithModuleProps,
LinkedVisualConsoleProps,
AnyObject
AnyObject,
WithAgentProps
} from "../lib/types";
import { modulePropsDecoder, linkedVCPropsDecoder, t } from "../lib";
import Item, {
@ -26,6 +27,7 @@ export type ColorCloudProps = {
}[];
// TODO: Add the rest of the color cloud values?
} & ItemProps &
WithAgentProps &
WithModuleProps &
LinkedVisualConsoleProps;

20
visual_console_client/src/lib/autocomplete.css
View File

@ -3,28 +3,16 @@
position: relative;
display: inline-block;
}
/*
input {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
input[type=submit] {
background-color: DodgerBlue;
color: #fff;
}
*/
.autocomplete input {
/*background: pink;*/
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
overflow: visible;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;

3
visual_console_client/src/lib/index.ts
View File

@ -173,7 +173,7 @@ export function sizePropsDecoder(data: AnyObject): Size | never {
*/
export function agentPropsDecoder(data: AnyObject): WithAgentProps {
const agentProps: WithAgentProps = {
agentId: parseIntOr(data.agent, null),
agentId: parseIntOr(data.agentId, null),
agentName: notEmptyStringOr(data.agentName, null),
agentAlias: notEmptyStringOr(data.agentAlias, null),
agentDescription: notEmptyStringOr(data.agentDescription, null),
@ -979,6 +979,7 @@ export function autocompleteInput<T>(
const input = document.createElement("input");
input.type = "text";
if (initialValue !== null) input.value = initialValue;
const list = document.createElement("div");
list.classList.add("autocomplete-items");