iobroker.paw
Version:
ioBroker paw Adapter
169 lines (148 loc) • 8.48 kB
HTML
<html>
<link rel="stylesheet" type="text/css" href="../../lib/css/themes/jquery-ui/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/css/jqGrid/ui.jqgrid-4.5.4.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/css/jquery.multiselect-1.13.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>
<script type="text/javascript" src="../../lib/js/jqGrid/jquery.jqGrid-4.5.4.min.js"></script>
<script type="text/javascript" src="../../lib/js/jqGrid/grid.locale-all.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>
<style>
.table_header {
background-color: grey;
color: white;
}
.ip {
width: 150px;
text-align: right;
}
</style>
<!-- you have to define 2 functions in the global scope: -->
<script type="text/javascript">
var devices = [];
systemDictionary = {
"Paw adapter settings": {"en": "Paw adapter settings", "de": "Paw Adapter-Einstellungen", "ru": "Настройки драйвера Paw"},
"Settings": {"en": "Settings", "de": "Einstellungen", "ru": "Настройки"},
"Ping addresses": {"en": "IP addresses", "de": "IP Adresse", "ru": "Список IP адресов"},
"Interval[ms]:": {"en": "interval[ms]", "de": "Intervall[ms]", "ru": "Интервал опроса[мс]:"},
"Room": {"en": "Room", "de": "Raum", "ru": "Комната"},
"Name": {"en": "Name", "de": "Name", "ru": "Имя"},
"IP Address": {"en": "IP device", "de": "IP device", "ru": "IP устройства"},
"port": {"en": "Port", "de": "Port", "ru": "Порт"},
"time_start": {"en": "Start", "de": "Start", "ru": "Начало"},
"time_end": {"en": "End", "de": "End", "ru": "Конец"},
"subscribe_apiai": {"en": "Subscribe apiai", "de": "Subscribe apiai", "ru": "Подписаться apiai"},
"subscribe_text2command": {"en": "Subscribe text2command", "de": "Subscribe text2command", "ru": "Подписаться text2command"},
"subscribe_hilink": {"en": "Subscribe hilink", "de": "Subscribe hilink", "ru": "Подписаться hilink"},
"ign": {"en": "Ignore", "de": "Ignore", "ru": "Ignore"},
"server": {"en": "IP iobroker", "de": "IP iobroker", "ru": "IP iobroker"},
"port_server": {"en": "Port", "de": "Port", "ru": "Порт"}
};
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();
});
}
}
// the function loadSettings has to exist ...
function load(settings, onChange) {
if (!settings) return;
devices = settings.devices || [];
for (var key in settings) {
setValue(key, settings[key], onChange);
}
if (typeof values2table === 'function') {
$('#devices').hide();
$('#pager-devices').hide();
values2table('values', devices, onChange);
} else {
editTable('devices', ['name', 'ip', 'room','port','ign'], devices, 350);
$('#values').hide();
}
onChange(false);
}
// ... and the function save has to exist.
// you have to make sure the callback is called with the settings object as first param!
function save(callback) {
// example: select elements with class=value and build settings object
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();
}
});
// Get edited table
if (typeof table2values === 'function') {
obj.devices = table2values('values');
} else {
obj.devices = getTableResult('devices', ['name', 'ip', 'room','port','ign']);
}
callback(obj);
}
</script>
<!-- you have to put your config page in a div with id adapter-container -->
<div id="adapter-container">
<table><tr>
<td><img src="paw.png" width="64" height="64"></td>
<td style="padding-top: 20px;padding-left: 10px"><h3 class="translate">Paw adapter settings</h3></td>
</tr></table>
<h4 class="translate">Settings</h4>
<table>
<tr><td class="translate">server</td><td><input class="value" id="server" type="text" size="15"/></td></tr>
<tr><td class="translate">port_server</td><td><input class="value number" id="port" type="input" size="4"/></td></tr>
<tr><td class="translate">Interval[ms]:</td><td><input class="value number" id="interval" type="input" size="6"/></td></tr>
<tr><td class="translate">subscribe_apiai</td><td><input class="value number" id="apiai" type="checkbox"/></td></tr>
<tr><td class="translate">subscribe_text2command</td><td><input class="value number" id="text2command" type="checkbox"/></td></tr>
<tr><td class="translate">subscribe_hilink</td><td><input class="value number" id="hilink" type="checkbox"/></td></tr>
</table>
<h4 class="translate">Ping addresses</h4>
<table id="devices"></table><div id="pager-devices"></div>
<div id="values" style="width: 100%; height: calc(100% - 195px)">
<button class="table-button-add" style="margin-left: 10px; width: 1.5em; height: 1.5em"></button>
<div style="width: 100%; height: calc(100% - 30px); overflow: auto;">
<table class="table-values" style="width: 100%;">
<thead>
<tr>
<th data-name="_index" style="width: 20px" class="translate"></th>
<th data-name="name" style="width: 150px" class="translate">Name</th>
<th data-name="ip" style="width: 150px" class="translate">IP Address</th>
<th data-name="port" style="width: 50px" class="translate">port</th>
<th data-name="time_start" style="width: 50px" class="translate">time_start</th>
<th data-name="time_end" style="width: 50px" class="translate">time_end</th>
<th data-name="room" style="width: 70px" data-type="select" class="translate">Room</th>
<th data-name="ign" style="width: 70px" data-type="checkbox" class="translate">ign</th>
<th data-buttons="delete" style="width: 20px"></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</html>