<% local dsp=require "luci.dispatcher" -%>
	<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 = 'tr cbi-rowstyle-' + ((i % 2) + 1);
						tr.insertCell(-1).innerHTML = i + 1;
						tr.insertCell(-1).innerHTML = hostname;
						tr.insertCell(-1).innerHTML = "<a href='<%=url('admin/services/appfilter/user_list/')%>" + 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%>";
						}
						var childs = tr.childNodes;
						Array.prototype.forEach.call(childs, function (child) {
							child.className = 'td';

						});
					}
				}
			}
		);

//]]></script>


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