Update trigger node ui to use typedInputs

This commit is contained in:
Nick O'Leary
2016-07-05 15:38:43 +01:00
parent b74a35b9d1
commit 691b083364
4 changed files with 176 additions and 113 deletions

View File

@@ -16,54 +16,49 @@
<script type="text/x-red" data-template-name="trigger">
<div class="form-row">
<span data-i18n="trigger.send"></span>
<select id="node-input-op1type" style="width:200px !important">
<option value="val" data-i18n="trigger.output.string"></option>
<option value="num" data-i18n="trigger.output.number"></option>
<option value="pay" data-i18n="trigger.output.existing"></option>
<option value="nul" data-i18n="trigger.output.nothing"></option>
</select>
<input style="width: 180px !important" type="text" id="node-input-op1">
<label data-i18n="trigger.send" for="node-input-op1"></label>
<input type="hidden" id="node-input-op1type">
<input style="width: 70%" type="text" id="node-input-op1">
</div>
<div class="form-row">
<span data-i18n="trigger.then"></span>
<select id="node-then-type" style="width:150px;">
<label data-i18n="trigger.then"></label>
<select id="node-then-type" style="width:70%;">
<option value="block" data-i18n="trigger.wait-reset"></option>
<option value="wait" data-i18n="trigger.wait-for"></option>
</select>
<span class="node-type-wait">
<input type="text" id="node-input-duration" style="text-align:end; width:70px !important">
<select id="node-input-units" style="width:140px !important">
<option value="ms" data-i18n="trigger.duration.ms"></option>
<option value="s" data-i18n="trigger.duration.s"></option>
<option value="min" data-i18n="trigger.duration.m"></option>
<option value="hr" data-i18n="trigger.duration.h"></option>
</select>
</span>
</div>
<div class="form-row node-type-wait">
<label></label>
<input type="text" id="node-input-duration" style="text-align:end; width:70px !important">
<select id="node-input-units" style="width:140px !important">
<option value="ms" data-i18n="trigger.duration.ms"></option>
<option value="s" data-i18n="trigger.duration.s"></option>
<option value="min" data-i18n="trigger.duration.m"></option>
<option value="hr" data-i18n="trigger.duration.h"></option>
</select>
</div>
<div class="form-row node-type-wait">
<label></label>
<input type="checkbox" id="node-input-extend" style="margin-left: 0px; vertical-align: top; width: auto !important;"> <label style="width:auto !important;" for="node-input-extend" data-i18n="trigger.extend"></label>
</div>
<div class="form-row node-type-wait">
<span data-i18n="trigger.then-send"></span>
<select id="node-input-op2type" style="width:200px !important">
<option value="val" data-i18n="trigger.output.string"></option>
<option value="num" data-i18n="trigger.output.number"></option>
<option value="pay" data-i18n="trigger.output.original"></option>
<option value="payl" data-i18n="trigger.output.latest"></option>
<option value="nul" data-i18n="trigger.output.nothing"></option>
</select>
<input style="width: 145px !important" type="text" id="node-input-op2">
<label data-i18n="trigger.then-send"></label>
<input type="hidden" id="node-input-op2type">
<input style="width: 70%" type="text" id="node-input-op2">
</div>
<div class="form-row">
<span data-i18n="trigger.label.reset"></span><input type="text" id="node-input-reset" style="width:240px" data-i18n="[placeholder]trigger.label.resetprompt">
<label data-i18n="trigger.label.reset" style="width:auto"></label>
<div style="display:inline-block; width:70%;vertical-align:top">
<ul>
<li data-i18n="trigger.label.resetMessage"></li>
<li><span data-i18n="trigger.label.resetPayload"></span> <input type="text" id="node-input-reset" style="width:150px" data-i18n="[placeholder]trigger.label.resetprompt"></li>
</ul>
</div>
<br/>
<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" data-i18n="[placeholder]common.label.name"></input>
</div>
<div class="form-tips" data-i18n="[html]trigger.tip"></div>
</script>
<script type="text/x-red" data-help-name="trigger">
@@ -118,34 +113,48 @@
$("#node-then-type").change(function() {
if ($(this).val() == "block") {
$(".node-type-wait").hide();
$(".form-tips").show();
} else {
$(".node-type-wait").show();
$(".form-tips").hide();
}
});
$("#node-input-op1type").change(function() {
if (($(this).val() == "val")||($(this).val() == "num")) {
$("#node-input-op1").show();
} else {
$("#node-input-op1").hide();
}
if (this.op1type === 'val') {
$("#node-input-op1type").val('str');
}
if (this.op2type === 'val') {
$("#node-input-op2type").val('str');
}
var optionNothing = {value:"nul",label:this._("trigger.output.nothing"),hasValue:false};
var optionPayload = {value:"pay",label:this._("trigger.output.existing"),hasValue:false}
var optionOriginalPayload = {value:"pay",label:this._("trigger.output.original"),hasValue:false}
var optionLatestPayload = {value:"payl",label:this._("trigger.output.latest"),hasValue:false}
$("#node-input-op1").typedInput({
default: 'str',
typeField: $("#node-input-op1type"),
types:['flow','global','str','num','bool','json',
optionPayload,
optionNothing
]
});
$("#node-input-op2type").change(function() {
if (($(this).val() == "val")||($(this).val() == "num")) {
$("#node-input-op2").show();
} else {
$("#node-input-op2").hide();
}
$("#node-input-op2").typedInput({
default: 'str',
typeField: $("#node-input-op2type"),
types:['flow','global','str','num','bool','json',
optionOriginalPayload,
optionLatestPayload,
optionNothing
]
});
if (this.duration == "0") {
$("#node-then-type").val("block");
} else {
$("#node-then-type").val("wait");
}
$("#node-then-type").change();
$("#node-input-op1type").change();
$("#node-input-op2type").change();
if (this.extend === "true" || this.extend === true) {
$("#node-input-extend").prop("checked",true);

View File

@@ -21,8 +21,29 @@ module.exports = function(RED) {
RED.nodes.createNode(this,n);
this.op1 = n.op1 || "1";
this.op2 = n.op2 || "0";
this.op1type = n.op1type || "val";
this.op2type = n.op2type || "val";
this.op1type = n.op1type || "str";
this.op2type = n.op2type || "str";
if (this.op1type === 'val') {
if (this.op1 === 'true' || this.op1 === 'false') {
this.op1type = 'bool'
} else if (this.op1 === 'null') {
this.op1type = 'null';
this.op1 = null;
} else {
this.op1type = 'str';
}
}
if (this.op2type === 'val') {
if (this.op2 === 'true' || this.op2 === 'false') {
this.op2type = 'bool'
} else if (this.op2 === 'null') {
this.op2type = 'null';
this.op2 = null;
} else {
this.op2type = 'str';
}
}
this.extend = n.extend || "false";
this.units = n.units || "ms";
this.reset = n.reset || '';
@@ -33,14 +54,10 @@ module.exports = function(RED) {
if (this.units == "min") { this.duration = this.duration * 1000 * 60; }
if (this.units == "hr") { this.duration = this.duration * 1000 *60 * 60; }
}
this.op1Templated = this.op1.indexOf("{{") != -1;
this.op2Templated = this.op2.indexOf("{{") != -1;
this.op1Templated = (this.op1type === 'str' && this.op1.indexOf("{{") != -1);
this.op2Templated = (this.op2type === 'str' && this.op2.indexOf("{{") != -1);
if ((this.op1type === "num") && (!isNaN(this.op1))) { this.op1 = Number(this.op1); }
if ((this.op2type === "num") && (!isNaN(this.op2))) { this.op2 = Number(this.op2); }
if (this.op1 == "true") { this.op1 = true; }
if (this.op2 == "true") { this.op2 = true; }
if (this.op1 == "false") { this.op1 = false; }
if (this.op2 == "false") { this.op2 = false; }
if (this.op1 == "null") { this.op1 = null; }
if (this.op2 == "null") { this.op2 = null; }
//try { this.op1 = JSON.parse(this.op1); }
@@ -59,20 +76,31 @@ module.exports = function(RED) {
}
else {
if ((!tout) && (tout !== 0)) {
if (node.op2type === "pay") { m2 = msg.payload; }
else if (node.op2type === "payl") { m2 = msg.payload; }
if (node.op2type === "pay" || node.op2type === "payl") { m2 = msg.payload; }
else if (node.op2Templated) { m2 = mustache.render(node.op2,msg); }
else { m2 = node.op2; }
else if (node.op2type !== "nul") {
m2 = RED.util.evaluateNodeProperty(node.op2,node.op2type,node,msg);
}
if (node.op1type === "pay") { }
else if (node.op1Templated) { msg.payload = mustache.render(node.op1,msg); }
else { msg.payload = node.op1; }
else if (node.op1type !== "nul") {
msg.payload = RED.util.evaluateNodeProperty(node.op1,node.op1type,node,msg);
}
if (node.op1type !== "nul") { node.send(msg); }
if (node.duration === 0) { tout = 0; }
else {
tout = setTimeout(function() {
var msg2 = RED.util.cloneMessage(msg);
msg2.payload = m2;
if (node.op2type !== "nul") { node.send(msg2); }
if (node.op2type !== "nul") {
var msg2 = RED.util.cloneMessage(msg);
if (node.op2type === "flow" || node.op2type === "global") {
m2 = RED.util.evaluateNodeProperty(node.op2,node.op2type,node,msg);
}
msg2.payload = m2;
node.send(msg2);
}
tout = null;
node.status({});
},node.duration);
@@ -83,9 +111,14 @@ module.exports = function(RED) {
clearTimeout(tout);
if (node.op2type === "payl") { m2 = msg.payload; }
tout = setTimeout(function() {
var msg2 = RED.util.cloneMessage(msg);
msg2.payload = m2;
if (node.op2type !== "nul") { node.send(msg2); }
if (node.op2type !== "nul") {
var msg2 = RED.util.cloneMessage(msg);
if (node.op2type === "flow" || node.op2type === "global") {
m2 = RED.util.evaluateNodeProperty(node.op2,node.op2type,node,msg);
}
msg2.payload = m2;
node.send(msg2);
}
tout = null;
node.status({});
},node.duration);

View File

@@ -228,12 +228,13 @@
"h": "Hours"
},
"extend": " extend delay if new message arrives",
"tip": "The node can also be reset by sending a message with the <code>msg.reset</code> property set to any value.",
"label": {
"trigger": "trigger",
"trigger-block": "trigger & block",
"reset": "and reset if msg.payload == ",
"resetprompt": "(optional reset value)"
"reset": "Reset the trigger if:",
"resetMessage":"msg.reset is set",
"resetPayload":"msg.payload equals",
"resetprompt": "optional"
}
},
"comment": {