Update delay node ui

This commit is contained in:
Nick O'Leary 2017-05-26 13:51:58 +01:00
parent 65e27a268d
commit ac31957707
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 221 additions and 178 deletions

View File

@ -16,57 +16,81 @@
<script type="text/x-red" data-template-name="delay"> <script type="text/x-red" data-template-name="delay">
<div class="form-row"> <div class="form-row">
<label for="node-input-pauseType"><i class="fa fa-tasks"></i> <span data-i18n="delay.action"></span></label> <label for="node-input-delay-action"><i class="fa fa-tasks"></i> <span data-i18n="delay.action"></span></label>
<select id="node-input-pauseType" style="width:270px !important"> <select id="node-input-delay-action" style="width:270px !important">
<option value="delay" data-i18n="delay.delaymsg"></option> <option value="delay" data-i18n="delay.delaymsg"></option>
<option value="delayv" data-i18n="delay.delayvarmsg"></option>
<option value="random" data-i18n="delay.randomdelay"></option>
<option value="rate" data-i18n="delay.limitrate"></option> <option value="rate" data-i18n="delay.limitrate"></option>
<option value="queue" data-i18n="delay.fairqueue"></option>
<option value="timed" data-i18n="delay.timedqueue"></option>
</select> </select>
</div> </div>
<div id="delay-details" class="form-row"> <div id="delay-details">
<label for="node-input-timeout"><i class="fa fa-clock-o"></i> <span data-i18n="delay.for"></span></label> <div class="form-row">
<input type="text" id="node-input-timeout" placeholder="Time" style="text-align:end; width:50px !important"> <label></label>
<select id="node-input-timeoutUnits" style="width:200px !important"> <select id="node-input-delay-type" style="width:270px !important">
<option value="milliseconds" data-i18n="delay.milisecs"></option> <option value="delay" data-i18n="delay.delayfixed"></option>
<option value="seconds" data-i18n="delay.secs"></option> <option value="random" data-i18n="delay.randomdelay"></option>
<option value="minutes" data-i18n="delay.mins"></option> <option value="delayv" data-i18n="delay.delayvarmsg"></option>
<option value="hours" data-i18n="delay.hours"></option> </select>
<option value="days" data-i18n="delay.days"></option> </div>
</select> <div class="form-row" id="delay-details-for">
<label for="node-input-timeout"><i class="fa fa-clock-o"></i> <span data-i18n="delay.for"></span></label>
<input type="text" id="node-input-timeout" style="text-align:end; width:50px !important">
<select id="node-input-timeoutUnits" style="width:200px !important">
<option value="milliseconds" data-i18n="delay.milisecs"></option>
<option value="seconds" data-i18n="delay.secs"></option>
<option value="minutes" data-i18n="delay.mins"></option>
<option value="hours" data-i18n="delay.hours"></option>
<option value="days" data-i18n="delay.days"></option>
</select>
</div>
<div id="random-details" class="form-row">
<label for="node-input-randomFirst"><i class="fa fa-clock-o"></i> <span data-i18n="delay.between"></span></label>
<input type="text" id="node-input-randomFirst" placeholder="" style="text-align:end; width:30px !important">
&nbsp;&nbsp;&amp;&nbsp;&nbsp;
<input type="text" id="node-input-randomLast" placeholder="" style="text-align:end; width:30px !important">
<select id="node-input-randomUnits" style="width:140px !important">
<option value="milliseconds" data-i18n="delay.milisecs"></option>
<option value="seconds" data-i18n="delay.secs"></option>
<option value="minutes" data-i18n="delay.mins"></option>
<option value="hours" data-i18n="delay.hours"></option>
<option value="days" data-i18n="delay.days"></option>
</select>
</div>
</div> </div>
<div id="rate-details" class="form-row"> <div id="rate-details">
<label for="node-input-rate"><i class="fa fa-clock-o"></i> <span data-i18n="delay.rate"></span></label> <div class="form-row">
<input type="text" id="node-input-rate" placeholder="1" style="text-align:end; width:30px !important"> <label></label>
<label for="node-input-rateUnits"><span data-i18n="delay.msgper"></span></label> <select id="node-input-rate-type" style="width:270px !important">
<input type="text" id="node-input-nbRateUnits" placeholder="1" style="text-align:end; width:30px !important"> <option value="all" data-i18n="delay.limitall"></option>
<select id="node-input-rateUnits" style="width:110px !important"> <option value="topic" data-i18n="delay.limittopic"></option>
<option value="second" data-i18n="delay.label.units.second.singular"></option>
<option value="minute" data-i18n="delay.label.units.minute.singular"></option>
<option value="hour" data-i18n="delay.label.units.hour.singular"></option>
<option value="day" data-i18n="delay.label.units.day.singular"></option>
</select> </select>
<br/> </div>
<div id="node-input-dr"><input style="margin: 20px 0 20px 100px; width: 30px;" type="checkbox" id="node-input-drop"><label style="width: 250px;" for="node-input-drop"><span data-i18n="delay.dropmsg"></span></label></div> <div class="form-row">
<label for="node-input-rate"><i class="fa fa-clock-o"></i> <span data-i18n="delay.rate"></span></label>
<input type="text" id="node-input-rate" placeholder="1" style="text-align:end; width:30px !important">
<label for="node-input-rateUnits"><span data-i18n="delay.msgper"></span></label>
<input type="text" id="node-input-nbRateUnits" placeholder="1" style="text-align:end; width:30px !important">
<select id="node-input-rateUnits" style="width:110px !important">
<option value="second" data-i18n="delay.label.units.second.singular"></option>
<option value="minute" data-i18n="delay.label.units.minute.singular"></option>
<option value="hour" data-i18n="delay.label.units.hour.singular"></option>
<option value="day" data-i18n="delay.label.units.day.singular"></option>
</select>
</div>
<div class="form-row" id="rate-details-drop">
<label></label><input style="width: 30px;" type="checkbox" id="node-input-drop"><label style="width: 250px;" for="node-input-drop" data-i18n="delay.dropmsg"></label>
</div>
<div class="form-row" id="rate-details-per-topic">
<label></label>
<select id="node-input-rate-topic-type" style="width:270px !important">
<option value="queue" data-i18n="delay.fairqueue"></option>
<option value="timed" data-i18n="delay.timedqueue"></option>
</select>
</div>
</div> </div>
<div id="random-details" class="form-row">
<label for="node-input-randomFirst"><i class="fa fa-clock-o"></i> <span data-i18n="delay.between"></span></label>
<input type="text" id="node-input-randomFirst" placeholder="" style="text-align:end; width:30px !important">
&nbsp;&nbsp;&amp;&nbsp;&nbsp;
<input type="text" id="node-input-randomLast" placeholder="" style="text-align:end; width:30px !important">
<select id="node-input-randomUnits" style="width:140px !important">
<option value="milliseconds" data-i18n="delay.milisecs"></option>
<option value="seconds" data-i18n="delay.secs"></option>
<option value="minutes" data-i18n="delay.mins"></option>
<option value="hours" data-i18n="delay.hours"></option>
<option value="days" data-i18n="delay.days"></option>
</select>
</div>
<div class="form-row"> <div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label> <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
@ -75,18 +99,26 @@
</script> </script>
<script type="text/x-red" data-help-name="delay"> <script type="text/x-red" data-help-name="delay">
<p>Introduces a delay into a flow or rate limits messages.</p> <p>Delays each message passing through the node or limits the rate at which they can pass.</p>
<p>The default delay is 5 seconds and rate limit of 1 msg/second, but both can be configured.</p> <h3>Inputs</h3>
<p>When set to rate limit messages, they are spread across the configured time period. It can <dl class="message-properties">
also be set to discard any intermediate messages that arrive.</p> <dt class="optional">delay <span class="property-type">number</span></dt>
<p>If configured to use <code>msg.delay</code> the delay is specified in milliseconds.</p> <dd>Sets the delay, in milliseconds, to be applied to the message. This
<p>The "topic based fair queue" adds messages to a release queue tagged by their <code>msg.topic</code> property. option only applies if the node is configured to allow the message to
At each "tick", derived from the rate, the next "topic" is released. provide the delay interval.</dd>
Any messages arriving on the same topic before release replace those in that position in the queue. </dl>
So each "topic" gets a turn - but the most recent value is always the one sent.</p> <h3>Details</h3>
<p>The "timed release queue" adds messages to an array based on their <code>msg.topic</code> property. <p>When configured to delay messages, the delay interval can be a fixed value
At each "tick", all the latest messages are released. Any new messages arriving before release will a random value within a range or dynamically set for each message.</p>
replace those of the same topic.</p> <p>When configured to rate limit messages, their delivery is spread across
the configured time period. It can optionally discard intermediate messages as they arrive.</p>
</p>
<p>The rate limiting can be applied to all messages, or group them according to
their <code>msg.topic</code> value. When grouping, intermerdiate messages are
automatically dropped. At each time interval, the node can either release
the most recent message for all topics, or release the most recent message
for the next topic.
</p>
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
@ -110,144 +142,153 @@
outputs:1, outputs:1,
icon: "timer.png", icon: "timer.png",
label: function() { label: function() {
if (this.name) {
return this.name;
}
if (this.pauseType == "delayv") { if (this.pauseType == "delayv") {
return this.name||this._("delay.label.variable"); return this._("delay.label.variable");
} else if (this.pauseType == "delay") { } else if (this.pauseType == "delay") {
var units = this.timeoutUnits ? this.timeoutUnits.charAt(0) : "s"; var units = this.timeoutUnits ? this.timeoutUnits.charAt(0) : "s";
if (this.timeoutUnits == "milliseconds") { units = "ms"; } if (this.timeoutUnits == "milliseconds") { units = "ms"; }
return this.name||this._("delay.label.delay")+" "+this.timeout+" "+units; return this._("delay.label.delay")+" "+this.timeout+units;
} else if (this.pauseType == "rate") {
var units = this.rateUnits ? (this.nbRateUnits > 1 ? this.nbRateUnits : '') + this.rateUnits.charAt(0) : "s";
return this.name||this._("delay.label.limit")+" "+this.rate+" msg/"+units;
} else if (this.pauseType == "random") { } else if (this.pauseType == "random") {
return this.name || this._("delay.label.random"); return this._("delay.label.random");
} } else {
else if (this.pauseType == "timed") { var rate = this.rate+" msg/"+(this.rateUnits ? (this.nbRateUnits > 1 ? this.nbRateUnits : '') + this.rateUnits.charAt(0) : "s");
var units = ''; if (this.pauseType == "rate") {
if (this.nbRateUnits > 1) { return this._("delay.label.limit")+" "+rate;
units = this.nbRateUnits + ' ' + this._("delay.label.units." + this.rateUnits + ".plural"); } else if (this.pauseType == "timed") {
return this._("delay.label.limitTopic")+" "+rate;
} else { } else {
units = this._("delay.label.units." + this.rateUnits + ".singular"); return this._("delay.label.limitTopic")+" "+rate;
} }
return this.name || this.rate + " " + this._("delay.label.timed") + ' ' + units;
}
else {
var units = this.rateUnits ? (this.nbRateUnits > 1 ? this.nbRateUnits : '') + this.rateUnits.charAt(0) : "s";
return this.name || this._("delay.label.queue")+" "+this.rate+" msg/"+units;
} }
// var units = '';
// if (this.nbRateUnits > 1) {
// units = this.nbRateUnits + ' ' + this._("delay.label.units." + this.rateUnits + ".plural");
// } else {
// units = this._("delay.label.units." + this.rateUnits + ".singular");
// }
// return this.name || this.rate + " " + this._("delay.label.timed") + ' ' + units;
// } else {
// var units = this.rateUnits ? (this.nbRateUnits > 1 ? this.nbRateUnits : '') + this.rateUnits.charAt(0) : "s";
// return this.name || this._("delay.label.queue")+" "+this.rate+" msg/"+units;
// }
}, },
labelStyle: function() { labelStyle: function() {
return this.name?"node_label_italic":""; return this.name?"node_label_italic":"";
}, },
oneditprepare: function() { oneditprepare: function() {
var node = this; var node = this;
$( "#node-input-timeout" ).spinner({min:1}); $( "#node-input-timeout" ).spinner({min:1});
$( "#node-input-rate" ).spinner({min:1}); $( "#node-input-rate" ).spinner({min:1});
$( "#node-input-nbRateUnits" ).spinner({min:1}); $( "#node-input-nbRateUnits" ).spinner({min:1});
$( "#node-input-randomFirst" ).spinner({min:0}); $( "#node-input-randomFirst" ).spinner({min:0});
$( "#node-input-randomLast" ).spinner({min:1}); $( "#node-input-randomLast" ).spinner({min:1});
$('.ui-spinner-button').click(function() { $('.ui-spinner-button').click(function() {
$(this).siblings('input').change(); $(this).siblings('input').change();
});
$( "#node-input-nbRateUnits" ).on('change keyup', function() {
var $this = $(this);
var val = parseInt($this.val());
var type = "singular";
if (val > 1) {
type = "plural";
}
if ($this.attr("data-type") == type) {
return;
}
$this.attr("data-type", type);
$("#node-input-rateUnits option").each(function () {
var $option = $(this);
var key = "delay.label.units." + $option.val() + "." + type;
$option.attr('data-i18n', 'node-red:' + key);
$option.html(node._(key));
}); });
});
if (this.pauseType == "delay") { $( "#node-input-nbRateUnits" ).on('change keyup', function() {
$("#delay-details").show(); var $this = $(this);
$("#rate-details").hide(); var val = parseInt($this.val());
$("#random-details").hide(); var type = "singular";
$("#node-input-dr").hide(); if (val > 1) {
} else if (this.pauseType == "delayv") { type = "plural";
$("#delay-details").hide(); }
$("#rate-details").hide(); if ($this.attr("data-type") == type) {
$("#random-details").hide(); return;
$("#node-input-dr").hide(); }
} else if (this.pauseType == "rate") { $this.attr("data-type", type);
$("#delay-details").hide(); $("#node-input-rateUnits option").each(function () {
$("#rate-details").show(); var $option = $(this);
$("#random-details").hide(); var key = "delay.label.units." + $option.val() + "." + type;
$("#node-input-dr").show(); $option.attr('data-i18n', 'node-red:' + key);
} else if (this.pauseType == "random") { $option.html(node._(key));
$("#delay-details").hide(); });
$("#rate-details").hide(); });
$("#random-details").show();
$("#node-input-dr").hide();
} else if (this.pauseType == "queue") {
$("#delay-details").hide();
$("#rate-details").show();
$("#random-details").hide();
$("#node-input-dr").hide();
} else if (this.pauseType == "timed") {
$("#delay-details").hide();
$("#rate-details").show();
$("#random-details").hide();
$("#node-input-dr").hide();
}
if (!this.timeoutUnits) { if (this.pauseType == "delay") {
$("#node-input-timeoutUnits option").filter(function() { $("#node-input-delay-action").val('delay');
return $(this).val() == 'seconds'; $("#node-input-delay-type").val('delay');
}).attr('selected', true); } else if (this.pauseType == "delayv") {
} $("#node-input-delay-action").val('delay');
$("#node-input-delay-type").val('delayv');
if (!this.randomUnits) { } else if (this.pauseType == "random") {
$("#node-input-randomUnits option").filter(function() { $("#node-input-delay-action").val('delay');
return $(this).val() == 'seconds'; $("#node-input-delay-type").val('random');
}).attr('selected', true); } else if (this.pauseType == "rate") {
} $("#node-input-delay-action").val('rate');
$("#node-input-rate-type").val('all');
$("#node-input-pauseType").on("change",function() { } else if (this.pauseType == "queue") {
if (this.value == "delay") { $("#node-input-delay-action").val('rate');
$("#delay-details").show(); $("#node-input-rate-type").val('topic');
$("#rate-details").hide(); $("#node-input-rate-topic-type").val('queue');
$("#random-details").hide(); } else if (this.pauseType == "timed") {
$("#node-input-dr").hide(); $("#node-input-delay-action").val('rate');
} else if (this.value == "delayv") { $("#node-input-rate-type").val('topic');
$("#delay-details").hide(); $("#node-input-rate-topic-type").val('timed');
$("#rate-details").hide(); }
$("#random-details").hide();
$("#node-input-dr").hide(); if (!this.timeoutUnits) {
} else if (this.value == "rate") { $("#node-input-timeoutUnits option").filter(function() {
$("#delay-details").hide(); return $(this).val() == 'seconds';
$("#rate-details").show(); }).attr('selected', true);
$("#random-details").hide(); }
$("#node-input-dr").show();
} else if (this.value == "random") { if (!this.randomUnits) {
$("#delay-details").hide(); $("#node-input-randomUnits option").filter(function() {
$("#rate-details").hide(); return $(this).val() == 'seconds';
$("#random-details").show(); }).attr('selected', true);
$("#node-input-dr").hide(); }
} else if (this.value == "queue") {
$("#delay-details").hide(); $("#node-input-delay-action").on("change",function() {
$("#rate-details").show(); if (this.value === "delay") {
$("#random-details").hide(); $("#delay-details").show();
$("#node-input-dr").hide(); $("#rate-details").hide();
} else if (this.value == "timed") { } else if (this.value === "rate") {
$("#delay-details").hide(); $("#delay-details").hide();
$("#rate-details").show(); $("#rate-details").show();
$("#random-details").hide(); }
$("#node-input-dr").hide(); }).change();
$("#node-input-delay-type").on("change", function() {
if (this.value === "delay") {
$("#delay-details-for").show();
$("#random-details").hide();
} else if (this.value === "delayv") {
$("#delay-details-for").hide();
$("#random-details").hide();
} else if (this.value === "random") {
$("#delay-details-for").hide();
$("#random-details").show();
}
}).change();
$("#node-input-rate-type").on("change", function() {
if (this.value === "all") {
$("#node-input-drop").attr('disabled',false).next().css("opacity",1)
$("#rate-details-per-topic").hide();
} else if (this.value === "topic") {
$("#node-input-drop").prop('checked',true).attr('disabled',true).next().css("opacity",0.5)
$("#rate-details-per-topic").show();
}
}).change();
},
oneditsave: function() {
var action = $("#node-input-delay-action").val();
if (action === "delay") {
this.pauseType = $("#node-input-delay-type").val();
} else if (action === "rate") {
action = $("#node-input-rate-type").val();
if (action === "all") {
this.pauseType = "rate";
} else {
this.pauseType = $("#node-input-rate-topic-type").val();
}
} }
});
} }
}); });
</script> </script>

