<style type="text/css">
<%
local dsp = require "luci.dispatcher"
-%>

table.imagetable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
}
<!--
table.imagetable th {
    background:#f5f5f5
    border-width: 0px;
    padding: 5px;
    border-style: solid;
    border-color: #999999;
}
table.imagetable td {
    background:#ffffffff
    border-width: 0px;
    padding: 5px;
    border-style: solid;
    border-color: #999999;
}-->
</style>
<script type="text/javascript">//<![CDATA[
	XHR.poll(5, '<%=url('admin/network/dev_app_status')%>', null,
		function(x, st)
		{
			var tb = document.getElementById('user_status_table');
			var dev_list_str=JSON.stringify(st);
			if (st && tb)
			{
				while(tb.rows.length > 1)
					tb.deleteRow(1);
				var devlist = st.devlist
				for(var i = 0; i < devlist.length; i++ )
				{
					var hostname=""
					if(devlist[i].hostname == "" || devlist[i].hostname == "*"){
						hostname="--";
					}
					else{
						hostname=devlist[i].hostname;
					}
					var tr = tb.insertRow(-1);
					//tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
					tr.insertCell(-1).innerHTML = i + 1;
					tr.insertCell(-1).innerHTML = hostname;
					tr.insertCell(-1).innerHTML = "<a href='<%=url('admin/network/appfilter/')%>"+devlist[i].mac+"'>"+devlist[i].mac+"</a>";
					tr.insertCell(-1).innerHTML = devlist[i].ip;
					var app_list_str="";
					for (var j = 0; j < devlist[i].applist.length; j++){
						console.log(devlist[i].applist[j].name);
						app_list_str+=devlist[i].applist[j].name;
						if (j != devlist[i].applist.length - 1)
						app_list_str+=","
					}
					if(app_list_str == ""){
						app_list_str="--"
					}
					tr.insertCell(-1).innerHTML = app_list_str;
					if (devlist[i].online == 1)
						tr.insertCell(-1).innerHTML = "<%:Online%>";
					else
						tr.insertCell(-1).innerHTML = "<%:Offline%>";
				}
			}
		}
	);

//]]></script>


<fieldset class="cbi-section">
	<legend><%:Client List%></legend>
	<table class="imagetable" id="user_status_table">
		<tr>
			<th ><%:Id%></th>
			<th ><%:Hostname%></th>
			<th ><%:Mac%></th>
			<th ><%:Ip%></th>
			<th><%:Common App(TOP5)%></th>
			<th><%:Online Status%></th>
		</tr>
		<tr>
			<td colspan="8"><em><br /><%:Collecting data...%></em></td>
		</tr>
	</table>
</fieldset>
