iobroker.viessmann
Version:
Connect a viessmann heating system over vcontrold
346 lines (315 loc) • 12.9 kB
HTML
<html>
<head>
<!-- these 4 files always have to be included -->
<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="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="../../socket.io/socket.io.js"></script>
<!-- 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>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="words.js"></script>
<!-- you have to define 2 functions in the global scope: -->
<script type="text/javascript">
let datapoints = {};
// the function loadSettings has to exist ...
function load(settings, onChange) {
if (!settings) return;
datapoints = settings.datapoints || {};
write();
$('.modal').modal();
$('#get_table').tablesorter();
$('#set_table').tablesorter();
$('.getSelect').change(function (e) {
datapoints.gets[$($(this)[0]).attr('id')].polling = $($(this)[0]).val();
onChange();
});
$('.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', () => onChange())
;
} else {
// do not call onChange direct, because onChange could expect some arguments
$key.val(settings[id])
.on('change', () => onChange())
.on('keyup', () => onChange())
;
}
});
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
let obj = {};
$('.value').each(function() {
let $this = $(this);
if ($this.attr('type') == 'checkbox') {
obj[$this.attr('id')] = $this.prop('checked');
} else {
obj[$this.attr('id')] = $this.val();
}
});
obj.datapoints = datapoints;
callback(obj);
}
//*******************************************************
function getPollSelect(name, act) {
let sel = '<select id="' + name + '" class="getSelect">' +
'<option ' + (act == -1 ? 'selected="selected"' : '') + 'value="-1">------</option>' +
'<option ' + (act == 2 ? 'selected="selected"' : '') + 'value="2">' + _('opt2') + '</option>' +
'<option ' + (act == 10 ? 'selected="selected"' : '') + 'value="10">' + _('opt10') + '</option>' +
'<option ' + (act == 30 ? 'selected="selected"' : '') + 'value="30">' + _('opt30') + '</option>' +
'<option ' + (act == 60 ? 'selected="selected"' : '') + 'value="60">' + _('opt60') + '</option>' +
'<option ' + (act == 120 ? 'selected="selected"' : '') + 'value="120">' + _('opt120') + '</option>' +
'<option ' + (act == 300 ? 'selected="selected"' : '') + 'value="300">' + _('opt300') + '</option>' +
'<option ' + (act == 600 ? 'selected="selected"' : '') + 'value="600">' + _('opt600') + '</option>' +
'<option ' + (act == 900 ? 'selected="selected"' : '') + 'value="900">' + _('opt900') + '</option>' +
'<option ' + (act == 1800 ? 'selected="selected"' : '') + 'value="1800">' + _('opt1800') + '</option>' +
'<option ' + (act == 2700 ? 'selected="selected"' : '') + 'value="2700">' + _('opt2700') + '</option>' +
'<option ' + (act == 3600 ? 'selected="selected"' : '') + 'value="3600">' + _('opt3600') + '</option>' +
'<option ' + (act == 7200 ? 'selected="selected"' : '') + 'value="7200">' + _('opt7200') + '</option>' +
'<option ' + (act == 21600 ? 'selected="selected"' : '') + 'value="21600">' + _('opt21600') + '</option>' +
'<option ' + (act == 43200 ? 'selected="selected"' : '') + 'value="43200">' + _('opt43200') + '</option>' +
'<option ' + (act == 86400 ? 'selected="selected"' : '') + 'value="86400">' + _('opt86400') + '</option>' +
'</select>';
return sel;
}
function write() {
try {
$('#plant_id').empty();
$('#typ').empty();
$('#protocol').empty();
$('#commands_get').empty();
$('#commands_set').empty();
$('#plant_id').append(datapoints.system["-ID"]);
$('#typ').append(datapoints.system["-name"]);
$('#protocol').append(datapoints.system["-protocol"]);
for (let i in datapoints.gets) {
const name_g = datapoints.gets[i].name;
const desc_g = datapoints.gets[i].description;
const unit_g = datapoints.gets[i].unit;
const poll_g = datapoints.gets[i].polling;
let tr = $('<tr>');
let tds = $('<td>' + name_g + '</td><td>' + desc_g + '</td><td>' + unit_g + '</td><td>' + getPollSelect(name_g, poll_g) + '</td>');
tr.append(tds);
$('#commands_get').append(tr);
$('#'+name_g).select();
}
for (let i in datapoints.sets) {
const name_s = datapoints.sets[i].name;
const desc_s = datapoints.sets[i].description;
let tr_s = $('<tr>');
let tds_s = $('<td>' + name_s + '</td><td>' + desc_s + '</td>');
tr_s.append(tds_s);
$('#commands_set').append(tr_s);
}
}
catch (e) {
//alert(`Falsche config ${e}`)
$('#plant_id').append('-----');
$('#typ').append('-----');
$('#protocol').append('-----');
$('#commands_get').empty();
$('#commands_set').empty();
}
}
</script>
</head>
<body>
<!-- you have to put your config page in a div with id adapter-container -->
<div class="m adapter-container">
<!-- Modal Structure -->
<div id="modalinfo" class="modal">
<div class="modal-content">
<div class="row">
<div class="col s6">
<div class="right">
<p class="translate">plant_id</p>
</div>
</div>
<div class="col s6">
<div class="left">
<p><b id="plant_id"></b></p>
</div>
</div>
<div class="col s6">
<div class="right">
<p class="translate">typ</p>
</div>
</div>
<div class="col s6">
<div class="left">
<p><b id="typ"></b></p>
</div>
</div>
<div class="col s6">
<div class="right">
<p class="translate">protocol</p>
</div>
</div>
<div class="col s6">
<div class="left">
<p><b id="protocol"></b></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-blue btn-flat">close</a>
</div>
</div>
<!-- ============= HEADER WITH LOGO AND BUTTONS ============= -->
<div id="header-area" class="row" >
<div id="header-logo-title" class="col s6" >
<img class="logo" src="viessmann.png" >
<p>
<span class="h-title">Viessmann</span><br />
<span class="h-sub-title">Connection over vcontrold...</p>
</p>
</div>
</div>
<!-- ============= MAIN SECTION ============= -->
<div class="row">
<div class="col s12" style="padding-left:0;padding-right:0; margin-top: 0px; margin-bottom: 1px; background-color:#174475; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);">
<ul class="tabs blue lighten-4">
<li class="tab col s3"><a href="#tab_g" class="translate">General</a></li>
<li class="tab col s3"><a href="#tab_get" class="translate">Gets</a></li>
<li class="tab col s3"><a href="#tab_set" class="translate">Sets</a></li>
<li class="tab col s3"><a href="#tab_ssh" class="translate">SSH</a></li>
</ul>
</div>
<div id="tab_g" class="col s12 page">
<div class="row">
<div class="col s12 m2">
<form action="https://www.paypal.com/donate" method="post" target="_top">
<input type="hidden" name="hosted_button_id" value="BXTYTYW3D5MRU" />
<input type="image" src="https://www.paypalobjects.com/de_DE/DE/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
<img alt="" border="0" src="https://www.paypal.com/de_DE/i/scr/pixel.gif" width="1" height="1" />
</form>
</div>
<div class="col s12 m8">
<p class=" left translate">donat</p>
</div>
</div>
<div class="row">
<div class="col s12">
<!-- Modal Trigger -->
<a class="spaceTop3em waves-effect waves-light btn modal-trigger translate" href="#modalinfo">System informations</a>
</div>
</div>
<div class="row">
<div class="col s12">
<div><h5 class="translate">options</h5></div>
</div>
</div>
<div class="row">
<div class="col s12">
<input type="checkbox" id="answer" class="value" /><label for="answer" class="translate">answer</label>
</div>
<div class="col s12">
<input type="checkbox" id="states_only" class="value" /><label for="states_only" class="translate">states_only</label>
</div>
</div>
<div class="row">
<div class="col s6 m4 l2">
<input type="checkbox" id="errors" class="value" /><label for="errors" class="translate">errors</label>
</div>
<div class="col s16 m4 l2">
<input id="reconnect" type="text" class="timepicker value">
<label for="reconnect" class="translate">reconnect</label>
</div>
</div>
<div class="row">
<div class="col s12">
<input type="checkbox" id="new_read" class="value" /><label for="new_read" class="read_red translate">new_read</label>
</div>
</div>
</div>
<div id="tab_get" class="col s12 page" >
<div class="row">
<div class="col s12">
<div><h5 class="translate">getvito</h5></div>
</div>
</div>
<div><p class="blue-text text-darken-2 translate">sort</p></div>
<table id="get_table" class="bordered">
<thead>
<tr>
<th class="header translate">name</th>
<th class="header translate">desc</th>
<th class="header translate">unit</th>
<th class="header translate">polling</th>
</tr>
</thead>
<tbody id="commands_get"></tbody>
</table>
</div>
<div id="tab_set" class="col s12 page">
<div class="row">
<div class="col s12">
<div><h5 class="translate">setvito</h5></div>
</div>
</div>
<div><p class="blue-text text-darken-2 translate">sort</p></div>
<table id="set_table" class="bordered">
<thead>
<tr>
<th class="header translate">name</th>
<th class="header translate">desc</th>
</tr>
</thead>
<tbody id="commands_set"></tbody>
</table>
</div>
<div id="tab_ssh" class="col s12 page">
<div class="center-align">
<div class="row">
<div class="col s12">
<div><h5 class="translate">SSH_settings</h5></div>
</div>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12 m4 l2">
<input placeholder="192.168.2.11" id="ip" type="text" class="value">
<label for="ip" class="translate active">ip desc</label>
</div>
<div class="input-field col s12 m4 l2">
<input placeholder="3002" id="port" type="text" class="value">
<label for="port" class="translate active">port desc</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m4 l2">
<input placeholder="Placeholder" id="user_name" type="text" class="value validate">
<label for="user_name" class="translate active">user_name</label>
</div>
<div class="input-field col s12 m4 l2">
<input id="password" type="password" class="value validate">
<label for="password" class="translate active">password</label>
</div>
</div>
<div class="row center-align">
<div class="input-field col s12 m4 l2">
<input placeholder="/etc/vcontrold/vito.xml" id="path" type="text" class="value">
<label for="path" class="translate active">path</label>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>