mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Refactor editor.js to reduce duplication of editor setup
Part of #93 This reduces the duplication in code that creates the both the normal- and the config-node dialogs. It also identifies the key points that credentials handling should be introduced.
This commit is contained in:
Nick O'Leary
parent
fb0cae0935
commit
0d6525623d
@ -18,75 +18,6 @@ RED.editor = function() {
|
|||||||
|
|
||||||
// TODO: should IMPORT/EXPORT get their own dialogs?
|
// TODO: should IMPORT/EXPORT get their own dialogs?
|
||||||
|
|
||||||
function onInputLookupClick(select,name,type) {
|
|
||||||
return function(e) {
|
|
||||||
showEditConfigNodeDialog(name,type,select.find(":selected").val());
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function showEditDialog(node) {
|
|
||||||
editing_node = node;
|
|
||||||
RED.view.state(RED.state.EDITING);
|
|
||||||
$("#dialog-form").html($("script[data-template-name='"+node.type+"']").html());
|
|
||||||
if (node._def.defaults) {
|
|
||||||
for (var d in node._def.defaults) {
|
|
||||||
var def = node._def.defaults[d];
|
|
||||||
var input = $("#node-input-"+d);
|
|
||||||
|
|
||||||
var node_def = RED.nodes.getType(def.type);
|
|
||||||
|
|
||||||
if (node_def && node_def.category == "config") {
|
|
||||||
input.replaceWith('<select style="width: 60%;" id="node-input-'+d+'"></select>');
|
|
||||||
updateConfigNodeSelect(d,def.type,node[d]);
|
|
||||||
var select = $("#node-input-"+d);
|
|
||||||
select.after(' <a id="node-input-lookup-'+d+'" class="btn"><i class="icon icon-pencil"></i></a>');
|
|
||||||
$('#node-input-lookup-'+d).click(onInputLookupClick(select,d,def.type));
|
|
||||||
var label = "";
|
|
||||||
var configNode = RED.nodes.node(node[d]);
|
|
||||||
if (configNode && node_def.label) {
|
|
||||||
if (typeof node_def.label == "function") {
|
|
||||||
label = node_def.label.call(configNode);
|
|
||||||
} else {
|
|
||||||
label = node_def.label;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
input.val(label);
|
|
||||||
} else {
|
|
||||||
if (input.attr('type') === "checkbox") {
|
|
||||||
input.prop('checked',node[d]);
|
|
||||||
} else {
|
|
||||||
var val = node[d];
|
|
||||||
if (node[d] == null) {
|
|
||||||
val = "";
|
|
||||||
}
|
|
||||||
input.val(val);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$("#node-input-"+d).change(function() {
|
|
||||||
var n = node;
|
|
||||||
var property = d;
|
|
||||||
return function() {
|
|
||||||
if (!validateNodeProperty(node, property,this.value)) {
|
|
||||||
$(this).addClass("input-error");
|
|
||||||
} else {
|
|
||||||
$(this).removeClass("input-error");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (node._def.oneditprepare) {
|
|
||||||
node._def.oneditprepare.call(node);
|
|
||||||
}
|
|
||||||
if (node._def.defaults) {
|
|
||||||
for (var d in node._def.defaults) {
|
|
||||||
$("#node-input-"+d).change();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$( "#dialog" ).dialog("option","title","Edit "+node.type+" node").dialog( "open" );
|
|
||||||
}
|
|
||||||
|
|
||||||
function validateNode(node) {
|
function validateNode(node) {
|
||||||
var oldValue = node.valid;
|
var oldValue = node.valid;
|
||||||
node.valid = true;
|
node.valid = true;
|
||||||
@ -226,6 +157,14 @@ RED.editor = function() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (editing_node._def.credentials) {
|
||||||
|
// TODO: credentials
|
||||||
|
// 1. call $.ajax/POST 'credentials/'+editing_node.type+"/"+editing_node.id
|
||||||
|
// with the new values - only pass back password fields
|
||||||
|
// that do not equal '__PWRD__'
|
||||||
|
// See 10-mqtt.html:150 for example code
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
var removedLinks = updateNodeProperties(editing_node);
|
var removedLinks = updateNodeProperties(editing_node);
|
||||||
if (changed) {
|
if (changed) {
|
||||||
@ -292,38 +231,127 @@ RED.editor = function() {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
function showEditConfigNodeDialog(name,type,id) {
|
* Create a config-node select box for this property
|
||||||
var adding = (id == "_ADD_");
|
* @param node - the node being edited
|
||||||
$("#dialog-config-form").html($("script[data-template-name='"+type+"']").html());
|
* @param property - the name of the field
|
||||||
|
* @param type - the type of the config-node
|
||||||
|
*/
|
||||||
|
function prepareConfigNodeSelect(node,property,type) {
|
||||||
|
var input = $("#node-input-"+property);
|
||||||
var node_def = RED.nodes.getType(type);
|
var node_def = RED.nodes.getType(type);
|
||||||
var configNode = RED.nodes.node(id);
|
|
||||||
|
|
||||||
for (var d in node_def.defaults) {
|
input.replaceWith('<select style="width: 60%;" id="node-input-'+property+'"></select>');
|
||||||
var input = $("#node-config-input-"+d);
|
updateConfigNodeSelect(property,type,node[property]);
|
||||||
if (id == "_ADD_") {
|
var select = $("#node-input-"+property);
|
||||||
input.val(node_def.defaults[d].value);
|
select.after(' <a id="node-input-lookup-'+property+'" class="btn"><i class="icon icon-pencil"></i></a>');
|
||||||
|
$('#node-input-lookup-'+property).click(function(e) {
|
||||||
|
showEditConfigNodeDialog(property,type,select.find(":selected").val());
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
var label = "";
|
||||||
|
var configNode = RED.nodes.node(node[property]);
|
||||||
|
if (configNode && node_def.label) {
|
||||||
|
if (typeof node_def.label == "function") {
|
||||||
|
label = node_def.label.call(configNode);
|
||||||
} else {
|
} else {
|
||||||
input.val(configNode[d]);
|
label = node_def.label;
|
||||||
}
|
}
|
||||||
$("#node-config-input-"+d).change(function() {
|
|
||||||
var n = configNode;
|
|
||||||
if (adding) {
|
|
||||||
n = {_def:node_def};
|
|
||||||
}
|
}
|
||||||
var property = d;
|
input.val(label);
|
||||||
return function() {
|
}
|
||||||
if (!validateNodeProperty(n, property,this.value)) {
|
|
||||||
|
/**
|
||||||
|
* Populate the editor dialog input field for this property
|
||||||
|
* @param node - the node being edited
|
||||||
|
* @param property - the name of the field
|
||||||
|
* @param prefix - the prefix to use in the input element ids (node-input|node-config-input)
|
||||||
|
*/
|
||||||
|
function preparePropertyEditor(node,property,prefix) {
|
||||||
|
var input = $("#"+prefix+"-"+property);
|
||||||
|
if (input.attr('type') === "checkbox") {
|
||||||
|
input.prop('checked',node[property]);
|
||||||
|
} else {
|
||||||
|
var val = node[property];
|
||||||
|
if (val == null) {
|
||||||
|
val = "";
|
||||||
|
}
|
||||||
|
input.val(val);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add an on-change handler to revalidate a node field
|
||||||
|
* @param node - the node being edited
|
||||||
|
* @param property - the name of the field
|
||||||
|
* @param prefix - the prefix to use in the input element ids (node-input|node-config-input)
|
||||||
|
*/
|
||||||
|
function attachPropertyChangeHandler(node,property,prefix) {
|
||||||
|
$("#"+prefix+"-"+property).change(function() {
|
||||||
|
if (!validateNodeProperty(node, property,this.value)) {
|
||||||
$(this).addClass("input-error");
|
$(this).addClass("input-error");
|
||||||
} else {
|
} else {
|
||||||
$(this).removeClass("input-error");
|
$(this).removeClass("input-error");
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
}());
|
|
||||||
$("#node-config-input-"+d).change();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prepare all of the editor dialog fields
|
||||||
|
* @param node - the node being edited
|
||||||
|
* @param definition - the node definition
|
||||||
|
* @param prefix - the prefix to use in the input element ids (node-input|node-config-input)
|
||||||
|
*/
|
||||||
|
function prepareEditDialog(node,definition,prefix) {
|
||||||
|
for (var d in definition.defaults) {
|
||||||
|
if (definition.defaults[d].type) {
|
||||||
|
prepareConfigNodeSelect(node,d,definition.defaults[d].type);
|
||||||
|
} else {
|
||||||
|
preparePropertyEditor(node,d,prefix);
|
||||||
|
}
|
||||||
|
attachPropertyChangeHandler(node,d,prefix);
|
||||||
|
}
|
||||||
|
if (definition.credentials) {
|
||||||
|
// TODO: credentials
|
||||||
|
// 1. call $.getJSON("credentials/"+node.type+"/"+node.id)
|
||||||
|
// 2. with the response, foreach definition.credentials:
|
||||||
|
// 1. if response.X exists, set prefix-X input field to response.X
|
||||||
|
// 2. if response.hasX exists, set prefix-X password field to '__PWRD__'
|
||||||
|
}
|
||||||
|
if (definition.oneditprepare) {
|
||||||
|
definition.oneditprepare.call(node);
|
||||||
|
}
|
||||||
|
for (var d in definition.defaults) {
|
||||||
|
$("#"+prefix+"-"+d).change();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showEditDialog(node) {
|
||||||
|
editing_node = node;
|
||||||
|
RED.view.state(RED.state.EDITING);
|
||||||
|
$("#dialog-form").html($("script[data-template-name='"+node.type+"']").html());
|
||||||
|
prepareEditDialog(node,node._def,"node-input");
|
||||||
|
$( "#dialog" ).dialog("option","title","Edit "+node.type+" node").dialog( "open" );
|
||||||
|
}
|
||||||
|
|
||||||
|
function showEditConfigNodeDialog(name,type,id) {
|
||||||
|
var adding = (id == "_ADD_");
|
||||||
|
var node_def = RED.nodes.getType(type);
|
||||||
|
|
||||||
|
var configNode = RED.nodes.node(id);
|
||||||
|
if (configNode == null) {
|
||||||
|
configNode = {
|
||||||
|
id: (1+Math.random()*4294967295).toString(16),
|
||||||
|
_def: node_def,
|
||||||
|
type: type
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#dialog-config-form").html($("script[data-template-name='"+type+"']").html());
|
||||||
|
prepareEditDialog(configNode,node_def,"node-config-input");
|
||||||
|
|
||||||
var buttons = $( "#node-config-dialog" ).dialog("option","buttons");
|
var buttons = $( "#node-config-dialog" ).dialog("option","buttons");
|
||||||
if (id == "_ADD_") {
|
if (adding) {
|
||||||
if (buttons.length == 3) {
|
if (buttons.length == 3) {
|
||||||
buttons = buttons.splice(1);
|
buttons = buttons.splice(1);
|
||||||
}
|
}
|
||||||
@ -341,6 +369,10 @@ RED.editor = function() {
|
|||||||
var configNode = RED.nodes.node(configId);
|
var configNode = RED.nodes.node(configId);
|
||||||
var configTypeDef = RED.nodes.getType(configType);
|
var configTypeDef = RED.nodes.getType(configType);
|
||||||
|
|
||||||
|
if (configTypeDef.credentials) {
|
||||||
|
// CREDENTIAL TODO
|
||||||
|
// 1. call $.ajax/DELETE "credentials/"+configType+"/"+configId
|
||||||
|
}
|
||||||
if (configTypeDef.ondelete) {
|
if (configTypeDef.ondelete) {
|
||||||
configTypeDef.ondelete.call(RED.nodes.node(configId));
|
configTypeDef.ondelete.call(RED.nodes.node(configId));
|
||||||
}
|
}
|
||||||
@ -366,23 +398,10 @@ RED.editor = function() {
|
|||||||
}
|
}
|
||||||
$( "#node-config-dialog" ).dialog("option","buttons",buttons);
|
$( "#node-config-dialog" ).dialog("option","buttons",buttons);
|
||||||
|
|
||||||
if (adding) {
|
|
||||||
id = (1+Math.random()*4294967295).toString(16);
|
|
||||||
}
|
|
||||||
if (node_def.oneditprepare) {
|
|
||||||
var cn = RED.nodes.node(id);
|
|
||||||
if (cn) {
|
|
||||||
node_def.oneditprepare.call(cn);
|
|
||||||
} else {
|
|
||||||
node_def.oneditprepare.call({id:id});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
$( "#node-config-dialog" )
|
$( "#node-config-dialog" )
|
||||||
.dialog("option","node-adding",adding)
|
.dialog("option","node-adding",adding)
|
||||||
.dialog("option","node-property",name)
|
.dialog("option","node-property",name)
|
||||||
.dialog("option","node-id",id)
|
.dialog("option","node-id",configNode.id)
|
||||||
.dialog("option","node-type",type)
|
.dialog("option","node-type",type)
|
||||||
.dialog("option","title",(adding?"Add new ":"Edit ")+type+" config node")
|
.dialog("option","title",(adding?"Add new ":"Edit ")+type+" config node")
|
||||||
.dialog( "open" );
|
.dialog( "open" );
|
||||||
@ -432,7 +451,6 @@ RED.editor = function() {
|
|||||||
}
|
}
|
||||||
configNode.label = configTypeDef.label;
|
configNode.label = configTypeDef.label;
|
||||||
configNode._def = configTypeDef;
|
configNode._def = configTypeDef;
|
||||||
//console.log(nn.id,nn.label());
|
|
||||||
RED.nodes.add(configNode);
|
RED.nodes.add(configNode);
|
||||||
updateConfigNodeSelect(configProperty,configType,configNode.id);
|
updateConfigNodeSelect(configProperty,configType,configNode.id);
|
||||||
} else {
|
} else {
|
||||||
@ -443,7 +461,13 @@ RED.editor = function() {
|
|||||||
}
|
}
|
||||||
updateConfigNodeSelect(configProperty,configType,configId);
|
updateConfigNodeSelect(configProperty,configType,configId);
|
||||||
}
|
}
|
||||||
|
if (configTypeDef.credentials) {
|
||||||
|
// TODO: credentials
|
||||||
|
// 1. call $.ajax/POST 'credentials/'+configType+"/"+configId
|
||||||
|
// with the new values - only pass back password fields
|
||||||
|
// that do not equal '__PWRD__'
|
||||||
|
// See 10-mqtt.html:150 for example code
|
||||||
|
}
|
||||||
if (configTypeDef.oneditsave) {
|
if (configTypeDef.oneditsave) {
|
||||||
configTypeDef.oneditsave.call(RED.nodes.node(configId));
|
configTypeDef.oneditsave.call(RED.nodes.node(configId));
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user