iobroker.nuki-extended
Version:
Nuki Smart Lock 2.0 / 3.0
456 lines (391 loc) • 14.2 kB
HTML
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">
<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">
<!--
var bridgeList = [];
// load
function load(settings, onChange)
{
bridges = settings.bridges || [];
values2table('bridges', bridges, onChange);
setBridgeIds(bridges);
_load(settings, onChange);
}
// save
function save(callback)
{
var obj = {bridges: table2values('bridges')};
_save(callback, obj);
}
// get bridge ids
function getBridgeIds()
{
bridgeList = [];
var bridges = table2values('bridges');
bridges.forEach(function(bridge, i)
{
bridgeList.push(parseInt(bridge.bridge_id));
});
return bridgeList;
}
// set bridge ids
function setBridgeIds(bridges)
{
bridges.forEach(function(bridge, i)
{
bridgeList.push(parseInt(bridge.bridge_id));
setBridgeId(i, bridge.bridge_id);
});
}
// set bridge id
function setBridgeId(index, bridge_id)
{
var entry = $('#bridges [data-index="' + index + '"][data-name="bridge_id"]');
var element = $('#bridge_' + index + '-' + bridge_id);
if (element.length == 0)
entry.after('<input class="values-input" style="width: 100%" type="text" value="' + bridge_id + '" id="bridge_' + index + '-' + bridge_id + '" disabled>');
else
element.text(bridge_id);
}
// page loaded
var timer;
$(document).ready(function()
{
$('.modal').modal(); // initialize all modals
// set bridge id again when add button is pressed
$('body').on('click', '.table-button-add, .values-buttons', function()
{
clearTimeout(timer);
timer = setTimeout(function() {
setBridgeIds(table2values('bridges'));
}, 150);
});
// discover bridges
$('.button-discover').on('click', function()
{
$('#modal').modal('open');
$('#log').html('');
_log(translateWord('message_action-connecting'));
// timeout
var timeout = setTimeout(function() {_log(translateWord('message_error-noconnection'), 'error');}, 7000);
// send request
sendTo(null, 'discover', null, function(res)
{
// refresh bridge list
bridgeList = getBridgeIds();
// get bridges
_log(translateWord('message_info-connected'));
_log(translateWord('message_action-getbridges'));
clearTimeout(timeout);
if (res.result === true)
{
_log(translateWord('message_success-gotbridges').replace(/%count%/gi, res.bridges.length), 'success');
console.log(JSON.stringify(res.bridges));
var bridges = table2values('bridges');
res.bridges.forEach(function(bridge)
{
// check for duplicates
if (bridgeList.indexOf(bridge.bridgeId) > -1)
{
_log(translateWord('message_info-duplbridge').replace(/%id%/gi, bridge.bridgeId), 'info');
return;
}
// error with no IP is given (applies for software bridges)
if (bridge.ip === undefined)
_log(translateWord('message_error-bridgeip').replace(/%id%/gi, bridge.bridgeId), 'error');
// IP is given, trigger bridge auth
else
{
_log(translateWord('message_action-bridgeauth').replace(/%id%/gi, bridge.bridgeId), 'info');
sendTo(null, 'auth', {bridgeIp: bridge.ip, bridgePort: bridge.port}, function(res)
{
if (res.result === true)
{
_log(translateWord('message_success-gottoken').replace(/%id%/gi, bridge.bridgeId).replace(/%ip%/gi, bridge.ip), 'success');
$('[data-id="' + bridge.bridgeId + '"] [data-name="bridge_token"]').val(res.token);
}
else
_log(translateWord('message_error-notoken').replace(/%id%/gi, bridge.bridgeId).replace(/%ip%/gi, bridge.ip), 'error');
});
}
// add to list
bridges.push({
'id': bridge.bridgeId,
'bridge_id': bridge.bridgeId,
'bridge_ip': bridge.ip || '',
'bridge_port': bridge.port || 8080,
'active': true
});
});
values2table('bridges', bridges);
timer = setTimeout(function()
{
setBridgeIds(bridges);
//_log(translateWord('message_info-finished'), 'success');
$('#callbackPort').trigger('change');
}, 150);
}
// error
else
_log(translateWord('message_error-nobridges')+' ('+res.error+')', 'error');
});
});
});
// -->
</script>
<script src="admin.js"></script>
<link rel="stylesheet" type="text/css" href="admin.css"/>
</head>
<body>
<div class="m adapter-container" id="settings">
<!-- Modal Structure -->
<div id="modal" class="modal">
<div class="modal-content">
<div class="row">
<div class="col s12 m12">
<h2 class="translate">status</h2>
<ul id="log"></ul>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="btn waves-effect waves-green modal-close translate">button_closeModal</a>
</div>
</div>
<div class="row">
<!-- TABS -->
<div class="col s12">
<ul class="tabs">
<!--<li class="tab col s3"><a class="translate active" href="#donate">tab_donate</a></li>-->
<li class="tab col s3"><a class="translate active" href="#tab_config_bridge">tab_config_bridge</a></li>
<li class="tab col s3"><a class="translate" href="#tab_config_nuki">tab_config_nuki</a></li>
<li class="tab col s3"><a target="_blank" class="translate" href="https://github.com/iobroker-community-adapters/ioBroker.nuki-extended#smart-home--alexa-integration-using-iobrokerjavascript">tab_alexa</a></li>
<li class="tab col s3"><a target="_blank" class="translate" href="https://github.com/iobroker-community-adapters/ioBroker.nuki-extended#iobrokernuki-extended">tab_info</a></li>
</ul>
</div>
<!-- DONATE -->
<!--<div id="donate" class="col s12">-->
<!-- Donation -->
<!--
<div class="row">
<div class="col s12 m12">
<div class="row" style="margin-bottom: 0">
<div class="col s12 m12">
<p class="translate title">donateTitle</p>
</div>
</div>
<div class="row box">
<p class="subtitle translate">donateInformation</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" style="margin: 10 0 0 30">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="DJR9PHP53L8Q2" />
<input type="image" src="https://www.paypalobjects.com/webstatic/de_DE/i/de-pp-logo-200px.png" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
<img alt="" border="0" src="https://www.paypal.com/en_DE/i/scr/pixel.gif" width="1" height="1" />
</form>
</div>
</div>
</div>
</div>
-->
<!-- CONFIG NUKI -->
<div id="tab_config_nuki" class="col s12 m12">
<!-- WEB API -->
<div class="row" style="margin-bottom: 0">
<div class="col s12 m12">
<p class="translate title">web</p>
</div>
</div>
<div class="row box">
<div class="col s12 m12">
<div class="row" style="margin-bottom: 0">
<div class="col s12 m12">
<p class="subtitle translate">web_info</p>
</div>
</div>
<div class="row">
<div class="input-field col s6 m6">
<input class="value" id="api_token" type="text" />
<label for="api_token" class="translate">api_token</label>
</div>
</div>
</div>
</div>
<!-- Other -->
<div class="row">
<div class="col s12 m12">
<div class="row" style="margin-bottom: 0">
<div class="col s12 m12">
<p class="translate title">other</p>
</div>
</div>
<div class="row box">
<div class="col s6 m6">
<div class="row">
<div class="col s6 m6">
<p class="subtitle translate">refresh_info</p>
</div>
</div>
<div class="row">
<div class="input-field col s6 m6">
<input class="value" id="refreshWebApi" type="number" placeholder="0" />
<label for="refreshWebApi" class="translate">refresh</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 m6">
<input class="value" id="additionalWebApiCall" type="checkbox" />
<label for="additionalWebApiCall" class="translate">additionalWebApiCall</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 m6">
<input class="value" id="additionalWebApiTimeout" type="number" placeholder="3" />
<label for="additionalWebApiTimeout" class="translate">additionalWebApiTimeout</label>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="row">
<div class="col s6 m6">
<p class="subtitle translate">sync_info</p>
</div>
</div>
<div class="row">
<div class="input-field col s6 m6">
<div style="display: block">
<input class="value" id="syncConfig" type="checkbox" />
<label for="syncConfig" class="translate">syncConfig</label>
</div>
<div style="display: block">
<input class="value" id="syncUsers" type="checkbox" />
<label for="syncUsers" class="translate">syncUsers</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CONFIG BRIDGE -->
<div id="tab_config_bridge" class="col s12 m12">
<!-- BRIDGE API -->
<div class="row" style="margin-bottom: 0">
<div class="col s12 m12">
<p class="translate title">bridge</p>
</div>
</div>
<div class="row box">
<div class="col s12 m12">
<div class="row" style="margin-bottom: 0">
<div class="col s12 m12">
<p class="subtitle translate">bridge_info</p>
</div>
</div>
<div class="row">
<div class="col s12" id="bridges">
<a class="btn waves-effect waves-light table-button-add"><i class="material-icons">add_circle</i> <span class="translate">add_bridge</span></a>
<a class="btn waves-effect waves-light button-discover"><i class="material-icons">search</i> <span class="translate">discover_bridges</span></a>
<div class="table-values-div">
<table class="table-values">
<thead>
<tr>
<th data-name="bridge_id" data-type="hidden" style="width: 10%" class="translate">bridge_id</th>
<th data-name="bridge_name" style="width: 20%" class="translate">bridge_name</th>
<th data-name="bridge_ip" style="width: 20%" class="translate">bridge_ip</th>
<th data-name="bridge_port" data-type="number" data-default="8080" style="width: 10%" class="translate">bridge_port</th>
<th data-name="bridge_token" style="width: 20%" class="translate">bridge_token</th>
<th data-name="active" data-type="checkbox" data-default="true" style="width: 70px" class="translate">enabled</th>
<th data-buttons="delete" style="width: 120px"></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Other -->
<div class="row">
<div class="col s12 m12">
<div class="row" style="margin-bottom: 0">
<div class="col s12 m12">
<p class="translate title">other</p>
</div>
</div>
<div class="row box">
<div class="col s4 m4">
<p class="subtitle translate">hashedToken_info</p>
<input class="value" id="hashedToken" type="checkbox" />
<label for="hashedToken" class="translate">hashedToken</label>
</div>
<div class="col s4 m4">
<p class="subtitle translate">port_info</p>
<input class="value" id="callbackPort" type="number" placeholder="51989" />
<label for="callbackPort" class="translate">port</label>
</div>
<div class="col s4 m4">
<p class="subtitle translate">ip_info</p>
<input class="value" id="callbackIp" type="text" />
<label for="callbackIp" class="translate">ip</label>
</div>
<!--
<div class="col s12 m12">
<div class="row">
<div class="col s12 m12">
<p class="subtitle translate">refreshInfo</p>
</div>
</div>
<div class="row" style="margin-bottom: 0">
<div class="col s4 m4">
<div class="row">
<div class="col s12 m12">
<label>
<input name="refreshBridgeApiType" id="refreshBridgeApiTypeByCallback" class="value" value="callback" type="radio" />
<span class="translate">refreshBridgeApiTypeByCallback</span>
</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m12">
<input class="value" id="callbackPort" type="number" placeholder="51989" />
<label for="callbackPort" class="translate">port</label>
</div>
</div>
</div>
<div class="col s2 m2"></div>
<div class="col s4 m4">
<div class="row">
<div class="col s12 m12">
<label>
<input name="refreshBridgeApiType" id="refreshBridgeApiTypeByPolling" class="value" value="polling" type="radio" />
<span class="translate">refreshBridgeApiTypeByPolling</span>
</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m12">
<input class="value" id="refreshBridgeApi" type="number" placeholder="0" />
<label for="refreshBridgeApi" class="translate">refresh</label>
</div>
</div>
</div>
</div>
</div>
-->
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>