mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Update Inject node to use typedInput
This commit is contained in:
Nick O'Leary
parent
43c6df49d7
commit
38168a545b
@ -52,8 +52,30 @@
|
||||
});
|
||||
this.uiSelect.addClass("red-ui-typedInput-container");
|
||||
|
||||
this.options.options = this.options.options||Object.keys(allOptions);
|
||||
|
||||
var hasSubOptions = false;
|
||||
this.typeMap = {};
|
||||
this.types = this.options.options.map(function(opt) {
|
||||
var result;
|
||||
if (typeof opt === 'string') {
|
||||
result = allOptions[opt];
|
||||
} else {
|
||||
result = opt;
|
||||
}
|
||||
that.typeMap[result.value] = result;
|
||||
if (result.options) {
|
||||
hasSubOptions = true;
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
if (this.options.typeField) {
|
||||
this.typeField = $(this.options.typeField).hide();
|
||||
var t = this.typeField.val();
|
||||
if (t && this.typeMap[t]) {
|
||||
this.options.default = t;
|
||||
}
|
||||
} else {
|
||||
this.typeField = $("<input>",{type:'hidden'}).appendTo(this.uiSelect);
|
||||
}
|
||||
@ -76,9 +98,8 @@
|
||||
that._showMenu(that.menu,that.selectTrigger);
|
||||
});
|
||||
|
||||
this.options.options = this.options.options||Object.keys(allOptions);
|
||||
|
||||
if (this.options.options.filter(function(opt) { return allOptions[opt] && allOptions[opt].hasOwnProperty('options')}).length > 0) {
|
||||
if (hasSubOptions) {
|
||||
// explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline'
|
||||
this.optionSelectTrigger = $('<a href="#" class="red-ui-typedInput-option-trigger" style="display:inline-block"><i class="fa fa-sort-desc"></i></a>').appendTo(this.uiSelect);
|
||||
this.optionSelectLabel = $('<span></span>').prependTo(this.optionSelectTrigger);
|
||||
@ -93,7 +114,7 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
this.menu = this._createMenu(this.options.options, function(v) { that.type(v) });
|
||||
this.menu = this._createMenu(this.types, function(v) { that.type(v) });
|
||||
this.type(this.options.default||this.options.options[0]);
|
||||
},
|
||||
_hideMenu: function(menu) {
|
||||
@ -104,10 +125,9 @@
|
||||
_createMenu: function(opts,callback) {
|
||||
var that = this;
|
||||
var menu = $("<div>").addClass("red-ui-typedInput-options");
|
||||
opts.forEach(function(key) {
|
||||
var opt = allOptions[key];
|
||||
if (!opt) {
|
||||
opt = {value:key,label:key};
|
||||
opts.forEach(function(opt) {
|
||||
if (typeof opt === 'string') {
|
||||
opt = {value:opt,label:opt};
|
||||
}
|
||||
var op = $('<a href="#">').attr("value",opt.value).appendTo(menu);
|
||||
if (opt.label) {
|
||||
@ -121,7 +141,7 @@
|
||||
|
||||
op.click(function(event) {
|
||||
event.preventDefault();
|
||||
callback(key);
|
||||
callback(opt.value);
|
||||
that._hideMenu(menu);
|
||||
});
|
||||
});
|
||||
@ -144,7 +164,7 @@
|
||||
top: (height+pos.top-3)+"px",
|
||||
left: (2+pos.left)+"px",
|
||||
});
|
||||
menu.slideDown(200);
|
||||
menu.slideDown(100);
|
||||
this._delay(function() {
|
||||
that.uiSelect.addClass('red-ui-typedInput-focus');
|
||||
$(document).on("mousedown.close-property-select", function(event) {
|
||||
@ -173,15 +193,21 @@
|
||||
return labelWidth;
|
||||
},
|
||||
_resize: function() {
|
||||
var labelWidth = this._getLabelWidth(this.selectTrigger);
|
||||
|
||||
var newWidth = this.uiWidth-labelWidth+4;
|
||||
this.element.width(newWidth);
|
||||
if (this.typeMap[this.propertyType] && this.typeMap[this.propertyType].hasValue === false) {
|
||||
this.selectTrigger.width(this.uiWidth+5);
|
||||
} else {
|
||||
this.selectTrigger.width('auto');
|
||||
var labelWidth = this._getLabelWidth(this.selectTrigger);
|
||||
|
||||
if (this.optionSelectTrigger) {
|
||||
var triggerWidth = this._getLabelWidth(this.optionSelectTrigger);
|
||||
labelWidth = this._getLabelWidth(this.optionSelectLabel)-4;
|
||||
this.optionSelectLabel.width(labelWidth+(newWidth-triggerWidth));
|
||||
var newWidth = this.uiWidth-labelWidth+4;
|
||||
this.element.width(newWidth);
|
||||
|
||||
if (this.optionSelectTrigger) {
|
||||
var triggerWidth = this._getLabelWidth(this.optionSelectTrigger);
|
||||
labelWidth = this._getLabelWidth(this.optionSelectLabel)-4;
|
||||
this.optionSelectLabel.width(labelWidth+(newWidth-triggerWidth));
|
||||
}
|
||||
}
|
||||
},
|
||||
_destroy: function() {
|
||||
@ -195,8 +221,8 @@
|
||||
if (!arguments.length) {
|
||||
return this.element.val();
|
||||
} else {
|
||||
if (allOptions[this.propertyType].options) {
|
||||
if (allOptions[this.propertyType].options.indexOf(value) === -1) {
|
||||
if (this.typeMap[this.propertyType].options) {
|
||||
if (this.typeMap[this.propertyType].options.indexOf(value) === -1) {
|
||||
value = "";
|
||||
}
|
||||
this.optionSelectLabel.text(value);
|
||||
@ -209,7 +235,7 @@
|
||||
if (!arguments.length) {
|
||||
return this.propertyType;
|
||||
} else {
|
||||
var opt = allOptions[type];
|
||||
var opt = this.typeMap[type];
|
||||
if (opt && this.propertyType !== type) {
|
||||
this.propertyType = type;
|
||||
this.typeField.val(type);
|
||||
@ -243,7 +269,12 @@
|
||||
if (this.optionSelectTrigger) {
|
||||
this.optionSelectTrigger.hide();
|
||||
}
|
||||
this.element.show();
|
||||
if (opt.hasValue === false) {
|
||||
this.element.val("");
|
||||
this.element.hide();
|
||||
} else {
|
||||
this.element.show();
|
||||
}
|
||||
this.element.trigger('change');
|
||||
}
|
||||
this._resize();
|
||||
@ -254,8 +285,8 @@
|
||||
var result;
|
||||
var value = this.value();
|
||||
var type = this.type();
|
||||
if (allOptions[type] && allOptions[type].validate) {
|
||||
var val = allOptions[type].validate;
|
||||
if (this.typeMap[type] && this.typeMap[type].validate) {
|
||||
var val = this.typeMap[type].validate;
|
||||
if (typeof val === 'function') {
|
||||
result = val(value);
|
||||
} else {
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
-->
|
||||
|
||||
<script type="text/x-red" data-template-name="inject">
|
||||
<!--
|
||||
<div class="form-row node-input-payload">
|
||||
<label for="node-input-payloadType"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
|
||||
<select id="node-input-payloadType" style="width:73%">
|
||||
@ -28,6 +29,12 @@
|
||||
<label for="node-input-payload"></label>
|
||||
<input type="text" id="node-input-payload" style="width:70%">
|
||||
</div>
|
||||
-->
|
||||
<div class="form-row">
|
||||
<label for="node-input-payload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
|
||||
<input type="text" id="node-input-payload" style="width:300px">
|
||||
<input type="hidden" id="node-input-payloadType">
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label for="node-input-topic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
|
||||
@ -196,23 +203,51 @@
|
||||
outputs:1,
|
||||
icon: "inject.png",
|
||||
label: function() {
|
||||
if (this.payloadType === "string") {
|
||||
if (this.name) {
|
||||
return this.name;
|
||||
} else if (this.payloadType === "string" ||
|
||||
this.payloadType === "str" ||
|
||||
this.payloadType === "num" ||
|
||||
this.payloadType === "bool" ||
|
||||
this.payloadType === "json") {
|
||||
if ((this.topic !== "") && ((this.topic.length + this.payload.length) <= 32)) {
|
||||
return this.name||this.topic + ":" + this.payload;
|
||||
}
|
||||
else if (this.payload.length < 24) {
|
||||
return this.name||this.payload;
|
||||
return this.topic + ":" + this.payload;
|
||||
} else if (this.payload.length > 0 && this.payload.length < 24) {
|
||||
return this.payload;
|
||||
} else {
|
||||
return this._("inject.inject");
|
||||
}
|
||||
} else if (this.payloadType === 'date') {
|
||||
return this._("inject.timestamp")
|
||||
} else if (this.payloadType === 'flow' && this.payload.length < 19) {
|
||||
return 'flow.'+this.payload;
|
||||
} else if (this.payloadType === 'global' && this.payload.length < 17) {
|
||||
return 'global.'+this.payload;
|
||||
} else {
|
||||
return this._("inject.inject");
|
||||
}
|
||||
if ((this.topic.length < 24) && (this.topic.length > 0)) {
|
||||
return this.name||this.topic;
|
||||
}
|
||||
else { return this.name||(this.payloadType==="date"?this._("inject.timestamp"):null)||this._("inject.inject"); }
|
||||
},
|
||||
labelStyle: function() {
|
||||
return this.name?"node_label_italic":"";
|
||||
},
|
||||
oneditprepare: function() {
|
||||
if (this.payloadType == null) {
|
||||
if (this.payload == "") {
|
||||
this.payloadType = "date";
|
||||
} else {
|
||||
this.payloadType = "str";
|
||||
}
|
||||
} 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"),
|
||||
options:['flow','global','str','num','bool','json',{value:"date",label:this._("inject.timestamp"),hasValue:false}]
|
||||
});
|
||||
|
||||
$("#inject-time-type-select").change(function() {
|
||||
$("#node-input-crontab").val('');
|
||||
var id = $("#inject-time-type-select option:selected").val();
|
||||
@ -373,24 +408,8 @@
|
||||
$("#inject-time-type-select option").filter(function() {return $(this).val() == repeattype;}).attr('selected',true);
|
||||
$("#inject-time-row-"+repeattype).show();
|
||||
|
||||
if (this.payloadType == null) {
|
||||
if (this.payload == "") {
|
||||
this.payloadType = "date";
|
||||
} else {
|
||||
this.payloadType = "string";
|
||||
}
|
||||
}
|
||||
$("#node-input-payload").typedInput('type',this.payloadType);
|
||||
|
||||
$("#node-input-payloadType").change(function() {
|
||||
var id = $("#node-input-payloadType option:selected").val();
|
||||
if (id === "string") {
|
||||
$("#node-input-row-payload").show();
|
||||
} else {
|
||||
$("#node-input-row-payload").hide();
|
||||
}
|
||||
});
|
||||
$("#node-input-payloadType").val(this.payloadType);
|
||||
$("#node-input-payloadType").change();
|
||||
$("#inject-time-type-select").change();
|
||||
$("#inject-time-interval-time-start").change();
|
||||
|
||||
|
||||
@ -53,10 +53,12 @@ module.exports = function(RED) {
|
||||
var msg = {topic:this.topic};
|
||||
if ( (this.payloadType == null && this.payload === "") || this.payloadType === "date") {
|
||||
msg.payload = Date.now();
|
||||
} else if (this.payloadType == null || this.payloadType === "string") {
|
||||
} else if (this.payloadType == null) {
|
||||
msg.payload = this.payload;
|
||||
} else {
|
||||
} else if (this.payloadType == 'none') {
|
||||
msg.payload = "";
|
||||
} else {
|
||||
msg.payload = RED.util.evaluateNodeProperty(this.payload,this.payloadType,this,msg);
|
||||
}
|
||||
this.send(msg);
|
||||
msg = null;
|
||||
|
||||
@ -37,8 +37,6 @@
|
||||
"repeat": "Repeat"
|
||||
},
|
||||
"timestamp": "timestamp",
|
||||
"string": "string",
|
||||
"blank": "blank",
|
||||
"none": "none",
|
||||
"interval": "interval",
|
||||
"interval-time": "interval between times",
|
||||
@ -460,7 +458,7 @@
|
||||
},
|
||||
"errors": {
|
||||
"invalid-from": "Invalid 'from' property: __error__",
|
||||
"invalid-json": "Invalid 'to' JSON property"
|
||||
"invalid-json": "Invalid 'to' JSON property"
|
||||
}
|
||||
},
|
||||
"range": {
|
||||
|
||||
@ -184,12 +184,12 @@
|
||||
|
||||
selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
|
||||
if (rule.t == "btwn") {
|
||||
btwnValueField.val(rule.v);
|
||||
btwnValueField.typedInput('value',rule.v);
|
||||
btwnValueField.typedInput('type',rule.vt||'num');
|
||||
btwnValue2Field.val(rule.v2);
|
||||
btwnValue2Field.typedInput('value',rule.v2);
|
||||
btwnValue2Field.typedInput('type',rule.v2t||'num');
|
||||
} else if (typeof rule.v != "undefined") {
|
||||
valueField.val(rule.v);
|
||||
valueField.typedInput('value',rule.v);
|
||||
valueField.typedInput('type',rule.vt||'str');
|
||||
}
|
||||
if (rule.case) {
|
||||
@ -266,12 +266,12 @@
|
||||
var r = {t:type};
|
||||
if (!(type === "true" || type === "false" || type === "null" || type === "nnull" || type === "else")) {
|
||||
if (type === "btwn") {
|
||||
r.v = rule.find(".node-input-rule-btwn-value").val();
|
||||
r.v = rule.find(".node-input-rule-btwn-value").typedInput('value');
|
||||
r.vt = rule.find(".node-input-rule-btwn-value").typedInput('type');
|
||||
r.v2 = rule.find(".node-input-rule-btwn-value2").val();
|
||||
r.v2 = rule.find(".node-input-rule-btwn-value2").typedInput('value');
|
||||
r.v2t = rule.find(".node-input-rule-btwn-value2").typedInput('type');
|
||||
} else {
|
||||
r.v = rule.find(".node-input-rule-value").val();
|
||||
r.v = rule.find(".node-input-rule-value").typedInput('value');
|
||||
r.vt = rule.find(".node-input-rule-value").typedInput('type');
|
||||
}
|
||||
if (type === "regex") {
|
||||
|
||||
@ -172,13 +172,13 @@
|
||||
});
|
||||
|
||||
selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
|
||||
propertyName.val(rule.p);
|
||||
propertyName.typedInput('value',rule.p);
|
||||
propertyName.typedInput('type',rule.pt)
|
||||
propertyValue.val(rule.to);
|
||||
propertyValue.typedInput('value',rule.to);
|
||||
propertyValue.typedInput('type',rule.tot)
|
||||
fromValue.val(rule.from);
|
||||
fromValue.typedInput('value',rule.from);
|
||||
fromValue.typedInput('type',rule.fromt)
|
||||
toValue.val(rule.to);
|
||||
toValue.typedInput('value',rule.to);
|
||||
toValue.typedInput('type',rule.tot)
|
||||
selectField.change();
|
||||
|
||||
@ -258,18 +258,17 @@
|
||||
var type = rule.find(".node-input-rule-type option:selected").val();
|
||||
var r = {
|
||||
t:type,
|
||||
p:rule.find(".node-input-rule-property-name").val(),
|
||||
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").val();
|
||||
r.to = rule.find(".node-input-rule-property-value").typedInput('value');
|
||||
r.tot = rule.find(".node-input-rule-property-value").typedInput('type');
|
||||
} else if (type === "change") {
|
||||
r.from = rule.find(".node-input-rule-property-search-value").val();
|
||||
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").val();
|
||||
r.to = rule.find(".node-input-rule-property-replace-value").typedInput('value');
|
||||
r.tot = rule.find(".node-input-rule-property-replace-value").typedInput('type');
|
||||
r.re = rule.find(".node-input-rule-property-re").prop('checked');
|
||||
}
|
||||
node.rules.push(r);
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user