UNPKG

iobroker.paw

Version:
169 lines (148 loc) 8.48 kB
<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>