mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Config node tray
This commit is contained in:
Nick O'Leary
parent
41b10fd5e4
commit
6354b68bae
@ -596,7 +596,8 @@ RED.editor = (function() {
|
||||
},0);
|
||||
}
|
||||
},
|
||||
open: function(trayBody) {
|
||||
open: function(tray) {
|
||||
var trayBody = tray.find('.editor-tray-body');
|
||||
RED.keyboard.disable();
|
||||
var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(trayBody);
|
||||
dialogForm.html($("script[data-template-name='"+type+"']").html());
|
||||
@ -656,7 +657,6 @@ RED.editor = (function() {
|
||||
RED.sidebar.info.refresh(editing_node);
|
||||
}
|
||||
RED.workspaces.refresh();
|
||||
RED.tray.close();
|
||||
}
|
||||
}
|
||||
/*).parent().on('keydown', function(evt) {
|
||||
@ -669,11 +669,15 @@ RED.editor = (function() {
|
||||
*/
|
||||
RED.tray.show(trayOptions);
|
||||
}
|
||||
|
||||
/**
|
||||
* name - name of the property that holds this config node
|
||||
* type - type of config node
|
||||
* id - id of config node to edit. _ADD_ for a new one
|
||||
*/
|
||||
function showEditConfigNodeDialog(name,type,id) {
|
||||
var adding = (id == "_ADD_");
|
||||
var node_def = RED.nodes.getType(type);
|
||||
editing_config_node = RED.nodes.node(id);
|
||||
var editing_config_node = RED.nodes.node(id);
|
||||
|
||||
var ns;
|
||||
if (node_def.set.module === "node-red") {
|
||||
@ -681,12 +685,10 @@ RED.editor = (function() {
|
||||
} else {
|
||||
ns = node_def.set.id;
|
||||
}
|
||||
|
||||
var activeWorkspace = RED.nodes.workspace(RED.workspaces.active());
|
||||
if (!activeWorkspace) {
|
||||
activeWorkspace = RED.nodes.subflow(RED.workspaces.active());
|
||||
}
|
||||
|
||||
if (editing_config_node == null) {
|
||||
editing_config_node = {
|
||||
id: (1+Math.random()*4294967295).toString(16),
|
||||
@ -702,10 +704,33 @@ RED.editor = (function() {
|
||||
}
|
||||
editing_config_node["_"] = node_def._;
|
||||
}
|
||||
editStack.push({node:editing_config_node});
|
||||
RED.view.state(RED.state.EDITING);
|
||||
var trayOptions = {
|
||||
title: (adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
|
||||
resize: function() {
|
||||
var editing_node = editStack[editStack.length-1];
|
||||
if (editing_node && editing_node.node._def.oneditresize) {
|
||||
setTimeout(function() {
|
||||
var form = $("#node-config-dialog-edit-form");
|
||||
editing_node.node._def.oneditresize.call(editing_node.node,{width:form.width(),height:form.height()});
|
||||
},0);
|
||||
}
|
||||
},
|
||||
open: function(tray) {
|
||||
var trayHeader = tray.find(".editor-tray-header");
|
||||
var trayBody = tray.find(".editor-tray-body");
|
||||
var trayFooter = tray.find(".editor-tray-footer");
|
||||
|
||||
$("#node-config-dialog-edit-form").html($("script[data-template-name='"+type+"']").html());
|
||||
trayFooter.prepend('<div id="node-config-dialog-user-count"><i class="fa fa-info-circle"></i> <span></span></div>');
|
||||
trayHeader.append('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
|
||||
|
||||
$("#dialog-config-form").find('[data-i18n]').each(function() {
|
||||
if (RED.view.state() != RED.state.EDITING) {
|
||||
RED.keyboard.disable();
|
||||
}
|
||||
var dialogForm = $('<form id="node-config-dialog-edit-form" class="form-horizontal"></form>').appendTo(trayBody);
|
||||
dialogForm.html($("script[data-template-name='"+type+"']").html());
|
||||
dialogForm.find('[data-i18n]').each(function() {
|
||||
var current = $(this).attr("data-i18n");
|
||||
if (current.indexOf(":") === -1) {
|
||||
var prefix = "";
|
||||
@ -717,70 +742,8 @@ RED.editor = (function() {
|
||||
$(this).attr("data-i18n",prefix+ns+":"+current);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$('<input type="text" style="display: none;" />').prependTo(dialogForm);
|
||||
prepareEditDialog(editing_config_node,node_def,"node-config-input");
|
||||
|
||||
var buttons = $( "#node-config-dialog" ).dialog("option","buttons");
|
||||
if (adding) {
|
||||
if (buttons.length == 3) {
|
||||
buttons = buttons.splice(1);
|
||||
}
|
||||
buttons[0].text = "Add";
|
||||
$("#node-config-dialog-user-count").find("span").html("").parent().hide();
|
||||
} else {
|
||||
if (buttons.length == 2) {
|
||||
buttons.unshift({
|
||||
class: 'leftButton',
|
||||
text: RED._("editor.configDelete"),
|
||||
click: function() {
|
||||
var configProperty = $(this).dialog('option','node-property');
|
||||
var configId = $(this).dialog('option','node-id');
|
||||
var configType = $(this).dialog('option','node-type');
|
||||
|
||||
var configTypeDef = RED.nodes.getType(configType);
|
||||
|
||||
if (configTypeDef.ondelete) {
|
||||
configTypeDef.ondelete.call(editing_config_node);
|
||||
}
|
||||
if (configTypeDef.oneditdelete) {
|
||||
configTypeDef.oneditdelete.call(editing_config_node);
|
||||
}
|
||||
var historyEvent = {
|
||||
t:'delete',
|
||||
nodes:[editing_config_node],
|
||||
changes: {},
|
||||
dirty: RED.nodes.dirty()
|
||||
}
|
||||
RED.nodes.remove(configId);
|
||||
for (var i=0;i<editing_config_node.users.length;i++) {
|
||||
var user = editing_config_node.users[i];
|
||||
historyEvent.changes[user.id] = {
|
||||
changed: user.changed,
|
||||
valid: user.valid
|
||||
};
|
||||
for (var d in user._def.defaults) {
|
||||
if (user._def.defaults.hasOwnProperty(d) && user[d] == configId) {
|
||||
historyEvent.changes[user.id][d] = configId
|
||||
user[d] = "";
|
||||
user.changed = true;
|
||||
user.dirty = true;
|
||||
}
|
||||
}
|
||||
validateNode(user);
|
||||
}
|
||||
updateConfigNodeSelect(configProperty,configType,"");
|
||||
RED.nodes.dirty(true);
|
||||
$( this ).dialog( "close" );
|
||||
RED.view.redraw();
|
||||
RED.history.push(historyEvent);
|
||||
}
|
||||
});
|
||||
}
|
||||
buttons[1].text = "Update";
|
||||
$("#node-config-dialog-user-count").find("span").html(RED._("editor.nodesUse", {count:editing_config_node.users.length})).parent().show();
|
||||
}
|
||||
|
||||
if (editing_config_node._def.exclusive) {
|
||||
$("#node-config-dialog-scope").hide();
|
||||
} else {
|
||||
@ -788,13 +751,11 @@ RED.editor = (function() {
|
||||
}
|
||||
$("#node-config-dialog-scope-warning").hide();
|
||||
|
||||
|
||||
var nodeUserFlows = {};
|
||||
editing_config_node.users.forEach(function(n) {
|
||||
nodeUserFlows[n.z] = true;
|
||||
});
|
||||
var flowCount = Object.keys(nodeUserFlows).length;
|
||||
|
||||
var tabSelect = $("#node-config-dialog-scope").empty();
|
||||
tabSelect.off("change");
|
||||
tabSelect.append('<option value=""'+(!editing_config_node.z?" selected":"")+' data-i18n="sidebar.config.global"></option>');
|
||||
@ -828,22 +789,165 @@ RED.editor = (function() {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//tabSelect.append('<option value="'+activeWorkspace.id+'"'+(activeWorkspace.id==configNode.z?" selected":"")+'>'+workspaceLabel+'</option>');
|
||||
tabSelect.i18n();
|
||||
|
||||
$( "#node-config-dialog" ).dialog("option","buttons",buttons);
|
||||
dialogForm.i18n();
|
||||
|
||||
$("#node-config-dialog").i18n();
|
||||
$("#node-config-dialog-user-count").find("span").html(RED._("editor.nodesUse", {count:editing_config_node.users.length})).parent().show();
|
||||
|
||||
$( "#node-config-dialog" )
|
||||
.dialog("option","node-adding",adding)
|
||||
.dialog("option","node-property",name)
|
||||
.dialog("option","node-id",editing_config_node.id)
|
||||
.dialog("option","node-type",type)
|
||||
.dialog("option","title",(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})))
|
||||
.dialog( "open" );
|
||||
},
|
||||
close: function() {
|
||||
if (RED.view.state() != RED.state.EDITING) {
|
||||
RED.keyboard.enable();
|
||||
}
|
||||
RED.workspaces.refresh();
|
||||
}
|
||||
}
|
||||
trayOptions.buttons = [
|
||||
{
|
||||
id: "node-config-dialog-ok",
|
||||
text: adding?RED._("editor.configAdd"):RED._("editor.configUpdate"),
|
||||
click: function() {
|
||||
var configProperty = name;
|
||||
var configId = editing_config_node.id;
|
||||
var configType = type;
|
||||
var configAdding = adding;
|
||||
var configTypeDef = RED.nodes.getType(configType);
|
||||
var d;
|
||||
var input;
|
||||
var scope = $("#node-config-dialog-scope").val();
|
||||
for (d in configTypeDef.defaults) {
|
||||
if (configTypeDef.defaults.hasOwnProperty(d)) {
|
||||
input = $("#node-config-input-"+d);
|
||||
if (input.attr('type') === "checkbox") {
|
||||
editing_config_node[d] = input.prop('checked');
|
||||
} else {
|
||||
editing_config_node[d] = input.val();
|
||||
}
|
||||
}
|
||||
}
|
||||
editing_config_node.label = configTypeDef.label;
|
||||
editing_config_node.z = scope;
|
||||
|
||||
if (scope) {
|
||||
editing_config_node.users = editing_config_node.users.filter(function(n) {
|
||||
var keep = true;
|
||||
for (var d in n._def.defaults) {
|
||||
if (n._def.defaults.hasOwnProperty(d)) {
|
||||
if (n._def.defaults[d].type === editing_config_node.type &&
|
||||
n[d] === editing_config_node.id &&
|
||||
n.z !== scope) {
|
||||
keep = false;
|
||||
n[d] = null;
|
||||
n.dirty = true;
|
||||
n.changed = true;
|
||||
validateNode(n);
|
||||
}
|
||||
}
|
||||
}
|
||||
return keep;
|
||||
});
|
||||
}
|
||||
|
||||
if (configAdding) {
|
||||
RED.nodes.add(editing_config_node);
|
||||
}
|
||||
|
||||
if (configTypeDef.oneditsave) {
|
||||
configTypeDef.oneditsave.call(editing_config_node);
|
||||
}
|
||||
if (configTypeDef.credentials) {
|
||||
updateNodeCredentials(editing_config_node,configTypeDef.credentials,"node-config-input");
|
||||
}
|
||||
validateNode(editing_config_node);
|
||||
for (var i=0;i<editing_config_node.users.length;i++) {
|
||||
var user = editing_config_node.users[i];
|
||||
validateNode(user);
|
||||
}
|
||||
|
||||
updateConfigNodeSelect(configProperty,configType,editing_config_node.id);
|
||||
|
||||
RED.nodes.dirty(true);
|
||||
RED.view.redraw(true);
|
||||
RED.tray.close();
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-config-dialog-cancel",
|
||||
text: RED._("common.label.cancel"),
|
||||
click: function() {
|
||||
var configType = type;
|
||||
var configId = editing_config_node.id;
|
||||
var configAdding = adding;
|
||||
var configTypeDef = RED.nodes.getType(configType);
|
||||
|
||||
if (configTypeDef.oneditcancel) {
|
||||
// TODO: what to pass as this to call
|
||||
if (configTypeDef.oneditcancel) {
|
||||
var cn = RED.nodes.node(configId);
|
||||
if (cn) {
|
||||
configTypeDef.oneditcancel.call(cn,false);
|
||||
} else {
|
||||
configTypeDef.oneditcancel.call({id:configId},true);
|
||||
}
|
||||
}
|
||||
}
|
||||
RED.tray.close();
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
if (!adding) {
|
||||
trayOptions.buttons.unshift({
|
||||
class: 'leftButton',
|
||||
text: RED._("editor.configDelete"),
|
||||
click: function() {
|
||||
var configProperty = name;
|
||||
var configId = editing_config_node.id;
|
||||
var configType = type;
|
||||
var configTypeDef = RED.nodes.getType(configType);
|
||||
|
||||
if (configTypeDef.ondelete) {
|
||||
configTypeDef.ondelete.call(editing_config_node);
|
||||
}
|
||||
if (configTypeDef.oneditdelete) {
|
||||
configTypeDef.oneditdelete.call(editing_config_node);
|
||||
}
|
||||
var historyEvent = {
|
||||
t:'delete',
|
||||
nodes:[editing_config_node],
|
||||
changes: {},
|
||||
dirty: RED.nodes.dirty()
|
||||
}
|
||||
RED.nodes.remove(configId);
|
||||
for (var i=0;i<editing_config_node.users.length;i++) {
|
||||
var user = editing_config_node.users[i];
|
||||
historyEvent.changes[user.id] = {
|
||||
changed: user.changed,
|
||||
valid: user.valid
|
||||
};
|
||||
for (var d in user._def.defaults) {
|
||||
if (user._def.defaults.hasOwnProperty(d) && user[d] == configId) {
|
||||
historyEvent.changes[user.id][d] = configId
|
||||
user[d] = "";
|
||||
user.changed = true;
|
||||
user.dirty = true;
|
||||
}
|
||||
}
|
||||
validateNode(user);
|
||||
}
|
||||
updateConfigNodeSelect(configProperty,configType,"");
|
||||
RED.nodes.dirty(true);
|
||||
RED.view.redraw();
|
||||
RED.history.push(historyEvent);
|
||||
RED.tray.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
RED.tray.show(trayOptions);
|
||||
}
|
||||
|
||||
|
||||
function updateConfigNodeSelect(name,type,value) {
|
||||
var button = $("#node-input-edit-"+name);
|
||||
|
||||
@ -20,6 +20,62 @@ RED.tray = (function() {
|
||||
function resize() {
|
||||
|
||||
}
|
||||
function showTray(options) {
|
||||
var el = $('<div class="editor-tray"></div>');
|
||||
var header = $('<div class="editor-tray-header">'+(options.title||"")+'</div>').appendTo(el);
|
||||
var body = $('<div class="editor-tray-body"></div>').appendTo(el);
|
||||
var footer = $('<div class="editor-tray-footer"></div>').appendTo(el);
|
||||
if (options.buttons) {
|
||||
for (var i=0;i<options.buttons.length;i++) {
|
||||
var button = options.buttons[i];
|
||||
|
||||
var b = $('<button>').appendTo(footer);
|
||||
if (button.id) {
|
||||
b.attr('id',button.id);
|
||||
}
|
||||
if (button.text) {
|
||||
b.text(button.text);
|
||||
}
|
||||
if (button.click) {
|
||||
b.click(button.click);
|
||||
}
|
||||
if (button.class) {
|
||||
b.addClass(button.class);
|
||||
}
|
||||
}
|
||||
}
|
||||
el.appendTo("#editor-stack");
|
||||
var tray = {
|
||||
tray: el,
|
||||
header: header,
|
||||
body: body,
|
||||
footer: footer,
|
||||
options: options
|
||||
};
|
||||
if (options.open) {
|
||||
options.open(el);
|
||||
}
|
||||
|
||||
$("#editor-shade").show();
|
||||
el.css({
|
||||
right: -(el.width()+10)+"px",
|
||||
transition: "right 0.2s ease"
|
||||
});
|
||||
$("#workspace").scrollLeft(0);
|
||||
|
||||
stack.push(tray);
|
||||
|
||||
setTimeout(function() {
|
||||
var trayHeight = el.height()-header.outerHeight()-footer.outerHeight();
|
||||
body.height(trayHeight-40);
|
||||
|
||||
if (options.resize) {
|
||||
options.resize();
|
||||
}
|
||||
el.css({right:0});
|
||||
},0);
|
||||
}
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
$( window ).resize(function() {
|
||||
@ -43,61 +99,12 @@ RED.tray = (function() {
|
||||
});
|
||||
setTimeout(function() {
|
||||
oldTray.tray.detach();
|
||||
},400)
|
||||
}
|
||||
var el = $('<div class="editor-tray"></div>');
|
||||
var header = $('<div class="editor-tray-header">'+(options.title||"")+'</div>').appendTo(el);
|
||||
var body = $('<div class="editor-tray-body"></div>').appendTo(el);
|
||||
var footer = $('<div class="editor-tray-footer"></div>').appendTo(el);
|
||||
//'<form id="dialog-form" class="form-horizontal"></form>'+
|
||||
// '<button type="button" id="node-dialog-ok">Ok</button>'+
|
||||
// '<button type="button" id="node-dialog-cancel">Cancel</button>'+
|
||||
if (options.buttons) {
|
||||
for (var i=0;i<options.buttons.length;i++) {
|
||||
var button = options.buttons[i];
|
||||
|
||||
var b = $('<button>').appendTo(footer);
|
||||
if (button.id) {
|
||||
b.attr('id',button.id);
|
||||
}
|
||||
if (button.text) {
|
||||
b.text(button.text);
|
||||
}
|
||||
if (button.click) {
|
||||
b.click(button.click);
|
||||
}
|
||||
}
|
||||
}
|
||||
el.appendTo("#editor-stack");
|
||||
var tray = {
|
||||
tray: el,
|
||||
header: header,
|
||||
body: body,
|
||||
footer: footer,
|
||||
options: options
|
||||
};
|
||||
if (options.open) {
|
||||
options.open(body);
|
||||
showTray(options);
|
||||
},200)
|
||||
} else {
|
||||
showTray(options);
|
||||
}
|
||||
|
||||
$("#editor-shade").show();
|
||||
el.css({
|
||||
right: -(el.width()+10)+"px",
|
||||
transition: "right 0.3s ease"
|
||||
});
|
||||
$("#workspace").scrollLeft(0);
|
||||
|
||||
stack.push(tray);
|
||||
|
||||
setTimeout(function() {
|
||||
var trayHeight = el.height()-header.outerHeight()-footer.outerHeight();
|
||||
body.height(trayHeight-40);
|
||||
|
||||
if (options.resize) {
|
||||
options.resize();
|
||||
}
|
||||
el.css({right:0});
|
||||
},0);
|
||||
},
|
||||
close: function close() {
|
||||
if (stack.length > 0) {
|
||||
@ -117,7 +124,7 @@ RED.tray = (function() {
|
||||
oldTray.tray.css({right:0});
|
||||
},0);
|
||||
}
|
||||
},400)
|
||||
},200)
|
||||
if (stack.length === 0) {
|
||||
$("#editor-shade").hide();
|
||||
}
|
||||
|
||||
@ -23,10 +23,6 @@
|
||||
border-color: rgb(214, 97, 95) !important;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-buttonpane button.leftButton {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
clear: both;
|
||||
color: $form-text-color;
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
width: 315px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
z-index: 100;
|
||||
z-index: 10;
|
||||
@include component-border;
|
||||
}
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
right: 315px;
|
||||
bottom:10px;
|
||||
width: 7px;
|
||||
z-index: 101;
|
||||
z-index: 11;
|
||||
background: $background-color url(images/grip.png) no-repeat 50% 50%;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
@ -97,9 +97,14 @@
|
||||
button {
|
||||
@include workspace-button;
|
||||
padding: 0.4em 1em;
|
||||
margin-right: 8px;
|
||||
|
||||
&.leftButton {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
#editor-shade {
|
||||
position: absolute;
|
||||
top:0;
|
||||
|
||||
@ -121,8 +121,9 @@
|
||||
}
|
||||
},
|
||||
"editor": {
|
||||
"configEdit": "edit",
|
||||
"configAdd": "add",
|
||||
"configEdit": "Edit",
|
||||
"configAdd": "Add",
|
||||
"configUpdate": "Update",
|
||||
"configDelete": "Delete",
|
||||
"nodesUse": "__count__ node uses this config",
|
||||
"nodesUse_plural": "__count__ nodes use this config",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user