1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

[inject] Modify output labels for multi-value inject

This commit is contained in:
Nick O'Leary 2020-05-04 15:37:09 +01:00
parent df9d231389
commit 3d76137247
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 87 additions and 127 deletions

View File

@ -19,7 +19,7 @@
<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" data-i18n="[placeholder]common.label.name">
</div>
<div class="form-row node-input-property-container-row">
<ol id="node-input-property-container"></ol>
</div>
@ -148,6 +148,21 @@
</style>
<script type="text/javascript">
(function() {
function resizeDialog(size) {
size = size || { height: $(".red-ui-tray-content form").height() }
var rows = $("#dialog-form>div:not(.node-input-property-container-row):visible");
var height = size.height;
for (var i=0; i<rows.length; i++) {
height -= $(rows[i]).outerHeight(true);
}
var editorRow = $("#dialog-form>div.node-input-property-container-row");
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
height += 16;
$("#node-input-property-container").editableList('height',height);
}
RED.nodes.registerType('inject',{
category: 'common',
color:"#a6bbcf",
@ -169,69 +184,78 @@
outputs:1,
outputLabels: function(index) {
var lab = '';
// if only payload and topic - display payload type
// if only one property - show it's type
// if more than one property (other than payload and topic) - show "x properties" where x is the number of properties.
// this.props will not be an array for legacy inject nodes until they are re-deployed
if (Array.isArray(this.props)) {
var propertyCount = this.props.length;
var payloadProperty = this.props.find(p => p.p === 'payload');
var topicProperty = this.props.find(p => p.p === 'topic' && p.vt === 'str');
if (payloadProperty && topicProperty) {
lab = payloadProperty.vt;
} else if (propertyCount > 1){
lab = propertyCount + " " + this._("inject.label.properties");
} else if(propertyCount === 1){
lab = this.props[0].vt;
}
} else {
lab = this.payloadType;
if (lab === "json") {
try {
lab = typeof JSON.parse(this.payload);
if (lab === "object") {
if (Array.isArray(JSON.parse(this.payload))) { lab = "Array"; }
}
} catch(e) {
return this._("inject.label.invalid");
//
var props = this.props;
if (!Array.isArray(props)) {
props = [
{ p:"payload", v: this.payload, vt: this.payloadType },
{ p:"topic", v: this.topic, vt: "str" }
]
}
if (props) {
for (var i=0,l=props.length; i<l; i++) {
if (i > 0) lab += "\n";
if (i === 5) {
lab += " + "+(props.length-4);
break;
}
lab += props[i].p+": ";
var propType = props[i].vt;
if (propType === "json") {
try {
var parsedProp = JSON.parse(props[i].v);
propType = typeof parsedProp;
if (propType === "object" && Array.isArray(parsedProp)) {
propType = "Array";
}
} catch(e) {
propType = "invalid";
}
}
lab += this._("inject.label."+propType);
}
}
var name = "inject.label."+lab;
var label = this._(name);
if (name !== label) { lab = label; }
return lab;
},
label: function() {
label: function() {
if (Array.isArray(this.props)) {
// find the payload & topic
var payloadProperty = this.props.find(p => p.p === 'payload');
var topicProperty = this.props.find(p => p.p === 'topic' && p.vt === 'str');
var payloadProperty;
var topicProperty;
var payload;
var payloadType;
var topic;
for (var i=0,l=this.props.length; i<l; i++) {
if (this.props[i].p === 'payload') {
payloadProperty = this.props[i];
} else if (this.props[i].p === 'topic' && this.props[i].vt === 'str') {
topicProperty = this.props[i];
}
}
// If no payload/topic are found, use the first property instead
if(this.props[0]){
if (this.props[0]){
payloadProperty = payloadProperty === undefined ? this.props[0] : payloadProperty;
topicProperty = topicProperty === undefined ? {v: payloadProperty.p} : topicProperty; // if no topic, use the property name of the payload
}
var payload = payloadProperty === undefined ? "" : payloadProperty.v;
var payloadType = payloadProperty === undefined ? "str" : payloadProperty.vt;
var topic = topicProperty === undefined ? "" : topicProperty.v;
payload = payloadProperty === undefined ? "" : payloadProperty.v;
payloadType = payloadProperty === undefined ? "str" : payloadProperty.vt;
topic = topicProperty === undefined ? "" : topicProperty.v;
} else {
/* Legacy */
var payload = this.payload;
var payloadType = this.payloadType;
var topic = this.topic;
payload = this.payload;
payloadType = this.payloadType;
topic = this.topic;
}
var suffix = "";
// if fire once then add small indication
if (this.once) {
@ -281,13 +305,6 @@
} else if (this.payloadType === 'string' || this.payloadType === 'none') {
this.payloadType = "str";
}
$("#node-input-payloadType").val(this.payloadType);
$("#node-input-payload").typedInput({
default: 'str',
typeField: $("#node-input-payloadType"),
types:['flow','global','str','num','bool','json','bin','date','env']
});
$("#inject-time-type-select").on("change", function() {
$("#node-input-crontab").val('');
@ -301,10 +318,11 @@
$("#node-once").hide();
$("#node-input-once").prop('checked', false);
}
// Scroll down
var scrollDiv = $("#dialog-form").parent();
scrollDiv.scrollTop(scrollDiv.prop('scrollHeight'));
resizeDialog();
});
$("#node-input-once").on("change", function() {
@ -424,21 +442,9 @@
$("#inject-time-type-select").val(repeattype);
$("#inject-time-row-"+repeattype).show();
$("#node-input-payload").typedInput('type',this.payloadType);
$("#inject-time-type-select").trigger("change");
$("#inject-time-interval-time-start").trigger("change");
/* */
function resizeItem(item) {
var newWidth = item.width();
item.find('.node-input-prop-property-name').typedInput("width", '155px');
item.find('.node-input-prop-property-value').typedInput("width", `${newWidth - 180}px`);
}
$('#node-input-property-container').css('min-height','150px').css('min-width','450px').editableList({
$('#node-input-property-container').css('min-height','120px').css('min-width','450px').editableList({
addItem: function(container,i,opt) {
var prop = opt;
if (!prop.hasOwnProperty('p')) {
@ -451,14 +457,16 @@
var row = $('<div/>').appendTo(container);
var propertyName = $('<input/>',{class:"node-input-prop-property-name",type:"text"})
.css("width","30%")
.appendTo(row)
.typedInput({types:['msg']});
$('<div/>',{style: 'display:inline-block; padding:0px 4px 0px 4px;'})
$('<div/>',{style: 'display:inline-block; padding:0px 6px;'})
.text('=')
.appendTo(row);
var propertyValue = $('<input/>',{class:"node-input-prop-property-value",type:"text"})
.css("width","calc(70% - 30px)")
.appendTo(row)
.typedInput({default:'str',types:['msg','flow','global','str','num','bool','json','bin','date','jsonata','env']});
@ -466,10 +474,7 @@
propertyValue.typedInput('value',prop.v);
propertyValue.typedInput('type',prop.vt);
resizeItem(container);
},
resizeItem: resizeItem,
removable: true,
sortable: true
});
@ -493,44 +498,9 @@
var prop = this.props[i];
$("#node-input-property-container").editableList('addItem',prop);
}
/* Experimental paste object
* This allows you to copy an object to your clipboard from the debug and then paste it back into an inject node
*/
// $("#dialog-form").on('paste', function(e) {
// var pasteData = e.originalEvent.clipboardData.getData('text');
// try{
// var pasteObject = JSON.parse(pasteData);
// } catch(e){ }
//
// if(pasteObject){
// for(var p in pasteObject){
// if(p === '_msgid') continue;
// var v = pasteObject[p];
// var vt = 'json';
//
// // Remove existing property before adding to avoid duplicates
// $(`#node-input-property-container .node-input-prop-property-name[value=${p}]`).closest('.red-ui-editableList-item-content').parent().remove();
//
// if(typeof v === 'string'){
// vt = 'str';
// } else if (typeof v === "boolean") {
// vt = 'bool';
// } else if (!isNaN(v)) {
// vt = 'num';
// } else if(Array.isArray(v) && v.every(e => Number.isInteger(e) && e >= 0 && e <=255)) { // Fuzzy buffer detection
// vt = 'bin';
// v = JSON.stringify(pasteObject[p]);
// } else {
// vt = 'json';
// v = JSON.stringify(pasteObject[p]);
// }
//
// var prop = {p, v, vt};
// $("#node-input-property-container").editableList('addItem',prop);
// }
// }
// });
$("#inject-time-type-select").trigger("change");
$("#inject-time-interval-time-start").trigger("change");
},
oneditsave: function() {
@ -539,7 +509,7 @@
delete this.payloadType
delete this.topic
/* */
var repeat = "";
var crontab = "";
var type = $("#inject-time-type-select").val();
@ -639,11 +609,11 @@
var p = {
p:prop.find(".node-input-prop-property-name").typedInput('value')
};
p.v = prop.find(".node-input-prop-property-value").typedInput('value');
p.vt = prop.find(".node-input-prop-property-value").typedInput('type');
node.props.push(p);
if (p.p) {
p.v = prop.find(".node-input-prop-property-value").typedInput('value');
p.vt = prop.find(".node-input-prop-property-value").typedInput('type');
node.props.push(p);
}
});
},
button: {
@ -681,17 +651,7 @@
});
}
},
oneditresize: function(size) {
var rows = $("#dialog-form>div:not(.node-input-property-container-row):visible");
var height = size.height;
for (var i=0; i<rows.length; i++) {
height -= $(rows[i]).outerHeight(true);
}
var editorRow = $("#dialog-form>div.node-input-property-container-row");
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
height += 16;
$("#node-input-property-container").editableList('height',height);
}
oneditresize: resizeDialog
});
})();
</script>

View File

@ -52,7 +52,7 @@
"string": "string",
"boolean": "boolean",
"number": "number",
"Array": "Array",
"Array": "array",
"invalid": "Invalid JSON Object"
},
"timestamp": "timestamp",