iobroker.wolf
Version:
Wolf Heating over ISM8i
498 lines (472 loc) • 23.4 kB
HTML
<html>
<head>
<!-- Materialze style -->
<link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.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="../../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>
<style>
.device-img {
width: 100px;
}
.iob-values .input-field {
margin-bottom: 5px;
margin-top: 0;
}
.iob-values .number {
margin-top: 11px;
font-size: 16px;
}
.iob-values .row {
margin-bottom: 0;
}
.iob-values .checkbox {
margin-top: 10px;
}
</style>
<script type="text/javascript">
// the function loadSettings has to exist ...
function load(settings, onChange) {
if (!settings) return;
// Fix wrong config from before 12.12.2022
if (settings.devices.mm11_t) {
settings.devices.mm1_t = settings.devices.mm11_t;
delete settings.devices.mm11_t;
}
if (settings.names.mm11_n) {
settings.names.mm1_n = settings.names.mm11_n;
delete settings.names.mm11_n;
}
if (settings.devices.mm12_t) {
settings.devices.mm2_t = settings.devices.mm12_t;
delete settings.devices.mm12_t;
}
if (settings.names.mm12_n) {
settings.names.mm2_n = settings.names.mm12_n;
delete settings.names.mm12_n;
}
if (settings.devices.mm13_t) {
settings.devices.mm3_t = settings.devices.mm13_t;
delete settings.devices.mm13_t;
}
if (settings.names.mm13_n) {
settings.names.mm3_n = settings.names.mm13_n;
delete settings.names.mm13_n;
}
getIPs(function(ips) {
for (var i = 0; i < ips.length; i++) {
$('#bind').append('<option value="' + ips[i].address + '">' + ips[i].name + '</option>');
}
$('#bind.value').val(settings.bind).on('change', () => onChange()).select();
});
$('#port').val(settings.port).on('change', () => onChange()).on('keyup', () => onChange());
$('#polling_interval').val(settings.polling_interval).on('change', () => onChange()).on('keyup', () => onChange());
// bool_status
$('#bool_status').prop('checked', settings.bool_status).on('change', () => onChange());
// bool_bar
$('#bool_bar').prop('checked', settings.bool_bar).on('change', () => onChange());
// auto checkboxes
$('.auto').each(function () {
var $this = $(this);
var id = $this.attr('id');
var auto = settings.devices[id] === 'Auto';
$this.prop('checked', auto).on('change', () => {
var $this = $(this);
var id = $this.attr('id');
var auto = $this.prop('checked');
$('span[for="' + id + '"]').text(auto ? _('Auto') : _('off'));
onChange();
});
$('span[for="' + id + '"]').text(auto ? _('Auto') : _('off'));
});
$('.name').each(function () {
var $this = $(this);
$this.val(settings.names[$this.attr('id')]).on('change', () => onChange()).on('keyup', () => onChange());
});
onChange(false);
M && M.updateTextFields();
}
function save(callback) {
var obj = {
devices: {},
names: {},
bool_status: $('#bool_status').prop('checked'),
bool_bar: $('#bool_bar').prop('checked'),
port: $('#port').val(),
bind: $('#bind').val(),
polling_interval: $('#polling_interval').val()
};
$('.auto').each(function () {
var $this = $(this);
obj.devices[$this.attr('id')] = $this.prop('checked') ? 'Auto' : 'off';
});
$('.name').each(function () {
var $this = $(this);
obj.names[$this.attr('id')] = $this.val();
});
if (obj.devices.bm1_t === 'Auto' || obj.devices.bm2_t === 'Auto' || obj.devices.bm3_t === 'Auto' || obj.devices.bm4_t === 'Auto') {
obj.devices['bm0_t'] = 'Auto';
} else {
obj.devices['bm0_t'] = 'off';
}
callback(obj);
}
</script>
</head>
<body>
<div class="m adapter-container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s2"><a href="#tab-connection" class="translate">Connection</a></li>
<li class="tab col s2"><a href="#tab-devices" class="translate">Devices</a></li>
</ul>
</div>
<div id="tab-connection" class="col s12 page">
<div class="row">
<div class="col s12 m4 l2">
<img src="wolf.png" class="logo">
</div>
</div>
<div class="row">
<div class="input-field col s12 m6 l4" id="_bind">
<select class="value" id="bind"></select>
<label class="translate" for="bind">Adapter IP:</label>
</div>
<div class="input-field col s12 m2 l1">
<input class="value" id="port" type="number" min="1" max="65565" value="12004"/>
<label class="translate" for="port">Port:</label>
</div>
</div>
<div class="row">
<div class="col s12 m4">
<span class="translate">IP Hint</span>
</div>
</div>
<div class="row">
<div class="input-field col s12 m4">
<input class="value" id="bool_status" type="checkbox"/>
<span class="translate" for="bool_status">Status as Bool</span>
</div>
<div class="input-field col s12 m4">
<input class="value" id="bool_bar" type="checkbox"/>
<span class="translate" for="bool_bar">Pressure in bar</span>
</div>
</div>
<div class="row">
<div class="input-field col s12 m4">
<input class="value" id="polling_interval" type="number" min="0" max="65565" value="0"/>
<span class="translate" for="polling_interval">Polling Interval</span>
</div>
</div>
</div>
<div id="tab-devices" class="col s12 page">
<!----------------------- HEATERS ------------------------->
<div class="col s12">
<div class="row">
<div class="col s12">
<h5 class="translate" >Heaters</h5>
</div>
</div>
<div class="row">
<div class="col s2 m1">
<img src="image/heating.png" class="device-img" alt="heating" style="margin-top: 30px;"/>
</div>
<div class="col s10 m6 iob-values">
<div class="row">
<div class="col s12">
<div class="col s1 number">1.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="hg1_t" type="checkbox"/>
<span class="translate" for="hg1_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="hg1_n" type="text"/>
<label class="translate" for="hg1_n">Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="col s1 number">2.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="hg2_t" type="checkbox"/>
<span class="translate" for="hg2_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="hg2_n" type="text"/>
<label class="translate" for="hg2_n">Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="col s1 number">3.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="hg3_t" type="checkbox"/>
<span class="translate" for="hg3_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="hg3_n" type="text"/>
<label class="translate" for="hg3_n">Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="col s1 number">4.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="hg4_t" type="checkbox"/>
<span class="translate" for="hg4_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="hg4_n" type="text"/>
<label class="translate" for="hg4_n">Name</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------- Operating modules ------------------------->
<div class="col s12">
<div class="row">
<div class="col s12">
<h5 class="translate">Operating modules</h5>
</div>
</div>
<div class="row">
<div class="col s2 m1">
<img src="image/bm2.png" class="device-img" alt="heating" style="margin-top: 70px;"/>
</div>
<div class="col s10 m6 iob-values">
<div class="row">
<div class="col s12">
<div class="col s1 number">1.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="bm1_t" type="checkbox"/>
<span class="translate" for="bm1_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="bm1_n" type="text"/>
<label class="translate" for="bm1_n">Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="col s1 number">2.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="bm2_t" type="checkbox"/>
<span class="translate" for="bm2_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="bm2_n" type="text"/>
<label class="translate" for="bm2_n">Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="col s1 number">3.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="bm3_t" type="checkbox"/>
<span class="translate" for="bm3_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="bm3_n" type="text"/>
<label class="translate" for="bm3_n">Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="col s1 number">4.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="bm4_t" type="checkbox"/>
<span class="translate" for="bm4_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="bm4_n" type="text"/>
<label class="translate" for="bm4_n">Name</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------- Mixing modules ------------------------->
<div class="col s12">
<div class="row">
<div class="col s12">
<h5 class="translate">Mixing modules</h5>
</div>
</div>
<div class="row">
<div class="col s2 m1">
<img src="image/uni.png" class="device-img" alt="heating" style="margin-top: 30px;"/>
</div>
<div class="col s10 m6 iob-values">
<div class="row">
<div class="col s12">
<div class="col s1 number">1.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="mm1_t" type="checkbox"/>
<span class="translate" for="mm1_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="mm1_n" type="text"/>
<label class="translate" for="mm1_n">Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="col s1 number">2.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="mm2_t" type="checkbox"/>
<span class="translate" for="mm2_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="mm2_n" type="text"/>
<label class="translate" for="mm2_n">Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="col s1 number">3.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="mm3_t" type="checkbox"/>
<span class="translate" for="mm3_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="mm3_n" type="text"/>
<label class="translate" for="mm3_n">Name</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------- Cascade modules ------------------------->
<div class="col s12">
<div class="row">
<div class="col s12">
<h5 class="translate">Cascade modules</h5>
</div>
</div>
<div class="row">
<div class="col s2 m1">
<img src="image/uni.png" class="device-img" alt="heating"/>
</div>
<div class="col s10 m6 iob-values" style="margin-top: 30px;">
<div class="row">
<div class="col s12">
<div class="col s1 number">1.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="km1_t" type="checkbox"/>
<span class="translate" for="km1_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="km1_n" type="text"/>
<label class="translate" for="km1_n">Name</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------- Solar cells ------------------------->
<div class="col s12">
<div class="row">
<div class="col s12">
<h5 class="translate">Solar cells</h5>
</div>
</div>
<div class="row">
<div class="col s2 m1">
<img src="image/uni.png" class="device-img" alt="heating"/>
</div>
<div class="col s10 m6 iob-values" style="margin-top: 30px;">
<div class="row">
<div class="col s12">
<div class="col s1 number">1.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="sm1_t" type="checkbox"/>
<span class="translate" for="sm1_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="sm1_n" type="text"/>
<label class="translate" for="sm1_n">Name</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------- Comfort domestic ventilation system ------------------------->
<div class="col s12">
<div class="row">
<div class="col s12">
<h5 class="translate">Comfort domestic ventilation system</h5>
</div>
</div>
<div class="row">
<div class="col s2 m1">
<img src="image/cwl.png" class="device-img" alt="heating"/>
</div>
<div class="col s10 m6 iob-values" style="margin-top: 30px;">
<div class="row">
<div class="col s12">
<div class="col s1 number">1.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="cwl_t" type="checkbox"/>
<span class="translate" for="cwl_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="cwl_n" type="text"/>
<label class="translate" for="cwl_n">Name</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------- Comfort domestic ventilation system ------------------------->
<div class="col s12">
<div class="row">
<div class="col s12">
<h5 class="translate">Split air/water heat pump</h5>
</div>
</div>
<div class="row">
<div class="col s2 m1">
<img src="image/heating.png" class="device-img" alt="heating"/>
</div>
<div class="col s10 m6 iob-values" style="margin-top: 50px;">
<div class="row">
<div class="col s12">
<div class="col s1 number">1.</div>
<div class="input-field col s1 m2 checkbox">
<input class="auto" id="hg0_t" type="checkbox"/>
<span class="translate" for="hg0_t">Auto</span>
</div>
<div class="input-field col s4">
<input class="name" id="hg0_n" type="text"/>
<label class="translate" for="hg0_n">Name</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>