node-red-contrib-huemagic
Version:
Philips Hue node to control bridges, lights, groups, scenes, rules, taps, switches, buttons, motion sensors, temperature sensors and Lux sensors using Node-RED.
185 lines (167 loc) • 7.4 kB
HTML
<script type="text/x-red" data-template-name="hue-scene">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="hue-scene.config.name"></span></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]hue-scene.config.input-name" style="width: calc(100% - 105px)">
</div>
<div class="form-row">
<label for="node-input-bridge"><i class="fa fa-server"></i> Bridge</label>
<input type="text" id="node-input-bridge" style="width: calc(100% - 105px)">
</div>
<div class="form-row">
<label for="node-input-sceneid"><i class="fa fa-eye"></i> <span data-i18n="hue-scene.config.scene"></span></label>
<div style="display: inline-flex; width: calc(100% - 105px)">
<div id="input-scene-select-toggle" style="flex-grow: 1;">
<input type="text" id="node-input-sceneid" placeholder="00000000-0000-0000-0000-000000000000" style="width: 100%"/>
</div>
<button id="node-config-input-scan-scenes" type="button" class="red-ui-button" style="margin-left: 10px;">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</script>
<script type="text/javascript">
RED.nodes.registerType('hue-scene',{
category: 'HueMagic',
color: '#ff823a',
defaults: {
name: { value:"" },
bridge: { type: "hue-bridge", required: true },
sceneid: { value: null }
},
align: 'left',
icon: "hue-scene.png",
inputs: 1,
outputs: 1,
label: function() {
return this.name || this._("hue-scene.node.title");
},
paletteLabel: function() {
return this._("hue-scene.node.title");
},
inputLabels: function() {
return this._("hue-scene.node.input");
},
outputLabels: function() {
return this._("hue-scene.node.output");
},
oneditprepare: function()
{
const scope = this;
let sceneOptions = [];
function manualSceneID()
{
// GET CURRENT SELECTED VALUE
var current = $('#node-input-sceneid').val();
// REMOVE SELECT FIELD
$('#input-scene-select-toggle').empty();
// CREATE NEW INPUT FIELD
$('#input-scene-select-toggle').append('<input type="text" id="node-input-sceneid" placeholder="00000000-0000-0000-0000-000000000000" style="width: 100%" value="'+current+'" />');
// CHANGE BUTTON ICON
var button = $("#node-config-input-scan-scenes");
var buttonIcon = button.find("i");
buttonIcon.removeClass("fa-pencil");
buttonIcon.addClass("fa-search");
}
function sortResourcesBy(prop, resources)
{
return resources.sort((a, b) => {
if ( a[prop] < b[prop] ){
return -1;
}
if ( a[prop] > b[prop] ){
return 1;
}
return 0;
});
}
function searchAndSelectScenes()
{
// GET CURRENT BRIDGE CONFIGURATION
var bridgeConfig = RED.nodes.node($('#node-input-bridge option:selected').val());
if(!bridgeConfig) { return false; }
// GET CURRENT SELECTED VALUE
var current = $('#node-input-sceneid').val();
// TRIGGER SEARCHING NOTIFICATION
var notification = RED.notify(scope._("hue-rules.config.searching"), { type: "compact", modal: true, fixed: true });
// GET THE SCENES
$.get('hue/resources', { bridge: bridgeConfig.bridge, key: bridgeConfig.key, type: "scene" })
.done( function(data) {
var allResources = JSON.parse(data);
allResources = sortResourcesBy('name', allResources);
if(allResources.length <= 0)
{
notification.close();
RED.notify(scope._("hue-scene.config.none-found"), { type: "error" });
return false;
}
// SET OPTIONS
allResources.forEach(function(resource)
{
sceneOptions[resource.id] = { value: resource.id, label: resource.name + " ("+resource.group+")" };
});
// SELECT CURRENT VALUE
$("#node-input-sceneid").typedInput({
types: [
{
value: current,
options: Object.values(sceneOptions)
}
]
});
// CHANGE BUTTON ICON
var button = $("#node-config-input-scan-scenes");
var buttonIcon = button.find("i");
buttonIcon.removeClass("fa-search");
buttonIcon.addClass("fa-pencil");
// CLOSE SEARCH NOTIFICATION
notification.close();
})
.fail(function()
{
notification.close();
RED.notify(scope._("hue-scene.config.unknown-error"), "error");
});
}
// CHANGED SCENE ID? -> REPLACE NAME (IF POSSIBLE)
$(document).on('change', '#node-input-sceneid', function(e)
{
let currentSelectedOptionID = $(e.currentTarget).val();
let currentSelectedOptionValue = (currentSelectedOptionID.length > 0 && sceneOptions[currentSelectedOptionID]) ? sceneOptions[currentSelectedOptionID].label : false;
if(currentSelectedOptionValue !== false)
{
$('#node-input-name').val(currentSelectedOptionValue.split(" (")[0]);
}
});
// TOGGLE SELECT/INPUT FIELD
$('#node-config-input-scan-scenes').click(function()
{
if($('#input-scene-select-toggle').find(".red-ui-typedInput-container").length > 0)
{
manualSceneID();
}
else
{
searchAndSelectScenes();
}
});
},
button: {
onclick: function()
{
const node = this;
if(node.bridge)
{
$.ajax({
url: "inject/" + node.id,
type: "POST",
data: JSON.stringify({ __user_inject_props__: "status"}),
contentType: "application/json; charset=utf-8",
success: function (resp) {
RED.notify(node.name + ": " + node._("hue-scene.node.statusmsg"), { type: "success", id: "status", timeout: 2000 });
}
});
}
}
}
});
</script>