<title>SLS Gateway: Dashboard</title>
<link rel="icon" href="https://cdn.slsys.io/assets/2020.05.21d8/favicon.png" type="image/x-icon">
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
.leftpic2 {
float: left; /* Выравнивание по правому краю */
margin: 0 0 5px 5px; /* Отступы вокруг фотографии */
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.btn-round2 {
border-radius:50px;
padding-left: 6px;
padding-right: 6px;
width: 34px;
height: 34px;
font-size: 12px;
}
.dropdown-menu li a .glyphicon {
width:25px;
}
.dropdown-menu{
left: -80px;
}
.card-img {
width:80px;
margin-right:30;
}
.signal-level {
font-size: 20px;
}
.signal-level .glyphicon-signal {
color: #000;
background: #fff;
mix-blend-mode: lighten;
padding-top:2px;
padding-bottom:9px;
top: 0px;
}
.panel-content {padding: 5px 10px 0px 10px;}
</style>
<main role="main" class="h-100">
<form name="wifi" method="get" action="/store">
<div class="container-fluid">
<div class="row col-md-12 col-lg-12">
<div class="row" id="sw_list" align="center">
</div>
</form>
</main>
<script>
scanNetworks();
function showIt()
{
var x = document.getElementById("wifi_pwd");
if (x.type === "password")
{
x.type = "text";
}
else
{
x.type = "password";
}
}
function scanNetworks()
{
var list=httpGet('/api/zigbee/devices');
var arr=JSON.parse(list);
document.getElementById('sw_list').innerHTML="";
arr.forEach(function(v) {
if ('ieeeAddr' in v && 'nwkAddr' in v ) {
//if ('ieeeAddr' in v) {
//{
if (v.nwkAddr.length>2) {
var data='<div class="col-sm-5 col-md-4 col-lg-3" onclick="httpReq(\''+v.ieeeAddr+'\');">';
data += '<div class="panel panel-info" >';
// data += '<div class="card text-white bg-primary mb-2" style="max-width: 25rem;">';
data += '<div class="panel-heading"> ';
// data += '<div class="card-header">';
data += '<h5> ';
data += '<div style="float:left;" >';
if (v.friendly_name.length>2) { data += v.friendly_name+' ';} else { data += v.ieeeAddr+' ';}
data += '</div>';
//if(typeof v.st.state === 'undefined') {data += ' ';} else {data += ' ('+v.st.state+')'};
//if(typeof v.st.battery === 'undefined') {data += ' ';} else {data += ' <i class="fas fa fa-battery-full fa-rotate-270" title="'+v.st.battery+'"></i>'};
//if(typeof v.st.linkquality != 'undefined') {data += ' ';} else {data += ' <i class="fa fa-signal" title="'+v.st.linkquality+'"></i>'};
//if(typeof v.st.linkquality === 'undefined') {data += ' ';} else {data += ' ';'};
//if ('linkquality' in v.st) {data += ' <i class="fa fa-signal" title="'+v.st.linkquality+'"></i>'} else {data += ' ';};
//if ('st' in v) { if ('temperature' in v['st']) { $tem=v.st.temperature; data += ' '+tem.replace(/\D+/g, '')+'°C'} else {data += ' ';}; }
//if ('st' in v) { if ('temperature' in v['st']) {data += ' '+v.st.temperature.replace('/D/g', '')+'°C'} else {data += '';}; } arseInt(str.replace(/[^\d]/g, ''))
//if ('st' in v) { if ('temperature' in v['st']) {data += ' '+v.st.temperature+'°C'} )
if ('st' in v) { if ('state' in v['st']) {data += ' '+v.st.state+''} else {data += ' ';}; }
if ('st' in v) { if ('temperature' in v['st']) {data += ' '+v.st.temperature+'°C'} else {data += ' ';}; }
if ('st' in v) { if ('humidity' in v['st']) {data += ' '+v.st.humidity+'mm'} else {data += '';}; }
data += '<div style="float:right;" >';
if ('st' in v) { if ('battery' in v['st']) {
if (v.st.battery==100) {data += ' <i class="fas fa fa-battery-full fa-rotate-270" title="'+v.st.battery+'"></i>'}
if (v.st.battery<100 && v.st.battery>=70) {data += ' <i class="fas fa fa-battery-three-quarters fa-rotate-270" title="'+v.st.battery+'"></i>'}
if (v.st.battery<70 && v.st.battery>=50) {data += ' <i class="fas fa fa-battery-half fa-rotate-270" title="'+v.st.battery+'"></i>'}
if (v.st.battery<50 && v.st.battery>=30) {data += ' <i class="fas fa fa-battery-quarter fa-rotate-270" title="'+v.st.battery+'"></i>'}
if (v.st.battery<30 ) {data += ' <i class="fas fa fa-battery-empty fa-rotate-270" title="'+v.st.battery+'"></i>'}
ts= v.last_seen;
var ts1 = new Date(parseInt(ts, 10) * 1000);
} else {data += ' ';}; }
if ('st' in v) { if ('linkquality' in v['st']) {data += ' <i class="fa fa-signal" title="'+v.st.linkquality+'"></i>'} else {data += ' ';}; }
data += '</div>';
data += ' </h5></div>';
//////////////////////////////
//////////////////////////////
//////////////////////////////
//data += '<div class="card-body" align="left"> ';
//data += '<div class="panel-body">';
data += '<div class="panel-content" align="left">';
data += '<img class="leftpic img-circle pull-left card-img" src="https://raw.githubusercontent.com/slsys/Gateway/master/devices/png/'+v.ModelId+'.png">';
/////////////////////////
data += '<div style="white-space: nowrap;">';
// data += '<div style="float:left;" >';
//data += '<a href="/zigbee/device?dev='+v.nwkAddr+'&activeTab=Info" style="text-decoration: none" ><small>'+v.ieeeAddr +' ';
data += '<a href="/zigbee/device?dev='+v.nwkAddr+'&activeTab=Info" style="text-decoration: none" >'+v.ieeeAddr +' ';
//if(typeof ts1 === 'undefined') {null;} else { data += ' '+ts1.toLocaleString();}
//data += '</small></a></p> ';
data += '</a></p> ';
//data += '</div>';
//data += '</div>';
// data += '<br>';
/////////////////////////
//data += '<div style="white-space: nowrap;">';
//data += '<div style="float:left;" >';
data += '<p>'+v.ManufName+' </p> ';
// data += '</div>';
// data += '</div>';
// data += '<br>';
//data += '<div style="white-space: nowrap;">';
//data += '<div style="float:left;" >';
// data += '<div align="left;" >';
data += '<p>'+v.ModelId+'</p> ';
// data += '</div>';
if(typeof ts1 === 'undefined') { data += '<p> </p>';} else { data += '<p>'+ts1.toLocaleString()+'</p>';}
/////////////////////////
}}
if (data.length>2) { sw_list.insertAdjacentHTML('afterbegin', data);}
});
///sw_list.insertAdjacentHTML('afterbegin', data); });
}
function httpGet(url)
{
console.log('starting http get');
var xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.send();
if (xhr.status != 200) {
// обработать ошибку
//console.log( xhr.status + ': ' + xhr.statusText ); // пример вывода: 404: Not Found
return false;
} else {
// вывести результат
//console.log('nw request ok: ' + xhr.responseText);
return( xhr.responseText ); // responseText -- текст ответа.
}
}
function httpReq(dev) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", '/api/zigbee?dev='+dev+'&action=setState&name=state&value=TOGGLE', false ); // false for synchronous request
xmlHttp.send( null );
return xmlHttp.responseText;
}
</script>
<body>