iobroker.nuki2
Version:
Nuki Smart Lock 2.0
207 lines (168 loc) • 6.67 kB
HTML
<html lang="en">
<head>
<title>ioBroker.nuki2</title>
<link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">
<script src="../../lib/js/jquery-3.2.1.min.js"></script>
<script src="../../socket.io/socket.io.js"></script>
<script src="conn.js"></script>
<script src="modernizr-custom.js"></script>
<script src="vertical-timeline.js"></script>
<script src="../../lib/js/materialize.js"></script>
<script src="LOCK.js"></script>
<script src="LANGUAGE.js"></script>
<script>
<!--
var lang = (navigator.languages != undefined ? navigator.languages[0] : navigator.language).substr(0, 2);
console.log('LANGUAGE: ' + lang);
var socketConnected;
var tl;
// add entries
function timeline(entries)
{
console.log(entries.length + ' entries found in log.');
entries.forEach(function(entry) {addLog(entry)});
tl.hideBlocks();
$(window).trigger('scroll');
}
// add log entry
function addLog(entry)
{
var date = new Date(entry.date);
entry.date = date.toLocaleDateString(lang, {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'});
entry.time = date.toLocaleTimeString(lang, {hour: '2-digit', minute:'2-digit', second:'2-digit'});
entry.action = ACTIONS[entry.action];
var tpl = $('.template').clone().removeClass('template hidden').addClass('lock_' + entry.smartlockId);
tpl.find('.cd-name').html(L(lang, entry.action).replace(/%person%/gi, entry.name ? L(lang, 'by') + ' ' + entry.name.replace('Nuki Web ()', 'Nuki Web API') : '<em>' + L(lang, 'manually') + '</em>'));
tpl.find('.cd-icon').addClass('action-'+entry.action).css('background-image', 'url('+ICONS[entry.action]+')');
tpl.find('.cd-date').html(entry.date + ', ' + entry.time);
if (entry.trigger != 0)
tpl.find('.cd-description').removeClass('hidden').find('.nuki-trigger').html('<img style="vertical-align: middle" src="'+ICONS['TRIGGER']+'" />' + ' ' + L(lang, TRIGGER[entry.trigger]));
if (entry.state != 0)
tpl.find('.cd-description').removeClass('hidden').find('.nuki-state').html('<img style="vertical-align: middle" src="'+ICONS['STATES']+'" />' + ' ' + L(lang, 'not executed') + ' ' + L(lang, STATES[entry.state]));
if (entry.autoUnlock)
tpl.find('.cd-description').removeClass('hidden').find('.nuki-autoUnlock').html('<img style="vertical-align: middle" src="'+ICONS['AUTO_UNLOCK']+'" />' + ' ' + L(lang, 'AUTO_UNLOCK'));
$('#cd-timeline .cd-timeline-block').last().after(tpl);
}
// add locks
function addLock(lock)
{
var list = $('#cd-timeline .locks');
if (list.find('[data-node="' + lock.nuki + '"]').length == 0)
list.append('<li data-node="' + lock.nuki + '">%name%</li>');
if (list.find('li').length > 2)
list.removeClass('hidden');
$('[data-node="' + lock.nuki + '"]').attr('data-' + lock.key, lock.value);
$('[data-node="' + lock.nuki + '"]').text($('[data-node="' + lock.nuki + '"]').text().replace(RegExp('%' + lock.key + '%', 'gi'), lock.value));
}
// page loaded
$(window).on('load', function()
{
// config
servConn.namespace = 'nuki2.0';
var states = ['logs', 'id', 'name'];
//
// Vertical Timeline
tl = new Timeline();
tl.bindScroll();
//
// Connect Socket
servConn.init({
connLink: window.location.href.substr(0, window.location.href.indexOf('/', 8))
}, {
onConnChange: function(socketConnected)
{
console.log('Socket ' + (socketConnected ? 'connected' : 'disconnected') + '!');
// retrieve states
if (socketConnected)
{
servConn.getChildren(servConn.namespace, function(err, _locks)
{
if (err !== null)
{
alert(err);
return;
}
_locks.forEach(function(lock)
{
if (lock.indexOf('.door__') === -1) return; // only doors, no bridges
servConn.getStates(states.map(function(state) {return lock+'.'+state}), function(err, _states)
{
if (err !== null)
{
alert(err);
return;
}
if (_states !== null && _states !== undefined)
{
for (var key in _states)
{
if (!_states[key] || !_states[key].val)
{
alert('Please activate Nuki Web API to retrieve log entries!');
return;
}
var content = _states[key].val;
var node = key.replace(lock+'.', '');
// add log entries
if (node == 'logs')
timeline(JSON.parse(content));
// add other information
else
{
addLock({'nuki': lock, key: node, value: content});
$('[data-state="' + node + '"]').html(content);
}
}
}
});
});
});
}
}
});
});
// -->
</script>
<link rel="stylesheet" type="text/css" href="vertical-timeline.css"/>
<link rel="stylesheet" type="text/css" href="nuki.css"/>
<style type="text/css">
<!--
.action-UNLOCK {background-color: #B22222;}
.action-LOCK {background-color: #22b322;}
.action-UNLATCH {background-color: #b38e22;}
.action-LOCK_N_GO {background-color: #b222b3;}
.action-LOCK_N_GO_WITH_UNLATCH {background-color: #b222b3;}
.action-DOOR_OPENED {background-color: #b34622;}
.action-DOOR_CLOSED {background-color: #6ab322;}
.action-INITIALIZATION {background-color: #666;}
// -->
</style>
</head>
<body>
<section id="cd-timeline" class="cd-container">
<ul class="locks hidden">
<li data-id="ALL">Show all Doors</li>
</ul>
<h2 class="title" data-state="name"></h2>
<div class="cd-timeline-block template hidden">
<div class="cd-timeline-img cd-icon"></div>
<div class="cd-timeline-content">
<h2 class="cd-name"></h2>
<p class="cd-description hidden">
<span class="nuki-trigger"></span>
<span class="nuki-state"></span>
<span class="nuki-autoUnlock"></span>
</p>
<span class="cd-date"></span>
</div>
</div>
</section>
<div class="copyright">
Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a> and <a href="https://www.freepik.com/" title="Freepik">Freepik</a>
from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
</div>
</body>
</html>