iobroker.lightify
Version:
OSRAM Lightify Adapter
137 lines (117 loc) • 5.3 kB
HTML
<html>
<!-- these 4 files always have to be included -->
<link rel="stylesheet" type="text/css" href="../../lib/css/themes/jquery-ui/redmond/jquery-ui.min.css" />
<script type="text/javascript" src="../../lib/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../socket.io/socket.io.js"></script>
<script type="text/javascript" src="../../lib/js/jquery-ui-1.10.3.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/adapter.css" />
<script type="text/javascript" src="../../js/translate.js"></script>
<script type="text/javascript" src="../../js/adapter-settings.js"></script>
<script type="text/javascript" src="words.js"></script>
<script type="text/javascript">
function load(settings, onChange) {
if (settings.interval === undefined && settings.intervall) settings.interval = settings.intervall;
settings.interval = settings.interval || 60;
for (var key in settings) {
if (!settings.hasOwnProperty(key)) continue;
var $value = $('#' + key + '.value');
if ($value.attr('type') === 'checkbox') {
$value.prop('checked', settings[key]).change(function () {
onChange();
});
} else {
$value.val(settings[key]).change(function () {
onChange();
}).keyup(function () {
$(this).trigger('change');
});
}
}
getIsAdapterAlive(function (isAlive) {
if (isAlive || common.enabled) {
$('#browse').html(_('Browse')).prop('disabled', false).click(function () {
$(this).prop('disabled', true);
$('#found').hide();
sendTo(null, 'browse', $('#bind').val(), function(list) {
$('#browse').prop('disabled', false);
var text = '';
if (!list || !list.length) {
text = '<option value="">' + _('Nothing found') + '</option>';
} else {
text = '<option value="">' + _('Select one') + '</option>';
for (var i = 0; i < list.length; i++) {
if (list[i].ip) {
text += '<option value="' + list[i].ip + '">' + list[i].ip + '</option>';
} else {
text += '<option value="' + list[i] + '">' + list[i] + '</option>';
}
}
}
$('#found').html(text).show();
});
});
$('#found').change(function () {
var ip = $(this).val();
var $ip = $('#ip');
if (ip && ip !== $ip.val()) {
$ip.val(ip).trigger('change');
}
});
} else {
$('#browse').html(_('Browse'));
}
});
onChange(false);
}
function save(callback) {
var obj = {};
$('.value').each(function () {
var $this = $(this);
var id = $this.attr('id');
if ($this.attr('type') === 'checkbox') {
obj[$this.attr('id')] = $this.prop('checked');
} else {
obj[$this.attr('id')] = $this.val();
}
});
callback(obj);
}
</script>
<style>
td {
font-size: 13px;
padding-left:1px;
padding-right: 4px;
padding-top: 3px;
padding-bottom: 3px;
}
input {
font-size: 13px;
}
h1 {
font-size: 11px;
color: #505050;
font-weight: bold;
width: 100%;
padding-left:6px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #e0e0e0;
/*background-image: linear-gradient(to right, #e0e0e0, rgba(224,224,224,0.0));*/
/*background-image: linear-gradient(to right, #e0e0e0, #e8e8e8 50%, #e0e0e0);*/
}
</style>
<div id="adapter-container" style="padding-left: 6px; padding-right: 0px; width: 97%;">
<table><tr>
<td><img src="lightify.png" /></td>
<td style="padding-top: 20px;padding-left: 10px"><h3 class="translate">OSRAM Lightify adapter settings</h3></td>
</tr></table>
<h1 class="translate">Settings</h1>
<table>
<tr><td><label class="translate" for="ip">ip</label></td><td><input id="ip" class="value" style="display: inline-block"/><button id="browse" disabled style="display: inline-block;"></button><select id="found" style="display: none;"></select></td></tr>
<tr><td><label class="translate" for="polling">polling</label></td><td><input type='checkbox' class="value" id="polling" size="20" /></td></tr>
<tr><td><label class="translate" for="interval">interval</label></td><td><input class="value" id="interval" size="20" /></td></tr>
</table>
</div>
</html>