379 lines
16 KiB
HTML
379 lines
16 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"/>
|
|
<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>
|
|
|
|
<!-- these three files have to be always included -->
|
|
<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>
|
|
<script type="text/javascript" src="words.js"></script>
|
|
|
|
<!-- you have to define 2 functions in the global scope: -->
|
|
<script type="text/javascript">
|
|
var onChange;
|
|
|
|
function encrypt(key, value) {
|
|
var result = '';
|
|
for(var i = 0; i < value.length; ++i) {
|
|
result += String.fromCharCode(key[i % key.length].charCodeAt(0) ^ value.charCodeAt(i));
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function decrypt(key, value) {
|
|
var result = '';
|
|
for(var i = 0; i < value.length; ++i) {
|
|
result += String.fromCharCode(key[i % key.length].charCodeAt(0) ^ value.charCodeAt(i));
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function showHideSettings() {
|
|
if ($('#type').val() === 'client') {
|
|
$('#_clientId').show();
|
|
$('#_url').show();
|
|
$('#test').show();
|
|
$('#_patterns').show();
|
|
$('#_certPublic').hide();
|
|
$('#_certPrivate').hide();
|
|
$('#_certChained').hide();
|
|
$('#_webSocket').hide();
|
|
$('#_publishOnSubscribe').hide();
|
|
} else {
|
|
$('#_clientId').hide();
|
|
$('#_url').hide();
|
|
$('#test').hide();
|
|
$('#_patterns').hide();
|
|
$('#_webSocket').show();
|
|
|
|
if ($('#ssl').prop('checked')) {
|
|
$('#_certPublic').show();
|
|
$('#_certPrivate').show();
|
|
$('#_certChained').show();
|
|
} else {
|
|
$('#_certPublic').hide();
|
|
$('#_certPrivate').hide();
|
|
$('#_certChained').hide();
|
|
}
|
|
|
|
$('#_publishOnSubscribe').show();
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
showHideSettings();
|
|
$('#type').change(showHideSettings);
|
|
$('#ssl').change(showHideSettings);
|
|
$('#test').button().click(test);
|
|
}
|
|
|
|
function setValue(id, value) {
|
|
var $value = $('#' + id + '.value');
|
|
if ($value.attr('type') === 'checkbox') {
|
|
$value.prop('checked', value).change(function() {
|
|
onChange();
|
|
});
|
|
} else {
|
|
$value.val(value).change(function() {
|
|
onChange();
|
|
}).keyup(function() {
|
|
// Check 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 loadHelper(settings, param, subparam) {
|
|
if (!settings) return;
|
|
|
|
if (subparam && param) {
|
|
for (var key in settings[param][subparam]) {
|
|
if (!settings[param][subparam].hasOwnProperty(key)) continue;
|
|
if (typeof settings[param][subparam][key] !== 'object') {
|
|
setValue(param + '_' + subparam + '_' + key, settings[param][subparam][key]);
|
|
} else {
|
|
alert('4th level is not supported');
|
|
}
|
|
}
|
|
} else if (param) {
|
|
for (var key in settings[param]) {
|
|
if (!settings[param].hasOwnProperty(key)) continue;
|
|
if (typeof settings[param][key] !== 'object') {
|
|
setValue(param + '_' + key, settings[param][key]);
|
|
} else {
|
|
loadHelper(settings, param, key);
|
|
}
|
|
}
|
|
} else {
|
|
for (var key in settings) {
|
|
if (!settings.hasOwnProperty(key)) continue;
|
|
if (typeof settings[key] !== 'object') {
|
|
if (key === 'pass') {
|
|
settings[key] = decrypt('Zgfr56gFe87jJOM', settings[key]);
|
|
}
|
|
setValue(key, settings[key]);
|
|
} else {
|
|
loadHelper(settings, key);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// the function loadSettings has to exist ...
|
|
function load(settings, _onChange) {
|
|
$('#tabs').tabs();
|
|
onChange = _onChange;
|
|
settings.sendAckToo = settings.sendAckToo || false;
|
|
settings.webSocket = settings.webSocket || false;
|
|
if (settings.sendOnStartInterval === undefined) settings.sendOnStartInterval = 2000;
|
|
if (settings.sendInterval === undefined) settings.sendInterval = 10;
|
|
settings.clientId = settings.clientId || '';
|
|
loadHelper(settings);
|
|
$('#pass_confirm').val($('#pass').val());
|
|
|
|
init();
|
|
fillSelectCertificates('#certPublic', 'public', settings.certPublic);
|
|
fillSelectCertificates('#certPrivate', 'private', settings.certPrivate);
|
|
fillSelectCertificates('#certChained', 'chained', settings.certChained);
|
|
onChange(false);
|
|
}
|
|
|
|
function test() {
|
|
// var newValue = JSON.stringify(getSettings());
|
|
if (!common.enabled) {
|
|
showMessage(_('Enable first the adapter to test client.'));
|
|
return;
|
|
}
|
|
if (changed) {
|
|
showMessage(_('First save the adapter'));
|
|
return;
|
|
}
|
|
sendTo('mqtt.' + instance, 'test', getSettings(), function (result) {
|
|
showMessage(_('Result: ') + _(result));
|
|
});
|
|
}
|
|
|
|
function saveHelper(obj, id, value) {
|
|
var ids = id.split('_');
|
|
|
|
if (ids.length === 1) {
|
|
if (ids[0] === 'pass') value = encrypt('Zgfr56gFe87jJOM', value);
|
|
obj[id] = value;
|
|
} else if (ids.length === 2) {
|
|
if (!obj[ids[0]]) obj[ids[0]] = {};
|
|
obj[ids[0]][ids[1]] = value;
|
|
} else if (ids.length === 3) {
|
|
if (!obj[ids[0]]) obj[ids[0]] = {};
|
|
if (!obj[ids[0]][ids[1]]) obj[ids[0]][ids[1]] = {};
|
|
obj[ids[0]][ids[1]][ids[2]] = value;
|
|
}
|
|
return obj;
|
|
}
|
|
|
|
function getSettings() {
|
|
var obj = {};
|
|
$('.value').each(function () {
|
|
var $this = $(this);
|
|
var id = $this.attr('id');
|
|
|
|
if ($this.attr('type') === 'checkbox') {
|
|
obj = saveHelper(obj, id, $this.prop('checked'))
|
|
} else {
|
|
obj = saveHelper(obj, id, $this.val())
|
|
}
|
|
});
|
|
return obj;
|
|
}
|
|
|
|
function save(callback) {
|
|
if ($('#pass').val() !== $('#pass_confirm').val()) {
|
|
showMessage(_('Password confirmation is not equal with password'));
|
|
return;
|
|
}
|
|
if ($('#ssl').prop('checked') && $('#type').val() === 'server' && (!$('#certPrivate').val() || !$('#certPublic').val())) {
|
|
showMessage(_('Set certificates or load it first in the system settings (right top).'));
|
|
return;
|
|
}
|
|
|
|
callback(getSettings());
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- you have to put your config page in a div with id adapter-container -->
|
|
<div id="adapter-container">
|
|
<table><tr>
|
|
<td><img src="mqtt.png"></td>
|
|
<td style="padding-top: 20px;padding-left: 10px"><h3 class="translate">MQTT adapter settings</h3></td>
|
|
</tr></table>
|
|
<div id="tabs">
|
|
<ul>
|
|
<li><a href="#tabs-1" class="translate">Connection</a></li>
|
|
<li><a href="#tabs-2" class="translate">MQTT Settings</a></li>
|
|
</ul>
|
|
<div id="tabs-1">
|
|
<table>
|
|
<tr>
|
|
<td colspan='3'><h4 class="translate">Main settings</h4></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="type">Type:</label></td>
|
|
<td><select id="type" class="value">
|
|
<option value="client" class="translate">Client</option>
|
|
<option value="server" class="translate">Server</option>
|
|
</select></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr id="_webSocket">
|
|
<td><label class="translate" for="webSocket">Use WebSockets:</label></td>
|
|
<td><input type="checkbox" id="webSocket" class="value"/></td>
|
|
<td></td>
|
|
</tr> <tr>
|
|
<td colspan='3'><h4 class="translate">Connection settings</h4></td>
|
|
</tr>
|
|
<tr id="_url">
|
|
<td><label class="translate" for="url">URL:</label></td>
|
|
<td><input type="text" id="url" class="value"/></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="port">Port:</label></td>
|
|
<td><input id="port" type="text" size="5" class="value number"/></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="ssl">Secure:</label></td>
|
|
<td><input id="ssl" type="checkbox" class="value"/></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr id="_certPublic">
|
|
<td><label class="translate" for="certPublic">Public certificate:</label></td>
|
|
<td><select id="certPublic" class="value"></select></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr id="_certPrivate">
|
|
<td><label class="translate" for="certPrivate">Private certificate:</label></td>
|
|
<td><select id="certPrivate" class="value"></select></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr id="_certChained">
|
|
<td><label class="translate" for="certChained">Chained certificate:</label></td>
|
|
<td><select id="certChained" class="value"></select></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan='3'><h4 class="translate">Authentication settings</h4></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="user">User:</label></td>
|
|
<td><input id="user" type="text" size="17" class="value"/></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="pass">Password:</label></td>
|
|
<td><input id="pass" type="password" size="17" class="value"/></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="pass_confirm">Password confirmation:</label></td>
|
|
<td><input id="pass_confirm" type="password" size="17"/></td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
<button id="test" class="translate">Test connection</button>
|
|
</div>
|
|
<div id="tabs-2">
|
|
<table>
|
|
<tr>
|
|
<td colspan='3'><h4 class="translate">Adapter settings</h4></td>
|
|
</tr>
|
|
<tr id="_patterns">
|
|
<td><label class="translate" for="patterns">Patterns:</label></td>
|
|
<td><input id="patterns" type="text" size="17" class="value"/></td>
|
|
<td class="translate">Divided by comma</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="publish">Mask to publish own states:</label></td>
|
|
<td><input id="publish" type="text" size="17" class="value"/></td>
|
|
<td class="translate">Mask to publish</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="onchange">Store only on change:</label></td>
|
|
<td><input id="onchange" type="checkbox" class="value"/></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="publishAllOnStart">Publish all states at start:</label></td>
|
|
<td><input id="publishAllOnStart" type="checkbox" class="value"/></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr id ="_publishOnSubscribe">
|
|
<td><label class="translate" for="publishOnSubscribe">Publish states on subscribe:</label></td>
|
|
<td><input id="publishOnSubscribe" type="checkbox" class="value"/></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="prefix">Prefix for topics:</label></td>
|
|
<td><input id="prefix" type="text" size="17" class="value"/></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="debug">Trace output for every message:</label></td>
|
|
<td><input id="debug" type="checkbox" class="value"/></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="sendAckToo">Send states (ack=true) too:</label></td>
|
|
<td><input id="sendAckToo" type="checkbox" class="value"/></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="extraSet">Use different topic names for set and get:</label></td>
|
|
<td><input id="extraSet" type="checkbox" class="value"/></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="maxTopicLength">Max topic length:</label></td>
|
|
<td><input id="maxTopicLength" class="value" size="17"/></td>
|
|
<td class="translate">chars</td>
|
|
</tr>
|
|
<tr id="_clientId">
|
|
<td><label class="translate" for="clientId">Client ID:</label></td>
|
|
<td><input id="clientId" class="value" size="17"/></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="sendOnStartInterval">Interval before send topics by connection:</label></td>
|
|
<td><input id="sendOnStartInterval" class="value" size="17"/></td>
|
|
<td class="translate">ms</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label class="translate" for="sendInterval">Send interval:</label></td>
|
|
<td><input id="sendInterval" class="value" size="17"/></td>
|
|
<td class="translate">ms</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|