node-red-contrib-state
Version:
Shared state with persistence, notification, and history
143 lines (125 loc) • 6.32 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('get-shared-state',{
category: 'common', // Palette category
defaults: { // Editable properties
state: {type:"shared-state", required:true},
name: {value:""},
triggerOnInit: {value:true},
triggerOnChange: {value:true},
},
inputs: 0,
outputs: 1,
// 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-out',
// 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: 'left',
// Label style guide: https://nodered.org/docs/creating-nodes/appearance#labels
label: function() {
return this.name ? this.name : 'get state';
},
paletteLabel: function() {
return 'get state';
},
labelStyle: function() {
return this.state ? "node_label_italic" : "";
},
// @colincoder Changes to make trigger modes more flexible
oneditprepare: function() {
let node = this;
// console.log(node);
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);
}
},
oneditsave: function() {
let node = this;
// Set the node name to the selected state
node.name = $('#node-input-state option:selected').text();
// Save the trigger method settings
node.triggerOnInit = $('#triggerOnInit').prop('checked') || $('#triggerOnBoth').prop('checked');
node.triggerOnChange = $('#triggerOnChange').prop('checked') || $('#triggerOnBoth').prop('checked');
// console.log(node);
},
// @colincoder End of changes to make trigger modes more flexible
});
</script>
<!-- Properties Editor -->
<script type="text/x-red" data-template-name="get-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-out"></i> State</label>
<input type="text" id="node-input-state">
</div>
<div class="form-row">
<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="get-shared-state">
<h4>Get Shared State</h4>
<hr/>
This triggers a new flow on state change.
<p>
</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>Fire on</b> - The current state will be sent on either or both of two events. 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>
<h4>Message Flows</h4>
When this starts a new flow, the <i>msg</i> object contains
<ul>
<li><b>msg.payload</b> - This contains the current (new) state value.</li>
<li><b>msg.state</b> - This contains the full state object, with the following elements:
<ul>
<li><b>value</b> - Current state value</li>
<li><b>prev</b> - Previous state value</li>
<li><b>timestamp</b> - Timestamp of the state change in Date.now() format</li>
<li><b>history</b> - an array of state change <pre>{val:value, ts:timestamp}</pre> objects, sorted newest to oldest</li>
</ul>
</li>
</ul>
</script>