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

Update trigger node ui

This commit is contained in:
Nick O'Leary 2015-07-01 22:36:27 +01:00
parent c47da013ff
commit c9f3c6f4a3
2 changed files with 101 additions and 71 deletions

View File

@ -1,5 +1,5 @@
<!-- <!--
Copyright 2014 IBM Corp. Copyright 2014, 2015 IBM Corp.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -16,64 +16,48 @@
<script type="text/x-red" data-template-name="trigger"> <script type="text/x-red" data-template-name="trigger">
<div class="form-row"> <div class="form-row">
<label for="node-input-op1type"><i class="fa fa-arrow-up"></i> <span data-i18n="trigger.output1"></span></label> <span data-i18n="trigger.send"></span>
<select id="node-input-op1type" style="width:73% !important"> <select id="node-input-op1type" style="width:200px !important">
<option value="val" data-i18n="trigger.below"></option> <option value="val" data-i18n="trigger.output.string"></option>
<option value="pay" data-i18n="trigger.payload"></option> <option value="pay" data-i18n="trigger.output.existing"></option>
<option value="nul" data-i18n="trigger.nothing"></option> <option value="nul" data-i18n="trigger.output.nothing"></option>
</select> </select>
</div> <input style="width: 180px !important" type="text" id="node-input-op1">
<div class="form-row" id="node-op1">
<label for="node-input-op1">&nbsp;</label>
<input type="text" id="node-input-op1">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-input-duration"><i class="fa fa-clock-o"></i> <span data-i18n="trigger.wait"></span></label> <span data-i18n="trigger.then"></span>
<input type="text" id="node-input-duration" placeholder="250" style="direction:rtl; width:70px !important"> <select id="node-then-type" style="width:150px;">
<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:right; width:70px !important">
<select id="node-input-units" style="width:140px !important"> <select id="node-input-units" style="width:140px !important">
<option value="ms" data-i18n="trigger.milisecs"></option> <option value="ms" data-i18n="trigger.duration.ms"></option>
<option value="s" data-i18n="trigger.secs"></option> <option value="s" data-i18n="trigger.duration.s"></option>
<option value="min" data-i18n="trigger.mins"></option> <option value="min" data-i18n="trigger.duration.m"></option>
<option value="hr" data-i18n="trigger.hours"></option> <option value="hr" data-i18n="trigger.duration.h"></option>
</select> </select>
</span>
</div> </div>
<div class="form-row"> <div class="form-row node-type-wait">
<label for="node-input-op2type"><i class="fa fa-arrow-down"></i> <span data-i18n="trigger.output2"></span></label> <span data-i18n="trigger.then-send"></span>
<select id="node-input-op2type" style="width:73% !important"> <select id="node-input-op2type" style="width:200px !important">
<option value="val" data-i18n="trigger.below"></option> <option value="val" data-i18n="trigger.output.string"></option>
<option value="pay" data-i18n="trigger.payload"></option> <option value="pay" data-i18n="trigger.output.existing"></option>
<option value="nul" data-i18n="trigger.nothing"></option> <option value="nul" data-i18n="trigger.output.nothing"></option>
</select> </select>
<input style="width: 145px !important" type="text" id="node-input-op2">
</div> </div>
<div class="form-row" id="node-op2"> <div class="form-row node-type-wait">
<label for="node-input-op2">&nbsp;</label> <input type="checkbox" id="node-input-extend" style="margin-left: 5px; vertical-align: top; width: auto !important;"> <label style="width:auto !important;" for="node-input-extend" data-i18n="trigger.extend"></label>
<input type="text" id="node-input-op2">
</div>
<div class="form-row">
<label for="node-input-extend"><i class="fa fa-repeat"></i> <span data-i18n="trigger.and"></span></label>
<select id="node-input-extend" style="width:73% !important">
<option value="false" data-i18n="trigger.notext"></option>
<option value="true" data-i18n="trigger.extend"></option>
</select>
</div> </div>
<br/>
<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>
<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name"> <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
</div> </div>
<!-- <div class="form-tips">Tip: Outputs can be values, null, {{templated}} or msg.payload<br/> --> <div class="form-tips" data-i18n="[html]trigger.tip"></div>
<div class="form-tips"><span data-i18n="trigger.tip"></span></div>
<script>
{
$("#node-input-op1type").change(function() {
if ($("#node-input-op1type").val() == "val") { $("#node-op1").show(); }
else { $("#node-op1").hide(); }
});
$("#node-input-op2type").change(function() {
if ($("#node-input-op2type").val() == "val") { $("#node-op2").show(); }
else { $("#node-op2").hide(); }
});
}
</script>
</script> </script>
<script type="text/x-red" data-help-name="trigger"> <script type="text/x-red" data-help-name="trigger">
@ -111,20 +95,60 @@
icon: "trigger.png", icon: "trigger.png",
label: function() { label: function() {
if (this.duration > 0) { if (this.duration > 0) {
return this.name|| this._("trigger.triggerlabel")+" "+this.duration+this.units; return this.name|| this._("trigger.label.trigger")+" "+this.duration+this.units;
} }
else { else {
return this.name|| this._("trigger.triggeroncelabel"); return this.name|| this._("trigger.label.trigger-block");
} }
}, },
labelStyle: function() { labelStyle: function() {
return this.name?"node_label_italic":""; return this.name?"node_label_italic":"";
}, },
oneditprepare: function() { oneditprepare: function() {
$( "#node-input-duration" ).spinner({ $("#node-then-type").change(function() {
min:1, if ($(this).val() == "block") {
increment:25 $(".node-type-wait").hide();
$(".form-tips").show();
} else {
$(".node-type-wait").show();
$(".form-tips").hide();
}
}); });
$("#node-input-op1type").change(function() {
if ($(this).val() == "val") {
$("#node-input-op1").show();
} else {
$("#node-input-op1").hide();
}
});
$("#node-input-op2type").change(function() {
if ($(this).val() == "val") {
$("#node-input-op2").show();
} else {
$("#node-input-op2").hide();
}
});
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);
} else {
$("#node-input-extend").prop("checked",false);
}
},
oneditsave: function() {
if ($("#node-then-type").val() == "block") {
$("#node-input-duration").val("0");
}
} }
}); });
</script> </script>

View File

@ -141,22 +141,28 @@
} }
}, },
"trigger": { "trigger": {
"output1": "Output", "send": "Send",
"wait": "then wait", "then": "then",
"output2": "output", "then-send": "then send",
"and": "and", "output": {
"below": "the value below", "string": "the string payload",
"payload": "the existing payload", "existing": "the existing message",
"nothing": "nothing (no output)", "nothing": "nothing"
"milisecs": "Miliseconds", },
"secs": "Seconds", "wait-reset": "wait to be reset",
"mins": "Minutes", "wait-for": "wait for",
"hours": "Hours", "duration": {
"notext": "don't extend the timer if retriggered", "ms": "Milliseconds",
"extend": "extend the timer if retriggered", "s": "Seconds",
"tip": "Setting the timeout to 0 sets an infinite timeout = single shot.", "m": "Minutes",
"triggerlabel": "trigger", "h": "Hours"
"triggeroncelabel": "trigger once & infinite" },
"extend": "extend delay if new message arrives",
"tip": "The node can be reset by sending a message with the <b>msg.reset</b> property set",
"label": {
"trigger": "trigger",
"trigger-block": "trigger & block"
}
}, },
"comment": { "comment": {
"label": { "label": {