node-red-contrib-webthingsio
Version:
Set/get properties, execute actions and inject on events of your WebThings
164 lines (158 loc) • 7.76 kB
HTML
<script type="text/javascript">
RED.nodes.registerType('webthingsio-set-property', {
category: 'Web Things IO',
color: '#5d9bc7',
defaults: {
/* eslint-disable no-undefined */
name: {value: ''},
gateway: {value: '', type: 'webthingsio-gateway', required: true},
thing: {value: undefined, validate: (v) => v ? true : false},
property: {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 > 15) {
s = `${s.substring(0, 15)}...`;
}
return s;
}
if (this.name) {
return this.name;
} else if (this.gateway && this.thing && this.property) {
let base, baseTo;
const decodedThing = decodeURIComponent(this.thing);
if (RED.settings.webthingsioGatewayShorterLabels) {
base = this._('webthingsio-set-property.shortLabel')
.replace('%property', this.property)
.replace('%thing', decodedThing);
baseTo = this._('webthingsio-set-property.shortLabelTo')
.replace('%property', this.property)
.replace('%thing', decodedThing);
} else {
base = this._('webthingsio-set-property.longLabel')
.replace('%property', this.property)
.replace('%thing', decodedThing);
baseTo = this._('webthingsio-set-property.longLabelTo')
.replace('%property', this.property)
.replace('%thing', decodedThing);
}
if (RED.settings.webthingsioGatewayLimitInputLen <= 0) {
return base;
}
switch (this.inputMode) {
case 'injected':
return base;
case 'fixed':
return baseTo
.replace('%value', limitlen(this.input));
case 'advanced':
if (
['msg', 'flow', 'global', 'env'].includes(this.inputt)
) {
return baseTo
.replace(
'%value',
`${this.inputt}.${limitlen(this.input)}`,
);
} else if (['json', 'jsonata'].includes(this.inputt)) {
return baseTo
.replace('%value', limitlen(this.input));
}
}
}
return this._('webthingsio-set-property.defaultLabel');
},
paletteLabel: 'Set property',
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.updateProperty(false);
$('#node-input--property').prop('value', node.property);
await webthingsio.updatePropertyInput(false);
webthingsio.initializeInput(node.input, node.inputt);
$('#node-input--inputMode').prop('value', node.inputMode);
await webthingsio.inputModeChanged('property');
}
function addListeners() {
$('#node-input-gateway')[0].addEventListener(
'change',
() => webthingsio.updateThing(),
);
$('#node-input--thing')[0].addEventListener(
'change',
() => webthingsio.updateProperty(),
);
$('#node-input--property')[0].addEventListener(
'change',
() => webthingsio.updatePropertyInput(),
);
$('#node-input--inputMode')[0].addEventListener(
'change',
() => webthingsio.inputModeChanged('property'),
);
}
$('#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.saveProperty(this);
webthingsio.saveInputMode(this);
webthingsio.saveInput(this);
},
});
</script>
<script type="text/html" data-template-name="webthingsio-set-property">
<div class="form-row" id="node-errorGatewayConnect" data-i18n="webthingsio-set-property.errorGatewayConnect" style="display: none; color: red;">
</div>
<div class="form-row">
<label for="node-input-name" data-i18n="webthingsio-set-property.labelName"><i class="fa fa-tag"></i></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]webthingsio-set-property.placeholderName">
</div>
<div class="form-row">
<label for="node-input-gateway" data-i18n="webthingsio-set-property.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-set-property.labelThing"><i class="fa fa-tag"></i></label>
<select id="node-input--thing" style="width: 70%;"></select>
</div>
<div class="form-row" id="property-row" style="display: none;">
<label for="node-input--property" data-i18n="webthingsio-set-property.labelProperty"><i class="fa fa-tag"></i></label>
<select id="node-input--property" 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-set-property.optionInjectedInput"></option>
<option value="fixed" data-i18n="webthingsio-set-property.optionFixedInput"></option>
<option value="advanced" data-i18n="webthingsio-set-property.optionAdvancedInput"></option>
</select>
</div>
<div class="form-row" id="input-row" style="display: none;">
<label for="node-input--input" data-i18n="webthingsio-set-property.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-set-property.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>