node-red-contrib-state
Version:
Shared state with persistence, notification, and history
141 lines (124 loc) • 6.42 kB
HTML
<!--
The MIT License
Copyright (c) 2020, Loren West and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
<!-- Registration -->
<script type="text/javascript">
RED.nodes.registerType('set-shared-state',{
category: 'common', // Palette category
defaults: { // Editable properties
state: {type:"shared-state", required:true},
name: {value:""},
triggerOnInit: {value:true},
triggerOnChange: {value:true},
provideOutput: {value:false},
outputs: {value:0},
},
inputs: 1,
outputs: 0,
// Use a stock icon https://nodered.org/docs/creating-nodes/appearance#stock-icons
// or reference another package icon 'node-red/redis.png', 'node-red-suncalc/sun.png',
// or a font-awesome font 'font-awesome/fa-area-chart',
// or create an icon using the style guide and place it under lib/icons
icon: 'font-awesome/fa-sign-in',
// Style guide suggests choosing a color among the following
// https://nodered.org/docs/creating-nodes/appearance#background-colour
color: '#C7E9C0',
// Style guide says align:right if it's input-only (last in a flow)
// https://nodered.org/docs/creating-nodes/appearance#alignment
align: 'right',
// Label style guide: https://nodered.org/docs/creating-nodes/appearance#labels
label: function() {
return this.name ? this.name : 'set state';
},
paletteLabel: function() {
return 'set state';
},
labelStyle: function() {
return this.state ? "node_label_italic" : "";
},
oneditsave: function() {
let node = this;
// Set the node name to the selected state
node.name = $('#node-input-state option:selected').text();
node.outputs = $('#node-input-provideOutput')[0].checked ? 1 : 0;
// Save the trigger method settings
node.triggerOnInit = $('#triggerOnInit').prop('checked') || $('#triggerOnBoth').prop('checked');
node.triggerOnChange = $('#triggerOnChange').prop('checked') || $('#triggerOnBoth').prop('checked');
},
oneditprepare: function() {
let node = this;
if (node.triggerOnInit &&
(typeof(node.triggerOnChange) === "undefined" || node.triggerOnChange)) {
$('#triggerOnBoth').prop('checked',true); // Default to both like the previous version
}
else if (node.triggerOnInit) {
$('#triggerOnInit').prop('checked',true);
}
else {
$('#triggerOnChange').prop('checked',true);
}
function showTriggers(show) {
$('#triggers')[show ? 'show' : 'hide']();
}
$('#node-input-provideOutput').on('change', function() {
showTriggers(this.checked);
});
showTriggers(node.provideOutput);
},
});
</script>
<!-- Properties Editor -->
<script type="text/x-red" data-template-name="set-shared-state">
<input type="text" id="username" style="width:0;height:0;z-index:-1;position:absolute;left:0;top:0" />
<input type="password" id="password" style="width:0;height:0;z-index:-1;position:absolute;left:0;top:0" />
<div class="form-row">
<label for="node-input-state"><i style="width:20px; text-align:left;" class="fa fa-sign-in"></i> State</label>
<input type="text" id="node-input-state">
</div>
<div class="form-row">
<label for="node-input-provideOutput"> </label>
<input type="checkbox" id="node-input-provideOutput" style="display:inline-block; width:15px; vertical-align:baseline;">
<span>Provide output</span>
</div>
<div class="form-row" id="triggers">
<label for="triggerOnInit"><i style="width:20px; text-align:left;" class="fa fa-bolt"></i> Fire On</label>
<input type="radio" id="triggerOnInit" name="triggermode" style="display:inline-block; width:15px; vertical-align:baseline;">
<span>Initializing</span><br \>
<label for="triggerOnChange"> </label>
<input type="radio" id="triggerOnChange" name="triggermode" style="display:inline-block; width:15px; vertical-align:baseline;">
<span>State Change</span><br \>
<label for="triggerOnBoth"> </label>
<input type="radio" id="triggerOnBoth" name="triggermode" style="display:inline-block; width:15px; vertical-align:baseline;">
<span>Both</span>
</div>
</script>
<!-- Help Text -->
<script type="text/x-red" data-help-name="set-shared-state">
<h4>Set Shared State</h4>
<hr/>
<p>
This node is used to change shared state. Send the new state value onto <i>msg.payload</i> to change state.
</p>
<h4>Configuration</h4>
<ul>
<li><b>State</b> - Reference to the shared state. It is defined independently to be shared among many <i>getState</i> and <i>setState</i> nodes.</li>
<li><b>Provide output</b> - Place an output handle on the node for connecting to downstream nodes</li>
<li><b>Fire on</b> - The current state will be sent on either or both of two events when <i>Provide output</i> is checked. If <i>Initializing</i> is selected this flow will be triggered on initialization only. If <i>State Change</i> is selected then it will be triggered on state change only. When <i>Both</i> is selected it will trigger on either. Updating from earlier versions will result in <i>Both</i> being selected if <i>Init</i> was previously checked, or <i>State Change</i> if not, so that original behavior is maintained.</li>
</ul>
</script>