node-red-contrib-webthingsio
Version:
Set/get properties, execute actions and inject on events of your WebThings
177 lines (171 loc) • 8.55 kB
HTML
<script type="text/javascript">
window.RED.nodes.registerType('webthingsio-execute-action', {
category: 'Web Things IO',
color: '#5d9bc7',
defaults: {
/* eslint-disable no-undefined */
name: {value: ''},
gateway: {value: '', type: 'webthingsio-gateway'},
thing: {value: undefined, validate: (v) => v ? true : false},
action: {value: undefined, validate: (v) => v ? true : false},
inputMode: {value: undefined},
input: {value: undefined},
inputt: {value: undefined},
},
inputs: 1,
outputs: 0,
icon: 'webthingsio.svg',
label: function() {
function limitlen(s) {
if (s.length > RED.settings.webthingsioGatewayLimitInputLen) {
s = `${
s.substring(0, RED.settings.webthingsioGatewayLimitInputLen)
}...`;
}
return s;
}
if (this.name) {
return this.name;
} else if (this.gateway && this.thing && this.action) {
let base, baseWith, baseWithout;
const decodedThing = decodeURIComponent(this.thing);
if (RED.settings.webthingsioGatewayShorterLabels) {
base = this._('webthingsio-execute-action.shortLabel')
.replace('%action', this.action)
.replace('%thing', decodedThing);
baseWith = this._('webthingsio-execute-action.shortLabelWith')
.replace('%action', this.action)
.replace('%thing', decodedThing);
// eslint-disable-next-line max-len
baseWithout = this._('webthingsio-execute-action.shortLabelWithout')
.replace('%action', this.action)
.replace('%thing', decodedThing);
} else {
base = this._('webthingsio-execute-action.longLabel')
.replace('%action', this.action)
.replace('%thing', decodedThing);
baseWith = this._('webthingsio-execute-action.longLabelWith')
.replace('%action', this.action)
.replace('%thing', decodedThing);
// eslint-disable-next-line max-len
baseWithout = this._('webthingsio-execute-action.longLabelWithout')
.replace('%action', this.action)
.replace('%thing', decodedThing);
}
if (!this.input && this.inputMode !== 'injected') {
return baseWithout;
}
if (RED.settings.webthingsioGatewayLimitInputLen <= 0) {
return base;
}
switch (this.inputMode) {
case 'injected':
return base;
case 'fixed':
return baseWith
.replace('%input', limitlen(this.input));
case 'advanced':
if (
['msg', 'flow', 'global', 'env'].includes(this.inputt)
) {
return baseWith
.replace(
'%input',
`${this.inputt}.${limitlen(this.input)}`,
);
} else if (['json', 'jsonata'].includes(this.inputt)) {
return baseWith
.replace('%input', limitlen(this.input));
}
}
}
return this._('webthingsio-execute-action.defaultLabel');
},
paletteLabel: 'Execute action',
oneditprepare: async function() {
async function initializeInputs(node) {
if (
$('#node-input-gateway')[0].options.length > 1 &&
!node.gateway
) {
$('#node-input-gateway')[0].selectedIndex = 0;
$('#node-input-gateway').removeClass('input-error');
}
await webthingsio.updateThing(false);
$('#node-input--thing').prop('value', node.thing);
await webthingsio.updateAction(false);
$('#node-input--action').prop('value', node.action);
await webthingsio.updateActionInput(false);
webthingsio.initializeInput(node.input, node.inputt);
$('#node-input--inputMode').prop('value', node.inputMode);
await webthingsio.inputModeChanged('action');
}
function addListeners() {
$('#node-input-gateway')[0].addEventListener(
'change',
() => webthingsio.updateThing(),
);
$('#node-input--thing')[0].addEventListener(
'change',
() => webthingsio.updateAction(),
);
$('#node-input--action')[0].addEventListener(
'change',
() => webthingsio.updateActionInput(),
);
$('#node-input--inputMode')[0].addEventListener(
'change',
() => webthingsio.inputModeChanged('action'),
);
}
$('#node-input--input-advanced').typedInput({
type: 'msg',
types: ['msg', 'flow', 'global', 'json', 'jsonata', 'env'],
typeField: '#node-input--input-advanced-type',
});
await initializeInputs(this);
addListeners();
},
oneditsave: function() {
webthingsio.saveThing(this);
webthingsio.saveAction(this);
webthingsio.saveInputMode(this);
webthingsio.saveInput(this);
},
});
</script>
<script type="text/html" data-template-name="webthingsio-execute-action">
<div class="form-row" id="node-errorGatewayConnect" data-i18n="webthingsio-execute-action.errorGatewayConnect" style="display: none; color: red;">
</div>
<div class="form-row">
<label for="node-input-name" data-i18n="webthingsio-execute-action.labelName"><i class="fa fa-tag"></i></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]webthingsio-execute-action.placeholderName">
</div>
<div class="form-row">
<label for="node-input-gateway" data-i18n="webthingsio-execute-action.labelGateway"><i class="fa fa-tag"></i></label>
<input type="text" id="node-input-gateway">
</div>
<div class="form-row" id="thing-row" style="display: none;">
<label for="node-input--thing" data-i18n="webthingsio-execute-action.labelThing"><i class="fa fa-tag"></i></label>
<select id="node-input--thing" style="width: 70%;"></select>
</div>
<div class="form-row" id="action-row" style="display: none;">
<label for="node-input--action" data-i18n="webthingsio-execute-action.labelAction"><i class="fa fa-tag"></i></label>
<select id="node-input--action" style="width: 70%;"></select>
</div>
<div class="form-row" id="inputMode-row" style="display: none;">
<select id="node-input--inputMode" style="width: calc(100px + 70%);">
<option value="injected" data-i18n="webthingsio-execute-action.optionInjectedInput"></option>
<option value="fixed" data-i18n="webthingsio-execute-action.optionFixedInput"></option>
<option value="advanced" data-i18n="webthingsio-execute-action.optionAdvancedInput"></option>
</select>
</div>
<div class="form-row" id="input-row" style="display: none;">
<label for="node-input--input" data-i18n="webthingsio-execute-action.labelInput"><i class="fa fa-tag"></i></label>
</div>
<div class="form-row" id="input-advanced-row" style="display: none;">
<label for="node-input--input-advanced" data-i18n="webthingsio-execute-action.labelInput"><i class="fa fa-tag"></i></label>
<input type="" id="node-input--input-advanced" style="position: absolute; bottom: 9999px; right: 9999px">
<input type="hidden" id="node-input--input-advanced-type">
</div>
</script>