iobroker.paw
Version:
ioBroker paw Adapter
376 lines (328 loc) • 12.4 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;
}
.card-action a {
margin-right: 5px;
}
.card .card-action {
padding: 10px 15px ;
}
.span-value {
font-weight: bold;
font-size: 16px ;
}
.switch {
margin-top: 8px;
}
.marg {
margin-bottom: 5px ;
margin-top: 10px;
}
</style>
<!-- you have to define 2 functions in the global scope: -->
<script type="text/javascript">
// the function loadSettings has to exist ...
var idItem = 0;
var url = document.location.hostname;
var image = ['card_logo1.jpg', 'card_logo2.jpg', 'card_logo3.jpg', 'card_logo4.jpg'];
var myOnChange;
function openModulEdit(name, ip, port, state, id) {
$('#modalEdit').find('#edit_name').val(name);
$('#modalEdit').find('#edit_ip').val(ip);
$('#modalEdit').find('#edit_port').val(port);
$('#modalEdit').attr('itemId', id)
$('#modalEdit').modal('open');
M.updateTextFields();
}
function random() {
return Math.floor(Math.random() * 4);
}
function addcard(name, ip, port, state, id, onChange) {
$("#card_list").append(
$('<div/>', {
class: 'col s12 m6 l4 item',
id: id,
append: $('<div/>', {
class: 'card horizontal hoverable',
append: $('<div/>', {
class: 'card-image',
append: $('<img/>', {
src: 'img/' + image[random()]
})
}).add($('<div/>', {
class: 'card-stacked',
append: ($('<div/>', {
class: 'card-content',
append: ($('<p/>', {
text: 'Name: ',
append: $('<span/>', {
id: 'name',
class: 'span-value',
text: name
})
}))
.add($('<p/>', {
text: 'IP: ',
append: $('<a/>', {
href: 'http://' + ip + ':' + port,
target: '_blank',
append: $('<span/>', {
id: 'ip',
class: 'span-value',
text: ip,
})
})
}))
.add($('<p/>', {
text: 'Port: ',
append: $('<span/>', {
id: 'port',
class: 'span-value',
text: port
})
}))
})).add($('<div/>', {
class: 'card-action',
append: ($('<a/>', {
class: 'btn-floating btn-small waves-effect waves-light red right',
append: $('<i/>', {
class: 'material-icons',
text: "delete",
click: function(e) {
var name_val = $(this).parents(".item").find('#name').text()
if (confirm("Delete device: " + name_val + "?")) {
$(this).parents(".item").remove();
if (onChange) onChange();
}
}
})
}))
}))
}))
})
}))
}
function setValue(id, value, onChange) {
// example: select elements with id=key and class=value and insert value
if ($('#' + id + '.value').attr('type') == 'checkbox') {
$('#' + id + '.value').prop('checked', value).change(function() {
onChange();
});
} else {
$('#' + id + '.value').val(value).change(function() {
onChange();
}).keyup(function() {
// Chack that only numbers entered
if ($(this).hasClass('number')) {
var val = $(this).val();
if (val) {
var newVal = '';
for (var i = 0; i < val.length; i++) {
if (val[i] >= '0' && val[i] <= '9') {
newVal += val[i];
}
}
if (val != newVal) $(this).val(newVal);
}
}
onChange();
});
}
}
function load(settings, onChange) {
if (!settings) return;
myOnChange = onChange;
console.log(typeof(settings));
for (var key in settings) {
if (typeof(settings[key]) === 'object') {
var devices = settings[key] || [];
devices.forEach(function(item, i, arr) {
addcard(item.name, item.ip, item.port, item.state, "item_" + i, onChange);
idItem = i;
});
} else {
console.log(key);
console.log(settings[key]);
if (key === 'server') {
setValue(key, settings[key] !== '' ? settings[key] : url, onChange);
} else {
setValue(key, settings[key], onChange);
}
}
}
onChange(true);
}
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();
}
});
var item = $("#card_list .item");
console.log(item.length);
obj.devices = [];
if (item.length > 0) {
item.each(function(index) {
var item_value = {};
item_value.name = $(this).find('#name').text()
item_value.ip = $(this).find("#ip").text();
item_value.port = $(this).find("#port").text();
item_value.state = true;
// item_value.state = $(this).find("#input").is(':checked');
obj.devices[index] = item_value;
});
}
callback(obj);
}
$(document).ready(function() {
M.updateTextFields();
$('.modal').modal();
$(".save-card").click(function(event) {
var name = $("#modul_name").val();
var ip = $("#modul_ip").val().replace(" ", "");
var port = $("#modul_port").val();
idItem = idItem + 1
addcard(name, ip, port, true, 'item_' + idItem, myOnChange);
});
$(".search-device").click(function(event) {
console.log("click");
getAdapterInstances('paw', function(res) {
console.log(res);
if (res[0].common.enabled) {
var ip = $("#search_modul_ip").val().replace(" ", "");
if (ip !== '') {
$(".progress").removeClass('hide');
$(".search-device").addClass('disabled');
$("#search_modul_ip").removeClass('invalid');
sendTo("paw.0", 'info', {
ip: ip
}, function(res) {
console.log(res);
console.log("error");
if (res && res.info) {
$("#modul_name").val(res.info.device);
$("#modul_ip").val(res.info.ip);
$("#modul_port").val(res.info.port);
$('#modalCreate').modal('open');
M.updateTextFields();
console.log('res.minVersionApp: ' + res.minVersionApp);
console.log('res.info.versionCode: ' + res.info.versionCode);
console.log('res' + JSON.stringify(res));
if(!res.info.versionCode || res.minVersionApp > res.info.versionCode){
$(".save-card").hide();
$(".update_app").removeClass('hide');
}
myOnChange();
} else {
$("#search_modul_ip").addClass('invalid');
}
$(".progress").addClass('hide');
$(".search-device").removeClass('disabled');
});
} else {
$("#search_modul_ip").focus();
}
} else {
alert('Start adapter!!!');
}
})
});
$('#modalAttention').modal('open');
});
</script>
</head>
<body>
<!-- you have to put your config page in a div with id adapter-container -->
<div class="m adapter-container">
<!-- Modal Structure -->
<div id="modalAttention" class="modal">
<div class="modal-content">
<h5 class="translate">Attention!!! BETA testing</h5>
<p class="translate">This version of the adapter works only with the new application.</p>
<p class="translate red-text">When updating the adapter, do not forget to update the application!!!</p>
<a href="https://play.google.com/store/apps/details?id=ru.codedevice.iobrokerpawii" target="_blank">
<img alt="Get it on Google Play" src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png" height="60"/>
</a>
<p>Write about errors <a target="_blank" href="https://github.com/bondrogeen/ioBroker.paw/issues">here</a>.</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">OK</a>
</div>
</div>
<div id="modalCreate" class="modal">
<div class="modal-content">
<h5 class="center">Add device</h5>
<div class="input-field col s10">
<input id="modul_ip" type="text">
<label for="modul_ip" class="translate">modul_ip</label>
</div>
<div class="input-field col s8">
<input type="text" id="modul_name" />
<label for="modul_name" class="translate">modul_name</label>
</div>
<div class="input-field col s8 offset-s2">
<input type="number" id="modul_port" value="8080" />
<label for="modul_port" class="translate">modul_port</label>
</div>
<div class="update_app col s8 hide">
<h5 class="red-text translate">You need to update the application version.</h5>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat blue-text save-card">Save</a>
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Cancel</a>
</div>
</div>
<div class="progress hide">
<div class="indeterminate"></div>
</div>
<div class="row">
<div class="row marg">
<div class="input-field col s12 m6 l4">
<input class="value" id="server" placeholder="192.168.1.10" type="text">
<label for="server" class="translate">server</label>
</div>
<div class="input-field col s12 m6 l4">
<input type="number" class="value" id="port" placeholder="8898" />
<label for="port" class="translate">port_server</label>
</div>
<div class="input-field col s12 m6 l4">
<input type="number" class="value" id="interval" placeholder="60" />
<label for="interval" class="translate">interval</label>
</div>
</div>
<div class="row marg">
<div class="input-field col s10">
<input id="search_modul_ip" type="text">
<label for="modul_ip" class="translate">modul_ip</label>
</div>
<div class="input-field col s2">
<button class="btn waves-effect waves-light search-device"><i class="material-icons">search</i></button>
</div>
</div>
</div>
<div class="row" id=card_list>
</div>
</div>
</body>
</html>