iobroker.yeelight-2
Version:
340 lines (299 loc) • 12.7 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="../../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>
<script type="text/javascript" src="words.js"></script>
<script type="text/javascript">
var devices = [];
var rawdevices = [];
var active = false;
var g_onChange;
var SEP = '_';
if (typeof _ !== 'function') _ = translateWord;
function load(settings, onChange) {
g_onChange = onChange;
$('#find').on('click', function () {
var $find = $('#find');
if (!active) {
console.log("Not_active");
showToast(_('Please activate instance'));
return;
}
$find.addClass('disabled');
$('#loader1').removeClass('seenot');
console.log("we wqill send to: " + adapter + "." + instance);
var devices = [];
rawdevices = [];
var IPs = [];
devices = table2values('values');
devices.forEach(function (element) {
if (!IPs.includes(element.ip)) {
IPs.push(element.ip);
}
});
console.log(JSON.stringify(devices));
sendTo(adapter + "." + instance, 'discovery', {
"turnon": 1
}, function (result) {
console.log(JSON.stringify(result));
$find.removeClass('disabled');
$('#loader1').addClass('seenot');
var arr = JSON.parse(result);
rawdevices = arr;
for (var i = 0; i < arr.length; i++) {
var port = arr[i].port;
var ip = arr[i].host;
var name = arr[i].id;
var type = arr[i].model;
//check if in config
let yeetable = devices.find(item => item.ip === ip)
if (!yeetable) devices.push({
port: port,
ip: ip,
name: type + '-' + name,
type: type
});
values2table('values', devices, g_onChange);
g_onChange(true);
}
});
});
$('#values').on('click', function () {});
socket.emit('getState', 'system.adapter.' + adapter + '.' + instance + '.alive', function (err, state) {
active = /*common.enabled ||*/ (state && state.val);
});
changed = true;
g_onChange = onChange;
function getVal(id) {
var ar = id.split(SEP);
var obj = settings;
for (var i = 0; i < ar.length - 1; i++) {
if (obj[ar[i]] === undefined) obj[ar[i]] = {};
obj = obj[ar[i]];
}
return obj[ar[ar.length - 1]];
}
function forAllKeys(obj, s, cb) {
var sep = SEP; //'.';
if (typeof s === 'function') {
cb = s;
s = '';
}
for (var i in obj) {
if (typeof obj[i] === 'object') {
if (Array.isArray(obj[i])) continue;
forAllKeys(obj[i], s ? s + sep + i : i, cb)
} else {
cb && cb(s ? s + sep + i : i);
}
}
}
//for (var key in settings) {
forAllKeys(settings, function (key) {
// example: select elements with id=key and class=value and insert value
var val = getVal(key);
if ($('#' + key + '.value').attr('type') == 'checkbox') {
$('#' + key + '.value').prop('checked', val).change(function () {
if ($('#auth').prop('checked')) {
$('#secure').prop('checked', true);
}
onChange();
//showHideSettings();
});
} else {
$('#' + key + '.value').val(val).change(function () {
onChange();
}).keyup(function () {
onChange();
});
}
});
// Set default language
if (!settings.language) {
settings.language = systemLang || 'en';
$('#language').val(settings.language).trigger('change');
}
devices = settings.devices; // || [ {name: '', ip: "", mac: ""} ];
rawdevices = settings.rawdevices;
values2table('values', devices, onChange);
//changed = true;
onChange(false);
}
function setVal(obj, id, val) {
var ar = id.split(SEP);
for (var i = 0; i < ar.length - 1; i++) {
if (obj[ar[i]] === undefined) obj[ar[i]] = {};
obj = obj[ar[i]];
}
obj[ar[ar.length - 1]] = val;
}
function save(callback) {
var obj = {};
changed = true;
$('.value').each(function () {
var $this = $(this),
val;
switch ($this.attr('type')) {
case 'checkbox':
val = $this.prop('checked');
break;
case 'number':
case 'value':
val = ~~$this.val();
break;
default:
val = $this.val();
}
setVal(obj, $this.attr('id'), val);
});
obj.rawdevices = rawdevices;
//obj.devices = table2values('values');
//var temp = obj.devices;
var temp = table2values('values');
$.each(temp, function (i, val) {
console.log("key:_" + i + " val:__" + JSON.stringify(val));
let yeefind = obj.rawdevices.find(item => item.host === val.ip)
if (yeefind) {
temp[i].id = yeefind.id
temp[i].supports = yeefind.supports
} else {
temp[i].id = "0x00000000000000" + i;
//dummy support
temp[i].supports = [
"get_prop",
"set_default",
"set_power",
"toggle",
"set_bright",
"start_cf",
"stop_cf",
"set_scene",
"cron_add",
"cron_get",
"cron_del",
"set_ct_abx",
"set_rgb",
"set_hsv",
"set_adjust",
"adjust_bright",
"adjust_ct",
"adjust_color",
"set_music",
"set_name"
]
}
if (val.name.indexOf(' ') !== -1) {
showToast(_('No spaces in device name'));
}
temp[i].name = temp[i].name.replace(/ /g, '_');
if (i + 1 === temp.length) {
//values2table('values', temp, onChange);
obj.devices = temp
}
});
callback(obj);
}
function initDialog(callback) {
var $editDialog = $('#dialog-name-edit');
if (!$editDialog.data('inited')) {
$editDialog.data('inited', true);
$editDialog.modal({
dismissible: false
});
$editDialog.find('.btn-set').on('click', function () {
var $editDialog = $('#dialog-name-edit');
var callback = $editDialog.data('callback');
if (typeof callback === 'function') callback();
$editDialog.data('callback', null);
});
$('#edit_name').on('keyup', function (e) {
if (e.keyCode === 13) {
setTimeout(function () {
$editDialog.find('.btn-set').trigger('click');
}, 100);
}
});
}
$editDialog.data('callback', callback);
$editDialog.modal('open');
}
</script>
<style>
.loader {
border: 4px solid #b8d1f3;
/* Light grey */
border-top: 4px solid #3498db;
/* Blue */
border-radius: 50%;
width: 32px;
height: 32px;
animation: spin 2s linear infinite;
}
.seenot {
display: none;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="m adapter-container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s5"><a href="#tab-main" class="translate active">Main settings</a></li>
<li class="tab col s5 tab-astro"><a href="#tab-astro" class="translate">settings</a></li>
</ul>
</div>
<div id="tab-main" class="col s12 page">
<div class="row">
<div class="col s6 m4 l2">
<img src="yeelight.png" class="logo">
</div>
</div>
<div class="row tab-smart-devices-toolbar " id="values">
<div class="col s2 m1 l1 center">
<button title="Add device" class="table-button-add btn-floating waves-effect waves-light btn-small"><i
class=" material-icons">add</i></button>
</div>
<div class="col s2 m1 l1">
<a id="find" class=" btn-small translate">Find Devices<span></span></a>
</div>
<div class="col s2 ">
<div class="loader seenot" id="loader1"> </div>
</div>
<div class="col s12 m12 l12">
<table class="table-values" style="width: 100%; margin-top: 8px">
<thead>
<tr>
<th data-name="_index" style="width: 40px" class="translate"></th>
<th data-name="name" style="width: 30%" class="translate">Name</th>
<th data-name="ip" class="translate">ip adress</th>
<th data-name="port" class="translate">port</th>
<th data-name="smart_name" class="translate">smartname</th>
<th data-name="type" class="translate" data-options="color;ceiling1;ceiling2;ceiling3/yeelight480;ceiling4/yeelight650;ceiling10/pendant;bslamp1;desklamp;mono;stripe"
data-type="select">type</th>
<th data-buttons="delete" style="width: 40px"></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>