View File

@ -193,12 +193,15 @@
"delay": { "delay": {
"action": "Action", "action": "Action",
"for": "For", "for": "For",
"delaymsg": "Delay message", "delaymsg": "Delay each message",
"delayfixed": "Fixed delay",
"delayvarmsg": "Set delay with msg.delay", "delayvarmsg": "Set delay with msg.delay",
"randomdelay": "Random delay", "randomdelay": "Random delay",
"limitrate": "Limit rate to", "limitrate": "Rate Limit",
"fairqueue": "Topic based fair queue", "limitall": "All messages",
"timedqueue": "Timed release queue", "limittopic": "For each msg.topic",
"fairqueue": "Send each topic in turn",
"timedqueue": "Send all topics",
"milisecs": "Miliseconds", "milisecs": "Miliseconds",
"secs": "Seconds", "secs": "Seconds",
"sec": "Second", "sec": "Second",
@ -216,9 +219,8 @@
"delay": "delay", "delay": "delay",
"variable": "variable", "variable": "variable",
"limit": "limit", "limit": "limit",
"limitTopic": "limit topic",
"random": "random", "random": "random",
"queue": "queue",
"timed": "releases per",
"units" : { "units" : {
"second": { "second": {
"plural" : "Seconds", "plural" : "Seconds",