iobroker.nanoleaf-lightpanels
Version:
ioBroker adapter to control nanoleaf devices
259 lines (234 loc) • 9.31 kB
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">
<link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
<style>
.m .col .select-wrapper+label {
top: -26px;
}
.m span {
font-size: 0.9em;
}
.error {
color: #f44242;
}
.success {
color: #20af18;
}
.m .page {
margin-top: 1.5em;
}
</style>
<script type="text/javascript" src="../../lib/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../socket.io/socket.io.js"></script>
<script type="text/javascript" src="../../js/translate.js"></script>
<script type="text/javascript" src="../../lib/js/materialize.js"></script>
<script type="text/javascript" src="../../js/adapter-settings.js"></script>
<script type="text/javascript" src="words.js"></script>
<script type="text/javascript">
// set buttons/inputs etc.
function setStates() {
// enable/disable GetAuthToken button
if ($("#host").val() && // host must be entered
$("#port").val() && // port must be entered
!$("#authtoken").val()) // no authtoken entered
{
$("#getAuthToken").attr("disabled", false);
$("#getAuthTokenHint").removeClass().text("");
}
else $("#getAuthToken").attr("disabled", true);
}
function load(settings, onChange) {
if (!settings) return;
// handle value changes
$(".value").on("input change", function() {
// fill port if host changes and if matching in datalist
if (this.id == "host")
$("#hostlist option").each(function() {
if ($("#host").val() == $(this).val()) {
$("#port").val($(this).attr("data-port"));
M.updateTextFields();
return false;
}
});
setStates();
// something changed, enable save buttons when all fields are filled
if ($("#host").val() && // host must be entered
$("#port").val() && // port must be entered
$("#authtoken").val()) // authtoken must be entered
onChange(true);
else onChange(false);
});
$("#host").val(settings["host"]);
$("#port").val(settings["port"]);
$("#authtoken").val(settings["authtoken"]);
$("#pollingInterval").val(settings["pollingInterval"]);
$("#reconnectInterval").val(settings["reconnectInterval"]);
$("#disableSSE").prop("checked", settings["disableSSE"]);
$("#keepAlivePolling").prop("checked", settings["keepAlivePolling"]);
$("#keepAlivePollingInterval").val(settings["keepAlivePollingInterval"]);
// Adapter address
fillSelectIPs('#adapterAddress', settings.adapterAddress, false, true, function () {
$('#adapterAddress').select();
});
setStates();
onChange(false);
M.updateTextFields();
$("#searchDevice").click(function() {
// Check if adapter is running
getIsAdapterAlive("nanoleaf-lightpanels", function(alive) {
// adapter must be running
if (alive) {
$("#searchDevice").attr("disabled", true); // disable button after click
$("#host").val(""); // empty host input when searching devices
sendTo("nanoleaf-lightpanels." + instance, "searchDevice", {}, function (devices) {
if (devices && devices.length > 0) {
devices.sort(function(a, b) { if (a.host > b.host) return 1; else return -1;});
// empty list
$("#hostlist option").remove();
// add found devices
for(var i = 0; i < devices.length; i++) {
var option = $("<option>", {value: devices[i].host, "data-port": devices[i].port, text: devices[i].name});
$("#hostlist").append(option);
}
$("#searchDeviceHint").removeClass().addClass("success").text(devices.length + " " + translateWord("DevicesFound"));
}
else {
$("#searchDeviceHint").removeClass().addClass("error").text(translateWord("DevicesNotFound"));
}
$("#searchDevice").attr("disabled", false); // enable button after callback
});
$("#searchDeviceHint").removeClass().text(translateWord("searchingDevices"));
}
else
showMessage("<p>" + translateWord("AdapterNotAlive") + "</p>", translateWord("AdapterStateTitle"), "info");
});
});
$("#getAuthToken").click(function() {
// Check if adapter is running
getIsAdapterAlive("nanoleaf-lightpanels", function(alive) {
// adapter must be running
if (alive) {
$("#getAuthToken").attr("disabled", true); // disable button after click
var hostConfig = new Object();
hostConfig.host = $("#host").val();
hostConfig.port = $("#port").val();
sendTo("nanoleaf-lightpanels." + instance, "getAuthToken", hostConfig, function (response) {
if (response.message == "SuccessGetAuthToken") {
$("#authtoken").val(response.authToken).trigger("focus");
$("#getAuthToken").attr("disabled", true);
$("#getAuthTokenHint").removeClass().addClass("success").text(translateWord("SuccessGetAuthToken"));
onChange(true);
}
else {
showMessage("<p>" + translateWord(response.message) + "</p>", translateWord("ErrorGetAuthTokenTitle"), "info");
$("#getAuthToken").attr("disabled", false); // enable on error
$("#getAuthTokenHint").removeClass().text("");
}
});
$("#getAuthTokenHint").removeClass().text(translateWord("ObtainAuthTokenWait"));
}
else
showMessage("<p>" + translateWord("AdapterNotAlive") + "</p>", translateWord("AdapterStateTitle"), "info");
});
});
}
function save(callback) {
var obj = {};
obj["host"] = $("#host").val();
obj["port"] = $("#port").val();
obj["authtoken"] = $("#authtoken").val();
obj["pollingInterval"] = $("#pollingInterval").val();
obj["reconnectInterval"] = $("#reconnectInterval").val();
obj["disableSSE"] = $("#disableSSE").is(":checked");
obj["adapterAddress"] = $("#adapterAddress").val();
obj["keepAlivePolling"] = $("#keepAlivePolling").is(":checked");
obj["keepAlivePollingInterval"] = $("#keepAlivePollingInterval").val();
callback(obj);
}
</script>
</head>
<body>
<div class="m adapter-container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s2"><a href="#tab-main" class="translate active">MainSettings</a></li>
<li class="tab col s2"><a href="#tab-advanced" class="translate">AdditionalSettings</a></li>
</ul>
</div>
<div id="tab-main" class="col s12 page">
<div class="row">
<div class="input-field col s6 m6 l6">
<img src="nanoleaf-lightpanels.png" class="logo">
</div>
</div>
<div class="row">
<div class="input-field col s12 m6 l3">
<input type="text" list="hostlist" id="host" class="value">
<label for="host" class="translate">HostIP</label>
<datalist id="hostlist"></datalist>
<span class="translate">HostIPDesc</span>
<p><a class="waves-effect waves-light btn" id="searchDevice"><span class="translate">searchDevice</span></a></p>
<span id="searchDeviceHint"></span>
</div>
<div class="input-field col s12 m6 l3">
<input type="number" class="value" id="port" value="16021" />
<label for="port" class="translate">Port</label>
<span class="translate">PortDesc</span>
</div>
<div class="input-field col s12 m12 l6">
<input type="text" class="value" id="authtoken" >
<label for="authtoken" class="translate">AuthToken</label>
<span class="translate">AuthTokenDesc</span>
<p><a class="waves-effect waves-light btn" id="getAuthToken" disabled><span class="translate">GetAuthToken</span></a></p>
<span id="getAuthTokenHint"></span>
</div>
</div>
<div class="row">
<div class="col s12">
<p class="translate">OnSaveRestartHint</p>
</div>
</div>
</div>
<div id="tab-advanced" class="col s12 page">
<div class="row">
<div class="input-field col s12 m8 l6">
<select id="adapterAddress" class="value"></select>
<label for="adapterAddress" class="translate">adapterAddress</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m8 l6">
<input type="checkbox" class="value" id="disableSSE"/>
<label for="disableSSE" class="translate">disableSSE</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 m6 l6">
<input type="number" class="value" id="pollingInterval" min="500" max="600000"/>
<label for="pollingInterval" class="translate">PollingInterval</label>
<span class="translate">PollingIntervalDesc</span>
</div>
<div class="input-field col s6 m6 l6">
<input type="number" class="value" id="reconnectInterval" min="10" max="21600"/>
<label for="reconnectInterval" class="translate">ReconnectInterval</label>
<span class="translate">ReconnectIntervalDesc</span>
</div>
</div>
<div class="row">
<div class="input-field col s6 m6 l6">
<input type="checkbox" class="value" id="keepAlivePolling"/>
<label for="keepAlivePolling" class="translate">keepAlivePolling</label>
</div>
<div class="input-field col s6 m6 l6">
<input type="number" class="value" id="keepAlivePollingInterval" min="10" max="21600"/>
<label for="keepAlivePollingInterval" class="translate">keepAlivePollingInterval</label>
<span class="translate">keepAlivePollingIntervalDec</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>