iobroker.netatmo-energy
Version:
Get and set data using Netatmo Energy API
457 lines (416 loc) • 16.7 kB
HTML
<html>
<head>
<!-- Load ioBroker scripts and styles-->
<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>
<!-- Load our own files -->
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="words.js"></script>
<script type="text/javascript">
// This will be called by the admin adapter when the settings page loads
function load(settings, onChange) {
// example: select elements with id=key and class=value and insert value
$('.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]).change(function() {
showHideSettings();
onChange();
});
} else {
var value = settings[id];
// do not call onChange direct, because onChange could expect some arguments
$key.val(value).change(function() {
onChange();
}).keyup(function() {
onChange();
});
}
});
showHideSettings();
onChange(false);
M.updateTextFields();
getAdapterInstances('telegram', function (instances) {
fillInstances('telegramInstance', instances, settings['telegramInstance']);
});
getAdapterInstances('signal-cmb', function (instances) {
fillInstances('signalInstance', instances, settings['signalInstance']);
});
getAdapterInstances('whatsapp-cmb', function (instances) {
fillInstances('whatsappInstance', instances, settings['whatsappInstance']);
});
getAdapterInstances('email', function (instances) {
fillInstances('emailInstance', instances, settings['emailInstance']);
});
getAdapterInstances('pushover', function (instances) {
fillInstances('pushoverInstance', instances, settings['pushoverInstance']);
});
sendTo(null, 'getTelegramUser', { config: { instance: settings.telegramInstance } }, function (obj) {
fillTelegramUser(obj, settings['telegramUser'])
});
}
function fillTelegramUser(TelegramUserList, val) {
if (TelegramUserList) {
var $sel = $('#telegramUser');
var firstentry = true;
TelegramUserList.forEach((user) => {
let UserLine = '<option value="' + user.value + '"' + (user.value === val ? ' selected' : '') + '>' + user.label + '</option>';
if (firstentry === true) {
$sel.html(UserLine);
firstentry = false;
} else {
$sel.append(UserLine);
}
});
if (firstentry === true) {
$sel.html('<option value="allTelegramUsers">All Receiver</option>');
}
$sel.select();
}
}
function fillInstances(id, arr, val) {
var $sel = $('#' + id);
$sel.html('<option value="">' + _('none') + '</option>');
for (var i = 0; i < arr.length; i++) {
var _id = arr[i]._id.replace('system.adapter.', '');
// Take first value
// if (!val) val = _id;
$sel.append('<option value="' + _id + '"' + (_id === val ? ' selected' : '') + '>' + _id + '</option>');
}
$sel.select();
}
// This will be called by the admin adapter when the user presses the save button
function save(callback) {
// example: select elements with class=value and build settings object
var obj = {};
$('.value').each(function () {
var $this = $(this);
var id = $this.attr('id');
if ($this.attr('type') === 'checkbox') {
obj[id] = $this.prop('checked');
} else {
var value = $this.val();
obj[id] = value;
}
});
callback(obj);
}
function showHideSettings() {
$('#notificationsType').on('change', function () {
if ($(this).val() === 'telegram') {
$('.email').hide();
$('.pushover').hide();
$('.telegram').show();
$('.whatsapp').hide();
$('.signal').hide();
} else if ($(this).val() === 'email') {
$('.email').show();
$('.telegram').hide();
$('.pushover').hide();
$('.whatsapp').hide();
$('.signal').hide();
} else if ($(this).val() === 'pushover') {
$('.pushover').show();
$('.telegram').hide();
$('.email').hide();
$('.whatsapp').hide();
$('.signal').hide();
} else if ($(this).val() === 'whatsapp-cmb') {
$('.whatsapp').show();
$('.telegram').hide();
$('.email').hide();
$('.pushover').hide();
$('.signal').hide();
} else if ($(this).val() === 'signal-cmb') {
$('.whatsapp').hide();
$('.telegram').hide();
$('.email').hide();
$('.pushover').hide();
$('.signal').show();
}
}).trigger('change');
$('#telegramInstance').on('change', function () {
sendTo(null, 'getTelegramUser', { config: { instance: $(this).val() } }, function (obj) {
fillTelegramUser(obj, $('#telegramUser').val)
});
}).trigger('change');
if ($('#notificationEnabled').prop('checked')) {
$('.tabNotification').show();
$('.tabSubscribes').show();
} else {
$('.tabNotification').hide();
$('.tabSubscribes').hide();
}
}
</script>
</head>
<body>
<div class="m adapter-container">
<div class="row">
<div class="row">
<div class="input-field col s3">
<img src="netatmo-energy.png" class="logo">
</div>
</div>
<div class="row">
<div class="col s12">
<ul class="tabs" id="netatmoTabs">
<li class="tab col tabLogon"><a href="#tabLogon" class="translate active">Logon information</a></li>
<li class="tab col tabAPI"><a href="#tabAPI" class="translate">API settings</a></li>
<li class="tab col tabNotification"><a href="#tabNotification" class="translate">Notifications</a></li>
<li class="tab col tabSubscribes"><a href="#tabSubscribes" class="translate">Messages</a></li>
</ul>
</div>
<!-- ++++++++++ TAB: Logon ++++++++++ -->
<div id="tabLogon" class="col s12 page">
<div class="row">
<div class="col s12">
<h6 class="title translate">Logon information</h6>
</div>
</div>
<div class="row">
<div class="col s6 input-field">
<input type="text" class="value" id="HomeId" size="30" />
<label for="HomeId" class="translate">Home-ID:</label>
<span class="translate">Home ID from your Netatmo Energy installation</span>
</div>
</div>
<div class="row">
<div class="col s6 input-field">
<input type="text" class="value" id="ClientId" size="30" />
<label for="ClientId" class="translate">Client-ID:</label>
<span class="translate">Client ID from your Netatmo APP</span>
</div>
<div class="col s6 input-field">
<input type="text" class="value" id="ClientSecretID" size="30" />
<label for="ClientSecretID" class="translate">Client-Secret-ID:</label>
<span class="translate">Client Secret ID from your Netatmo APP</span>
</div>
</div>
<div class="row">
<div class="col s12">
<h6 class="title translate">Information</h6>
</div>
</div>
<div class="input-field col s12">
<input class="value" id="notificationEnabled" type="checkbox"/>
<label for="notificationEnabled" class="translate">Enable / Disable Notifications</label>
</div>
</div>
<!-- notifications -->
<div id="tabNotification" class="col s12 page">
<div class="row">
<h6 class="translate title">Notifications</h6>
</div>
<div class="row">
<div class="input-field col s12 m6 l3 ">
<select class="value" id="notificationsType">
<option value="telegram" class="translate">Telegram</option>
<option value="email" class="translate">E-Mail</option>
<option value="pushover" class="translate">Pushover</option>
<option value="whatsapp-cmb" class="translate">WhatsApp</option>
<option value="signal-cmb" class="translate">Signal</option>
</select>
<label for="notificationsType" class="translate">notifications type</label>
</div>
</div>
<!-- Telegram -->
<div class="row telegram">
<div class="input-field col s12 m6 l3 telegram">
<select id="telegramInstance" class="value"></select>
<label for="telegramInstance" class="translate">Telegram instance</label>
</div>
<div class="input-field col s12 m6 l3 telegram">
<select class="value" id="telegramUser"></select>
<label class="translate" for="telegramUser">Telegram Receiver</label>
</div>
</div>
<div class="row telegram">
<div class="input-field col s12 m6 l3 telegram">
<input class="value" id="telegramSilentNotice" type="checkbox"/>
<label for="telegramSilentNotice" class="translate">Silent Notice</label>
</div>
</div>
<!-- WhatsApp -->
<div class="row whatsapp">
<div class="input-field col s12 m6 l3 whatsapp">
<select id="whatsappInstance" class="value"></select>
<label for="whatsappInstance" class="translate">WhatsApp instance</label>
</div>
</div>
<!-- Signal -->
<div class="row signal">
<div class="input-field col s12 m6 l3 signal">
<select id="signalInstance" class="value"></select>
<label for="signalInstance" class="translate">Signal instance</label>
</div>
</div>
<!-- Pushover -->
<div class="row pushover">
<div class="input-field col s12 m6 l3 pushover">
<select id="pushoverInstance" class="value"></select>
<label for="pushoverInstance" class="translate">Pushover instance</label>
</div>
</div>
<div class="row pushover">
<div class="input-field col s12 m6 l3 pushover">
<input class="value" id="pushoverDeviceID" type="text">
<label for="pushoverDeviceID" class="translate">device ID (optional)</label>
</div>
<div class="input-field col s12 m6 l3 pushover">
<input class="value" id="pushoverSilentNotice" type="checkbox"/>
<label for="pushoverSilentNotice" class="translate">Silent Notice</label>
</div>
</div>
<!-- email -->
<div class="row email">
<div class="input-field col s12 m6 l3 email">
<input class="value" id="emailReceiver" type="text">
<label for="emailReceiver" class="translate">email receiver</label>
<span class="translate">email receiver</span>
</div>
<div class="input-field col s12 m6 l3 email">
<input class="value" id="emailSender" type="text">
<label for="emailSender" class="translate">email sender</label>
<span class="translate">email sender</span>
</div>
</div>
<div class="row email">
<div class="input-field col s12 m6 l3 email">
<select id="emailInstance" class="value"></select>
<label for="emailInstance" class="translate">email instance</label>
</div>
</div>
<!-- general -->
<div class="row">
<div class="col s12 general">
<h6 class="translate title">Allgemeine Einstellungen</h6>
</div>
</div>
<div class="row">
<div class="input-field col s12 m6 l3 general">
<select class="value" id="NoticeType">
<option value="longNotice" class="translate">Long Notifications</option>
<option value="shortNotice" class="translate">Short Notifications</option>
</select>
<label class="translate" for="NoticeType">Notification Style</label>
</div>
<div class="input-field col s12 m6 l3 general">
<select class="value" id="notifications">
<option value="000" class="translate">no notifications</option>
<option value="i00" class="translate">information</option>
<option value="iw0" class="translate">information, warnings</option>
<option value="i0e" class="translate">information, errors</option>
<option value="iwe" class="translate">information, warnings, errors</option>
<option value="0w0" class="translate">warnings</option>
<option value="0we" class="translate">warnings, errors</option>
<option value="00e" class="translate">errors</option>
</select>
<label for="notifications" class="translate">message type</label>
</div>
</div>
</div>
<!-- ++++++++++ TAB: API settings ++++++++++ -->
<div id="tabAPI" class="col s12 page">
<div class="row">
<div class="col s12">
<h6 class="title translate">General settings</h6>
</div>
</div>
<div class="row">
<div class="col s6 input-field">
<input type="checkbox" class="value" id="applyimmediately" size="30" />
<label for="applyimmediately" class="translate">apply immediately</label>
</div>
<div class="col s6 input-field">
<input type="checkbox" class="value" id="getchangesimmediately" size="30" />
<label for="getchangesimmediately" class="translate">read API states immediately</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 col-refreshstates">
<input class="value" type="number" id="refreshstates" />
<label class="translate" for="refreshstates">Refresh states every x seconds</label>
</div>
</div>
</div>
<!-- ++++++++++ TAB: Messages ++++++++++ -->
<div id="tabSubscribes" class="col s12 page">
<div class="row">
<div class="col s12">
<h6 class="title translate">Messages</h6>
</div>
</div>
<div class="row">
<div class="col s6 input-field">
<input type="checkbox" class="value" id="notify_bat_low" size="30" />
<label for="notify_bat_low" class="translate">Low battery</label>
</div>
<div class="col s6 input-field">
<input type="text" class="value" id="notify_bat_low_txt" size="30" />
<label for="notify_bat_low_txt" class="translate">Message if battery goes low</label>
</div>
</div>
<div class="row">
<div class="col s6 input-field">
<input type="checkbox" class="value" id="notify_bat_medium" size="30" />
<label for="notify_bat_medium" class="translate">Medium battery</label>
</div>
<div class="col s6 input-field">
<input type="text" class="value" id="notify_bat_medium_txt" size="30" />
<label for="notify_bat_medium_txt" class="translate">Message if battery goes medium</label>
</div>
</div>
<div class="row">
<div class="col s6 input-field">
<input type="checkbox" class="value" id="notify_connection_no" size="30" />
<label for="notify_connection_no" class="translate">Connection</label>
</div>
<div class="col s6 input-field">
<input type="text" class="value" id="notify_connection_no_txt" size="30" />
<label for="notify_connection_no_txt" class="translate">Message if valve lost connection</label>
</div>
</div>
<div class="row">
<div class="col s6 input-field">
<input type="checkbox" class="value" id="notify_window_open" size="30" />
<label for="notify_window_open" class="translate">Window open</label>
</div>
<div class="col s6 input-field">
<input type="text" class="value" id="notify_window_open_txt" size="30" />
<label for="notify_window_open_txt" class="translate">Message if window is open</label>
</div>
</div>
<div class="row">
<div class="col s6 input-field">
<input type="checkbox" class="value" id="notify_heating_power_request" size="30" />
<label for="notify_heating_power_request" class="translate">Heating request</label>
</div>
<div class="col s6 input-field">
<input type="text" class="value" id="notify_heating_power_request_txt" size="30" />
<label for="notify_heating_power_request_txt" class="translate">Message if valve creates a heating request</label>
</div>
</div>
<div class="row">
<div class="col s6 input-field">
<input type="checkbox" class="value" id="notify_anticipating" size="30" />
<label for="notify_anticipating" class="translate">Anticipating</label>
</div>
<div class="col s6 input-field">
<input type="text" class="value" id="notify_anticipating_txt" size="30" />
<label for="notify_anticipating_txt" class="translate">Message if boiler anticipates</label>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>