iobroker.systeminfo
Version:
ioBroker (system)info Adapter
567 lines (527 loc) • 16.5 kB
HTML
<html>
<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>
<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>
.number {
width: 70px
}
.table-values th {
background: #686868;
color: #FFF;
font-weight: bold;
}
#jsonstrta {
font-family: monospace;
}
.table-values tr:nth-child(even) {
background: #d0d0d0;
}
</style>
<script type="text/javascript">
systemDictionary = {
"SystemInfo adapter settings": {
"de": "SystemInfo Adapter Einstellungen"
},
"Settings": {
"de": "Einstellungen"
},
"Poll switches every x seconds (0 = no polling)": {
"de": "Abfrage der Schalter alle x Sekunden"
},
"Startup commands": {
"de": "Kommandos die auf Betriebssystem-Ebene beim Start des Adapters ausgeführt werden:"
},
"On save adapter restarts with new config immediately": {
"de": "Beim Speichern von Einstellungen wird der Adapter sofort neu gestartet."
},
"SceneDescription": {
de: "Szenen können aus gelernten States, Szenen, Sender.CODE_xxx oder einer Verzögerung in Millisekunden bestehen.",
en: "Scene can consist of learned states, scenes or Sender.CODE_xxx or a time delay in ms!"
},
"Scene setup": {
"de": "Szenen-Definition:"
},
"Name": {
de: "Objektname(n)",
en: "Object name(s)"
},
"stname": {
de: "Name des States",
en: "State Name"
},
"on": {
de: "Ein-Signale",
en: "On-signals"
},
"off": {
de: "Aus-Signale",
en: "Off-signals"
},
"Switch setup": {
de: "States die mit gelernten Daten oder Sequenzen Ein/Aus geschaltet werden. Kann eine Liste mit ',' getrennt sein wo das 1. signal gesendet wird aber alle schalten",
en: "States which will be switched on/off with learned states or sequences. THey can be lists where the first will be sent but the others will switch as well!"
},
"scene": {
de: "Szene, Kommandos mit ',' getrennt",
en: "Scene, this are commands separated with ','"
},
};
// the function loadSettings has to exist ...
function load(settings, onChange) {
if (!settings) return;
document.getElementById('fileJsonInput').addEventListener('change', handleFileRead, false);
$('.value').each(function () {
var key = $(this).attr('id');
var $key = $('#' + key + '.value');
if ($key.attr('type') === 'checkbox') {
$key.prop('checked', settings[key]).change(function () {
onChange();
});
} else {
$key.val(settings[key]).change(function () {
onChange();
}).keyup(function () {
onChange();
});
}
});
getExtendableInstances(function (result) {
if (result) {
var text = '';
for (var r = 0; r < result.length; r++) {
var name = result[r]._id.substring('system.adapter.'.length);
text += '<option value="' + name + '" ' + (settings.webInstance === name ? 'selected' : '') +
'>' + name + '</option>';
}
$('#webInstance').append(text);
}
});
onChange(false);
// if (typeof values2table === 'function') {
// values2table('scenes', settings.scenes, onChange);
// values2table('switches', settings.switches, onChange);
// } else {
_values2table('items', settings.items, onChange);
// _values2table('switches', settings.switches, onChange);
// }
}
function _table2values(id) {
var $div;
if (!id) {
$div = $('body');
} else {
$div = $('#' + id);
}
var names = [];
$div.find('.table-values th').each(function () {
var name = $(this).data('name');
if (name) {
names.push(name);
} else {
names.push('___ignore___');
}
});
var values = [];
var j = 0;
$div.find('.table-lines tr').each(function () {
values[j] = {};
$(this).find('td').each(function () {
var $input = $(this).find('input, select');
if ($input.length) {
var name = $input.data('name');
if ($input.attr('type') === 'checkbox') {
values[j][name] = $input.prop('checked');
} else {
values[j][name] = $input.val();
}
}
});
j++;
});
return values;
}
function _values2table(id, values, onChange) {
if (typeof values === 'function') {
onChange = values;
values = id;
id = '';
}
var names = [];
var $div, mid;
if (!id) {
$div = $('body');
} else {
mid = id;
$div = $('#' + id);
}
var $add = $div.find('.table-button-add');
if (!$add.data('inited')) {
$add.data('inited', true);
$add.button({
icons: {
primary: 'ui-icon-plus'
},
text: false
})
.css({
width: '1em',
height: '1em'
})
.click(function () {
var values = $div.find('.table-values').data('values');
var obj = {};
for (var i = 0; i < names.length; i++) {
if (!names[i]) continue;
obj[names[i].name] = names[i].def;
}
values.push(obj);
setTimeout(function () {
_values2table(id, values, onChange);
}, 100);
});
}
if (values) {
var buttons = [];
var $table = $div.find('.table-values');
$table.data('values', values);
// load rooms
if (!$table.data('rooms') && $table.find('th[data-name="room"]').length) {
getEnums('rooms', function (err, list) {
var result = {};
result[_('none')] = '';
var nnames = [];
for (var n in list) {
nnames.push(n);
}
nnames.sort(function (a, b) {
a = a.toLowerCase();
b = b.toLowerCase();
if (a > b) return 1;
if (a < b) return -1;
return 0;
});
for (var l = 0; l < nnames.length; l++) {
result[nnames[l]] = list[nnames[l]].common.name || l;
}
$table.data('rooms', result);
_values2table(id, values, onChange);
});
return;
}
$table.find('th').each(function () {
var name = $(this).data('name');
if (name) {
var obj = {
name: name,
type: $(this).data('type') || 'text',
def: $(this).data('default')
};
if (obj.type === 'checkbox') {
if (obj.def === 'false') obj.def = false;
if (obj.def === 'true') obj.def = true;
obj.def = !!obj.def;
} else if (obj.type === 'select') {
var vals = ($(this).data('options') || '').split(';');
obj.options = {};
for (var v = 0; v < vals.length; v++) {
var parts = vals[v].split('/');
obj.options[parts[0]] = parts[1] || parts[0];
}
} else {
obj.def = obj.def || '';
}
names.push(obj);
} else {
names.push(null);
}
name = $(this).data('buttons');
if (name) {
var bs = name.split(' ');
buttons.push(bs);
} else {
buttons.push(null);
}
});
var text = '';
for (var v = 0; v < values.length; v++) {
text += '<tr>';
for (var i = 0; i < names.length; i++) {
text += '<td>';
if (names[i]) {
var val = values[v],
nam = names[i];
valnam = val[nam.name];
if (valnam)
valnam = valnam.replace(/\"/g, '"');
else valnam = '';
if (nam.type === 'checkbox') {
text += '<input class="values-input" type="checkbox" data-index="' + v + '" data-name="' +
nam.name + '" ' + (valnam ? 'checked' : '') + '" data-old-value="' + valnam + '"/>';
} else if (nam.type === 'select') {
text += '<select class="values-input" data-index="' + v + '" data-name="' + nam.name + '" data-old-value="' +
valnam + '">';
var options;
if (nam.name === 'room') {
options = $table.data('rooms');
} else {
options = nam.options;
}
for (var p in options) {
text += '<option value="' + p + '" ' + (p === valnam ? ' selected' : '') + '>' + options[p] + '</option>';
}
text += '</select>';
} else {
text += '<input class="values-input" style="width: 100%" type="' + nam.type +
'" data-index="' + v + '" data-name="' + nam.name + '" value="' +
valnam + '" data-old-value="' + valnam + '"/>';
}
}
if (buttons[i]) {
for (var b = 0; b < buttons[i].length; b++) {
if ((!v && buttons[i][b] === 'up') || v === values.length - 1 && buttons[i][b] === 'down') {
text += '<button data-command="' + buttons[i][b] +
'" class="values-buttons" disabled> </button>';
continue;
}
text += '<button data-index="' + v + '" data-command="' + buttons[i][b] +
'" class="values-buttons"></button>';
}
}
text += '</td>';
}
text += '</tr>';
}
var $lines = $div.find('.table-lines');
if (!$lines.length) {
$table.append('<tbody class="table-lines"></tbody>');
$lines = $div.find('.table-lines');
}
$lines.html(text);
$lines.find('.values-buttons').each(function () {
var command = $(this).data('command');
if (command === 'delete') {
$(this).button({
icons: {
primary: 'ui-icon-trash'
},
text: false
})
.css({
width: '1em',
height: '1em'
})
.click(function () {
var id = $(this).data('index');
values.splice(id, 1);
onChange();
setTimeout(function () {
_values2table(mid ? mid : id, values, onChange);
}, 100);
});
} else if (command === 'up') {
$(this).button({
icons: {
primary: 'ui-icon-triangle-1-n'
},
text: false
})
.css({
width: '1em',
height: '1em'
})
.click(function () {
var id = $(this).data('index');
var elem = values[id];
values.splice(id, 1);
values.splice(id - 1, 0, elem);
onChange();
setTimeout(function () {
_values2table(mid ? mid : id, values, onChange);
}, 100);
});
} else if (command === 'down') {
$(this).button({
icons: {
primary: 'ui-icon-triangle-1-s'
},
text: false
})
.css({
width: '1em',
height: '1em'
})
.click(function () {
var id = $(this).data('index');
var elem = values[id];
values.splice(id, 1);
values.splice(id + 1, 0, elem);
onChange();
setTimeout(function () {
_values2table(mid ? mid : id, values, onChange);
}, 100);
});
}
});
$lines.find('.values-input').change(function () {
if ($(this).attr('type') === 'checkbox') {
if ($(this).prop('checked').toString() !== $(this).data('old-value')) onChange();
values[$(this).data('index')][$(this).data('name')] = $(this).prop('checked');
} else {
if ($(this).val() !== $(this).data('old-value')) onChange();
values[$(this).data('index')][$(this).data('name')] = $(this).val();
}
}).keyup(function () {
$(this).trigger('change');
});
}
}
function makeobj() {
var obj = {};
$('.value').each(function () {
var $this = $(this);
if ($this.attr('type') === 'checkbox') {
obj[$this.attr('id')] = $this.prop('checked');
} else if ($this.attr('id') != "jsonstrta") {
obj[$this.attr('id')] = $this.val();
}
});
obj.items = _table2values('items');
return obj;
}
function save(callback) {
// example: select elements with class=value and build settings object
// var obj = makeobj();
// obj.items = /* (typeof table2values === 'function') ? table2values('scenes') : */
// obj.switches = /* (typeof table2values === 'function') ? table2values('switches') : */ _table2values('switches');
callback(makeobj());
}
function configtojson() {
var obj = makeobj();
obj.converted = (new Date()).toString();
var str = JSON.stringify(obj, null, ' ');
document.getElementById('jsonstrta').value = str;
createDownloadLink("#exportFile", str, 'systeminfo.json');
return str;
}
function createDownloadLink(anchorSelector, str, fileName) {
if (window.navigator.msSaveOrOpenBlob) {
var fileData = [str];
blobObject = new Blob(fileData);
$(anchorSelector).click(function () {
window.navigator.msSaveOrOpenBlob(blobObject, fileName);
});
} else {
var url = "data:text/javascript;charset=utf-8," + encodeURIComponent(str);
$(anchorSelector).attr("download", fileName);
$(anchorSelector).attr("href", url);
}
}
function handleFileRead(evt) {
var reader = new FileReader();
reader.onerror = function (evt) {
switch (evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert('File Not Found!');
break;
case evt.target.error.NOT_READABLE_ERR:
alert('File is not readable');
break;
case evt.target.error.ABORT_ERR:
alert('File read cancelled');
break; // noop
default:
alert('An error occurred reading this file.');
};
};
reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE)
document.getElementById('jsonstrta').value = evt.target.result;
};
// Read in the image file as a binary string.
reader.readAsText(evt.target.files[0]);
}
// var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
// document.getElementById('jsonstrta').value = evt.target.fileInput;
// }
function loadConfigFromText() {
var str = document.getElementById('jsonstrta').value;
var obj;
try {
obj = JSON.parse(str);
} catch (e) {
obj = null;
};
if (obj && obj.converted)
delete obj.converted;
if (obj) {
load(obj, function () {
return null
});
} else alert('json not valid or no data!');
}
</script>
<div id="adapter-container">
<div id="startup" style="width: 100%; height: 12%">
<table>
<tr>
<td>
<img src="systeminfo.png" alt="SystemInfo" height="30" width="30" />
</td>
<td style="padding-top: 20px;padding-left: 10px" width="30%">
<h3 class="translate">SystemInfo adapter settings</h3>
</td>
<td width="2%"></td>
<td width="67%">
<p>
<br>
<span class="translate">Startup commands</span>
<br>
<textarea class="value" id="startup" style="width:50%;height:75px"></textarea>
</p>
</td>
</tr>
</table>
</div>
<div id="items" style="width: 100%; height: calc(76% - 40px)">
<button class="table-button-add" style="margin-left: 10px; width: 1.5em; height: 1.5em"></button>
<span class="translate">Items setup</span>
<div style="width: 100%; height: calc(100% - 30px); overflow: auto;">
<table class="table-values" style="width: 100%;">
<thead>
<tr>
<th data-name="name" style="width: 15%" class="translate">Name(s)</th>
<th data-name="type" data-type="select" data-options="exec;file;web;info" style="width: 5%" class="translate">Type</th>
<th data-name="source" style="width: 16%" class="translate">Source</th>
<th data-name="regexp" style="width: 19%" class="translate">RegExp/Filter</th>
<th data-name="conv" style="width: 10%" class="translate">Convert</th>
<th data-name="role" style="width: 10%" class="translate">Role/Type</th>
<th data-name="write" style="width: 13%" class="translate">WriteCommand</th>
<th data-name="sched" style="width: 10%" class="translate">Schedule</th>
<!--<th data-name="poll" data-type="select" data-options="normal;fast;slow" style="width: 5%" class="translate">Poll</th>
-->
<th data-buttons="delete" style="width: 2%"></th>
</tr>
</thead>
</table>
</div>
</div>
<div id="save" style="width: 100%; height: 12%">
<p>
<span class="translate">On save adapter restarts with new config immediately</span>
<span class="translate">Save/load config</span>
<button id="jsonString" style="margin-left: 10px;" onclick="configtojson();">Create Json text</button>
<a id="exportFile" class="myButton" download="" href="#">Create Json and download file</a>
Load File: <input type="file" id="fileJsonInput" name="fileInput" />
<button id="textJson" style="margin-left: 10px;" onclick="loadConfigFromText();">Use Config from textBox</button>
<br>
<textarea class="value" id="jsonstrta" style="width:80%;height:80px"></textarea>
</p>
</div>
</div>
</html>