node-red-contrib-deconz
Version:
deCONZ connectivity nodes for node-red
235 lines (220 loc) • 8.99 kB
HTML
<script type="text/html" data-template-name="deconz-input">
<link rel="stylesheet" href="node-red-contrib-deconz/multiple-select/multiple-select.css" type="text/css">
<link rel="stylesheet" href="resources/node-red-contrib-deconz/css/common.css" type="text/css">
<div class="deconz-editor">
<!-- --- Tip Box --- -->
<div class="form-row" id="node-input-tip-box"></div>
<!--#region --- Main settings --- -->
<!-- --- Name --- -->
<div class="form-row">
<label for="node-input-name" class="l-width">
<i class="fa fa-tag"></i>
<span data-i18n="node-red:common.label.name"></span>
</label>
<input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
</div>
<!-- --- Topic --- -->
<div class="form-row">
<label for="node-input-topic" class="l-width">
<i class="fa fa-tasks"></i>
<span data-i18n="node-red:common.label.topic"></span>
</label>
<input type="text" id="node-input-topic" autocomplete="off">
</div>
<!-- --- Server --- -->
<div class="form-row">
<label for="node-input-server" class="l-width">
<i class="fa fa-globe"></i>
<span data-i18n="node-red-contrib-deconz/server:editor.inputs.server.label"></span>
</label>
<input type="text" id="node-input-server">
</div>
<!--#endregion -->
<!-- --- Status text --- -->
<div class="form-row deconz-node">
<label for="node-input-statustext" class="l-width">
<i class="fa fa-search"></i>
<span data-i18n="node-red-contrib-deconz/server:editor.inputs.statustext.label"></span>
</label>
<input type="text" id="node-input-statustext">
<input type="hidden" id="node-input-statustext_type">
</div>
<!--#endregion -->
<!--#region --- Section Device selection --- -->
<div class="separator" data-i18n="node-red-contrib-deconz/server:editor.inputs.separator.device"></div>
<!-- --- Query type (Device/Json/Jsonata --- -->
<div class="form-row deconz-node">
<label for="node-input-query" class="l-width">
<i class="fa fa-search"></i>
<span data-i18n="node-red-contrib-deconz/server:editor.inputs.device.query.label"></span>
</label>
<input type="text" id="node-input-query">
<input type="hidden" id="node-input-search_type">
</div>
<!-- --- Query result list --- -->
<div class="form-row deconz-query-selector">
<label for="node-input-query_result" class="l-width">
<i class="fa fa-crosshairs"></i>
<span data-i18n="node-red-contrib-deconz/server:editor.inputs.device.query_result.label"></span>
</label>
<select id="node-input-query_result"
class="s-width multiple-select"
data-i18n="[placeholder]node-red-contrib-deconz/server:editor.multiselect.none_selected"
multiple="multiple"
></select>
</div>
<!-- --- Refresh query result Button --- -->
<div class="form-row deconz-query-selector">
<label for="force-refresh-query-result" class="l-width">
<i class="fa fa-refresh"></i>
<span data-i18n="node-red-contrib-deconz/server:editor.inputs.device.refresh_query.label"></span>
</label>
<a class="red-ui-button s-width" id="force-refresh-query-result">
<span data-i18n="node-red-contrib-deconz/server:editor.inputs.device.refresh_query.button_text"></span>
</a>
</div>
<!-- --- Devices list --- -->
<div class="form-row deconz-device-selector">
<label for="node-input-device_list" class="l-width">
<i class="fa fa-crosshairs"></i>
<span data-i18n="node-red-contrib-deconz/server:editor.inputs.device.device.label"></span>
</label>
<select id="node-input-device_list"
class="s-width multiple-select"
data-i18n="[placeholder]node-red-contrib-deconz/server:editor.multiselect.none_selected"
multiple="multiple"
></select>
</div>
<!-- --- Refresh devices list Button --- -->
<div class="form-row deconz-device-selector">
<label for="force-refresh" class="l-width">
<i class="fa fa-refresh"></i>
<span data-i18n="node-red-contrib-deconz/server:editor.inputs.device.refresh.label"></span>
</label>
<a class="red-ui-button s-width" id="force-refresh">
<span data-i18n="node-red-contrib-deconz/server:editor.inputs.device.refresh.button_text"></span>
</a>
</div>
<!--#endregion -->
<!--#region --- Section Output --- -->
<div class="separator" data-i18n="node-red-contrib-deconz/server:editor.inputs.separator.outputs"></div>
<!-- --- Output list --- -->
<div class="form-row node-input-output-container-row">
<ol id="node-input-output-container"></ol>
</div>
<!--#endregion -->
</div>
</script>
<script type='text/javascript'>
RED.nodes.registerType('deconz-input', {
category: 'deCONZ',
color: '#f7aa3f',
defaults: {
name: {
value: ""
},
topic: {
value: "",
required: false
},
config_version: {
value: 2,
required: true
},
server: {
type: "deconz-server",
required: true
},
statustext: {
value: "",
required: false
},
statustext_type: {
value: "default",
required: true
},
search_type: {
value: "device",
required: true
},
device_list: {
value: [],
required: false
},
device_name: {
value: ""
},
query: {
value: "{}",
required: false
},
outputs: {
value: 1
},
output_rules: {
value: [{
type: 'state',
format: 'single',
output: 'always',
onstart: true,
payload: ['__complete__']
}]
},
//#region All next options are for configuration migration from legacy
device: {},
state: {},
output: {},
outputAtStartup: {}, // Yes I know it's camelcase, that scratch my brain too ;)
//#endregion
},
inputs: 0,
outputs: 1,
outputLabels: function (index) {
let node = this;
if (node.output_rules === undefined) return 'Please migrate node';
let rule = node.output_rules[index];
let desc = `#${index + 1} - ${rule.type}`;
if (Array.isArray(rule.payload)) {
desc += "/" + rule.payload.join();
}
return desc;
},
paletteLabel: 'in',
icon: "deconz.png",
label: function () {
let label = 'deconz-input';
if (this.name) {
label = this.name;
} else if (typeof (this.device_name) == 'string' && this.device_name.length) {
label = this.device_name;
} else if (typeof (this.device) == 'string' && this.device.length) {
label = this.device;
}
return label;
},
oneditprepare: function () {
(async () => {
let node = this;
node.nodeEditor = new DeconzMainEditor(node, {
have: {
output_rules: true
},
output_rules: {
button_title: 'node-red-contrib-deconz/server:editor.inputs.outputs.rule_button.desc',
type: {
homekit: true,
scene_call: true
}
}
});
await node.nodeEditor.init();
})().then().catch((error) => {
console.error(error);
});
},
oneditsave: function () {
let node = this;
node.nodeEditor.oneditsave();
}
});
</script>