iobroker.synochat
Version:
This adapter provides an interface of Synology Chat and ioBroker.
387 lines (353 loc) • 22.6 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<!-- Load ioBroker scripts and styles -->
<link rel="stylesheet" type="text/css" href="../../lib/css/fancytree/ui.fancytree.min.css" />
<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="../../lib/js/materialize.js"></script>
<script type="text/javascript" src="../../lib/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../lib/js/jquery.fancytree-all.min.js"></script>
<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>
<!-- Materialze style -->
<link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
<link type="text/css" rel="stylesheet" href="../../lib/css/themes/jquery-ui/default/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" href="../../lib/css/fancytree/ui.fancytree.min.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/css/iob/selectID.css"/>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="../../lib/js/jquery-ui-1.10.3.full.min.js"></script>
<script type="text/javascript" src="../../lib/js/selectID.js"></script>
<script type="text/javascript">
var calendars = [];
var events = [];
// the function loadSettings has to exist ...
function load(settings, onChange) {
if (!settings) return;
for (var key in settings) {
if (!settings.hasOwnProperty(key)) continue;
var $value = $('#' + key + '.value');
if ($value.attr('type') === 'checkbox') {
$value.prop('checked', settings[key]).on('change', function() {
if ($('#auth').prop('checked')) {
$('#secure').prop('checked', true);
}
onChange();
//showHideSettings();
});
} else {
$value.val(settings[key]).on('change', function() {
onChange();
}).keyup(function() {
onChange();
});
}
if ($value.attr('id') === 'synoUrl') {
$value.prop('checked', settings[key]).focusout('change', function() {
var ip1 = $("#synoUrl").val();
if (isUrlValid(ip1)) {
$("#synoUrl").val(ip1);
} else {
alert("Please enter a valid URL to your Synology Chat application\nwith prefix (http/s://) and without postfix (/)\n\n Valid sample values:\n - https://mychat.mydomain.com\n - https://192.168.x.x:8080");
//restore
$("#synoUrl").val(settings.synoUrl).change();
}
});
}
if ($value.attr('id') === 'iobrokerHost') {
$value.prop('checked', settings[key]).focusout('change', function() {
var hostname = $("#iobrokerHost").val();
if (isHostnameValid(hostname)) {
$("#iobrokerHost").val(hostname);
} else {
alert("Please enter a valid hostname of IP address of your ioBroker instance\nwithout prefix (http/s://) and without port or postfix (/)\n\n Valid sample values:\n - myIoBrokerInstance.tld\n - 192.168.x.x");
//restore
$("#iobrokerHost").val(settings.iobrokerHost).change();
}
});
}
}
// Set default language
if (!settings.language) {
settings.language = systemLang || 'en';
$('#language').val(settings.language).trigger('change');
}
channels = settings.channels || [];
for (var c = 0; c < settings.channels.length; c++) {
settings.channels[c].channelEnabled =
settings.channels[c].channelEnabled === 'ignore' ||
settings.channels[c].channelEnabled === 'true' ||
settings.channels[c].channelEnabled === true;
settings.channels[c].channelValidateCert =
settings.channels[c].channelValidateCert === 'ignore' ||
settings.channels[c].channelValidateCert === 'true' ||
settings.channels[c].channelValidateCert === true;
settings.channels[c].channelReactOnAllIobrokerMessages =
settings.channels[c].channelReactOnAllIobrokerMessages === 'ignore' ||
settings.channels[c].channelReactOnAllIobrokerMessages === 'true' ||
settings.channels[c].channelReactOnAllIobrokerMessages === true;
settings.channels[c].channelReactOnNotificationmanager =
settings.channels[c].channelReactOnNotificationmanager === 'ignore' ||
settings.channels[c].channelReactOnNotificationmanager === 'true' ||
settings.channels[c].channelReactOnNotificationmanager === true;
settings.channels[c].channelName = settings.channels[c].channelName || '';
settings.channels[c].channelAccessToken = settings.channels[c].channelAccessToken || '';
settings.channels[c].channelType = settings.channels[c].channelType || '';
}
// 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 + '">' + name + '</option>';
// }
// $('#webInstance').append(text).val(settings.webInstance).select();
// if(settings.webInstance == ""){
// $('#webInstance').prop("selectedIndex",0);
// }
// //showHideSettings();
// }
// });
getAdapterInstances('web', function (arr) {
instances = arr;
var text = '';
for (var r = 0; r < arr.length; r++) {
var name = arr[r]._id.substring('system.adapter.'.length);
text += '<option value="' + name + '">' + name + '</option>';
}
$('#webInstance').append(text).val(settings.webInstance).select();
if(settings.webInstance == ""){
$('#webInstance').prop("selectedIndex",0);
$('#webInstance').select()
}
});
if(settings.iobrokerHost == ""){
//Set first available ipv4
getIPs(function (ips) {
//if(settings.iobrokerHost != ""){
for (var i = 0; i < ips.length; i++) {
if (ips[i].family.indexOf("ipv4") > -1 && ips[i].address !== "0.0.0.0" && ips[i].address !== "127.0.0.1") {
$("#iobrokerHost").val(ips[i].address).change();
break;
}
}
//}
});
//triggers getIPs
fillSelectIPs("#adapterAddress", settings.adapterAddress, false, true, function () {
$('#iobrokerHost').focus();
$('#webInstance').select();
});
}
// Set focus of initial data load after adapter instantiation
if(settings.webInstance == ""){
$('#webInstance').select();
}
if(settings.iobrokerHost == ""){
$('#iobrokerHost').focus();
}
M.updateTextFields();
onChange(false);
values2table('channels', channels, onChange);
}
function save(callback) {
var obj = {};
$('.value').each(function () {
var $this = $(this);
if ($this.attr('type') === 'checkbox') {
obj[$this.attr('id')] = $this.prop('checked');
} else {
obj[$this.attr('id')] = $this.val();
}
});
// Get edited table
obj.channels = table2values('channels');
callback(obj);
}
function isUrlValid(inputText) {
var format = /^(http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^(http:\/\/|https:\/\/)(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(?::\d{1,5})?$/;
return !!inputText.match(format);
}
function isHostnameValid(inputText) {
var format = /^[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
return !!inputText.match(format);
}
</script>
</head>
<body>
<div class="m adapter-container">
<nav>
<div class="row">
<div class="col s5">
<img src="synochat.png" class="logo" style="float: left">
<font size="+2"><big>Synology-Chat</big></font>
</div>
</div>
</nav>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s2"><a href="#tab-main" class="translate" data-lang="Main settings">Main settings</a></li>
<li class="tab col s2"><a href="#tab-channels" class="translate" data-lang="Channel management">Channel management</a></li>
<li class="tab col s2"><a href="#tab-message-messageTemplates" class="translate" data-lang="Message templates">Message templates</a></li>
<li class="tab col s2"><a target="_blank" class="translate" data-lang="Help" href="https://github.com/phoeluga/ioBroker.synochat/blob/master/README.md">Help</a></li>
</ul>
</div>
<div id="tab-main" class="col s12 page">
<div class="card">
<div class="card-content">
<div class="row">
<div class="input-field col s6 l2">
<p><label class="translate" for="synoUrl">Synology URL/IP</label></p>
<input class="value" id="synoUrl" type="text" />
</div>
<div class="input-field col s6 l2">
<input class="value" id="certCheck" type="checkbox" />
<label class="translate" for="certCheck">Validate SSL certificate</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 l2">
<p><label class="translate" for="iobrokerHost">Hostname / IP address of ioBroker instance</label></p>
<input class="value" id="iobrokerHost" type="text" />
</div>
<div class="col s12 l3 input-field">
<p><label class="translate" for="webInstance">Web instance for messages send from Synology chat to ioBroker adapter instance</label></p>
<select class="value" id="webInstance">
<!-- <option value="*" class="translate">Any</option> -->
</select>
</div>
</div>
</div>
</div>
</div>
<div id="tab-message-messageTemplates" class="col s12 page">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s12">
<h6>
</br>
<p></p>
<span class="translate">An adapter instance can receive messages. These messages consist of an object with several attributes that can be included as parameters in a message template. These parameters are replaced accordingly before the message is sent. <br><br> A detailed description of the usage of patterns, escaping patterns and restrictions can be found in the Help section - Chapter 2.2.3 Message templates.</span>
</br>
<p></p>
</h6>
</div>
</div>
</div>
</div>
<p></p></br>
<div class="card">
<div class="card-content">
<div class="row">
<div class="input-field col" style="width:50%">
<p><label class="translate" for="receivedNotificationManagerTemplate">Template for sending messages received via ioBroker Notification-Manager</label></p>
<textarea class="value" id="receivedNotificationManagerTemplate" name="receivedNotificationManagerTemplate" style="width:100%;height:120px;" cols="2" rows="20"></textarea>
</div>
<div class="input-field col" style="width:50%">
<p><label class="translate" for="receivedMessageTemplate">Template for sending messages of all other received messages</label></p>
<textarea class="value" id="receivedMessageTemplate" name="receivedMessageTemplate" style="width:100%;height:120px;" cols="2" rows="20"></textarea>
</div>
</div>
</div>
</div>
<div><hr></hr></div>
<div class="card">
<div class="card-content">
<div class="row">
<div class="input-field col" style="width:20%">
<p><label class="translate" for="receivedNotificationManagerTemplate">Template 1 - Template to be applied on a specific channel</label></p>
<textarea class="value" id="messageTemplate0" name="messageTemplate0" style="width:100%;height:120px;" cols="2" rows="20"></textarea>
</div>
<div class="input-field col" style="width:20%">
<p><label class="translate" for="receivedNotificationManagerTemplate">Template 2 - Template to be applied on a specific channel</label></p>
<textarea class="value" id="messageTemplate1" name="messageTemplate1" style="width:100%;height:120px;" cols="2" rows="20"></textarea>
</div>
<div class="input-field col" style="width:20%">
<p><label class="translate" for="receivedNotificationManagerTemplate">Template 3 - Template to be applied on a specific channel</label></p>
<textarea class="value" id="messageTemplate2" name="messageTemplate2" style="width:100%;height:120px;" cols="2" rows="20"></textarea>
</div>
<div class="input-field col" style="width:20%">
<p><label class="translate" for="receivedNotificationManagerTemplate">Template 4 - Template to be applied on a specific channel</label></p>
<textarea class="value" id="messageTemplate3" name="messageTemplate3" style="width:100%;height:120px;" cols="2" rows="20"></textarea>
</div>
<div class="input-field col" style="width:20%">
<p><label class="translate" for="receivedNotificationManagerTemplate">Template 5 - Template to be applied on a specific channel</label></p>
<textarea class="value" id="messageTemplate4" name="messageTemplate4" style="width:100%;height:120px;" cols="2" rows="20"></textarea>
</div>
</div>
<div class="row">
<div class="input-field col" style="width:20%">
<p><label class="translate" for="receivedNotificationManagerTemplate">Template 6 - Template to be applied on a specific channel</label></p>
<textarea class="value" id="messageTemplate5" name="messageTemplate5" style="width:100%;height:120px;" cols="2" rows="20"></textarea>
</div>
<div class="input-field col" style="width:20%">
<p><label class="translate" for="receivedNotificationManagerTemplate">Template 7 - Template to be applied on a specific channel</label></p>
<textarea class="value" id="messageTemplate6" name="messageTemplate6" style="width:100%;height:120px;" cols="2" rows="20"></textarea>
</div>
<div class="input-field col" style="width:20%">
<p><label class="translate" for="receivedNotificationManagerTemplate">Template 8 - Template to be applied on a specific channel</label></p>
<textarea class="value" id="messageTemplate7" name="messageTemplate7" style="width:100%;height:120px;" cols="2" rows="20"></textarea>
</div>
<div class="input-field col" style="width:20%">
<p><label class="translate" for="receivedNotificationManagerTemplate">Template 9 - Template to be applied on a specific channel</label></p>
<textarea class="value" id="messageTemplate8" name="messageTemplate8" style="width:100%;height:120px;" cols="2" rows="20"></textarea>
</div>
<div class="input-field col" style="width:20%">
<p><label class="translate" for="receivedNotificationManagerTemplate">Template 10 - Template to be applied on a specific channel</label></p>
<textarea class="value" id="messageTemplate9" name="messageTemplate9" style="width:100%;height:120px;" cols="2" rows="20"></textarea>
</div>
</div>
</div>
</div>
</div>
<div id="tab-channels" class="col s12 page">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s12">
<h6>
</br>
<p></p>
<span class="translate">NOTE: The WebHook URL for receiving data from Synology chat server can be found as object value of 'ADAPTER_INSTANCE.info.webHookUrl' for this adapter instance.</span>
</br>
<p></p>
</h6>
</div>
</div>
</div>
</div>
<p></p></br>
<div class="row">
<div class="col s12" id="channels">
<a class="btn-floating waves-effect waves-light blue table-button-add"><i class="material-icons">add</i></a>
<p></p>
<div class="table-values-div">
<table class="table-values">
<thead>
<tr>
<th data-name="channelEnabled" data-label="Channel enabled" data-type="checkbox" class="translate">Channel enabled</th>
<th data-name="channelName" data-label="Channel name" class="translate">Channel name</th>
<th data-name="channelAccessToken" data-label="Access token" class="translate">Access token</th>
<th data-name="channelType" data-label="Channel type" data-options="incoming/Send data to Synology chat server;outgoing/Get data from Synology chat server" data-type="select" class="translate">Channel type</th>
<th data-name="channelObjectValueTemplate" data-label="Object value template" data-options=";messageTemplate0/Template 1;messageTemplate1/Template 2;messageTemplate2/Template 3;messageTemplate3/Template 4;messageTemplate4/Template 5;messageTemplate5/Template 6;messageTemplate6/Template 7;messageTemplate7/Template 8;messageTemplate8/Template 9;messageTemplate9/Template 10;" data-type="select" class="translate">Object value template</th>
<th data-name="channelReactOnNotificationmanager" data-label="React on Notification-Manager" data-type="checkbox" class="translate">React on Notification-Manager</th>
<th data-name="channelReactOnAllIobrokerMessages" data-label="React on all ioBroker messages" data-type="checkbox" class="translate">React on all ioBroker messages</th>
<th data-name="channelValidateCert" data-label="Validate SSL certificate" data-type="checkbox" class="translate">Validate SSL certificate</th>
<th data-buttons="delete"></th>
<!-- <th data-buttons="delete up down"></th> -->
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>