506 lines
22 KiB
HTML
506 lines
22 KiB
HTML
<html>
|
|
<head>
|
|
<!-- 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"/>
|
|
|
|
|
|
<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>
|
|
<script type="text/javascript" src="../../lib/js/jquery-ui.min.js"></script>
|
|
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="./lib/css/jsgrid.css"/>
|
|
<link rel="stylesheet" type="text/css" href="./lib/css/jsgrid-theme.css"/>
|
|
<script type="text/javascript" src="./lib/js/jsgrid.js"></script>
|
|
<script type="text/javascript" src="./lib/js/grid.locale-cn.js"></script>
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="./lib/css/my.css"/>
|
|
|
|
|
|
|
|
<!-- 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>
|
|
|
|
|
|
<!-- you have to define 2 functions in the global scope: -->
|
|
<script type="text/javascript">
|
|
|
|
var attempts = 0;
|
|
var ignoreDialog = 0;
|
|
|
|
var typeItemsLen = {
|
|
'uint8be': 1,
|
|
'uint8le': 1
|
|
};
|
|
|
|
function switchOneType(data, id) {
|
|
/*
|
|
var isDirect = $('#modbus_directAddresses').prop('checked');
|
|
if ($('#modbus_showAliases').prop('checked')) {
|
|
for (var i = 0; i < data[id].length; i++) {
|
|
data[id][i]._address = address2alias(id, data[id][i].address, isDirect);
|
|
}
|
|
} else {
|
|
for (var i = 0; i < data[id].length; i++) {
|
|
data[id][i]._address = parseInt(data[id][i].address, 10) || 0;
|
|
}
|
|
}
|
|
*/
|
|
$('#modbus_' + id).jsGrid('render');
|
|
}
|
|
|
|
function switchAll(data) {
|
|
switchOneType(data, 'disInputs');
|
|
if ($('#modbus_showAliases').prop('checked')) {
|
|
$('.offsets').show();
|
|
} else {
|
|
$('.offsets').hide();
|
|
}
|
|
}
|
|
|
|
function initTabs(onchange, data) {
|
|
if (!data) {
|
|
data = {};
|
|
$.each($('.modbus-grid'), function () {
|
|
var id = $(this).attr('id');
|
|
var key = id.split('_')[1];
|
|
|
|
if ($(this).data('JSGrid')._editingRow) {
|
|
$(this).jsGrid('updateItem');
|
|
}
|
|
|
|
data[key] = $(this).jsGrid('option', 'data');
|
|
});
|
|
}
|
|
|
|
$.each($('.modbus-grid'), function () {
|
|
var _id = $(this).attr('id');
|
|
|
|
var roleItems = [
|
|
{value: '', text: ''},
|
|
{value: 'value', text: 'value'},
|
|
{value: 'level', text: 'level'},
|
|
{value: 'state', text: 'state'},
|
|
{value: 'switch', text: 'switch'}
|
|
];
|
|
|
|
var typeItems = [
|
|
{value: '', text: ''},
|
|
{value: 'ieee754', text: 'IEEE-754'}
|
|
];
|
|
|
|
var roomsItems = [{value: '', text: ''}];
|
|
|
|
|
|
var fields = [
|
|
{name: 'deviceId' , title: _('deviceId'), type: 'text', width: '30px', sorter: 'number'},
|
|
{name: 'ip' , title: _('ip'), type: 'text', width: '110px', sorter: 'number'},
|
|
{name: 'port' , title: _('port'), type: 'text', width: '60px', sorter: 'number'},
|
|
{name: 'username' , title: _('Name'), type: 'text', width: '*'},
|
|
{name: 'password' , title: _('Name'), type: 'text', width: '*'},
|
|
{name: 'description', title: _('Description'), type: 'text', width: '*'},
|
|
{ type: 'control', width: '80px'}
|
|
];
|
|
|
|
|
|
var g = $('#' + _id).jsGrid({
|
|
width: 'auto',
|
|
height: 'auto',
|
|
inserting: true,
|
|
editing: true,
|
|
sorting: true,
|
|
heading: true,
|
|
paging: false,
|
|
deleteConfirm: function (el, item, cb) {
|
|
if (!ignoreDialog || Date.now() - ignoreDialog > 60000) {
|
|
var buttons = {};
|
|
buttons[_('Delete')] = function() {
|
|
if ($('#delete_ignore_dialog').prop('checked')) {
|
|
ignoreDialog = Date.now();
|
|
}
|
|
|
|
cb && cb(true);
|
|
$( this ).dialog('close');
|
|
};
|
|
buttons[_('Cancel')] = function() {
|
|
cb && cb(false);
|
|
$( this ).dialog('close');
|
|
};
|
|
|
|
$('#delete_ignore_dialog').prop('checked', false);
|
|
|
|
$("#delete-dlg").dialog({
|
|
resizable: false,
|
|
height: 'auto',
|
|
title: _('Delete address'),
|
|
width: 500,
|
|
modal: true,
|
|
buttons: buttons
|
|
});
|
|
} else {
|
|
cb && cb(true);
|
|
}
|
|
},
|
|
data: data[_id.split('_')[1]],
|
|
fields: fields,
|
|
|
|
editRowRenderer: function(item) {
|
|
var $result = $('<tr>').addClass(this.editRowClass);
|
|
|
|
this._eachField(function(field) {
|
|
$('<td>').addClass(field.css)
|
|
.appendTo($result)
|
|
.append(field.editTemplate ? field.editTemplate(item ? item[field.name] : '', item) : '')
|
|
.width(field.width || 'auto').keypress(function (e) {
|
|
if (e.which === 13) {
|
|
$('#' + _id).jsGrid('updateItem');
|
|
}
|
|
onchange();
|
|
});
|
|
});
|
|
return $result;
|
|
},
|
|
onItemUpdated: function (obj) {
|
|
/* {grid, row, item, itemIndex, previousItem}*/
|
|
var id = obj.grid._body.parent().attr('id');
|
|
var changed = false;
|
|
if (obj.item.wp && !obj.item.poll) {
|
|
obj.item.poll = true;
|
|
changed = true;
|
|
}
|
|
if (parseInt(obj.item.address, 10).toString() !== obj.item.address.toString()) changed = true;
|
|
obj.item._address = parseInt(obj.item._address, 10);
|
|
|
|
if ($('#modbus_showAliases').prop('checked')) {
|
|
var isDirect = $('#modbus_directAddresses').prop('checked');
|
|
obj.item.address = alias2address(id.split('_').pop(), obj.item._address, isDirect);
|
|
} else {
|
|
obj.item.address = obj.item._address;
|
|
}
|
|
|
|
if (obj.item.type === '') {
|
|
obj.item.type = typeItems[1].value;
|
|
changed = true;
|
|
}
|
|
|
|
// update length
|
|
if (obj.item.type === 'string' || obj.item.type === 'stringle') {
|
|
if (obj.item.factor !== '') {
|
|
obj.item.factor = '';
|
|
changed = true;
|
|
}
|
|
if (obj.item.offset !== '') {
|
|
obj.item.offset = '';
|
|
changed = true;
|
|
}
|
|
|
|
obj.item.len = parseInt(obj.item.len, 10) || 0;
|
|
if (!obj.item.len) {
|
|
obj.item.len = 2;
|
|
changed = true;
|
|
}
|
|
} else if (typeItemsLen[obj.item.type]) {
|
|
obj.item.len = parseInt(obj.item.len, 10);
|
|
if (obj.item.len != typeItemsLen[obj.item.type]) {
|
|
obj.item.len = typeItemsLen[obj.item.type];
|
|
changed = true;
|
|
}
|
|
|
|
if (parseFloat(obj.item.factor).toString() !== obj.item.factor.toString()) {
|
|
obj.item.factor = parseFloat(obj.item.factor) || 1;
|
|
changed = true;
|
|
}
|
|
if (parseFloat(obj.item.offset).toString() !== obj.item.offset.toString()) {
|
|
obj.item.offset = parseFloat(obj.item.offset) || 0;
|
|
changed = true;
|
|
}
|
|
}
|
|
|
|
if (!obj.item.role && obj.item.type !== 'string' && obj.item.type !== 'stringle') {
|
|
if (id === 'modbus_doors') {
|
|
obj.item.role = 'status';
|
|
} else if (id === 'modbus_coils') {
|
|
obj.item.role = 'button';
|
|
} else if (id === 'modbus_inputRegs') {
|
|
obj.item.role = 'value';
|
|
} else if (id === 'modbus_holdingRegs') {
|
|
obj.item.role = 'level';
|
|
}
|
|
changed = true;
|
|
}
|
|
|
|
if (changed) this.render();
|
|
|
|
onchange();
|
|
},
|
|
onItemInserting: function (obj) {
|
|
if (obj.item.poll !== undefined) {
|
|
obj.item.poll = true;
|
|
}
|
|
// find automatically next address
|
|
var id = obj.grid._body.parent().attr('id').split('_')[1];
|
|
if (data[id].length) {
|
|
var max = 0;
|
|
obj.item.role = data[id][data[id].length - 1].role;
|
|
obj.item.deviceId = data[id][data[id].length - 1].deviceId;
|
|
|
|
var len;
|
|
var defaultDeviceId = parseInt($('#modbus_deviceId').val(), 10) || 1;
|
|
var actualDeviceId = parseInt(obj.item.deviceId, 10);
|
|
if (!actualDeviceId) actualDeviceId = defaultDeviceId;
|
|
|
|
for (var a = 0; a < data[id].length; a++) {
|
|
var deviceId = parseInt(data[id][a].deviceId, 10);
|
|
if (!deviceId) deviceId = defaultDeviceId;
|
|
if (deviceId !== actualDeviceId) continue;
|
|
if (!obj.item.type) {
|
|
len = 1;
|
|
} else if (obj.item.type !== 'string' && obj.item.type !== 'stringle') {
|
|
len = typeItemsLen[obj.item.type];
|
|
} else {
|
|
len = obj.item.len;
|
|
}
|
|
data[id][a]._address = parseInt(data[id][a]._address, 10);
|
|
|
|
if (data[id][a]._address + len > max) max = data[id][a]._address + len;
|
|
}
|
|
obj.item._address = max;
|
|
|
|
if ($('#modbus_showAliases').prop('checked')) {
|
|
obj.item.address = alias2address(id, parseInt(obj.item._address, 10), isDirect);
|
|
} else {
|
|
obj.item.address = obj.item._address;
|
|
}
|
|
|
|
} else {
|
|
if ($('#modbus_showAliases').prop('checked')) {
|
|
if (id === 'disInputs') {
|
|
obj.item._address = data.params.disInputsOffset;
|
|
} else if (id === 'coils') {
|
|
obj.item._address = data.params.coilsOffset;
|
|
} else if (id === 'inputRegs') {
|
|
obj.item._address = data.params.inputRegsOffset;
|
|
} else if (id === 'holdingRegs') {
|
|
obj.item._address = data.params.holdingRegsOffset;
|
|
}
|
|
obj.item.address = alias2address(id, obj.item._address, isDirect);
|
|
} else {
|
|
obj.item.address = 0;
|
|
obj.item._address = 0;
|
|
}
|
|
|
|
if (id === 'inputRegs' || 'holdingRegs') {
|
|
obj.item.factor = 1;
|
|
obj.item.offset = 0;
|
|
obj.item.type = 'uint16be';
|
|
obj.item.len = '';
|
|
}
|
|
}
|
|
|
|
onchange();
|
|
},
|
|
onItemDeleted: function (obj) {
|
|
onchange();
|
|
}
|
|
});
|
|
|
|
g.data('JSGrid')._editRow = function($row) {
|
|
if(this._editingRow) {
|
|
this.updateItem();
|
|
}
|
|
|
|
var item = $row.data('JSGridItem');
|
|
if (!item) return;
|
|
var $editRow = this._createEditRow(item);
|
|
|
|
this._editingRow = $row;
|
|
$row.hide();
|
|
$editRow.insertAfter($row);
|
|
$row.data('JSGridEditRow', $editRow);
|
|
};
|
|
|
|
|
|
|
|
});
|
|
|
|
switchAll(data);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
// the function loadSettings has to exist ...
|
|
function load(settings, onChange) {
|
|
|
|
//zhongjin
|
|
|
|
|
|
if (systemLang === 'cn') {
|
|
translate_cn();
|
|
}
|
|
|
|
var data = {
|
|
doors: settings.doors || []
|
|
}
|
|
|
|
initTabs(onChange, data);
|
|
|
|
//end zhongjin
|
|
|
|
|
|
// example: select elements with id=key and class=value and insert value
|
|
if (!settings) return;
|
|
$('.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();
|
|
});
|
|
}
|
|
});
|
|
onChange(false);
|
|
M.updateTextFields(); // function Materialize.updateTextFields(); to reinitialize all the Materialize labels on the page if you are dynamically adding inputs.
|
|
}
|
|
|
|
|
|
// ... 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();
|
|
}
|
|
});
|
|
|
|
$.each($('.modbus-grid'), function () {
|
|
var id = $(this).attr('id');
|
|
var key = id.split('_')[1];
|
|
|
|
if ($(this).data('JSGrid')._editingRow) {
|
|
$(this).jsGrid('updateItem');
|
|
}
|
|
|
|
obj[key] = $(this).jsGrid('option', 'data');
|
|
});
|
|
|
|
callback(obj);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<!-- you have to put your config page in a div with id adapter-container -->
|
|
<div id="adapter-container">
|
|
<div class="m adapter-container">
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<ul class="tabs">
|
|
<li class="tab col s4"><a href="#tab-main" class="translate active">Base settings</a></li>
|
|
<li class="tab col s4"><a href="#tab-notification" class="translate">Door device settings</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="tab-main" class="col s12 page">
|
|
<!-- Forms are the standard way to receive user inputted data.
|
|
Learn more http://materializecss.com/forms.html-->
|
|
<div class="row">
|
|
<div class="input-field col s6">
|
|
<img src="doorgate.png" class="logo">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="input-field col s3">
|
|
<input class="value" id="test1" type="checkbox" />
|
|
<label for="test1" class="translate">test1</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="input-field col s12 m6 l4">
|
|
<input class="value" id="port" type="text">
|
|
<label for="port" class="translate">Port</label>
|
|
<span class="translate">REST WebServer Port</span>
|
|
</div>
|
|
<div class="input-field col s12 m6 l4">
|
|
<input type="number" class="value" id="test2" />
|
|
<label for="test2" class="translate">Number</label>
|
|
<!-- Important: label must come directly after input. Label is important. -->
|
|
<span class="translate">test2</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="input-field col s12 m6 l4">
|
|
<input id="email" type="email" class="value validate">
|
|
<label for="email" data-error="wrong" data-success="right">Email</label>
|
|
<!-- You can add custom validation messages by adding either data-error or data-success attributes to your input field labels.-->
|
|
<span class="translate">Verification input</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="input-field col s12 m4">
|
|
<select class="value" id="mySelect">
|
|
<option value="auto" class="translate">Auto</option>
|
|
<option value="manual" class="translate">Manual</option>
|
|
</select>
|
|
<label for="mySelect" class="translate">My select</label>
|
|
<!-- Important: label must come directly after select. Label is important. -->
|
|
</div>
|
|
<div class="input-field col s12 m4">
|
|
<i class="material-icons prefix">mode_edit</i>
|
|
<textarea id="Textarea" class="value materialize-textarea"></textarea>
|
|
<label for="Textarea">Message</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="input-field col s12 m6 l4">
|
|
<input class="value" id="port" type="text">
|
|
<label for="port">Port</label>
|
|
<span class="translate">Descriptions of the input field</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div id="tab-notification" class="col s12 page">
|
|
<div id="modbus_tab_dis_inputs" class="modbus-tab">
|
|
<div id="modbus_doors" class="modbus-grid"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="delete-dlg" style="display: none;">
|
|
<p>
|
|
<span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>
|
|
<span class="translate">Are you sure?</span><br><br>
|
|
<input type="checkbox" id="delete_ignore_dialog" /><label class="translate">Say "yes" for the next minute:</label>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|