iobroker.oppoplayer
Version:
189 lines (172 loc) • 8.32 kB
HTML
<html>
<head>
<!-- these 4 files always have to be included -->
<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">
<link rel="stylesheet" type="text/css" href="../../css/adapter.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>
<!-- these files always have to be included -->
<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>
<style>
.m .col .select-wrapper + label {
top: -26px;
}
.m span {
font-size: 0.9em;
}
</style>
<script type="text/javascript">
function startCounter(i) {
var $counter = $('#counter');
if (i === undefined) {
count = 4;
} else if (i === 0) {
$counter.hide();
} else {
$counter.html(i.toString()).show();
setTimeout(function () {
startCounter(i - 1);
}, 1000);
}
}
function stopCounter() {
$('#counter').hide();
}
function load(settings, onChange) {
if (!settings) return;
if (settings.pollInterval === undefined) settings.pollInterval = 7000;
if (settings.requestInterval === undefined) settings.requestInterval = 100;
$('.value').each(function () {
var $key = $(this);
var id = $key.attr('id');
if ($key.attr('type') === 'checkbox') {
// do not call onChange direct, because onChange could expect some arguments
$key.prop('checked', settings[id]).on('change', function() {
onChange();
});
} else {
// do not call onChange direct, because onChange could expect some arguments
$key.val(settings[id]).on('change', function() {
onChange();
}).on('keyup', function() {
onChange();
});
}
});
getIsAdapterAlive(function (isAlive) {
if (isAlive || common.enabled) {
$('#browse')
.removeClass('disabled')
.on('click', function () {
showToast(null, _('Be sure your device is not in standby mode.'));
$(this).addClass('disabled');
startCounter(10);
sendTo(null, 'browse', null, function (data) {
stopCounter();
$('#browse').removeClass('disabled');
if (data.error) {
showError(JSON.stringify(data.error));
} else if (data.list && data.list.length) {
var text = '<option value="">' + _('Select one') + '</option>';
var first = '';
for (var j = 0; j < data.list.length; j++) {
if (!first) {
first = data.list[j].ip;
}
text += '<option value="' + data.list[j].ip + '">' + data.list[j].ip + ' - ' + data.list[j].name + '</option>';
}
$('#devices').html(text).removeClass('disabled').select();
$('.devices').show();
var $ip = $('#ip');
if (first && !$ip.val()) {
$ip.val(first).trigger('change');
$('#devices').val(first).select();
M.updateTextFields();
}
} else {
$('#devices')
.html('<option value="">' + _('Nothing found') + '</option>')
.select()
.addClass('disabled');
$('.devices').show();
}
});
});
$('#devices').on('change', function () {
var val = $(this).val();
if (val) {
$('#ip').val(val).trigger('change');
M.updateTextFields();
}
});
} else {
$('#browse').addClass('disabled');
}
});
onChange(false);
M.updateTextFields(); // function Materialize.updateTextFields(); to reinitialize all the Materialize labels on the page if you are dynamically adding inputs.
}
function save(callback) {
var obj = {};
$('.value').each(function () {
var $this = $(this);
if ($this.attr('type') === 'checkbox') {
obj[$this.attr('id')] = $this.prop('checked');
} else {
obj[$this.attr('id')] = $this.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 s5"><a href="#tab-main" class="translate active">Main settings</a></li>
<li class="tab col s5"><a href="#tab-advanced" class="translate">Advanced settings</a></li>
</ul>
</div>
<div id="tab-main" class="col s12 page">
<div class="row">
<div class="input-field col s6">
<img src="oppoplayer.png" class="logo">
</div>
</div>
<div class="row">
<div class="input-field col s4">
<input class="value" id="ip" type="text" placeholder="192.168.178.85"/>
<label for="ip" class="translate">IP-Address</label>
<span class="translate">IP-Address of your player</span>
</div>
<div class="input-field col s1">
<a id="browse" class="btn-floating waves-effect waves-light blue disabled"><i class="material-icons">search</i><span class="translate">Search</span></a>
<span id="counter"></span>
</div>
<div class="input-field col s4 devices" style="display: none;">
<select id="devices"></select>
<label class="translate" for="devices">Found devices</label>
</div>
</div>
</div>
<div id="tab-advanced" class="col s12 page">
<div class="row">
<div class="input-field col s4">
<input id="pollInterval" class="value" type="number" min="2000" max="120000"/>
<label for="pollInterval" class="translate">Poll interval (ms)</label>
</div>
<div class="input-field col s4">
<input id="requestInterval" class="value" type="number" min="100" max="300"/>
<label for="requestInterval" class="translate">Interval between commands (ms)</label>
</div>
</div>
</div>
</div>
</div>
</body>
</html>