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

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,20 +16,25 @@
<script type="text/x-red" data-template-name="delay">
<div class="form-row">
<label for="node-input-pauseType"><i class="fa fa-tasks"></i> <span data-i18n="delay.action"></span></label>
<select id="node-input-pauseType" style="width:270px !important">
<label for="node-input-delay-action"><i class="fa fa-tasks"></i> <span data-i18n="delay.action"></span></label>
<select id="node-input-delay-action" style="width:270px !important">
<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="queue" data-i18n="delay.fairqueue"></option>
<option value="timed" data-i18n="delay.timedqueue"></option>
</select>
</div>
<div id="delay-details" class="form-row">
<div id="delay-details">
<div class="form-row">
<label></label>
<select id="node-input-delay-type" style="width:270px !important">
<option value="delay" data-i18n="delay.delayfixed"></option>
<option value="random" data-i18n="delay.randomdelay"></option>
<option value="delayv" data-i18n="delay.delayvarmsg"></option>
</select>
</div>
<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" placeholder="Time" style="text-align:end; width:50px !important">
<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>
@ -38,22 +43,6 @@
<option value="days" data-i18n="delay.days"></option>
</select>
</div>
<div id="rate-details" 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>
<br/>
<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>
<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">
@ -67,6 +56,41 @@
<option value="days" data-i18n="delay.days"></option>
</select>
</div>
</div>
<div id="rate-details">
<div class="form-row">
<label></label>
<select id="node-input-rate-type" style="width:270px !important">
<option value="all" data-i18n="delay.limitall"></option>
<option value="topic" data-i18n="delay.limittopic"></option>
</select>
</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 class="form-row">
<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 type="text/x-red" data-help-name="delay">
<p>Introduces a delay into a flow or rate limits messages.</p>
<p>The default delay is 5 seconds and rate limit of 1 msg/second, but both can be configured.</p>
<p>When set to rate limit messages, they are spread across the configured time period. It can
also be set to discard any intermediate messages that arrive.</p>
<p>If configured to use <code>msg.delay</code> the delay is specified in milliseconds.</p>
<p>The "topic based fair queue" adds messages to a release queue tagged by their <code>msg.topic</code> property.
At each "tick", derived from the rate, the next "topic" is released.
Any messages arriving on the same topic before release replace those in that position in the queue.
So each "topic" gets a turn - but the most recent value is always the one sent.</p>
<p>The "timed release queue" adds messages to an array based on their <code>msg.topic</code> property.
At each "tick", all the latest messages are released. Any new messages arriving before release will
replace those of the same topic.</p>
<p>Delays each message passing through the node or limits the rate at which they can pass.</p>
<h3>Inputs</h3>
<dl class="message-properties">
<dt class="optional">delay <span class="property-type">number</span></dt>
<dd>Sets the delay, in milliseconds, to be applied to the message. This
option only applies if the node is configured to allow the message to
provide the delay interval.</dd>
</dl>
<h3>Details</h3>
<p>When configured to delay messages, the delay interval can be a fixed value
a random value within a range or dynamically set for each message.</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 type="text/javascript">
@ -110,31 +142,38 @@
outputs:1,
icon: "timer.png",
label: function() {
if (this.name) {
return this.name;
}
if (this.pauseType == "delayv") {
return this.name||this._("delay.label.variable");
return this._("delay.label.variable");
} else if (this.pauseType == "delay") {
var units = this.timeoutUnits ? this.timeoutUnits.charAt(0) : "s";
if (this.timeoutUnits == "milliseconds") { units = "ms"; }
return this.name||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;
return this._("delay.label.delay")+" "+this.timeout+units;
} else if (this.pauseType == "random") {
return this.name || this._("delay.label.random");
}
else if (this.pauseType == "timed") {
var units = '';
if (this.nbRateUnits > 1) {
units = this.nbRateUnits + ' ' + this._("delay.label.units." + this.rateUnits + ".plural");
return this._("delay.label.random");
} else {
units = this._("delay.label.units." + this.rateUnits + ".singular");
var rate = this.rate+" msg/"+(this.rateUnits ? (this.nbRateUnits > 1 ? this.nbRateUnits : '') + this.rateUnits.charAt(0) : "s");
if (this.pauseType == "rate") {
return this._("delay.label.limit")+" "+rate;
} else if (this.pauseType == "timed") {
return this._("delay.label.limitTopic")+" "+rate;
} else {
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() {
return this.name?"node_label_italic":"";
@ -172,35 +211,25 @@
});
if (this.pauseType == "delay") {
$("#delay-details").show();
$("#rate-details").hide();
$("#random-details").hide();
$("#node-input-dr").hide();
$("#node-input-delay-action").val('delay');
$("#node-input-delay-type").val('delay');
} else if (this.pauseType == "delayv") {
$("#delay-details").hide();
$("#rate-details").hide();
$("#random-details").hide();
$("#node-input-dr").hide();
} else if (this.pauseType == "rate") {
$("#delay-details").hide();
$("#rate-details").show();
$("#random-details").hide();
$("#node-input-dr").show();
$("#node-input-delay-action").val('delay');
$("#node-input-delay-type").val('delayv');
} else if (this.pauseType == "random") {
$("#delay-details").hide();
$("#rate-details").hide();
$("#random-details").show();
$("#node-input-dr").hide();
$("#node-input-delay-action").val('delay');
$("#node-input-delay-type").val('random');
} else if (this.pauseType == "rate") {
$("#node-input-delay-action").val('rate');
$("#node-input-rate-type").val('all');
} else if (this.pauseType == "queue") {
$("#delay-details").hide();
$("#rate-details").show();
$("#random-details").hide();
$("#node-input-dr").hide();
$("#node-input-delay-action").val('rate');
$("#node-input-rate-type").val('topic');
$("#node-input-rate-topic-type").val('queue');
} else if (this.pauseType == "timed") {
$("#delay-details").hide();
$("#rate-details").show();
$("#random-details").hide();
$("#node-input-dr").hide();
$("#node-input-delay-action").val('rate');
$("#node-input-rate-type").val('topic');
$("#node-input-rate-topic-type").val('timed');
}
if (!this.timeoutUnits) {
@ -215,39 +244,51 @@
}).attr('selected', true);
}
$("#node-input-pauseType").on("change",function() {
if (this.value == "delay") {
$("#node-input-delay-action").on("change",function() {
if (this.value === "delay") {
$("#delay-details").show();
$("#rate-details").hide();
$("#random-details").hide();
$("#node-input-dr").hide();
} else if (this.value == "delayv") {
$("#delay-details").hide();
$("#rate-details").hide();
$("#random-details").hide();
$("#node-input-dr").hide();
} else if (this.value == "rate") {
} else if (this.value === "rate") {
$("#delay-details").hide();
$("#rate-details").show();
$("#random-details").hide();
$("#node-input-dr").show();
} else if (this.value == "random") {
$("#delay-details").hide();
$("#rate-details").hide();
$("#random-details").show();
$("#node-input-dr").hide();
} else if (this.value == "queue") {
$("#delay-details").hide();
$("#rate-details").show();
$("#random-details").hide();
$("#node-input-dr").hide();
} else if (this.value == "timed") {
$("#delay-details").hide();
$("#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>

View File

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