1
0
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 2014-05-06 23:42:54 +01:00
parent fb0cae0935
commit 0d6525623d

View File

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