263 lines
15 KiB
HTML
263 lines
15 KiB
HTML
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||
<link rel="stylesheet" href="../files/bootstrap.min.css">
|
||
<link rel="stylesheet" href="../files/layout.css">
|
||
<script src="../files/jquery-3.3.1.min.js"></script>
|
||
<script src="../files/popper.min.js"></script>
|
||
<script src="../files/bootstrap.min.js"></script>
|
||
<script src="./base.js"></script>
|
||
</head>
|
||
<body>
|
||
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="./index.html"><img src="../files/robe_logo_white.svg"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"><span class="navbar-toggler-icon"></span></button>
|
||
<div class="collapse navbar-collapse" id="navbar">
|
||
<ul class="navbar-nav mr-auto">
|
||
<li class="nav-item"><a class="nav-link" href="./index.html">Status</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="./personality.html">Personality</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="./logs.html">Logs</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="./sensors.html">RAINS logs</a></li>
|
||
<li class="nav-item active"><a class="nav-link" href="./discovery.html">Discovery</a></li>
|
||
<li class="nav-item"><a class="nav-link" id="scfg">Settings</a></li>
|
||
<li class="nav-item"><a class="nav-link" id="idnt"><img class="rdmi" src="../files/identify.svg"></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<div class="fixed-top text-center device-label" id="pth" onclick="window.location = ('../index.html')"></div>
|
||
<div class="container-fluid in">
|
||
<h1>Discovery</h1>
|
||
<div class="row" id="boxes">
|
||
<div class="col-12">
|
||
<div class="clearfix">
|
||
<div class="float-left pt02">
|
||
<input type="checkbox" id="w-ot">
|
||
<label for="w-ot" class="pl04"> Move devices with warning to top</label>
|
||
</div>
|
||
<button class="btn btn-primary float-right" id="scan">Discover (1)</button>
|
||
</div>
|
||
<h2>Columns selection (max. 7 items)</h2>
|
||
<div class="clearfix" id="cols">
|
||
<div class="dchb">
|
||
<input type="checkbox" class="cchb" checked="" id="cchb-0">
|
||
<label for="cchb-0">DMX address</label>
|
||
</div>
|
||
<div class="dchb">
|
||
<input type="checkbox" class="cchb" checked="" id="cchb-1">
|
||
<label for="cchb-1">DMX preset</label>
|
||
</div>
|
||
<div class="dchb">
|
||
<input type="checkbox" class="cchb" checked="" id="cchb-2">
|
||
<label for="cchb-2">RDM UID</label>
|
||
</div>
|
||
<div class="dchb">
|
||
<input type="checkbox" class="cchb" checked="" id="cchb-3">
|
||
<label for="cchb-3">IP address</label>
|
||
</div>
|
||
<div class="dchb">
|
||
<input type="checkbox" class="cchb" id="cchb-4" disabled="disabled">
|
||
<label for="cchb-4">Head temperature [°C]</label>
|
||
</div>
|
||
<div class="dchb">
|
||
<input type="checkbox" class="cchb" id="cchb-5" disabled="disabled">
|
||
<label for="cchb-5">Relative humidity [%]</label>
|
||
</div>
|
||
<div class="dchb">
|
||
<input type="checkbox" class="cchb" checked="" id="cchb-6">
|
||
<label for="cchb-6">RAINS (max wet)</label>
|
||
</div>
|
||
<div class="dchb">
|
||
<input type="checkbox" class="cchb" id="cchb-7" disabled="disabled">
|
||
<label for="cchb-7">Last pressure test</label>
|
||
</div>
|
||
<div class="dchb">
|
||
<input type="checkbox" class="cchb" checked="" id="cchb-8">
|
||
<label for="cchb-8">Device status</label>
|
||
</div>
|
||
</div>
|
||
<div class="clearfix">
|
||
<button class="btn btn-primary float-right" id="acs">Apply selection</button>
|
||
</div>
|
||
<div class="table-responsive">
|
||
<table class="table mt-2" id="d-t">
|
||
<thead id="dmax">
|
||
<tr>
|
||
<th>
|
||
<i class="as"></i>
|
||
<i class="ab"></i> Device
|
||
</th>
|
||
<th>
|
||
<i></i>
|
||
<i class="ab"></i> DMX address
|
||
</th>
|
||
<th>
|
||
<i></i>
|
||
<i class="ab"></i> DMX preset
|
||
</th>
|
||
<th>
|
||
<i></i>
|
||
<i class="ab"></i> RDM UID
|
||
</th>
|
||
<th>
|
||
<i></i>
|
||
<i class="ab"></i> IP address
|
||
</th>
|
||
<th style="display: none;">
|
||
<i></i>
|
||
<i class="ab"></i> Head temperature [°C]
|
||
</th>
|
||
<th style="display: none;">
|
||
<i></i>
|
||
<i class="ab"></i> Relative humidity [%]
|
||
</th>
|
||
<th>
|
||
<i></i>
|
||
<i class="ab"></i> RAINS (max wet)
|
||
</th>
|
||
<th style="display: none;">
|
||
<i></i>
|
||
<i class="ab"></i> Last pressure test
|
||
</th>
|
||
<th>
|
||
<i></i>
|
||
<i class="ab"></i> Device status
|
||
</th>
|
||
<th> </th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr id="myd" class="myd">
|
||
<td>iForte</td>
|
||
<td>350</td>
|
||
<td>Mode 1 (54 channels)</td>
|
||
<td>52:53:01:2c:00:0e</td>
|
||
<td>2.247.136.14</td>
|
||
<td style="display: none;">47</td>
|
||
<td style="display: none;">14.0</td>
|
||
<td>
|
||
<div class="rains sl">
|
||
<div style="width:63%"></div>
|
||
</div>
|
||
</td>
|
||
<td style="display: none;">2.3.2023 16:19:02 - OK</td>
|
||
<td>active</td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
<tbody class="rd" id="scd"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="cfg-modal" class="modal fade" tabindex="-1" role="dialog">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<img src="../files/settings.svg">
|
||
<h5 class="modal-title" id="m-t"></h5>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body" id="m-b"></div>
|
||
<div class="modal-footer" id="m-f">
|
||
<button type="button" class="btn btn-primary sb">Save</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
$(document).ready(function() {
|
||
$('h1').html('Discovery');
|
||
$('#boxes').html('<div class="col-12"><div class="clearfix"><div class="float-left pt02"><input type = "checkbox" id="w-ot"><label for="w-ot" class="pl04">Move devices with warning to top</label></div><button class="btn btn-primary float-right" id="scan" disabled><div class="loader"></div> Discovering</button></div><h2 > Columns selection(max.7 items) </h2><div class="clearfix" id="cols"></div><div class="clearfix"><button class="btn btn-primary float-right" id="acs">Apply selection</button></div><div class="table-responsive"><table class="table mt-2" id="d-t"><thead id="dmax"><tr><th><i></i><i class="ab"></i> Device</th></tr></thead><tbody><tr id="myd" class="myd"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody><tbody class="rd" id="scd"></tbody></table></div></div>');
|
||
var s=0;
|
||
var bsy=false;
|
||
var i=0;
|
||
var ti;
|
||
var tb;
|
||
var tr;
|
||
var c_n=['DMX address','DMX preset','RDM UID','IP address','Head temperature [°C]','Relative humidity [%]','RAINS (max wet)','Last pressure test','Device status'];
|
||
var c_js=['dmxa','dmxp','rdm','ip','t','rh','wet','prt','sta'];
|
||
var c_s=get_cookie('dc_sel',335);
|
||
var i=0;
|
||
c_n.forEach(function(v){
|
||
$('#dmax>tr').append('<th><i></i><i class="ab"></i> '+v+'</th>');
|
||
$('#cols').append('<div class="dchb"><input type="checkbox" class="cchb"'+((c_s & (1 << i)) ? ' checked' : '') + ' id="cchb-' + i + '"><label for="cchb-'+i+'">'+v+'</label></div>');i++});
|
||
$('#dmax>tr').append('<th> </th>');
|
||
var ccb=$('#cols .cchb');
|
||
var tcs=$('#dmax>tr>th');
|
||
function upd_cols_in_rows(){
|
||
var c_s=get_cookie('dc_sel',335);
|
||
var r=$('#d-t>tbody>tr');
|
||
r.each(function(){var c=$(this).find('td');
|
||
c.each(function(i){if((i > 0)&&(i<=c_js.length)){if(c_s & (1<<(i - 1))) $(this).show();else $(this).hide()}})})}function ccb_en_dis(){var chck=ccb.filter(':checked');if(chck.length>=6){ccb.filter(':not(":checked")').attr('disabled',true)} else ccb.removeAttr('disabled')}ccb_en_dis();$('.cchb').change(function(){ccb_en_dis()});$('#acs').click(function(){var c_s=0;
|
||
var i=0;
|
||
c_n.forEach(function(v){if(ccb.eq(i).prop('checked')) c_s|=(1 << i);
|
||
if (c_s & (1 << i)) tcs.eq(i + 1).show();
|
||
else tcs.eq(i + 1).hide();
|
||
i++
|
||
});
|
||
document.cookie = 'dc_sel=' + c_s;
|
||
upd_cols_in_rows();
|
||
var ups = $('#dmax>tr i.as');
|
||
if (ups.parent().is(':hidden')) tcs.eq(0).find('i').eq(0).click()
|
||
});
|
||
$('#acs').click();
|
||
$('#scan').click(function() {
|
||
if (bsy) return;
|
||
$('#dmax').removeClass('dmax');
|
||
$('#scan').html('<div class="loader"></div> Discovering');$('#scd').html('');set_bsy(true);set_bsy(true,true);do_ajax('/start - scan ',{},function (json){if(json){set_bsy(false);s=0;clearInterval(tr)} else set_bsy(false);$('body').click()})});function set_bsy(v,b_o=false){if(!b_o) bsy=v;clearTimeout(tb);tb=setTimeout(function(){if(!v) $('#scan').removeAttr('disabled');else $('#scan').attr('disabled','1')},b_o ? 5:400)}function max_w(w){if(isNaN(w)) return w;else return '<div class="rains sl"><div style = "width:'+w+'%"></div></div>'}function do_scan(){if(bsy) return;switch (s){case 0:set_bsy(true);do_ajax('/get - child ',{},function (json){if(json){if(json['sd']==0){s=1;i=0;if(json['max']==1) $('#dmax').addClass('dmax')}} else s=255;set_bsy(false)});break;case 1:set_bsy(true);do_ajax('/get-child','i = '+i,function (json){if(json){if(json['ip']){$('#scd').append(' < tr data - value = "'+json['ip']+'" class="dn dis"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td><img class="rdmi a dn" src="../files/identify.svg"><button class="btn btn-danger btn-sm drem dn" > & #10005;</button></td></tr>');upd_cols_in_rows();i++} else s= 2}
|
||
else s = 255;
|
||
set_bsy(false)
|
||
});
|
||
break;
|
||
case 2: clearInterval(tr);
|
||
set_bsy(true);
|
||
$('#scan').html('<div class="loader"></div> Collecting');
|
||
var devs=$('#scd tr');if(devs.length==0){$('#scan').html('Discover (1)');set_bsy(false);s=255} else {i=0;devs.each(function(){var r=$(this);if(r.attr('data-value')){do_ajax('http:/'+' / '+r.attr('data-value')+'/remote',{},function (json){var t=r.find('td');if(json){t.eq(0).html('<a href="http:/'+'/'+r.attr('data-value')+'" target="_blank" > '+json['dn']+'</a>');c_js.forEach(function(v,i){if(json[v]){if(i!=6) t.eq(i+1).html(json[v]);else {t.eq(i+1).html(max_w(json[v]));t.eq(i+1).attr('data-value',json[v])}} else t.eq(i+1).html('-')});r.removeClass('na');r.find('.drem').hide();if(json['stat']==1) r.addClass('err');else r.removeClass('err');r.removeClass('dis');r.show();if(json['rdmi']==1) r.find('.rdmi').show();else r.find('.rdmi').hide()} else {if(r.hasClass('dis')){r.remove()} else {r.addClass('na').removeClass('err');r.find('.drem').show()}t.eq(9).html('disconnected')}i++;if(i>=devs.length){set_bsy(false);s=255;$('#scan').html('Discover ('+($('#scd tr').length+1)+')');tr=setInterval(function(){set_bsy(true,true);s=2},10000);$('#d-t th i.as').click()}})} else { i++}})}break}}ti=setInterval(do_scan,100);function getp(){do_ajax('/pdev_i',{},function (json){var c=$('#myd > td');if(json){c.eq(0).html(json['dn']);c_js.forEach(function(v,i){c.eq(i+1).html(i==6 ? max_w(json[v]):json[v])});upd_cols_in_rows();$('#myd').removeClass('na')} else {c.eq(9).html('disconnected');$('#myd').addClass('na')}})}getp();setInterval(getp,8000);do_ajax('/status_i',{},function (json){if(json){ptit(json['pt'])}});$(document).on('click','.drem',function(){if(confirm('Are you sure to remove offline device from list ?')) $(this).parents().eq(1).remove()});
|
||
var sort_i=0;
|
||
var sort_d=-1;function ldz3(v){return ('000'+v).substr(-3,3)}function my_sort(a,b){var A;var B;console.log(A);if(sort_i==7){B=$(a).children('td').eq(sort_i).attr('data-value');A=$(b).children('td').eq(sort_i).attr('data-value')} else {A=$(a).children('td').eq(sort_i).text();B=$(b).children('td').eq(sort_i).text()}switch (sort_i){case 1:case 5:case 6:case 7:A=parseInt(A);B=parseInt(B);break;case 4:A=A.split('.');A=ldz3(A[0])+ldz3(A[2])+ldz3(A[3])+ldz3(A[4]);B=B.split('.');B=ldz3(B[0])+ldz3(B[2])+ldz3(B[3])+ldz3(B[4]);break}if(A > B) return 1*sort_d;else if(A < B) return -1 * sort_d;
|
||
else return 0
|
||
}
|
||
$('table th i').click(function() {
|
||
$('table th i').removeClass('as');
|
||
$(this).addClass('as');
|
||
sort_i = $(this).parent().index();
|
||
sort_d = $(this).hasClass('ab') ? -1 : 1;
|
||
document.cookie = 'srt_s=' + sort_i;
|
||
document.cookie = 'srt_d=' + sort_d;
|
||
var et = $('#w-ot').prop('checked');
|
||
if (et == true) {
|
||
var rw_e = $('#d-t tbody.rd tr.err').remove();
|
||
var rw_n = $('#d-t tbody.rd tr.na').remove();
|
||
rw_e.sort(my_sort);
|
||
rw_n.sort(my_sort)
|
||
}
|
||
var rw = $('#d-t tbody.rd tr').remove();
|
||
rw.sort(my_sort);
|
||
if (et == true) {
|
||
$.each(rw_e, function(i, r) {
|
||
$('#d-t').children('tbody.rd').append(r)
|
||
});
|
||
$.each(rw_n, function(i, r) {
|
||
$('#d-t').children('tbody.rd').append(r)
|
||
})
|
||
}
|
||
$.each(rw, function(i, r) {
|
||
$('#d-t').children('tbody.rd').append(r)
|
||
})
|
||
});
|
||
sort_d = get_cookie('srt_d', 1);
|
||
$('#d-t th i').eq(get_cookie('srt_s', 0) * 2 + (sort_d == 1 ? 0 : 1)).click();
|
||
if (get_cookie('wot', 1) == 1) $('#w-ot').prop('checked', true);
|
||
$('#w-ot').change(function() {
|
||
document.cookie = 'wot=' + ($('#w-ot').prop('checked') == true ? 1 : 0);
|
||
$('#d-t th i.as').click()
|
||
})
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |