mirror of https://github.com/node-red/node-red.git
396 lines
18 KiB
HTML
396 lines
18 KiB
HTML
|
|
<script type="text/html" data-template-name="change">
|
|
<style>
|
|
ol#node-input-rule-container .red-ui-typedInput-container {
|
|
flex:1;
|
|
}
|
|
</style>
|
|
<div class="form-row">
|
|
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
|
|
<input type="text" id="node-input-name" style="width: calc(100% - 105px)" data-i18n="[placeholder]common.label.name">
|
|
</div>
|
|
<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">
|
|
<ol id="node-input-rule-container"></ol>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
(function() {
|
|
function isInvalidProperty(v,vt) {
|
|
if (/msg|flow|global/.test(vt)) {
|
|
if (!RED.utils.validatePropertyExpression(v)) {
|
|
return RED._("node-red:change.errors.invalid-prop", {
|
|
property: v
|
|
});
|
|
}
|
|
} else if (vt === "jsonata") {
|
|
try{ jsonata(v); } catch(e) {
|
|
return RED._("node-red:change.errors.invalid-expr", {
|
|
error: e.message
|
|
});
|
|
}
|
|
} else if (vt === "json") {
|
|
try{ JSON.parse(v); } catch(e) {
|
|
return RED._("node-red:change.errors.invalid-json-data", {
|
|
error: e.message
|
|
});
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
RED.nodes.registerType('change', {
|
|
color: "#E2D96E",
|
|
category: 'function',
|
|
defaults: {
|
|
name: {value:""},
|
|
rules:{value:[{t:"set",p:"payload",pt:"msg",to:"",tot:"str"}],validate: function(rules, opt) {
|
|
var msg;
|
|
if (!rules || rules.length === 0) { return true }
|
|
for (var i=0;i<rules.length;i++) {
|
|
var r = rules[i];
|
|
if (r.t === 'set') {
|
|
if (msg = isInvalidProperty(r.p,r.pt)) {
|
|
return msg;
|
|
}
|
|
if (msg = isInvalidProperty(r.to,r.tot)) {
|
|
return msg;
|
|
}
|
|
} else if (r.t === 'change') {
|
|
if (msg = isInvalidProperty(r.p,r.pt)) {
|
|
return msg;
|
|
}
|
|
if(msg = isInvalidProperty(r.from,r.fromt)) {
|
|
return msg;
|
|
}
|
|
if(msg = isInvalidProperty(r.to,r.tot)) {
|
|
return msg;
|
|
}
|
|
} else if (r.t === 'delete') {
|
|
if (msg = isInvalidProperty(r.p,r.pt)) {
|
|
return msg;
|
|
}
|
|
} else if (r.t === 'move') {
|
|
if (msg = isInvalidProperty(r.p,r.pt)) {
|
|
return msg;
|
|
}
|
|
if (msg = isInvalidProperty(r.to,r.tot)) {
|
|
return msg;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}},
|
|
// legacy
|
|
action: {value:""},
|
|
property: {value:""},
|
|
from: {value:""},
|
|
to: {value:""},
|
|
reg: {value:false}
|
|
},
|
|
inputs: 1,
|
|
outputs: 1,
|
|
icon: "swap.svg",
|
|
label: function() {
|
|
function prop2name(type, key) {
|
|
var result = RED.utils.parseContextKey(key);
|
|
return type +"." +result.key;
|
|
}
|
|
if (this.name) {
|
|
return this.name;
|
|
}
|
|
if (!this.rules) {
|
|
if (this.action === "replace") {
|
|
return this._("change.label.set",{property:"msg."+this.property});
|
|
} else if (this.action === "change") {
|
|
return this._("change.label.change",{property:"msg."+this.property});
|
|
} else if (this.action === "move") {
|
|
return this._("change.label.move",{property:"msg."+this.property});
|
|
} else {
|
|
return this._("change.label.delete",{property:"msg."+this.property});
|
|
}
|
|
} else {
|
|
if (this.rules.length == 1) {
|
|
if (this.rules[0].t === "set") {
|
|
return this._("change.label.set",{property:prop2name((this.rules[0].pt||"msg"), this.rules[0].p)});
|
|
} else if (this.rules[0].t === "change") {
|
|
return this._("change.label.change",{property:prop2name((this.rules[0].pt||"msg"), this.rules[0].p)});
|
|
} else if (this.rules[0].t === "move") {
|
|
return this._("change.label.move",{property:prop2name((this.rules[0].pt||"msg"), this.rules[0].p)});
|
|
} else {
|
|
return this._("change.label.delete",{property:prop2name((this.rules[0].pt||"msg"), this.rules[0].p)});
|
|
}
|
|
} else {
|
|
return this._("change.label.changeCount",{count:this.rules.length});
|
|
}
|
|
}
|
|
},
|
|
labelStyle: function() {
|
|
return this.name ? "node_label_italic" : "";
|
|
},
|
|
oneditprepare: function() {
|
|
var set = this._("change.action.set");
|
|
var change = this._("change.action.change");
|
|
var del = this._("change.action.delete");
|
|
var move = this._("change.action.move");
|
|
var to = this._("change.action.to");
|
|
var toValueLabel = this._("change.action.toValue",to);
|
|
var search = this._("change.action.search");
|
|
var replace = this._("change.action.replace");
|
|
var regex = this._("change.label.regex");
|
|
var deepCopyLabel = this._("change.label.deepCopy");
|
|
|
|
function createPropertyValue(row2_1, row2_2, defaultType) {
|
|
var propValInput = $('<input/>',{class:"node-input-rule-property-value",type:"text"})
|
|
.appendTo(row2_1)
|
|
.typedInput({default:defaultType||'str',types:['msg','flow','global','str','num','bool','json','bin','date','jsonata','env']});
|
|
|
|
var dcLabel = $('<label style="padding-left: 130px;"></label>').appendTo(row2_2);
|
|
var deepCopy = $('<input type="checkbox" class="node-input-rule-property-deepCopy" style="width: auto; margin: 0 6px 0 0">').appendTo(dcLabel)
|
|
$('<span>').text(deepCopyLabel).appendTo(dcLabel)
|
|
|
|
propValInput.on("change", function(evt,type,val) {
|
|
row2_2.toggle(type === "msg" || type === "flow" || type === "global" || type === "env");
|
|
})
|
|
return [propValInput, deepCopy];
|
|
}
|
|
function createFromValue(row3_1, defaultType) {
|
|
return $('<input/>',{class:"node-input-rule-property-search-value",type:"text"})
|
|
.appendTo(row3_1)
|
|
.typedInput({default:defaultType||'str',types:['msg','flow','global','str','re','num','bool','env']});
|
|
}
|
|
function createToValue(row3_2, defaultType) {
|
|
return $('<input/>',{class:"node-input-rule-property-replace-value",type:"text"})
|
|
.appendTo(row3_2)
|
|
.typedInput({default:defaultType||'str',types:['msg','flow','global','str','num','bool','json','bin','env']});
|
|
}
|
|
function createMoveValue(row4, defaultType) {
|
|
return $('<input/>',{class:"node-input-rule-property-move-value",type:"text"})
|
|
.appendTo(row4)
|
|
.typedInput({default:defaultType||'msg',types:['msg','flow','global']});
|
|
}
|
|
|
|
$('#node-input-rule-container').css('min-height','150px').css('min-width','450px').editableList({
|
|
addItem: function(container,i,opt) {
|
|
var rule = opt;
|
|
if (!rule.hasOwnProperty('t')) {
|
|
rule = {t:"set",p:"payload",to:"",tot:"str"};
|
|
}
|
|
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";
|
|
}
|
|
container.css({
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap'
|
|
});
|
|
let fragment = document.createDocumentFragment();
|
|
var row1 = $('<div/>',{style:"display:flex; align-items: baseline"}).appendTo(fragment);
|
|
var row2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(fragment);
|
|
var row3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(fragment);
|
|
var row4 = $('<div/>',{style:"display:flex;margin-top:8px;align-items: baseline"}).appendTo(fragment);
|
|
|
|
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/>',{class:"node-input-rule-property-name",type:"text"})
|
|
.appendTo(row1)
|
|
.typedInput({types:['msg','flow','global']});
|
|
|
|
var row2_1 = $('<div/>', {style:"display:flex;align-items: baseline"}).appendTo(row2);
|
|
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
|
.text(toValueLabel)
|
|
.appendTo(row2_1);
|
|
|
|
var row2_2 = $('<div/>', {style:"margin-top: 4px;"}).appendTo(row2);
|
|
|
|
var row3_1 = $('<div/>', {style:"display:flex;align-items: baseline"}).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 row3_2 = $('<div/>',{style:"display:flex;margin-top:8px;align-items: baseline"}).appendTo(row3);
|
|
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
|
.text(replace)
|
|
.appendTo(row3_2);
|
|
|
|
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
|
.text(to)
|
|
.appendTo(row4);
|
|
|
|
let propertyValue = null;
|
|
let fromValue = null;
|
|
let toValue = null;
|
|
let moveValue = null;
|
|
|
|
selectField.on("change", function() {
|
|
var type = $(this).val();
|
|
if (propertyValue) {
|
|
propertyValue.typedInput('hide');
|
|
}
|
|
if (fromValue) {
|
|
fromValue.typedInput('hide');
|
|
}
|
|
if (toValue) {
|
|
toValue.typedInput('hide');
|
|
}
|
|
if (moveValue) {
|
|
moveValue.typedInput('hide');
|
|
}
|
|
|
|
if (type == "set") {
|
|
if(!propertyValue) {
|
|
var parts = createPropertyValue(row2_1, row2_2);
|
|
propertyValue = parts[0];
|
|
deepCopy = parts[1];
|
|
}
|
|
propertyValue.typedInput('show');
|
|
row2.show();
|
|
row3.hide();
|
|
row4.hide();
|
|
} else if (type == "change") {
|
|
if(!fromValue) {
|
|
fromValue = createFromValue(row3_1);
|
|
}
|
|
fromValue.typedInput('show');
|
|
if(!toValue) {
|
|
toValue = createToValue(row3_2);
|
|
}
|
|
toValue.typedInput('show');
|
|
row2.hide();
|
|
row3.show();
|
|
row4.hide();
|
|
} else if (type == "delete") {
|
|
row2.hide();
|
|
row3.hide();
|
|
row4.hide();
|
|
} else if (type == "move") {
|
|
if(!moveValue) {
|
|
moveValue = createMoveValue(row4);
|
|
}
|
|
moveValue.typedInput('show');
|
|
row2.hide();
|
|
row3.hide();
|
|
row4.show();
|
|
}
|
|
});
|
|
|
|
selectField.val(rule.t);
|
|
propertyName.typedInput('value',rule.p);
|
|
propertyName.typedInput('type',rule.pt);
|
|
if (rule.t == "set") {
|
|
var parts = createPropertyValue(row2_1, row2_2, rule.tot);
|
|
propertyValue = parts[0];
|
|
deepCopy = parts[1];
|
|
propertyValue.typedInput('value',rule.to);
|
|
deepCopy.prop("checked", !!rule.dc);
|
|
}
|
|
if (rule.t == "move") {
|
|
moveValue = createMoveValue(row4,rule.tot);
|
|
moveValue.typedInput('value',rule.to);
|
|
}
|
|
if (rule.t == "change") {
|
|
fromValue = createFromValue(row3_1, rule.fromt);
|
|
fromValue.typedInput('value',rule.from);
|
|
|
|
toValue = createToValue(row3_2,rule.tot);
|
|
toValue.typedInput('value',rule.to);
|
|
}
|
|
selectField.change();
|
|
container[0].appendChild(fragment);
|
|
},
|
|
removable: true,
|
|
sortable: true
|
|
});
|
|
|
|
if (!this.rules) {
|
|
var rule = {
|
|
t:(this.action=="replace"?"set":this.action),
|
|
p:this.property,
|
|
pt:"msg"
|
|
};
|
|
|
|
if ((rule.t === "set")||(rule.t === "move")) {
|
|
rule.to = this.to;
|
|
} else if (rule.t === "change") {
|
|
rule.from = this.from;
|
|
rule.to = this.to;
|
|
rule.re = this.reg;
|
|
}
|
|
|
|
delete this.to;
|
|
delete this.from;
|
|
delete this.reg;
|
|
delete this.action;
|
|
delete this.property;
|
|
|
|
this.rules = [rule];
|
|
}
|
|
|
|
for (var i=0; i<this.rules.length; i++) {
|
|
var rule = this.rules[i];
|
|
$("#node-input-rule-container").editableList('addItem',rule);
|
|
}
|
|
},
|
|
oneditsave: function() {
|
|
var rules = $("#node-input-rule-container").editableList('items');
|
|
var node = this;
|
|
node.rules= [];
|
|
rules.each(function(i) {
|
|
var rule = $(this);
|
|
var type = rule.find(".node-input-rule-type").val();
|
|
var r = {
|
|
t:type,
|
|
p:rule.find(".node-input-rule-property-name").typedInput('value'),
|
|
pt:rule.find(".node-input-rule-property-name").typedInput('type')
|
|
};
|
|
if (type === "set") {
|
|
r.to = rule.find(".node-input-rule-property-value").typedInput('value');
|
|
r.tot = rule.find(".node-input-rule-property-value").typedInput('type');
|
|
if (rule.find(".node-input-rule-property-deepCopy").prop("checked")) {
|
|
r.dc = true;
|
|
}
|
|
} else if (type === "move") {
|
|
r.to = rule.find(".node-input-rule-property-move-value").typedInput('value');
|
|
r.tot = rule.find(".node-input-rule-property-move-value").typedInput('type');
|
|
} else if (type === "change") {
|
|
r.from = rule.find(".node-input-rule-property-search-value").typedInput('value');
|
|
r.fromt = rule.find(".node-input-rule-property-search-value").typedInput('type');
|
|
r.to = rule.find(".node-input-rule-property-replace-value").typedInput('value');
|
|
r.tot = rule.find(".node-input-rule-property-replace-value").typedInput('type');
|
|
}
|
|
node.rules.push(r);
|
|
});
|
|
},
|
|
oneditresize: function(size) {
|
|
var rows = $("#dialog-form>div:not(.node-input-rule-container-row)");
|
|
var height = size.height;
|
|
for (var i=0; i<rows.length; i++) {
|
|
height -= $(rows[i]).outerHeight(true);
|
|
}
|
|
var editorRow = $("#dialog-form>div.node-input-rule-container-row");
|
|
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
|
|
height += 16;
|
|
$("#node-input-rule-container").editableList('height',height);
|
|
}
|
|
});
|
|
})();
|
|
</script>
|