1
0
mirror of https://github.com/DigitalDevices/octonet.git synced 2023-10-10 11:36:52 +00:00

Stream and tuner status converted to ajax

This commit is contained in:
mvoelkel
2016-06-28 20:35:41 +02:00
parent 8ea0b64240
commit 6c63684929
3 changed files with 138 additions and 115 deletions

View File

@@ -1,4 +1,4 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@@ -7,13 +7,35 @@
<link rel="stylesheet" type="text/css" href="/style.css">
<script type="text/javascript" src="/menu.js"></script>
<!-- Add additional scripts and settings here -->
<script id=script1 type="text/javascript" src="/octoserve/streamstatus.js"></script>
<!-- Add page scripts here -->
<script type="text/javascript">
var LastTimeStamp = 0;
var LastBytes;
var LastBytes = null;
var xmlhttp = new XMLHttpRequest();
var url = "/octoserve/streamstatus.json";
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState == 4 )
{
if( xmlhttp.status == 200 )
myFunction(xmlhttp.responseText);
}
}
function myFunction(response)
{
try
{
var js = JSON.parse(response);
Show(js.StreamList,js.TimeStamp);
}
catch(err) {}
window.setTimeout(renew,1000);
}
function Diff(a,b)
{
@@ -25,34 +47,50 @@ function Diff(a,b)
return b - a;
}
function Show()
function Show(StreamList,TimeStamp)
{
if( LastBytes == null )
{
LastBytes = new Array();
LastTimeStamp = TimeStamp;
for( var i = 0; i < StreamList.length; i++ )
{
LastBytes[i] = 0;
if( StreamList[i].Status == "Active" )
{
LastBytes[i] = StreamList[i].Bytes;
}
document.getElementById("trStream"+i).style.display = "table-row";
}
}
for(var i = 0; i < StreamList.length ; i++ )
{
if( StreamList[i].Status == "Active" )
{
document.getElementById("elStatus"+i).firstChild.nodeValue = "Running";
document.getElementById("elInput"+i).firstChild.nodeValue = StreamList[i].Input + 1;
document.getElementById("elClient"+i).firstChild.nodeValue = StreamList[i].Client;
document.getElementById("elPackets"+i).firstChild.nodeValue = StreamList[i].Packets;
document.getElementById("tdStatus"+i).firstChild.nodeValue = "Running";
document.getElementById("tdInput"+i).firstChild.nodeValue = StreamList[i].Input + 1;
document.getElementById("tdClient"+i).firstChild.nodeValue = StreamList[i].Client;
document.getElementById("tdPackets"+i).firstChild.nodeValue = StreamList[i].Packets;
var TimeDiff = Diff(LastTimeStamp,TimeStamp);
var BytesDiff = Diff(LastBytes[i],StreamList[i].Bytes);
if( TimeDiff > 0 && BytesDiff > 0 )
{
var Speed = 8000 * BytesDiff / TimeDiff;
document.getElementById("elSpeed"+i).firstChild.nodeValue = Speed.toFixed(0);
document.getElementById("tdSpeed"+i).firstChild.nodeValue = Speed.toFixed(0);
LastBytes[i] = StreamList[i].Bytes;
}
else
document.getElementById("elSpeed"+i).firstChild.nodeValue = "";
document.getElementById("tdSpeed"+i).firstChild.nodeValue = "";
}
else
{
document.getElementById("elStatus"+i).firstChild.nodeValue = "Stopped";
document.getElementById("elInput"+i).firstChild.nodeValue = "";
document.getElementById("elClient"+i).firstChild.nodeValue = "";
document.getElementById("elPackets"+i).firstChild.nodeValue = "";
document.getElementById("elSpeed"+i).firstChild.nodeValue = "";
document.getElementById("tdStatus"+i).firstChild.nodeValue = "Stopped";
document.getElementById("tdInput"+i).firstChild.nodeValue = "";
document.getElementById("tdClient"+i).firstChild.nodeValue = "";
document.getElementById("tdPackets"+i).firstChild.nodeValue = "";
document.getElementById("tdSpeed"+i).firstChild.nodeValue = "";
LastBytes[i] = 0;
}
}
@@ -61,34 +99,13 @@ function Show()
function renew()
{
script = document.getElementById("script1");
head = document.getElementsByTagName('head')[0];
head.removeChild(script);
newscript = document.createElement('script');
newscript.id = "script1";
newscript.type = script.type;
newscript.src = script.src;
head.appendChild(newscript);
Show();
window.setTimeout(renew,1000);
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function OnLoad()
{
LastBytes = new Array();
LastTimeStamp = TimeStamp;
for( var i = 0; i < StreamList.length; i++ )
{
LastBytes[i] = 0;
if( StreamList[i].Status == "Active" )
{
LastBytes[i] = StreamList[i].Bytes;
}
}
Show();
window.setTimeout(renew,1000);
}
@@ -130,18 +147,17 @@ function OnLoad()
<th>Speed</th>
</tr>
<script type="text/javascript">
for( i = 0; i < StreamList.length ; i++ )
{
document.write('<tr>');
document.write('<td>' + (i+1) + '</td>');
document.write('<td id="elStatus'+i+'">&nbsp;</td>');
document.write('<td id="elInput'+i+'">&nbsp;</td>');
document.write('<td id="elClient'+i+'">&nbsp;</td>');
document.write('<td id="elPackets'+i+'">&nbsp;</td>');
document.write('<td id="elSpeed'+i+'">&nbsp;</td>');
document.write('</tr>');
}
for( var i = 0; i < 16 ; i++ )
{
document.write('<tr id="trStream'+i+'" style="display:none">');
document.write('<td>' + (i+1) + '</td>');
document.write('<td id="tdStatus'+i+'">&nbsp;</td>');
document.write('<td id="tdInput'+i+'">&nbsp;</td>');
document.write('<td id="tdClient'+i+'">&nbsp;</td>');
document.write('<td id="tdPackets'+i+'">&nbsp;</td>');
document.write('<td id="tdSpeed'+i+'">&nbsp;</td>');
document.write('</tr>');
}
</script>
</table>