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.
223 lines (204 loc) • 7.37 kB
HTML
<script type="text/x-red" data-template-name="hue-bridge">
<div class="form-row">
<label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="hue-bridge-config.config.name"></span></label>
<input type="text" id="node-config-input-name" style="width: calc(100% - 105px)">
</div>
<div class="form-row">
<label for="node-config-input-bridge"><i class="fa fa-server"></i> Bridge IP</label>
<div style="display: inline-flex; width: calc(100% - 105px)">
<div id="input-select-toggle" style="flex-grow: 1;">
<input type="text" id="node-config-input-bridge" placeholder="X.X.X.X[:PORT]" style="width: 100%"/>
</div>
<button id="node-config-input-scan" type="button" class="red-ui-button" style="margin-left: 10px;">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="form-row">
<label for="node-config-input-key"><i class="fa fa-key"></i> <span data-i18n="hue-bridge-config.config.apikey"></span></label>
<div style="display: inline-flex; width: calc(100% - 105px)">
<div style="flex-grow: 1;">
<input type="text" id="node-config-input-key" style="width: 100%"/>
</div>
<button id="node-config-input-register" type="button" class="red-ui-button" style="margin-left: 10px;">
<i class="fa fa-user-circle-o"></i>
</button>
</div>
</div>
<div class="form-row">
<label for="node-config-input-worker"><i class="fa fa-cogs"></i> <span>Worker</span></label>
<input type="text" id="node-config-input-worker" placeholder="10" style="width: calc(100% - 105px)">
</div>
<div class="form-row" style="margin-top: 30px">
<div style="display: inline-flex; width: calc(100% - 105px)">
<input type="checkbox" id="node-input-autoupdates" style="flex: 15px;">
<span data-i18n="hue-bridge-config.config.autoupdates" style="width: 100%; margin-left: 10px;"></span>
</div>
</div>
<div class="form-row">
<div style="display: inline-flex; width: calc(100% - 105px)">
<input type="checkbox" id="node-config-input-disableupdates" style="flex: 15px;">
<span data-i18n="hue-bridge-config.config.disable-events-info" style="width: 100%; margin-left: 10px;"></span>
</div>
</div>
</script>
<script type="text/javascript">
RED.nodes.registerType("hue-bridge", {
category: "config",
color: '#c7d8d8',
defaults: {
name: { value:"Hue Bridge", required: true },
bridge: { value:"", required: true },
key: { value:"", required: true },
worker: { value: 10, required: true, validate: function(v) {
return (!isNaN(v) && v > 0);
}},
autoupdates: { value: true },
disableupdates: { value: false }
},
icon: "hue-bridge-config.png",
label: function() {
return this.name;
},
paletteLabel: function() {
return this._("hue-bridge-config.node.title");
},
oneditprepare: function()
{
const scope = this;
let options = [];
function manualInput()
{
// GET CURRENT SELECTED VALUE
var current = $('#node-config-input-bridge').val();
// REMOVE SELECT FIELD
$('#input-select-toggle').empty();
// CREATE NEW INPUT FIELD
$('#input-select-toggle').append('<input type="text" id="node-config-input-bridge" placeholder="X.X.X.X[:PORT]" style="width: 100%" value="'+current+'" />');
// CHANGE BUTTON ICON
var button = $("#node-config-input-scan");
var buttonIcon = button.find("i");
buttonIcon.removeClass("fa-pencil");
buttonIcon.addClass("fa-search");
}
function searchAndSelect()
{
// GET CURRENT SELECTED VALUE
var current = $('#node-config-input-bridge').val();
// TRIGGER SEARCHING NOTIFICATION
var notification = RED.notify(scope._("hue-bridge-config.config.searching"), { type: "compact", modal: true, fixed: true });
// GET THE SENSORS
$.get('hue/bridges')
.done( function(data) {
var allResources = JSON.parse(data);
if(allResources.length <= 0)
{
notification.close();
RED.notify(scope._("hue-bridge-config.config.none-found"), { type: "error" });
return false;
}
// SET OPTIONS
allResources.forEach(function(resource)
{
options[resource.ip] = { value: resource.ip, label: resource.ip };
});
// SELECT CURRENT VALUE
$("#node-config-input-bridge").typedInput({
types: [
{
value: current,
options: Object.values(options)
}
]
});
// CHANGE BUTTON ICON
var button = $("#node-config-input-scan");
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-bridge-config.config.unknown-error"), "error");
});
}
// CHANGED BRIDGE IP? -> GET NAME (IF POSSIBLE)
$(document).off('change', '#node-config-input-bridge');
$(document).on('change', '#node-config-input-bridge', function(e)
{
let currentBridgeIP = $(e.currentTarget).val();
if(currentBridgeIP.length > 3)
{
// TRIGGER SEARCHING NOTIFICATION
var notification = RED.notify(scope._("hue-bridge-config.config.connecting"), { type: "compact", modal: true, fixed: true });
$.ajax({
url: 'hue/name',
type: "GET",
data: { ip: currentBridgeIP },
timeout: 3000
})
.done( function(data)
{
$('#node-config-input-name').val(data);
setTimeout(function() { notification.close(); }, 500);
})
.fail(function(err)
{
// CLOSE SEARCH NOTIFICATION
notification.close();
RED.notify(scope._("hue-bridge-config.config.invalid") + err.statusText, "error");
});
}
});
// TOGGLE SELECT/INPUT FIELD
$('#node-config-input-scan').click(function()
{
if($('#input-select-toggle').find(".red-ui-typedInput-container").length > 0)
{
manualInput();
}
else
{
searchAndSelect();
}
});
$('#node-config-input-register').click(function()
{
if(!$('#node-config-input-bridge').val())
{
RED.notify(scope._("hue-bridge-config.config.error-select-first"), "error");
}
else
{
$('#node-config-input-key').val("");
$('#node-config-input-key').attr("placeholder", scope._("hue-bridge-config.config.waiting"));
RED.notify(scope._("hue-bridge-config.config.new-user-press"));
setTimeout(function()
{
$.get('hue/register', { ip: $('#node-config-input-bridge').val() } )
.done( function(data)
{
if(data == "error")
{
RED.notify(scope._("hue-bridge-config.config.retry"), "error");
$('#node-config-input-key').attr("placeholder", "");
}
else
{
var userdata = JSON.parse(data);
$('#node-config-input-key').val(userdata[0].success.username);
RED.notify(scope._("hue-bridge-config.config.success"));
}
}).fail(function(err)
{
RED.notify(err.responseText, "error");
});
}, 20000);
}
});
}
});
</script>