mirror of
https://github.com/node-red/node-red.git
synced 2025-03-01 10:36:34 +00:00
Add editableList widget and update Switch/Change nodes to use it
This commit is contained in:
Nick O'Leary
@@ -22,13 +22,8 @@
|
||||
<div class="form-row" style="margin-bottom:0;">
|
||||
<label><i class="fa fa-list"></i> <span data-i18n="change.label.rules"></span></label>
|
||||
</div>
|
||||
<div class="form-row node-input-rule-container-row" style="margin-bottom:0px;">
|
||||
<div id="node-input-rule-container-div" style="min-height: 200px; box-sizing:border-box; border-radius:5px; height:300px; padding:5px; border:1px solid #ccc; overflow-y:scroll;">
|
||||
<ol id="node-input-rule-container" style=" list-style-type:none; margin:0;"></ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<a href="#" class="editor-button editor-button-small" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="change.label.rule"></span></a>
|
||||
<div class="form-row node-input-rule-container-row">
|
||||
<ol id="node-input-rule-container"></ol>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
@@ -106,123 +101,117 @@
|
||||
var replace = this._("change.action.replace");
|
||||
var regex = this._("change.label.regex");
|
||||
|
||||
function generateRule(rule) {
|
||||
if (rule.t === "change" && rule.re) {
|
||||
rule.fromt = 're';
|
||||
delete rule.re;
|
||||
}
|
||||
if (rule.t === "set" && !rule.tot) {
|
||||
if (rule.to.indexOf("msg.") === 0 && !rule.tot) {
|
||||
rule.to = rule.to.substring(4);
|
||||
rule.tot = "msg";
|
||||
} else {
|
||||
rule.tot = "str";
|
||||
}
|
||||
}
|
||||
if (rule.t === "move" && !rule.tot) {
|
||||
rule.tot = "msg";
|
||||
}
|
||||
function resizeRule(rule) {
|
||||
var newWidth = rule.width();
|
||||
rule.find('.red-ui-typedInput').typedInput("width",newWidth-150);
|
||||
|
||||
var container = $('<li/>',{style:"background:#fff; margin:0; padding:8px 0px; border-bottom:1px solid #ccc;"});
|
||||
var row1 = $('<div/>').appendTo(container);
|
||||
var row2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
|
||||
var row3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
|
||||
var row4 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
|
||||
|
||||
var selectField = $('<select/>',{class:"node-input-rule-type",style:"width:110px; margin-right:10px;"}).appendTo(row1);
|
||||
var selectOptions = [{v:"set",l:set},{v:"change",l:change},{v:"delete",l:del},{v:"move",l:move}];
|
||||
for (var i=0;i<4;i++) {
|
||||
selectField.append($("<option></option>").val(selectOptions[i].v).text(selectOptions[i].l));
|
||||
}
|
||||
|
||||
var propertyName = $('<input/>',{style:"width:250px",class:"node-input-rule-property-name",type:"text"})
|
||||
.appendTo(row1)
|
||||
.typedInput({types:['msg','flow','global']});
|
||||
var finalspan = $('<span/>',{style:"float:right; margin-right:10px;"})
|
||||
.appendTo(row1);
|
||||
var deleteButton = $('<a/>',{href:"#",class:"editor-button editor-button-small", style:"margin-top:7px; margin-left:5px;"})
|
||||
.appendTo(finalspan);
|
||||
$('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
|
||||
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(to)
|
||||
.appendTo(row2);
|
||||
var propertyValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-value",type:"text"})
|
||||
.appendTo(row2)
|
||||
.typedInput({default:'str',types:['msg','flow','global','str','num','bool','json','date']});
|
||||
|
||||
var row3_1 = $('<div/>').appendTo(row3);
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(search)
|
||||
.appendTo(row3_1);
|
||||
var fromValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-search-value",type:"text"})
|
||||
.appendTo(row3_1)
|
||||
.typedInput({default:'str',types:['msg','flow','global','str','re','num','bool']});
|
||||
|
||||
var row3_2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(row3);
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(replace)
|
||||
.appendTo(row3_2);
|
||||
var toValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-replace-value",type:"text"})
|
||||
.appendTo(row3_2)
|
||||
.typedInput({default:'str',types:['msg','flow','global','str','num','bool','json']});
|
||||
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(to)
|
||||
.appendTo(row4);
|
||||
var moveValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-move-value",type:"text"})
|
||||
.appendTo(row4)
|
||||
.typedInput({default:'msg',types:['msg','flow','global']});
|
||||
|
||||
selectField.change(function() {
|
||||
var width = $("#node-input-rule-container").width();
|
||||
var type = $(this).val();
|
||||
if (type == "set") {
|
||||
row2.show();
|
||||
row3.hide();
|
||||
row4.hide();
|
||||
} else if (type == "change") {
|
||||
row2.hide();
|
||||
row3.show();
|
||||
row4.hide();
|
||||
} else if (type == "delete") {
|
||||
row2.hide();
|
||||
row3.hide();
|
||||
row4.hide();
|
||||
} else if (type == "move") {
|
||||
row2.hide();
|
||||
row3.hide();
|
||||
row4.show();
|
||||
}
|
||||
});
|
||||
|
||||
deleteButton.click(function() {
|
||||
container.css({"background":"#fee"});
|
||||
container.fadeOut(300, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
});
|
||||
|
||||
selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
|
||||
propertyName.typedInput('value',rule.p);
|
||||
propertyName.typedInput('type',rule.pt);
|
||||
propertyValue.typedInput('value',rule.to);
|
||||
propertyValue.typedInput('type',rule.tot);
|
||||
moveValue.typedInput('value',rule.to);
|
||||
moveValue.typedInput('type',rule.tot);
|
||||
fromValue.typedInput('value',rule.from);
|
||||
fromValue.typedInput('type',rule.fromt);
|
||||
toValue.typedInput('value',rule.to);
|
||||
toValue.typedInput('type',rule.tot);
|
||||
selectField.change();
|
||||
|
||||
var newWidth = $("#node-input-rule-container").width();
|
||||
container.find('.red-ui-typedInput').typedInput("width",newWidth-180);
|
||||
|
||||
$("#node-input-rule-container").append(container);
|
||||
}
|
||||
$("#node-input-add-rule").click(function() {
|
||||
generateRule({t:"replace",p:"payload"});
|
||||
$('#node-input-rule-container').css('min-height','300px').css('min-width','450px').editableList({
|
||||
addItem: function(container,i,opt) {
|
||||
var rule = opt||{t:"replace",p:"payload"};
|
||||
if (rule.t === "change" && rule.re) {
|
||||
rule.fromt = 're';
|
||||
delete rule.re;
|
||||
}
|
||||
if (rule.t === "set" && !rule.tot) {
|
||||
if (rule.to.indexOf("msg.") === 0 && !rule.tot) {
|
||||
rule.to = rule.to.substring(4);
|
||||
rule.tot = "msg";
|
||||
} else {
|
||||
rule.tot = "str";
|
||||
}
|
||||
}
|
||||
if (rule.t === "move" && !rule.tot) {
|
||||
rule.tot = "msg";
|
||||
}
|
||||
|
||||
var row1 = $('<div/>').appendTo(container);
|
||||
var row2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
|
||||
var row3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
|
||||
var row4 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
|
||||
|
||||
var selectField = $('<select/>',{class:"node-input-rule-type",style:"width:110px; margin-right:10px;"}).appendTo(row1);
|
||||
var selectOptions = [{v:"set",l:set},{v:"change",l:change},{v:"delete",l:del},{v:"move",l:move}];
|
||||
for (var i=0;i<4;i++) {
|
||||
selectField.append($("<option></option>").val(selectOptions[i].v).text(selectOptions[i].l));
|
||||
}
|
||||
|
||||
var propertyName = $('<input/>',{style:"width:250px",class:"node-input-rule-property-name",type:"text"})
|
||||
.appendTo(row1)
|
||||
.typedInput({types:['msg','flow','global']});
|
||||
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(to)
|
||||
.appendTo(row2);
|
||||
var propertyValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-value",type:"text"})
|
||||
.appendTo(row2)
|
||||
.typedInput({default:'str',types:['msg','flow','global','str','num','bool','json','date']});
|
||||
|
||||
var row3_1 = $('<div/>').appendTo(row3);
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(search)
|
||||
.appendTo(row3_1);
|
||||
var fromValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-search-value",type:"text"})
|
||||
.appendTo(row3_1)
|
||||
.typedInput({default:'str',types:['msg','flow','global','str','re','num','bool']});
|
||||
|
||||
var row3_2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(row3);
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(replace)
|
||||
.appendTo(row3_2);
|
||||
var toValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-replace-value",type:"text"})
|
||||
.appendTo(row3_2)
|
||||
.typedInput({default:'str',types:['msg','flow','global','str','num','bool','json']});
|
||||
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(to)
|
||||
.appendTo(row4);
|
||||
var moveValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-move-value",type:"text"})
|
||||
.appendTo(row4)
|
||||
.typedInput({default:'msg',types:['msg','flow','global']});
|
||||
|
||||
selectField.change(function() {
|
||||
var width = $("#node-input-rule-container").width();
|
||||
var type = $(this).val();
|
||||
if (type == "set") {
|
||||
row2.show();
|
||||
row3.hide();
|
||||
row4.hide();
|
||||
} else if (type == "change") {
|
||||
row2.hide();
|
||||
row3.show();
|
||||
row4.hide();
|
||||
} else if (type == "delete") {
|
||||
row2.hide();
|
||||
row3.hide();
|
||||
row4.hide();
|
||||
} else if (type == "move") {
|
||||
row2.hide();
|
||||
row3.hide();
|
||||
row4.show();
|
||||
}
|
||||
resizeRule(container);
|
||||
});
|
||||
|
||||
selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
|
||||
propertyName.typedInput('value',rule.p);
|
||||
propertyName.typedInput('type',rule.pt);
|
||||
propertyValue.typedInput('value',rule.to);
|
||||
propertyValue.typedInput('type',rule.tot);
|
||||
moveValue.typedInput('value',rule.to);
|
||||
moveValue.typedInput('type',rule.tot);
|
||||
fromValue.typedInput('value',rule.from);
|
||||
fromValue.typedInput('type',rule.fromt);
|
||||
toValue.typedInput('value',rule.to);
|
||||
toValue.typedInput('type',rule.tot);
|
||||
selectField.change();
|
||||
|
||||
var newWidth = $("#node-input-rule-container").width();
|
||||
resizeRule(container);
|
||||
},
|
||||
resizeItem: resizeRule,
|
||||
deletable: true,
|
||||
sortable: true
|
||||
});
|
||||
|
||||
if (!this.rules) {
|
||||
@@ -250,11 +239,12 @@
|
||||
}
|
||||
|
||||
for (var i=0;i<this.rules.length;i++) {
|
||||
generateRule(this.rules[i]);
|
||||
var rule = this.rules[i];
|
||||
$("#node-input-rule-container").editableList('addItem',rule);
|
||||
}
|
||||
},
|
||||
oneditsave: function() {
|
||||
var rules = $("#node-input-rule-container").children();
|
||||
var rules = $("#node-input-rule-container").editableList('items');
|
||||
var ruleset;
|
||||
var node = this;
|
||||
node.rules= [];
|
||||
@@ -289,14 +279,8 @@
|
||||
}
|
||||
var editorRow = $("#dialog-form>div.node-input-rule-container-row");
|
||||
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
|
||||
$("#node-input-rule-container-div").css("height",height+"px");
|
||||
|
||||
var rules = $("#node-input-rule-container").children();
|
||||
var newWidth = $("#node-input-rule-container").width();
|
||||
rules.each(function(i) {
|
||||
$(this).find('.red-ui-typedInput').typedInput("width",newWidth-180);
|
||||
})
|
||||
$("#node-input-name").width(newWidth-130);
|
||||
$("#node-input-rule-container").editableList('height',height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user